@fluentui/react-swatch-picker 9.5.3 → 9.6.0

package/lib/ImageSwatch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/ImageSwatch.ts"],"sourcesContent":["export type { ImageSwatchProps, ImageSwatchSlots, ImageSwatchState } from './components/ImageSwatch/index';\nexport {\n  ImageSwatch,\n  imageSwatchClassNames,\n  renderImageSwatch_unstable,\n  useImageSwatchStyles_unstable,\n  useImageSwatch_unstable,\n} from './components/ImageSwatch/index';\n"],"names":["ImageSwatch","imageSwatchClassNames","renderImageSwatch_unstable","useImageSwatchStyles_unstable","useImageSwatch_unstable"],"mappings":"AACA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,iCAAiC"}
+{"version":3,"sources":["../src/ImageSwatch.ts"],"sourcesContent":["export type {\n  ImageSwatchBaseProps,\n  ImageSwatchBaseState,\n  ImageSwatchProps,\n  ImageSwatchSlots,\n  ImageSwatchState,\n} from './components/ImageSwatch/index';\nexport {\n  ImageSwatch,\n  imageSwatchClassNames,\n  renderImageSwatch_unstable,\n  useImageSwatchStyles_unstable,\n  useImageSwatch_unstable,\n  useImageSwatchBase_unstable,\n} from './components/ImageSwatch/index';\n"],"names":["ImageSwatch","imageSwatchClassNames","renderImageSwatch_unstable","useImageSwatchStyles_unstable","useImageSwatch_unstable","useImageSwatchBase_unstable"],"mappings":"AAOA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,EACvBC,2BAA2B,QACtB,oCAAiC"}

package/lib/SwatchPicker.js

@@ -1 +1 @@
-export { SwatchPicker, renderSwatchPicker_unstable, swatchPickerClassNames, useSwatchPickerStyles_unstable, useSwatchPicker_unstable } from './components/SwatchPicker/index';
+export { SwatchPicker, renderSwatchPicker_unstable, swatchPickerClassNames, useSwatchPickerStyles_unstable, useSwatchPicker_unstable, useSwatchPickerBase_unstable } from "./components/SwatchPicker/index.js";

package/lib/SwatchPicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/SwatchPicker.ts"],"sourcesContent":["export type {\n  SwatchPickerOnSelectEventHandler,\n  SwatchPickerOnSelectionChangeData,\n  SwatchPickerProps,\n  SwatchPickerSlots,\n  SwatchPickerState,\n} from './components/SwatchPicker/index';\nexport {\n  SwatchPicker,\n  renderSwatchPicker_unstable,\n  swatchPickerClassNames,\n  useSwatchPickerStyles_unstable,\n  useSwatchPicker_unstable,\n} from './components/SwatchPicker/index';\n"],"names":["SwatchPicker","renderSwatchPicker_unstable","swatchPickerClassNames","useSwatchPickerStyles_unstable","useSwatchPicker_unstable"],"mappings":"AAOA,SACEA,YAAY,EACZC,2BAA2B,EAC3BC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,QACnB,kCAAkC"}
+{"version":3,"sources":["../src/SwatchPicker.ts"],"sourcesContent":["export type {\n  SwatchPickerBaseProps,\n  SwatchPickerBaseState,\n  SwatchPickerOnSelectEventHandler,\n  SwatchPickerOnSelectionChangeData,\n  SwatchPickerProps,\n  SwatchPickerSlots,\n  SwatchPickerState,\n} from './components/SwatchPicker/index';\nexport {\n  SwatchPicker,\n  renderSwatchPicker_unstable,\n  swatchPickerClassNames,\n  useSwatchPickerStyles_unstable,\n  useSwatchPicker_unstable,\n  useSwatchPickerBase_unstable,\n} from './components/SwatchPicker/index';\n"],"names":["SwatchPicker","renderSwatchPicker_unstable","swatchPickerClassNames","useSwatchPickerStyles_unstable","useSwatchPicker_unstable","useSwatchPickerBase_unstable"],"mappings":"AASA,SACEA,YAAY,EACZC,2BAA2B,EAC3BC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,EACxBC,4BAA4B,QACvB,qCAAkC"}

package/lib/SwatchPickerRow.js

