@fluentui/react-swatch-picker 9.5.3 → 9.6.0

package/lib-commonjs/components/ColorSwatch/{ColorSwatch.js → ColorSwatch.cjs}

@@ -11,9 +11,9 @@ Object.defineProperty(exports, "ColorSwatch", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _useColorSwatch = require("./useColorSwatch");
-const _renderColorSwatch = require("./renderColorSwatch");
-const _useColorSwatchStylesstyles = require("./useColorSwatchStyles.styles");
+const _useColorSwatch = require("./useColorSwatch.cjs");
+const _renderColorSwatch = require("./renderColorSwatch.cjs");
+const _useColorSwatchStylesstyles = require("./useColorSwatchStyles.styles.cjs");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const ColorSwatch = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useColorSwatch.useColorSwatch_unstable)(props, ref);

package/lib-commonjs/components/ColorSwatch/{ColorSwatch.js.map → ColorSwatch.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorSwatch/ColorSwatch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useColorSwatch_unstable } from './useColorSwatch';\nimport { renderColorSwatch_unstable } from './renderColorSwatch';\nimport { useColorSwatchStyles_unstable } from './useColorSwatchStyles.styles';\nimport type { ColorSwatchProps } from './ColorSwatch.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ColorSwatch component is used to render a colors, icons and gradients.\n */\nexport const ColorSwatch: ForwardRefComponent<ColorSwatchProps> = React.forwardRef((props, ref) => {\n  const state = useColorSwatch_unstable(props, ref);\n\n  useColorSwatchStyles_unstable(state);\n  useCustomStyleHook_unstable('useColorSwatchStyles_unstable')(state);\n\n  return renderColorSwatch_unstable(state);\n});\n\nColorSwatch.displayName = 'ColorSwatch';\n"],"names":["React","useColorSwatch_unstable","renderColorSwatch_unstable","useColorSwatchStyles_unstable","useCustomStyleHook_unstable","ColorSwatch","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCAES,mBAAmB;mCAChB,sBAAsB;4CACnB,gCAAgC;qCAElC,kCAAkC;AAKvE,MAAMK,cAAAA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQR,uCAAAA,EAAwBM,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAC9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOP,6CAAAA,EAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/ColorSwatch/ColorSwatch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useColorSwatch_unstable } from './useColorSwatch';\nimport { renderColorSwatch_unstable } from './renderColorSwatch';\nimport { useColorSwatchStyles_unstable } from './useColorSwatchStyles.styles';\nimport type { ColorSwatchProps } from './ColorSwatch.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ColorSwatch component is used to render a colors, icons and gradients.\n */\nexport const ColorSwatch: ForwardRefComponent<ColorSwatchProps> = React.forwardRef((props, ref) => {\n  const state = useColorSwatch_unstable(props, ref);\n\n  useColorSwatchStyles_unstable(state);\n  useCustomStyleHook_unstable('useColorSwatchStyles_unstable')(state);\n\n  return renderColorSwatch_unstable(state);\n});\n\nColorSwatch.displayName = 'ColorSwatch';\n"],"names":["React","useColorSwatch_unstable","renderColorSwatch_unstable","useColorSwatchStyles_unstable","useCustomStyleHook_unstable","ColorSwatch","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCAES,sBAAmB;mCAChB,yBAAsB;4CACnB,mCAAgC;qCAElC,kCAAkC;AAKvE,MAAMK,cAAAA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQR,uCAAAA,EAAwBM,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAC9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOP,6CAAAA,EAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

package/lib-commonjs/components/ColorSwatch/ColorSwatch.constants.cjs

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "swatchCSSVars", {
+    enumerable: true,
+    get: function() {
+        return swatchCSSVars;
+    }
+});
+const swatchCSSVars = {
+    color: `--fui-SwatchPicker--color`,
+    borderColor: `--fui-SwatchPicker--borderColor`
+};

package/lib-commonjs/components/ColorSwatch/ColorSwatch.constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorSwatch/ColorSwatch.constants.ts"],"sourcesContent":["export const swatchCSSVars = {\n  color: `--fui-SwatchPicker--color`,\n  borderColor: `--fui-SwatchPicker--borderColor`,\n};\n"],"names":["swatchCSSVars","color","borderColor"],"mappings":";;;;;;;;;;AAAO,MAAMA,gBAAgB;IAC3BC,OAAO,CAAC,yBAAyB,CAAC;IAClCC,aAAa,CAAC,+BAA+B,CAAC;AAChD,EAAE"}

package/lib-commonjs/components/ColorSwatch/{ColorSwatch.types.js → ColorSwatch.types.cjs}

@@ -1,6 +1,4 @@
-/**
- * State used in rendering ColorSwatch
- */ "use strict";
+"use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });

package/lib-commonjs/components/ColorSwatch/{ColorSwatch.types.js.map → ColorSwatch.types.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorSwatch/ColorSwatch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';\n\nexport type ColorSwatchSlots = {\n  root: NonNullable<Slot<'button'>>;\n  icon?: Slot<'span'>;\n  disabledIcon?: Slot<'span'>;\n};\n\n/**\n * ColorSwatch Props\n */\nexport type ColorSwatchProps = ComponentProps<ColorSwatchSlots> &\n  Pick<SwatchPickerProps, 'size' | 'shape'> & {\n    /**\n     * Border color when contrast is low\n     */\n    borderColor?: string;\n\n    /**\n     * Swatch color\n     */\n    color: string;\n\n    /**\n     * Whether the swatch is disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Swatch value\n     */\n    value: string;\n  };\n\n/**\n * State used in rendering ColorSwatch\n */\nexport type ColorSwatchState = ComponentState<ColorSwatchSlots> &\n  Pick<ColorSwatchProps, 'color' | 'disabled' | 'size' | 'shape' | 'value'> & {\n    selected: boolean;\n  };\n"],"names":[],"mappings":"AAmCA;;CAEC,GACD,WAGI"}
+{"version":3,"sources":["../src/components/ColorSwatch/ColorSwatch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';\n\nexport type ColorSwatchSlots = {\n  root: NonNullable<Slot<'button'>>;\n  icon?: Slot<'span'>;\n  disabledIcon?: Slot<'span'>;\n};\n\n/**\n * ColorSwatch Props\n */\nexport type ColorSwatchProps = ComponentProps<ColorSwatchSlots> &\n  Pick<SwatchPickerProps, 'size' | 'shape'> & {\n    /**\n     * Border color when contrast is low\n     */\n    borderColor?: string;\n\n    /**\n     * Swatch color\n     */\n    color: string;\n\n    /**\n     * Whether the swatch is disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Swatch value\n     */\n    value: string;\n  };\n\nexport type ColorSwatchBaseProps = Omit<ColorSwatchProps, 'size' | 'shape'>;\n\n/**\n * State used in rendering ColorSwatch\n */\nexport type ColorSwatchState = ComponentState<ColorSwatchSlots> &\n  Pick<ColorSwatchProps, 'color' | 'disabled' | 'size' | 'shape' | 'value'> & {\n    selected: boolean;\n  };\n\nexport type ColorSwatchBaseState = Omit<ColorSwatchState, 'size' | 'shape'>;\n"],"names":[],"mappings":""}

package/lib-commonjs/components/ColorSwatch/{index.js → index.cjs}

@@ -19,7 +19,10 @@ _export(exports, {
         return _renderColorSwatch.renderColorSwatch_unstable;
     },
     swatchCSSVars: function() {
-        return _useColorSwatchStylesstyles.swatchCSSVars;
+        return _ColorSwatchconstants.swatchCSSVars;
+    },
+    useColorSwatchBase_unstable: function() {
+        return _useColorSwatch.useColorSwatchBase_unstable;
     },
     useColorSwatchStyles_unstable: function() {
         return _useColorSwatchStylesstyles.useColorSwatchStyles_unstable;
@@ -28,7 +31,8 @@ _export(exports, {
         return _useColorSwatch.useColorSwatch_unstable;
     }
 });
-const _ColorSwatch = require("./ColorSwatch");
-const _renderColorSwatch = require("./renderColorSwatch");
-const _useColorSwatch = require("./useColorSwatch");
-const _useColorSwatchStylesstyles = require("./useColorSwatchStyles.styles");
+const _ColorSwatch = require("./ColorSwatch.cjs");
+const _renderColorSwatch = require("./renderColorSwatch.cjs");
+const _useColorSwatch = require("./useColorSwatch.cjs");
+const _useColorSwatchStylesstyles = require("./useColorSwatchStyles.styles.cjs");
+const _ColorSwatchconstants = require("./ColorSwatch.constants.cjs");

package/lib-commonjs/components/ColorSwatch/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorSwatch/index.ts"],"sourcesContent":["export { ColorSwatch } from './ColorSwatch';\nexport type {\n  ColorSwatchBaseProps,\n  ColorSwatchBaseState,\n  ColorSwatchProps,\n  ColorSwatchSlots,\n  ColorSwatchState,\n} from './ColorSwatch.types';\nexport { renderColorSwatch_unstable } from './renderColorSwatch';\nexport { useColorSwatch_unstable, useColorSwatchBase_unstable } from './useColorSwatch';\nexport { colorSwatchClassNames, useColorSwatchStyles_unstable } from './useColorSwatchStyles.styles';\nexport { swatchCSSVars } from './ColorSwatch.constants';\n"],"names":["ColorSwatch","renderColorSwatch_unstable","useColorSwatch_unstable","useColorSwatchBase_unstable","colorSwatchClassNames","useColorSwatchStyles_unstable","swatchCSSVars"],"mappings":";;;;;;;;;;;IAASA;uCAAW;;IAUXI;gEAAqB;;;eAFrBH,6CAA0B;;;eAG1BK,mCAAa;;;eAFYH,2CAA2B;;;eAC7BE,yDAA6B;;;eADpDH,uCAAuB;;;6BATJ,mBAAgB;mCAQD,yBAAsB;gCACI,sBAAmB;4CACnB,mCAAgC;sCACvE,6BAA0B"}

package/lib-commonjs/components/ColorSwatch/renderColorSwatch.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorSwatch/renderColorSwatch.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 { ColorSwatchBaseState, ColorSwatchSlots } from './ColorSwatch.types';\n\n/**\n * Render the final JSX of ColorSwatch\n */\nexport const renderColorSwatch_unstable = (state: ColorSwatchBaseState): JSXElement => {\n  assertSlots<ColorSwatchSlots>(state);\n\n  return (\n    <state.root>\n      {state.root.children}\n      {state.icon && <state.icon />}\n      {state.disabled && state.disabledIcon && <state.disabledIcon />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderColorSwatch_unstable","state","root","children","icon","disabled","disabledIcon"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,mCAAmC,CAACC;QACzCF,2BAAAA,EAA8BE;IAE9B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAMC,IAAI,CAACC,QAAQ;YACnBF,MAAMG,IAAI,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,IAAI,EAAA,CAAA;YACzBH,MAAMI,QAAQ,IAAIJ,MAAMK,YAAY,IAAA,WAAA,OAAI,eAAA,EAACL,MAAMK,YAAY,EAAA,CAAA;;;AAGlE,EAAE"}

package/lib-commonjs/components/ColorSwatch/{useColorSwatch.js → useColorSwatch.cjs}

@@ -3,23 +3,28 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useColorSwatch_unstable", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useColorSwatchBase_unstable: function() {
+        return useColorSwatchBase_unstable;
+    },
+    useColorSwatch_unstable: function() {
         return useColorSwatch_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 _swatchPicker = require("../../contexts/swatchPicker");
-const _useColorSwatchStylesstyles = require("./useColorSwatchStyles.styles");
+const _swatchPicker = require("../../contexts/swatchPicker.cjs");
 const _reacticons = require("@fluentui/react-icons");
-const _reacttheme = require("@fluentui/react-theme");
-const useColorSwatch_unstable = (props, ref)=>{
-    const { borderColor, color, disabled, disabledIcon, icon, value, onClick, size, shape, style, ...rest } = props;
-    const _size = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.size);
-    const _shape = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.shape);
+const _ColorSwatchconstants = require("./ColorSwatch.constants.cjs");
+const useColorSwatchBase_unstable = (props, ref)=>{
+    const { borderColor, color, disabled, disabledIcon, icon, value, onClick, style, ...rest } = props;
     const isGrid = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.isGrid);
     const requestSelectionChange = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.requestSelectionChange);
     const selected = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.selectedValue === value);
@@ -28,8 +33,8 @@ const useColorSwatch_unstable = (props, ref)=>{
             selectedSwatch: color
         })));
     const rootVariables = {
-        [_useColorSwatchStylesstyles.swatchCSSVars.color]: color,
-        [_useColorSwatchStylesstyles.swatchCSSVars.borderColor]: borderColor !== null && borderColor !== void 0 ? borderColor : _reacttheme.tokens.colorTransparentStroke
+        [_ColorSwatchconstants.swatchCSSVars.color]: color,
+        [_ColorSwatchconstants.swatchCSSVars.borderColor]: borderColor
     };
     const role = isGrid ? 'gridcell' : 'radio';
     const ariaSelected = isGrid ? {
@@ -41,10 +46,6 @@ const useColorSwatch_unstable = (props, ref)=>{
         elementType: 'span'
     });
     const disabledIconShorthand = _reactutilities.slot.optional(disabledIcon, {
-        defaultProps: {
-            children: /*#__PURE__*/ _react.createElement(_reacticons.ProhibitedFilled, null)
-        },
-        renderByDefault: true,
         elementType: 'span'
     });
     return {
@@ -71,10 +72,27 @@ const useColorSwatch_unstable = (props, ref)=>{
         icon: iconShorthand,
         disabledIcon: disabledIconShorthand,
         disabled,
-        size: size !== null && size !== void 0 ? size : _size,
-        shape: shape !== null && shape !== void 0 ? shape : _shape,
         selected,
         color,
         value
     };
 };
+const useColorSwatch_unstable = (props, ref)=>{
+    const sizeFromContext = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.size);
+    const shapeFromContext = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.shape);
+    const { size = sizeFromContext, shape = shapeFromContext, disabledIcon, ...rest } = props;
+    const baseState = useColorSwatchBase_unstable(rest, ref);
+    return {
+        ...baseState,
+        size,
+        shape,
+        disabledIcon: _reactutilities.slot.optional(disabledIcon, {
+            defaultProps: {
+                ...baseState.disabledIcon,
+                children: /*#__PURE__*/ _react.createElement(_reacticons.ProhibitedFilled, null)
+            },
+            renderByDefault: true,
+            elementType: 'span'
+        })
+    };
+};

