feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-rating/lib/components/Rating/Rating.js

@@ -0,0 +1,17 @@
+'use client';
+import * as React from 'react';
+import { useRating_unstable } from './useRating';
+import { renderRating_unstable } from './renderRating';
+import { useRatingStyles_unstable } from './useRatingStyles.styles';
+import { useRatingContextValues } from './useRatingContextValues';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * Rating is a wrapper for one or more rating items that will be used to set a rating value.
+ */ export const Rating = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useRating_unstable(props, ref);
+    const contextValues = useRatingContextValues(state);
+    useRatingStyles_unstable(state);
+    useCustomStyleHook_unstable('useRatingStyles_unstable')(state);
+    return renderRating_unstable(state, contextValues);
+});
+Rating.displayName = 'Rating';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Rating/Rating.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useRating_unstable } from './useRating';\nimport { renderRating_unstable } from './renderRating';\nimport { useRatingStyles_unstable } from './useRatingStyles.styles';\nimport type { RatingProps } from './Rating.types';\nimport { useRatingContextValues } from './useRatingContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Rating is a wrapper for one or more rating items that will be used to set a rating value.\n */\nexport const Rating: ForwardRefComponent<RatingProps> = React.forwardRef((props, ref) => {\n  const state = useRating_unstable(props, ref);\n  const contextValues = useRatingContextValues(state);\n\n  useRatingStyles_unstable(state);\n  useCustomStyleHook_unstable('useRatingStyles_unstable')(state);\n  return renderRating_unstable(state, contextValues);\n});\n\nRating.displayName = 'Rating';\n"],"names":["React","useRating_unstable","renderRating_unstable","useRatingStyles_unstable","useRatingContextValues","useCustomStyleHook_unstable","Rating","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,2BAA2B;AAEpE,SAASC,sBAAsB,QAAQ,2BAA2B;AAClE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,uBAA2CN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQT,mBAAmBO,OAAOC;IACxC,MAAME,gBAAgBP,uBAAuBM;IAE7CP,yBAAyBO;IACzBL,4BAA4B,4BAA4BK;IACxD,OAAOR,sBAAsBQ,OAAOC;AACtC,GAAG;AAEHL,OAAOM,WAAW,GAAG"}

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

@@ -0,0 +1 @@
+import * as React from 'react';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Rating/Rating.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, EventData, EventHandler, Slot } from '@fluentui/react-utilities';\nimport { RatingItemContextValue } from '../RatingItem/RatingItem.types';\n\nexport type RatingSlots = {\n  root: NonNullable<Slot<'div'>>;\n};\n\n/**\n * Rating Props\n */\nexport type RatingProps = Omit<ComponentProps<Partial<RatingSlots>>, 'onChange'> & {\n  /**\n   * Controls the color of the Rating.\n   * @default neutral\n   */\n  color?: 'brand' | 'marigold' | 'neutral';\n  /**\n   * Default value of the Rating\n   */\n  defaultValue?: number;\n  /**\n   * The icon to display when the rating value is greater than or equal to the item's value.\n   */\n  iconFilled?: React.ElementType;\n  /**\n   * The icon to display when the rating value is less than the item's value.\n   */\n  iconOutline?: React.ElementType;\n  /**\n   * Prop to generate the aria-label for the rating inputs.\n   * @default (rating) =\\> `${rating}`\n   */\n  itemLabel?: (rating: number) => string;\n  /**\n   * The max value of the rating. This controls the number of rating items displayed.\n   * Must be a whole number greater than 1.\n   * @default 5\n   */\n  max?: number;\n  /**\n   * Name for the Radio inputs. If not provided, one will be automatically generated\n   */\n  name?: string;\n  /**\n   * Callback when the rating value is changed by the user.\n   */\n  onChange?: EventHandler<RatingOnChangeEventData>;\n  /**\n   * Sets the precision to allow half-filled shapes in Rating\n   * @default 1\n   */\n  step?: 0.5 | 1;\n  /**\n   * Sets the size of the Rating items.\n   * @default extra-large\n   */\n  size?: 'small' | 'medium' | 'large' | 'extra-large';\n  /**\n   * The value of the rating\n   */\n  value?: number;\n};\n\n/**\n * Data for the onChange event for Rating.\n */\nexport type RatingOnChangeEventData = EventData<'change', React.FormEvent<HTMLDivElement>> & {\n  /**\n   * The new value of the rating.\n   */\n  value: number;\n};\n\n/**\n * Rating base props — excludes design props (color, size).\n */\nexport type RatingBaseProps = Omit<RatingProps, 'color' | 'size'>;\n\n/**\n * State used in rendering Rating\n */\nexport type RatingState = ComponentState<RatingSlots> &\n  Required<Pick<RatingProps, 'color' | 'iconFilled' | 'iconOutline' | 'name' | 'step' | 'size' | 'value'>> &\n  Pick<RatingProps, 'itemLabel'> & {\n    hoveredValue?: number | undefined;\n  };\n\n/**\n * Rating base state — excludes design props (color, size).\n */\nexport type RatingBaseState = Omit<RatingState, 'color' | 'size'>;\n\nexport type RatingContextValues = {\n  ratingItem: RatingItemContextValue;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

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

@@ -0,0 +1,5 @@
+export { Rating } from './Rating';
+export { renderRating_unstable } from './renderRating';
+export { useRating_unstable, useRatingBase_unstable } from './useRating';
+export { ratingClassNames, useRatingStyles_unstable } from './useRatingStyles.styles';
+export { useRatingContextValues } from './useRatingContextValues';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Rating/index.ts"],"sourcesContent":["export { Rating } from './Rating';\nexport type {\n  RatingContextValues,\n  RatingOnChangeEventData,\n  RatingProps,\n  RatingBaseProps,\n  RatingSlots,\n  RatingState,\n  RatingBaseState,\n} from './Rating.types';\nexport { renderRating_unstable } from './renderRating';\nexport { useRating_unstable, useRatingBase_unstable } from './useRating';\nexport { ratingClassNames, useRatingStyles_unstable } from './useRatingStyles.styles';\nexport { useRatingContextValues } from './useRatingContextValues';\n"],"names":["Rating","renderRating_unstable","useRating_unstable","useRatingBase_unstable","ratingClassNames","useRatingStyles_unstable","useRatingContextValues"],"mappings":"AAAA,SAASA,MAAM,QAAQ,WAAW;AAUlC,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,kBAAkB,EAAEC,sBAAsB,QAAQ,cAAc;AACzE,SAASC,gBAAgB,EAAEC,wBAAwB,QAAQ,2BAA2B;AACtF,SAASC,sBAAsB,QAAQ,2BAA2B"}

node_modules/@fluentui/react-rating/lib/components/Rating/renderRating.js

@@ -0,0 +1,12 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+import { RatingItemProvider } from '../../contexts/RatingItemContext';
+/**
+ * Render the final JSX of Rating
+ */ export const renderRating_unstable = (state, contextValues)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(RatingItemProvider, {
+        value: contextValues.ratingItem,
+        children: /*#__PURE__*/ _jsx(state.root, {})
+    });
+};

