@fluentui/react-swatch-picker 9.5.4 → 9.6.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,52 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useEmptySwatchBase_unstable: function() {
+        return useEmptySwatchBase_unstable;
+    },
+    useEmptySwatch_unstable: function() {
+        return useEmptySwatch_unstable;
+    }
+});
+const _reactutilities = require("@fluentui/react-utilities");
+const _swatchPicker = require("../../contexts/swatchPicker.cjs");
+const useEmptySwatchBase_unstable = (props, ref)=>{
+    const isGrid = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.isGrid);
+    const role = isGrid ? 'gridcell' : 'radio';
+    const a11yProps = isGrid ? {} : {
+        'aria-checked': false
+    };
+    return {
+        components: {
+            root: 'button'
+        },
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('button', {
+            ref,
+            role,
+            ...a11yProps,
+            ...props
+        }), {
+            elementType: 'button'
+        })
+    };
+};
+const useEmptySwatch_unstable = (props, ref)=>{
+    const sizeFromContext = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.size);
+    const shapeFromContext = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.shape);
+    const { size = sizeFromContext, shape = shapeFromContext, ...rest } = props;
+    const baseState = useEmptySwatchBase_unstable(rest, ref);
+    return {
+        ...baseState,
+        size,
+        shape
+    };
+};

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -18,6 +18,9 @@ _export(exports, {
     renderImageSwatch_unstable: function() {
         return _renderImageSwatch.renderImageSwatch_unstable;
     },
+    useImageSwatchBase_unstable: function() {
+        return _useImageSwatch.useImageSwatchBase_unstable;
+    },
     useImageSwatchStyles_unstable: function() {
         return _useImageSwatchStylesstyles.useImageSwatchStyles_unstable;
     },
@@ -25,7 +28,7 @@ _export(exports, {
         return _useImageSwatch.useImageSwatch_unstable;
     }
 });
-const _ImageSwatch = require("./ImageSwatch");
-const _renderImageSwatch = require("./renderImageSwatch");
-const _useImageSwatch = require("./useImageSwatch");
-const _useImageSwatchStylesstyles = require("./useImageSwatchStyles.styles");
+const _ImageSwatch = require("./ImageSwatch.cjs");
+const _renderImageSwatch = require("./renderImageSwatch.cjs");
+const _useImageSwatch = require("./useImageSwatch.cjs");
+const _useImageSwatchStylesstyles = require("./useImageSwatchStyles.styles.cjs");

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ImageSwatch/index.ts"],"sourcesContent":["export { ImageSwatch } from './ImageSwatch';\nexport type {\n  ImageSwatchBaseProps,\n  ImageSwatchBaseState,\n  ImageSwatchProps,\n  ImageSwatchSlots,\n  ImageSwatchState,\n} from './ImageSwatch.types';\nexport { renderImageSwatch_unstable } from './renderImageSwatch';\nexport { useImageSwatch_unstable, useImageSwatchBase_unstable } from './useImageSwatch';\nexport { imageSwatchClassNames, useImageSwatchStyles_unstable } from './useImageSwatchStyles.styles';\n"],"names":["ImageSwatch","renderImageSwatch_unstable","useImageSwatch_unstable","useImageSwatchBase_unstable","imageSwatchClassNames","useImageSwatchStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eAUXI,iDAAqB;;;eAFrBH,6CAA0B;;;eACDE,2CAA2B;;;eAC7BE,yDAA6B;;;eADpDH,uCAAuB;;;6BATJ,mBAAgB;mCAQD,yBAAsB;gCACI,sBAAmB;4CACnB,mCAAgC"}

package/lib-commonjs/components/ImageSwatch/renderImageSwatch.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ImageSwatch/renderImageSwatch.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ImageSwatchBaseState, ImageSwatchSlots } from './ImageSwatch.types';\n\n/**\n * Render the final JSX of ImageSwatch\n */\nexport const renderImageSwatch_unstable = (state: ImageSwatchBaseState): JSXElement => {\n  assertSlots<ImageSwatchSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderImageSwatch_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;AAOjD,MAAMC,6BAA6B,CAACC;QACzCF,2BAAAA,EAA8BE;IAE9B,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}

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

