feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-rating/lib-commonjs/components/RatingItem/RatingItem.js

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "RatingItem", {
+    enumerable: true,
+    get: function() {
+        return RatingItem;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useRatingItem = require("./useRatingItem");
+const _renderRatingItem = require("./renderRatingItem");
+const _useRatingItemStylesstyles = require("./useRatingItemStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const RatingItem = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useRatingItem.useRatingItem_unstable)(props, ref);
+    (0, _useRatingItemStylesstyles.useRatingItemStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useRatingItemStyles_unstable')(state);
+    return (0, _renderRatingItem.renderRatingItem_unstable)(state);
+});
+RatingItem.displayName = 'RatingItem';

node_modules/@fluentui/react-rating/lib-commonjs/components/RatingItem/RatingItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/RatingItem/RatingItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useRatingItem_unstable } from './useRatingItem';\nimport { renderRatingItem_unstable } from './renderRatingItem';\nimport { useRatingItemStyles_unstable } from './useRatingItemStyles.styles';\nimport type { RatingItemProps } from './RatingItem.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * RatingItem is an item that will be used to set or display a rating value.\n */\nexport const RatingItem: ForwardRefComponent<RatingItemProps> = React.forwardRef((props, ref) => {\n  const state = useRatingItem_unstable(props, ref);\n\n  useRatingItemStyles_unstable(state);\n  useCustomStyleHook_unstable('useRatingItemStyles_unstable')(state);\n\n  return renderRatingItem_unstable(state);\n});\n\nRatingItem.displayName = 'RatingItem';\n"],"names":["React","useRatingItem_unstable","renderRatingItem_unstable","useRatingItemStyles_unstable","useCustomStyleHook_unstable","RatingItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;+BAEQ,kBAAkB;kCACf,qBAAqB;2CAClB,+BAA+B;qCAEhC,kCAAkC;AAKvE,MAAMK,aAAAA,WAAAA,GAAmDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,YAAQR,qCAAAA,EAAuBM,OAAOC;QAE5CL,uDAAAA,EAA6BM;QAC7BL,gDAAAA,EAA4B,gCAAgCK;IAE5D,WAAOP,2CAAAA,EAA0BO;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}

node_modules/@fluentui/react-rating/lib-commonjs/components/RatingItem/RatingItem.types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

node_modules/@fluentui/react-rating/lib-commonjs/components/RatingItem/RatingItem.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/RatingItem/RatingItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { RatingState } from '../Rating/Rating.types';\nimport { RatingDisplayState } from '../RatingDisplay/RatingDisplay.types';\n\nexport type RatingItemSlots = {\n  /**\n   * The root slot of the RatingItem.\n   * Default html element is span\n   */\n  root: NonNullable<Slot<'span'>>;\n  /**\n   * Icon displayed when the rating value is greater than or equal to the item's value.\n   */\n  selectedIcon?: NonNullable<Slot<'div'>>;\n  /**\n   * Icon displayed when the rating value is less than the item's value.\n   */\n  unselectedIcon?: NonNullable<Slot<'div'>>;\n  /**\n   * Radio input slot used for half star precision\n   */\n  halfValueInput?: NonNullable<Slot<'input'>>;\n  /**\n   * Radio input slot used for full star precision\n   */\n  fullValueInput?: NonNullable<Slot<'input'>>;\n};\n\n/**\n * RatingItem Props\n */\nexport type RatingItemProps = ComponentProps<Partial<RatingItemSlots>> & {\n  /**\n   * The positive whole number value that is displayed by this RatingItem\n   */\n  value?: number;\n};\n\n/**\n * RatingItem base props — same as RatingItemProps (no design-only props at this level).\n */\nexport type RatingItemBaseProps = RatingItemProps;\n\n/**\n * State used in rendering RatingItem\n */\nexport type RatingItemState = ComponentState<RatingItemSlots> &\n  Required<Pick<RatingItemProps, 'value'>> &\n  Pick<RatingState, 'color' | 'step' | 'size'> & {\n    iconFillWidth: number;\n    appearance: 'outline' | 'filled';\n  };\n\n/**\n * RatingItem base state — excludes design props (color, size) from context.\n */\nexport type RatingItemBaseState = Omit<RatingItemState, 'color' | 'size'>;\n\nexport type RatingItemContextValue = Partial<Pick<RatingState, 'name' | 'hoveredValue' | 'value'>> &\n  Pick<RatingState, 'color' | 'iconFilled' | 'iconOutline' | 'itemLabel' | 'step' | 'size'> &\n  Partial<Pick<RatingDisplayState, 'compact'>> & {\n    interactive?: boolean;\n  };\n"],"names":[],"mappings":""}

node_modules/@fluentui/react-rating/lib-commonjs/components/RatingItem/index.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    RatingItem: function() {
+        return _RatingItem.RatingItem;
+    },
+    ratingItemClassNames: function() {
+        return _useRatingItemStylesstyles.ratingItemClassNames;
+    },
+    renderRatingItem_unstable: function() {
+        return _renderRatingItem.renderRatingItem_unstable;
+    },
+    useRatingItemBase_unstable: function() {
+        return _useRatingItem.useRatingItemBase_unstable;
+    },
+    useRatingItemStyles_unstable: function() {
+        return _useRatingItemStylesstyles.useRatingItemStyles_unstable;
+    },
+    useRatingItem_unstable: function() {
+        return _useRatingItem.useRatingItem_unstable;
+    }
+});
+const _RatingItem = require("./RatingItem");
+const _renderRatingItem = require("./renderRatingItem");
+const _useRatingItem = require("./useRatingItem");
+const _useRatingItemStylesstyles = require("./useRatingItemStyles.styles");