package/lib-commonjs/components/ColorSwatch/useColorSwatch.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorSwatch/useColorSwatch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { slot, useEventCallback, getIntrinsicElementProps, mergeCallbacks } from '@fluentui/react-utilities';\nimport type {\n  ColorSwatchBaseProps,\n  ColorSwatchBaseState,\n  ColorSwatchProps,\n  ColorSwatchState,\n} from './ColorSwatch.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\nimport { ProhibitedFilled } from '@fluentui/react-icons';\nimport { swatchCSSVars } from './ColorSwatch.constants';\n\n/**\n * Create the basee state required to render unstyled ColorSwatch.\n *\n * The returned state can be modified with hooks before being passed to renderColorSwatch_unstable.\n *\n * @param props - props from this instance of ColorSwatch\n * @param ref - reference to root HTMLButtonElement of ColorSwatch\n */\nexport const useColorSwatchBase_unstable = (\n  props: ColorSwatchBaseProps,\n  ref: React.Ref<HTMLButtonElement>,\n): ColorSwatchBaseState => {\n  const { borderColor, color, disabled, disabledIcon, icon, value, onClick, style, ...rest } = props;\n  const isGrid = useSwatchPickerContextValue_unstable(ctx => ctx.isGrid);\n\n  const requestSelectionChange = useSwatchPickerContextValue_unstable(ctx => ctx.requestSelectionChange);\n  const selected = useSwatchPickerContextValue_unstable(ctx => ctx.selectedValue === value);\n\n  const onColorSwatchClick = useEventCallback(\n    mergeCallbacks(onClick, (event: React.MouseEvent<HTMLButtonElement>) =>\n      requestSelectionChange(event, {\n        selectedValue: value,\n        selectedSwatch: color,\n      }),\n    ),\n  );\n\n  const rootVariables = {\n    [swatchCSSVars.color]: color,\n    [swatchCSSVars.borderColor]: borderColor,\n  };\n\n  const role = isGrid ? 'gridcell' : 'radio';\n  const ariaSelected = isGrid\n    ? {\n        'aria-selected': selected,\n      }\n    : { 'aria-checked': selected };\n\n  const iconShorthand = slot.optional(icon, { elementType: 'span' });\n  const disabledIconShorthand = slot.optional(disabledIcon, {\n    elementType: 'span',\n  });\n\n  return {\n    components: {\n      root: 'button',\n      icon: 'span',\n      disabledIcon: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        role,\n        ...ariaSelected,\n        onClick: onColorSwatchClick,\n        type: 'button',\n        disabled,\n        ...rest,\n        style: {\n          ...rootVariables,\n          ...style,\n        },\n      }),\n      { elementType: 'button' },\n    ),\n    icon: iconShorthand,\n    disabledIcon: disabledIconShorthand,\n    disabled,\n    selected,\n    color,\n    value,\n  };\n};\n\n/**\n * Create the state required to render ColorSwatch.\n *\n * The returned state can be modified with hooks such as useColorSwatchStyles_unstable,\n * before being passed to renderColorSwatch_unstable.\n *\n * @param props - props from this instance of ColorSwatch\n * @param ref - reference to root HTMLButtonElement of ColorSwatch\n */\nexport const useColorSwatch_unstable = (\n  props: ColorSwatchProps,\n  ref: React.Ref<HTMLButtonElement>,\n): ColorSwatchState => {\n  const sizeFromContext = useSwatchPickerContextValue_unstable(ctx => ctx.size);\n  const shapeFromContext = useSwatchPickerContextValue_unstable(ctx => ctx.shape);\n  const { size = sizeFromContext, shape = shapeFromContext, disabledIcon, ...rest } = props;\n\n  const baseState = useColorSwatchBase_unstable(rest, ref);\n\n  return {\n    ...baseState,\n    size,\n    shape,\n    disabledIcon: slot.optional(disabledIcon, {\n      defaultProps: {\n        ...baseState.disabledIcon,\n        children: <ProhibitedFilled />,\n      },\n      renderByDefault: true,\n      elementType: 'span',\n    }),\n  };\n};\n"],"names":["React","slot","useEventCallback","getIntrinsicElementProps","mergeCallbacks","useSwatchPickerContextValue_unstable","ProhibitedFilled","swatchCSSVars","useColorSwatchBase_unstable","props","ref","borderColor","color","disabled","disabledIcon","icon","value","onClick","style","rest","isGrid","ctx","requestSelectionChange","selected","selectedValue","onColorSwatchClick","event","selectedSwatch","rootVariables","role","ariaSelected","iconShorthand","optional","elementType","disabledIconShorthand","components","root","always","type","useColorSwatch_unstable","sizeFromContext","size","shapeFromContext","shape","baseState","defaultProps","children","renderByDefault"],"mappings":"AAAA;;;;;;;;;;;;IAsBaQ,2BAAAA;;;IA4EA+B,uBAAAA;;;;;iEAhGU,QAAQ;gCACkD,4BAA4B;8BAOxD,iCAA8B;4BAClD,wBAAwB;sCAC3B,6BAA0B;AAUjD,oCAAoC,CACzC9B,OACAC;IAEA,MAAM,EAAEC,WAAW,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,IAAI,EAAEC,KAAK,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGV;IAC7F,MAAMW,aAASf,kDAAAA,EAAqCgB,CAAAA,MAAOA,IAAID,MAAM;IAErE,MAAME,yBAAyBjB,sDAAAA,EAAqCgB,CAAAA,MAAOA,IAAIC,sBAAsB;IACrG,MAAMC,eAAWlB,kDAAAA,EAAqCgB,CAAAA,MAAOA,IAAIG,aAAa,KAAKR;IAEnF,MAAMS,yBAAqBvB,gCAAAA,MACzBE,8BAAAA,EAAea,SAAS,CAACS,QACvBJ,uBAAuBI,OAAO;YAC5BF,eAAeR;YACfW,gBAAgBf;QAClB;IAIJ,MAAMgB,gBAAgB;QACpB,CAACrB,mCAAAA,CAAcK,KAAK,CAAC,EAAEA;QACvB,CAACL,mCAAAA,CAAcI,WAAW,CAAC,EAAEA;IAC/B;IAEA,MAAMkB,OAAOT,SAAS,aAAa;IACnC,MAAMU,eAAeV,SACjB;QACE,iBAAiBG;IACnB,IACA;QAAE,gBAAgBA;IAAS;IAE/B,MAAMQ,gBAAgB9B,oBAAAA,CAAK+B,QAAQ,CAACjB,MAAM;QAAEkB,aAAa;IAAO;IAChE,MAAMC,wBAAwBjC,oBAAAA,CAAK+B,QAAQ,CAAClB,cAAc;QACxDmB,aAAa;IACf;IAEA,OAAO;QACLE,YAAY;YACVC,MAAM;YACNrB,MAAM;YACND,cAAc;QAChB;QACAsB,MAAMnC,oBAAAA,CAAKoC,MAAM,KACflC,wCAAAA,EAAyB,UAAU;YACjCO;YACAmB;YACA,GAAGC,YAAY;YACfb,SAASQ;YACTa,MAAM;YACNzB;YACA,GAAGM,IAAI;YACPD,OAAO;gBACL,GAAGU,aAAa;gBAChB,GAAGV,KAAK;YACV;QACF,IACA;YAAEe,aAAa;QAAS;QAE1BlB,MAAMgB;QACNjB,cAAcoB;QACdrB;QACAU;QACAX;QACAI;IACF;AACF,EAAE;AAWK,gCAAgC,CACrCP,OACAC;IAEA,MAAM8B,sBAAkBnC,kDAAAA,EAAqCgB,CAAAA,MAAOA,IAAIoB,IAAI;IAC5E,MAAMC,uBAAmBrC,kDAAAA,EAAqCgB,CAAAA,MAAOA,IAAIsB,KAAK;IAC9E,MAAM,EAAEF,OAAOD,eAAe,EAAEG,QAAQD,gBAAgB,EAAE5B,YAAY,EAAE,GAAGK,MAAM,GAAGV;IAEpF,MAAMmC,YAAYpC,4BAA4BW,MAAMT;IAEpD,OAAO;QACL,GAAGkC,SAAS;QACZH;QACAE;QACA7B,cAAcb,oBAAAA,CAAK+B,QAAQ,CAAClB,cAAc;YACxC+B,cAAc;gBACZ,GAAGD,UAAU9B,YAAY;gBACzBgC,UAAAA,WAAAA,GAAU,OAAA,aAAA,CAACxC,4BAAAA,EAAAA;YACb;YACAyC,iBAAiB;YACjBd,aAAa;QACf;IACF;AACF,EAAE"}

package/lib-commonjs/components/ColorSwatch/{useColorSwatchStyles.styles.js → useColorSwatchStyles.styles.cjs}

@@ -13,37 +13,31 @@ _export(exports, {
     colorSwatchClassNames: function() {
         return colorSwatchClassNames;
     },
-    swatchCSSVars: function() {
-        return swatchCSSVars;
-    },
     useColorSwatchStyles_unstable: function() {
         return useColorSwatchStyles_unstable;
     }
 });
 const _react = require("@griffel/react");
+const _ColorSwatchconstants = require("./ColorSwatch.constants.cjs");
 const colorSwatchClassNames = {
     root: 'fui-ColorSwatch',
     icon: 'fui-ColorSwatch__icon',
     disabledIcon: 'fui-ColorSwatch__disabledIcon'
 };