node_modules/@fluentui/react-rating/lib/components/Rating/renderRating.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Rating/renderRating.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 { RatingBaseState, RatingSlots, RatingContextValues } from './Rating.types';\nimport { RatingItemProvider } from '../../contexts/RatingItemContext';\n\n/**\n * Render the final JSX of Rating\n */\nexport const renderRating_unstable = (state: RatingBaseState, contextValues: RatingContextValues): JSXElement => {\n  assertSlots<RatingSlots>(state);\n\n  return (\n    <RatingItemProvider value={contextValues.ratingItem}>\n      <state.root />\n    </RatingItemProvider>\n  );\n};\n"],"names":["assertSlots","RatingItemProvider","renderRating_unstable","state","contextValues","value","ratingItem","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,kBAAkB,QAAQ,mCAAmC;AAEtE;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAwBC;IAC5DJ,YAAyBG;IAEzB,qBACE,KAACF;QAAmBI,OAAOD,cAAcE,UAAU;kBACjD,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}

node_modules/@fluentui/react-rating/lib/components/Rating/useRating.js

@@ -0,0 +1,102 @@
+'use client';
+import * as React from 'react';
+import { getIntrinsicElementProps, isHTMLElement, mergeCallbacks, slot, useControllableState, useId } from '@fluentui/react-utilities';
+import { RatingItem } from '../../RatingItem';
+import { StarFilled, StarRegular } from '@fluentui/react-icons';
+/**
+ * Create the state required to render Rating.
+ *
+ * The returned state can be modified with hooks such as useRatingStyles_unstable,
+ * before being passed to renderRating_unstable.
+ *
+ * @param props - props from this instance of Rating
+ * @param ref - reference to root HTMLElement of Rating
+ */ export const useRating_unstable = (props, ref)=>{
+    const { color = 'neutral', size = 'extra-large', iconFilled = StarFilled, iconOutline = StarRegular, ...baseProps } = props;
+    const state = useRatingBase_unstable({
+        iconFilled,
+        iconOutline,
+        ...baseProps
+    }, ref);
+    return {
+        ...state,
+        color,
+        size
+    };
+};
+/**
+ * Base hook for Rating component. Manages state related to controlled/uncontrolled
+ * rating value, hover state, radiogroup ARIA role, and keyboard/mouse interaction —
+ * without design props (color, size).
+ *
+ * @param props - props from this instance of Rating (without color, size)
+ * @param ref - reference to root HTMLElement of Rating
+ */ export const useRatingBase_unstable = (props, ref)=>{
+    const generatedName = useId('rating-');
+    const { iconFilled = 'span', iconOutline = 'span', max = 5, name = generatedName, onChange, step = 1, itemLabel } = props;
+    const [value, setValue] = useControllableState({
+        state: props.value,
+        defaultState: props.defaultValue,
+        initialState: 0
+    });
+    const isRatingRadioItem = (target)=>isHTMLElement(target, {
+            constructorName: 'HTMLInputElement'
+        }) && target.type === 'radio' && target.name === name;
+    const [hoveredValue, setHoveredValue] = React.useState(undefined);
+    // Generate the child RatingItems and memoize them to prevent unnecessary re-rendering
+    const rootChildren = React.useMemo(()=>{
+        return Array.from(Array(max), (_, i)=>/*#__PURE__*/ React.createElement(RatingItem, {
+                value: i + 1,
+                key: i + 1
+            }));
+    }, [
+        max
+    ]);
+    const state = {
+        iconFilled,
+        iconOutline,
+        name,
+        step,
+        itemLabel,
+        value,
+        hoveredValue,
+        components: {
+            root: 'div'
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref,
+            children: rootChildren,
+            role: 'radiogroup',
+            ...props
+        }, [
+            'onChange'
+        ]), {
+            elementType: 'div'
+        })
+    };
+    state.root.onChange = (ev)=>{
+        if (isRatingRadioItem(ev.target)) {
+            const newValue = parseFloat(ev.target.value);
+            if (!isNaN(newValue)) {
+                setValue(newValue);
+                onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
+                    type: 'change',
+                    event: ev,
+                    value: newValue
+                });
+            }
+        }
+    };
+    state.root.onMouseOver = mergeCallbacks(props.onMouseOver, (ev)=>{
+        if (isRatingRadioItem(ev.target)) {
+            const newValue = parseFloat(ev.target.value);
+            if (!isNaN(newValue)) {
+                setHoveredValue(newValue);
+            }
+        }
+    });
+    state.root.onMouseLeave = mergeCallbacks(props.onMouseLeave, (ev)=>{
+        setHoveredValue(undefined);
+    });
+    return state;
+};

node_modules/@fluentui/react-rating/lib/components/Rating/useRatingContextValues.js

@@ -0,0 +1,30 @@
+'use client';
+import * as React from 'react';
+export const useRatingContextValues = (ratingState)=>{
+    const { color, hoveredValue, iconFilled, iconOutline, itemLabel, name, step, size, value } = ratingState;
+    const ratingItem = React.useMemo(()=>({
+            color,
+            hoveredValue,
+            iconFilled,
+            iconOutline,
+            interactive: true,
+            itemLabel,
+            name,
+            step,
+            size,
+            value
+        }), [
+        color,
+        hoveredValue,
+        iconFilled,
+        iconOutline,
+        itemLabel,
+        name,
+        step,
+        size,
+        value
+    ]);
+    return {
+        ratingItem
+    };
+};

node_modules/@fluentui/react-rating/lib/components/Rating/useRatingContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Rating/useRatingContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { RatingContextValues, RatingState } from './Rating.types';\nimport { RatingItemContextValue } from '../RatingItem/RatingItem.types';\n\nexport const useRatingContextValues = (ratingState: RatingState): RatingContextValues => {\n  const { color, hoveredValue, iconFilled, iconOutline, itemLabel, name, step, size, value } = ratingState;\n\n  const ratingItem = React.useMemo<RatingItemContextValue>(\n    () => ({\n      color,\n      hoveredValue,\n      iconFilled,\n      iconOutline,\n      interactive: true,\n      itemLabel,\n      name,\n      step,\n      size,\n      value,\n    }),\n    [color, hoveredValue, iconFilled, iconOutline, itemLabel, name, step, size, value],\n  );\n\n  return { ratingItem };\n};\n"],"names":["React","useRatingContextValues","ratingState","color","hoveredValue","iconFilled","iconOutline","itemLabel","name","step","size","value","ratingItem","useMemo","interactive"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,MAAMC,yBAAyB,CAACC;IACrC,MAAM,EAAEC,KAAK,EAAEC,YAAY,EAAEC,UAAU,EAAEC,WAAW,EAAEC,SAAS,EAAEC,IAAI,EAAEC,IAAI,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGT;IAE7F,MAAMU,aAAaZ,MAAMa,OAAO,CAC9B,IAAO,CAAA;YACLV;YACAC;YACAC;YACAC;YACAQ,aAAa;YACbP;YACAC;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QAACR;QAAOC;QAAcC;QAAYC;QAAaC;QAAWC;QAAMC;QAAMC;QAAMC;KAAM;IAGpF,OAAO;QAAEC;IAAW;AACtB,EAAE"}

node_modules/@fluentui/react-rating/lib/components/Rating/useRatingStyles.styles.js