@@ -1 +1 @@
-export { SwatchPickerRow, renderSwatchPickerRow_unstable, swatchPickerRowClassNames, useSwatchPickerRowStyles_unstable, useSwatchPickerRow_unstable } from './components/SwatchPickerRow/index';
+export { SwatchPickerRow, renderSwatchPickerRow_unstable, swatchPickerRowClassNames, useSwatchPickerRowStyles_unstable, useSwatchPickerRow_unstable, useSwatchPickerRowBase_unstable } from "./components/SwatchPickerRow/index.js";

package/lib/SwatchPickerRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/SwatchPickerRow.ts"],"sourcesContent":["export type {\n  SwatchPickerRowProps,\n  SwatchPickerRowSlots,\n  SwatchPickerRowState,\n} from './components/SwatchPickerRow/index';\nexport {\n  SwatchPickerRow,\n  renderSwatchPickerRow_unstable,\n  swatchPickerRowClassNames,\n  useSwatchPickerRowStyles_unstable,\n  useSwatchPickerRow_unstable,\n} from './components/SwatchPickerRow/index';\n"],"names":["SwatchPickerRow","renderSwatchPickerRow_unstable","swatchPickerRowClassNames","useSwatchPickerRowStyles_unstable","useSwatchPickerRow_unstable"],"mappings":"AAKA,SACEA,eAAe,EACfC,8BAA8B,EAC9BC,yBAAyB,EACzBC,iCAAiC,EACjCC,2BAA2B,QACtB,qCAAqC"}
+{"version":3,"sources":["../src/SwatchPickerRow.ts"],"sourcesContent":["export type {\n  SwatchPickerRowBaseProps,\n  SwatchPickerRowBaseState,\n  SwatchPickerRowProps,\n  SwatchPickerRowSlots,\n  SwatchPickerRowState,\n} from './components/SwatchPickerRow/index';\nexport {\n  SwatchPickerRow,\n  renderSwatchPickerRow_unstable,\n  swatchPickerRowClassNames,\n  useSwatchPickerRowStyles_unstable,\n  useSwatchPickerRow_unstable,\n  useSwatchPickerRowBase_unstable,\n} from './components/SwatchPickerRow/index';\n"],"names":["SwatchPickerRow","renderSwatchPickerRow_unstable","swatchPickerRowClassNames","useSwatchPickerRowStyles_unstable","useSwatchPickerRow_unstable","useSwatchPickerRowBase_unstable"],"mappings":"AAOA,SACEA,eAAe,EACfC,8BAA8B,EAC9BC,yBAAyB,EACzBC,iCAAiC,EACjCC,2BAA2B,EAC3BC,+BAA+B,QAC1B,wCAAqC"}

package/lib/components/ColorSwatch/ColorSwatch.constants.js

@@ -0,0 +1,4 @@
+export const swatchCSSVars = {
+    color: `--fui-SwatchPicker--color`,
+    borderColor: `--fui-SwatchPicker--borderColor`
+};

package/lib/components/ColorSwatch/ColorSwatch.constants.js.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":"AAAA,OAAO,MAAMA,gBAAgB;IAC3BC,OAAO,CAAC,yBAAyB,CAAC;IAClCC,aAAa,CAAC,+BAA+B,CAAC;AAChD,EAAE"}

package/lib/components/ColorSwatch/ColorSwatch.js

@@ -1,9 +1,9 @@
 'use client';
-import * as React from 'react';
-import { useColorSwatch_unstable } from './useColorSwatch';
-import { renderColorSwatch_unstable } from './renderColorSwatch';
-import { useColorSwatchStyles_unstable } from './useColorSwatchStyles.styles';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import * as React from "react";
+import { useColorSwatch_unstable } from "./useColorSwatch.js";
+import { renderColorSwatch_unstable } from "./renderColorSwatch.js";
+import { useColorSwatchStyles_unstable } from "./useColorSwatchStyles.styles.js";
+import { useCustomStyleHook_unstable } from "@fluentui/react-shared-contexts";
 /**
  * ColorSwatch component is used to render a colors, icons and gradients.
  */ export const ColorSwatch = /*#__PURE__*/ React.forwardRef((props, ref)=>{

package/lib/components/ColorSwatch/ColorSwatch.js.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;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,gCAAgC;AAE9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CL,8BAA8BM;IAC9BL,4BAA4B,iCAAiCK;IAE7D,OAAOP,2BAA2BO;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;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,QAAQ,sBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,yBAAsB;AACjE,SAASC,6BAA6B,QAAQ,mCAAgC;AAE9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CL,8BAA8BM;IAC9BL,4BAA4B,iCAAiCK;IAE7D,OAAOP,2BAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

package/lib/components/ColorSwatch/ColorSwatch.types.js

@@ -1,3 +1 @@
-/**
- * State used in rendering ColorSwatch
- */ export { };
+export { };

package/lib/components/ColorSwatch/ColorSwatch.types.js.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":"AA6CA,WAA4E"}

package/lib/components/ColorSwatch/index.js

@@ -1,4 +1,5 @@
-export { ColorSwatch } from './ColorSwatch';
-export { renderColorSwatch_unstable } from './renderColorSwatch';
-export { useColorSwatch_unstable } from './useColorSwatch';
-export { colorSwatchClassNames, swatchCSSVars, useColorSwatchStyles_unstable } from './useColorSwatchStyles.styles';
+export { ColorSwatch } from "./ColorSwatch.js";
+export { renderColorSwatch_unstable } from "./renderColorSwatch.js";
+export { useColorSwatch_unstable, useColorSwatchBase_unstable } from "./useColorSwatch.js";
+export { colorSwatchClassNames, useColorSwatchStyles_unstable } from "./useColorSwatchStyles.styles.js";
+export { swatchCSSVars } from "./ColorSwatch.constants.js";

package/lib/components/ColorSwatch/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorSwatch/index.ts"],"sourcesContent":["export { ColorSwatch } from './ColorSwatch';\nexport type { ColorSwatchProps, ColorSwatchSlots, ColorSwatchState } from './ColorSwatch.types';\nexport { renderColorSwatch_unstable } from './renderColorSwatch';\nexport { useColorSwatch_unstable } from './useColorSwatch';\nexport { colorSwatchClassNames, swatchCSSVars, useColorSwatchStyles_unstable } from './useColorSwatchStyles.styles';\n"],"names":["ColorSwatch","renderColorSwatch_unstable","useColorSwatch_unstable","colorSwatchClassNames","swatchCSSVars","useColorSwatchStyles_unstable"],"mappings":"AAAA,SAASA,WAAW,QAAQ,gBAAgB;AAE5C,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,qBAAqB,EAAEC,aAAa,EAAEC,6BAA6B,QAAQ,gCAAgC"}
+{"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":"AAAA,SAASA,WAAW,QAAQ,mBAAgB;AAQ5C,SAASC,0BAA0B,QAAQ,yBAAsB;AACjE,SAASC,uBAAuB,EAAEC,2BAA2B,QAAQ,sBAAmB;AACxF,SAASC,qBAAqB,EAAEC,6BAA6B,QAAQ,mCAAgC;AACrG,SAASC,aAAa,QAAQ,6BAA0B"}

package/lib/components/ColorSwatch/renderColorSwatch.js

@@ -1,5 +1,5 @@
   import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import { assertSlots } from '@fluentui/react-utilities';
+import { assertSlots } from "@fluentui/react-utilities";
 /**
  * Render the final JSX of ColorSwatch
  */ export const renderColorSwatch_unstable = (state)=>{

package/lib/components/ColorSwatch/renderColorSwatch.js.map

@@ -1 +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 { ColorSwatchState, ColorSwatchSlots } from './ColorSwatch.types';\n\n/**\n * Render the final JSX of ColorSwatch\n */\nexport const renderColorSwatch_unstable = (state: ColorSwatchState): 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":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCF,YAA8BE;IAE9B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAMC,IAAI,CAACC,QAAQ;YACnBF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;YACzBH,MAAMI,QAAQ,IAAIJ,MAAMK,YAAY,kBAAI,KAACL,MAAMK,YAAY;;;AAGlE,EAAE"}
+{"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":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCF,YAA8BE;IAE9B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAMC,IAAI,CAACC,QAAQ;YACnBF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;YACzBH,MAAMI,QAAQ,IAAIJ,MAAMK,YAAY,kBAAI,KAACL,MAAMK,YAAY;;;AAGlE,EAAE"}

package/lib/components/ColorSwatch/useColorSwatch.js

@@ -1,22 +1,18 @@
 'use client';
-import * as React from 'react';
-import { slot, useEventCallback, getIntrinsicElementProps, mergeCallbacks } from '@fluentui/react-utilities';
-import { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';
-import { swatchCSSVars } from './useColorSwatchStyles.styles';
-import { ProhibitedFilled } from '@fluentui/react-icons';
-import { tokens } from '@fluentui/react-theme';
+import * as React from "react";
+import { slot, useEventCallback, getIntrinsicElementProps, mergeCallbacks } from "@fluentui/react-utilities";
+import { useSwatchPickerContextValue_unstable } from "../../contexts/swatchPicker.js";
+import { ProhibitedFilled } from "@fluentui/react-icons";
+import { swatchCSSVars } from "./ColorSwatch.constants.js";
 /**
- * Create the state required to render ColorSwatch.
+ * Create the basee state required to render unstyled ColorSwatch.
  *
- * The returned state can be modified with hooks such as useColorSwatchStyles_unstable,
- * before being passed to renderColorSwatch_unstable.
+ * The returned state can be modified with hooks before being passed to renderColorSwatch_unstable.
  *
  * @param props - props from this instance of ColorSwatch
  * @param ref - reference to root HTMLButtonElement of ColorSwatch
- */ export const useColorSwatch_unstable = (props, ref)=>{
-    const { borderColor, color, disabled, disabledIcon, icon, value, onClick, size, shape, style, ...rest } = props;
-    const _size = useSwatchPickerContextValue_unstable((ctx)=>ctx.size);
-    const _shape = useSwatchPickerContextValue_unstable((ctx)=>ctx.shape);
+ */ export const useColorSwatchBase_unstable = (props, ref)=>{
+    const { borderColor, color, disabled, disabledIcon, icon, value, onClick, style, ...rest } = props;
     const isGrid = useSwatchPickerContextValue_unstable((ctx)=>ctx.isGrid);
     const requestSelectionChange = useSwatchPickerContextValue_unstable((ctx)=>ctx.requestSelectionChange);
     const selected = useSwatchPickerContextValue_unstable((ctx)=>ctx.selectedValue === value);
@@ -26,7 +22,7 @@ import { tokens } from '@fluentui/react-theme';
         })));
     const rootVariables = {
         [swatchCSSVars.color]: color,
-        [swatchCSSVars.borderColor]: borderColor !== null && borderColor !== void 0 ? borderColor : tokens.colorTransparentStroke
+        [swatchCSSVars.borderColor]: borderColor
     };
     const role = isGrid ? 'gridcell' : 'radio';
     const ariaSelected = isGrid ? {
@@ -38,10 +34,6 @@ import { tokens } from '@fluentui/react-theme';
         elementType: 'span'
     });
     const disabledIconShorthand = slot.optional(disabledIcon, {
-        defaultProps: {
-            children: /*#__PURE__*/ React.createElement(ProhibitedFilled, null)
-        },
-        renderByDefault: true,
         elementType: 'span'
     });
     return {
@@ -68,10 +60,35 @@ import { tokens } from '@fluentui/react-theme';
         icon: iconShorthand,
         disabledIcon: disabledIconShorthand,
         disabled,
-        size: size !== null && size !== void 0 ? size : _size,
-        shape: shape !== null && shape !== void 0 ? shape : _shape,
         selected,
         color,
         value
     };
 };
+/**
+ * Create the state required to render ColorSwatch.
+ *
+ * The returned state can be modified with hooks such as useColorSwatchStyles_unstable,
+ * before being passed to renderColorSwatch_unstable.
+ *
+ * @param props - props from this instance of ColorSwatch
+ * @param ref - reference to root HTMLButtonElement of ColorSwatch
+ */ export const useColorSwatch_unstable = (props, ref)=>{
+    const sizeFromContext = useSwatchPickerContextValue_unstable((ctx)=>ctx.size);
+    const shapeFromContext = useSwatchPickerContextValue_unstable((ctx)=>ctx.shape);
+    const { size = sizeFromContext, shape = shapeFromContext, disabledIcon, ...rest } = props;
+    const baseState = useColorSwatchBase_unstable(rest, ref);
+    return {
+        ...baseState,
+        size,
+        shape,
+        disabledIcon: slot.optional(disabledIcon, {
+            defaultProps: {
+                ...baseState.disabledIcon,
+                children: /*#__PURE__*/ React.createElement(ProhibitedFilled, null)
+            },
+            renderByDefault: true,
+            elementType: 'span'
+        })
+    };
+};

package/lib/components/ColorSwatch/useColorSwatch.js.map

@@ -1 +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 { ColorSwatchProps, ColorSwatchState } from './ColorSwatch.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\nimport { swatchCSSVars } from './useColorSwatchStyles.styles';\nimport { ProhibitedFilled } from '@fluentui/react-icons';\nimport { tokens } from '@fluentui/react-theme';\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 { borderColor, color, disabled, disabledIcon, icon, value, onClick, size, shape, style, ...rest } = props;\n  const _size = useSwatchPickerContextValue_unstable(ctx => ctx.size);\n  const _shape = useSwatchPickerContextValue_unstable(ctx => ctx.shape);\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 ?? tokens.colorTransparentStroke,\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    defaultProps: {\n      children: <ProhibitedFilled />,\n    },\n    renderByDefault: true,\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    size: size ?? _size,\n    shape: shape ?? _shape,\n    selected,\n    color,\n    value,\n  };\n};\n"],"names":["React","slot","useEventCallback","getIntrinsicElementProps","mergeCallbacks","useSwatchPickerContextValue_unstable","swatchCSSVars","ProhibitedFilled","tokens","useColorSwatch_unstable","props","ref","borderColor","color","disabled","disabledIcon","icon","value","onClick","size","shape","style","rest","_size","ctx","_shape","isGrid","requestSelectionChange","selected","selectedValue","onColorSwatchClick","event","selectedSwatch","rootVariables","colorTransparentStroke","role","ariaSelected","iconShorthand","optional","elementType","disabledIconShorthand","defaultProps","children","renderByDefault","components","root","always","type"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,EAAEC,gBAAgB,EAAEC,wBAAwB,EAAEC,cAAc,QAAQ,4BAA4B;AAE7G,SAASC,oCAAoC,QAAQ,8BAA8B;AACnF,SAASC,aAAa,QAAQ,gCAAgC;AAC9D,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,MAAM,QAAQ,wBAAwB;AAE/C;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CACrCC,OACAC;IAEA,MAAM,EAAEC,WAAW,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,IAAI,EAAEC,KAAK,EAAEC,OAAO,EAAEC,IAAI,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGZ;IAC1G,MAAMa,QAAQlB,qCAAqCmB,CAAAA,MAAOA,IAAIL,IAAI;IAClE,MAAMM,SAASpB,qCAAqCmB,CAAAA,MAAOA,IAAIJ,KAAK;IACpE,MAAMM,SAASrB,qCAAqCmB,CAAAA,MAAOA,IAAIE,MAAM;IAErE,MAAMC,yBAAyBtB,qCAAqCmB,CAAAA,MAAOA,IAAIG,sBAAsB;IACrG,MAAMC,WAAWvB,qCAAqCmB,CAAAA,MAAOA,IAAIK,aAAa,KAAKZ;IAEnF,MAAMa,qBAAqB5B,iBACzBE,eAAec,SAAS,CAACa,QACvBJ,uBAAuBI,OAAO;YAC5BF,eAAeZ;YACfe,gBAAgBnB;QAClB;IAIJ,MAAMoB,gBAAgB;QACpB,CAAC3B,cAAcO,KAAK,CAAC,EAAEA;QACvB,CAACP,cAAcM,WAAW,CAAC,EAAEA,wBAAAA,yBAAAA,cAAeJ,OAAO0B,sBAAsB;IAC3E;IAEA,MAAMC,OAAOT,SAAS,aAAa;IACnC,MAAMU,eAAeV,SACjB;QACE,iBAAiBE;IACnB,IACA;QAAE,gBAAgBA;IAAS;IAE/B,MAAMS,gBAAgBpC,KAAKqC,QAAQ,CAACtB,MAAM;QAAEuB,aAAa;IAAO;IAChE,MAAMC,wBAAwBvC,KAAKqC,QAAQ,CAACvB,cAAc;QACxD0B,cAAc;YACZC,wBAAU,oBAACnC;QACb;QACAoC,iBAAiB;QACjBJ,aAAa;IACf;IAEA,OAAO;QACLK,YAAY;YACVC,MAAM;YACN7B,MAAM;YACND,cAAc;QAChB;QACA8B,MAAM5C,KAAK6C,MAAM,CACf3C,yBAAyB,UAAU;YACjCQ;YACAwB;YACA,GAAGC,YAAY;YACflB,SAASY;YACTiB,MAAM;YACNjC;YACA,GAAGQ,IAAI;YACPD,OAAO;gBACL,GAAGY,aAAa;gBAChB,GAAGZ,KAAK;YACV;QACF,IACA;YAAEkB,aAAa;QAAS;QAE1BvB,MAAMqB;QACNtB,cAAcyB;QACd1B;QACAK,MAAMA,iBAAAA,kBAAAA,OAAQI;QACdH,OAAOA,kBAAAA,mBAAAA,QAASK;QAChBG;QACAf;QACAI;IACF;AACF,EAAE"}
+{"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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,EAAEC,gBAAgB,EAAEC,wBAAwB,EAAEC,cAAc,QAAQ,4BAA4B;AAO7G,SAASC,oCAAoC,QAAQ,iCAA8B;AACnF,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,aAAa,QAAQ,6BAA0B;AAExD;;;;;;;CAOC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,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,SAASf,qCAAqCgB,CAAAA,MAAOA,IAAID,MAAM;IAErE,MAAME,yBAAyBjB,qCAAqCgB,CAAAA,MAAOA,IAAIC,sBAAsB;IACrG,MAAMC,WAAWlB,qCAAqCgB,CAAAA,MAAOA,IAAIG,aAAa,KAAKR;IAEnF,MAAMS,qBAAqBvB,iBACzBE,eAAea,SAAS,CAACS,QACvBJ,uBAAuBI,OAAO;YAC5BF,eAAeR;YACfW,gBAAgBf;QAClB;IAIJ,MAAMgB,gBAAgB;QACpB,CAACrB,cAAcK,KAAK,CAAC,EAAEA;QACvB,CAACL,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,KAAK+B,QAAQ,CAACjB,MAAM;QAAEkB,aAAa;IAAO;IAChE,MAAMC,wBAAwBjC,KAAK+B,QAAQ,CAAClB,cAAc;QACxDmB,aAAa;IACf;IAEA,OAAO;QACLE,YAAY;YACVC,MAAM;YACNrB,MAAM;YACND,cAAc;QAChB;QACAsB,MAAMnC,KAAKoC,MAAM,CACflC,yBAAyB,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;AAEF;;;;;;;;CAQC,GACD,OAAO,MAAMuB,0BAA0B,CACrC9B,OACAC;IAEA,MAAM8B,kBAAkBnC,qCAAqCgB,CAAAA,MAAOA,IAAIoB,IAAI;IAC5E,MAAMC,mBAAmBrC,qCAAqCgB,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,KAAK+B,QAAQ,CAAClB,cAAc;YACxC+B,cAAc;gBACZ,GAAGD,UAAU9B,YAAY;gBACzBgC,wBAAU,oBAACxC;YACb;YACAyC,iBAAiB;YACjBd,aAAa;QACf;IACF;AACF,EAAE"}

package/lib/components/ColorSwatch/useColorSwatchStyles.styles.js

@@ -1,17 +1,14 @@
 'use client';
 
-import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
-import { tokens } from '@fluentui/react-theme';
-import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { __resetStyles, __styles, mergeClasses } from "@griffel/react";
+import { tokens } from "@fluentui/react-theme";
+import { createCustomFocusIndicatorStyle } from "@fluentui/react-tabster";
+import { swatchCSSVars } from "./ColorSwatch.constants.js";
 export const colorSwatchClassNames = {
   root: 'fui-ColorSwatch',
   icon: 'fui-ColorSwatch__icon',
   disabledIcon: 'fui-ColorSwatch__disabledIcon'
 };
-export const swatchCSSVars = {
-  color: `--fui-SwatchPicker--color`,
-  borderColor: `--fui-SwatchPicker--borderColor`
-};
 const {
   color,
   borderColor
@@ -19,9 +16,9 @@ const {
 /**
  * Styles for the root slot
  */
-const useResetStyles = /*#__PURE__*/__resetStyles("ryw27oi", 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);}"],
-  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);}}"]
+const useResetStyles = /*#__PURE__*/__resetStyles("r15zvwyd", null, {
+  r: [".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){.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__*/__styles({
   disabled: {
@@ -212,8 +209,6 @@ const useIconStyles = /*#__PURE__*/__styles({
  * Apply styling to the ColorSwatch slots based on the state
  */
 export const useColorSwatchStyles_unstable = state => {
-  'use no memo';
-
   const {
     size = 'medium',
     shape = 'square'

package/lib/components/ColorSwatch/useColorSwatchStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","createCustomFocusIndicatorStyle","colorSwatchClassNames","root","icon","disabledIcon","swatchCSSVars","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"],"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';\nexport const colorSwatchClassNames = {\n    root: 'fui-ColorSwatch',\n    icon: 'fui-ColorSwatch__icon',\n    disabledIcon: 'fui-ColorSwatch__disabledIcon'\n};\nexport const swatchCSSVars = {\n    color: `--fui-SwatchPicker--color`,\n    borderColor: `--fui-SwatchPicker--borderColor`\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})`,\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    'use no memo';\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"],"mappings":"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","ignoreList":[]}
+{"version":3,"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"],"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"],"mappings":"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","ignoreList":[]}

package/lib/components/ColorSwatch/useColorSwatchStyles.styles.raw.js

@@ -1,16 +1,13 @@
 'use client';
-import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
-import { tokens } from '@fluentui/react-theme';
-import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { makeResetStyles, makeStyles, mergeClasses } from "@griffel/react";
+import { tokens } from "@fluentui/react-theme";
+import { createCustomFocusIndicatorStyle } from "@fluentui/react-tabster";
+import { swatchCSSVars } from "./ColorSwatch.constants.js";
 export const colorSwatchClassNames = {
     root: 'fui-ColorSwatch',
     icon: 'fui-ColorSwatch__icon',
     disabledIcon: 'fui-ColorSwatch__disabledIcon'
 };
-export const swatchCSSVars = {
-    color: `--fui-SwatchPicker--color`,
-    borderColor: `--fui-SwatchPicker--borderColor`
-};
 const { color, borderColor } = swatchCSSVars;
 /**
  * Styles for the root slot
@@ -20,7 +17,7 @@ const { color, borderColor } = swatchCSSVars;
     alignItems: 'center',
     justifyContent: 'center',
     boxSizing: 'border-box',
-    border: `1px solid var(${borderColor})`,
+    border: `1px solid var(${borderColor}, ${tokens.colorTransparentStroke})`,
     background: `var(${color})`,
     overflow: 'hidden',
     padding: '0',
@@ -168,7 +165,6 @@ const useIconStyles = makeStyles({
 /**
  * Apply styling to the ColorSwatch slots based on the state
  */ export const useColorSwatchStyles_unstable = (state)=>{
-    'use no memo';
     const { size = 'medium', shape = 'square' } = state;
     const resetStyles = useResetStyles();
     const styles = useStyles();

package/lib/components/ColorSwatch/useColorSwatchStyles.styles.raw.js.map

@@ -1 +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';\n\nexport const colorSwatchClassNames: SlotClassNames<ColorSwatchSlots> = {\n  root: 'fui-ColorSwatch',\n  icon: 'fui-ColorSwatch__icon',\n  disabledIcon: 'fui-ColorSwatch__disabledIcon',\n};\n\nexport const swatchCSSVars = {\n  color: `--fui-SwatchPicker--color`,\n  borderColor: `--fui-SwatchPicker--borderColor`,\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})`,\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  'use no memo';\n\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","colorSwatchClassNames","root","icon","disabledIcon","swatchCSSVars","color","borderColor","useResetStyles","display","flexShrink","alignItems","justifyContent","boxSizing","border","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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"}
+{"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/components/EmptySwatch/EmptySwatch.js

@@ -1,9 +1,9 @@
 'use client';
-import * as React from 'react';
-import { useEmptySwatch_unstable } from './useEmptySwatch';
-import { renderEmptySwatch_unstable } from './renderEmptySwatch';
-import { useEmptySwatchStyles_unstable } from './useEmptySwatchStyles.styles';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import * as React from "react";
+import { useEmptySwatch_unstable } from "./useEmptySwatch.js";
+import { renderEmptySwatch_unstable } from "./renderEmptySwatch.js";
+import { useEmptySwatchStyles_unstable } from "./useEmptySwatchStyles.styles.js";
+import { useCustomStyleHook_unstable } from "@fluentui/react-shared-contexts";
 /**
  * EmptySwatch component is used for adding new color swatches.
  */ export const EmptySwatch = /*#__PURE__*/ React.forwardRef((props, ref)=>{

package/lib/components/EmptySwatch/EmptySwatch.js.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;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,gCAAgC;AAE9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CL,8BAA8BM;IAC9BL,4BAA4B,iCAAiCK;IAC7D,OAAOP,2BAA2BO;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;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,QAAQ,sBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,yBAAsB;AACjE,SAASC,6BAA6B,QAAQ,mCAAgC;AAE9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CL,8BAA8BM;IAC9BL,4BAA4B,iCAAiCK;IAC7D,OAAOP,2BAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

package/lib/components/EmptySwatch/EmptySwatch.types.js

@@ -1,3 +1 @@
-/**
- * State used in rendering EmptySwatch
- */ export { };
+export { };

package/lib/components/EmptySwatch/EmptySwatch.types.js.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":"AAmBA,WAAoE"}

package/lib/components/EmptySwatch/index.js

@@ -1,4 +1,4 @@
-export { EmptySwatch } from './EmptySwatch';
-export { renderEmptySwatch_unstable } from './renderEmptySwatch';
-export { useEmptySwatch_unstable } from './useEmptySwatch';
-export { emptySwatchClassNames, useEmptySwatchStyles_unstable } from './useEmptySwatchStyles.styles';
+export { EmptySwatch } from "./EmptySwatch.js";
+export { renderEmptySwatch_unstable } from "./renderEmptySwatch.js";
+export { useEmptySwatch_unstable, useEmptySwatchBase_unstable } from "./useEmptySwatch.js";
+export { emptySwatchClassNames, useEmptySwatchStyles_unstable } from "./useEmptySwatchStyles.styles.js";

package/lib/components/EmptySwatch/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/EmptySwatch/index.ts"],"sourcesContent":["export { EmptySwatch } from './EmptySwatch';\nexport type { EmptySwatchProps, EmptySwatchSlots, EmptySwatchState } from './EmptySwatch.types';\nexport { renderEmptySwatch_unstable } from './renderEmptySwatch';\nexport { useEmptySwatch_unstable } from './useEmptySwatch';\nexport { emptySwatchClassNames, useEmptySwatchStyles_unstable } from './useEmptySwatchStyles.styles';\n"],"names":["EmptySwatch","renderEmptySwatch_unstable","useEmptySwatch_unstable","emptySwatchClassNames","useEmptySwatchStyles_unstable"],"mappings":"AAAA,SAASA,WAAW,QAAQ,gBAAgB;AAE5C,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,qBAAqB,EAAEC,6BAA6B,QAAQ,gCAAgC"}
+{"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":"AAAA,SAASA,WAAW,QAAQ,mBAAgB;AAQ5C,SAASC,0BAA0B,QAAQ,yBAAsB;AACjE,SAASC,uBAAuB,EAAEC,2BAA2B,QAAQ,sBAAmB;AACxF,SAASC,qBAAqB,EAAEC,6BAA6B,QAAQ,mCAAgC"}

package/lib/components/EmptySwatch/renderEmptySwatch.js

@@ -1,5 +1,5 @@
   import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import { assertSlots } from '@fluentui/react-utilities';
+import { assertSlots } from "@fluentui/react-utilities";
 /**
  * Render the final JSX of EmptySwatch
  */ export const renderEmptySwatch_unstable = (state)=>{

package/lib/components/EmptySwatch/renderEmptySwatch.js.map

@@ -1 +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 { EmptySwatchState, EmptySwatchSlots } from './EmptySwatch.types';\n\n/**\n * Render the final JSX of EmptySwatch\n */\nexport const renderEmptySwatch_unstable = (state: EmptySwatchState): JSXElement => {\n  assertSlots<EmptySwatchSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderEmptySwatch_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCF,YAA8BE;IAE9B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}
+{"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":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCF,YAA8BE;IAE9B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}