feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-combobox/lib/components/Option/useOptionStyles.styles.js

@@ -0,0 +1,195 @@
+'use client';
+
+import { tokens } from '@fluentui/react-theme';
+import { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+export const optionClassNames = {
+  root: 'fui-Option',
+  checkIcon: 'fui-Option__checkIcon'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    Bt984gj: "f122n59",
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "ft85np5",
+    sj55zd: "f19n0e5",
+    i8kkvl: "f1ufnopg",
+    Bceei9c: "f1k6fduh",
+    mc9l5x: "f22iagw",
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bg96gwp: "f1i3iumi",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "fm5eomj",
+    qhf8xq: "f10pi13n",
+    Jwef8y: "f1knas48",
+    Bi91k9c: "feu1g3u",
+    zqbkvg: "fo79ri9",
+    h82x05: ["f1osiabc", "f1e8le25"],
+    cqj998: "f1yusjty",
+    j3hlsh: ["f1e8le25", "f1osiabc"],
+    ecr2s2: "fb40n2d",
+    lj723h: "f1g4hkjv",
+    Btxx2vb: "f1lnr2zp",
+    sltcwy: ["f1ogfk9z", "f1g7j8ec"],
+    dnwvvm: "fiuf46r",
+    Blyvkvs: ["f1g7j8ec", "f1ogfk9z"]
+  },
+  active: {
+    Bowz1zl: "f11vrvdw",
+    oxogb1: "f17hxjb7",
+    Ix2sn8: "f1dha69c",
+    q7v32p: "f1lm7500",
+    B7cbj04: 0,
+    Bewtojm: 0,
+    b50fsz: 0,
+    B1wzb3v: 0,
+    Bqwk70n: 0,
+    B37u8z8: 0,
+    avt0cx: 0,
+    f0sref: 0,
+    B9fkznv: 0,
+    Be3o27t: 0,
+    Bertapg: 0,
+    B53xpsf: 0,
+    Bsv72rj: 0,
+    B39dzdd: 0,
+    Btq9bd3: 0,
+    Bqfxd14: 0,
+    atup0s: "fo7xqb",
+    Fffuxt: 0,
+    Bttcd12: 0,
+    Beitzug: 0,
+    Bqougee: 0,
+    B86i8pi: "f1kurthe",
+    Bhijsxg: "fwq15dy",
+    kktds4: "f1pb3wry",
+    Bmau3bo: ["ftjv2f4", "f1flhb1f"],
+    npektv: ["f1flhb1f", "ftjv2f4"]
+  },
+  disabled: {
+    sj55zd: "f1s2aq7o",
+    Jwef8y: "f9ql6rf",
+    Bi91k9c: "fvgxktp",
+    zqbkvg: "f185j3qj",
+    h82x05: ["f1dligi3", "f1vydzie"],
+    cqj998: "fjw1di3",
+    j3hlsh: ["f1vydzie", "f1dligi3"],
+    ecr2s2: "fgj9um3",
+    lj723h: "f19wldhg",
+    Btxx2vb: "f1ss0kt2",
+    sltcwy: ["f1t6oli3", "fjy9ci8"],
+    dnwvvm: "fresaxk",
+    Blyvkvs: ["fjy9ci8", "f1t6oli3"],
+    B7iucu3: "f1cyfu5x"
+  },
+  selected: {},
+  checkIcon: {
+    Bnnss6s: "fi64zpg",
+    Be2twd7: "fod5ikn",
+    Frg6f3: ["f18b9hdq", "fn6qj8t"],
+    t21cq0: ["f1xk557c", "f1h9en5y"],
+    Bcdw1i0: "fd7fpy0",
+    Bo70h7d: "fvc9v3g"
+  },
+  selectedCheck: {
+    Bcdw1i0: "f1022m68"
+  },
+  multiselectCheck: {
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "f1l3cf7o",
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "fq9zq91",
+    B7ck84d: "f1ewtqcl",
+    mc9l5x: "f22iagw",
+    Bt984gj: "f122n59",
+    Brf1p80: "f4d9j23",
+    Bkfmm31: "f1w9h62z",
+    Be2twd7: "f1ugzwwg",
+    Bqenvij: "fd461yt",
+    a9b677: "fjw5fx7",
+    Bcdw1i0: "f1022m68"
+  },
+  selectedMultiselectCheck: {
+    De3pzq: "ftywsgz",
+    sj55zd: "fqpbvvt",
+    g2u3we: "f3xi7mh",
+    h3c5rm: ["ftovhe4", "f1wczvin"],
+    B9xav0g: "f68vbr6",
+    zhjwy3: ["f1wczvin", "ftovhe4"]
+  },
+  checkDisabled: {
+    sj55zd: "f1s2aq7o",
+    B7iucu3: "f1cyfu5x"
+  },
+  multiselectCheckDisabled: {
+    g2u3we: "f1r1t4y1",
+    h3c5rm: ["fmj8ijw", "figx54m"],
+    B9xav0g: "f360ss8",
+    zhjwy3: ["figx54m", "fmj8ijw"]
+  }
+}, {
+  d: [".f122n59{align-items:center;}", [".ft85np5{border-radius:var(--borderRadiusMedium);}", {
+    p: -1
+  }], ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1ufnopg{column-gap:var(--spacingHorizontalXS);}", ".f1k6fduh{cursor:pointer;}", ".f22iagw{display:flex;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", [".fm5eomj{padding:var(--spacingVerticalSNudge) var(--spacingHorizontalS);}", {
+    p: -1
+  }], ".f10pi13n{position:relative;}", ".f11vrvdw[data-activedescendant-focusvisible]::after{content:\"\";}", ".f17hxjb7[data-activedescendant-focusvisible]::after{position:absolute;}", ".f1dha69c[data-activedescendant-focusvisible]::after{pointer-events:none;}", ".f1lm7500[data-activedescendant-focusvisible]::after{z-index:1;}", [".fo7xqb[data-activedescendant-focusvisible]::after{border:2px solid var(--colorStrokeFocus2);}", {
+    p: -2
+  }], [".f1kurthe[data-activedescendant-focusvisible]::after{border-radius:var(--borderRadiusMedium);}", {
+    p: -1
+  }], ".fwq15dy[data-activedescendant-focusvisible]::after{top:-2px;}", ".f1pb3wry[data-activedescendant-focusvisible]::after{bottom:-2px;}", ".ftjv2f4[data-activedescendant-focusvisible]::after{left:-2px;}", ".f1flhb1f[data-activedescendant-focusvisible]::after{right:-2px;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fi64zpg{flex-shrink:0;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".f18b9hdq{margin-left:calc(var(--spacingHorizontalXXS) * -1);}", ".fn6qj8t{margin-right:calc(var(--spacingHorizontalXXS) * -1);}", ".f1xk557c{margin-right:var(--spacingHorizontalXXS);}", ".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}", ".fd7fpy0{visibility:hidden;}", ".fvc9v3g svg{display:block;}", ".f1022m68{visibility:visible;}", [".f1l3cf7o{border:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);}", {
+    p: -2
+  }], [".fq9zq91{border-radius:var(--borderRadiusSmall);}", {
+    p: -1
+  }], ".f1ewtqcl{box-sizing:border-box;}", ".f4d9j23{justify-content:center;}", ".f1w9h62z{fill:currentColor;}", ".f1ugzwwg{font-size:12px;}", ".fd461yt{height:16px;}", ".fjw5fx7{width:16px;}", ".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".fqpbvvt{color:var(--colorNeutralForegroundInverted);}", ".f3xi7mh{border-top-color:var(--colorCompoundBrandBackground);}", ".ftovhe4{border-right-color:var(--colorCompoundBrandBackground);}", ".f1wczvin{border-left-color:var(--colorCompoundBrandBackground);}", ".f68vbr6{border-bottom-color:var(--colorCompoundBrandBackground);}", ".f1r1t4y1{border-top-color:var(--colorNeutralForegroundDisabled);}", ".fmj8ijw{border-right-color:var(--colorNeutralForegroundDisabled);}", ".figx54m{border-left-color:var(--colorNeutralForegroundDisabled);}", ".f360ss8{border-bottom-color:var(--colorNeutralForegroundDisabled);}"],
+  h: [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".fo79ri9:hover .fui-Option__checkIcon{border-top-color:var(--colorNeutralForeground1Hover);}", ".f1osiabc:hover .fui-Option__checkIcon{border-right-color:var(--colorNeutralForeground1Hover);}", ".f1e8le25:hover .fui-Option__checkIcon{border-left-color:var(--colorNeutralForeground1Hover);}", ".f1yusjty:hover .fui-Option__checkIcon{border-bottom-color:var(--colorNeutralForeground1Hover);}", ".f9ql6rf:hover{background-color:var(--colorTransparentBackground);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".f185j3qj:hover .fui-Option__checkIcon{border-top-color:var(--colorNeutralForegroundDisabled);}", ".f1dligi3:hover .fui-Option__checkIcon{border-right-color:var(--colorNeutralForegroundDisabled);}", ".f1vydzie:hover .fui-Option__checkIcon{border-left-color:var(--colorNeutralForegroundDisabled);}", ".fjw1di3:hover .fui-Option__checkIcon{border-bottom-color:var(--colorNeutralForegroundDisabled);}"],
+  a: [".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}", ".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}", ".f1lnr2zp:active .fui-Option__checkIcon{border-top-color:var(--colorNeutralForeground1Hover);}", ".f1ogfk9z:active .fui-Option__checkIcon{border-right-color:var(--colorNeutralForeground1Hover);}", ".f1g7j8ec:active .fui-Option__checkIcon{border-left-color:var(--colorNeutralForeground1Hover);}", ".fiuf46r:active .fui-Option__checkIcon{border-bottom-color:var(--colorNeutralForeground1Hover);}", ".fgj9um3:active{background-color:var(--colorTransparentBackground);}", ".f19wldhg:active{color:var(--colorNeutralForegroundDisabled);}", ".f1ss0kt2:active .fui-Option__checkIcon{border-top-color:var(--colorNeutralForegroundDisabled);}", ".f1t6oli3:active .fui-Option__checkIcon{border-right-color:var(--colorNeutralForegroundDisabled);}", ".fjy9ci8:active .fui-Option__checkIcon{border-left-color:var(--colorNeutralForegroundDisabled);}", ".fresaxk:active .fui-Option__checkIcon{border-bottom-color:var(--colorNeutralForegroundDisabled);}"],
+  m: [["@media (forced-colors: active){.f1cyfu5x{color:GrayText;}}", {
+    m: "(forced-colors: active)"
+  }]]
+});
+/**
+ * Apply styling to the Option slots based on the state
+ */
+export const useOptionStyles_unstable = state => {
+  'use no memo';
+
+  const {
+    disabled,
+    multiselect,
+    selected
+  } = state;
+  const styles = useStyles();
+  state.root.className = mergeClasses(optionClassNames.root, styles.root, styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);
+  if (state.checkIcon) {
+    state.checkIcon.className = mergeClasses(optionClassNames.checkIcon, styles.checkIcon, multiselect && styles.multiselectCheck, selected && styles.selectedCheck, selected && multiselect && styles.selectedMultiselectCheck, disabled && styles.checkDisabled, disabled && multiselect && styles.multiselectCheckDisabled, state.checkIcon.className);
+  }
+  return state;
+};