npm - @fluentui/react-swatch-picker - Versions diffs - 9.5.2 → 9.5.4 - Mend

@fluentui/react-swatch-picker 9.5.2 → 9.5.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (42) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,22 +1,49 @@
 # Change Log - @fluentui/react-swatch-picker
-This log was last generated on Thu, 23 Apr 2026 11:59:32 GMT and should not be manually modified.
+This log was last generated on Wed, 24 Jun 2026 11:03:46 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.5.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.5.4)
+Wed, 24 Jun 2026 11:03:46 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.5.3..@fluentui/react-swatch-picker_v9.5.4)
+### Patches
+- fix: remove redundant use no memo directives, and add justification to valid ones ([PR #36224](https://github.com/microsoft/fluentui/pull/36224) by martinhochel@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.2.18 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-field to v9.5.3 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.4 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-tabster to v9.26.16 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-utilities to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+## [9.5.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.5.3)
+Tue, 26 May 2026 09:39:40 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.5.2..@fluentui/react-swatch-picker_v9.5.3)
+### Patches
+- Bump @fluentui/react-context-selector to v9.2.17 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-field to v9.5.2 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-tabster to v9.26.15 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
 ## [9.5.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.5.2)
-Thu, 23 Apr 2026 11:59:32 GMT
+Thu, 23 Apr 2026 14:21:01 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.5.1..@fluentui/react-swatch-picker_v9.5.2)
 ### Patches
 - perf: memoize context values in use*ContextValues hooks ([PR #36008](https://github.com/microsoft/fluentui/pull/36008) by olfedias@microsoft.com)
-- Bump @fluentui/react-context-selector to v9.2.16 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-field to v9.5.1 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-tabster to v9.26.14 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-utilities to v9.26.3 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.16 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-field to v9.5.1 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-tabster to v9.26.14 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
 ## [9.5.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.5.1)

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

@@ -212,8 +212,6 @@ const useIconStyles = /*#__PURE__*/__styles({
  * Apply styling to the ColorSwatch slots based on the state
  */
 export const useColorSwatchStyles_unstable = state => {
-  'use no memo';
   const {
     size = 'medium',
     shape = 'square'
@@ -224,11 +222,14 @@ export const useColorSwatchStyles_unstable = state => {
   const shapeStyles = useShapeStyles();
   const iconStyles = useIconStyles();
   const smallerSelectedStyles = size === 'small' || size === 'extra-small' ? styles.selectedSmall : '';
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(colorSwatchClassNames.root, resetStyles, sizeStyles[size], shapeStyles[shape], state.selected && styles.selected, state.selected && smallerSelectedStyles, state.disabled && styles.disabled, state.root.className);
   if (state.disabled && state.disabledIcon) {
+    // eslint-disable-next-line react-hooks/immutability
     state.disabledIcon.className = mergeClasses(iconStyles.icon, iconStyles[size], iconStyles.disabledIcon, state.disabledIcon.className);
   }
   if (state.icon) {
+    // eslint-disable-next-line react-hooks/immutability
     state.icon.className = mergeClasses(iconStyles.icon, iconStyles[size], state.icon.className);
   }
   return state;

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

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

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

@@ -168,7 +168,6 @@ const useIconStyles = makeStyles({
 /**
  * Apply styling to the ColorSwatch slots based on the state
  */ export const useColorSwatchStyles_unstable = (state)=>{
-    'use no memo';
     const { size = 'medium', shape = 'square' } = state;
     const resetStyles = useResetStyles();
     const styles = useStyles();
@@ -176,11 +175,14 @@ const useIconStyles = makeStyles({
     const shapeStyles = useShapeStyles();
     const iconStyles = useIconStyles();
     const smallerSelectedStyles = size === 'small' || size === 'extra-small' ? styles.selectedSmall : '';
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(colorSwatchClassNames.root, resetStyles, sizeStyles[size], shapeStyles[shape], state.selected && styles.selected, state.selected && smallerSelectedStyles, state.disabled && styles.disabled, state.root.className);
     if (state.disabled && state.disabledIcon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.disabledIcon.className = mergeClasses(iconStyles.icon, iconStyles[size], iconStyles.disabledIcon, state.disabledIcon.className);
     }
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = mergeClasses(iconStyles.icon, iconStyles[size], state.icon.className);
     }
     return state;

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

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

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

@@ -86,14 +86,13 @@ 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();
   var _state_size;
   const size = (_state_size = state.size) !== null && _state_size !== void 0 ? _state_size : 'medium';
   var _state_shape;
+  // eslint-disable-next-line react-hooks/immutability
   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);
   return state;
 };

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

	@@ -1 +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":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const emptySwatchClassNames = {\n root: 'fui-EmptySwatch'\n};\n/*\n Styles for the root slot\n / const useStyles = makeResetStyles({\n backgroundColor: tokens.colorTransparentBackground,\n border: `1px dashed ${tokens.colorNeutralForeground4}`\n});\nconst useSizeStyles = makeStyles({\n 'extra-small': {\n width: '20px',\n height: '20px'\n },\n small: {\n width: '24px',\n height: '24px'\n },\n medium: {\n width: '28px',\n height: '28px'\n },\n large: {\n width: '32px',\n height: '32px'\n }\n});\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusMedium\n })\n },\n circular: {\n borderRadius: tokens.borderRadiusCircular,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusCircular\n })\n },\n square: {\n borderRadius: tokens.borderRadiusNone,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusNone\n })\n }\n});\n/\n Apply styling to the EmptySwatch slots based on the state\n */ export const useEmptySwatchStyles_unstable = (state)=>{\n ~~'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,YAAY;;AACZ,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":[]}
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":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const emptySwatchClassNames = {\n root: 'fui-EmptySwatch'\n};\n/*\n Styles for the root slot\n / const useStyles = makeResetStyles({\n backgroundColor: tokens.colorTransparentBackground,\n border: `1px dashed ${tokens.colorNeutralForeground4}`\n});\nconst useSizeStyles = makeStyles({\n 'extra-small': {\n width: '20px',\n height: '20px'\n },\n small: {\n width: '24px',\n height: '24px'\n },\n medium: {\n width: '28px',\n height: '28px'\n },\n large: {\n width: '32px',\n height: '32px'\n }\n});\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusMedium\n })\n },\n circular: {\n borderRadius: tokens.borderRadiusCircular,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusCircular\n })\n },\n square: {\n borderRadius: tokens.borderRadiusNone,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusNone\n })\n }\n});\n/\n Apply styling to the EmptySwatch slots based on the state\n */ export const useEmptySwatchStyles_unstable = (state)=>{\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n const shapeStyles = useShapeStyles();\n var _state_size;\n const size = (_state_size = state.size) !== null && _state_size !== void 0 ? _state_size : 'medium';\n var _state_shape;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(emptySwatchClassNames.root, styles, sizeStyles[size], shapeStyles[(_state_shape = state.shape) !== null && _state_shape !== void 0 ? _state_shape : 'square'], state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,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;EAChB;EACAN,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/EmptySwatch/useEmptySwatchStyles.styles.raw.js CHANGED Viewed

@@ -52,13 +52,13 @@ const useShapeStyles = makeStyles({
 /**
  * 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();
     var _state_size;
     const size = (_state_size = state.size) !== null && _state_size !== void 0 ? _state_size : 'medium';
     var _state_shape;
+    // eslint-disable-next-line react-hooks/immutability
     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);
     return state;
 };

package/lib/components/EmptySwatch/useEmptySwatchStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/EmptySwatch/useEmptySwatchStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { EmptySwatchSlots, EmptySwatchState } from './EmptySwatch.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n\nexport const emptySwatchClassNames: SlotClassNames<EmptySwatchSlots> = {\n root: 'fui-EmptySwatch',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeResetStyles({\n backgroundColor: tokens.colorTransparentBackground,\n border: `1px dashed ${tokens.colorNeutralForeground4}`,\n});\n\nconst useSizeStyles = makeStyles({\n 'extra-small': {\n width: '20px',\n height: '20px',\n },\n small: {\n width: '24px',\n height: '24px',\n },\n medium: {\n width: '28px',\n height: '28px',\n },\n large: {\n width: '32px',\n height: '32px',\n },\n});\n\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusMedium }),\n },\n circular: {\n borderRadius: tokens.borderRadiusCircular,\n ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusCircular }),\n },\n square: {\n borderRadius: tokens.borderRadiusNone,\n ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusNone }),\n },\n});\n\n/\n Apply styling to the EmptySwatch slots based on the state\n */\nexport const useEmptySwatchStyles_unstable = (state: EmptySwatchState): EmptySwatchState => {\n ~~'use no memo';\n\n~~ const styles = useStyles();\n const sizeStyles = useSizeStyles();\n const shapeStyles = useShapeStyles();\n\n const size = state.size ?? 'medium';\n\n state.root.className = mergeClasses(\n emptySwatchClassNames.root,\n styles,\n sizeStyles[size],\n shapeStyles[state.shape ?? 'square'],\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","createCustomFocusIndicatorStyle","emptySwatchClassNames","root","useStyles","backgroundColor","colorTransparentBackground","border","colorNeutralForeground4","useSizeStyles","width","height","small","medium","large","useShapeStyles","rounded","borderRadius","borderRadiusMedium","circular","borderRadiusCircular","square","borderRadiusNone","useEmptySwatchStyles_unstable","state","styles","sizeStyles","shapeStyles","size","className","shape"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG3E,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,+BAA+B,QAAQ,0BAA0B;AAE1E,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,gBAAgB;IAChCQ,iBAAiBL,OAAOM,0BAA0B;IAClDC,QAAQ,CAAC,WAAW,EAAEP,OAAOQ,uBAAuB,EAAE;AACxD;AAEA,MAAMC,gBAAgBX,WAAW;IAC/B,eAAe;QACbY,OAAO;QACPC,QAAQ;IACV;IACAC,OAAO;QACLF,OAAO;QACPC,QAAQ;IACV;IACAE,QAAQ;QACNH,OAAO;QACPC,QAAQ;IACV;IACAG,OAAO;QACLJ,OAAO;QACPC,QAAQ;IACV;AACF;AAEA,MAAMI,iBAAiBjB,WAAW;IAChCkB,SAAS;QACPC,cAAcjB,OAAOkB,kBAAkB;QACvC,GAAGjB,gCAAgC;YAAEgB,cAAcjB,OAAOkB,kBAAkB;QAAC,EAAE;IACjF;IACAC,UAAU;QACRF,cAAcjB,OAAOoB,oBAAoB;QACzC,GAAGnB,gCAAgC;YAAEgB,cAAcjB,OAAOoB,oBAAoB;QAAC,EAAE;IACnF;IACAC,QAAQ;QACNJ,cAAcjB,OAAOsB,gBAAgB;QACrC,GAAGrB,gCAAgC;YAAEgB,cAAcjB,OAAOsB,gBAAgB;QAAC,EAAE;IAC/E;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C~~;IAEA~~,MAAMC,SAASrB;IACf,MAAMsB,aAAajB;IACnB,MAAMkB,cAAcZ;QAEPS;IAAb,MAAMI,OAAOJ,CAAAA,cAAAA,MAAMI,IAAI,cAAVJ,yBAAAA,cAAc;~~QAMbA~~;~~IAJdA~~,MAAMrB,IAAI,CAAC0B,SAAS,GAAG9B,aACrBG,sBAAsBC,IAAI,EAC1BsB,QACAC,UAAU,CAACE,KAAK,EAChBD,WAAW,CAACH,CAAAA,eAAAA,MAAMM,KAAK,cAAXN,0BAAAA,eAAe,SAAS,EACpCA,MAAMrB,IAAI,CAAC0B,SAAS;IAGtB,OAAOL;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/EmptySwatch/useEmptySwatchStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { EmptySwatchSlots, EmptySwatchState } from './EmptySwatch.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n\nexport const emptySwatchClassNames: SlotClassNames<EmptySwatchSlots> = {\n root: 'fui-EmptySwatch',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeResetStyles({\n backgroundColor: tokens.colorTransparentBackground,\n border: `1px dashed ${tokens.colorNeutralForeground4}`,\n});\n\nconst useSizeStyles = makeStyles({\n 'extra-small': {\n width: '20px',\n height: '20px',\n },\n small: {\n width: '24px',\n height: '24px',\n },\n medium: {\n width: '28px',\n height: '28px',\n },\n large: {\n width: '32px',\n height: '32px',\n },\n});\n\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusMedium }),\n },\n circular: {\n borderRadius: tokens.borderRadiusCircular,\n ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusCircular }),\n },\n square: {\n borderRadius: tokens.borderRadiusNone,\n ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusNone }),\n },\n});\n\n/\n Apply styling to the EmptySwatch slots based on the state\n */\nexport const useEmptySwatchStyles_unstable = (state: EmptySwatchState): EmptySwatchState => {\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n const shapeStyles = useShapeStyles();\n\n const size = state.size ?? 'medium';\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n emptySwatchClassNames.root,\n styles,\n sizeStyles[size],\n shapeStyles[state.shape ?? 'square'],\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","createCustomFocusIndicatorStyle","emptySwatchClassNames","root","useStyles","backgroundColor","colorTransparentBackground","border","colorNeutralForeground4","useSizeStyles","width","height","small","medium","large","useShapeStyles","rounded","borderRadius","borderRadiusMedium","circular","borderRadiusCircular","square","borderRadiusNone","useEmptySwatchStyles_unstable","state","styles","sizeStyles","shapeStyles","size","className","shape"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG3E,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,+BAA+B,QAAQ,0BAA0B;AAE1E,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,gBAAgB;IAChCQ,iBAAiBL,OAAOM,0BAA0B;IAClDC,QAAQ,CAAC,WAAW,EAAEP,OAAOQ,uBAAuB,EAAE;AACxD;AAEA,MAAMC,gBAAgBX,WAAW;IAC/B,eAAe;QACbY,OAAO;QACPC,QAAQ;IACV;IACAC,OAAO;QACLF,OAAO;QACPC,QAAQ;IACV;IACAE,QAAQ;QACNH,OAAO;QACPC,QAAQ;IACV;IACAG,OAAO;QACLJ,OAAO;QACPC,QAAQ;IACV;AACF;AAEA,MAAMI,iBAAiBjB,WAAW;IAChCkB,SAAS;QACPC,cAAcjB,OAAOkB,kBAAkB;QACvC,GAAGjB,gCAAgC;YAAEgB,cAAcjB,OAAOkB,kBAAkB;QAAC,EAAE;IACjF;IACAC,UAAU;QACRF,cAAcjB,OAAOoB,oBAAoB;QACzC,GAAGnB,gCAAgC;YAAEgB,cAAcjB,OAAOoB,oBAAoB;QAAC,EAAE;IACnF;IACAC,QAAQ;QACNJ,cAAcjB,OAAOsB,gBAAgB;QACrC,GAAGrB,gCAAgC;YAAEgB,cAAcjB,OAAOsB,gBAAgB;QAAC,EAAE;IAC/E;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C,MAAMC,SAASrB;IACf,MAAMsB,aAAajB;IACnB,MAAMkB,cAAcZ;QAEPS;IAAb,MAAMI,OAAOJ,CAAAA,cAAAA,MAAMI,IAAI,cAAVJ,yBAAAA,cAAc;QAObA;IALd,oDAAoD;IACpDA,MAAMrB,IAAI,CAAC0B,SAAS,GAAG9B,aACrBG,sBAAsBC,IAAI,EAC1BsB,QACAC,UAAU,CAACE,KAAK,EAChBD,WAAW,CAACH,CAAAA,eAAAA,MAAMM,KAAK,cAAXN,0BAAAA,eAAe,SAAS,EACpCA,MAAMrB,IAAI,CAAC0B,SAAS;IAGtB,OAAOL;AACT,EAAE"}

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

@@ -123,8 +123,6 @@ 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();
@@ -133,6 +131,7 @@ export const useImageSwatchStyles_unstable = state => {
     size = 'medium',
     shape = 'square'
   } = state;
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(imageSwatchClassNames.root, styles, sizeStyles[size], shapeStyles[shape], state.selected && selectedStyles.selected, state.root.className);
   return state;
 };

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

	@@ -1 +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","Bv9i2bc","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":["'use client';\nimport { 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,YAAY;;AACZ,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":[]}
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","Bv9i2bc","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":["'use client';\nimport { 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 const styles = useStyles();\n const selectedStyles = useStylesSelected();\n const sizeStyles = useSizeStyles();\n const shapeStyles = useShapeStyles();\n const { size = 'medium', shape = 'square' } = state;\n // eslint-disable-next-line react-hooks/immutability\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,YAAY;;AACZ,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;EACnD;EACAA,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/ImageSwatch/useImageSwatchStyles.styles.raw.js CHANGED Viewed

@@ -104,12 +104,12 @@ const useShapeStyles = makeStyles({
 /**
  * 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();
     const shapeStyles = useShapeStyles();
     const { size = 'medium', shape = 'square' } = state;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(imageSwatchClassNames.root, styles, sizeStyles[size], shapeStyles[shape], state.selected && selectedStyles.selected, state.root.className);
     return state;
 };

package/lib/components/ImageSwatch/useImageSwatchStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ImageSwatch/useImageSwatchStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ImageSwatchSlots, ImageSwatchState } from './ImageSwatch.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n\nexport const imageSwatchClassNames: SlotClassNames<ImageSwatchSlots> = {\n root: 'fui-ImageSwatch',\n};\n\n/*\n Styles for the root slot\n /\nconst 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\n // High contrast styles\n\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'none',\n ':hover': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke2Hover}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`,\n },\n ':hover:active': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke2Pressed}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`,\n },\n },\n});\n\nconst 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});\n\nconst useSizeStyles = makeStyles({\n 'extra-small': {\n width: '20px',\n height: '20px',\n },\n small: {\n width: '24px',\n height: '24px',\n },\n medium: {\n width: '28px',\n height: '28px',\n },\n large: {\n width: '32px',\n height: '32px',\n },\n});\n\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusMedium }),\n },\n circular: {\n borderRadius: tokens.borderRadiusCircular,\n ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusCircular }),\n },\n square: {\n borderRadius: tokens.borderRadiusNone,\n ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusNone }),\n },\n});\n\n/\n Apply styling to the ImageSwatch slots based on the state\n */\nexport const useImageSwatchStyles_unstable = (state: ImageSwatchState): ImageSwatchState => {\n ~~'use no memo';\n\n~~ const styles = useStyles();\n const selectedStyles = useStylesSelected();\n const sizeStyles = useSizeStyles();\n const shapeStyles = useShapeStyles();\n\n const { size = 'medium', shape = 'square' } = state;\n\n state.root.className = mergeClasses(\n imageSwatchClassNames.root,\n styles,\n sizeStyles[size],\n shapeStyles[shape],\n state.selected && selectedStyles.selected,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","makeResetStyles","tokens","createCustomFocusIndicatorStyle","imageSwatchClassNames","root","useStyles","display","boxSizing","border","colorTransparentStroke","backgroundSize","backgroundRepeat","padding","cursor","boxShadow","strokeWidthThick","colorBrandStroke1","strokeWidthThicker","colorStrokeFocus1","colorCompoundBrandStrokePressed","strokeWidthThickest","outline","colorStrokeFocus2","forcedColorAdjust","colorBrandStroke2Hover","colorBrandStroke2Pressed","useStylesSelected","selected","colorCompoundBrandStrokeHover","useSizeStyles","width","height","small","medium","large","useShapeStyles","rounded","borderRadius","borderRadiusMedium","circular","borderRadiusCircular","square","borderRadiusNone","useImageSwatchStyles_unstable","state","styles","selectedStyles","sizeStyles","shapeStyles","size","shape","className"],"mappings":"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~~;IAEA~~,MAAMC,SAASxC;IACf,MAAMyC,iBAAiBpB;IACvB,MAAMqB,aAAalB;IACnB,MAAMmB,cAAcb;IAEpB,MAAM,EAAEc,OAAO,QAAQ,EAAEC,QAAQ,QAAQ,EAAE,GAAGN;~~IAE9CA~~,MAAMxC,IAAI,CAAC+C,SAAS,GAAGpD,aACrBI,sBAAsBC,IAAI,EAC1ByC,QACAE,UAAU,CAACE,KAAK,EAChBD,WAAW,CAACE,MAAM,EAClBN,MAAMjB,QAAQ,IAAImB,eAAenB,QAAQ,EACzCiB,MAAMxC,IAAI,CAAC+C,SAAS;IAGtB,OAAOP;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/ImageSwatch/useImageSwatchStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ImageSwatchSlots, ImageSwatchState } from './ImageSwatch.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n\nexport const imageSwatchClassNames: SlotClassNames<ImageSwatchSlots> = {\n root: 'fui-ImageSwatch',\n};\n\n/*\n Styles for the root slot\n /\nconst 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\n // High contrast styles\n\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'none',\n ':hover': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke2Hover}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`,\n },\n ':hover:active': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke2Pressed}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`,\n },\n },\n});\n\nconst 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});\n\nconst useSizeStyles = makeStyles({\n 'extra-small': {\n width: '20px',\n height: '20px',\n },\n small: {\n width: '24px',\n height: '24px',\n },\n medium: {\n width: '28px',\n height: '28px',\n },\n large: {\n width: '32px',\n height: '32px',\n },\n});\n\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusMedium }),\n },\n circular: {\n borderRadius: tokens.borderRadiusCircular,\n ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusCircular }),\n },\n square: {\n borderRadius: tokens.borderRadiusNone,\n ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusNone }),\n },\n});\n\n/\n Apply styling to the ImageSwatch slots based on the state\n */\nexport const useImageSwatchStyles_unstable = (state: ImageSwatchState): ImageSwatchState => {\n const styles = useStyles();\n const selectedStyles = useStylesSelected();\n const sizeStyles = useSizeStyles();\n const shapeStyles = useShapeStyles();\n\n const { size = 'medium', shape = 'square' } = state;\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n imageSwatchClassNames.root,\n styles,\n sizeStyles[size],\n shapeStyles[shape],\n state.selected && selectedStyles.selected,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","makeResetStyles","tokens","createCustomFocusIndicatorStyle","imageSwatchClassNames","root","useStyles","display","boxSizing","border","colorTransparentStroke","backgroundSize","backgroundRepeat","padding","cursor","boxShadow","strokeWidthThick","colorBrandStroke1","strokeWidthThicker","colorStrokeFocus1","colorCompoundBrandStrokePressed","strokeWidthThickest","outline","colorStrokeFocus2","forcedColorAdjust","colorBrandStroke2Hover","colorBrandStroke2Pressed","useStylesSelected","selected","colorCompoundBrandStrokeHover","useSizeStyles","width","height","small","medium","large","useShapeStyles","rounded","borderRadius","borderRadiusMedium","circular","borderRadiusCircular","square","borderRadiusNone","useImageSwatchStyles_unstable","state","styles","selectedStyles","sizeStyles","shapeStyles","size","shape","className"],"mappings":"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"}

package/lib/components/SwatchPicker/useSwatchPickerStyles.styles.js CHANGED Viewed

@@ -46,11 +46,10 @@ const useStyles = /*#__PURE__*/__styles({
  * Apply styling to the SwatchPicker slots based on the state
  */
 export const useSwatchPickerStyles_unstable = state => {
-  'use no memo';
   const styles = useStyles();
   const layoutStyle = state.isGrid ? styles.grid : styles.row;
   const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(swatchPickerClassNames.root, styles.root, layoutStyle, spacingStyle, state.root.className);
   return state;
 };

package/lib/components/SwatchPicker/useSwatchPickerStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__styles","mergeClasses","tokens","swatchPickerClassNames","root","useStyles","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","mc9l5x","row","Beiy3e4","grid","spacingSmall","i8kkvl","Belr9w4","rmohyg","spacingMedium","d","p","useSwatchPickerStyles_unstable","state","styles","layoutStyle","isGrid","spacingStyle","spacing","className"],"sources":["useSwatchPickerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const swatchPickerClassNames = {\n root: 'fui-SwatchPicker'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n padding: `${tokens.spacingHorizontalNone} ${tokens.spacingVerticalNone}`,\n display: 'flex'\n },\n row: {\n flexDirection: 'row'\n },\n grid: {\n flexDirection: 'column'\n },\n spacingSmall: {\n gap: '2px'\n },\n spacingMedium: {\n gap: '4px'\n }\n});\n/\n Apply styling to the SwatchPicker slots based on the state\n */ export const useSwatchPickerStyles_unstable = (state)=>{\n ~~'use no memo';\n~~ const styles = useStyles();\n const layoutStyle = state.isGrid ? styles.grid : styles.row;\n const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;\n state.root.className = mergeClasses(swatchPickerClassNames.root, styles.root, layoutStyle, spacingStyle, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,GAAA;IAAAC,OAAA;EAAA;EAAAC,IAAA;IAAAD,OAAA;EAAA;EAAAE,YAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,aAAA;IAAAH,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAE,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAiBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,~~aAAa;;EACb,~~MAAMC,MAAM,GAAGnB,SAAS,CAAC,CAAC;EAC1B,MAAMoB,WAAW,GAAGF,KAAK,CAACG,MAAM,GAAGF,MAAM,CAACV,IAAI,GAAGU,MAAM,CAACZ,GAAG;EAC3D,MAAMe,YAAY,GAAGJ,KAAK,CAACK,OAAO,KAAK,OAAO,GAAGJ,MAAM,CAACT,YAAY,GAAGS,MAAM,CAACL,aAAa;~~EAC3FI~~,KAAK,CAACnB,IAAI,CAACyB,SAAS,GAAG5B,YAAY,CAACE,sBAAsB,CAACC,IAAI,EAAEoB,MAAM,CAACpB,IAAI,EAAEqB,WAAW,EAAEE,YAAY,EAAEJ,KAAK,CAACnB,IAAI,CAACyB,SAAS,CAAC;EAC9H,OAAON,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__styles","mergeClasses","tokens","swatchPickerClassNames","root","useStyles","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","mc9l5x","row","Beiy3e4","grid","spacingSmall","i8kkvl","Belr9w4","rmohyg","spacingMedium","d","p","useSwatchPickerStyles_unstable","state","styles","layoutStyle","isGrid","spacingStyle","spacing","className"],"sources":["useSwatchPickerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const swatchPickerClassNames = {\n root: 'fui-SwatchPicker'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n padding: `${tokens.spacingHorizontalNone} ${tokens.spacingVerticalNone}`,\n display: 'flex'\n },\n row: {\n flexDirection: 'row'\n },\n grid: {\n flexDirection: 'column'\n },\n spacingSmall: {\n gap: '2px'\n },\n spacingMedium: {\n gap: '4px'\n }\n});\n/\n Apply styling to the SwatchPicker slots based on the state\n */ export const useSwatchPickerStyles_unstable = (state)=>{\n const styles = useStyles();\n const layoutStyle = state.isGrid ? styles.grid : styles.row;\n const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(swatchPickerClassNames.root, styles.root, layoutStyle, spacingStyle, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,GAAA;IAAAC,OAAA;EAAA;EAAAC,IAAA;IAAAD,OAAA;EAAA;EAAAE,YAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,aAAA;IAAAH,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAE,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAiBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,MAAMC,MAAM,GAAGnB,SAAS,CAAC,CAAC;EAC1B,MAAMoB,WAAW,GAAGF,KAAK,CAACG,MAAM,GAAGF,MAAM,CAACV,IAAI,GAAGU,MAAM,CAACZ,GAAG;EAC3D,MAAMe,YAAY,GAAGJ,KAAK,CAACK,OAAO,KAAK,OAAO,GAAGJ,MAAM,CAACT,YAAY,GAAGS,MAAM,CAACL,aAAa;EAC3F;EACAI,KAAK,CAACnB,IAAI,CAACyB,SAAS,GAAG5B,YAAY,CAACE,sBAAsB,CAACC,IAAI,EAAEoB,MAAM,CAACpB,IAAI,EAAEqB,WAAW,EAAEE,YAAY,EAAEJ,KAAK,CAACnB,IAAI,CAACyB,SAAS,CAAC;EAC9H,OAAON,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/SwatchPicker/useSwatchPickerStyles.styles.raw.js CHANGED Viewed

@@ -27,10 +27,10 @@ export const swatchPickerClassNames = {
 /**
  * Apply styling to the SwatchPicker slots based on the state
  */ export const useSwatchPickerStyles_unstable = (state)=>{
-    'use no memo';
     const styles = useStyles();
     const layoutStyle = state.isGrid ? styles.grid : styles.row;
     const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(swatchPickerClassNames.root, styles.root, layoutStyle, spacingStyle, state.root.className);
     return state;
 };

package/lib/components/SwatchPicker/useSwatchPickerStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/SwatchPicker/useSwatchPickerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwatchPickerSlots, SwatchPickerState } from './SwatchPicker.types';\nimport { tokens } from '@fluentui/react-theme';\nexport const swatchPickerClassNames: SlotClassNames<SwatchPickerSlots> = {\n root: 'fui-SwatchPicker',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n padding: `${tokens.spacingHorizontalNone} ${tokens.spacingVerticalNone}`,\n display: 'flex',\n },\n row: {\n flexDirection: 'row',\n },\n grid: {\n flexDirection: 'column',\n },\n spacingSmall: { gap: '2px' },\n spacingMedium: { gap: '4px' },\n});\n\n/\n Apply styling to the SwatchPicker slots based on the state\n */\nexport const useSwatchPickerStyles_unstable = (state: SwatchPickerState): SwatchPickerState => {\n ~~'use no memo';\n\n~~ const styles = useStyles();\n const layoutStyle = state.isGrid ? styles.grid : styles.row;\n\n const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;\n state.root.className = mergeClasses(\n swatchPickerClassNames.root,\n styles.root,\n layoutStyle,\n spacingStyle,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","swatchPickerClassNames","root","useStyles","padding","spacingHorizontalNone","spacingVerticalNone","display","row","flexDirection","grid","spacingSmall","gap","spacingMedium","useSwatchPickerStyles_unstable","state","styles","layoutStyle","isGrid","spacingStyle","spacing","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,SAAS,GAAGJ,OAAOK,qBAAqB,CAAC,CAAC,EAAEL,OAAOM,mBAAmB,EAAE;QACxEC,SAAS;IACX;IACAC,KAAK;QACHC,eAAe;IACjB;IACAC,MAAM;QACJD,eAAe;IACjB;IACAE,cAAc;QAAEC,KAAK;IAAM;IAC3BC,eAAe;QAAED,KAAK;IAAM;AAC9B;AAEA;;CAEC,GACD,OAAO,MAAME,iCAAiC,CAACC;IAC7C~~;IAEA~~,MAAMC,SAASb;IACf,MAAMc,cAAcF,MAAMG,MAAM,GAAGF,OAAON,IAAI,GAAGM,OAAOR,GAAG;IAE3D,MAAMW,eAAeJ,MAAMK,OAAO,KAAK,UAAUJ,OAAOL,YAAY,GAAGK,OAAOH,aAAa;~~IAC3FE~~,MAAMb,IAAI,CAACmB,SAAS,GAAGtB,aACrBE,uBAAuBC,IAAI,EAC3Bc,OAAOd,IAAI,EACXe,aACAE,cACAJ,MAAMb,IAAI,CAACmB,SAAS;IAGtB,OAAON;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/SwatchPicker/useSwatchPickerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwatchPickerSlots, SwatchPickerState } from './SwatchPicker.types';\nimport { tokens } from '@fluentui/react-theme';\nexport const swatchPickerClassNames: SlotClassNames<SwatchPickerSlots> = {\n root: 'fui-SwatchPicker',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n padding: `${tokens.spacingHorizontalNone} ${tokens.spacingVerticalNone}`,\n display: 'flex',\n },\n row: {\n flexDirection: 'row',\n },\n grid: {\n flexDirection: 'column',\n },\n spacingSmall: { gap: '2px' },\n spacingMedium: { gap: '4px' },\n});\n\n/\n Apply styling to the SwatchPicker slots based on the state\n */\nexport const useSwatchPickerStyles_unstable = (state: SwatchPickerState): SwatchPickerState => {\n const styles = useStyles();\n const layoutStyle = state.isGrid ? styles.grid : styles.row;\n\n const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n swatchPickerClassNames.root,\n styles.root,\n layoutStyle,\n spacingStyle,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","swatchPickerClassNames","root","useStyles","padding","spacingHorizontalNone","spacingVerticalNone","display","row","flexDirection","grid","spacingSmall","gap","spacingMedium","useSwatchPickerStyles_unstable","state","styles","layoutStyle","isGrid","spacingStyle","spacing","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,SAAS,GAAGJ,OAAOK,qBAAqB,CAAC,CAAC,EAAEL,OAAOM,mBAAmB,EAAE;QACxEC,SAAS;IACX;IACAC,KAAK;QACHC,eAAe;IACjB;IACAC,MAAM;QACJD,eAAe;IACjB;IACAE,cAAc;QAAEC,KAAK;IAAM;IAC3BC,eAAe;QAAED,KAAK;IAAM;AAC9B;AAEA;;CAEC,GACD,OAAO,MAAME,iCAAiC,CAACC;IAC7C,MAAMC,SAASb;IACf,MAAMc,cAAcF,MAAMG,MAAM,GAAGF,OAAON,IAAI,GAAGM,OAAOR,GAAG;IAE3D,MAAMW,eAAeJ,MAAMK,OAAO,KAAK,UAAUJ,OAAOL,YAAY,GAAGK,OAAOH,aAAa;IAC3F,oDAAoD;IACpDE,MAAMb,IAAI,CAACmB,SAAS,GAAGtB,aACrBE,uBAAuBC,IAAI,EAC3Bc,OAAOd,IAAI,EACXe,aACAE,cACAJ,MAAMb,IAAI,CAACmB,SAAS;IAGtB,OAAON;AACT,EAAE"}

package/lib/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.js CHANGED Viewed

@@ -22,11 +22,10 @@ const useStyles = /*#__PURE__*/__styles({
  * Apply styling to the SwatchPickerRow slots based on the state
  */
 export const useSwatchPickerRowStyles_unstable = state => {
-  'use no memo';
   const resetStyles = useResetStyles();
   const styles = useStyles();
   const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(swatchPickerRowClassNames.root, resetStyles, spacingStyle, state.root.className);
   return state;
 };

package/lib/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__resetStyles","mergeClasses","__styles","swatchPickerRowClassNames","root","useResetStyles","useStyles","spacingSmall","i8kkvl","spacingMedium","d","useSwatchPickerRowStyles_unstable","state","resetStyles","styles","spacingStyle","spacing","className"],"sources":["useSwatchPickerRowStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses, makeStyles } from '@griffel/react';\nexport const swatchPickerRowClassNames = {\n root: 'fui-SwatchPickerRow'\n};\n/*\n Styles for the root slot\n / const useResetStyles = makeResetStyles({\n display: 'flex',\n flexDirection: 'row'\n});\nconst useStyles = makeStyles({\n spacingSmall: {\n columnGap: '2px'\n },\n spacingMedium: {\n columnGap: '4px'\n }\n});\n/\n Apply styling to the SwatchPickerRow slots based on the state\n */ export const useSwatchPickerRowStyles_unstable = (state)=>{\n ~~'use no memo';\n~~ const resetStyles = useResetStyles();\n const styles = useStyles();\n const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;\n state.root.className = mergeClasses(swatchPickerRowClassNames.root, resetStyles, spacingStyle, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAA0BC,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AAC1E,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,cAAc,gBAAGL,aAAA,kEAG1B,CAAC;AACF,MAAMM,SAAS,gBAAGJ,QAAA;EAAAK,YAAA;IAAAC,MAAA;EAAA;EAAAC,aAAA;IAAAD,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAOjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,~~aAAa;;EACb,~~MAAMC,WAAW,GAAGR,cAAc,CAAC,CAAC;EACpC,MAAMS,MAAM,GAAGR,SAAS,CAAC,CAAC;EAC1B,MAAMS,YAAY,GAAGH,KAAK,CAACI,OAAO,KAAK,OAAO,GAAGF,MAAM,CAACP,YAAY,GAAGO,MAAM,CAACL,aAAa;~~EAC3FG~~,KAAK,CAACR,IAAI,CAACa,SAAS,GAAGhB,YAAY,CAACE,yBAAyB,CAACC,IAAI,EAAES,WAAW,EAAEE,YAAY,EAAEH,KAAK,CAACR,IAAI,CAACa,SAAS,CAAC;EACpH,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["__resetStyles","mergeClasses","__styles","swatchPickerRowClassNames","root","useResetStyles","useStyles","spacingSmall","i8kkvl","spacingMedium","d","useSwatchPickerRowStyles_unstable","state","resetStyles","styles","spacingStyle","spacing","className"],"sources":["useSwatchPickerRowStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses, makeStyles } from '@griffel/react';\nexport const swatchPickerRowClassNames = {\n root: 'fui-SwatchPickerRow'\n};\n/*\n Styles for the root slot\n / const useResetStyles = makeResetStyles({\n display: 'flex',\n flexDirection: 'row'\n});\nconst useStyles = makeStyles({\n spacingSmall: {\n columnGap: '2px'\n },\n spacingMedium: {\n columnGap: '4px'\n }\n});\n/\n Apply styling to the SwatchPickerRow slots based on the state\n */ export const useSwatchPickerRowStyles_unstable = (state)=>{\n const resetStyles = useResetStyles();\n const styles = useStyles();\n const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(swatchPickerRowClassNames.root, resetStyles, spacingStyle, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAA0BC,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AAC1E,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,cAAc,gBAAGL,aAAA,kEAG1B,CAAC;AACF,MAAMM,SAAS,gBAAGJ,QAAA;EAAAK,YAAA;IAAAC,MAAA;EAAA;EAAAC,aAAA;IAAAD,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAOjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,MAAMC,WAAW,GAAGR,cAAc,CAAC,CAAC;EACpC,MAAMS,MAAM,GAAGR,SAAS,CAAC,CAAC;EAC1B,MAAMS,YAAY,GAAGH,KAAK,CAACI,OAAO,KAAK,OAAO,GAAGF,MAAM,CAACP,YAAY,GAAGO,MAAM,CAACL,aAAa;EAC3F;EACAG,KAAK,CAACR,IAAI,CAACa,SAAS,GAAGhB,YAAY,CAACE,yBAAyB,CAACC,IAAI,EAAES,WAAW,EAAEE,YAAY,EAAEH,KAAK,CAACR,IAAI,CAACa,SAAS,CAAC;EACpH,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.raw.js CHANGED Viewed

@@ -20,10 +20,10 @@ const useStyles = makeStyles({
 /**
  * Apply styling to the SwatchPickerRow slots based on the state
  */ export const useSwatchPickerRowStyles_unstable = (state)=>{
-    'use no memo';
     const resetStyles = useResetStyles();
     const styles = useStyles();
     const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(swatchPickerRowClassNames.root, resetStyles, spacingStyle, state.root.className);
     return state;
 };

package/lib/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses, makeStyles } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwatchPickerRowSlots, SwatchPickerRowState } from './SwatchPickerRow.types';\n\nexport const swatchPickerRowClassNames: SlotClassNames<SwatchPickerRowSlots> = {\n root: 'fui-SwatchPickerRow',\n};\n\n/*\n Styles for the root slot\n /\nconst useResetStyles = makeResetStyles({\n display: 'flex',\n flexDirection: 'row',\n});\n\nconst useStyles = makeStyles({\n spacingSmall: {\n columnGap: '2px',\n },\n spacingMedium: {\n columnGap: '4px',\n },\n});\n\n/\n Apply styling to the SwatchPickerRow slots based on the state\n */\nexport const useSwatchPickerRowStyles_unstable = (state: SwatchPickerRowState): SwatchPickerRowState => {\n ~~'use no memo';\n\n~~ const resetStyles = useResetStyles();\n const styles = useStyles();\n const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;\n\n state.root.className = mergeClasses(swatchPickerRowClassNames.root, resetStyles, spacingStyle, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","makeStyles","swatchPickerRowClassNames","root","useResetStyles","display","flexDirection","useStyles","spacingSmall","columnGap","spacingMedium","useSwatchPickerRowStyles_unstable","state","resetStyles","styles","spacingStyle","spacing","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAI3E,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,iBAAiBL,gBAAgB;IACrCM,SAAS;IACTC,eAAe;AACjB;AAEA,MAAMC,YAAYN,WAAW;IAC3BO,cAAc;QACZC,WAAW;IACb;IACAC,eAAe;QACbD,WAAW;IACb;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,oCAAoC,CAACC;IAChD~~;IAEA~~,MAAMC,cAAcT;IACpB,MAAMU,SAASP;IACf,MAAMQ,eAAeH,MAAMI,OAAO,KAAK,UAAUF,OAAON,YAAY,GAAGM,OAAOJ,aAAa;~~IAE3FE~~,MAAMT,IAAI,CAACc,SAAS,GAAGjB,aAAaE,0BAA0BC,IAAI,EAAEU,aAAaE,cAAcH,MAAMT,IAAI,CAACc,SAAS;IAEnH,OAAOL;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses, makeStyles } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwatchPickerRowSlots, SwatchPickerRowState } from './SwatchPickerRow.types';\n\nexport const swatchPickerRowClassNames: SlotClassNames<SwatchPickerRowSlots> = {\n root: 'fui-SwatchPickerRow',\n};\n\n/*\n Styles for the root slot\n /\nconst useResetStyles = makeResetStyles({\n display: 'flex',\n flexDirection: 'row',\n});\n\nconst useStyles = makeStyles({\n spacingSmall: {\n columnGap: '2px',\n },\n spacingMedium: {\n columnGap: '4px',\n },\n});\n\n/\n Apply styling to the SwatchPickerRow slots based on the state\n */\nexport const useSwatchPickerRowStyles_unstable = (state: SwatchPickerRowState): SwatchPickerRowState => {\n const resetStyles = useResetStyles();\n const styles = useStyles();\n const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(swatchPickerRowClassNames.root, resetStyles, spacingStyle, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","makeStyles","swatchPickerRowClassNames","root","useResetStyles","display","flexDirection","useStyles","spacingSmall","columnGap","spacingMedium","useSwatchPickerRowStyles_unstable","state","resetStyles","styles","spacingStyle","spacing","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAI3E,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,iBAAiBL,gBAAgB;IACrCM,SAAS;IACTC,eAAe;AACjB;AAEA,MAAMC,YAAYN,WAAW;IAC3BO,cAAc;QACZC,WAAW;IACb;IACAC,eAAe;QACbD,WAAW;IACb;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,oCAAoC,CAACC;IAChD,MAAMC,cAAcT;IACpB,MAAMU,SAASP;IACf,MAAMQ,eAAeH,MAAMI,OAAO,KAAK,UAAUF,OAAON,YAAY,GAAGM,OAAOJ,aAAa;IAE3F,oDAAoD;IACpDE,MAAMT,IAAI,CAACc,SAAS,GAAGjB,aAAaE,0BAA0BC,IAAI,EAAEU,aAAaE,cAAcH,MAAMT,IAAI,CAACc,SAAS;IAEnH,OAAOL;AACT,EAAE"}

package/lib-commonjs/components/ColorSwatch/useColorSwatchStyles.styles.js CHANGED Viewed

@@ -310,7 +310,6 @@ const useIconStyles = /*#__PURE__*/ (0, _react.__styles)({
     ]
 });
 const useColorSwatchStyles_unstable = (state)=>{
-    'use no memo';
     const { size = 'medium', shape = 'square' } = state;
     const resetStyles = useResetStyles();
     const styles = useStyles();
@@ -318,11 +317,14 @@ const useColorSwatchStyles_unstable = (state)=>{
     const shapeStyles = useShapeStyles();
     const iconStyles = useIconStyles();
     const smallerSelectedStyles = size === 'small' || size === 'extra-small' ? styles.selectedSmall : '';
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(colorSwatchClassNames.root, resetStyles, sizeStyles[size], shapeStyles[shape], state.selected && styles.selected, state.selected && smallerSelectedStyles, state.disabled && styles.disabled, state.root.className);
     if (state.disabled && state.disabledIcon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.disabledIcon.className = (0, _react.mergeClasses)(iconStyles.icon, iconStyles[size], iconStyles.disabledIcon, state.disabledIcon.className);
     }
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = (0, _react.mergeClasses)(iconStyles.icon, iconStyles[size], state.icon.className);
     }
     return state;

package/lib-commonjs/components/ColorSwatch/useColorSwatchStyles.styles.js.map CHANGED Viewed

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

package/lib-commonjs/components/ColorSwatch/useColorSwatchStyles.styles.raw.js CHANGED Viewed

@@ -187,7 +187,6 @@ const useIconStyles = (0, _react.makeStyles)({
     }
 });
 const useColorSwatchStyles_unstable = (state)=>{
-    'use no memo';
     const { size = 'medium', shape = 'square' } = state;
     const resetStyles = useResetStyles();
     const styles = useStyles();
@@ -195,11 +194,14 @@ const useColorSwatchStyles_unstable = (state)=>{
     const shapeStyles = useShapeStyles();
     const iconStyles = useIconStyles();
     const smallerSelectedStyles = size === 'small' || size === 'extra-small' ? styles.selectedSmall : '';
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(colorSwatchClassNames.root, resetStyles, sizeStyles[size], shapeStyles[shape], state.selected && styles.selected, state.selected && smallerSelectedStyles, state.disabled && styles.disabled, state.root.className);
     if (state.disabled && state.disabledIcon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.disabledIcon.className = (0, _react.mergeClasses)(iconStyles.icon, iconStyles[size], iconStyles.disabledIcon, state.disabledIcon.className);
     }
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = (0, _react.mergeClasses)(iconStyles.icon, iconStyles[size], state.icon.className);
     }
     return state;

package/lib-commonjs/components/ColorSwatch/useColorSwatchStyles.styles.raw.js.map CHANGED Viewed

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

package/lib-commonjs/components/EmptySwatch/useEmptySwatchStyles.styles.js CHANGED Viewed

@@ -133,13 +133,13 @@ const useShapeStyles = /*#__PURE__*/ (0, _react.__styles)({
     ]
 });
 const useEmptySwatchStyles_unstable = (state)=>{
-    'use no memo';
     const styles = useStyles();
     const sizeStyles = useSizeStyles();
     const shapeStyles = useShapeStyles();
     var _state_size;
     const size = (_state_size = state.size) !== null && _state_size !== void 0 ? _state_size : 'medium';
     var _state_shape;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(emptySwatchClassNames.root, styles, sizeStyles[size], shapeStyles[(_state_shape = state.shape) !== null && _state_shape !== void 0 ? _state_shape : 'square'], state.root.className);
     return state;
 };

package/lib-commonjs/components/EmptySwatch/useEmptySwatchStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useEmptySwatchStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const emptySwatchClassNames = {\n root: 'fui-EmptySwatch'\n};\n/*\n Styles for the root slot\n / const useStyles = makeResetStyles({\n backgroundColor: tokens.colorTransparentBackground,\n border: `1px dashed ${tokens.colorNeutralForeground4}`\n});\nconst useSizeStyles = makeStyles({\n 'extra-small': {\n width: '20px',\n height: '20px'\n },\n small: {\n width: '24px',\n height: '24px'\n },\n medium: {\n width: '28px',\n height: '28px'\n },\n large: {\n width: '32px',\n height: '32px'\n }\n});\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusMedium\n })\n },\n circular: {\n borderRadius: tokens.borderRadiusCircular,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusCircular\n })\n },\n square: {\n borderRadius: tokens.borderRadiusNone,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusNone\n })\n }\n});\n/\n Apply styling to the EmptySwatch slots based on the state\n */ export const useEmptySwatchStyles_unstable = (state)=>{\n ~~'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"],"names":["__resetStyles","__styles","mergeClasses","tokens","createCustomFocusIndicatorStyle","emptySwatchClassNames","root","useStyles","useSizeStyles","a9b677","Bqenvij","small","medium","large","d","useShapeStyles","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","circular","square","p","useEmptySwatchStyles_unstable","state","styles","sizeStyles","shapeStyles","_state_size","size","_state_shape","className","shape"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,qBAAqB;;;IAiDjByB,6BAA6B;;;;uBApDY,gBAAgB;AAGnE,8BAA8B;IACjCxB,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGP,oBAAA,EAAA,YAAA,MAAA;IAAA;CAGrB,CAAC;AACF,MAAMQ,aAAa,GAAA,WAAA,OAAGP,eAAA,EAAA;IAAA,eAAA;QAAAQ,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,KAAA,EAAA;QAAAF,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAE,MAAA,EAAA;QAAAH,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAG,KAAA,EAAA;QAAAJ,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAI,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAiBrB,CAAC;AACF,MAAMC,cAAc,GAAA,WAAA,OAAGd,eAAA,EAAA;IAAAe,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAV,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAE,MAAA,EAAA;QAAAX,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAZ,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAe,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAmBtB,CAAC;AAGS,uCAAuCE,KAAK,IAAG;IACtD,~~aAAa;IACb,~~MAAMC,MAAM,GAAGzB,SAAS,CAAC,CAAC;IAC1B,MAAM0B,UAAU,GAAGzB,aAAa,CAAC,CAAC;IAClC,MAAM0B,WAAW,GAAGnB,cAAc,CAAC,CAAC;IACpC,IAAIoB,WAAW;IACf,MAAMC,IAAI,~~GAAG~~,~~CAACD~~,~~WAAW~~,~~GAAGJ~~,KAAK,CAACK,IAAAA,AAAI,MAAM,IAAI,IAAID,WAAW,KAAK,KAAK,CAAC,GAAGA,WAAW,GAAG,QAAQ;IACnG,IAAIE,YAAY;~~IAChBN~~,KAAK,CAACzB,IAAI,CAACgC,SAAS,OAAGpC,mBAAY,EAACG,qBAAqB,CAACC,IAAI,EAAE0B,MAAM,EAAEC,UAAU,CAACG,IAAI,CAAC,EAAEF,WAAW,CAAC,CAACG,YAAY,GAAGN,KAAK,CAACQ,KAAAA,AAAK,MAAM,IAAI,IAAIF,YAAY,KAAK,KAAK,CAAC,GAAGA,YAAY,GAAG,QAAQ,CAAC,EAAEN,KAAK,CAACzB,IAAI,CAACgC,SAAS,CAAC;IACxN,OAAOP,KAAK;AAChB,CAAC"}
1	+ {"version":3,"sources":["useEmptySwatchStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const emptySwatchClassNames = {\n root: 'fui-EmptySwatch'\n};\n/*\n Styles for the root slot\n / const useStyles = makeResetStyles({\n backgroundColor: tokens.colorTransparentBackground,\n border: `1px dashed ${tokens.colorNeutralForeground4}`\n});\nconst useSizeStyles = makeStyles({\n 'extra-small': {\n width: '20px',\n height: '20px'\n },\n small: {\n width: '24px',\n height: '24px'\n },\n medium: {\n width: '28px',\n height: '28px'\n },\n large: {\n width: '32px',\n height: '32px'\n }\n});\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusMedium\n })\n },\n circular: {\n borderRadius: tokens.borderRadiusCircular,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusCircular\n })\n },\n square: {\n borderRadius: tokens.borderRadiusNone,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusNone\n })\n }\n});\n/\n Apply styling to the EmptySwatch slots based on the state\n */ export const useEmptySwatchStyles_unstable = (state)=>{\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n const shapeStyles = useShapeStyles();\n var _state_size;\n const size = (_state_size = state.size) !== null && _state_size !== void 0 ? _state_size : 'medium';\n var _state_shape;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(emptySwatchClassNames.root, styles, sizeStyles[size], shapeStyles[(_state_shape = state.shape) !== null && _state_shape !== void 0 ? _state_shape : 'square'], state.root.className);\n return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","tokens","createCustomFocusIndicatorStyle","emptySwatchClassNames","root","useStyles","useSizeStyles","a9b677","Bqenvij","small","medium","large","d","useShapeStyles","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","circular","square","p","useEmptySwatchStyles_unstable","state","styles","sizeStyles","shapeStyles","_state_size","size","_state_shape","className","shape"],"mappings":"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"}

package/lib-commonjs/components/EmptySwatch/useEmptySwatchStyles.styles.raw.js CHANGED Viewed

@@ -68,13 +68,13 @@ const useShapeStyles = (0, _react.makeStyles)({
     }
 });
 const useEmptySwatchStyles_unstable = (state)=>{
-    'use no memo';
     const styles = useStyles();
     const sizeStyles = useSizeStyles();
     const shapeStyles = useShapeStyles();
     var _state_size;
     const size = (_state_size = state.size) !== null && _state_size !== void 0 ? _state_size : 'medium';
     var _state_shape;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(emptySwatchClassNames.root, styles, sizeStyles[size], shapeStyles[(_state_shape = state.shape) !== null && _state_shape !== void 0 ? _state_shape : 'square'], state.root.className);
     return state;
 };

package/lib-commonjs/components/EmptySwatch/useEmptySwatchStyles.styles.raw.js.map CHANGED Viewed

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

package/lib-commonjs/components/ImageSwatch/useImageSwatchStyles.styles.js CHANGED Viewed

@@ -192,12 +192,12 @@ const useShapeStyles = /*#__PURE__*/ (0, _react.__styles)({
     ]
 });
 const useImageSwatchStyles_unstable = (state)=>{
-    'use no memo';
     const styles = useStyles();
     const selectedStyles = useStylesSelected();
     const sizeStyles = useSizeStyles();
     const shapeStyles = useShapeStyles();
     const { size = 'medium', shape = 'square' } = state;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(imageSwatchClassNames.root, styles, sizeStyles[size], shapeStyles[shape], state.selected && selectedStyles.selected, state.root.className);
     return state;
 };

package/lib-commonjs/components/ImageSwatch/useImageSwatchStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useImageSwatchStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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"],"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","Bv9i2bc","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"],"mappings":"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~~aAAa;IACb,~~MAAMC,MAAM,GAAGrD,SAAS,CAAC,CAAC;IAC1B,MAAMsD,cAAc,GAAGnD,iBAAiB,CAAC,CAAC;IAC1C,MAAMoD,UAAU,GAAGxB,aAAa,CAAC,CAAC;IAClC,MAAMyB,WAAW,GAAGnB,cAAc,CAAC,CAAC;IACpC,MAAM,EAAEoB,IAAI,GAAG,QAAQ,EAAEC,KAAK,GAAG,QAAA,EAAU,GAAGN,KAAK;~~IACnDA~~,KAAK,CAACrD,IAAI,CAAC4D,SAAS,OAAGjE,mBAAY,EAACI,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;IAC9K,OAAOP,KAAK;AAChB,CAAC"}
1	+ {"version":3,"sources":["useImageSwatchStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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 const styles = useStyles();\n const selectedStyles = useStylesSelected();\n const sizeStyles = useSizeStyles();\n const shapeStyles = useShapeStyles();\n const { size = 'medium', shape = 'square' } = state;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(imageSwatchClassNames.root, styles, sizeStyles[size], shapeStyles[shape], state.selected && selectedStyles.selected, state.root.className);\n return state;\n};\n"],"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","Bv9i2bc","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"],"mappings":"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"}

package/lib-commonjs/components/ImageSwatch/useImageSwatchStyles.styles.raw.js CHANGED Viewed

@@ -120,12 +120,12 @@ const useShapeStyles = (0, _react.makeStyles)({
     }
 });
 const useImageSwatchStyles_unstable = (state)=>{
-    'use no memo';
     const styles = useStyles();
     const selectedStyles = useStylesSelected();
     const sizeStyles = useSizeStyles();
     const shapeStyles = useShapeStyles();
     const { size = 'medium', shape = 'square' } = state;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(imageSwatchClassNames.root, styles, sizeStyles[size], shapeStyles[shape], state.selected && selectedStyles.selected, state.root.className);
     return state;
 };

package/lib-commonjs/components/ImageSwatch/useImageSwatchStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ImageSwatch/useImageSwatchStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ImageSwatchSlots, ImageSwatchState } from './ImageSwatch.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n\nexport const imageSwatchClassNames: SlotClassNames<ImageSwatchSlots> = {\n root: 'fui-ImageSwatch',\n};\n\n/*\n Styles for the root slot\n /\nconst 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\n // High contrast styles\n\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'none',\n ':hover': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke2Hover}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`,\n },\n ':hover:active': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke2Pressed}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`,\n },\n },\n});\n\nconst 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});\n\nconst useSizeStyles = makeStyles({\n 'extra-small': {\n width: '20px',\n height: '20px',\n },\n small: {\n width: '24px',\n height: '24px',\n },\n medium: {\n width: '28px',\n height: '28px',\n },\n large: {\n width: '32px',\n height: '32px',\n },\n});\n\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusMedium }),\n },\n circular: {\n borderRadius: tokens.borderRadiusCircular,\n ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusCircular }),\n },\n square: {\n borderRadius: tokens.borderRadiusNone,\n ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusNone }),\n },\n});\n\n/\n Apply styling to the ImageSwatch slots based on the state\n */\nexport const useImageSwatchStyles_unstable = (state: ImageSwatchState): ImageSwatchState => {\n ~~'use no memo';\n\n~~ const styles = useStyles();\n const selectedStyles = useStylesSelected();\n const sizeStyles = useSizeStyles();\n const shapeStyles = useShapeStyles();\n\n const { size = 'medium', shape = 'square' } = state;\n\n state.root.className = mergeClasses(\n imageSwatchClassNames.root,\n styles,\n sizeStyles[size],\n shapeStyles[shape],\n state.selected && selectedStyles.selected,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","makeResetStyles","tokens","createCustomFocusIndicatorStyle","imageSwatchClassNames","root","useStyles","display","boxSizing","border","colorTransparentStroke","backgroundSize","backgroundRepeat","padding","cursor","boxShadow","strokeWidthThick","colorBrandStroke1","strokeWidthThicker","colorStrokeFocus1","colorCompoundBrandStrokePressed","strokeWidthThickest","outline","colorStrokeFocus2","forcedColorAdjust","colorBrandStroke2Hover","colorBrandStroke2Pressed","useStylesSelected","selected","colorCompoundBrandStrokeHover","useSizeStyles","width","height","small","medium","large","useShapeStyles","rounded","borderRadius","borderRadiusMedium","circular","borderRadiusCircular","square","borderRadiusNone","useImageSwatchStyles_unstable","state","styles","selectedStyles","sizeStyles","shapeStyles","size","shape","className"],"mappings":"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~~;IAEA~~,MAAMC,SAASxC;IACf,MAAMyC,iBAAiBpB;IACvB,MAAMqB,aAAalB;IACnB,MAAMmB,cAAcb;IAEpB,MAAM,EAAEc,OAAO,QAAQ,EAAEC,QAAQ,QAAQ,EAAE,GAAGN;~~IAE9CA~~,MAAMxC,IAAI,CAAC+C,SAAS,OAAGpD,mBAAAA,EACrBI,sBAAsBC,IAAI,EAC1ByC,QACAE,UAAU,CAACE,KAAK,EAChBD,WAAW,CAACE,MAAM,EAClBN,MAAMjB,QAAQ,IAAImB,eAAenB,QAAQ,EACzCiB,MAAMxC,IAAI,CAAC+C,SAAS;IAGtB,OAAOP;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/ImageSwatch/useImageSwatchStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ImageSwatchSlots, ImageSwatchState } from './ImageSwatch.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n\nexport const imageSwatchClassNames: SlotClassNames<ImageSwatchSlots> = {\n root: 'fui-ImageSwatch',\n};\n\n/*\n Styles for the root slot\n /\nconst 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\n // High contrast styles\n\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'none',\n ':hover': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke2Hover}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`,\n },\n ':hover:active': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke2Pressed}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`,\n },\n },\n});\n\nconst 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});\n\nconst useSizeStyles = makeStyles({\n 'extra-small': {\n width: '20px',\n height: '20px',\n },\n small: {\n width: '24px',\n height: '24px',\n },\n medium: {\n width: '28px',\n height: '28px',\n },\n large: {\n width: '32px',\n height: '32px',\n },\n});\n\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusMedium }),\n },\n circular: {\n borderRadius: tokens.borderRadiusCircular,\n ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusCircular }),\n },\n square: {\n borderRadius: tokens.borderRadiusNone,\n ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusNone }),\n },\n});\n\n/\n Apply styling to the ImageSwatch slots based on the state\n */\nexport const useImageSwatchStyles_unstable = (state: ImageSwatchState): ImageSwatchState => {\n const styles = useStyles();\n const selectedStyles = useStylesSelected();\n const sizeStyles = useSizeStyles();\n const shapeStyles = useShapeStyles();\n\n const { size = 'medium', shape = 'square' } = state;\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n imageSwatchClassNames.root,\n styles,\n sizeStyles[size],\n shapeStyles[shape],\n state.selected && selectedStyles.selected,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","makeResetStyles","tokens","createCustomFocusIndicatorStyle","imageSwatchClassNames","root","useStyles","display","boxSizing","border","colorTransparentStroke","backgroundSize","backgroundRepeat","padding","cursor","boxShadow","strokeWidthThick","colorBrandStroke1","strokeWidthThicker","colorStrokeFocus1","colorCompoundBrandStrokePressed","strokeWidthThickest","outline","colorStrokeFocus2","forcedColorAdjust","colorBrandStroke2Hover","colorBrandStroke2Pressed","useStylesSelected","selected","colorCompoundBrandStrokeHover","useSizeStyles","width","height","small","medium","large","useShapeStyles","rounded","borderRadius","borderRadiusMedium","circular","borderRadiusCircular","square","borderRadiusNone","useImageSwatchStyles_unstable","state","styles","selectedStyles","sizeStyles","shapeStyles","size","shape","className"],"mappings":"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"}

package/lib-commonjs/components/SwatchPicker/useSwatchPickerStyles.styles.js CHANGED Viewed

@@ -74,10 +74,10 @@ const swatchPickerClassNames = {
     ]
 });
 const useSwatchPickerStyles_unstable = (state)=>{
-    'use no memo';
     const styles = useStyles();
     const layoutStyle = state.isGrid ? styles.grid : styles.row;
     const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(swatchPickerClassNames.root, styles.root, layoutStyle, spacingStyle, state.root.className);
     return state;
 };

package/lib-commonjs/components/SwatchPicker/useSwatchPickerStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useSwatchPickerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const swatchPickerClassNames = {\n root: 'fui-SwatchPicker'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n padding: `${tokens.spacingHorizontalNone} ${tokens.spacingVerticalNone}`,\n display: 'flex'\n },\n row: {\n flexDirection: 'row'\n },\n grid: {\n flexDirection: 'column'\n },\n spacingSmall: {\n gap: '2px'\n },\n spacingMedium: {\n gap: '4px'\n }\n});\n/\n Apply styling to the SwatchPicker slots based on the state\n */ export const useSwatchPickerStyles_unstable = (state)=>{\n ~~'use no memo';\n~~ const styles = useStyles();\n const layoutStyle = state.isGrid ? styles.grid : styles.row;\n const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;\n state.root.className = mergeClasses(swatchPickerClassNames.root, styles.root, layoutStyle, spacingStyle, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","tokens","swatchPickerClassNames","root","useStyles","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","mc9l5x","row","Beiy3e4","grid","spacingSmall","i8kkvl","Belr9w4","rmohyg","spacingMedium","d","p","useSwatchPickerStyles_unstable","state","styles","layoutStyle","isGrid","spacingStyle","spacing","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,sBAAsB;;;IAyBlBmB,8BAA8B;;;;uBA3BN,gBAAgB;AAElD,+BAA+B;IAClClB,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAE,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,GAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,IAAA,EAAA;QAAAD,OAAA,EAAA;IAAA;IAAAE,YAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,aAAA,EAAA;QAAAH,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAE,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAiBrB,CAAC;AAGS,uCAAwCE,KAAK,IAAG;IACvD,~~aAAa;IACb,~~MAAMC,MAAM,GAAGnB,SAAS,CAAC,CAAC;IAC1B,MAAMoB,WAAW,GAAGF,KAAK,CAACG,MAAM,GAAGF,MAAM,CAACV,IAAI,GAAGU,MAAM,CAACZ,GAAG;IAC3D,MAAMe,YAAY,GAAGJ,KAAK,CAACK,OAAO,KAAK,OAAO,GAAGJ,MAAM,CAACT,YAAY,GAAGS,MAAM,CAACL,aAAa;~~IAC3FI~~,KAAK,CAACnB,IAAI,CAACyB,SAAS,OAAG5B,mBAAY,EAACE,sBAAsB,CAACC,IAAI,EAAEoB,MAAM,CAACpB,IAAI,EAAEqB,WAAW,EAAEE,YAAY,EAAEJ,KAAK,CAACnB,IAAI,CAACyB,SAAS,CAAC;IAC9H,OAAON,KAAK;AAChB,CAAC"}
1	+ {"version":3,"sources":["useSwatchPickerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const swatchPickerClassNames = {\n root: 'fui-SwatchPicker'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n padding: `${tokens.spacingHorizontalNone} ${tokens.spacingVerticalNone}`,\n display: 'flex'\n },\n row: {\n flexDirection: 'row'\n },\n grid: {\n flexDirection: 'column'\n },\n spacingSmall: {\n gap: '2px'\n },\n spacingMedium: {\n gap: '4px'\n }\n});\n/\n Apply styling to the SwatchPicker slots based on the state\n */ export const useSwatchPickerStyles_unstable = (state)=>{\n const styles = useStyles();\n const layoutStyle = state.isGrid ? styles.grid : styles.row;\n const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(swatchPickerClassNames.root, styles.root, layoutStyle, spacingStyle, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","tokens","swatchPickerClassNames","root","useStyles","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","mc9l5x","row","Beiy3e4","grid","spacingSmall","i8kkvl","Belr9w4","rmohyg","spacingMedium","d","p","useSwatchPickerStyles_unstable","state","styles","layoutStyle","isGrid","spacingStyle","spacing","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,sBAAsB;;;IAyBlBmB,8BAA8B;;;;uBA3BN,gBAAgB;AAElD,+BAA+B;IAClClB,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAE,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,GAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,IAAA,EAAA;QAAAD,OAAA,EAAA;IAAA;IAAAE,YAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,aAAA,EAAA;QAAAH,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAE,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAiBrB,CAAC;AAGS,uCAAwCE,KAAK,IAAG;IACvD,MAAMC,MAAM,GAAGnB,SAAS,CAAC,CAAC;IAC1B,MAAMoB,WAAW,GAAGF,KAAK,CAACG,MAAM,GAAGF,MAAM,CAACV,IAAI,GAAGU,MAAM,CAACZ,GAAG;IAC3D,MAAMe,YAAY,GAAGJ,KAAK,CAACK,OAAO,KAAK,OAAO,GAAGJ,MAAM,CAACT,YAAY,GAAGS,MAAM,CAACL,aAAa;IAC3F,oDAAA;IACAI,KAAK,CAACnB,IAAI,CAACyB,SAAS,OAAG5B,mBAAY,EAACE,sBAAsB,CAACC,IAAI,EAAEoB,MAAM,CAACpB,IAAI,EAAEqB,WAAW,EAAEE,YAAY,EAAEJ,KAAK,CAACnB,IAAI,CAACyB,SAAS,CAAC;IAC9H,OAAON,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/SwatchPicker/useSwatchPickerStyles.styles.raw.js CHANGED Viewed

@@ -43,10 +43,10 @@ const swatchPickerClassNames = {
     }
 });
 const useSwatchPickerStyles_unstable = (state)=>{
-    'use no memo';
     const styles = useStyles();
     const layoutStyle = state.isGrid ? styles.grid : styles.row;
     const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(swatchPickerClassNames.root, styles.root, layoutStyle, spacingStyle, state.root.className);
     return state;
 };

package/lib-commonjs/components/SwatchPicker/useSwatchPickerStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/SwatchPicker/useSwatchPickerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwatchPickerSlots, SwatchPickerState } from './SwatchPicker.types';\nimport { tokens } from '@fluentui/react-theme';\nexport const swatchPickerClassNames: SlotClassNames<SwatchPickerSlots> = {\n root: 'fui-SwatchPicker',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n padding: `${tokens.spacingHorizontalNone} ${tokens.spacingVerticalNone}`,\n display: 'flex',\n },\n row: {\n flexDirection: 'row',\n },\n grid: {\n flexDirection: 'column',\n },\n spacingSmall: { gap: '2px' },\n spacingMedium: { gap: '4px' },\n});\n\n/\n Apply styling to the SwatchPicker slots based on the state\n */\nexport const useSwatchPickerStyles_unstable = (state: SwatchPickerState): SwatchPickerState => {\n ~~'use no memo';\n\n~~ const styles = useStyles();\n const layoutStyle = state.isGrid ? styles.grid : styles.row;\n\n const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;\n state.root.className = mergeClasses(\n swatchPickerClassNames.root,\n styles.root,\n layoutStyle,\n spacingStyle,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","swatchPickerClassNames","root","useStyles","padding","spacingHorizontalNone","spacingVerticalNone","display","row","flexDirection","grid","spacingSmall","gap","spacingMedium","useSwatchPickerStyles_unstable","state","styles","layoutStyle","isGrid","spacingStyle","spacing","className"],"mappings":"AAAA;;;;;;;;;;;;IAMaG,sBAAAA;;;IAyBAa,8BAAAA;;;;uBA7B4B,iBAAiB;4BAGnC,wBAAwB;AACxC,+BAAkE;IACvEZ,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYL,iBAAAA,EAAW;IAC3BI,MAAM;QACJE,SAAS,GAAGJ,kBAAAA,CAAOK,qBAAqB,CAAC,CAAC,EAAEL,kBAAAA,CAAOM,mBAAmB,EAAE;QACxEC,SAAS;IACX;IACAC,KAAK;QACHC,eAAe;IACjB;IACAC,MAAM;QACJD,eAAe;IACjB;IACAE,cAAc;QAAEC,KAAK;IAAM;IAC3BC,eAAe;QAAED,KAAK;IAAM;AAC9B;AAKO,uCAAuC,CAACG;IAC7C~~;IAEA~~,MAAMC,SAASb;IACf,MAAMc,cAAcF,MAAMG,MAAM,GAAGF,OAAON,IAAI,GAAGM,OAAOR,GAAG;IAE3D,MAAMW,eAAeJ,MAAMK,OAAO,KAAK,UAAUJ,OAAOL,YAAY,GAAGK,OAAOH,aAAa;~~IAC3FE~~,MAAMb,IAAI,CAACmB,SAAS,OAAGtB,mBAAAA,EACrBE,uBAAuBC,IAAI,EAC3Bc,OAAOd,IAAI,EACXe,aACAE,cACAJ,MAAMb,IAAI,CAACmB,SAAS;IAGtB,OAAON;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/SwatchPicker/useSwatchPickerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwatchPickerSlots, SwatchPickerState } from './SwatchPicker.types';\nimport { tokens } from '@fluentui/react-theme';\nexport const swatchPickerClassNames: SlotClassNames<SwatchPickerSlots> = {\n root: 'fui-SwatchPicker',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n padding: `${tokens.spacingHorizontalNone} ${tokens.spacingVerticalNone}`,\n display: 'flex',\n },\n row: {\n flexDirection: 'row',\n },\n grid: {\n flexDirection: 'column',\n },\n spacingSmall: { gap: '2px' },\n spacingMedium: { gap: '4px' },\n});\n\n/\n Apply styling to the SwatchPicker slots based on the state\n */\nexport const useSwatchPickerStyles_unstable = (state: SwatchPickerState): SwatchPickerState => {\n const styles = useStyles();\n const layoutStyle = state.isGrid ? styles.grid : styles.row;\n\n const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n swatchPickerClassNames.root,\n styles.root,\n layoutStyle,\n spacingStyle,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","swatchPickerClassNames","root","useStyles","padding","spacingHorizontalNone","spacingVerticalNone","display","row","flexDirection","grid","spacingSmall","gap","spacingMedium","useSwatchPickerStyles_unstable","state","styles","layoutStyle","isGrid","spacingStyle","spacing","className"],"mappings":"AAAA;;;;;;;;;;;;IAMaG,sBAAAA;;;IAyBAa,8BAAAA;;;;uBA7B4B,iBAAiB;4BAGnC,wBAAwB;AACxC,+BAAkE;IACvEZ,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYL,iBAAAA,EAAW;IAC3BI,MAAM;QACJE,SAAS,GAAGJ,kBAAAA,CAAOK,qBAAqB,CAAC,CAAC,EAAEL,kBAAAA,CAAOM,mBAAmB,EAAE;QACxEC,SAAS;IACX;IACAC,KAAK;QACHC,eAAe;IACjB;IACAC,MAAM;QACJD,eAAe;IACjB;IACAE,cAAc;QAAEC,KAAK;IAAM;IAC3BC,eAAe;QAAED,KAAK;IAAM;AAC9B;AAKO,uCAAuC,CAACG;IAC7C,MAAMC,SAASb;IACf,MAAMc,cAAcF,MAAMG,MAAM,GAAGF,OAAON,IAAI,GAAGM,OAAOR,GAAG;IAE3D,MAAMW,eAAeJ,MAAMK,OAAO,KAAK,UAAUJ,OAAOL,YAAY,GAAGK,OAAOH,aAAa;IAC3F,oDAAoD;IACpDE,MAAMb,IAAI,CAACmB,SAAS,OAAGtB,mBAAAA,EACrBE,uBAAuBC,IAAI,EAC3Bc,OAAOd,IAAI,EACXe,aACAE,cACAJ,MAAMb,IAAI,CAACmB,SAAS;IAGtB,OAAON;AACT,EAAE"}

package/lib-commonjs/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.js CHANGED Viewed

@@ -40,10 +40,10 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
     ]
 });
 const useSwatchPickerRowStyles_unstable = (state)=>{
-    'use no memo';
     const resetStyles = useResetStyles();
     const styles = useStyles();
     const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(swatchPickerRowClassNames.root, resetStyles, spacingStyle, state.root.className);
     return state;
 };

package/lib-commonjs/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useSwatchPickerRowStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses, makeStyles } from '@griffel/react';\nexport const swatchPickerRowClassNames = {\n root: 'fui-SwatchPickerRow'\n};\n/*\n Styles for the root slot\n / const useResetStyles = makeResetStyles({\n display: 'flex',\n flexDirection: 'row'\n});\nconst useStyles = makeStyles({\n spacingSmall: {\n columnGap: '2px'\n },\n spacingMedium: {\n columnGap: '4px'\n }\n});\n/\n Apply styling to the SwatchPickerRow slots based on the state\n */ export const useSwatchPickerRowStyles_unstable = (state)=>{\n ~~'use no memo';\n~~ const resetStyles = useResetStyles();\n const styles = useStyles();\n const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;\n state.root.className = mergeClasses(swatchPickerRowClassNames.root, resetStyles, spacingStyle, state.root.className);\n return state;\n};\n"],"names":["__resetStyles","mergeClasses","__styles","swatchPickerRowClassNames","root","useResetStyles","useStyles","spacingSmall","i8kkvl","spacingMedium","d","useSwatchPickerRowStyles_unstable","state","resetStyles","styles","spacingStyle","spacing","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECG,yBAAyB;;;qCAmBY;;;;uBApBQ,gBAAgB;AACnE,kCAAkC;IACrCC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,cAAc,GAAA,WAAA,OAAGL,oBAAA,EAAA,YAAA,MAAA;IAAA;CAG1B,CAAC;AACF,MAAMM,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAK,YAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,aAAA,EAAA;QAAAD,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAE,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAOjB,CAAC;AAGS,MAAMC,qCAAqCC,KAAK,IAAG;IAC1D,~~aAAa;IACb,~~MAAMC,WAAW,GAAGR,cAAc,CAAC,CAAC;IACpC,MAAMS,MAAM,GAAGR,SAAS,CAAC,CAAC;IAC1B,MAAMS,YAAY,GAAGH,KAAK,CAACI,OAAO,KAAK,OAAO,GAAGF,MAAM,CAACP,YAAY,GAAGO,MAAM,CAACL,aAAa;~~IAC3FG~~,KAAK,CAACR,IAAI,CAACa,SAAS,OAAGhB,mBAAY,EAACE,yBAAyB,CAACC,IAAI,EAAES,WAAW,EAAEE,YAAY,EAAEH,KAAK,CAACR,IAAI,CAACa,SAAS,CAAC;IACpH,OAAOL,KAAK;AAChB,CAAC"}
1	+ {"version":3,"sources":["useSwatchPickerRowStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses, makeStyles } from '@griffel/react';\nexport const swatchPickerRowClassNames = {\n root: 'fui-SwatchPickerRow'\n};\n/*\n Styles for the root slot\n / const useResetStyles = makeResetStyles({\n display: 'flex',\n flexDirection: 'row'\n});\nconst useStyles = makeStyles({\n spacingSmall: {\n columnGap: '2px'\n },\n spacingMedium: {\n columnGap: '4px'\n }\n});\n/\n Apply styling to the SwatchPickerRow slots based on the state\n */ export const useSwatchPickerRowStyles_unstable = (state)=>{\n const resetStyles = useResetStyles();\n const styles = useStyles();\n const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(swatchPickerRowClassNames.root, resetStyles, spacingStyle, state.root.className);\n return state;\n};\n"],"names":["__resetStyles","mergeClasses","__styles","swatchPickerRowClassNames","root","useResetStyles","useStyles","spacingSmall","i8kkvl","spacingMedium","d","useSwatchPickerRowStyles_unstable","state","resetStyles","styles","spacingStyle","spacing","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECG,yBAAyB;;;qCAmBY;;;;uBApBQ,gBAAgB;AACnE,kCAAkC;IACrCC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,cAAc,GAAA,WAAA,OAAGL,oBAAA,EAAA,YAAA,MAAA;IAAA;CAG1B,CAAC;AACF,MAAMM,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAK,YAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,aAAA,EAAA;QAAAD,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAE,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAOjB,CAAC;AAGS,MAAMC,qCAAqCC,KAAK,IAAG;IAC1D,MAAMC,WAAW,GAAGR,cAAc,CAAC,CAAC;IACpC,MAAMS,MAAM,GAAGR,SAAS,CAAC,CAAC;IAC1B,MAAMS,YAAY,GAAGH,KAAK,CAACI,OAAO,KAAK,OAAO,GAAGF,MAAM,CAACP,YAAY,GAAGO,MAAM,CAACL,aAAa;IAC3F,oDAAA;IACAG,KAAK,CAACR,IAAI,CAACa,SAAS,OAAGhB,mBAAY,EAACE,yBAAyB,CAACC,IAAI,EAAES,WAAW,EAAEE,YAAY,EAAEH,KAAK,CAACR,IAAI,CAACa,SAAS,CAAC;IACpH,OAAOL,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.raw.js CHANGED Viewed

@@ -36,10 +36,10 @@ const useStyles = (0, _react.makeStyles)({
     }
 });
 const useSwatchPickerRowStyles_unstable = (state)=>{
-    'use no memo';
     const resetStyles = useResetStyles();
     const styles = useStyles();
     const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(swatchPickerRowClassNames.root, resetStyles, spacingStyle, state.root.className);
     return state;
 };

package/lib-commonjs/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses, makeStyles } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwatchPickerRowSlots, SwatchPickerRowState } from './SwatchPickerRow.types';\n\nexport const swatchPickerRowClassNames: SlotClassNames<SwatchPickerRowSlots> = {\n root: 'fui-SwatchPickerRow',\n};\n\n/*\n Styles for the root slot\n /\nconst useResetStyles = makeResetStyles({\n display: 'flex',\n flexDirection: 'row',\n});\n\nconst useStyles = makeStyles({\n spacingSmall: {\n columnGap: '2px',\n },\n spacingMedium: {\n columnGap: '4px',\n },\n});\n\n/\n Apply styling to the SwatchPickerRow slots based on the state\n */\nexport const useSwatchPickerRowStyles_unstable = (state: SwatchPickerRowState): SwatchPickerRowState => {\n ~~'use no memo';\n\n~~ const resetStyles = useResetStyles();\n const styles = useStyles();\n const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;\n\n state.root.className = mergeClasses(swatchPickerRowClassNames.root, resetStyles, spacingStyle, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","makeStyles","swatchPickerRowClassNames","root","useResetStyles","display","flexDirection","useStyles","spacingSmall","columnGap","spacingMedium","useSwatchPickerRowStyles_unstable","state","resetStyles","styles","spacingStyle","spacing","className"],"mappings":"AAAA;;;;;;;;;;;;IAMaG,yBAAAA;;;qCAwBAS;;;;uBA5B6C,iBAAiB;AAIpE,kCAAwE;IAC7ER,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,qBAAiBL,sBAAAA,EAAgB;IACrCM,SAAS;IACTC,eAAe;AACjB;AAEA,MAAMC,gBAAYN,iBAAAA,EAAW;IAC3BO,cAAc;QACZC,WAAW;IACb;IACAC,eAAe;QACbD,WAAW;IACb;AACF;AAKO,MAAME,oCAAoC,CAACC;IAChD~~;IAEA~~,MAAMC,cAAcT;IACpB,MAAMU,SAASP;IACf,MAAMQ,eAAeH,MAAMI,OAAO,KAAK,UAAUF,OAAON,YAAY,GAAGM,OAAOJ,aAAa;~~IAE3FE~~,MAAMT,IAAI,CAACc,SAAS,OAAGjB,mBAAAA,EAAaE,0BAA0BC,IAAI,EAAEU,aAAaE,cAAcH,MAAMT,IAAI,CAACc,SAAS;IAEnH,OAAOL;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses, makeStyles } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwatchPickerRowSlots, SwatchPickerRowState } from './SwatchPickerRow.types';\n\nexport const swatchPickerRowClassNames: SlotClassNames<SwatchPickerRowSlots> = {\n root: 'fui-SwatchPickerRow',\n};\n\n/*\n Styles for the root slot\n /\nconst useResetStyles = makeResetStyles({\n display: 'flex',\n flexDirection: 'row',\n});\n\nconst useStyles = makeStyles({\n spacingSmall: {\n columnGap: '2px',\n },\n spacingMedium: {\n columnGap: '4px',\n },\n});\n\n/\n Apply styling to the SwatchPickerRow slots based on the state\n */\nexport const useSwatchPickerRowStyles_unstable = (state: SwatchPickerRowState): SwatchPickerRowState => {\n const resetStyles = useResetStyles();\n const styles = useStyles();\n const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(swatchPickerRowClassNames.root, resetStyles, spacingStyle, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","makeStyles","swatchPickerRowClassNames","root","useResetStyles","display","flexDirection","useStyles","spacingSmall","columnGap","spacingMedium","useSwatchPickerRowStyles_unstable","state","resetStyles","styles","spacingStyle","spacing","className"],"mappings":"AAAA;;;;;;;;;;;;IAMaG,yBAAAA;;;qCAwBAS;;;;uBA5B6C,iBAAiB;AAIpE,kCAAwE;IAC7ER,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,qBAAiBL,sBAAAA,EAAgB;IACrCM,SAAS;IACTC,eAAe;AACjB;AAEA,MAAMC,gBAAYN,iBAAAA,EAAW;IAC3BO,cAAc;QACZC,WAAW;IACb;IACAC,eAAe;QACbD,WAAW;IACb;AACF;AAKO,MAAME,oCAAoC,CAACC;IAChD,MAAMC,cAAcT;IACpB,MAAMU,SAASP;IACf,MAAMQ,eAAeH,MAAMI,OAAO,KAAK,UAAUF,OAAON,YAAY,GAAGM,OAAOJ,aAAa;IAE3F,oDAAoD;IACpDE,MAAMT,IAAI,CAACc,SAAS,OAAGjB,mBAAAA,EAAaE,0BAA0BC,IAAI,EAAEU,aAAaE,cAAcH,MAAMT,IAAI,CAACc,SAAS;IAEnH,OAAOL;AACT,EAAE"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-swatch-picker",
-  "version": "9.5.2",
+  "version": "9.5.4",
   "description": "New fluentui react package",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,14 +12,14 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui/react-context-selector": "^9.2.16",
-    "@fluentui/react-field": "^9.5.1",
+    "@fluentui/react-context-selector": "^9.2.18",
+    "@fluentui/react-field": "^9.5.3",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "^9.4.2",
+    "@fluentui/react-jsx-runtime": "^9.4.4",
     "@fluentui/react-shared-contexts": "^9.26.2",
-    "@fluentui/react-tabster": "^9.26.14",
+    "@fluentui/react-tabster": "^9.26.16",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-utilities": "^9.26.3",
+    "@fluentui/react-utilities": "^9.26.5",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },