feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-badge/lib/components/CounterBadge/useCounterBadgeStyles.styles.js

@@ -0,0 +1,40 @@
+'use client';
+
+import { mergeClasses, __styles } from '@griffel/react';
+import { useBadgeStyles_unstable } from '../Badge/useBadgeStyles.styles';
+export const counterBadgeClassNames = {
+  root: 'fui-CounterBadge',
+  icon: 'fui-CounterBadge__icon'
+};
+const useStyles = /*#__PURE__*/__styles({
+  dot: {
+    Bf4jedk: "fgfkb25",
+    a9b677: "f16dn6v3",
+    Bqenvij: "f3mu39s",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1mk8lai"
+  },
+  hide: {
+    mc9l5x: "fjseox"
+  }
+}, {
+  d: [".fgfkb25{min-width:auto;}", ".f16dn6v3{width:6px;}", ".f3mu39s{height:6px;}", [".f1mk8lai{padding:0;}", {
+    p: -1
+  }], ".fjseox{display:none;}"]
+});
+/**
+ * Applies style classnames to slots
+ */
+export const useCounterBadgeStyles_unstable = state => {
+  'use no memo';
+
+  const styles = useStyles();
+  state.root.className = mergeClasses(counterBadgeClassNames.root, state.dot && styles.dot, !state.root.children && !state.dot && styles.hide, state.root.className);
+  if (state.icon) {
+    state.icon.className = mergeClasses(counterBadgeClassNames.icon, state.icon.className);
+  }
+  return useBadgeStyles_unstable(state);
+};