node_modules/@fluentui/react-rating/lib-commonjs/components/RatingItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/RatingItem/index.ts"],"sourcesContent":["export { RatingItem } from './RatingItem';\nexport type {\n  RatingItemContextValue,\n  RatingItemProps,\n  RatingItemBaseProps,\n  RatingItemSlots,\n  RatingItemState,\n  RatingItemBaseState,\n} from './RatingItem.types';\nexport { renderRatingItem_unstable } from './renderRatingItem';\nexport { useRatingItem_unstable, useRatingItemBase_unstable } from './useRatingItem';\nexport { ratingItemClassNames, useRatingItemStyles_unstable } from './useRatingItemStyles.styles';\n"],"names":["RatingItem","renderRatingItem_unstable","useRatingItem_unstable","useRatingItemBase_unstable","ratingItemClassNames","useRatingItemStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,sBAAU;;;eAWVI,+CAAoB;;;eAFpBH,2CAAyB;;;eACDE,yCAA0B;;;eAC5BE,uDAA4B;;;eADlDH,qCAAsB;;;4BAVJ,eAAe;kCASA,qBAAqB;+BACI,kBAAkB;2CAClB,+BAA+B"}

node_modules/@fluentui/react-rating/lib-commonjs/components/RatingItem/renderRatingItem.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderRatingItem_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderRatingItem_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const renderRatingItem_unstable = (state)=>{
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
+        children: [
+            state.halfValueInput && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.halfValueInput, {}),
+            state.fullValueInput && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.fullValueInput, {}),
+            state.unselectedIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.unselectedIcon, {}),
+            state.selectedIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.selectedIcon, {})
+        ]
+    });
+};