@@ -0,0 +1,20 @@
+'use client';
+
+import { __resetStyles, mergeClasses } from '@griffel/react';
+export const ratingClassNames = {
+  root: 'fui-Rating'
+};
+/**
+ * Styles for the root slot
+ */
+const useRootClassName = /*#__PURE__*/__resetStyles("r2imjyh", null, [".r2imjyh{display:flex;flex-wrap:wrap;}"]);
+/**
+ * Apply styling to the Rating slots based on the state
+ */
+export const useRatingStyles_unstable = state => {
+  'use no memo';
+
+  const rootClassName = useRootClassName();
+  state.root.className = mergeClasses(ratingClassNames.root, rootClassName, state.root.className);
+  return state;
+};

node_modules/@fluentui/react-rating/lib/components/Rating/useRatingStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__resetStyles","mergeClasses","ratingClassNames","root","useRootClassName","useRatingStyles_unstable","state","rootClassName","className"],"sources":["useRatingStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nexport const ratingClassNames = {\n    root: 'fui-Rating'\n};\n/**\n * Styles for the root slot\n */ const useRootClassName = makeResetStyles({\n    display: 'flex',\n    flexWrap: 'wrap'\n});\n/**\n * Apply styling to the Rating slots based on the state\n */ export const useRatingStyles_unstable = (state)=>{\n    'use no memo';\n    const rootClassName = useRootClassName();\n    state.root.className = mergeClasses(ratingClassNames.root, rootClassName, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,OAAO,MAAMC,gBAAgB,GAAG;EAC5BC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,gBAAgB,gBAAGJ,aAAA,4DAG5B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMK,wBAAwB,GAAIC,KAAK,IAAG;EACjD,aAAa;;EACb,MAAMC,aAAa,GAAGH,gBAAgB,CAAC,CAAC;EACxCE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGP,YAAY,CAACC,gBAAgB,CAACC,IAAI,EAAEI,aAAa,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAC/F,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-rating/lib/components/Rating/useRatingStyles.styles.raw.js

@@ -0,0 +1,19 @@
+'use client';
+import { makeResetStyles, mergeClasses } from '@griffel/react';
+export const ratingClassNames = {
+    root: 'fui-Rating'
+};
+/**
+ * Styles for the root slot
+ */ const useRootClassName = makeResetStyles({
+    display: 'flex',
+    flexWrap: 'wrap'
+});
+/**
+ * Apply styling to the Rating slots based on the state
+ */ export const useRatingStyles_unstable = (state)=>{
+    'use no memo';
+    const rootClassName = useRootClassName();
+    state.root.className = mergeClasses(ratingClassNames.root, rootClassName, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-rating/lib/components/Rating/useRatingStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Rating/useRatingStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { RatingSlots, RatingState } from './Rating.types';\n\nexport const ratingClassNames: SlotClassNames<RatingSlots> = {\n  root: 'fui-Rating',\n};\n\n/**\n * Styles for the root slot\n */\n\nconst useRootClassName = makeResetStyles({\n  display: 'flex',\n  flexWrap: 'wrap',\n});\n\n/**\n * Apply styling to the Rating slots based on the state\n */\nexport const useRatingStyles_unstable = (state: RatingState): RatingState => {\n  'use no memo';\n\n  const rootClassName = useRootClassName();\n  state.root.className = mergeClasses(ratingClassNames.root, rootClassName, state.root.className);\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","ratingClassNames","root","useRootClassName","display","flexWrap","useRatingStyles_unstable","state","rootClassName","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAI/D,OAAO,MAAMC,mBAAgD;IAC3DC,MAAM;AACR,EAAE;AAEF;;CAEC,GAED,MAAMC,mBAAmBJ,gBAAgB;IACvCK,SAAS;IACTC,UAAU;AACZ;AAEA;;CAEC,GACD,OAAO,MAAMC,2BAA2B,CAACC;IACvC;IAEA,MAAMC,gBAAgBL;IACtBI,MAAML,IAAI,CAACO,SAAS,GAAGT,aAAaC,iBAAiBC,IAAI,EAAEM,eAAeD,MAAML,IAAI,CAACO,SAAS;IAC9F,OAAOF;AACT,EAAE"}

node_modules/@fluentui/react-rating/lib/components/RatingDisplay/RatingDisplay.js

@@ -0,0 +1,18 @@
+'use client';
+import * as React from 'react';
+import { useRatingDisplay_unstable } from './useRatingDisplay';
+import { renderRatingDisplay_unstable } from './renderRatingDisplay';
+import { useRatingDisplayStyles_unstable } from './useRatingDisplayStyles.styles';
+import { useRatingDisplayContextValues } from './useRatingDisplayContextValues';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * RatingDisplay is a wrapper for one or more rating items that will be used to display a rating value
+ * as well as the label for the rating.
+ */ export const RatingDisplay = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useRatingDisplay_unstable(props, ref);
+    const contextValues = useRatingDisplayContextValues(state);
+    useRatingDisplayStyles_unstable(state);
+    useCustomStyleHook_unstable('useRatingDisplayStyles_unstable')(state);
+    return renderRatingDisplay_unstable(state, contextValues);
+});
+RatingDisplay.displayName = 'RatingDisplay';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/RatingDisplay/RatingDisplay.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useRatingDisplay_unstable } from './useRatingDisplay';\nimport { renderRatingDisplay_unstable } from './renderRatingDisplay';\nimport { useRatingDisplayStyles_unstable } from './useRatingDisplayStyles.styles';\nimport type { RatingDisplayProps } from './RatingDisplay.types';\nimport { useRatingDisplayContextValues } from './useRatingDisplayContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * RatingDisplay is a wrapper for one or more rating items that will be used to display a rating value\n * as well as the label for the rating.\n */\nexport const RatingDisplay: ForwardRefComponent<RatingDisplayProps> = React.forwardRef((props, ref) => {\n  const state = useRatingDisplay_unstable(props, ref);\n  const contextValues = useRatingDisplayContextValues(state);\n\n  useRatingDisplayStyles_unstable(state);\n  useCustomStyleHook_unstable('useRatingDisplayStyles_unstable')(state);\n\n  return renderRatingDisplay_unstable(state, contextValues);\n});\n\nRatingDisplay.displayName = 'RatingDisplay';\n"],"names":["React","useRatingDisplay_unstable","renderRatingDisplay_unstable","useRatingDisplayStyles_unstable","useRatingDisplayContextValues","useCustomStyleHook_unstable","RatingDisplay","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,kCAAkC;AAElF,SAASC,6BAA6B,QAAQ,kCAAkC;AAChF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,8BAAyDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQT,0BAA0BO,OAAOC;IAC/C,MAAME,gBAAgBP,8BAA8BM;IAEpDP,gCAAgCO;IAChCL,4BAA4B,mCAAmCK;IAE/D,OAAOR,6BAA6BQ,OAAOC;AAC7C,GAAG;AAEHL,cAAcM,WAAW,GAAG"}

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

@@ -0,0 +1 @@
+import * as React from 'react';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/RatingDisplay/RatingDisplay.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { RatingItemContextValue } from '../RatingItem/RatingItem.types';\n\nexport type RatingDisplaySlots = {\n  root: NonNullable<Slot<'div'>>;\n  valueText?: Slot<'span'>;\n  countText?: Slot<'span'>;\n};\n\n/**\n * RatingDisplay Props\n */\nexport type RatingDisplayProps = ComponentProps<RatingDisplaySlots> & {\n  /**\n   * Color of the rating items (stars).\n   * @default neutral\n   */\n  color?: 'brand' | 'marigold' | 'neutral';\n  /**\n   * Renders a single filled star, with the value written next to it.\n   * @default false\n   */\n  compact?: boolean;\n  /**\n   * The number of ratings represented by the rating value.\n   * This will be formatted with a thousands separator (if applicable) and displayed next to the value.\n   */\n  count?: number;\n  /**\n   * The icon used for rating items.\n   * @default StarFilled\n   */\n  icon?: React.ElementType;\n  /**\n   * The max value of the rating. This controls the number of rating items displayed.\n   * Must be a whole number greater than 1.\n   * @default 5\n   */\n  max?: number;\n  /**\n   * Sets the size of the RatingDisplay items.\n   * @default medium\n   */\n  size?: 'small' | 'medium' | 'large' | 'extra-large';\n  /**\n   * The value of the rating\n   */\n  value?: number;\n};\n\n/**\n * RatingDisplay base props — excludes design props (color, size).\n */\nexport type RatingDisplayBaseProps = Omit<RatingDisplayProps, 'color' | 'size'>;\n\n/**\n * State used in rendering RatingDisplay\n */\nexport type RatingDisplayState = ComponentState<RatingDisplaySlots> &\n  Required<Pick<RatingDisplayProps, 'color' | 'compact' | 'icon' | 'max' | 'size'>> &\n  Pick<RatingDisplayProps, 'value'>;\n\n/**\n * RatingDisplay base state — excludes design props (color, size).\n */\nexport type RatingDisplayBaseState = Omit<RatingDisplayState, 'color' | 'size' | 'icon'> &\n  Pick<RatingDisplayProps, 'icon'>;\n\nexport type RatingDisplayContextValues = { ratingItem: RatingItemContextValue };\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

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

@@ -0,0 +1,5 @@
+export { RatingDisplay } from './RatingDisplay';
+export { renderRatingDisplay_unstable } from './renderRatingDisplay';
+export { useRatingDisplay_unstable, useRatingDisplayBase_unstable } from './useRatingDisplay';
+export { ratingDisplayClassNames, useRatingDisplayStyles_unstable } from './useRatingDisplayStyles.styles';
+export { useRatingDisplayContextValues } from './useRatingDisplayContextValues';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/RatingDisplay/index.ts"],"sourcesContent":["export { RatingDisplay } from './RatingDisplay';\nexport type {\n  RatingDisplayContextValues,\n  RatingDisplayProps,\n  RatingDisplayBaseProps,\n  RatingDisplaySlots,\n  RatingDisplayState,\n  RatingDisplayBaseState,\n} from './RatingDisplay.types';\nexport { renderRatingDisplay_unstable } from './renderRatingDisplay';\nexport { useRatingDisplay_unstable, useRatingDisplayBase_unstable } from './useRatingDisplay';\nexport { ratingDisplayClassNames, useRatingDisplayStyles_unstable } from './useRatingDisplayStyles.styles';\nexport { useRatingDisplayContextValues } from './useRatingDisplayContextValues';\n"],"names":["RatingDisplay","renderRatingDisplay_unstable","useRatingDisplay_unstable","useRatingDisplayBase_unstable","ratingDisplayClassNames","useRatingDisplayStyles_unstable","useRatingDisplayContextValues"],"mappings":"AAAA,SAASA,aAAa,QAAQ,kBAAkB;AAShD,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,yBAAyB,EAAEC,6BAA6B,QAAQ,qBAAqB;AAC9F,SAASC,uBAAuB,EAAEC,+BAA+B,QAAQ,kCAAkC;AAC3G,SAASC,6BAA6B,QAAQ,kCAAkC"}

node_modules/@fluentui/react-rating/lib/components/RatingDisplay/renderRatingDisplay.js

@@ -0,0 +1,18 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+import { RatingItemProvider } from '../../contexts/RatingItemContext';
+/**
+ * Render the final JSX of RatingDisplay
+ */ export const renderRatingDisplay_unstable = (state, contextValues)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(RatingItemProvider, {
+        value: contextValues.ratingItem,
+        children: /*#__PURE__*/ _jsxs(state.root, {
+            children: [
+                state.root.children,
+                state.valueText && /*#__PURE__*/ _jsx(state.valueText, {}),
+                state.countText && /*#__PURE__*/ _jsx(state.countText, {})
+            ]
+        })
+    });
+};

node_modules/@fluentui/react-rating/lib/components/RatingDisplay/renderRatingDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/RatingDisplay/renderRatingDisplay.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 { RatingDisplayBaseState, RatingDisplaySlots, RatingDisplayContextValues } from './RatingDisplay.types';\nimport { RatingItemProvider } from '../../contexts/RatingItemContext';\n\n/**\n * Render the final JSX of RatingDisplay\n */\nexport const renderRatingDisplay_unstable = (\n  state: RatingDisplayBaseState,\n  contextValues: RatingDisplayContextValues,\n): JSXElement => {\n  assertSlots<RatingDisplaySlots>(state);\n\n  return (\n    <RatingItemProvider value={contextValues.ratingItem}>\n      <state.root>\n        {state.root.children}\n        {state.valueText && <state.valueText />}\n        {state.countText && <state.countText />}\n      </state.root>\n    </RatingItemProvider>\n  );\n};\n"],"names":["assertSlots","RatingItemProvider","renderRatingDisplay_unstable","state","contextValues","value","ratingItem","root","children","valueText","countText"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,kBAAkB,QAAQ,mCAAmC;AAEtE;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAC1CC,OACAC;IAEAJ,YAAgCG;IAEhC,qBACE,KAACF;QAAmBI,OAAOD,cAAcE,UAAU;kBACjD,cAAA,MAACH,MAAMI,IAAI;;gBACRJ,MAAMI,IAAI,CAACC,QAAQ;gBACnBL,MAAMM,SAAS,kBAAI,KAACN,MAAMM,SAAS;gBACnCN,MAAMO,SAAS,kBAAI,KAACP,MAAMO,SAAS;;;;AAI5C,EAAE"}

node_modules/@fluentui/react-rating/lib/components/RatingDisplay/useRatingDisplay.js

@@ -0,0 +1,98 @@
+'use client';
+import * as React from 'react';
+import { getIntrinsicElementProps, slot, useId } from '@fluentui/react-utilities';
+import { StarFilled } from '@fluentui/react-icons';
+import { RatingItem } from '../RatingItem/RatingItem';
+/**
+ * Create the state required to render RatingDisplay.
+ *
+ * The returned state can be modified with hooks such as useRatingDisplayStyles_unstable,
+ * before being passed to renderRatingDisplay_unstable.
+ *
+ * @param props - props from this instance of RatingDisplay
+ * @param ref - reference to root HTMLDivElement of RatingDisplay
+ */ export const useRatingDisplay_unstable = (props, ref)=>{
+    const { color = 'neutral', size = 'medium', icon = StarFilled, ...baseProps } = props;
+    const state = useRatingDisplayBase_unstable({
+        icon,
+        ...baseProps
+    }, ref);
+    return {
+        ...state,
+        icon,
+        color,
+        size
+    };
+};
+/**
+ * Base hook for RatingDisplay component. Manages state related to ARIA img role,
+ * aria-labelledby composition from valueText/countText IDs, slot structure, and
+ * compact/full display modes — without design props (color, size).
+ *
+ * @param props - props from this instance of RatingDisplay (without color, size)
+ * @param ref - reference to root HTMLDivElement of RatingDisplay
+ */ export const useRatingDisplayBase_unstable = (props, ref)=>{
+    const { count, compact = false, icon, max = 5, value } = props;
+    const valueTextId = useId('rating-value-');
+    const countTextId = useId('rating-count-');
+    // Generate the child RatingItems and memoize them to prevent unnecessary re-rendering
+    const rootChildren = React.useMemo(()=>{
+        return compact ? /*#__PURE__*/ React.createElement(RatingItem, {
+            value: 1,
+            key: 1,
+            "aria-hidden": true
+        }) : Array.from(Array(max), (_, i)=>/*#__PURE__*/ React.createElement(RatingItem, {
+                value: i + 1,
+                key: i + 1,
+                "aria-hidden": true
+            }));
+    }, [
+        compact,
+        max
+    ]);
+    const state = {
+        compact,
+        icon,
+        max,
+        value,
+        components: {
+            root: 'div',
+            valueText: 'span',
+            countText: 'span'
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref,
+            children: rootChildren,
+            role: 'img',
+            ...props
+        }), {
+            elementType: 'div'
+        }),
+        valueText: slot.optional(props.valueText, {
+            renderByDefault: value !== undefined,
+            defaultProps: {
+                children: value,
+                id: valueTextId,
+                'aria-hidden': true
+            },
+            elementType: 'span'
+        }),
+        countText: slot.optional(props.countText, {
+            renderByDefault: count !== undefined,
+            defaultProps: {
+                children: count === null || count === void 0 ? void 0 : count.toLocaleString(),
+                id: countTextId,
+                'aria-hidden': true
+            },
+            elementType: 'span'
+        })
+    };
+    if (!state.root['aria-label'] && !state.root['aria-labelledby']) {
+        var _state_valueText, _state_countText;
+        state.root['aria-labelledby'] = [
+            (_state_valueText = state.valueText) === null || _state_valueText === void 0 ? void 0 : _state_valueText.id,
+            (_state_countText = state.countText) === null || _state_countText === void 0 ? void 0 : _state_countText.id
+        ].filter(Boolean).join(' ');
+    }
+    return state;
+};

