@fluentui/react-swatch-picker 9.1.3 → 9.1.5

package/CHANGELOG.md

@@ -1,12 +1,41 @@
 # Change Log - @fluentui/react-swatch-picker
 
-This log was last generated on Mon, 17 Jun 2024 07:31:08 GMT and should not be manually modified.
+This log was last generated on Mon, 15 Jul 2024 17:20:32 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.1.5)
+
+Mon, 15 Jul 2024 17:20:32 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.1.4..@fluentui/react-swatch-picker_v9.1.5)
+
+### Patches
+
+- fix: revert incorectly set npm versions in all packages ([PR #31937](https://github.com/microsoft/fluentui/pull/31937) by martinhochel@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.1.64 ([PR #31998](https://github.com/microsoft/fluentui/pull/31998) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.41 ([PR #31998](https://github.com/microsoft/fluentui/pull/31998) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.19.1 ([PR #31998](https://github.com/microsoft/fluentui/pull/31998) by beachball)
+- Bump @fluentui/react-tabster to v9.22.2 ([PR #31998](https://github.com/microsoft/fluentui/pull/31998) by beachball)
+- Bump @fluentui/react-utilities to v9.18.12 ([PR #31998](https://github.com/microsoft/fluentui/pull/31998) by beachball)
+
+## [9.1.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.1.4)
+
+Mon, 01 Jul 2024 20:30:31 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.1.3..@fluentui/react-swatch-picker_v9.1.4)
+
+### Patches
+
+- chore: add eslint react-compiler ([PR #31457](https://github.com/microsoft/fluentui/pull/31457) by seanmonahan@microsoft.com)
+- chore: Update react-icons package to ^2.0.245 ([PR #31802](https://github.com/microsoft/fluentui/pull/31802) by ololubek@microsoft.com)
+- fix(react-swatch-picker): fixed colors of selected and pressed states ([PR #31830](https://github.com/microsoft/fluentui/pull/31830) by vkozlova@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.1.63 ([PR #31861](https://github.com/microsoft/fluentui/pull/31861) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.40 ([PR #31861](https://github.com/microsoft/fluentui/pull/31861) by beachball)
+- Bump @fluentui/react-tabster to v9.22.1 ([PR #31861](https://github.com/microsoft/fluentui/pull/31861) by beachball)
+- Bump @fluentui/react-utilities to v9.18.11 ([PR #31861](https://github.com/microsoft/fluentui/pull/31861) by beachball)
+
 ## [9.1.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.1.3)
 
-Mon, 17 Jun 2024 07:31:08 GMT 
+Mon, 17 Jun 2024 07:34:17 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.1.2..@fluentui/react-swatch-picker_v9.1.3)
 
 ### Patches

package/lib/ColorSwatch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ColorSwatch.ts"],"sourcesContent":["export * from './components/ColorSwatch/index';\n"],"names":[],"mappings":"AAAA,cAAc,iCAAiC"}
+{"version":3,"sources":["ColorSwatch.ts"],"sourcesContent":["export * from './components/ColorSwatch/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,iCAAiC"}

package/lib/EmptySwatch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["EmptySwatch.ts"],"sourcesContent":["export * from './components/EmptySwatch/index';\n"],"names":[],"mappings":"AAAA,cAAc,iCAAiC"}
+{"version":3,"sources":["EmptySwatch.ts"],"sourcesContent":["export * from './components/EmptySwatch/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,iCAAiC"}

package/lib/ImageSwatch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ImageSwatch.ts"],"sourcesContent":["export * from './components/ImageSwatch/index';\n"],"names":[],"mappings":"AAAA,cAAc,iCAAiC"}
+{"version":3,"sources":["ImageSwatch.ts"],"sourcesContent":["export * from './components/ImageSwatch/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,iCAAiC"}

package/lib/SwatchPicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SwatchPicker.ts"],"sourcesContent":["export * from './components/SwatchPicker/index';\n"],"names":[],"mappings":"AAAA,cAAc,kCAAkC"}
+{"version":3,"sources":["SwatchPicker.ts"],"sourcesContent":["export * from './components/SwatchPicker/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,kCAAkC"}

package/lib/SwatchPickerRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SwatchPickerRow.ts"],"sourcesContent":["export * from './components/SwatchPickerRow/index';\n"],"names":[],"mappings":"AAAA,cAAc,qCAAqC"}
+{"version":3,"sources":["SwatchPickerRow.ts"],"sourcesContent":["export * from './components/SwatchPickerRow/index';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,qCAAqC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["ColorSwatch.tsx"],"sourcesContent":["import * 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,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":["ColorSwatch.tsx"],"sourcesContent":["import * 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"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["ColorSwatch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { 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":"AAAA,WAyCI"}
+{"version":3,"sources":["ColorSwatch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { 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":[],"rangeMappings":";;","mappings":"AAmCA;;CAEC,GACD,WAGI"}

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './ColorSwatch';\nexport * from './ColorSwatch.types';\nexport * from './renderColorSwatch';\nexport * from './useColorSwatch';\nexport * from './useColorSwatchStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,sBAAsB;AACpC,cAAc,sBAAsB;AACpC,cAAc,mBAAmB;AACjC,cAAc,gCAAgC"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './ColorSwatch';\nexport * from './ColorSwatch.types';\nexport * from './renderColorSwatch';\nexport * from './useColorSwatch';\nexport * from './useColorSwatchStyles.styles';\n"],"names":[],"rangeMappings":";;;;","mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,sBAAsB;AACpC,cAAc,sBAAsB;AACpC,cAAc,mBAAmB;AACjC,cAAc,gCAAgC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["renderColorSwatch.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } 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) => {\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;AAGxD;;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":["renderColorSwatch.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } 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) => {\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"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;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.map

@@ -1 +1 @@
-{"version":3,"sources":["useColorSwatch.tsx"],"sourcesContent":["import * 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,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":["useColorSwatch.tsx"],"sourcesContent":["import * 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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,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"}

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

@@ -17,14 +17,15 @@ const {
 /**
  * Styles for the root slot
  */
-const useResetStyles = /*#__PURE__*/__resetStyles("rwl4y25", null, {
-  r: [".rwl4y25{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;}", ".rwl4y25:hover{cursor:pointer;border:none;box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorBrandStroke1),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}", ".rwl4y25:hover:active{border:none;box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke1),inset 0 0 0 var(--strokeWidthThickest) var(--colorStrokeFocus1);}", ".rwl4y25:focus{outline:none;}", ".rwl4y25:focus-visible{outline:none;}", ".rwl4y25[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){.rwl4y25{forced-color-adjust:none;}.rwl4y25:hover{box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorBrandStroke2Hover),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}.rwl4y25:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke2Pressed),inset 0 0 0 var(--strokeWidthThickest) var(--colorStrokeFocus1);}}"]
+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 useStyles = /*#__PURE__*/__styles({
   disabled: {
     eoavqd: "fphbwmw",
-    Bvxd0ez: "f1q3txrk"
+    Bvxd0ez: "f1q3txrk",
+    Bs5ihcz: "f1hjbkfk"
   },
   selected: {
     Bgfg5da: 0,
@@ -45,19 +46,21 @@ const useStyles = /*#__PURE__*/__styles({
     B4j52fo: 0,
     irswps: "f3bhgqh",
     E5pizo: "f8ps3yo",
-    Bvxd0ez: "f1txz9o1",
-    vajtyg: "f1frtkom",
+    Bvxd0ez: "f106r15f",
+    vajtyg: "ft0nc49",
     j6ew2k: "f16jq8vy",
     Bspt33j: "f18nq7tj"
   }
 }, {
-  h: [".fphbwmw:hover{cursor:not-allowed;}", ".f1q3txrk:hover{box-shadow:none;}", ".f1txz9o1:hover{box-shadow:inset 0 0 0 var(--strokeWidthThickest) var(--colorBrandStroke1),inset 0 0 0 6px var(--colorStrokeFocus1);}", ".f1frtkom:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThickest) var(--colorBrandStroke1),inset 0 0 0 7px var(--colorStrokeFocus1);}"],
+  h: [".fphbwmw:hover{cursor:not-allowed;}", ".f1q3txrk:hover{box-shadow:none;}", ".f106r15f:hover{box-shadow:inset 0 0 0 var(--strokeWidthThickest) var(--colorCompoundBrandStrokeHover),inset 0 0 0 6px var(--colorStrokeFocus1);}", ".ft0nc49:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThickest) var(--colorCompoundBrandStrokePressed),inset 0 0 0 7px var(--colorStrokeFocus1);}"],
+  m: [["@media (forced-colors: active){.f1hjbkfk:hover{box-shadow:none;}}", {
+    m: "(forced-colors: active)"
+  }], ["@media (forced-colors: active){.f18nq7tj{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke2Pressed),inset 0 0 0 5px var(--colorStrokeFocus1);}}", {
+    m: "(forced-colors: active)"
+  }]],
   d: [[".f3bhgqh{border:none;}", {
     p: -2
-  }], ".f8ps3yo{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke1),inset 0 0 0 5px var(--colorStrokeFocus1);}", ".f16jq8vy[data-fui-focus-visible]{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus2),inset 0 0 0 5px var(--colorStrokeFocus1);}"],
-  m: [["@media (forced-colors: active){.f18nq7tj{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke2Pressed),inset 0 0 0 5px var(--colorStrokeFocus1);}}", {
-    m: "(forced-colors: active)"
-  }]]
+  }], ".f8ps3yo{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke1),inset 0 0 0 5px var(--colorStrokeFocus1);}", ".f16jq8vy[data-fui-focus-visible]{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus2),inset 0 0 0 5px var(--colorStrokeFocus1);}"]
 });
 const useSizeStyles = /*#__PURE__*/__styles({
   "extra-small": {
@@ -160,6 +163,8 @@ const useIconStyles = /*#__PURE__*/__styles({
  * Apply styling to the ColorSwatch slots based on the state
  */
 export const useColorSwatchStyles_unstable = state => {
+  'use no memo';
+
   const resetStyles = useResetStyles();
   const styles = useStyles();
   const sizeStyles = useSizeStyles();

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","selected","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","vajtyg","j6ew2k","Bspt33j","h","d","p","m","useSizeStyles","a9b677","Bqenvij","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","resetStyles","styles","sizeStyles","shapeStyles","iconStyles","size","shape","className"],"sources":["useColorSwatchStyles.styles.js"],"sourcesContent":["import { 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.colorBrandStroke1}, 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    },\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.colorBrandStroke1}, inset 0 0 0 6px ${tokens.colorStrokeFocus1}`\n        },\n        ':hover:active': {\n            boxShadow: `inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorBrandStroke1}, 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});\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});\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 resetStyles = useResetStyles();\n    const styles = useStyles();\n    const sizeStyles = useSizeStyles();\n    const shapeStyles = useShapeStyles();\n    const iconStyles = useIconStyles();\n    const { size = 'medium', shape = 'square' } = state;\n    state.root.className = mergeClasses(colorSwatchClassNames.root, resetStyles, sizeStyles[size], shapeStyles[shape], state.selected && styles.selected, state.disabled && styles.disabled, state.root.className);\n    if (state.disabled && state.disabledIcon) {\n        state.disabledIcon.className = mergeClasses(iconStyles.icon, iconStyles[size], iconStyles.disabledIcon, state.disabledIcon.className);\n    }\n    if (state.icon) {\n        state.icon.className = mergeClasses(iconStyles.icon, iconStyles[size], state.icon.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE,iBAAiB;EACvBC,IAAI,EAAE,uBAAuB;EAC7BC,YAAY,EAAE;AAClB,CAAC;AACD,OAAO,MAAMC,aAAa,GAAG;EACzBC,KAAK,EAAE,2BAA2B;EAClCC,WAAW,EAAE;AACjB,CAAC;AACD,MAAM;EAAED,KAAK;EAAEC;AAAY,CAAC,GAAGF,aAAa;AAC5C;AACA;AACA;AAAI,MAAMG,cAAc,gBAAGZ,aAAA;EAAAa,CAAA;EAAAC,CAAA;AAAA,CAwC1B,CAAC;AACF,MAAMC,SAAS,gBAAGd,QAAA;EAAAe,QAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAnB,OAAA;IAAAoB,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CAuBjB,CAAC;AACF,MAAMC,aAAa,gBAAG5C,QAAA;EAAA;IAAA6C,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAF,MAAA;IAAAC,OAAA;EAAA;EAAAE,MAAA;IAAAH,MAAA;IAAAC,OAAA;EAAA;EAAAG,KAAA;IAAAJ,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAL,CAAA;AAAA,CAiBrB,CAAC;AACF,MAAMS,cAAc,gBAAGlD,QAAA;EAAAmD,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAV,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAE,MAAA;IAAAX,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAApB,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAmBtB,CAAC;AACF,MAAMsB,aAAa,gBAAGhE,QAAA;EAAAO,YAAA;IAAA0D,MAAA;IAAAC,OAAA;EAAA;EAAA5D,IAAA;IAAA6D,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAA;IAAAC,OAAA;EAAA;EAAAvB,KAAA;IAAAuB,OAAA;EAAA;EAAAtB,MAAA;IAAAsB,OAAA;EAAA;EAAArB,KAAA;IAAAqB,OAAA;EAAA;AAAA;EAAA7B,CAAA;AAAA,CAsBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAM8B,6BAA6B,GAAIC,KAAK,IAAG;EACtD,MAAMC,WAAW,GAAG9D,cAAc,CAAC,CAAC;EACpC,MAAM+D,MAAM,GAAG5D,SAAS,CAAC,CAAC;EAC1B,MAAM6D,UAAU,GAAG/B,aAAa,CAAC,CAAC;EAClC,MAAMgC,WAAW,GAAG1B,cAAc,CAAC,CAAC;EACpC,MAAM2B,UAAU,GAAGb,aAAa,CAAC,CAAC;EAClC,MAAM;IAAEc,IAAI,GAAG,QAAQ;IAAEC,KAAK,GAAG;EAAS,CAAC,GAAGP,KAAK;EACnDA,KAAK,CAACnE,IAAI,CAAC2E,SAAS,GAAG/E,YAAY,CAACG,qBAAqB,CAACC,IAAI,EAAEoE,WAAW,EAAEE,UAAU,CAACG,IAAI,CAAC,EAAEF,WAAW,CAACG,KAAK,CAAC,EAAEP,KAAK,CAACtD,QAAQ,IAAIwD,MAAM,CAACxD,QAAQ,EAAEsD,KAAK,CAACzD,QAAQ,IAAI2D,MAAM,CAAC3D,QAAQ,EAAEyD,KAAK,CAACnE,IAAI,CAAC2E,SAAS,CAAC;EAC9M,IAAIR,KAAK,CAACzD,QAAQ,IAAIyD,KAAK,CAACjE,YAAY,EAAE;IACtCiE,KAAK,CAACjE,YAAY,CAACyE,SAAS,GAAG/E,YAAY,CAAC4E,UAAU,CAACvE,IAAI,EAAEuE,UAAU,CAACC,IAAI,CAAC,EAAED,UAAU,CAACtE,YAAY,EAAEiE,KAAK,CAACjE,YAAY,CAACyE,SAAS,CAAC;EACzI;EACA,IAAIR,KAAK,CAAClE,IAAI,EAAE;IACZkE,KAAK,CAAClE,IAAI,CAAC0E,SAAS,GAAG/E,YAAY,CAAC4E,UAAU,CAACvE,IAAI,EAAEuE,UAAU,CAACC,IAAI,CAAC,EAAEN,KAAK,CAAClE,IAAI,CAAC0E,SAAS,CAAC;EAChG;EACA,OAAOR,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","createCustomFocusIndicatorStyle","colorSwatchClassNames","root","icon","disabledIcon","swatchCSSVars","color","borderColor","useResetStyles","r","s","useStyles","disabled","eoavqd","Bvxd0ez","Bs5ihcz","selected","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","vajtyg","j6ew2k","Bspt33j","h","m","d","p","useSizeStyles","a9b677","Bqenvij","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","resetStyles","styles","sizeStyles","shapeStyles","iconStyles","size","shape","className"],"sources":["useColorSwatchStyles.styles.js"],"sourcesContent":["import { 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});\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});\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 resetStyles = useResetStyles();\n    const styles = useStyles();\n    const sizeStyles = useSizeStyles();\n    const shapeStyles = useShapeStyles();\n    const iconStyles = useIconStyles();\n    const { size = 'medium', shape = 'square' } = state;\n    state.root.className = mergeClasses(colorSwatchClassNames.root, resetStyles, sizeStyles[size], shapeStyles[shape], state.selected && styles.selected, state.disabled && styles.disabled, state.root.className);\n    if (state.disabled && state.disabledIcon) {\n        state.disabledIcon.className = mergeClasses(iconStyles.icon, iconStyles[size], iconStyles.disabledIcon, state.disabledIcon.className);\n    }\n    if (state.icon) {\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/EmptySwatch/EmptySwatch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["EmptySwatch.tsx"],"sourcesContent":["import * 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,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":["EmptySwatch.tsx"],"sourcesContent":["import * 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"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["EmptySwatch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { 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":"AAAA,WAe2G"}
+{"version":3,"sources":["EmptySwatch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { 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":[],"rangeMappings":";;","mappings":"AAYA;;CAEC,GACD,WAA2G"}

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './EmptySwatch';\nexport * from './EmptySwatch.types';\nexport * from './renderEmptySwatch';\nexport * from './useEmptySwatch';\nexport * from './useEmptySwatchStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,sBAAsB;AACpC,cAAc,sBAAsB;AACpC,cAAc,mBAAmB;AACjC,cAAc,gCAAgC"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './EmptySwatch';\nexport * from './EmptySwatch.types';\nexport * from './renderEmptySwatch';\nexport * from './useEmptySwatch';\nexport * from './useEmptySwatchStyles.styles';\n"],"names":[],"rangeMappings":";;;;","mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,sBAAsB;AACpC,cAAc,sBAAsB;AACpC,cAAc,mBAAmB;AACjC,cAAc,gCAAgC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["renderEmptySwatch.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } 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) => {\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;AAGxD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCF,YAA8BE;IAE9B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}
+{"version":3,"sources":["renderEmptySwatch.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } 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) => {\n  assertSlots<EmptySwatchSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderEmptySwatch_unstable","state","root"],"rangeMappings":";;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCF,YAA8BE;IAE9B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["useEmptySwatch.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { EmptySwatchProps, EmptySwatchState } from './EmptySwatch.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\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 { size, shape, ...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 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        ...rest,\n      }),\n      { elementType: 'button' },\n    ),\n    size: size ?? _size,\n    shape: shape ?? _shape,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useSwatchPickerContextValue_unstable","useEmptySwatch_unstable","props","ref","size","shape","rest","_size","ctx","_shape","isGrid","role","a11yProps","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,oCAAoC,QAAQ,8BAA8B;AAEnF;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CACrCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGJ;IACjC,MAAMK,QAAQP,qCAAqCQ,CAAAA,MAAOA,IAAIJ,IAAI;IAClE,MAAMK,SAAST,qCAAqCQ,CAAAA,MAAOA,IAAIH,KAAK;IACpE,MAAMK,SAASV,qCAAqCQ,CAAAA,MAAOA,IAAIE,MAAM;IAErE,MAAMC,OAAOD,SAAS,aAAa;IACnC,MAAME,YAAYF,SAAS,CAAC,IAAI;QAAE,gBAAgB;IAAM;IACxD,OAAO;QACLG,YAAY;YACVC,MAAM;QACR;QACAA,MAAMf,KAAKgB,MAAM,CACfjB,yBAAyB,UAAU;YACjCK;YACAQ;YACA,GAAGC,SAAS;YACZ,GAAGN,IAAI;QACT,IACA;YAAEU,aAAa;QAAS;QAE1BZ,MAAMA,iBAAAA,kBAAAA,OAAQG;QACdF,OAAOA,kBAAAA,mBAAAA,QAASI;IAClB;AACF,EAAE"}
+{"version":3,"sources":["useEmptySwatch.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { EmptySwatchProps, EmptySwatchState } from './EmptySwatch.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\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 { size, shape, ...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 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        ...rest,\n      }),\n      { elementType: 'button' },\n    ),\n    size: size ?? _size,\n    shape: shape ?? _shape,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useSwatchPickerContextValue_unstable","useEmptySwatch_unstable","props","ref","size","shape","rest","_size","ctx","_shape","isGrid","role","a11yProps","components","root","always","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,oCAAoC,QAAQ,8BAA8B;AAEnF;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CACrCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGJ;IACjC,MAAMK,QAAQP,qCAAqCQ,CAAAA,MAAOA,IAAIJ,IAAI;IAClE,MAAMK,SAAST,qCAAqCQ,CAAAA,MAAOA,IAAIH,KAAK;IACpE,MAAMK,SAASV,qCAAqCQ,CAAAA,MAAOA,IAAIE,MAAM;IAErE,MAAMC,OAAOD,SAAS,aAAa;IACnC,MAAME,YAAYF,SAAS,CAAC,IAAI;QAAE,gBAAgB;IAAM;IACxD,OAAO;QACLG,YAAY;YACVC,MAAM;QACR;QACAA,MAAMf,KAAKgB,MAAM,CACfjB,yBAAyB,UAAU;YACjCK;YACAQ;YACA,GAAGC,SAAS;YACZ,GAAGN,IAAI;QACT,IACA;YAAEU,aAAa;QAAS;QAE1BZ,MAAMA,iBAAAA,kBAAAA,OAAQG;QACdF,OAAOA,kBAAAA,mBAAAA,QAASI;IAClB;AACF,EAAE"}

package/lib/components/EmptySwatch/useEmptySwatchStyles.styles.js

@@ -84,6 +84,8 @@ const useShapeStyles = /*#__PURE__*/__styles({
  * Apply styling to the EmptySwatch slots based on the state
  */
 export const useEmptySwatchStyles_unstable = state => {
+  'use no memo';
+
   const styles = useStyles();
   const sizeStyles = useSizeStyles();
   const shapeStyles = useShapeStyles();

package/lib/components/EmptySwatch/useEmptySwatchStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"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"],"sources":["useEmptySwatchStyles.styles.js"],"sourcesContent":["import { 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    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"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,aAAA,sIAGrB,CAAC;AACF,MAAMQ,aAAa,gBAAGP,QAAA;EAAA;IAAAQ,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAF,MAAA;IAAAC,OAAA;EAAA;EAAAE,MAAA;IAAAH,MAAA;IAAAC,OAAA;EAAA;EAAAG,KAAA;IAAAJ,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAI,CAAA;AAAA,CAiBrB,CAAC;AACF,MAAMC,cAAc,gBAAGd,QAAA;EAAAe,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAV,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAE,MAAA;IAAAX,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAZ,CAAA;IAAAe,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAmBtB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,MAAMC,MAAM,GAAGzB,SAAS,CAAC,CAAC;EAC1B,MAAM0B,UAAU,GAAGzB,aAAa,CAAC,CAAC;EAClC,MAAM0B,WAAW,GAAGnB,cAAc,CAAC,CAAC;EACpC,IAAIoB,WAAW;EACf,MAAMC,IAAI,GAAG,CAACD,WAAW,GAAGJ,KAAK,CAACK,IAAI,MAAM,IAAI,IAAID,WAAW,KAAK,KAAK,CAAC,GAAGA,WAAW,GAAG,QAAQ;EACnG,IAAIE,YAAY;EAChBN,KAAK,CAACzB,IAAI,CAACgC,SAAS,GAAGpC,YAAY,CAACG,qBAAqB,CAACC,IAAI,EAAE0B,MAAM,EAAEC,UAAU,CAACG,IAAI,CAAC,EAAEF,WAAW,CAAC,CAACG,YAAY,GAAGN,KAAK,CAACQ,KAAK,MAAM,IAAI,IAAIF,YAAY,KAAK,KAAK,CAAC,GAAGA,YAAY,GAAG,QAAQ,CAAC,EAAEN,KAAK,CAACzB,IAAI,CAACgC,SAAS,CAAC;EACxN,OAAOP,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"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"],"sources":["useEmptySwatchStyles.styles.js"],"sourcesContent":["import { 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    'use no memo';\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    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"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,aAAA,sIAGrB,CAAC;AACF,MAAMQ,aAAa,gBAAGP,QAAA;EAAA;IAAAQ,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAF,MAAA;IAAAC,OAAA;EAAA;EAAAE,MAAA;IAAAH,MAAA;IAAAC,OAAA;EAAA;EAAAG,KAAA;IAAAJ,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAI,CAAA;AAAA,CAiBrB,CAAC;AACF,MAAMC,cAAc,gBAAGd,QAAA;EAAAe,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAV,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAE,MAAA;IAAAX,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAZ,CAAA;IAAAe,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAmBtB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACb,MAAMC,MAAM,GAAGzB,SAAS,CAAC,CAAC;EAC1B,MAAM0B,UAAU,GAAGzB,aAAa,CAAC,CAAC;EAClC,MAAM0B,WAAW,GAAGnB,cAAc,CAAC,CAAC;EACpC,IAAIoB,WAAW;EACf,MAAMC,IAAI,GAAG,CAACD,WAAW,GAAGJ,KAAK,CAACK,IAAI,MAAM,IAAI,IAAID,WAAW,KAAK,KAAK,CAAC,GAAGA,WAAW,GAAG,QAAQ;EACnG,IAAIE,YAAY;EAChBN,KAAK,CAACzB,IAAI,CAACgC,SAAS,GAAGpC,YAAY,CAACG,qBAAqB,CAACC,IAAI,EAAE0B,MAAM,EAAEC,UAAU,CAACG,IAAI,CAAC,EAAEF,WAAW,CAAC,CAACG,YAAY,GAAGN,KAAK,CAACQ,KAAK,MAAM,IAAI,IAAIF,YAAY,KAAK,KAAK,CAAC,GAAGA,YAAY,GAAG,QAAQ,CAAC,EAAEN,KAAK,CAACzB,IAAI,CAACgC,SAAS,CAAC;EACxN,OAAOP,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/ImageSwatch/ImageSwatch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ImageSwatch.tsx"],"sourcesContent":["import * 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,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":["ImageSwatch.tsx"],"sourcesContent":["import * 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"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,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"}

package/lib/components/ImageSwatch/ImageSwatch.types.js

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

package/lib/components/ImageSwatch/ImageSwatch.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ImageSwatch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';\n\nexport type ImageSwatchSlots = {\n  root: Slot<'button'>;\n};\n\n/**\n * ImageSwatch Props\n */\nexport type ImageSwatchProps = ComponentProps<ImageSwatchSlots> &\n  Pick<SwatchPickerProps, 'size' | 'shape'> & {\n    /**\n     * Swatch color\n     */\n    src: string;\n\n    /**\n     * Swatch value\n     */\n    value: string;\n  };\n\n/**\n * State used in rendering ImageSwatch\n */\nexport type ImageSwatchState = ComponentState<ImageSwatchSlots> &\n  Pick<ImageSwatchProps, 'color' | 'size' | 'shape' | 'value'> & {\n    selected: boolean;\n  };\n"],"names":[],"mappings":"AAAA,WA6BI"}
+{"version":3,"sources":["ImageSwatch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';\n\nexport type ImageSwatchSlots = {\n  root: Slot<'button'>;\n};\n\n/**\n * ImageSwatch Props\n */\nexport type ImageSwatchProps = ComponentProps<ImageSwatchSlots> &\n  Pick<SwatchPickerProps, 'size' | 'shape'> & {\n    /**\n     * Swatch color\n     */\n    src: string;\n\n    /**\n     * Swatch value\n     */\n    value: string;\n  };\n\n/**\n * State used in rendering ImageSwatch\n */\nexport type ImageSwatchState = ComponentState<ImageSwatchSlots> &\n  Pick<ImageSwatchProps, 'color' | 'size' | 'shape' | 'value'> & {\n    selected: boolean;\n  };\n"],"names":[],"rangeMappings":";;","mappings":"AAuBA;;CAEC,GACD,WAGI"}

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './ImageSwatch';\nexport * from './ImageSwatch.types';\nexport * from './renderImageSwatch';\nexport * from './useImageSwatch';\nexport * from './useImageSwatchStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,sBAAsB;AACpC,cAAc,sBAAsB;AACpC,cAAc,mBAAmB;AACjC,cAAc,gCAAgC"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './ImageSwatch';\nexport * from './ImageSwatch.types';\nexport * from './renderImageSwatch';\nexport * from './useImageSwatch';\nexport * from './useImageSwatchStyles.styles';\n"],"names":[],"rangeMappings":";;;;","mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,sBAAsB;AACpC,cAAc,sBAAsB;AACpC,cAAc,mBAAmB;AACjC,cAAc,gCAAgC"}

package/lib/components/ImageSwatch/renderImageSwatch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderImageSwatch.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ImageSwatchState, ImageSwatchSlots } from './ImageSwatch.types';\n\n/**\n * Render the final JSX of ImageSwatch\n */\nexport const renderImageSwatch_unstable = (state: ImageSwatchState) => {\n  assertSlots<ImageSwatchSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderImageSwatch_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCF,YAA8BE;IAE9B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}
+{"version":3,"sources":["renderImageSwatch.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ImageSwatchState, ImageSwatchSlots } from './ImageSwatch.types';\n\n/**\n * Render the final JSX of ImageSwatch\n */\nexport const renderImageSwatch_unstable = (state: ImageSwatchState) => {\n  assertSlots<ImageSwatchSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderImageSwatch_unstable","state","root"],"rangeMappings":";;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCF,YAA8BE;IAE9B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/ImageSwatch/useImageSwatch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useImageSwatch.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback, mergeCallbacks } from '@fluentui/react-utilities';\nimport type { ImageSwatchProps, ImageSwatchState } from './ImageSwatch.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\n\n/**\n * Create the state required to render ImageSwatch.\n *\n * The returned state can be modified with hooks such as useImageSwatchStyles_unstable,\n * before being passed to renderImageSwatch_unstable.\n *\n * @param props - props from this instance of ImageSwatch\n * @param ref - reference to root HTMLDivElement of ImageSwatch\n */\nexport const useImageSwatch_unstable = (\n  props: ImageSwatchProps,\n  ref: React.Ref<HTMLButtonElement>,\n): ImageSwatchState => {\n  const { src, value, onClick, 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 role = isGrid ? 'gridcell' : 'radio';\n  const ariaSelected = isGrid\n    ? {\n        'aria-selected': selected,\n      }\n    : { 'aria-checked': selected };\n\n  const onImageSwatchClick = useEventCallback(\n    mergeCallbacks(onClick, (event: React.MouseEvent<HTMLButtonElement>) =>\n      requestSelectionChange(event, {\n        selectedValue: value,\n        selectedSwatch: src,\n      }),\n    ),\n  );\n\n  return {\n    components: {\n      root: 'button',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        role,\n        ...ariaSelected,\n        onClick: onImageSwatchClick,\n        ...rest,\n        style: {\n          backgroundImage: `url(${src})`,\n          ...style,\n        },\n      }),\n      { elementType: 'button' },\n    ),\n    value,\n    selected,\n    size,\n    shape,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useEventCallback","mergeCallbacks","useSwatchPickerContextValue_unstable","useImageSwatch_unstable","props","ref","src","value","onClick","style","rest","size","ctx","shape","isGrid","requestSelectionChange","selected","selectedValue","role","ariaSelected","onImageSwatchClick","event","selectedSwatch","components","root","always","backgroundImage","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,cAAc,QAAQ,4BAA4B;AAE7G,SAASC,oCAAoC,QAAQ,8BAA8B;AAEnF;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CACrCC,OACAC;IAEA,MAAM,EAAEC,GAAG,EAAEC,KAAK,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGN;IAChD,MAAMO,OAAOT,qCAAqCU,CAAAA,MAAOA,IAAID,IAAI;IACjE,MAAME,QAAQX,qCAAqCU,CAAAA,MAAOA,IAAIC,KAAK;IACnE,MAAMC,SAASZ,qCAAqCU,CAAAA,MAAOA,IAAIE,MAAM;IAErE,MAAMC,yBAAyBb,qCAAqCU,CAAAA,MAAOA,IAAIG,sBAAsB;IACrG,MAAMC,WAAWd,qCAAqCU,CAAAA,MAAOA,IAAIK,aAAa,KAAKV;IAEnF,MAAMW,OAAOJ,SAAS,aAAa;IACnC,MAAMK,eAAeL,SACjB;QACE,iBAAiBE;IACnB,IACA;QAAE,gBAAgBA;IAAS;IAE/B,MAAMI,qBAAqBpB,iBACzBC,eAAeO,SAAS,CAACa,QACvBN,uBAAuBM,OAAO;YAC5BJ,eAAeV;YACfe,gBAAgBhB;QAClB;IAIJ,OAAO;QACLiB,YAAY;YACVC,MAAM;QACR;QACAA,MAAMzB,KAAK0B,MAAM,CACf3B,yBAAyB,UAAU;YACjCO;YACAa;YACA,GAAGC,YAAY;YACfX,SAASY;YACT,GAAGV,IAAI;YACPD,OAAO;gBACLiB,iBAAiB,CAAC,IAAI,EAAEpB,IAAI,CAAC,CAAC;gBAC9B,GAAGG,KAAK;YACV;QACF,IACA;YAAEkB,aAAa;QAAS;QAE1BpB;QACAS;QACAL;QACAE;IACF;AACF,EAAE"}
+{"version":3,"sources":["useImageSwatch.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback, mergeCallbacks } from '@fluentui/react-utilities';\nimport type { ImageSwatchProps, ImageSwatchState } from './ImageSwatch.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\n\n/**\n * Create the state required to render ImageSwatch.\n *\n * The returned state can be modified with hooks such as useImageSwatchStyles_unstable,\n * before being passed to renderImageSwatch_unstable.\n *\n * @param props - props from this instance of ImageSwatch\n * @param ref - reference to root HTMLDivElement of ImageSwatch\n */\nexport const useImageSwatch_unstable = (\n  props: ImageSwatchProps,\n  ref: React.Ref<HTMLButtonElement>,\n): ImageSwatchState => {\n  const { src, value, onClick, 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 role = isGrid ? 'gridcell' : 'radio';\n  const ariaSelected = isGrid\n    ? {\n        'aria-selected': selected,\n      }\n    : { 'aria-checked': selected };\n\n  const onImageSwatchClick = useEventCallback(\n    mergeCallbacks(onClick, (event: React.MouseEvent<HTMLButtonElement>) =>\n      requestSelectionChange(event, {\n        selectedValue: value,\n        selectedSwatch: src,\n      }),\n    ),\n  );\n\n  return {\n    components: {\n      root: 'button',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        role,\n        ...ariaSelected,\n        onClick: onImageSwatchClick,\n        ...rest,\n        style: {\n          backgroundImage: `url(${src})`,\n          ...style,\n        },\n      }),\n      { elementType: 'button' },\n    ),\n    value,\n    selected,\n    size,\n    shape,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useEventCallback","mergeCallbacks","useSwatchPickerContextValue_unstable","useImageSwatch_unstable","props","ref","src","value","onClick","style","rest","size","ctx","shape","isGrid","requestSelectionChange","selected","selectedValue","role","ariaSelected","onImageSwatchClick","event","selectedSwatch","components","root","always","backgroundImage","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,cAAc,QAAQ,4BAA4B;AAE7G,SAASC,oCAAoC,QAAQ,8BAA8B;AAEnF;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CACrCC,OACAC;IAEA,MAAM,EAAEC,GAAG,EAAEC,KAAK,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGN;IAChD,MAAMO,OAAOT,qCAAqCU,CAAAA,MAAOA,IAAID,IAAI;IACjE,MAAME,QAAQX,qCAAqCU,CAAAA,MAAOA,IAAIC,KAAK;IACnE,MAAMC,SAASZ,qCAAqCU,CAAAA,MAAOA,IAAIE,MAAM;IAErE,MAAMC,yBAAyBb,qCAAqCU,CAAAA,MAAOA,IAAIG,sBAAsB;IACrG,MAAMC,WAAWd,qCAAqCU,CAAAA,MAAOA,IAAIK,aAAa,KAAKV;IAEnF,MAAMW,OAAOJ,SAAS,aAAa;IACnC,MAAMK,eAAeL,SACjB;QACE,iBAAiBE;IACnB,IACA;QAAE,gBAAgBA;IAAS;IAE/B,MAAMI,qBAAqBpB,iBACzBC,eAAeO,SAAS,CAACa,QACvBN,uBAAuBM,OAAO;YAC5BJ,eAAeV;YACfe,gBAAgBhB;QAClB;IAIJ,OAAO;QACLiB,YAAY;YACVC,MAAM;QACR;QACAA,MAAMzB,KAAK0B,MAAM,CACf3B,yBAAyB,UAAU;YACjCO;YACAa;YACA,GAAGC,YAAY;YACfX,SAASY;YACT,GAAGV,IAAI;YACPD,OAAO;gBACLiB,iBAAiB,CAAC,IAAI,EAAEpB,IAAI,CAAC,CAAC;gBAC9B,GAAGG,KAAK;YACV;QACF,IACA;YAAEkB,aAAa;QAAS;QAE1BpB;QACAS;QACAL;QACAE;IACF;AACF,EAAE"}

package/lib/components/ImageSwatch/useImageSwatchStyles.styles.js

@@ -7,9 +7,9 @@ export const imageSwatchClassNames = {
 /**
  * Styles for the root slot
  */
-const useStyles = /*#__PURE__*/__resetStyles("r1kt2fyq", null, {
-  r: [".r1kt2fyq{display:inline-flex;box-sizing:border-box;border:1px solid var(--colorTransparentStroke);background-size:cover;background-repeat:no-repeat;padding:0;}", ".r1kt2fyq:hover{cursor:pointer;border:none;box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorBrandStroke1),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}", ".r1kt2fyq:hover:active{border:none;box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke1),inset 0 0 0 var(--strokeWidthThickest) var(--colorStrokeFocus1);}", ".r1kt2fyq:focus{outline:none;}", ".r1kt2fyq:focus-visible{outline:none;}", ".r1kt2fyq[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){.r1kt2fyq{forced-color-adjust:none;}.r1kt2fyq:hover{box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorBrandStroke2Hover),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}.r1kt2fyq:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke2Pressed),inset 0 0 0 var(--strokeWidthThickest) var(--colorStrokeFocus1);}}"]
+const useStyles = /*#__PURE__*/__resetStyles("r18b5q7m", null, {
+  r: [".r18b5q7m{display:inline-flex;box-sizing:border-box;border:1px solid var(--colorTransparentStroke);background-size:cover;background-repeat:no-repeat;padding:0;}", ".r18b5q7m:hover{cursor:pointer;border:none;box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorBrandStroke1),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}", ".r18b5q7m:hover:active{border:none;box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorCompoundBrandStrokePressed),inset 0 0 0 var(--strokeWidthThickest) var(--colorStrokeFocus1);}", ".r18b5q7m:focus{outline:none;}", ".r18b5q7m:focus-visible{outline:none;}", ".r18b5q7m[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){.r18b5q7m{forced-color-adjust:none;}.r18b5q7m:hover{box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorBrandStroke2Hover),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}.r18b5q7m:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke2Pressed),inset 0 0 0 var(--strokeWidthThickest) var(--colorStrokeFocus1);}}"]
 });
 const useStylesSelected = /*#__PURE__*/__styles({
   selected: {
@@ -31,8 +31,8 @@ const useStylesSelected = /*#__PURE__*/__styles({
     B4j52fo: 0,
     irswps: "f3bhgqh",
     E5pizo: "f8ps3yo",
-    Bvxd0ez: "f1txz9o1",
-    vajtyg: "f1frtkom",
+    Bvxd0ez: "f106r15f",
+    vajtyg: "ft0nc49",
     j6ew2k: "f16jq8vy",
     Bspt33j: "f18nq7tj"
   }
@@ -40,7 +40,7 @@ const useStylesSelected = /*#__PURE__*/__styles({
   d: [[".f3bhgqh{border:none;}", {
     p: -2
   }], ".f8ps3yo{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke1),inset 0 0 0 5px var(--colorStrokeFocus1);}", ".f16jq8vy[data-fui-focus-visible]{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus2),inset 0 0 0 5px var(--colorStrokeFocus1);}"],
-  h: [".f1txz9o1:hover{box-shadow:inset 0 0 0 var(--strokeWidthThickest) var(--colorBrandStroke1),inset 0 0 0 6px var(--colorStrokeFocus1);}", ".f1frtkom:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThickest) var(--colorBrandStroke1),inset 0 0 0 7px var(--colorStrokeFocus1);}"],
+  h: [".f106r15f:hover{box-shadow:inset 0 0 0 var(--strokeWidthThickest) var(--colorCompoundBrandStrokeHover),inset 0 0 0 6px var(--colorStrokeFocus1);}", ".ft0nc49:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThickest) var(--colorCompoundBrandStrokePressed),inset 0 0 0 7px var(--colorStrokeFocus1);}"],
   m: [["@media (forced-colors: active){.f18nq7tj{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke2Pressed),inset 0 0 0 5px var(--colorStrokeFocus1);}}", {
     m: "(forced-colors: active)"
   }]]
@@ -121,6 +121,8 @@ const useShapeStyles = /*#__PURE__*/__styles({
  * Apply styling to the ImageSwatch slots based on the state
  */
 export const useImageSwatchStyles_unstable = state => {
+  'use no memo';
+
   const styles = useStyles();
   const selectedStyles = useStylesSelected();
   const sizeStyles = useSizeStyles();

package/lib/components/ImageSwatch/useImageSwatchStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","__resetStyles","tokens","createCustomFocusIndicatorStyle","imageSwatchClassNames","root","useStyles","r","s","useStylesSelected","selected","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","Bvxd0ez","vajtyg","j6ew2k","Bspt33j","d","p","h","m","useSizeStyles","a9b677","Bqenvij","small","medium","large","useShapeStyles","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","circular","square","useImageSwatchStyles_unstable","state","styles","selectedStyles","sizeStyles","shapeStyles","size","shape","className"],"sources":["useImageSwatchStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const imageSwatchClassNames = {\n    root: 'fui-ImageSwatch'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n    display: 'inline-flex',\n    boxSizing: 'border-box',\n    border: `1px solid ${tokens.colorTransparentStroke}`,\n    backgroundSize: 'cover',\n    backgroundRepeat: 'no-repeat',\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.colorBrandStroke1}, 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 useStylesSelected = makeStyles({\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.colorBrandStroke1}, inset 0 0 0 6px ${tokens.colorStrokeFocus1}`\n        },\n        ':hover:active': {\n            boxShadow: `inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorBrandStroke1}, 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});\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 ImageSwatch slots based on the state\n */ export const useImageSwatchStyles_unstable = (state)=>{\n    const styles = useStyles();\n    const selectedStyles = useStylesSelected();\n    const sizeStyles = useSizeStyles();\n    const shapeStyles = useShapeStyles();\n    const { size = 'medium', shape = 'square' } = state;\n    state.root.className = mergeClasses(imageSwatchClassNames.root, styles, sizeStyles[size], shapeStyles[shape], state.selected && selectedStyles.selected, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAAC,aAAA,QAAyB,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,aAAA;EAAAM,CAAA;EAAAC,CAAA;AAAA,CAqCrB,CAAC;AACF,MAAMC,iBAAiB,gBAAGV,QAAA;EAAAW,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CAiBzB,CAAC;AACF,MAAMC,aAAa,gBAAGtC,QAAA;EAAA;IAAAuC,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAF,MAAA;IAAAC,OAAA;EAAA;EAAAE,MAAA;IAAAH,MAAA;IAAAC,OAAA;EAAA;EAAAG,KAAA;IAAAJ,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAN,CAAA;AAAA,CAiBrB,CAAC;AACF,MAAMU,cAAc,gBAAG5C,QAAA;EAAA6C,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAV,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAE,MAAA;IAAAX,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAArB,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAmBtB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMuB,6BAA6B,GAAIC,KAAK,IAAG;EACtD,MAAMC,MAAM,GAAGrD,SAAS,CAAC,CAAC;EAC1B,MAAMsD,cAAc,GAAGnD,iBAAiB,CAAC,CAAC;EAC1C,MAAMoD,UAAU,GAAGxB,aAAa,CAAC,CAAC;EAClC,MAAMyB,WAAW,GAAGnB,cAAc,CAAC,CAAC;EACpC,MAAM;IAAEoB,IAAI,GAAG,QAAQ;IAAEC,KAAK,GAAG;EAAS,CAAC,GAAGN,KAAK;EACnDA,KAAK,CAACrD,IAAI,CAAC4D,SAAS,GAAGjE,YAAY,CAACI,qBAAqB,CAACC,IAAI,EAAEsD,MAAM,EAAEE,UAAU,CAACE,IAAI,CAAC,EAAED,WAAW,CAACE,KAAK,CAAC,EAAEN,KAAK,CAAChD,QAAQ,IAAIkD,cAAc,CAAClD,QAAQ,EAAEgD,KAAK,CAACrD,IAAI,CAAC4D,SAAS,CAAC;EAC9K,OAAOP,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","__resetStyles","tokens","createCustomFocusIndicatorStyle","imageSwatchClassNames","root","useStyles","r","s","useStylesSelected","selected","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","Bvxd0ez","vajtyg","j6ew2k","Bspt33j","d","p","h","m","useSizeStyles","a9b677","Bqenvij","small","medium","large","useShapeStyles","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","circular","square","useImageSwatchStyles_unstable","state","styles","selectedStyles","sizeStyles","shapeStyles","size","shape","className"],"sources":["useImageSwatchStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const imageSwatchClassNames = {\n    root: 'fui-ImageSwatch'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n    display: 'inline-flex',\n    boxSizing: 'border-box',\n    border: `1px solid ${tokens.colorTransparentStroke}`,\n    backgroundSize: 'cover',\n    backgroundRepeat: 'no-repeat',\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 useStylesSelected = makeStyles({\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});\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 ImageSwatch slots based on the state\n */ export const useImageSwatchStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const selectedStyles = useStylesSelected();\n    const sizeStyles = useSizeStyles();\n    const shapeStyles = useShapeStyles();\n    const { size = 'medium', shape = 'square' } = state;\n    state.root.className = mergeClasses(imageSwatchClassNames.root, styles, sizeStyles[size], shapeStyles[shape], state.selected && selectedStyles.selected, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAAC,aAAA,QAAyB,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,aAAA;EAAAM,CAAA;EAAAC,CAAA;AAAA,CAqCrB,CAAC;AACF,MAAMC,iBAAiB,gBAAGV,QAAA;EAAAW,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CAiBzB,CAAC;AACF,MAAMC,aAAa,gBAAGtC,QAAA;EAAA;IAAAuC,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAF,MAAA;IAAAC,OAAA;EAAA;EAAAE,MAAA;IAAAH,MAAA;IAAAC,OAAA;EAAA;EAAAG,KAAA;IAAAJ,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAN,CAAA;AAAA,CAiBrB,CAAC;AACF,MAAMU,cAAc,gBAAG5C,QAAA;EAAA6C,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAV,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAE,MAAA;IAAAX,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAArB,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAmBtB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMuB,6BAA6B,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACb,MAAMC,MAAM,GAAGrD,SAAS,CAAC,CAAC;EAC1B,MAAMsD,cAAc,GAAGnD,iBAAiB,CAAC,CAAC;EAC1C,MAAMoD,UAAU,GAAGxB,aAAa,CAAC,CAAC;EAClC,MAAMyB,WAAW,GAAGnB,cAAc,CAAC,CAAC;EACpC,MAAM;IAAEoB,IAAI,GAAG,QAAQ;IAAEC,KAAK,GAAG;EAAS,CAAC,GAAGN,KAAK;EACnDA,KAAK,CAACrD,IAAI,CAAC4D,SAAS,GAAGjE,YAAY,CAACI,qBAAqB,CAACC,IAAI,EAAEsD,MAAM,EAAEE,UAAU,CAACE,IAAI,CAAC,EAAED,WAAW,CAACE,KAAK,CAAC,EAAEN,KAAK,CAAChD,QAAQ,IAAIkD,cAAc,CAAClD,QAAQ,EAAEgD,KAAK,CAACrD,IAAI,CAAC4D,SAAS,CAAC;EAC9K,OAAOP,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/SwatchPicker/SwatchPicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SwatchPicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useSwatchPicker_unstable } from './useSwatchPicker';\nimport { renderSwatchPicker_unstable } from './renderSwatchPicker';\nimport { useSwatchPickerStyles_unstable } from './useSwatchPickerStyles.styles';\nimport type { SwatchPickerProps } from './SwatchPicker.types';\nimport { useSwatchPickerContextValues } from '../../contexts/swatchPicker';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * SwatchPicker component - TODO: add more docs\n */\nexport const SwatchPicker: ForwardRefComponent<SwatchPickerProps> = React.forwardRef((props, ref) => {\n  const state = useSwatchPicker_unstable(props, ref);\n  const contextValues = useSwatchPickerContextValues(state);\n\n  useSwatchPickerStyles_unstable(state);\n  useCustomStyleHook_unstable('useSwatchPickerStyles_unstable')(state);\n\n  return renderSwatchPicker_unstable(state, contextValues);\n});\n\nSwatchPicker.displayName = 'SwatchPicker';\n"],"names":["React","useSwatchPicker_unstable","renderSwatchPicker_unstable","useSwatchPickerStyles_unstable","useSwatchPickerContextValues","useCustomStyleHook_unstable","SwatchPicker","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAEhF,SAASC,4BAA4B,QAAQ,8BAA8B;AAC3E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,6BAAuDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQT,yBAAyBO,OAAOC;IAC9C,MAAME,gBAAgBP,6BAA6BM;IAEnDP,+BAA+BO;IAC/BL,4BAA4B,kCAAkCK;IAE9D,OAAOR,4BAA4BQ,OAAOC;AAC5C,GAAG;AAEHL,aAAaM,WAAW,GAAG"}
+{"version":3,"sources":["SwatchPicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useSwatchPicker_unstable } from './useSwatchPicker';\nimport { renderSwatchPicker_unstable } from './renderSwatchPicker';\nimport { useSwatchPickerStyles_unstable } from './useSwatchPickerStyles.styles';\nimport type { SwatchPickerProps } from './SwatchPicker.types';\nimport { useSwatchPickerContextValues } from '../../contexts/swatchPicker';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * SwatchPicker component - TODO: add more docs\n */\nexport const SwatchPicker: ForwardRefComponent<SwatchPickerProps> = React.forwardRef((props, ref) => {\n  const state = useSwatchPicker_unstable(props, ref);\n  const contextValues = useSwatchPickerContextValues(state);\n\n  useSwatchPickerStyles_unstable(state);\n  useCustomStyleHook_unstable('useSwatchPickerStyles_unstable')(state);\n\n  return renderSwatchPicker_unstable(state, contextValues);\n});\n\nSwatchPicker.displayName = 'SwatchPicker';\n"],"names":["React","useSwatchPicker_unstable","renderSwatchPicker_unstable","useSwatchPickerStyles_unstable","useSwatchPickerContextValues","useCustomStyleHook_unstable","SwatchPicker","forwardRef","props","ref","state","contextValues","displayName"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAEhF,SAASC,4BAA4B,QAAQ,8BAA8B;AAC3E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,6BAAuDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQT,yBAAyBO,OAAOC;IAC9C,MAAME,gBAAgBP,6BAA6BM;IAEnDP,+BAA+BO;IAC/BL,4BAA4B,kCAAkCK;IAE9D,OAAOR,4BAA4BQ,OAAOC;AAC5C,GAAG;AAEHL,aAAaM,WAAW,GAAG"}

package/lib/components/SwatchPicker/SwatchPicker.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SwatchPicker.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot, EventHandler, EventData } from '@fluentui/react-utilities';\nimport { SwatchPickerContextValue } from '../../contexts/swatchPicker';\n\nexport type SwatchPickerSlots = {\n  root: Slot<'div'>;\n};\n\nexport type SwatchPickerOnSelectEventHandler = EventHandler<SwatchPickerOnSelectionChangeData>;\n\nexport type SwatchPickerOnSelectionChangeData = EventData<'click', React.MouseEvent<HTMLButtonElement>> & {\n  selectedValue: string;\n  selectedSwatch: string;\n};\n\n/**\n * SwatchPicker Props\n */\nexport type SwatchPickerProps = ComponentProps<SwatchPickerSlots> & {\n  /**\n   * Default selected value\n   */\n  defaultSelectedValue?: string;\n\n  /**\n   * Whether SwatchPicker is row or grid\n   */\n  layout?: 'row' | 'grid';\n\n  /**\n   * Triggers a callback when the value has been changed\n   */\n  onSelectionChange?: EventHandler<SwatchPickerOnSelectionChangeData>;\n\n  /**\n   * Controlled selected value\n   */\n  selectedValue?: string;\n\n  /**\n   * Swatch size\n   * @defaultvalue 'medium'\n   */\n  size?: 'extra-small' | 'small' | 'medium' | 'large';\n\n  /**\n   * Swatch shape\n   * @defaultvalue 'square'\n   */\n  shape?: 'rounded' | 'square' | 'circular';\n\n  /**\n   * Spacing between swatches\n   * @defaultvalue 'medium'\n   */\n  spacing?: 'small' | 'medium';\n};\n\n/**\n * State used in rendering SwatchPicker\n */\nexport type SwatchPickerState = ComponentState<SwatchPickerSlots> &\n  SwatchPickerContextValue &\n  Pick<SwatchPickerProps, 'layout' | 'size' | 'shape' | 'spacing'> & {\n    isGrid: boolean;\n  };\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["SwatchPicker.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot, EventHandler, EventData } from '@fluentui/react-utilities';\nimport { SwatchPickerContextValue } from '../../contexts/swatchPicker';\n\nexport type SwatchPickerSlots = {\n  root: Slot<'div'>;\n};\n\nexport type SwatchPickerOnSelectEventHandler = EventHandler<SwatchPickerOnSelectionChangeData>;\n\nexport type SwatchPickerOnSelectionChangeData = EventData<'click', React.MouseEvent<HTMLButtonElement>> & {\n  selectedValue: string;\n  selectedSwatch: string;\n};\n\n/**\n * SwatchPicker Props\n */\nexport type SwatchPickerProps = ComponentProps<SwatchPickerSlots> & {\n  /**\n   * Default selected value\n   */\n  defaultSelectedValue?: string;\n\n  /**\n   * Whether SwatchPicker is row or grid\n   */\n  layout?: 'row' | 'grid';\n\n  /**\n   * Triggers a callback when the value has been changed\n   */\n  onSelectionChange?: EventHandler<SwatchPickerOnSelectionChangeData>;\n\n  /**\n   * Controlled selected value\n   */\n  selectedValue?: string;\n\n  /**\n   * Swatch size\n   * @defaultvalue 'medium'\n   */\n  size?: 'extra-small' | 'small' | 'medium' | 'large';\n\n  /**\n   * Swatch shape\n   * @defaultvalue 'square'\n   */\n  shape?: 'rounded' | 'square' | 'circular';\n\n  /**\n   * Spacing between swatches\n   * @defaultvalue 'medium'\n   */\n  spacing?: 'small' | 'medium';\n};\n\n/**\n * State used in rendering SwatchPicker\n */\nexport type SwatchPickerState = ComponentState<SwatchPickerSlots> &\n  SwatchPickerContextValue &\n  Pick<SwatchPickerProps, 'layout' | 'size' | 'shape' | 'spacing'> & {\n    isGrid: boolean;\n  };\n"],"names":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './SwatchPicker';\nexport * from './SwatchPicker.types';\nexport * from './renderSwatchPicker';\nexport * from './useSwatchPicker';\nexport * from './useSwatchPickerStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,iBAAiB;AAC/B,cAAc,uBAAuB;AACrC,cAAc,uBAAuB;AACrC,cAAc,oBAAoB;AAClC,cAAc,iCAAiC"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './SwatchPicker';\nexport * from './SwatchPicker.types';\nexport * from './renderSwatchPicker';\nexport * from './useSwatchPicker';\nexport * from './useSwatchPickerStyles.styles';\n"],"names":[],"rangeMappings":";;;;","mappings":"AAAA,cAAc,iBAAiB;AAC/B,cAAc,uBAAuB;AACrC,cAAc,uBAAuB;AACrC,cAAc,oBAAoB;AAClC,cAAc,iCAAiC"}

package/lib/components/SwatchPicker/renderSwatchPicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderSwatchPicker.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { SwatchPickerProvider } from '../../contexts/swatchPicker';\nimport type { SwatchPickerContextValues } from '../../contexts/swatchPicker';\nimport type { SwatchPickerState, SwatchPickerSlots } from './SwatchPicker.types';\n\n/**\n * Render the final JSX of SwatchPicker\n */\nexport const renderSwatchPicker_unstable = (state: SwatchPickerState, contextValues: SwatchPickerContextValues) => {\n  assertSlots<SwatchPickerSlots>(state);\n\n  return (\n    <SwatchPickerProvider value={contextValues.swatchPicker}>\n      <state.root>{state.root.children}</state.root>\n    </SwatchPickerProvider>\n  );\n};\n"],"names":["assertSlots","SwatchPickerProvider","renderSwatchPicker_unstable","state","contextValues","value","swatchPicker","root","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AACxD,SAASC,oBAAoB,QAAQ,8BAA8B;AAInE;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC,OAA0BC;IACpEJ,YAA+BG;IAE/B,qBACE,KAACF;QAAqBI,OAAOD,cAAcE,YAAY;kBACrD,cAAA,KAACH,MAAMI,IAAI;sBAAEJ,MAAMI,IAAI,CAACC,QAAQ;;;AAGtC,EAAE"}
+{"version":3,"sources":["renderSwatchPicker.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { SwatchPickerProvider } from '../../contexts/swatchPicker';\nimport type { SwatchPickerContextValues } from '../../contexts/swatchPicker';\nimport type { SwatchPickerState, SwatchPickerSlots } from './SwatchPicker.types';\n\n/**\n * Render the final JSX of SwatchPicker\n */\nexport const renderSwatchPicker_unstable = (state: SwatchPickerState, contextValues: SwatchPickerContextValues) => {\n  assertSlots<SwatchPickerSlots>(state);\n\n  return (\n    <SwatchPickerProvider value={contextValues.swatchPicker}>\n      <state.root>{state.root.children}</state.root>\n    </SwatchPickerProvider>\n  );\n};\n"],"names":["assertSlots","SwatchPickerProvider","renderSwatchPicker_unstable","state","contextValues","value","swatchPicker","root","children"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AACxD,SAASC,oBAAoB,QAAQ,8BAA8B;AAInE;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC,OAA0BC;IACpEJ,YAA+BG;IAE/B,qBACE,KAACF;QAAqBI,OAAOD,cAAcE,YAAY;kBACrD,cAAA,KAACH,MAAMI,IAAI;sBAAEJ,MAAMI,IAAI,CAACC,QAAQ;;;AAGtC,EAAE"}

package/lib/components/SwatchPicker/useSwatchPicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useSwatchPicker.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { SwatchPickerProps, SwatchPickerState } from './SwatchPicker.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render SwatchPicker.\n *\n * The returned state can be modified with hooks such as useSwatchPickerStyles_unstable,\n * before being passed to renderSwatchPicker_unstable.\n *\n * @param props - props from this instance of SwatchPicker\n * @param ref - reference to root HTMLElement of SwatchPicker\n */\nexport const useSwatchPicker_unstable = (\n  props: SwatchPickerProps,\n  ref: React.Ref<HTMLDivElement>,\n): SwatchPickerState => {\n  const { layout, onSelectionChange, size = 'medium', shape, spacing = 'medium', style, ...rest } = props;\n\n  const isGrid = layout === 'grid';\n  const focusAttributes = useArrowNavigationGroup({\n    circular: true,\n    axis: isGrid ? 'grid-linear' : 'both',\n    memorizeCurrent: true,\n  });\n\n  const role = isGrid ? 'grid' : 'radiogroup';\n\n  const [selectedValue, setSelectedValue] = useControllableState({\n    state: props.selectedValue,\n    defaultState: props.defaultSelectedValue,\n    initialState: '',\n  });\n\n  const requestSelectionChange: SwatchPickerState['requestSelectionChange'] = useEventCallback((event, data) => {\n    onSelectionChange?.(event, {\n      type: 'click',\n      event,\n      selectedValue: data.selectedValue,\n      selectedSwatch: data.selectedSwatch,\n    });\n    setSelectedValue(data.selectedValue);\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role,\n        ...focusAttributes,\n        ...rest,\n      }),\n      { elementType: 'div' },\n    ),\n    isGrid,\n    requestSelectionChange,\n    selectedValue,\n    size,\n    shape,\n    spacing,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useControllableState","useEventCallback","slot","useArrowNavigationGroup","useSwatchPicker_unstable","props","ref","layout","onSelectionChange","size","shape","spacing","style","rest","isGrid","focusAttributes","circular","axis","memorizeCurrent","role","selectedValue","setSelectedValue","state","defaultState","defaultSelectedValue","initialState","requestSelectionChange","event","data","type","selectedSwatch","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,oBAAoB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAEnH,SAASC,uBAAuB,QAAQ,0BAA0B;AAElE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,MAAM,EAAEC,MAAM,EAAEC,iBAAiB,EAAEC,OAAO,QAAQ,EAAEC,KAAK,EAAEC,UAAU,QAAQ,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGR;IAElG,MAAMS,SAASP,WAAW;IAC1B,MAAMQ,kBAAkBZ,wBAAwB;QAC9Ca,UAAU;QACVC,MAAMH,SAAS,gBAAgB;QAC/BI,iBAAiB;IACnB;IAEA,MAAMC,OAAOL,SAAS,SAAS;IAE/B,MAAM,CAACM,eAAeC,iBAAiB,GAAGrB,qBAAqB;QAC7DsB,OAAOjB,MAAMe,aAAa;QAC1BG,cAAclB,MAAMmB,oBAAoB;QACxCC,cAAc;IAChB;IAEA,MAAMC,yBAAsEzB,iBAAiB,CAAC0B,OAAOC;QACnGpB,8BAAAA,wCAAAA,kBAAoBmB,OAAO;YACzBE,MAAM;YACNF;YACAP,eAAeQ,KAAKR,aAAa;YACjCU,gBAAgBF,KAAKE,cAAc;QACrC;QACAT,iBAAiBO,KAAKR,aAAa;IACrC;IAEA,OAAO;QACLW,YAAY;YACVC,MAAM;QACR;QACAA,MAAM9B,KAAK+B,MAAM,CACflC,yBAAyB,OAAO;YAC9BO;YACAa;YACA,GAAGJ,eAAe;YAClB,GAAGF,IAAI;QACT,IACA;YAAEqB,aAAa;QAAM;QAEvBpB;QACAY;QACAN;QACAX;QACAC;QACAC;IACF;AACF,EAAE"}
+{"version":3,"sources":["useSwatchPicker.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { SwatchPickerProps, SwatchPickerState } from './SwatchPicker.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render SwatchPicker.\n *\n * The returned state can be modified with hooks such as useSwatchPickerStyles_unstable,\n * before being passed to renderSwatchPicker_unstable.\n *\n * @param props - props from this instance of SwatchPicker\n * @param ref - reference to root HTMLElement of SwatchPicker\n */\nexport const useSwatchPicker_unstable = (\n  props: SwatchPickerProps,\n  ref: React.Ref<HTMLDivElement>,\n): SwatchPickerState => {\n  const { layout, onSelectionChange, size = 'medium', shape, spacing = 'medium', style, ...rest } = props;\n\n  const isGrid = layout === 'grid';\n  const focusAttributes = useArrowNavigationGroup({\n    circular: true,\n    axis: isGrid ? 'grid-linear' : 'both',\n    memorizeCurrent: true,\n  });\n\n  const role = isGrid ? 'grid' : 'radiogroup';\n\n  const [selectedValue, setSelectedValue] = useControllableState({\n    state: props.selectedValue,\n    defaultState: props.defaultSelectedValue,\n    initialState: '',\n  });\n\n  const requestSelectionChange: SwatchPickerState['requestSelectionChange'] = useEventCallback((event, data) => {\n    onSelectionChange?.(event, {\n      type: 'click',\n      event,\n      selectedValue: data.selectedValue,\n      selectedSwatch: data.selectedSwatch,\n    });\n    setSelectedValue(data.selectedValue);\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role,\n        ...focusAttributes,\n        ...rest,\n      }),\n      { elementType: 'div' },\n    ),\n    isGrid,\n    requestSelectionChange,\n    selectedValue,\n    size,\n    shape,\n    spacing,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useControllableState","useEventCallback","slot","useArrowNavigationGroup","useSwatchPicker_unstable","props","ref","layout","onSelectionChange","size","shape","spacing","style","rest","isGrid","focusAttributes","circular","axis","memorizeCurrent","role","selectedValue","setSelectedValue","state","defaultState","defaultSelectedValue","initialState","requestSelectionChange","event","data","type","selectedSwatch","components","root","always","elementType"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,oBAAoB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAEnH,SAASC,uBAAuB,QAAQ,0BAA0B;AAElE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,MAAM,EAAEC,MAAM,EAAEC,iBAAiB,EAAEC,OAAO,QAAQ,EAAEC,KAAK,EAAEC,UAAU,QAAQ,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGR;IAElG,MAAMS,SAASP,WAAW;IAC1B,MAAMQ,kBAAkBZ,wBAAwB;QAC9Ca,UAAU;QACVC,MAAMH,SAAS,gBAAgB;QAC/BI,iBAAiB;IACnB;IAEA,MAAMC,OAAOL,SAAS,SAAS;IAE/B,MAAM,CAACM,eAAeC,iBAAiB,GAAGrB,qBAAqB;QAC7DsB,OAAOjB,MAAMe,aAAa;QAC1BG,cAAclB,MAAMmB,oBAAoB;QACxCC,cAAc;IAChB;IAEA,MAAMC,yBAAsEzB,iBAAiB,CAAC0B,OAAOC;QACnGpB,8BAAAA,wCAAAA,kBAAoBmB,OAAO;YACzBE,MAAM;YACNF;YACAP,eAAeQ,KAAKR,aAAa;YACjCU,gBAAgBF,KAAKE,cAAc;QACrC;QACAT,iBAAiBO,KAAKR,aAAa;IACrC;IAEA,OAAO;QACLW,YAAY;YACVC,MAAM;QACR;QACAA,MAAM9B,KAAK+B,MAAM,CACflC,yBAAyB,OAAO;YAC9BO;YACAa;YACA,GAAGJ,eAAe;YAClB,GAAGF,IAAI;QACT,IACA;YAAEqB,aAAa;QAAM;QAEvBpB;QACAY;QACAN;QACAX;QACAC;QACAC;IACF;AACF,EAAE"}