node_modules/@fluentui/react-rating/lib-commonjs/components/RatingItem/renderRatingItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/RatingItem/renderRatingItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { RatingItemBaseState, RatingItemSlots } from './RatingItem.types';\n\n/**\n * Render the final JSX of RatingItem\n */\nexport const renderRatingItem_unstable = (state: RatingItemBaseState): JSXElement => {\n  assertSlots<RatingItemSlots>(state);\n\n  return (\n    <state.root>\n      {state.halfValueInput && <state.halfValueInput />}\n      {state.fullValueInput && <state.fullValueInput />}\n      {state.unselectedIcon && <state.unselectedIcon />}\n      {state.selectedIcon && <state.selectedIcon />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderRatingItem_unstable","state","root","halfValueInput","fullValueInput","unselectedIcon","selectedIcon"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,kCAAkC,CAACC;QACxCF,2BAAAA,EAA6BE;IAE7B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,cAAc,IAAA,WAAA,OAAI,eAAA,EAACF,MAAME,cAAc,EAAA,CAAA;YAC7CF,MAAMG,cAAc,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,cAAc,EAAA,CAAA;YAC7CH,MAAMI,cAAc,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,cAAc,EAAA,CAAA;YAC7CJ,MAAMK,YAAY,IAAA,WAAA,OAAI,eAAA,EAACL,MAAMK,YAAY,EAAA,CAAA;;;AAGhD,EAAE"}

node_modules/@fluentui/react-rating/lib-commonjs/components/RatingItem/useRatingItem.js

@@ -0,0 +1,129 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useRatingItemBase_unstable: function() {
+        return useRatingItemBase_unstable;
+    },
+    useRatingItem_unstable: function() {
+        return useRatingItem_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactutilities = require("@fluentui/react-utilities");
+const _reacttabster = require("@fluentui/react-tabster");
+const _RatingItemContext = require("../../contexts/RatingItemContext");
+const defaultItemLabel = (num)=>num + '';
+const useRatingItem_unstable = (props, ref)=>{
+    const context = (0, _RatingItemContext.useRatingItemContextValue_unstable)();
+    const state = useRatingItemBase_unstable(props, ref);
+    return {
+        ...state,
+        color: context.color,
+        size: context.size
+    };
+};
+const useRatingItemBase_unstable = (props, ref)=>{
+    const context = (0, _RatingItemContext.useRatingItemContextValue_unstable)();
+    const { value = 0 } = props;
+    const { itemLabel = defaultItemLabel, iconFilled: IconFilled, iconOutline: IconOutline } = context;
+    const ratingValue = Math.round((context.value || 0) * 2) / 2; // round to the nearest 0.5
+    var _context_hoveredValue;
+    const displayedRatingValue = (_context_hoveredValue = context.hoveredValue) !== null && _context_hoveredValue !== void 0 ? _context_hoveredValue : ratingValue;
+    const appearance = context.interactive ? 'outline' : 'filled';
+    let iconFillWidth;
+    if (context.compact || displayedRatingValue >= value) {
+        iconFillWidth = 1;
+    } else if (displayedRatingValue >= value - 0.5) {
+        iconFillWidth = 0.5;
+    } else {
+        iconFillWidth = 0;
+    }
+    const root = _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('span', {
+        ref: (0, _reactutilities.useMergedRefs)((0, _reacttabster.useFocusWithin)(), ref),
+        ...props
+    }), {
+        elementType: 'span'
+    });
+    let unselectedIcon;
+    if (iconFillWidth < 1) {
+        unselectedIcon = _reactutilities.slot.always(props.unselectedIcon, {
+            defaultProps: {
+                children: appearance === 'filled' ? /*#__PURE__*/ _react.createElement(IconFilled, null) : /*#__PURE__*/ _react.createElement(IconOutline, null),
+                'aria-hidden': true
+            },
+            elementType: 'div'
+        });
+    }
+    let selectedIcon;
+    if (iconFillWidth > 0) {
+        selectedIcon = _reactutilities.slot.always(props.selectedIcon, {
+            defaultProps: {
+                children: /*#__PURE__*/ _react.createElement(IconFilled, null),
+                'aria-hidden': true
+            },
+            elementType: 'div'
+        });
+    }
+    let halfValueInput;
+    if (context.interactive && context.step === 0.5) {
+        halfValueInput = _reactutilities.slot.always(props.halfValueInput, {
+            defaultProps: {
+                type: 'radio',
+                name: context.name,
+                value: value - 0.5,
+                checked: ratingValue === value - 0.5,
+                'aria-label': itemLabel(value - 0.5),
+                onChange: ()=>{
+                // This empty onChange handler silences an incorrect React warning about not using onChange for a controlled input.
+                // The parent Rating component has the real onChange handler to listen to change events from this input.
+                }
+            },
+            elementType: 'input'
+        });
+    }
+    let fullValueInput;
+    if (context.interactive) {
+        fullValueInput = _reactutilities.slot.always(props.fullValueInput, {
+            defaultProps: {
+                type: 'radio',
+                name: context.name,
+                value,
+                checked: ratingValue === value,
+                'aria-label': itemLabel(value),
+                onChange: ()=>{
+                // This empty onChange handler silences an incorrect React warning about not using onChange for a controlled input.
+                // The parent Rating component has the real onChange handler to listen to change events from this input.
+                }
+            },
+            elementType: 'input'
+        });
+    }
+    return {
+        appearance,
+        step: context.step,
+        iconFillWidth,
+        value,
+        components: {
+            root: 'span',
+            selectedIcon: 'div',
+            unselectedIcon: 'div',
+            halfValueInput: 'input',
+            fullValueInput: 'input'
+        },
+        root,
+        selectedIcon,
+        unselectedIcon,
+        halfValueInput,
+        fullValueInput
+    };
+};

node_modules/@fluentui/react-rating/lib-commonjs/components/RatingItem/useRatingItemStyles.styles.js

@@ -0,0 +1,301 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ratingItemClassNames: function() {
+        return ratingItemClassNames;
+    },
+    useRatingItemStyles_unstable: function() {
+        return useRatingItemStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const ratingItemClassNames = {
+    root: 'fui-RatingItem',
+    selectedIcon: 'fui-RatingItem__selectedIcon',
+    unselectedIcon: 'fui-RatingItem__unselectedIcon',
+    halfValueInput: 'fui-RatingItem__halfValueInput',
+    fullValueInput: 'fui-RatingItem__fullValueInput'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        qhf8xq: "f10pi13n",
+        Brovlpu: "ftqa4ok",
+        B486eqv: "f2hkw1w",
+        Bssx7fj: "f1b1k54r",
+        uh7if5: [
+            "f4ne723",
+            "fqqcjud"
+        ],
+        clntm0: "fh7aioi",
+        Dlk2r6: [
+            "fqqcjud",
+            "f4ne723"
+        ],
+        h6p2u: "f1ufm4qn",
+        I6qiy5: [
+            "f1qnwcb4",
+            "fgrk5zm"
+        ],
+        yzno9d: "fi52z01",
+        By0wis0: [
+            "fgrk5zm",
+            "f1qnwcb4"
+        ],
+        B2j2mmj: "ffht0p2",
+        wigs8: "f1p0ul1q",
+        pbfy6t: "f1c901ms",
+        B0v4ure: "f1alokd7",
+        Byrf0fs: 0,
+        Bsiemmq: 0,
+        Bwckmig: 0,
+        skfxo0: 0,
+        Iidy0u: 0,
+        B98u21t: 0,
+        Bvwlmkc: 0,
+        jo1ztg: 0,
+        Ba1iezr: 0,
+        Blmvk6g: 0,
+        B24cy0v: 0,
+        Bil7v7r: 0,
+        Br3gin4: 0,
+        nr063g: 0,
+        ghq09: 0,
+        Bbgo44z: 0,
+        Bseh09z: "fmj8fco",
+        az1dzo: 0,
+        Ba3ybja: 0,
+        B6352mv: 0,
+        vppk2z: 0,
+        Biaj6j7: "f1iwowo3",
+        B2pnrqr: "f1spmvte",
+        B29w5g4: [
+            "fgp7k2s",
+            "f13pb23"
+        ],
+        Bhhzhcn: "f1ihbrwi",
+        Bec0n69: [
+            "f13pb23",
+            "fgp7k2s"
+        ]
+    },
+    small: {
+        Be2twd7: "f1ugzwwg",
+        a9b677: "frx94fk",
+        Bqenvij: "fvblgha"
+    },
+    medium: {
+        Be2twd7: "f4ybsrx",
+        a9b677: "fjw5fx7",
+        Bqenvij: "fd461yt"
+    },
+    large: {
+        Be2twd7: "fe5j1ua",
+        a9b677: "f64fuq3",
+        Bqenvij: "fjamq6b"
+    },
+    "extra-large": {
+        Be2twd7: "f24l1pt",
+        a9b677: "f1w9dchk",
+        Bqenvij: "fxldao9"
+    }
+}, {
+    d: [
+        ".f10pi13n{position:relative;}",
+        ".f1b1k54r[data-fui-focus-within]:focus-within{border-top-color:transparent;}",
+        ".f4ne723[data-fui-focus-within]:focus-within{border-right-color:transparent;}",
+        ".fqqcjud[data-fui-focus-within]:focus-within{border-left-color:transparent;}",
+        ".fh7aioi[data-fui-focus-within]:focus-within{border-bottom-color:transparent;}",
+        ".ffht0p2[data-fui-focus-within]:focus-within::after{content:\"\";}",
+        ".f1p0ul1q[data-fui-focus-within]:focus-within::after{position:absolute;}",
+        ".f1c901ms[data-fui-focus-within]:focus-within::after{pointer-events:none;}",
+        ".f1alokd7[data-fui-focus-within]:focus-within::after{z-index:1;}",
+        [
+            ".fmj8fco[data-fui-focus-within]:focus-within::after{border:2px solid var(--colorStrokeFocus2);}",
+            {
+                p: -2
+            }
+        ],
+        [
+            ".f1iwowo3[data-fui-focus-within]:focus-within::after{border-radius:var(--borderRadiusMedium);}",
+            {
+                p: -1
+            }
+        ],
+        ".f1spmvte[data-fui-focus-within]:focus-within::after{top:calc(2px * -1);}",
+        ".fgp7k2s[data-fui-focus-within]:focus-within::after{right:calc(2px * -1);}",
+        ".f13pb23[data-fui-focus-within]:focus-within::after{left:calc(2px * -1);}",
+        ".f1ihbrwi[data-fui-focus-within]:focus-within::after{bottom:calc(2px * -1);}",
+        ".f1ugzwwg{font-size:12px;}",
+        ".frx94fk{width:12px;}",
+        ".fvblgha{height:12px;}",
+        ".f4ybsrx{font-size:16px;}",
+        ".fjw5fx7{width:16px;}",
+        ".fd461yt{height:16px;}",
+        ".fe5j1ua{font-size:20px;}",
+        ".f64fuq3{width:20px;}",
+        ".fjamq6b{height:20px;}",
+        ".f24l1pt{font-size:28px;}",
+        ".f1w9dchk{width:28px;}",
+        ".fxldao9{height:28px;}"
+    ],
+    f: [
+        ".ftqa4ok:focus{outline-style:none;}"
+    ],
+    i: [
+        ".f2hkw1w:focus-visible{outline-style:none;}"
+    ],
+    m: [
+        [
+            "@media (forced-colors: active){.f1ufm4qn[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1qnwcb4[data-fui-focus-within]:focus-within::after{border-right-color:Highlight;}.fgrk5zm[data-fui-focus-within]:focus-within::after{border-left-color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.fi52z01[data-fui-focus-within]:focus-within::after{border-bottom-color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ]
+    ]
+});
+const useInputBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1qfsv1p", "rh8pzaz", [
+    ".r1qfsv1p{position:absolute;left:0;top:0;right:0;bottom:0;box-sizing:border-box;margin:0;opacity:0;cursor:pointer;height:100%;}",
+    ".rh8pzaz{position:absolute;right:0;top:0;left:0;bottom:0;box-sizing:border-box;margin:0;opacity:0;cursor:pointer;height:100%;}"
+]);
+const useInputStyles = /*#__PURE__*/ (0, _react.__styles)({
+    lowerHalf: {
+        j35jbq: [
+            "ffenbu1",
+            "f1ktbn1t"
+        ]
+    },
+    upperHalf: {
+        oyh7mz: [
+            "f1ktbn1t",
+            "ffenbu1"
+        ]
+    }
+}, {
+    d: [
+        ".ffenbu1{right:50%;}",
+        ".f1ktbn1t{left:50%;}"
+    ]
+});
+const useIndicatorBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1420l2m", "r1yt29v5", [
+    ".r1420l2m{display:flex;overflow:hidden;color:var(--colorNeutralForeground1);fill:currentColor;pointer-events:none;position:absolute;left:0;right:0;top:0;bottom:0;}",
+    ".r1yt29v5{display:flex;overflow:hidden;color:var(--colorNeutralForeground1);fill:currentColor;pointer-events:none;position:absolute;right:0;left:0;top:0;bottom:0;}"
+]);
+const useIndicatorStyles = /*#__PURE__*/ (0, _react.__styles)({
+    lowerHalf: {
+        j35jbq: [
+            "ffenbu1",
+            "f1ktbn1t"
+        ],
+        l5kjut: 0,
+        uoufgc: 0,
+        v39lw8: 0,
+        Bbwb3tu: "f10jwh99"
+    },
+    upperHalf: {
+        oyh7mz: [
+            "f1ktbn1t",
+            "ffenbu1"
+        ],
+        Frg6f3: [
+            "fbm7ezh",
+            "f3ev47i"
+        ]
+    },
+    brand: {
+        sj55zd: "f16muhyy"
+    },
+    marigold: {
+        sj55zd: "f1whvut0"
+    },
+    filled: {
+        sj55zd: "f1qaymga",
+        ojy3ng: "f13qq9og",
+        B7iucu3: "f1205bnn",
+        Biw2w6l: "f1nocmko"
+    },
+    brandFilled: {
+        sj55zd: "f1kdv6iu"
+    },
+    marigoldFilled: {
+        sj55zd: "f1ymbmfq"
+    }
+}, {
+    d: [
+        ".ffenbu1{right:50%;}",
+        ".f1ktbn1t{left:50%;}",
+        [
+            ".f10jwh99>svg{flex:0 0 auto;}",
+            {
+                p: -1
+            }
+        ],
+        ".fbm7ezh{margin-left:-50%;}",
+        ".f3ev47i{margin-right:-50%;}",
+        ".f16muhyy{color:var(--colorBrandForeground1);}",
+        ".f1whvut0{color:var(--colorPaletteMarigoldBorderActive);}",
+        ".f1qaymga{color:var(--colorNeutralBackground6);}",
+        ".f13qq9og{stroke:var(--colorTransparentStroke);}",
+        ".f1kdv6iu{color:var(--colorBrandBackground2);}",
+        ".f1ymbmfq{color:var(--colorPaletteMarigoldBackground2);}"
+    ],
+    m: [
+        [
+            "@media (forced-colors: active){.f1205bnn{color:Canvas;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1nocmko{stroke:CanvasText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ]
+    ]
+});
+const useRatingItemStyles_unstable = (state)=>{
+    'use no memo';
+    const { color, size, iconFillWidth, appearance } = state;
+    const styles = useStyles();
+    const inputBaseClassName = useInputBaseClassName();
+    const inputStyles = useInputStyles();
+    const indicatorBaseClassName = useIndicatorBaseClassName();
+    const indicatorStyles = useIndicatorStyles();
+    state.root.className = (0, _react.mergeClasses)(ratingItemClassNames.root, styles.root, styles[size], state.root.className);
+    if (state.halfValueInput) {
+        state.halfValueInput.className = (0, _react.mergeClasses)(ratingItemClassNames.halfValueInput, inputBaseClassName, inputStyles.lowerHalf, state.halfValueInput.className);
+    }
+    if (state.fullValueInput) {
+        state.fullValueInput.className = (0, _react.mergeClasses)(ratingItemClassNames.fullValueInput, inputBaseClassName, state.halfValueInput && inputStyles.upperHalf, state.fullValueInput.className);
+    }
+    if (state.unselectedIcon) {
+        state.unselectedIcon.className = (0, _react.mergeClasses)(ratingItemClassNames.unselectedIcon, indicatorBaseClassName, appearance === 'filled' && indicatorStyles.filled, color === 'brand' && (appearance === 'filled' ? indicatorStyles.brandFilled : indicatorStyles.brand), color === 'marigold' && (appearance === 'filled' ? indicatorStyles.marigoldFilled : indicatorStyles.marigold), iconFillWidth === 0.5 && indicatorStyles.upperHalf, state.unselectedIcon.className);
+    }
+    if (state.selectedIcon) {
+        state.selectedIcon.className = (0, _react.mergeClasses)(ratingItemClassNames.selectedIcon, indicatorBaseClassName, color === 'brand' && indicatorStyles.brand, color === 'marigold' && indicatorStyles.marigold, iconFillWidth === 0.5 && indicatorStyles.lowerHalf, state.selectedIcon.className);
+    }
+    return state;
+};

node_modules/@fluentui/react-rating/lib-commonjs/components/RatingItem/useRatingItemStyles.styles.raw.js

@@ -0,0 +1,147 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ratingItemClassNames: function() {
+        return ratingItemClassNames;
+    },
+    useRatingItemStyles_unstable: function() {
+        return useRatingItemStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _reacttabster = require("@fluentui/react-tabster");
+const ratingItemClassNames = {
+    root: 'fui-RatingItem',
+    selectedIcon: 'fui-RatingItem__selectedIcon',
+    unselectedIcon: 'fui-RatingItem__unselectedIcon',
+    halfValueInput: 'fui-RatingItem__halfValueInput',
+    fullValueInput: 'fui-RatingItem__fullValueInput'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    root: {
+        position: 'relative',
+        ...(0, _reacttabster.createFocusOutlineStyle)({
+            style: {},
+            selector: 'focus-within'
+        })
+    },
+    small: {
+        fontSize: '12px',
+        width: '12px',
+        height: '12px'
+    },
+    medium: {
+        fontSize: '16px',
+        width: '16px',
+        height: '16px'
+    },
+    large: {
+        fontSize: '20px',
+        width: '20px',
+        height: '20px'
+    },
+    'extra-large': {
+        fontSize: '28px',
+        width: '28px',
+        height: '28px'
+    }
+});
+const useInputBaseClassName = (0, _react.makeResetStyles)({
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    boxSizing: 'border-box',
+    margin: 0,
+    opacity: 0,
+    cursor: 'pointer',
+    height: '100%'
+});
+const useInputStyles = (0, _react.makeStyles)({
+    lowerHalf: {
+        right: '50%'
+    },
+    upperHalf: {
+        left: '50%'
+    }
+});
+const useIndicatorBaseClassName = (0, _react.makeResetStyles)({
+    display: 'flex',
+    overflow: 'hidden',
+    color: _reacttheme.tokens.colorNeutralForeground1,
+    fill: 'currentColor',
+    pointerEvents: 'none',
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0
+});
+const useIndicatorStyles = (0, _react.makeStyles)({
+    lowerHalf: {
+        right: '50%',
+        '& > svg': {
+            flex: '0 0 auto'
+        }
+    },
+    upperHalf: {
+        left: '50%',
+        marginLeft: '-50%'
+    },
+    brand: {
+        color: _reacttheme.tokens.colorBrandForeground1
+    },
+    marigold: {
+        color: _reacttheme.tokens.colorPaletteMarigoldBorderActive
+    },
+    filled: {
+        color: _reacttheme.tokens.colorNeutralBackground6,
+        stroke: _reacttheme.tokens.colorTransparentStroke,
+        '@media (forced-colors: active)': {
+            color: 'Canvas',
+            stroke: 'CanvasText'
+        }
+    },
+    brandFilled: {
+        color: _reacttheme.tokens.colorBrandBackground2
+    },
+    marigoldFilled: {
+        color: _reacttheme.tokens.colorPaletteMarigoldBackground2
+    }
+});
+const useRatingItemStyles_unstable = (state)=>{
+    'use no memo';
+    const { color, size, iconFillWidth, appearance } = state;
+    const styles = useStyles();
+    const inputBaseClassName = useInputBaseClassName();
+    const inputStyles = useInputStyles();
+    const indicatorBaseClassName = useIndicatorBaseClassName();
+    const indicatorStyles = useIndicatorStyles();
+    state.root.className = (0, _react.mergeClasses)(ratingItemClassNames.root, styles.root, styles[size], state.root.className);
+    if (state.halfValueInput) {
+        state.halfValueInput.className = (0, _react.mergeClasses)(ratingItemClassNames.halfValueInput, inputBaseClassName, inputStyles.lowerHalf, state.halfValueInput.className);
+    }
+    if (state.fullValueInput) {
+        state.fullValueInput.className = (0, _react.mergeClasses)(ratingItemClassNames.fullValueInput, inputBaseClassName, state.halfValueInput && inputStyles.upperHalf, state.fullValueInput.className);
+    }
+    if (state.unselectedIcon) {
+        state.unselectedIcon.className = (0, _react.mergeClasses)(ratingItemClassNames.unselectedIcon, indicatorBaseClassName, appearance === 'filled' && indicatorStyles.filled, color === 'brand' && (appearance === 'filled' ? indicatorStyles.brandFilled : indicatorStyles.brand), color === 'marigold' && (appearance === 'filled' ? indicatorStyles.marigoldFilled : indicatorStyles.marigold), iconFillWidth === 0.5 && indicatorStyles.upperHalf, state.unselectedIcon.className);
+    }
+    if (state.selectedIcon) {
+        state.selectedIcon.className = (0, _react.mergeClasses)(ratingItemClassNames.selectedIcon, indicatorBaseClassName, color === 'brand' && indicatorStyles.brand, color === 'marigold' && indicatorStyles.marigold, iconFillWidth === 0.5 && indicatorStyles.lowerHalf, state.selectedIcon.className);
+    }
+    return state;
+};