@@ -3,18 +3,24 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useImageSwatch_unstable", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useImageSwatchBase_unstable: function() {
+        return useImageSwatchBase_unstable;
+    },
+    useImageSwatch_unstable: function() {
         return useImageSwatch_unstable;
     }
 });
 const _reactutilities = require("@fluentui/react-utilities");
-const _swatchPicker = require("../../contexts/swatchPicker");
-const useImageSwatch_unstable = (props, ref)=>{
+const _swatchPicker = require("../../contexts/swatchPicker.cjs");
+const useImageSwatchBase_unstable = (props, ref)=>{
     const { src, value, onClick, style, ...rest } = props;
-    const size = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.size);
-    const shape = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.shape);
     const isGrid = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.isGrid);
     const requestSelectionChange = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.requestSelectionChange);
     const selected = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.selectedValue === value);
@@ -46,8 +52,17 @@ const useImageSwatch_unstable = (props, ref)=>{
             elementType: 'button'
         }),
         value,
-        selected,
-        size,
-        shape
+        selected
+    };
+};
+const useImageSwatch_unstable = (props, ref)=>{
+    const sizeFromContext = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.size);
+    const shapeFromContext = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.shape);
+    const { size: _size, shape: _shape, ...rest } = props;
+    const baseState = useImageSwatchBase_unstable(rest, ref);
+    return {
+        ...baseState,
+        size: sizeFromContext,
+        shape: shapeFromContext
     };
 };

package/lib-commonjs/components/ImageSwatch/useImageSwatch.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ImageSwatch/useImageSwatch.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback, mergeCallbacks } from '@fluentui/react-utilities';\nimport type {\n  ImageSwatchBaseProps,\n  ImageSwatchBaseState,\n  ImageSwatchProps,\n  ImageSwatchState,\n} from './ImageSwatch.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\n\n/**\n * Create the base state required to render unstyled ImageSwatch.\n *\n * The returned state can be modified with hooks before being passed to renderImageSwatch_unstable.\n *\n * @param props - props from this instance of ImageSwatch\n * @param ref - reference to root HTMLDivElement of ImageSwatch\n */\nexport const useImageSwatchBase_unstable = (\n  props: ImageSwatchBaseProps,\n  ref: React.Ref<HTMLButtonElement>,\n): ImageSwatchBaseState => {\n  const { src, value, onClick, style, ...rest } = props;\n  const isGrid = useSwatchPickerContextValue_unstable(ctx => ctx.isGrid);\n\n  const requestSelectionChange = useSwatchPickerContextValue_unstable(ctx => ctx.requestSelectionChange);\n  const selected = useSwatchPickerContextValue_unstable(ctx => ctx.selectedValue === value);\n\n  const role = isGrid ? 'gridcell' : 'radio';\n  const ariaSelected = isGrid\n    ? {\n        'aria-selected': selected,\n      }\n    : { 'aria-checked': selected };\n\n  const onImageSwatchClick = useEventCallback(\n    mergeCallbacks(onClick, (event: React.MouseEvent<HTMLButtonElement>) =>\n      requestSelectionChange(event, {\n        selectedValue: value,\n        selectedSwatch: src,\n      }),\n    ),\n  );\n\n  return {\n    components: {\n      root: 'button',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        role,\n        ...ariaSelected,\n        onClick: onImageSwatchClick,\n        ...rest,\n        style: {\n          backgroundImage: `url(${src})`,\n          ...style,\n        },\n      }),\n      { elementType: 'button' },\n    ),\n    value,\n    selected,\n  };\n};\n\n/**\n * Create the state required to render ImageSwatch.\n *\n * The returned state can be modified with hooks such as useImageSwatchStyles_unstable,\n * before being passed to renderImageSwatch_unstable.\n *\n * @param props - props from this instance of ImageSwatch\n * @param ref - reference to root HTMLDivElement of ImageSwatch\n */\nexport const useImageSwatch_unstable = (\n  props: ImageSwatchProps,\n  ref: React.Ref<HTMLButtonElement>,\n): ImageSwatchState => {\n  const sizeFromContext = useSwatchPickerContextValue_unstable(ctx => ctx.size);\n  const shapeFromContext = useSwatchPickerContextValue_unstable(ctx => ctx.shape);\n\n  const { size: _size, shape: _shape, ...rest } = props;\n\n  const baseState = useImageSwatchBase_unstable(rest, ref);\n\n  return {\n    ...baseState,\n    size: sizeFromContext,\n    shape: shapeFromContext,\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","useEventCallback","mergeCallbacks","useSwatchPickerContextValue_unstable","useImageSwatchBase_unstable","props","ref","src","value","onClick","style","rest","isGrid","ctx","requestSelectionChange","selected","selectedValue","role","ariaSelected","onImageSwatchClick","event","selectedSwatch","components","root","always","backgroundImage","elementType","useImageSwatch_unstable","sizeFromContext","size","shapeFromContext","shape","_size","_shape","baseState"],"mappings":"AAAA;;;;;;;;;;;;IAoBaK,2BAAAA;;;IA0DAuB,uBAAAA;;;;gCA3EoE,4BAA4B;8BAOxD,iCAA8B;AAU5E,oCAAoC,CACzCtB,OACAC;IAEA,MAAM,EAAEC,GAAG,EAAEC,KAAK,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGN;IAChD,MAAMO,aAAST,kDAAAA,EAAqCU,CAAAA,MAAOA,IAAID,MAAM;IAErE,MAAME,6BAAyBX,kDAAAA,EAAqCU,CAAAA,MAAOA,IAAIC,sBAAsB;IACrG,MAAMC,eAAWZ,kDAAAA,EAAqCU,CAAAA,MAAOA,IAAIG,aAAa,KAAKR;IAEnF,MAAMS,OAAOL,SAAS,aAAa;IACnC,MAAMM,eAAeN,SACjB;QACE,iBAAiBG;IACnB,IACA;QAAE,gBAAgBA;IAAS;IAE/B,MAAMI,yBAAqBlB,gCAAAA,MACzBC,8BAAAA,EAAeO,SAAS,CAACW,QACvBN,uBAAuBM,OAAO;YAC5BJ,eAAeR;YACfa,gBAAgBd;QAClB;IAIJ,OAAO;QACLe,YAAY;YACVC,MAAM;QACR;QACAA,MAAMvB,oBAAAA,CAAKwB,MAAM,KACfzB,wCAAAA,EAAyB,UAAU;YACjCO;YACAW;YACA,GAAGC,YAAY;YACfT,SAASU;YACT,GAAGR,IAAI;YACPD,OAAO;gBACLe,iBAAiB,CAAC,IAAI,EAAElB,IAAI,CAAC,CAAC;gBAC9B,GAAGG,KAAK;YACV;QACF,IACA;YAAEgB,aAAa;QAAS;QAE1BlB;QACAO;IACF;AACF,EAAE;AAWK,gCAAgC,CACrCV,OACAC;IAEA,MAAMsB,sBAAkBzB,kDAAAA,EAAqCU,CAAAA,MAAOA,IAAIgB,IAAI;IAC5E,MAAMC,uBAAmB3B,kDAAAA,EAAqCU,CAAAA,MAAOA,IAAIkB,KAAK;IAE9E,MAAM,EAAEF,MAAMG,KAAK,EAAED,OAAOE,MAAM,EAAE,GAAGtB,MAAM,GAAGN;IAEhD,MAAM6B,YAAY9B,4BAA4BO,MAAML;IAEpD,OAAO;QACL,GAAG4B,SAAS;QACZL,MAAMD;QACNG,OAAOD;IACT;AACF,EAAE"}

package/lib-commonjs/components/ImageSwatch/useImageSwatchStyles.styles.cjs.map

@@ -0,0 +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/SwatchPicker/{SwatchPicker.js → SwatchPicker.cjs}

@@ -11,10 +11,10 @@ Object.defineProperty(exports, "SwatchPicker", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _useSwatchPicker = require("./useSwatchPicker");
-const _renderSwatchPicker = require("./renderSwatchPicker");
-const _useSwatchPickerStylesstyles = require("./useSwatchPickerStyles.styles");
-const _useSwatchPickerContextValues = require("./useSwatchPickerContextValues");
+const _useSwatchPicker = require("./useSwatchPicker.cjs");
+const _renderSwatchPicker = require("./renderSwatchPicker.cjs");
+const _useSwatchPickerStylesstyles = require("./useSwatchPickerStyles.styles.cjs");
+const _useSwatchPickerContextValues = require("./useSwatchPickerContextValues.cjs");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const SwatchPicker = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useSwatchPicker.useSwatchPicker_unstable)(props, ref);

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SwatchPicker/SwatchPicker.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useSwatchPicker_unstable } from './useSwatchPicker';\nimport { renderSwatchPicker_unstable } from './renderSwatchPicker';\nimport { useSwatchPickerStyles_unstable } from './useSwatchPickerStyles.styles';\nimport type { SwatchPickerProps } from './SwatchPicker.types';\nimport { useSwatchPickerContextValues } from './useSwatchPickerContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * SwatchPicker component - TODO: add more docs\n */\nexport const SwatchPicker: ForwardRefComponent<SwatchPickerProps> = React.forwardRef((props, ref) => {\n  const state = useSwatchPicker_unstable(props, ref);\n  const contextValues = useSwatchPickerContextValues(state);\n\n  useSwatchPickerStyles_unstable(state);\n  useCustomStyleHook_unstable('useSwatchPickerStyles_unstable')(state);\n\n  return renderSwatchPicker_unstable(state, contextValues);\n});\n\nSwatchPicker.displayName = 'SwatchPicker';\n"],"names":["React","useSwatchPicker_unstable","renderSwatchPicker_unstable","useSwatchPickerStyles_unstable","useSwatchPickerContextValues","useCustomStyleHook_unstable","SwatchPicker","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;iCAEU,oBAAoB;oCACjB,uBAAuB;6CACpB,iCAAiC;8CAEnC,iCAAiC;qCAClC,kCAAkC;AAKvE,MAAMM,eAAAA,WAAAA,GAAuDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,YAAQT,yCAAAA,EAAyBO,OAAOC;IAC9C,MAAME,oBAAgBP,0DAAAA,EAA6BM;QAEnDP,2DAAAA,EAA+BO;QAC/BL,gDAAAA,EAA4B,kCAAkCK;IAE9D,WAAOR,+CAAAA,EAA4BQ,OAAOC;AAC5C,GAAG;AAEHL,aAAaM,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/SwatchPicker/SwatchPicker.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useSwatchPicker_unstable } from './useSwatchPicker';\nimport { renderSwatchPicker_unstable } from './renderSwatchPicker';\nimport { useSwatchPickerStyles_unstable } from './useSwatchPickerStyles.styles';\nimport type { SwatchPickerProps } from './SwatchPicker.types';\nimport { useSwatchPickerContextValues } from './useSwatchPickerContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * SwatchPicker component - TODO: add more docs\n */\nexport const SwatchPicker: ForwardRefComponent<SwatchPickerProps> = React.forwardRef((props, ref) => {\n  const state = useSwatchPicker_unstable(props, ref);\n  const contextValues = useSwatchPickerContextValues(state);\n\n  useSwatchPickerStyles_unstable(state);\n  useCustomStyleHook_unstable('useSwatchPickerStyles_unstable')(state);\n\n  return renderSwatchPicker_unstable(state, contextValues);\n});\n\nSwatchPicker.displayName = 'SwatchPicker';\n"],"names":["React","useSwatchPicker_unstable","renderSwatchPicker_unstable","useSwatchPickerStyles_unstable","useSwatchPickerContextValues","useCustomStyleHook_unstable","SwatchPicker","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;iCAEU,uBAAoB;oCACjB,0BAAuB;6CACpB,oCAAiC;8CAEnC,oCAAiC;qCAClC,kCAAkC;AAKvE,MAAMM,eAAAA,WAAAA,GAAuDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,YAAQT,yCAAAA,EAAyBO,OAAOC;IAC9C,MAAME,oBAAgBP,0DAAAA,EAA6BM;QAEnDP,2DAAAA,EAA+BO;QAC/BL,gDAAAA,EAA4B,kCAAkCK;IAE9D,WAAOR,+CAAAA,EAA4BQ,OAAOC;AAC5C,GAAG;AAEHL,aAAaM,WAAW,GAAG"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SwatchPicker/SwatchPicker.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot, EventHandler, EventData } from '@fluentui/react-utilities';\nimport type { SwatchPickerContextValue } from '../../contexts/swatchPicker';\n\nexport type SwatchPickerSlots = {\n  root: Slot<'div'>;\n};\n\nexport type SwatchPickerOnSelectEventHandler = EventHandler<SwatchPickerOnSelectionChangeData>;\n\nexport type SwatchPickerOnSelectionChangeData = EventData<'click', React.MouseEvent<HTMLButtonElement>> & {\n  selectedValue: string;\n  selectedSwatch: string;\n};\n\n/**\n * SwatchPicker Props\n */\nexport type SwatchPickerProps = ComponentProps<SwatchPickerSlots> & {\n  /**\n   * Default selected value\n   */\n  defaultSelectedValue?: string;\n\n  /**\n   * Sets the focus behavior for the SwatchPicker.\n   *\n   * `arrow`\n   * This behavior will cycle through all elements inside of the SwatchPicker when pressing the Arrow key.\n   *\n   * `tab`\n   * This behavior will cycle through all elements inside of the SwatchPicker when pressing the Tab key.\n   *\n   * @default 'arrow'\n   */\n  focusMode?: 'arrow' | 'tab';\n\n  /**\n   * Whether SwatchPicker is row or grid\n   */\n  layout?: 'row' | 'grid';\n\n  /**\n   * Triggers a callback when the value has been changed\n   */\n  onSelectionChange?: EventHandler<SwatchPickerOnSelectionChangeData>;\n\n  /**\n   * Controlled selected value\n   */\n  selectedValue?: string;\n\n  /**\n   * Swatch size\n   * @defaultvalue 'medium'\n   */\n  size?: 'extra-small' | 'small' | 'medium' | 'large';\n\n  /**\n   * Swatch shape\n   * @defaultvalue 'square'\n   */\n  shape?: 'rounded' | 'square' | 'circular';\n\n  /**\n   * Spacing between swatches\n   * @defaultvalue 'medium'\n   */\n  spacing?: 'small' | 'medium';\n};\n\n/**\n * State used in rendering SwatchPicker\n */\nexport type SwatchPickerState = ComponentState<SwatchPickerSlots> &\n  SwatchPickerContextValue &\n  Pick<SwatchPickerProps, 'layout' | 'size' | 'shape' | 'spacing'> & {\n    isGrid: boolean;\n  };\n"],"names":[],"mappings":"AAuEA;;CAEC,GACD,WAII"}
+{"version":3,"sources":["../src/components/SwatchPicker/SwatchPicker.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot, EventHandler, EventData } from '@fluentui/react-utilities';\nimport type { SwatchPickerContextValue } from '../../contexts/swatchPicker';\n\nexport type SwatchPickerSlots = {\n  root: Slot<'div'>;\n};\n\nexport type SwatchPickerOnSelectEventHandler = EventHandler<SwatchPickerOnSelectionChangeData>;\n\nexport type SwatchPickerOnSelectionChangeData = EventData<'click', React.MouseEvent<HTMLButtonElement>> & {\n  selectedValue: string;\n  selectedSwatch: string;\n};\n\n/**\n * SwatchPicker Props\n */\nexport type SwatchPickerProps = ComponentProps<SwatchPickerSlots> & {\n  /**\n   * Default selected value\n   */\n  defaultSelectedValue?: string;\n\n  /**\n   * Sets the focus behavior for the SwatchPicker.\n   *\n   * `arrow`\n   * This behavior will cycle through all elements inside of the SwatchPicker when pressing the Arrow key.\n   *\n   * `tab`\n   * This behavior will cycle through all elements inside of the SwatchPicker when pressing the Tab key.\n   *\n   * @default 'arrow'\n   */\n  focusMode?: 'arrow' | 'tab';\n\n  /**\n   * Whether SwatchPicker is row or grid\n   */\n  layout?: 'row' | 'grid';\n\n  /**\n   * Triggers a callback when the value has been changed\n   */\n  onSelectionChange?: EventHandler<SwatchPickerOnSelectionChangeData>;\n\n  /**\n   * Controlled selected value\n   */\n  selectedValue?: string;\n\n  /**\n   * Swatch size\n   * @defaultvalue 'medium'\n   */\n  size?: 'extra-small' | 'small' | 'medium' | 'large';\n\n  /**\n   * Swatch shape\n   * @defaultvalue 'square'\n   */\n  shape?: 'rounded' | 'square' | 'circular';\n\n  /**\n   * Spacing between swatches\n   * @defaultvalue 'medium'\n   */\n  spacing?: 'small' | 'medium';\n};\n\nexport type SwatchPickerBaseProps = Omit<SwatchPickerProps, 'size' | 'shape' | 'spacing'>;\n\n/**\n * State used in rendering SwatchPicker\n */\nexport type SwatchPickerState = ComponentState<SwatchPickerSlots> &\n  SwatchPickerContextValue &\n  Pick<SwatchPickerProps, 'layout' | 'size' | 'shape' | 'spacing'> & {\n    isGrid: boolean;\n  };\n\nexport type SwatchPickerBaseState = Omit<SwatchPickerState, 'size' | 'shape' | 'spacing'>;\n"],"names":[],"mappings":""}

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

@@ -18,6 +18,9 @@ _export(exports, {
     swatchPickerClassNames: function() {
         return _useSwatchPickerStylesstyles.swatchPickerClassNames;
     },
+    useSwatchPickerBase_unstable: function() {
+        return _useSwatchPicker.useSwatchPickerBase_unstable;
+    },
     useSwatchPickerStyles_unstable: function() {
         return _useSwatchPickerStylesstyles.useSwatchPickerStyles_unstable;
     },
@@ -25,7 +28,7 @@ _export(exports, {
         return _useSwatchPicker.useSwatchPicker_unstable;
     }
 });
-const _SwatchPicker = require("./SwatchPicker");
-const _renderSwatchPicker = require("./renderSwatchPicker");
-const _useSwatchPicker = require("./useSwatchPicker");
-const _useSwatchPickerStylesstyles = require("./useSwatchPickerStyles.styles");
+const _SwatchPicker = require("./SwatchPicker.cjs");
+const _renderSwatchPicker = require("./renderSwatchPicker.cjs");
+const _useSwatchPicker = require("./useSwatchPicker.cjs");
+const _useSwatchPickerStylesstyles = require("./useSwatchPickerStyles.styles.cjs");

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SwatchPicker/index.ts"],"sourcesContent":["export { SwatchPicker } from './SwatchPicker';\nexport type {\n  SwatchPickerBaseProps,\n  SwatchPickerBaseState,\n  SwatchPickerOnSelectEventHandler,\n  SwatchPickerOnSelectionChangeData,\n  SwatchPickerProps,\n  SwatchPickerSlots,\n  SwatchPickerState,\n} from './SwatchPicker.types';\nexport { renderSwatchPicker_unstable } from './renderSwatchPicker';\nexport { useSwatchPicker_unstable, useSwatchPickerBase_unstable } from './useSwatchPicker';\nexport { swatchPickerClassNames, useSwatchPickerStyles_unstable } from './useSwatchPickerStyles.styles';\n"],"names":["SwatchPicker","renderSwatchPicker_unstable","useSwatchPicker_unstable","useSwatchPickerBase_unstable","swatchPickerClassNames","useSwatchPickerStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,0BAAY;;;eAUZC,+CAA2B;;;eAE3BG,mDAAsB;;;eADID,6CAA4B;;;eAC9BE,2DAA8B;;;eADtDH,yCAAwB;;;8BAXJ,oBAAiB;oCAUF,0BAAuB;iCACI,uBAAoB;6CACpB,oCAAiC"}

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

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "renderSwatchPicker_unstable", {
 });
 const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
 const _reactutilities = require("@fluentui/react-utilities");
-const _swatchPicker = require("../../contexts/swatchPicker");
+const _swatchPicker = require("../../contexts/swatchPicker.cjs");
 const renderSwatchPicker_unstable = (state, contextValues)=>{
     (0, _reactutilities.assertSlots)(state);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_swatchPicker.SwatchPickerProvider, {

package/lib-commonjs/components/SwatchPicker/renderSwatchPicker.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SwatchPicker/renderSwatchPicker.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { SwatchPickerProvider } from '../../contexts/swatchPicker';\nimport type { SwatchPickerContextValues } from '../../contexts/swatchPicker';\nimport type { SwatchPickerBaseState, SwatchPickerSlots } from './SwatchPicker.types';\n\n/**\n * Render the final JSX of SwatchPicker\n */\nexport const renderSwatchPicker_unstable = (\n  state: SwatchPickerBaseState,\n  contextValues: SwatchPickerContextValues,\n): JSXElement => {\n  assertSlots<SwatchPickerSlots>(state);\n\n  return (\n    <SwatchPickerProvider value={contextValues.swatchPicker}>\n      <state.root>{state.root.children}</state.root>\n    </SwatchPickerProvider>\n  );\n};\n"],"names":["assertSlots","SwatchPickerProvider","renderSwatchPicker_unstable","state","contextValues","value","swatchPicker","root","children"],"mappings":";;;;+BAYaE;;;;;;4BAXb,gDAAiD;gCAErB,4BAA4B;8BAEnB,iCAA8B;AAO5D,oCAAoC,CACzCC,OACAC;QAEAJ,2BAAAA,EAA+BG;IAE/B,OAAA,WAAA,OACE,eAAA,EAACF,kCAAAA,EAAAA;QAAqBI,OAAOD,cAAcE,YAAY;kBACrD,WAAA,OAAA,eAAA,EAACH,MAAMI,IAAI,EAAA;sBAAEJ,MAAMI,IAAI,CAACC,QAAQ;;;AAGtC,EAAE"}

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

@@ -3,25 +3,28 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useSwatchPicker_unstable", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useSwatchPickerBase_unstable: function() {
+        return useSwatchPickerBase_unstable;
+    },
+    useSwatchPicker_unstable: function() {
         return useSwatchPicker_unstable;
     }
 });
 const _reactfield = require("@fluentui/react-field");
 const _reacttabster = require("@fluentui/react-tabster");
 const _reactutilities = require("@fluentui/react-utilities");
-const useSwatchPicker_unstable = (props, ref)=>{
+const useSwatchPickerBase_unstable = (props, ref)=>{
     // Merge props from surrounding <Field>, if any
     props = (0, _reactfield.useFieldControlProps_unstable)(props);
-    const { focusMode = 'arrow', layout, onSelectionChange, size = 'medium', shape, spacing = 'medium', style, ...rest } = props;
+    const { layout, onSelectionChange, style, ...rest } = props;
     const isGrid = layout === 'grid';
-    const focusAttributes = (0, _reacttabster.useArrowNavigationGroup)({
-        circular: true,
-        axis: isGrid ? 'grid-linear' : 'both',
-        memorizeCurrent: true
-    });
     const role = isGrid ? 'grid' : 'radiogroup';
     const [selectedValue, setSelectedValue] = (0, _reactutilities.useControllableState)({
         state: props.selectedValue,
@@ -44,14 +47,29 @@ const useSwatchPicker_unstable = (props, ref)=>{
         root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
             ref,
             role,
-            ...focusMode === 'arrow' ? focusAttributes : {},
             ...rest
         }), {
             elementType: 'div'
         }),
         isGrid,
         requestSelectionChange,
-        selectedValue,
+        selectedValue
+    };
+};
+const useSwatchPicker_unstable = (props, ref)=>{
+    const { focusMode = 'arrow', size = 'medium', shape, spacing = 'medium', ...rest } = props;
+    const baseState = useSwatchPickerBase_unstable(rest, ref);
+    const focusAttributes = (0, _reacttabster.useArrowNavigationGroup)({
+        circular: true,
+        axis: baseState.isGrid ? 'grid-linear' : 'both',
+        memorizeCurrent: true
+    });
+    return {
+        ...baseState,
+        root: {
+            ...baseState.root,
+            ...focusMode === 'arrow' ? focusAttributes : {}
+        },
         size,
         shape,
         spacing