node_modules/@fluentui/react-rating/lib/components/RatingDisplay/useRatingDisplayContextValues.js

@@ -0,0 +1,24 @@
+'use client';
+import * as React from 'react';
+export const useRatingDisplayContextValues = (state)=>{
+    const { color, compact, icon, size, value } = state;
+    const ratingItem = React.useMemo(()=>({
+            color,
+            compact,
+            iconFilled: icon,
+            iconOutline: icon,
+            interactive: false,
+            step: 0.5,
+            size,
+            value
+        }), [
+        color,
+        compact,
+        icon,
+        size,
+        value
+    ]);
+    return {
+        ratingItem
+    };
+};

node_modules/@fluentui/react-rating/lib/components/RatingDisplay/useRatingDisplayContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/RatingDisplay/useRatingDisplayContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { RatingDisplayContextValues, RatingDisplayState } from './RatingDisplay.types';\nimport { RatingItemContextValue } from '../RatingItem/RatingItem.types';\n\nexport const useRatingDisplayContextValues = (state: RatingDisplayState): RatingDisplayContextValues => {\n  const { color, compact, icon, size, value } = state;\n\n  const ratingItem = React.useMemo<RatingItemContextValue>(\n    () => ({\n      color,\n      compact,\n      iconFilled: icon,\n      iconOutline: icon,\n      interactive: false,\n      step: 0.5,\n      size,\n      value,\n    }),\n    [color, compact, icon, size, value],\n  );\n\n  return { ratingItem };\n};\n"],"names":["React","useRatingDisplayContextValues","state","color","compact","icon","size","value","ratingItem","useMemo","iconFilled","iconOutline","interactive","step"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,MAAMC,gCAAgC,CAACC;IAC5C,MAAM,EAAEC,KAAK,EAAEC,OAAO,EAAEC,IAAI,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGL;IAE9C,MAAMM,aAAaR,MAAMS,OAAO,CAC9B,IAAO,CAAA;YACLN;YACAC;YACAM,YAAYL;YACZM,aAAaN;YACbO,aAAa;YACbC,MAAM;YACNP;YACAC;QACF,CAAA,GACA;QAACJ;QAAOC;QAASC;QAAMC;QAAMC;KAAM;IAGrC,OAAO;QAAEC;IAAW;AACtB,EAAE"}

node_modules/@fluentui/react-rating/lib/components/RatingDisplay/useRatingDisplayStyles.styles.js

@@ -0,0 +1,55 @@
+'use client';
+
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+export const ratingDisplayClassNames = {
+  root: 'fui-RatingDisplay',
+  valueText: 'fui-RatingDisplay__valueText',
+  countText: 'fui-RatingDisplay__countText'
+};
+/**
+ * Styles for the root slot
+ */
+const useRootClassName = /*#__PURE__*/__resetStyles("rxxdqwu", null, [".rxxdqwu{display:flex;flex-wrap:wrap;align-items:center;}"]);
+const useLabelClassName = /*#__PURE__*/__resetStyles("rkwnos5", "rwei36a", [".rkwnos5{color:var(--colorNeutralForeground1);margin-left:var(--spacingHorizontalXS);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}", ".rwei36a{color:var(--colorNeutralForeground1);margin-right:var(--spacingHorizontalXS);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}"]);
+const useLabelStyles = /*#__PURE__*/__styles({
+  large: {
+    Be2twd7: "fkhj508",
+    Bg96gwp: "f1i3iumi",
+    Frg6f3: ["f1t5qyk5", "f1ikr372"]
+  },
+  extraLarge: {
+    Be2twd7: "fod5ikn",
+    Bg96gwp: "faaz57k",
+    Frg6f3: ["foyynoy", "f1vcna3q"]
+  },
+  strong: {
+    Bhrd7zp: "fl43uef"
+  },
+  divider: {
+    Ftih45: "f169p45e"
+  }
+}, {
+  d: [".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1t5qyk5{margin-left:var(--spacingHorizontalSNudge);}", ".f1ikr372{margin-right:var(--spacingHorizontalSNudge);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".foyynoy{margin-left:var(--spacingHorizontalS);}", ".f1vcna3q{margin-right:var(--spacingHorizontalS);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f169p45e::before{content:\"\xB7 \";}"]
+});
+/**
+ * Apply styling to the RatingDisplay slots based on the state
+ */
+export const useRatingDisplayStyles_unstable = state => {
+  'use no memo';
+
+  const {
+    size
+  } = state;
+  const rootClassName = useRootClassName();
+  state.root.className = mergeClasses(ratingDisplayClassNames.root, rootClassName, state.root.className);
+  const labelClassName = useLabelClassName();
+  const labelStyles = useLabelStyles();
+  if (state.valueText) {
+    state.valueText.className = mergeClasses(ratingDisplayClassNames.valueText, labelClassName, labelStyles.strong, size === 'large' && labelStyles.large, size === 'extra-large' && labelStyles.extraLarge, state.valueText.className);
+  }
+  if (state.countText) {
+    state.countText.className = mergeClasses(ratingDisplayClassNames.countText, labelClassName, size === 'large' && labelStyles.large, size === 'extra-large' && labelStyles.extraLarge, state.valueText && labelStyles.divider, state.countText.className);
+  }
+  return state;
+};

node_modules/@fluentui/react-rating/lib/components/RatingDisplay/useRatingDisplayStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","typographyStyles","ratingDisplayClassNames","root","valueText","countText","useRootClassName","useLabelClassName","useLabelStyles","large","Be2twd7","Bg96gwp","Frg6f3","extraLarge","strong","Bhrd7zp","divider","Ftih45","d","useRatingDisplayStyles_unstable","state","size","rootClassName","className","labelClassName","labelStyles"],"sources":["useRatingDisplayStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const ratingDisplayClassNames = {\n    root: 'fui-RatingDisplay',\n    valueText: 'fui-RatingDisplay__valueText',\n    countText: 'fui-RatingDisplay__countText'\n};\n/**\n * Styles for the root slot\n */ const useRootClassName = makeResetStyles({\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center'\n});\nconst useLabelClassName = makeResetStyles({\n    color: tokens.colorNeutralForeground1,\n    marginLeft: tokens.spacingHorizontalXS,\n    ...typographyStyles.caption1\n});\nconst useLabelStyles = makeStyles({\n    large: {\n        fontSize: tokens.fontSizeBase300,\n        lineHeight: tokens.lineHeightBase300,\n        marginLeft: tokens.spacingHorizontalSNudge\n    },\n    extraLarge: {\n        fontSize: tokens.fontSizeBase400,\n        lineHeight: tokens.lineHeightBase400,\n        marginLeft: tokens.spacingHorizontalS\n    },\n    strong: {\n        fontWeight: tokens.fontWeightSemibold\n    },\n    divider: {\n        '::before': {\n            content: '\"· \"'\n        }\n    }\n});\n/**\n * Apply styling to the RatingDisplay slots based on the state\n */ export const useRatingDisplayStyles_unstable = (state)=>{\n    'use no memo';\n    const { size } = state;\n    const rootClassName = useRootClassName();\n    state.root.className = mergeClasses(ratingDisplayClassNames.root, rootClassName, state.root.className);\n    const labelClassName = useLabelClassName();\n    const labelStyles = useLabelStyles();\n    if (state.valueText) {\n        state.valueText.className = mergeClasses(ratingDisplayClassNames.valueText, labelClassName, labelStyles.strong, size === 'large' && labelStyles.large, size === 'extra-large' && labelStyles.extraLarge, state.valueText.className);\n    }\n    if (state.countText) {\n        state.countText.className = mergeClasses(ratingDisplayClassNames.countText, labelClassName, size === 'large' && labelStyles.large, size === 'extra-large' && labelStyles.extraLarge, state.valueText && labelStyles.divider, state.countText.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,SAAS,EAAE,8BAA8B;EACzCC,SAAS,EAAE;AACf,CAAC;AACD;AACA;AACA;AAAI,MAAMC,gBAAgB,gBAAGT,aAAA,+EAI5B,CAAC;AACF,MAAMU,iBAAiB,gBAAGV,aAAA,seAIzB,CAAC;AACF,MAAMW,cAAc,gBAAGV,QAAA;EAAAW,KAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,UAAA;IAAAH,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAE,MAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAmBtB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,aAAa;;EACb,MAAM;IAAEC;EAAK,CAAC,GAAGD,KAAK;EACtB,MAAME,aAAa,GAAGhB,gBAAgB,CAAC,CAAC;EACxCc,KAAK,CAACjB,IAAI,CAACoB,SAAS,GAAGxB,YAAY,CAACG,uBAAuB,CAACC,IAAI,EAAEmB,aAAa,EAAEF,KAAK,CAACjB,IAAI,CAACoB,SAAS,CAAC;EACtG,MAAMC,cAAc,GAAGjB,iBAAiB,CAAC,CAAC;EAC1C,MAAMkB,WAAW,GAAGjB,cAAc,CAAC,CAAC;EACpC,IAAIY,KAAK,CAAChB,SAAS,EAAE;IACjBgB,KAAK,CAAChB,SAAS,CAACmB,SAAS,GAAGxB,YAAY,CAACG,uBAAuB,CAACE,SAAS,EAAEoB,cAAc,EAAEC,WAAW,CAACX,MAAM,EAAEO,IAAI,KAAK,OAAO,IAAII,WAAW,CAAChB,KAAK,EAAEY,IAAI,KAAK,aAAa,IAAII,WAAW,CAACZ,UAAU,EAAEO,KAAK,CAAChB,SAAS,CAACmB,SAAS,CAAC;EACvO;EACA,IAAIH,KAAK,CAACf,SAAS,EAAE;IACjBe,KAAK,CAACf,SAAS,CAACkB,SAAS,GAAGxB,YAAY,CAACG,uBAAuB,CAACG,SAAS,EAAEmB,cAAc,EAAEH,IAAI,KAAK,OAAO,IAAII,WAAW,CAAChB,KAAK,EAAEY,IAAI,KAAK,aAAa,IAAII,WAAW,CAACZ,UAAU,EAAEO,KAAK,CAAChB,SAAS,IAAIqB,WAAW,CAACT,OAAO,EAAEI,KAAK,CAACf,SAAS,CAACkB,SAAS,CAAC;EAC3P;EACA,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-rating/lib/components/RatingDisplay/useRatingDisplayStyles.styles.raw.js

@@ -0,0 +1,57 @@
+'use client';
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+export const ratingDisplayClassNames = {
+    root: 'fui-RatingDisplay',
+    valueText: 'fui-RatingDisplay__valueText',
+    countText: 'fui-RatingDisplay__countText'
+};
+/**
+ * Styles for the root slot
+ */ const useRootClassName = makeResetStyles({
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center'
+});
+const useLabelClassName = makeResetStyles({
+    color: tokens.colorNeutralForeground1,
+    marginLeft: tokens.spacingHorizontalXS,
+    ...typographyStyles.caption1
+});
+const useLabelStyles = makeStyles({
+    large: {
+        fontSize: tokens.fontSizeBase300,
+        lineHeight: tokens.lineHeightBase300,
+        marginLeft: tokens.spacingHorizontalSNudge
+    },
+    extraLarge: {
+        fontSize: tokens.fontSizeBase400,
+        lineHeight: tokens.lineHeightBase400,
+        marginLeft: tokens.spacingHorizontalS
+    },
+    strong: {
+        fontWeight: tokens.fontWeightSemibold
+    },
+    divider: {
+        '::before': {
+            content: '"· "'
+        }
+    }
+});
+/**
+ * Apply styling to the RatingDisplay slots based on the state
+ */ export const useRatingDisplayStyles_unstable = (state)=>{
+    'use no memo';
+    const { size } = state;
+    const rootClassName = useRootClassName();
+    state.root.className = mergeClasses(ratingDisplayClassNames.root, rootClassName, state.root.className);
+    const labelClassName = useLabelClassName();
+    const labelStyles = useLabelStyles();
+    if (state.valueText) {
+        state.valueText.className = mergeClasses(ratingDisplayClassNames.valueText, labelClassName, labelStyles.strong, size === 'large' && labelStyles.large, size === 'extra-large' && labelStyles.extraLarge, state.valueText.className);
+    }
+    if (state.countText) {
+        state.countText.className = mergeClasses(ratingDisplayClassNames.countText, labelClassName, size === 'large' && labelStyles.large, size === 'extra-large' && labelStyles.extraLarge, state.valueText && labelStyles.divider, state.countText.className);
+    }
+    return state;
+};

node_modules/@fluentui/react-rating/lib/components/RatingDisplay/useRatingDisplayStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/RatingDisplay/useRatingDisplayStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { RatingDisplaySlots, RatingDisplayState } from './RatingDisplay.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const ratingDisplayClassNames: SlotClassNames<RatingDisplaySlots> = {\n  root: 'fui-RatingDisplay',\n  valueText: 'fui-RatingDisplay__valueText',\n  countText: 'fui-RatingDisplay__countText',\n};\n\n/**\n * Styles for the root slot\n */\n\nconst useRootClassName = makeResetStyles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignItems: 'center',\n});\n\nconst useLabelClassName = makeResetStyles({\n  color: tokens.colorNeutralForeground1,\n  marginLeft: tokens.spacingHorizontalXS,\n  ...typographyStyles.caption1,\n});\n\nconst useLabelStyles = makeStyles({\n  large: {\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n    marginLeft: tokens.spacingHorizontalSNudge,\n  },\n  extraLarge: {\n    fontSize: tokens.fontSizeBase400,\n    lineHeight: tokens.lineHeightBase400,\n    marginLeft: tokens.spacingHorizontalS,\n  },\n  strong: {\n    fontWeight: tokens.fontWeightSemibold,\n  },\n  divider: {\n    '::before': {\n      content: '\"· \"',\n    },\n  },\n});\n\n/**\n * Apply styling to the RatingDisplay slots based on the state\n */\nexport const useRatingDisplayStyles_unstable = (state: RatingDisplayState): RatingDisplayState => {\n  'use no memo';\n\n  const { size } = state;\n  const rootClassName = useRootClassName();\n  state.root.className = mergeClasses(ratingDisplayClassNames.root, rootClassName, state.root.className);\n  const labelClassName = useLabelClassName();\n  const labelStyles = useLabelStyles();\n\n  if (state.valueText) {\n    state.valueText.className = mergeClasses(\n      ratingDisplayClassNames.valueText,\n      labelClassName,\n      labelStyles.strong,\n      size === 'large' && labelStyles.large,\n      size === 'extra-large' && labelStyles.extraLarge,\n      state.valueText.className,\n    );\n  }\n  if (state.countText) {\n    state.countText.className = mergeClasses(\n      ratingDisplayClassNames.countText,\n      labelClassName,\n      size === 'large' && labelStyles.large,\n      size === 'extra-large' && labelStyles.extraLarge,\n      state.valueText && labelStyles.divider,\n      state.countText.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","typographyStyles","ratingDisplayClassNames","root","valueText","countText","useRootClassName","display","flexWrap","alignItems","useLabelClassName","color","colorNeutralForeground1","marginLeft","spacingHorizontalXS","caption1","useLabelStyles","large","fontSize","fontSizeBase300","lineHeight","lineHeightBase300","spacingHorizontalSNudge","extraLarge","fontSizeBase400","lineHeightBase400","spacingHorizontalS","strong","fontWeight","fontWeightSemibold","divider","content","useRatingDisplayStyles_unstable","state","size","rootClassName","className","labelClassName","labelStyles"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG3E,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAEjE,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;IACNC,WAAW;IACXC,WAAW;AACb,EAAE;AAEF;;CAEC,GAED,MAAMC,mBAAmBT,gBAAgB;IACvCU,SAAS;IACTC,UAAU;IACVC,YAAY;AACd;AAEA,MAAMC,oBAAoBb,gBAAgB;IACxCc,OAAOX,OAAOY,uBAAuB;IACrCC,YAAYb,OAAOc,mBAAmB;IACtC,GAAGb,iBAAiBc,QAAQ;AAC9B;AAEA,MAAMC,iBAAiBlB,WAAW;IAChCmB,OAAO;QACLC,UAAUlB,OAAOmB,eAAe;QAChCC,YAAYpB,OAAOqB,iBAAiB;QACpCR,YAAYb,OAAOsB,uBAAuB;IAC5C;IACAC,YAAY;QACVL,UAAUlB,OAAOwB,eAAe;QAChCJ,YAAYpB,OAAOyB,iBAAiB;QACpCZ,YAAYb,OAAO0B,kBAAkB;IACvC;IACAC,QAAQ;QACNC,YAAY5B,OAAO6B,kBAAkB;IACvC;IACAC,SAAS;QACP,YAAY;YACVC,SAAS;QACX;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGD;IACjB,MAAME,gBAAgB7B;IACtB2B,MAAM9B,IAAI,CAACiC,SAAS,GAAGrC,aAAaG,wBAAwBC,IAAI,EAAEgC,eAAeF,MAAM9B,IAAI,CAACiC,SAAS;IACrG,MAAMC,iBAAiB3B;IACvB,MAAM4B,cAActB;IAEpB,IAAIiB,MAAM7B,SAAS,EAAE;QACnB6B,MAAM7B,SAAS,CAACgC,SAAS,GAAGrC,aAC1BG,wBAAwBE,SAAS,EACjCiC,gBACAC,YAAYX,MAAM,EAClBO,SAAS,WAAWI,YAAYrB,KAAK,EACrCiB,SAAS,iBAAiBI,YAAYf,UAAU,EAChDU,MAAM7B,SAAS,CAACgC,SAAS;IAE7B;IACA,IAAIH,MAAM5B,SAAS,EAAE;QACnB4B,MAAM5B,SAAS,CAAC+B,SAAS,GAAGrC,aAC1BG,wBAAwBG,SAAS,EACjCgC,gBACAH,SAAS,WAAWI,YAAYrB,KAAK,EACrCiB,SAAS,iBAAiBI,YAAYf,UAAU,EAChDU,MAAM7B,SAAS,IAAIkC,YAAYR,OAAO,EACtCG,MAAM5B,SAAS,CAAC+B,SAAS;IAE7B;IAEA,OAAOH;AACT,EAAE"}

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

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+import { useRatingItem_unstable } from './useRatingItem';
+import { renderRatingItem_unstable } from './renderRatingItem';
+import { useRatingItemStyles_unstable } from './useRatingItemStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * RatingItem is an item that will be used to set or display a rating value.
+ */ export const RatingItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useRatingItem_unstable(props, ref);
+    useRatingItemStyles_unstable(state);
+    useCustomStyleHook_unstable('useRatingItemStyles_unstable')(state);
+    return renderRatingItem_unstable(state);
+});
+RatingItem.displayName = 'RatingItem';

node_modules/@fluentui/react-rating/lib/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;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,+BAA+B;AAE5E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,2BAAmDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQR,uBAAuBM,OAAOC;IAE5CL,6BAA6BM;IAC7BL,4BAA4B,gCAAgCK;IAE5D,OAAOP,0BAA0BO;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}

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

@@ -0,0 +1 @@
+export { };

node_modules/@fluentui/react-rating/lib/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":"AA0DA,WAII"}

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

@@ -0,0 +1,4 @@
+export { RatingItem } from './RatingItem';
+export { renderRatingItem_unstable } from './renderRatingItem';
+export { useRatingItem_unstable, useRatingItemBase_unstable } from './useRatingItem';
+export { ratingItemClassNames, useRatingItemStyles_unstable } from './useRatingItemStyles.styles';

node_modules/@fluentui/react-rating/lib/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":"AAAA,SAASA,UAAU,QAAQ,eAAe;AAS1C,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,EAAEC,0BAA0B,QAAQ,kBAAkB;AACrF,SAASC,oBAAoB,EAAEC,4BAA4B,QAAQ,+BAA+B"}

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

@@ -0,0 +1,15 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of RatingItem
+ */ export const renderRatingItem_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.halfValueInput && /*#__PURE__*/ _jsx(state.halfValueInput, {}),
+            state.fullValueInput && /*#__PURE__*/ _jsx(state.fullValueInput, {}),
+            state.unselectedIcon && /*#__PURE__*/ _jsx(state.unselectedIcon, {}),
+            state.selectedIcon && /*#__PURE__*/ _jsx(state.selectedIcon, {})
+        ]
+    });
+};

node_modules/@fluentui/react-rating/lib/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":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxCF,YAA6BE;IAE7B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,cAAc,kBAAI,KAACF,MAAME,cAAc;YAC7CF,MAAMG,cAAc,kBAAI,KAACH,MAAMG,cAAc;YAC7CH,MAAMI,cAAc,kBAAI,KAACJ,MAAMI,cAAc;YAC7CJ,MAAMK,YAAY,kBAAI,KAACL,MAAMK,YAAY;;;AAGhD,EAAE"}

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

@@ -0,0 +1,125 @@
+'use client';
+import * as React from 'react';
+import { getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';
+import { useFocusWithin } from '@fluentui/react-tabster';
+import { useRatingItemContextValue_unstable } from '../../contexts/RatingItemContext';
+const defaultItemLabel = (num)=>num + '';
+/**
+ * Create the state required to render RatingItem.
+ *
+ * The returned state can be modified with hooks such as useRatingItemStyles_unstable,
+ * before being passed to renderRatingItem_unstable.
+ *
+ * @param props - props from this instance of RatingItem
+ * @param ref - reference to root HTMLElement of RatingItem
+ */ export const useRatingItem_unstable = (props, ref)=>{
+    const context = useRatingItemContextValue_unstable();
+    const state = useRatingItemBase_unstable(props, ref);
+    return {
+        ...state,
+        color: context.color,
+        size: context.size
+    };
+};
+/**
+ * Base hook for RatingItem component. Manages state related to fill width calculation,
+ * radio input slots (for ARIA rating interaction), icon slots, and interactive mode —
+ * without design props (color, size from context).
+ *
+ * @param props - props from this instance of RatingItem
+ * @param ref - reference to root HTMLElement of RatingItem
+ */ export const useRatingItemBase_unstable = (props, ref)=>{
+    const context = 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 = slot.always(getIntrinsicElementProps('span', {
+        ref: useMergedRefs(useFocusWithin(), ref),
+        ...props
+    }), {
+        elementType: 'span'
+    });
+    let unselectedIcon;
+    if (iconFillWidth < 1) {
+        unselectedIcon = 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 = 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 = 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 = 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/components/RatingItem/useRatingItemStyles.styles.js

@@ -0,0 +1,179 @@
+'use client';
+
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+export 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__*/__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__*/__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__*/__styles({
+  lowerHalf: {
+    j35jbq: ["ffenbu1", "f1ktbn1t"]
+  },
+  upperHalf: {
+    oyh7mz: ["f1ktbn1t", "ffenbu1"]
+  }
+}, {
+  d: [".ffenbu1{right:50%;}", ".f1ktbn1t{left:50%;}"]
+});
+const useIndicatorBaseClassName = /*#__PURE__*/__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__*/__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)"
+  }]]
+});
+/**
+ * Apply styling to the RatingItem slots based on the state
+ */
+export 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 = mergeClasses(ratingItemClassNames.root, styles.root, styles[size], state.root.className);
+  if (state.halfValueInput) {
+    state.halfValueInput.className = mergeClasses(ratingItemClassNames.halfValueInput, inputBaseClassName, inputStyles.lowerHalf, state.halfValueInput.className);
+  }
+  if (state.fullValueInput) {
+    state.fullValueInput.className = mergeClasses(ratingItemClassNames.fullValueInput, inputBaseClassName, state.halfValueInput && inputStyles.upperHalf, state.fullValueInput.className);
+  }
+  if (state.unselectedIcon) {
+    state.unselectedIcon.className = 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 = 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/components/RatingItem/useRatingItemStyles.styles.raw.js

@@ -0,0 +1,131 @@
+'use client';
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+export 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 = makeStyles({
+    root: {
+        position: 'relative',
+        ...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 = makeResetStyles({
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    boxSizing: 'border-box',
+    margin: 0,
+    opacity: 0,
+    cursor: 'pointer',
+    height: '100%'
+});
+const useInputStyles = makeStyles({
+    lowerHalf: {
+        right: '50%'
+    },
+    upperHalf: {
+        left: '50%'
+    }
+});
+const useIndicatorBaseClassName = makeResetStyles({
+    display: 'flex',
+    overflow: 'hidden',
+    color: tokens.colorNeutralForeground1,
+    fill: 'currentColor',
+    pointerEvents: 'none',
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0
+});
+const useIndicatorStyles = makeStyles({
+    lowerHalf: {
+        right: '50%',
+        '& > svg': {
+            flex: '0 0 auto'
+        }
+    },
+    upperHalf: {
+        left: '50%',
+        marginLeft: '-50%'
+    },
+    brand: {
+        color: tokens.colorBrandForeground1
+    },
+    marigold: {
+        color: tokens.colorPaletteMarigoldBorderActive
+    },
+    filled: {
+        color: tokens.colorNeutralBackground6,
+        stroke: tokens.colorTransparentStroke,
+        '@media (forced-colors: active)': {
+            color: 'Canvas',
+            stroke: 'CanvasText'
+        }
+    },
+    brandFilled: {
+        color: tokens.colorBrandBackground2
+    },
+    marigoldFilled: {
+        color: tokens.colorPaletteMarigoldBackground2
+    }
+});
+/**
+ * Apply styling to the RatingItem slots based on the state
+ */ export 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 = mergeClasses(ratingItemClassNames.root, styles.root, styles[size], state.root.className);
+    if (state.halfValueInput) {
+        state.halfValueInput.className = mergeClasses(ratingItemClassNames.halfValueInput, inputBaseClassName, inputStyles.lowerHalf, state.halfValueInput.className);
+    }
+    if (state.fullValueInput) {
+        state.fullValueInput.className = mergeClasses(ratingItemClassNames.fullValueInput, inputBaseClassName, state.halfValueInput && inputStyles.upperHalf, state.fullValueInput.className);
+    }
+    if (state.unselectedIcon) {
+        state.unselectedIcon.className = 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 = mergeClasses(ratingItemClassNames.selectedIcon, indicatorBaseClassName, color === 'brand' && indicatorStyles.brand, color === 'marigold' && indicatorStyles.marigold, iconFillWidth === 0.5 && indicatorStyles.lowerHalf, state.selectedIcon.className);
+    }
+    return state;
+};