-const swatchCSSVars = {
-    color: `--fui-SwatchPicker--color`,
-    borderColor: `--fui-SwatchPicker--borderColor`
-};
-const { color, borderColor } = swatchCSSVars;
+const { color, borderColor } = _ColorSwatchconstants.swatchCSSVars;
 /**
  * Styles for the root slot
- */ const useResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("ryw27oi", null, {
+ */ const useResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r15zvwyd", null, {
     r: [
-        ".ryw27oi{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid var(--fui-SwatchPicker--borderColor);background:var(--fui-SwatchPicker--color);overflow:hidden;padding:0;}",
-        ".ryw27oi:hover{cursor:pointer;border:none;box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorBrandStroke1),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}",
-        ".ryw27oi:hover:active{border:none;box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorCompoundBrandStrokePressed),inset 0 0 0 var(--strokeWidthThickest) var(--colorStrokeFocus1);}",
-        ".ryw27oi:focus{outline:none;}",
-        ".ryw27oi:focus-visible{outline:none;}",
-        ".ryw27oi[data-fui-focus-visible]{border:none;outline:none;box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus2),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}"
+        ".r15zvwyd{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid var(--fui-SwatchPicker--borderColor, var(--colorTransparentStroke));background:var(--fui-SwatchPicker--color);overflow:hidden;padding:0;}",
+        ".r15zvwyd:hover{cursor:pointer;border:none;box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorBrandStroke1),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}",
+        ".r15zvwyd:hover:active{border:none;box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorCompoundBrandStrokePressed),inset 0 0 0 var(--strokeWidthThickest) var(--colorStrokeFocus1);}",
+        ".r15zvwyd:focus{outline:none;}",
+        ".r15zvwyd:focus-visible{outline:none;}",
+        ".r15zvwyd[data-fui-focus-visible]{border:none;outline:none;box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus2),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}"
     ],
     s: [
-        "@media (forced-colors: active){.ryw27oi{forced-color-adjust:none;}.ryw27oi:hover{box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorBrandStroke2Hover),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}.ryw27oi:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke2Pressed),inset 0 0 0 var(--strokeWidthThickest) var(--colorStrokeFocus1);}}"
+        "@media (forced-colors: active){.r15zvwyd{forced-color-adjust:none;}.r15zvwyd:hover{box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorBrandStroke2Hover),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}.r15zvwyd:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke2Pressed),inset 0 0 0 var(--strokeWidthThickest) var(--colorStrokeFocus1);}}"
     ]
 });
 const useStyles = /*#__PURE__*/ (0, _react.__styles)({
@@ -310,7 +304,6 @@ const useIconStyles = /*#__PURE__*/ (0, _react.__styles)({
     ]
 });
 const useColorSwatchStyles_unstable = (state)=>{
-    'use no memo';
     const { size = 'medium', shape = 'square' } = state;
     const resetStyles = useResetStyles();
     const styles = useStyles();

package/lib-commonjs/components/ColorSwatch/useColorSwatchStyles.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useColorSwatchStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from \"@griffel/react\";\nimport { tokens } from \"@fluentui/react-theme\";\nimport { createCustomFocusIndicatorStyle } from \"@fluentui/react-tabster\";\nimport { swatchCSSVars } from \"./ColorSwatch.constants.js\";\nexport const colorSwatchClassNames = {\n    root: 'fui-ColorSwatch',\n    icon: 'fui-ColorSwatch__icon',\n    disabledIcon: 'fui-ColorSwatch__disabledIcon'\n};\nconst { color, borderColor } = swatchCSSVars;\n/**\n * Styles for the root slot\n */ const useResetStyles = makeResetStyles({\n    display: 'inline-flex',\n    flexShrink: 0,\n    alignItems: 'center',\n    justifyContent: 'center',\n    boxSizing: 'border-box',\n    border: `1px solid var(${borderColor}, ${tokens.colorTransparentStroke})`,\n    background: `var(${color})`,\n    overflow: 'hidden',\n    padding: '0',\n    ':hover': {\n        cursor: 'pointer',\n        border: 'none',\n        boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke1}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`\n    },\n    ':hover:active': {\n        border: 'none',\n        boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`\n    },\n    ':focus': {\n        outline: 'none'\n    },\n    ':focus-visible': {\n        outline: 'none'\n    },\n    ...createCustomFocusIndicatorStyle({\n        border: 'none',\n        outline: 'none',\n        boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`\n    }),\n    // High contrast styles\n    '@media (forced-colors: active)': {\n        forcedColorAdjust: 'none',\n        ':hover': {\n            boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke2Hover}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`\n        },\n        ':hover:active': {\n            boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke2Pressed}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`\n        }\n    }\n});\nconst useStyles = makeStyles({\n    disabled: {\n        ':hover': {\n            cursor: 'not-allowed',\n            boxShadow: 'none'\n        },\n        '@media (forced-colors: active)': {\n            ':hover': {\n                boxShadow: 'none'\n            }\n        }\n    },\n    selected: {\n        border: 'none',\n        boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke1}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`,\n        ':hover': {\n            boxShadow: `inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorCompoundBrandStrokeHover}, inset 0 0 0 6px ${tokens.colorStrokeFocus1}`\n        },\n        ':hover:active': {\n            boxShadow: `inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 7px ${tokens.colorStrokeFocus1}`\n        },\n        ...createCustomFocusIndicatorStyle({\n            boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus2}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`\n        }),\n        '@media (forced-colors: active)': {\n            boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke2Pressed}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`\n        }\n    },\n    selectedSmall: {\n        boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke1}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`,\n        ':hover': {\n            boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorCompoundBrandStrokeHover}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`\n        },\n        ':hover:active': {\n            boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`\n        }\n    }\n});\nconst useSizeStyles = makeStyles({\n    'extra-small': {\n        width: '20px',\n        height: '20px',\n        ':hover': {\n            boxShadow: `inset 0 0 0 ${tokens.strokeWidthThin} ${tokens.colorBrandStroke1}, inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus1}`\n        },\n        ':hover:active': {\n            border: 'none',\n            boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`\n        }\n    },\n    small: {\n        width: '24px',\n        height: '24px',\n        ':hover:active': {\n            border: 'none',\n            boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`\n        }\n    },\n    medium: {\n        width: '28px',\n        height: '28px'\n    },\n    large: {\n        width: '32px',\n        height: '32px'\n    }\n});\nconst useShapeStyles = makeStyles({\n    rounded: {\n        borderRadius: tokens.borderRadiusMedium,\n        ...createCustomFocusIndicatorStyle({\n            borderRadius: tokens.borderRadiusMedium\n        })\n    },\n    circular: {\n        borderRadius: tokens.borderRadiusCircular,\n        ...createCustomFocusIndicatorStyle({\n            borderRadius: tokens.borderRadiusCircular\n        })\n    },\n    square: {\n        borderRadius: tokens.borderRadiusNone,\n        ...createCustomFocusIndicatorStyle({\n            borderRadius: tokens.borderRadiusNone\n        })\n    }\n});\nconst useIconStyles = makeStyles({\n    disabledIcon: {\n        color: tokens.colorNeutralForegroundInverted,\n        filter: 'drop-shadow(0 1px 1px rgb(0 0 0 / 1))'\n    },\n    icon: {\n        position: 'absolute',\n        display: 'flex',\n        alignSelf: 'center'\n    },\n    'extra-small': {\n        fontSize: '16px'\n    },\n    small: {\n        fontSize: '16px'\n    },\n    medium: {\n        fontSize: '20px'\n    },\n    large: {\n        fontSize: '24px'\n    }\n});\n/**\n * Apply styling to the ColorSwatch slots based on the state\n */ export const useColorSwatchStyles_unstable = (state)=>{\n    const { size = 'medium', shape = 'square' } = state;\n    const resetStyles = useResetStyles();\n    const styles = useStyles();\n    const sizeStyles = useSizeStyles();\n    const shapeStyles = useShapeStyles();\n    const iconStyles = useIconStyles();\n    const smallerSelectedStyles = size === 'small' || size === 'extra-small' ? styles.selectedSmall : '';\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(colorSwatchClassNames.root, resetStyles, sizeStyles[size], shapeStyles[shape], state.selected && styles.selected, state.selected && smallerSelectedStyles, state.disabled && styles.disabled, state.root.className);\n    if (state.disabled && state.disabledIcon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.disabledIcon.className = mergeClasses(iconStyles.icon, iconStyles[size], iconStyles.disabledIcon, state.disabledIcon.className);\n    }\n    if (state.icon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.icon.className = mergeClasses(iconStyles.icon, iconStyles[size], state.icon.className);\n    }\n    return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","tokens","createCustomFocusIndicatorStyle","swatchCSSVars","colorSwatchClassNames","root","icon","disabledIcon","color","borderColor","useResetStyles","r","s","useStyles","disabled","eoavqd","Bvxd0ez","Be968up","selected","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","vajtyg","j6ew2k","Bv9i2bc","selectedSmall","h","m","d","p","useSizeStyles","a9b677","Bqenvij","Bfsrqk8","B9zn80p","libdba","qi15n7","G6mxvm","Bpld233","B2v0cj4","qv9p00","Bg6oviu","Bk6r4ia","Bckajt6","Bone85h","hkxzgu","b661bw","kpb45w","uiygdg","rljib7","small","medium","large","useShapeStyles","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","circular","square","useIconStyles","sj55zd","Bhu2qc9","qhf8xq","mc9l5x","qb2dma","Be2twd7","useColorSwatchStyles_unstable","state","size","shape","resetStyles","styles","sizeStyles","shapeStyles","iconStyles","smallerSelectedStyles","className"],"mappings":"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"}

package/lib-commonjs/components/ColorSwatch/{useColorSwatchStyles.styles.raw.js → useColorSwatchStyles.styles.raw.cjs}

@@ -13,9 +13,6 @@ _export(exports, {
     colorSwatchClassNames: function() {
         return colorSwatchClassNames;
     },
-    swatchCSSVars: function() {
-        return swatchCSSVars;
-    },
     useColorSwatchStyles_unstable: function() {
         return useColorSwatchStyles_unstable;
     }
@@ -23,16 +20,13 @@ _export(exports, {
 const _react = require("@griffel/react");
 const _reacttheme = require("@fluentui/react-theme");
 const _reacttabster = require("@fluentui/react-tabster");
+const _ColorSwatchconstants = require("./ColorSwatch.constants.cjs");
 const colorSwatchClassNames = {
     root: 'fui-ColorSwatch',
     icon: 'fui-ColorSwatch__icon',
     disabledIcon: 'fui-ColorSwatch__disabledIcon'
 };
-const swatchCSSVars = {
-    color: `--fui-SwatchPicker--color`,
-    borderColor: `--fui-SwatchPicker--borderColor`
-};
-const { color, borderColor } = swatchCSSVars;
+const { color, borderColor } = _ColorSwatchconstants.swatchCSSVars;
 /**
  * Styles for the root slot
  */ const useResetStyles = (0, _react.makeResetStyles)({
@@ -41,7 +35,7 @@ const { color, borderColor } = swatchCSSVars;
     alignItems: 'center',
     justifyContent: 'center',
     boxSizing: 'border-box',
-    border: `1px solid var(${borderColor})`,
+    border: `1px solid var(${borderColor}, ${_reacttheme.tokens.colorTransparentStroke})`,
     background: `var(${color})`,
     overflow: 'hidden',
     padding: '0',
@@ -187,7 +181,6 @@ const useIconStyles = (0, _react.makeStyles)({
     }
 });
 const useColorSwatchStyles_unstable = (state)=>{
-    'use no memo';
     const { size = 'medium', shape = 'square' } = state;
     const resetStyles = useResetStyles();
     const styles = useStyles();

package/lib-commonjs/components/ColorSwatch/useColorSwatchStyles.styles.raw.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorSwatch/useColorSwatchStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ColorSwatchSlots, ColorSwatchState } from './ColorSwatch.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { swatchCSSVars } from './ColorSwatch.constants';\n\nexport const colorSwatchClassNames: SlotClassNames<ColorSwatchSlots> = {\n  root: 'fui-ColorSwatch',\n  icon: 'fui-ColorSwatch__icon',\n  disabledIcon: 'fui-ColorSwatch__disabledIcon',\n};\n\nconst { color, borderColor } = swatchCSSVars;\n\n/**\n * Styles for the root slot\n */\nconst useResetStyles = makeResetStyles({\n  display: 'inline-flex',\n  flexShrink: 0,\n  alignItems: 'center',\n  justifyContent: 'center',\n  boxSizing: 'border-box',\n  border: `1px solid var(${borderColor}, ${tokens.colorTransparentStroke})`,\n  background: `var(${color})`,\n  overflow: 'hidden',\n  padding: '0',\n  ':hover': {\n    cursor: 'pointer',\n    border: 'none',\n    boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke1}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`,\n  },\n  ':hover:active': {\n    border: 'none',\n    boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`,\n  },\n  ':focus': {\n    outline: 'none',\n  },\n  ':focus-visible': {\n    outline: 'none',\n  },\n  ...createCustomFocusIndicatorStyle({\n    border: 'none',\n    outline: 'none',\n    boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`,\n  }),\n\n  // High contrast styles\n\n  '@media (forced-colors: active)': {\n    forcedColorAdjust: 'none',\n    ':hover': {\n      boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke2Hover}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`,\n    },\n    ':hover:active': {\n      boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke2Pressed}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`,\n    },\n  },\n});\n\nconst useStyles = makeStyles({\n  disabled: {\n    ':hover': {\n      cursor: 'not-allowed',\n      boxShadow: 'none',\n    },\n    '@media (forced-colors: active)': {\n      ':hover': {\n        boxShadow: 'none',\n      },\n    },\n  },\n  selected: {\n    border: 'none',\n    boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke1}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`,\n    ':hover': {\n      boxShadow: `inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorCompoundBrandStrokeHover}, inset 0 0 0 6px ${tokens.colorStrokeFocus1}`,\n    },\n    ':hover:active': {\n      boxShadow: `inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 7px ${tokens.colorStrokeFocus1}`,\n    },\n    ...createCustomFocusIndicatorStyle({\n      boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus2}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`,\n    }),\n    '@media (forced-colors: active)': {\n      boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke2Pressed}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`,\n    },\n  },\n  selectedSmall: {\n    boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke1}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`,\n    ':hover': {\n      boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorCompoundBrandStrokeHover}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`,\n    },\n    ':hover:active': {\n      boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`,\n    },\n  },\n});\n\nconst useSizeStyles = makeStyles({\n  'extra-small': {\n    width: '20px',\n    height: '20px',\n    ':hover': {\n      boxShadow: `inset 0 0 0 ${tokens.strokeWidthThin} ${tokens.colorBrandStroke1}, inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus1}`,\n    },\n    ':hover:active': {\n      border: 'none',\n      boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`,\n    },\n  },\n  small: {\n    width: '24px',\n    height: '24px',\n    ':hover:active': {\n      border: 'none',\n      boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`,\n    },\n  },\n  medium: {\n    width: '28px',\n    height: '28px',\n  },\n  large: {\n    width: '32px',\n    height: '32px',\n  },\n});\n\nconst useShapeStyles = makeStyles({\n  rounded: {\n    borderRadius: tokens.borderRadiusMedium,\n    ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusMedium }),\n  },\n  circular: {\n    borderRadius: tokens.borderRadiusCircular,\n    ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusCircular }),\n  },\n  square: {\n    borderRadius: tokens.borderRadiusNone,\n    ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusNone }),\n  },\n});\n\nconst useIconStyles = makeStyles({\n  disabledIcon: {\n    color: tokens.colorNeutralForegroundInverted,\n    filter: 'drop-shadow(0 1px 1px rgb(0 0 0 / 1))',\n  },\n  icon: {\n    position: 'absolute',\n    display: 'flex',\n    alignSelf: 'center',\n  },\n  'extra-small': {\n    fontSize: '16px',\n  },\n  small: {\n    fontSize: '16px',\n  },\n  medium: {\n    fontSize: '20px',\n  },\n  large: {\n    fontSize: '24px',\n  },\n});\n\n/**\n * Apply styling to the ColorSwatch slots based on the state\n */\nexport const useColorSwatchStyles_unstable = (state: ColorSwatchState): ColorSwatchState => {\n  const { size = 'medium', shape = 'square' } = state;\n\n  const resetStyles = useResetStyles();\n  const styles = useStyles();\n  const sizeStyles = useSizeStyles();\n  const shapeStyles = useShapeStyles();\n  const iconStyles = useIconStyles();\n  const smallerSelectedStyles = size === 'small' || size === 'extra-small' ? styles.selectedSmall : '';\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    colorSwatchClassNames.root,\n    resetStyles,\n    sizeStyles[size],\n    shapeStyles[shape],\n    state.selected && styles.selected,\n    state.selected && smallerSelectedStyles,\n    state.disabled && styles.disabled,\n    state.root.className,\n  );\n\n  if (state.disabled && state.disabledIcon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.disabledIcon.className = mergeClasses(\n      iconStyles.icon,\n      iconStyles[size],\n      iconStyles.disabledIcon,\n      state.disabledIcon.className,\n    );\n  }\n\n  if (state.icon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.icon.className = mergeClasses(iconStyles.icon, iconStyles[size], state.icon.className);\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","createCustomFocusIndicatorStyle","swatchCSSVars","colorSwatchClassNames","root","icon","disabledIcon","color","borderColor","useResetStyles","display","flexShrink","alignItems","justifyContent","boxSizing","border","colorTransparentStroke","background","overflow","padding","cursor","boxShadow","strokeWidthThick","colorBrandStroke1","strokeWidthThicker","colorStrokeFocus1","colorCompoundBrandStrokePressed","strokeWidthThickest","outline","colorStrokeFocus2","forcedColorAdjust","colorBrandStroke2Hover","colorBrandStroke2Pressed","useStyles","disabled","selected","colorCompoundBrandStrokeHover","selectedSmall","useSizeStyles","width","height","strokeWidthThin","small","medium","large","useShapeStyles","rounded","borderRadius","borderRadiusMedium","circular","borderRadiusCircular","square","borderRadiusNone","useIconStyles","colorNeutralForegroundInverted","filter","position","alignSelf","fontSize","useColorSwatchStyles_unstable","state","size","shape","resetStyles","styles","sizeStyles","shapeStyles","iconStyles","smallerSelectedStyles","className"],"mappings":"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"}

package/lib-commonjs/components/EmptySwatch/{EmptySwatch.js → EmptySwatch.cjs}

@@ -11,9 +11,9 @@ Object.defineProperty(exports, "EmptySwatch", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _useEmptySwatch = require("./useEmptySwatch");
-const _renderEmptySwatch = require("./renderEmptySwatch");
-const _useEmptySwatchStylesstyles = require("./useEmptySwatchStyles.styles");
+const _useEmptySwatch = require("./useEmptySwatch.cjs");
+const _renderEmptySwatch = require("./renderEmptySwatch.cjs");
+const _useEmptySwatchStylesstyles = require("./useEmptySwatchStyles.styles.cjs");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const EmptySwatch = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useEmptySwatch.useEmptySwatch_unstable)(props, ref);

package/lib-commonjs/components/EmptySwatch/{EmptySwatch.js.map → EmptySwatch.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/EmptySwatch/EmptySwatch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useEmptySwatch_unstable } from './useEmptySwatch';\nimport { renderEmptySwatch_unstable } from './renderEmptySwatch';\nimport { useEmptySwatchStyles_unstable } from './useEmptySwatchStyles.styles';\nimport type { EmptySwatchProps } from './EmptySwatch.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * EmptySwatch component is used for adding new color swatches.\n */\nexport const EmptySwatch: ForwardRefComponent<EmptySwatchProps> = React.forwardRef((props, ref) => {\n  const state = useEmptySwatch_unstable(props, ref);\n\n  useEmptySwatchStyles_unstable(state);\n  useCustomStyleHook_unstable('useEmptySwatchStyles_unstable')(state);\n  return renderEmptySwatch_unstable(state);\n});\n\nEmptySwatch.displayName = 'EmptySwatch';\n"],"names":["React","useEmptySwatch_unstable","renderEmptySwatch_unstable","useEmptySwatchStyles_unstable","useCustomStyleHook_unstable","EmptySwatch","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCAES,mBAAmB;mCAChB,sBAAsB;4CACnB,gCAAgC;qCAElC,kCAAkC;AAKvE,MAAMK,cAAAA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQR,uCAAAA,EAAwBM,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAC9BL,gDAAAA,EAA4B,iCAAiCK;IAC7D,WAAOP,6CAAAA,EAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/EmptySwatch/EmptySwatch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useEmptySwatch_unstable } from './useEmptySwatch';\nimport { renderEmptySwatch_unstable } from './renderEmptySwatch';\nimport { useEmptySwatchStyles_unstable } from './useEmptySwatchStyles.styles';\nimport type { EmptySwatchProps } from './EmptySwatch.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * EmptySwatch component is used for adding new color swatches.\n */\nexport const EmptySwatch: ForwardRefComponent<EmptySwatchProps> = React.forwardRef((props, ref) => {\n  const state = useEmptySwatch_unstable(props, ref);\n\n  useEmptySwatchStyles_unstable(state);\n  useCustomStyleHook_unstable('useEmptySwatchStyles_unstable')(state);\n  return renderEmptySwatch_unstable(state);\n});\n\nEmptySwatch.displayName = 'EmptySwatch';\n"],"names":["React","useEmptySwatch_unstable","renderEmptySwatch_unstable","useEmptySwatchStyles_unstable","useCustomStyleHook_unstable","EmptySwatch","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCAES,sBAAmB;mCAChB,yBAAsB;4CACnB,mCAAgC;qCAElC,kCAAkC;AAKvE,MAAMK,cAAAA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQR,uCAAAA,EAAwBM,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAC9BL,gDAAAA,EAA4B,iCAAiCK;IAC7D,WAAOP,6CAAAA,EAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

package/lib-commonjs/components/EmptySwatch/{EmptySwatch.types.js → EmptySwatch.types.cjs}

@@ -1,6 +1,4 @@
-/**
- * State used in rendering EmptySwatch
- */ "use strict";
+"use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });

package/lib-commonjs/components/EmptySwatch/{EmptySwatch.types.js.map → EmptySwatch.types.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/EmptySwatch/EmptySwatch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';\n\nexport type EmptySwatchSlots = {\n  root: Slot<'button'>;\n};\n\n/**\n * EmptySwatch Props\n */\nexport type EmptySwatchProps = ComponentProps<EmptySwatchSlots> & Pick<SwatchPickerProps, 'size' | 'shape'>;\n\n/**\n * State used in rendering EmptySwatch\n */\nexport type EmptySwatchState = ComponentState<EmptySwatchSlots> & Pick<EmptySwatchProps, 'size' | 'shape'>;\n"],"names":[],"mappings":"AAYA;;CAEC,GACD,WAA2G"}
+{"version":3,"sources":["../src/components/EmptySwatch/EmptySwatch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';\n\nexport type EmptySwatchSlots = {\n  root: Slot<'button'>;\n};\n\n/**\n * EmptySwatch Props\n */\nexport type EmptySwatchProps = ComponentProps<EmptySwatchSlots> & Pick<SwatchPickerProps, 'size' | 'shape'>;\n\nexport type EmptySwatchBaseProps = ComponentProps<EmptySwatchSlots>;\n\n/**\n * State used in rendering EmptySwatch\n */\nexport type EmptySwatchState = ComponentState<EmptySwatchSlots> & Pick<EmptySwatchProps, 'size' | 'shape'>;\n\nexport type EmptySwatchBaseState = ComponentState<EmptySwatchSlots>;\n"],"names":[],"mappings":""}

package/lib-commonjs/components/EmptySwatch/{index.js → index.cjs}

@@ -18,6 +18,9 @@ _export(exports, {
     renderEmptySwatch_unstable: function() {
         return _renderEmptySwatch.renderEmptySwatch_unstable;
     },
+    useEmptySwatchBase_unstable: function() {
+        return _useEmptySwatch.useEmptySwatchBase_unstable;
+    },
     useEmptySwatchStyles_unstable: function() {
         return _useEmptySwatchStylesstyles.useEmptySwatchStyles_unstable;
     },
@@ -25,7 +28,7 @@ _export(exports, {
         return _useEmptySwatch.useEmptySwatch_unstable;
     }
 });
-const _EmptySwatch = require("./EmptySwatch");
-const _renderEmptySwatch = require("./renderEmptySwatch");
-const _useEmptySwatch = require("./useEmptySwatch");
-const _useEmptySwatchStylesstyles = require("./useEmptySwatchStyles.styles");
+const _EmptySwatch = require("./EmptySwatch.cjs");
+const _renderEmptySwatch = require("./renderEmptySwatch.cjs");
+const _useEmptySwatch = require("./useEmptySwatch.cjs");
+const _useEmptySwatchStylesstyles = require("./useEmptySwatchStyles.styles.cjs");

package/lib-commonjs/components/EmptySwatch/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/EmptySwatch/index.ts"],"sourcesContent":["export { EmptySwatch } from './EmptySwatch';\nexport type {\n  EmptySwatchBaseProps,\n  EmptySwatchBaseState,\n  EmptySwatchProps,\n  EmptySwatchSlots,\n  EmptySwatchState,\n} from './EmptySwatch.types';\nexport { renderEmptySwatch_unstable } from './renderEmptySwatch';\nexport { useEmptySwatch_unstable, useEmptySwatchBase_unstable } from './useEmptySwatch';\nexport { emptySwatchClassNames, useEmptySwatchStyles_unstable } from './useEmptySwatchStyles.styles';\n"],"names":["EmptySwatch","renderEmptySwatch_unstable","useEmptySwatch_unstable","useEmptySwatchBase_unstable","emptySwatchClassNames","useEmptySwatchStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eAUXI,iDAAqB;;;eAFrBH,6CAA0B;;;eACDE,2CAA2B;;;eAC7BE,yDAA6B;;;eADpDH,uCAAuB;;;6BATJ,mBAAgB;mCAQD,yBAAsB;gCACI,sBAAmB;4CACnB,mCAAgC"}

package/lib-commonjs/components/EmptySwatch/renderEmptySwatch.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/EmptySwatch/renderEmptySwatch.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 { EmptySwatchBaseState, EmptySwatchSlots } from './EmptySwatch.types';\n\n/**\n * Render the final JSX of EmptySwatch\n */\nexport const renderEmptySwatch_unstable = (state: EmptySwatchBaseState): JSXElement => {\n  assertSlots<EmptySwatchSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderEmptySwatch_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;AAOjD,MAAMC,6BAA6B,CAACC;QACzCF,2BAAAA,EAA8BE;IAE9B,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}

package/lib-commonjs/components/EmptySwatch/useEmptySwatch.cjs

@@ -0,0 +1,52 @@
+'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, {
+    useEmptySwatchBase_unstable: function() {
+        return useEmptySwatchBase_unstable;
+    },
+    useEmptySwatch_unstable: function() {
+        return useEmptySwatch_unstable;
+    }
+});
+const _reactutilities = require("@fluentui/react-utilities");
+const _swatchPicker = require("../../contexts/swatchPicker.cjs");
+const useEmptySwatchBase_unstable = (props, ref)=>{
+    const isGrid = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.isGrid);
+    const role = isGrid ? 'gridcell' : 'radio';
+    const a11yProps = isGrid ? {} : {
+        'aria-checked': false
+    };
+    return {
+        components: {
+            root: 'button'
+        },
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('button', {
+            ref,
+            role,
+            ...a11yProps,
+            ...props
+        }), {
+            elementType: 'button'
+        })
+    };
+};
+const useEmptySwatch_unstable = (props, ref)=>{
+    const sizeFromContext = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.size);
+    const shapeFromContext = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.shape);
+    const { size = sizeFromContext, shape = shapeFromContext, ...rest } = props;
+    const baseState = useEmptySwatchBase_unstable(rest, ref);
+    return {
+        ...baseState,
+        size,
+        shape
+    };
+};

package/lib-commonjs/components/EmptySwatch/useEmptySwatch.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/EmptySwatch/useEmptySwatch.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type {\n  EmptySwatchBaseProps,\n  EmptySwatchBaseState,\n  EmptySwatchProps,\n  EmptySwatchState,\n} from './EmptySwatch.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\n\n/**\n * Create the base state required to render unstyled EmptySwatch.\n *\n * The returned state can be modified with hooks before being passed to renderEmptySwatch_unstable.\n *\n * @param props - props from this instance of EmptySwatch\n * @param ref - reference to root HTMLDivElement of EmptySwatch\n */\nexport const useEmptySwatchBase_unstable = (\n  props: EmptySwatchBaseProps,\n  ref: React.Ref<HTMLButtonElement>,\n): EmptySwatchBaseState => {\n  const isGrid = useSwatchPickerContextValue_unstable(ctx => ctx.isGrid);\n\n  const role = isGrid ? 'gridcell' : 'radio';\n  const a11yProps = isGrid ? {} : { 'aria-checked': false };\n  return {\n    components: {\n      root: 'button',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        role,\n        ...a11yProps,\n        ...props,\n      }),\n      { elementType: 'button' },\n    ),\n  };\n};\n\n/**\n * Create the state required to render EmptySwatch.\n *\n * The returned state can be modified with hooks such as useEmptySwatchStyles_unstable,\n * before being passed to renderEmptySwatch_unstable.\n *\n * @param props - props from this instance of EmptySwatch\n * @param ref - reference to root HTMLDivElement of EmptySwatch\n */\nexport const useEmptySwatch_unstable = (\n  props: EmptySwatchProps,\n  ref: React.Ref<HTMLButtonElement>,\n): EmptySwatchState => {\n  const sizeFromContext = useSwatchPickerContextValue_unstable(ctx => ctx.size);\n  const shapeFromContext = useSwatchPickerContextValue_unstable(ctx => ctx.shape);\n  const { size = sizeFromContext, shape = shapeFromContext, ...rest } = props;\n\n  const baseState = useEmptySwatchBase_unstable(rest, ref);\n\n  return {\n    ...baseState,\n    size,\n    shape,\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","useSwatchPickerContextValue_unstable","useEmptySwatchBase_unstable","props","ref","isGrid","ctx","role","a11yProps","components","root","always","elementType","useEmptySwatch_unstable","sizeFromContext","size","shapeFromContext","shape","rest","baseState"],"mappings":"AAAA;;;;;;;;;;;;IAoBaG,2BAAAA;;;2BAiCAW;;;;gCAlDkC,4BAA4B;8BAOtB,iCAA8B;AAU5E,oCAAoC,CACzCV,OACAC;IAEA,MAAMC,aAASJ,kDAAAA,EAAqCK,CAAAA,MAAOA,IAAID,MAAM;IAErE,MAAME,OAAOF,SAAS,aAAa;IACnC,MAAMG,YAAYH,SAAS,CAAC,IAAI;QAAE,gBAAgB;IAAM;IACxD,OAAO;QACLI,YAAY;YACVC,MAAM;QACR;QACAA,MAAMV,oBAAAA,CAAKW,MAAM,KACfZ,wCAAAA,EAAyB,UAAU;YACjCK;YACAG;YACA,GAAGC,SAAS;YACZ,GAAGL,KAAK;QACV,IACA;YAAES,aAAa;QAAS;IAE5B;AACF,EAAE;AAWK,MAAMC,0BAA0B,CACrCV,OACAC;IAEA,MAAMU,sBAAkBb,kDAAAA,EAAqCK,CAAAA,MAAOA,IAAIS,IAAI;IAC5E,MAAMC,uBAAmBf,kDAAAA,EAAqCK,CAAAA,MAAOA,IAAIW,KAAK;IAC9E,MAAM,EAAEF,OAAOD,eAAe,EAAEG,QAAQD,gBAAgB,EAAE,GAAGE,MAAM,GAAGf;IAEtE,MAAMgB,YAAYjB,4BAA4BgB,MAAMd;IAEpD,OAAO;QACL,GAAGe,SAAS;QACZJ;QACAE;IACF;AACF,EAAE"}

package/lib-commonjs/components/EmptySwatch/{useEmptySwatchStyles.styles.js → useEmptySwatchStyles.styles.cjs}

@@ -133,7 +133,6 @@ const useShapeStyles = /*#__PURE__*/ (0, _react.__styles)({
     ]
 });
 const useEmptySwatchStyles_unstable = (state)=>{
-    'use no memo';
     const styles = useStyles();
     const sizeStyles = useSizeStyles();
     const shapeStyles = useShapeStyles();

package/lib-commonjs/components/EmptySwatch/useEmptySwatchStyles.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useEmptySwatchStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from \"@griffel/react\";\nimport { tokens } from \"@fluentui/react-theme\";\nimport { createCustomFocusIndicatorStyle } from \"@fluentui/react-tabster\";\nexport const emptySwatchClassNames = {\n    root: 'fui-EmptySwatch'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n    backgroundColor: tokens.colorTransparentBackground,\n    border: `1px dashed ${tokens.colorNeutralForeground4}`\n});\nconst useSizeStyles = makeStyles({\n    'extra-small': {\n        width: '20px',\n        height: '20px'\n    },\n    small: {\n        width: '24px',\n        height: '24px'\n    },\n    medium: {\n        width: '28px',\n        height: '28px'\n    },\n    large: {\n        width: '32px',\n        height: '32px'\n    }\n});\nconst useShapeStyles = makeStyles({\n    rounded: {\n        borderRadius: tokens.borderRadiusMedium,\n        ...createCustomFocusIndicatorStyle({\n            borderRadius: tokens.borderRadiusMedium\n        })\n    },\n    circular: {\n        borderRadius: tokens.borderRadiusCircular,\n        ...createCustomFocusIndicatorStyle({\n            borderRadius: tokens.borderRadiusCircular\n        })\n    },\n    square: {\n        borderRadius: tokens.borderRadiusNone,\n        ...createCustomFocusIndicatorStyle({\n            borderRadius: tokens.borderRadiusNone\n        })\n    }\n});\n/**\n * Apply styling to the EmptySwatch slots based on the state\n */ export const useEmptySwatchStyles_unstable = (state)=>{\n    const styles = useStyles();\n    const sizeStyles = useSizeStyles();\n    const shapeStyles = useShapeStyles();\n    var _state_size;\n    const size = (_state_size = state.size) !== null && _state_size !== void 0 ? _state_size : 'medium';\n    var _state_shape;\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(emptySwatchClassNames.root, styles, sizeStyles[size], shapeStyles[(_state_shape = state.shape) !== null && _state_shape !== void 0 ? _state_shape : 'square'], state.root.className);\n    return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","tokens","createCustomFocusIndicatorStyle","emptySwatchClassNames","root","useStyles","useSizeStyles","a9b677","Bqenvij","small","medium","large","d","useShapeStyles","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","circular","square","p","useEmptySwatchStyles_unstable","state","styles","sizeStyles","shapeStyles","_state_size","size","_state_shape","className","shape"],"mappings":"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"}

package/lib-commonjs/components/EmptySwatch/{useEmptySwatchStyles.styles.raw.js → useEmptySwatchStyles.styles.raw.cjs}

@@ -68,7 +68,6 @@ const useShapeStyles = (0, _react.makeStyles)({
     }
 });
 const useEmptySwatchStyles_unstable = (state)=>{
-    'use no memo';
     const styles = useStyles();
     const sizeStyles = useSizeStyles();
     const shapeStyles = useShapeStyles();

package/lib-commonjs/components/EmptySwatch/useEmptySwatchStyles.styles.raw.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/EmptySwatch/useEmptySwatchStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { EmptySwatchSlots, EmptySwatchState } from './EmptySwatch.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n\nexport const emptySwatchClassNames: SlotClassNames<EmptySwatchSlots> = {\n  root: 'fui-EmptySwatch',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeResetStyles({\n  backgroundColor: tokens.colorTransparentBackground,\n  border: `1px dashed ${tokens.colorNeutralForeground4}`,\n});\n\nconst useSizeStyles = makeStyles({\n  'extra-small': {\n    width: '20px',\n    height: '20px',\n  },\n  small: {\n    width: '24px',\n    height: '24px',\n  },\n  medium: {\n    width: '28px',\n    height: '28px',\n  },\n  large: {\n    width: '32px',\n    height: '32px',\n  },\n});\n\nconst useShapeStyles = makeStyles({\n  rounded: {\n    borderRadius: tokens.borderRadiusMedium,\n    ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusMedium }),\n  },\n  circular: {\n    borderRadius: tokens.borderRadiusCircular,\n    ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusCircular }),\n  },\n  square: {\n    borderRadius: tokens.borderRadiusNone,\n    ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusNone }),\n  },\n});\n\n/**\n * Apply styling to the EmptySwatch slots based on the state\n */\nexport const useEmptySwatchStyles_unstable = (state: EmptySwatchState): EmptySwatchState => {\n  const styles = useStyles();\n  const sizeStyles = useSizeStyles();\n  const shapeStyles = useShapeStyles();\n\n  const size = state.size ?? 'medium';\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    emptySwatchClassNames.root,\n    styles,\n    sizeStyles[size],\n    shapeStyles[state.shape ?? 'square'],\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","createCustomFocusIndicatorStyle","emptySwatchClassNames","root","useStyles","backgroundColor","colorTransparentBackground","border","colorNeutralForeground4","useSizeStyles","width","height","small","medium","large","useShapeStyles","rounded","borderRadius","borderRadiusMedium","circular","borderRadiusCircular","square","borderRadiusNone","useEmptySwatchStyles_unstable","state","styles","sizeStyles","shapeStyles","size","className","shape"],"mappings":"AAAA;;;;;;;;;;;;IAQaK,qBAAAA;;;iCAiDAqB;eAAAA;;;uBAvD6C,iBAAiB;4BAGpD,wBAAwB;8BACC,0BAA0B;AAEnE,8BAAgE;IACrEpB,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYP,sBAAAA,EAAgB;IAChCQ,iBAAiBL,kBAAAA,CAAOM,0BAA0B;IAClDC,QAAQ,CAAC,WAAW,EAAEP,kBAAAA,CAAOQ,uBAAuB,EAAE;AACxD;AAEA,MAAMC,oBAAgBX,iBAAAA,EAAW;IAC/B,eAAe;QACbY,OAAO;QACPC,QAAQ;IACV;IACAC,OAAO;QACLF,OAAO;QACPC,QAAQ;IACV;IACAE,QAAQ;QACNH,OAAO;QACPC,QAAQ;IACV;IACAG,OAAO;QACLJ,OAAO;QACPC,QAAQ;IACV;AACF;AAEA,MAAMI,qBAAiBjB,iBAAAA,EAAW;IAChCkB,SAAS;QACPC,cAAcjB,kBAAAA,CAAOkB,kBAAkB;QACvC,OAAGjB,6CAAAA,EAAgC;YAAEgB,cAAcjB,kBAAAA,CAAOkB,kBAAkB;QAAC,EAAE;IACjF;IACAC,UAAU;QACRF,cAAcjB,kBAAAA,CAAOoB,oBAAoB;QACzC,OAAGnB,6CAAAA,EAAgC;YAAEgB,cAAcjB,kBAAAA,CAAOoB,oBAAoB;QAAC,EAAE;IACnF;IACAC,QAAQ;QACNJ,cAAcjB,kBAAAA,CAAOsB,gBAAgB;QACrC,OAAGrB,6CAAAA,EAAgC;YAAEgB,cAAcjB,kBAAAA,CAAOsB,gBAAgB;QAAC,EAAE;IAC/E;AACF;AAKO,sCAAsC,CAACE;IAC5C,MAAMC,SAASrB;IACf,MAAMsB,aAAajB;IACnB,MAAMkB,cAAcZ;QAEPS;IAAb,MAAMI,OAAOJ,CAAAA,cAAAA,MAAMI,IAAAA,AAAI,MAAA,QAAVJ,gBAAAA,KAAAA,IAAAA,cAAc;QAObA;IALd,oDAAoD;IACpDA,MAAMrB,IAAI,CAAC0B,SAAS,OAAG9B,mBAAAA,EACrBG,sBAAsBC,IAAI,EAC1BsB,QACAC,UAAU,CAACE,KAAK,EAChBD,WAAW,CAACH,CAAAA,eAAAA,MAAMM,KAAAA,AAAK,MAAA,QAAXN,iBAAAA,KAAAA,IAAAA,eAAe,SAAS,EACpCA,MAAMrB,IAAI,CAAC0B,SAAS;IAGtB,OAAOL;AACT,EAAE"}

package/lib-commonjs/components/ImageSwatch/{ImageSwatch.js → ImageSwatch.cjs}

@@ -11,9 +11,9 @@ Object.defineProperty(exports, "ImageSwatch", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _useImageSwatch = require("./useImageSwatch");
-const _renderImageSwatch = require("./renderImageSwatch");
-const _useImageSwatchStylesstyles = require("./useImageSwatchStyles.styles");
+const _useImageSwatch = require("./useImageSwatch.cjs");
+const _renderImageSwatch = require("./renderImageSwatch.cjs");
+const _useImageSwatchStylesstyles = require("./useImageSwatchStyles.styles.cjs");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const ImageSwatch = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useImageSwatch.useImageSwatch_unstable)(props, ref);

package/lib-commonjs/components/ImageSwatch/{ImageSwatch.js.map → ImageSwatch.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ImageSwatch/ImageSwatch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useImageSwatch_unstable } from './useImageSwatch';\nimport { renderImageSwatch_unstable } from './renderImageSwatch';\nimport { useImageSwatchStyles_unstable } from './useImageSwatchStyles.styles';\nimport type { ImageSwatchProps } from './ImageSwatch.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ImageSwatch component is used to render an images, patterns and textures.\n */\nexport const ImageSwatch: ForwardRefComponent<ImageSwatchProps> = React.forwardRef((props, ref) => {\n  const state = useImageSwatch_unstable(props, ref);\n\n  useImageSwatchStyles_unstable(state);\n  useCustomStyleHook_unstable('useImageSwatchStyles_unstable')(state);\n\n  return renderImageSwatch_unstable(state);\n});\n\nImageSwatch.displayName = 'ImageSwatch';\n"],"names":["React","useImageSwatch_unstable","renderImageSwatch_unstable","useImageSwatchStyles_unstable","useCustomStyleHook_unstable","ImageSwatch","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCAES,mBAAmB;mCAChB,sBAAsB;4CACnB,gCAAgC;qCAElC,kCAAkC;AAKvE,MAAMK,cAAAA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQR,uCAAAA,EAAwBM,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAC9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOP,6CAAAA,EAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/ImageSwatch/ImageSwatch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useImageSwatch_unstable } from './useImageSwatch';\nimport { renderImageSwatch_unstable } from './renderImageSwatch';\nimport { useImageSwatchStyles_unstable } from './useImageSwatchStyles.styles';\nimport type { ImageSwatchProps } from './ImageSwatch.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ImageSwatch component is used to render an images, patterns and textures.\n */\nexport const ImageSwatch: ForwardRefComponent<ImageSwatchProps> = React.forwardRef((props, ref) => {\n  const state = useImageSwatch_unstable(props, ref);\n\n  useImageSwatchStyles_unstable(state);\n  useCustomStyleHook_unstable('useImageSwatchStyles_unstable')(state);\n\n  return renderImageSwatch_unstable(state);\n});\n\nImageSwatch.displayName = 'ImageSwatch';\n"],"names":["React","useImageSwatch_unstable","renderImageSwatch_unstable","useImageSwatchStyles_unstable","useCustomStyleHook_unstable","ImageSwatch","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCAES,sBAAmB;mCAChB,yBAAsB;4CACnB,mCAAgC;qCAElC,kCAAkC;AAKvE,MAAMK,cAAAA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQR,uCAAAA,EAAwBM,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAC9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOP,6CAAAA,EAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

package/lib-commonjs/components/ImageSwatch/{ImageSwatch.types.js → ImageSwatch.types.cjs}

@@ -1,6 +1,4 @@
-/**
- * State used in rendering ImageSwatch
- */ "use strict";
+"use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });