@fluentui/react-swatch-picker 9.4.4 → 9.4.6

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ImageSwatch/useImageSwatchStyles.styles.ts"],"sourcesContent":["import { 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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"}
+{"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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"}

package/lib/components/SwatchPicker/SwatchPicker.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useSwatchPicker_unstable } from './useSwatchPicker';
 import { renderSwatchPicker_unstable } from './renderSwatchPicker';

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

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

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

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

package/lib/components/SwatchPicker/useSwatchPicker.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useFieldControlProps_unstable } from '@fluentui/react-field';
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';

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

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

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { __styles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 export const swatchPickerClassNames = {

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

@@ -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":["import { 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,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":[]}
+{"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":[]}

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

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 export const swatchPickerClassNames = {

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SwatchPicker/useSwatchPickerStyles.styles.ts"],"sourcesContent":["import { 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,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"}
+{"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"}

package/lib/components/SwatchPickerRow/SwatchPickerRow.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useSwatchPickerRow_unstable } from './useSwatchPickerRow';
 import { renderSwatchPickerRow_unstable } from './renderSwatchPickerRow';

package/lib/components/SwatchPickerRow/SwatchPickerRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SwatchPickerRow/SwatchPickerRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useSwatchPickerRow_unstable } from './useSwatchPickerRow';\nimport { renderSwatchPickerRow_unstable } from './renderSwatchPickerRow';\nimport { useSwatchPickerRowStyles_unstable } from './useSwatchPickerRowStyles.styles';\nimport type { SwatchPickerRowProps } from './SwatchPickerRow.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * SwatchPickerRow component is used to render a row of swatches.\n */\nexport const SwatchPickerRow: ForwardRefComponent<SwatchPickerRowProps> = React.forwardRef((props, ref) => {\n  const state = useSwatchPickerRow_unstable(props, ref);\n\n  useSwatchPickerRowStyles_unstable(state);\n  useCustomStyleHook_unstable('useSwatchPickerRowStyles_unstable')(state);\n  return renderSwatchPickerRow_unstable(state);\n});\n\nSwatchPickerRow.displayName = 'SwatchPickerRow';\n"],"names":["React","useSwatchPickerRow_unstable","renderSwatchPickerRow_unstable","useSwatchPickerRowStyles_unstable","useCustomStyleHook_unstable","SwatchPickerRow","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,iCAAiC,QAAQ,oCAAoC;AAEtF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,gCAA6DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQR,4BAA4BM,OAAOC;IAEjDL,kCAAkCM;IAClCL,4BAA4B,qCAAqCK;IACjE,OAAOP,+BAA+BO;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/SwatchPickerRow/SwatchPickerRow.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useSwatchPickerRow_unstable } from './useSwatchPickerRow';\nimport { renderSwatchPickerRow_unstable } from './renderSwatchPickerRow';\nimport { useSwatchPickerRowStyles_unstable } from './useSwatchPickerRowStyles.styles';\nimport type { SwatchPickerRowProps } from './SwatchPickerRow.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * SwatchPickerRow component is used to render a row of swatches.\n */\nexport const SwatchPickerRow: ForwardRefComponent<SwatchPickerRowProps> = React.forwardRef((props, ref) => {\n  const state = useSwatchPickerRow_unstable(props, ref);\n\n  useSwatchPickerRowStyles_unstable(state);\n  useCustomStyleHook_unstable('useSwatchPickerRowStyles_unstable')(state);\n  return renderSwatchPickerRow_unstable(state);\n});\n\nSwatchPickerRow.displayName = 'SwatchPickerRow';\n"],"names":["React","useSwatchPickerRow_unstable","renderSwatchPickerRow_unstable","useSwatchPickerRowStyles_unstable","useCustomStyleHook_unstable","SwatchPickerRow","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,iCAAiC,QAAQ,oCAAoC;AAEtF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,gCAA6DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQR,4BAA4BM,OAAOC;IAEjDL,kCAAkCM;IAClCL,4BAA4B,qCAAqCK;IACjE,OAAOP,+BAA+BO;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}

package/lib/components/SwatchPickerRow/renderSwatchPickerRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SwatchPickerRow/renderSwatchPickerRow.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { SwatchPickerRowState, SwatchPickerRowSlots } from './SwatchPickerRow.types';\n\n/**\n * Render the final JSX of SwatchPickerRow\n */\nexport const renderSwatchPickerRow_unstable = (state: SwatchPickerRowState) => {\n  assertSlots<SwatchPickerRowSlots>(state);\n  return <state.root />;\n};\n"],"names":["assertSlots","renderSwatchPickerRow_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7CF,YAAkCE;IAClC,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}
+{"version":3,"sources":["../src/components/SwatchPickerRow/renderSwatchPickerRow.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 { SwatchPickerRowState, SwatchPickerRowSlots } from './SwatchPickerRow.types';\n\n/**\n * Render the final JSX of SwatchPickerRow\n */\nexport const renderSwatchPickerRow_unstable = (state: SwatchPickerRowState): JSXElement => {\n  assertSlots<SwatchPickerRowSlots>(state);\n  return <state.root />;\n};\n"],"names":["assertSlots","renderSwatchPickerRow_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7CF,YAAkCE;IAClC,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/SwatchPickerRow/useSwatchPickerRow.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';

package/lib/components/SwatchPickerRow/useSwatchPickerRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SwatchPickerRow/useSwatchPickerRow.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { SwatchPickerRowProps, SwatchPickerRowState } from './SwatchPickerRow.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\n\n/**\n * Create the state required to render SwatchPickerRow.\n *\n * The returned state can be modified with hooks such as useSwatchPickerRowStyles_unstable,\n * before being passed to renderSwatchPickerRow_unstable.\n *\n * @param props - props from this instance of SwatchPickerRow\n * @param ref - reference to root HTMLDivElement of SwatchPickerRow\n */\nexport const useSwatchPickerRow_unstable = (\n  props: SwatchPickerRowProps,\n  ref: React.Ref<HTMLDivElement>,\n): SwatchPickerRowState => {\n  const { style, ...rest } = props;\n  const spacing = useSwatchPickerContextValue_unstable(ctx => ctx.spacing);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role: 'row',\n        ...rest,\n      }),\n      { elementType: 'div' },\n    ),\n    spacing,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useSwatchPickerContextValue_unstable","useSwatchPickerRow_unstable","props","ref","style","rest","spacing","ctx","components","root","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,oCAAoC,QAAQ,8BAA8B;AAEnF;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGH;IAC3B,MAAMI,UAAUN,qCAAqCO,CAAAA,MAAOA,IAAID,OAAO;IAEvE,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMV,KAAKW,MAAM,CACfZ,yBAAyB,OAAO;YAC9BK;YACAQ,MAAM;YACN,GAAGN,IAAI;QACT,IACA;YAAEO,aAAa;QAAM;QAEvBN;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/SwatchPickerRow/useSwatchPickerRow.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { SwatchPickerRowProps, SwatchPickerRowState } from './SwatchPickerRow.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\n\n/**\n * Create the state required to render SwatchPickerRow.\n *\n * The returned state can be modified with hooks such as useSwatchPickerRowStyles_unstable,\n * before being passed to renderSwatchPickerRow_unstable.\n *\n * @param props - props from this instance of SwatchPickerRow\n * @param ref - reference to root HTMLDivElement of SwatchPickerRow\n */\nexport const useSwatchPickerRow_unstable = (\n  props: SwatchPickerRowProps,\n  ref: React.Ref<HTMLDivElement>,\n): SwatchPickerRowState => {\n  const { style, ...rest } = props;\n  const spacing = useSwatchPickerContextValue_unstable(ctx => ctx.spacing);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role: 'row',\n        ...rest,\n      }),\n      { elementType: 'div' },\n    ),\n    spacing,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useSwatchPickerContextValue_unstable","useSwatchPickerRow_unstable","props","ref","style","rest","spacing","ctx","components","root","always","role","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,oCAAoC,QAAQ,8BAA8B;AAEnF;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGH;IAC3B,MAAMI,UAAUN,qCAAqCO,CAAAA,MAAOA,IAAID,OAAO;IAEvE,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMV,KAAKW,MAAM,CACfZ,yBAAyB,OAAO;YAC9BK;YACAQ,MAAM;YACN,GAAGN,IAAI;QACT,IACA;YAAEO,aAAa;QAAM;QAEvBN;IACF;AACF,EAAE"}

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { __resetStyles, mergeClasses, __styles } from '@griffel/react';
 export const swatchPickerRowClassNames = {
   root: 'fui-SwatchPickerRow'

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

@@ -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":["import { 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,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":[]}
+{"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":[]}

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

@@ -1,3 +1,4 @@
+'use client';
 import { makeResetStyles, mergeClasses, makeStyles } from '@griffel/react';
 export const swatchPickerRowClassNames = {
     root: 'fui-SwatchPickerRow'

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.ts"],"sourcesContent":["import { 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,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"}
+{"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"}

package/lib/contexts/swatchPicker.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
 export const useSwatchPickerContextValues = (state)=>{

package/lib/contexts/swatchPicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/swatchPicker.ts"],"sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { SwatchPickerProps, SwatchPickerState } from '../components/SwatchPicker/SwatchPicker.types';\n\n/**\n * The context through which individual color controls communicate with the picker.\n */\nexport type SwatchPickerContextValue = Pick<SwatchPickerProps, 'size' | 'shape' | 'spacing' | 'selectedValue'> & {\n  /**\n   * Whether layout is grid.\n   */\n  isGrid: boolean;\n\n  /**\n   * @internal\n   * Callback used by ColorSwatch to request a change on it's selected state\n   * Should be used to select ColorSwatch\n   */\n  requestSelectionChange: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    data: { selectedValue: string; selectedSwatch: string },\n  ) => void;\n};\n\nexport const useSwatchPickerContextValues = (state: SwatchPickerState): SwatchPickerContextValues => {\n  const { isGrid, size, shape, spacing, requestSelectionChange, selectedValue } = state;\n\n  // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n  const swatchPicker: SwatchPickerContextValue = {\n    isGrid,\n    size,\n    shape,\n    spacing,\n    selectedValue,\n    requestSelectionChange,\n  };\n\n  return { swatchPicker };\n};\n\nexport const swatchPickerContextDefaultValue: SwatchPickerContextValue = {\n  requestSelectionChange: () => {\n    /*noop*/\n  },\n  isGrid: false,\n  size: 'medium',\n  shape: 'square',\n  spacing: 'medium',\n  selectedValue: undefined,\n};\n\nexport type SwatchPickerContextValues = {\n  swatchPicker: SwatchPickerContextValue;\n};\n\nconst SwatchPickerContext = createContext<SwatchPickerContextValue | undefined>(\n  undefined,\n) as Context<SwatchPickerContextValue>;\n\nexport const SwatchPickerProvider = SwatchPickerContext.Provider;\n\nexport const useSwatchPickerContextValue_unstable = <T>(selector: ContextSelector<SwatchPickerContextValue, T>): T =>\n  useContextSelector(SwatchPickerContext, (ctx = swatchPickerContextDefaultValue) => selector(ctx));\n"],"names":["React","createContext","useContextSelector","useSwatchPickerContextValues","state","isGrid","size","shape","spacing","requestSelectionChange","selectedValue","swatchPicker","swatchPickerContextDefaultValue","undefined","SwatchPickerContext","SwatchPickerProvider","Provider","useSwatchPickerContextValue_unstable","selector","ctx"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAwBrF,OAAO,MAAMC,+BAA+B,CAACC;IAC3C,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAEC,OAAO,EAAEC,sBAAsB,EAAEC,aAAa,EAAE,GAAGN;IAEhF,mGAAmG;IACnG,MAAMO,eAAyC;QAC7CN;QACAC;QACAC;QACAC;QACAE;QACAD;IACF;IAEA,OAAO;QAAEE;IAAa;AACxB,EAAE;AAEF,OAAO,MAAMC,kCAA4D;IACvEH,wBAAwB;IACtB,MAAM,GACR;IACAJ,QAAQ;IACRC,MAAM;IACNC,OAAO;IACPC,SAAS;IACTE,eAAeG;AACjB,EAAE;AAMF,MAAMC,sBAAsBb,cAC1BY;AAGF,OAAO,MAAME,uBAAuBD,oBAAoBE,QAAQ,CAAC;AAEjE,OAAO,MAAMC,uCAAuC,CAAIC,WACtDhB,mBAAmBY,qBAAqB,CAACK,MAAMP,+BAA+B,GAAKM,SAASC,MAAM"}
+{"version":3,"sources":["../src/contexts/swatchPicker.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { SwatchPickerProps, SwatchPickerState } from '../components/SwatchPicker/SwatchPicker.types';\n\n/**\n * The context through which individual color controls communicate with the picker.\n */\nexport type SwatchPickerContextValue = Pick<SwatchPickerProps, 'size' | 'shape' | 'spacing' | 'selectedValue'> & {\n  /**\n   * Whether layout is grid.\n   */\n  isGrid: boolean;\n\n  /**\n   * @internal\n   * Callback used by ColorSwatch to request a change on it's selected state\n   * Should be used to select ColorSwatch\n   */\n  requestSelectionChange: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    data: { selectedValue: string; selectedSwatch: string },\n  ) => void;\n};\n\nexport const useSwatchPickerContextValues = (state: SwatchPickerState): SwatchPickerContextValues => {\n  const { isGrid, size, shape, spacing, requestSelectionChange, selectedValue } = state;\n\n  // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n  const swatchPicker: SwatchPickerContextValue = {\n    isGrid,\n    size,\n    shape,\n    spacing,\n    selectedValue,\n    requestSelectionChange,\n  };\n\n  return { swatchPicker };\n};\n\nexport const swatchPickerContextDefaultValue: SwatchPickerContextValue = {\n  requestSelectionChange: () => {\n    /*noop*/\n  },\n  isGrid: false,\n  size: 'medium',\n  shape: 'square',\n  spacing: 'medium',\n  selectedValue: undefined,\n};\n\nexport type SwatchPickerContextValues = {\n  swatchPicker: SwatchPickerContextValue;\n};\n\nconst SwatchPickerContext = createContext<SwatchPickerContextValue | undefined>(\n  undefined,\n) as Context<SwatchPickerContextValue>;\n\nexport const SwatchPickerProvider = SwatchPickerContext.Provider;\n\nexport const useSwatchPickerContextValue_unstable = <T>(selector: ContextSelector<SwatchPickerContextValue, T>): T =>\n  useContextSelector(SwatchPickerContext, (ctx = swatchPickerContextDefaultValue) => selector(ctx));\n"],"names":["React","createContext","useContextSelector","useSwatchPickerContextValues","state","isGrid","size","shape","spacing","requestSelectionChange","selectedValue","swatchPicker","swatchPickerContextDefaultValue","undefined","SwatchPickerContext","SwatchPickerProvider","Provider","useSwatchPickerContextValue_unstable","selector","ctx"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAwBrF,OAAO,MAAMC,+BAA+B,CAACC;IAC3C,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAEC,OAAO,EAAEC,sBAAsB,EAAEC,aAAa,EAAE,GAAGN;IAEhF,mGAAmG;IACnG,MAAMO,eAAyC;QAC7CN;QACAC;QACAC;QACAC;QACAE;QACAD;IACF;IAEA,OAAO;QAAEE;IAAa;AACxB,EAAE;AAEF,OAAO,MAAMC,kCAA4D;IACvEH,wBAAwB;IACtB,MAAM,GACR;IACAJ,QAAQ;IACRC,MAAM;IACNC,OAAO;IACPC,SAAS;IACTE,eAAeG;AACjB,EAAE;AAMF,MAAMC,sBAAsBb,cAC1BY;AAGF,OAAO,MAAME,uBAAuBD,oBAAoBE,QAAQ,CAAC;AAEjE,OAAO,MAAMC,uCAAuC,CAAIC,WACtDhB,mBAAmBY,qBAAqB,CAACK,MAAMP,+BAA+B,GAAKM,SAASC,MAAM"}

package/lib/utils/renderUtils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/renderUtils.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { ColorSwatch, SwatchPickerRow, ImageSwatch } from '../';\nimport type { ColorSwatchProps, ImageSwatchProps } from '../';\n\nexport type SwatchProps = ImageSwatchProps | ColorSwatchProps;\n\nexport type SwatchPickerGridProps = {\n  items: SwatchProps[];\n  columnCount: number;\n  renderRow?: (props: { children: JSXElement[]; rowId: string | number }) => JSXElement;\n  renderSwatch?: (item: SwatchProps) => JSXElement;\n};\n\nexport const renderSwatchPickerGrid = (props: SwatchPickerGridProps) => {\n  const { items, columnCount, renderRow, renderSwatch } = props;\n  const _renderRow = renderRow || (({ children, rowId }) => <SwatchPickerRow key={rowId}>{children}</SwatchPickerRow>);\n  const _renderSwatch =\n    renderSwatch ||\n    ((item: SwatchProps) =>\n      (item as ImageSwatchProps).src ? (\n        <ImageSwatch key={item.value} src={(item as ImageSwatchProps).src ?? ''} {...item} />\n      ) : (\n        <ColorSwatch key={item.value} color={item.color || ''} {...item} />\n      ));\n\n  const rowCount = Math.ceil(items.length / columnCount);\n  const rows = Array.from({ length: rowCount }, (_, i) => {\n    const start = i * columnCount;\n    const end = start + columnCount;\n    return items.slice(start, end);\n  });\n\n  return rows.map((row, index) => _renderRow({ children: row.map(_renderSwatch), rowId: index }));\n};\n"],"names":["React","ColorSwatch","SwatchPickerRow","ImageSwatch","renderSwatchPickerGrid","props","items","columnCount","renderRow","renderSwatch","_renderRow","children","rowId","key","_renderSwatch","item","src","value","color","rowCount","Math","ceil","length","rows","Array","from","_","i","start","end","slice","map","row","index"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,WAAW,EAAEC,eAAe,EAAEC,WAAW,QAAQ,MAAM;AAYhE,OAAO,MAAMC,yBAAyB,CAACC;IACrC,MAAM,EAAEC,KAAK,EAAEC,WAAW,EAAEC,SAAS,EAAEC,YAAY,EAAE,GAAGJ;IACxD,MAAMK,aAAaF,aAAc,CAAA,CAAC,EAAEG,QAAQ,EAAEC,KAAK,EAAE,iBAAK,oBAACV;YAAgBW,KAAKD;WAAQD,SAA0B;IAClH,MAAMG,gBACJL,gBACC,CAAA,CAACM;YAEqC;eADrC,AAACA,KAA0BC,GAAG,iBAC5B,oBAACb;YAAYU,KAAKE,KAAKE,KAAK;YAAED,KAAK,CAAA,YAAA,AAACD,KAA0BC,GAAG,cAA9B,uBAAA,YAAkC;YAAK,GAAGD,IAAI;2BAEjF,oBAACd;YAAYY,KAAKE,KAAKE,KAAK;YAAEC,OAAOH,KAAKG,KAAK,IAAI;YAAK,GAAGH,IAAI;;KACjE;IAEJ,MAAMI,WAAWC,KAAKC,IAAI,CAACf,MAAMgB,MAAM,GAAGf;IAC1C,MAAMgB,OAAOC,MAAMC,IAAI,CAAC;QAAEH,QAAQH;IAAS,GAAG,CAACO,GAAGC;QAChD,MAAMC,QAAQD,IAAIpB;QAClB,MAAMsB,MAAMD,QAAQrB;QACpB,OAAOD,MAAMwB,KAAK,CAACF,OAAOC;IAC5B;IAEA,OAAON,KAAKQ,GAAG,CAAC,CAACC,KAAKC,QAAUvB,WAAW;YAAEC,UAAUqB,IAAID,GAAG,CAACjB;YAAgBF,OAAOqB;QAAM;AAC9F,EAAE"}
+{"version":3,"sources":["../src/utils/renderUtils.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { ColorSwatch, SwatchPickerRow, ImageSwatch } from '../';\nimport type { ColorSwatchProps, ImageSwatchProps } from '../';\n\nexport type SwatchProps = ImageSwatchProps | ColorSwatchProps;\n\nexport type SwatchPickerGridProps = {\n  items: SwatchProps[];\n  columnCount: number;\n  renderRow?: (props: { children: JSXElement[]; rowId: string | number }) => JSXElement;\n  renderSwatch?: (item: SwatchProps) => JSXElement;\n};\n\nexport const renderSwatchPickerGrid = (props: SwatchPickerGridProps): JSXElement[] => {\n  const { items, columnCount, renderRow, renderSwatch } = props;\n  const _renderRow = renderRow || (({ children, rowId }) => <SwatchPickerRow key={rowId}>{children}</SwatchPickerRow>);\n  const _renderSwatch =\n    renderSwatch ||\n    ((item: SwatchProps) =>\n      (item as ImageSwatchProps).src ? (\n        <ImageSwatch key={item.value} src={(item as ImageSwatchProps).src ?? ''} {...item} />\n      ) : (\n        <ColorSwatch key={item.value} color={item.color || ''} {...item} />\n      ));\n\n  const rowCount = Math.ceil(items.length / columnCount);\n  const rows = Array.from({ length: rowCount }, (_, i) => {\n    const start = i * columnCount;\n    const end = start + columnCount;\n    return items.slice(start, end);\n  });\n\n  return rows.map((row, index) => _renderRow({ children: row.map(_renderSwatch), rowId: index }));\n};\n"],"names":["React","ColorSwatch","SwatchPickerRow","ImageSwatch","renderSwatchPickerGrid","props","items","columnCount","renderRow","renderSwatch","_renderRow","children","rowId","key","_renderSwatch","item","src","value","color","rowCount","Math","ceil","length","rows","Array","from","_","i","start","end","slice","map","row","index"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,WAAW,EAAEC,eAAe,EAAEC,WAAW,QAAQ,MAAM;AAYhE,OAAO,MAAMC,yBAAyB,CAACC;IACrC,MAAM,EAAEC,KAAK,EAAEC,WAAW,EAAEC,SAAS,EAAEC,YAAY,EAAE,GAAGJ;IACxD,MAAMK,aAAaF,aAAc,CAAA,CAAC,EAAEG,QAAQ,EAAEC,KAAK,EAAE,iBAAK,oBAACV;YAAgBW,KAAKD;WAAQD,SAA0B;IAClH,MAAMG,gBACJL,gBACC,CAAA,CAACM;YAEqC;eADrC,AAACA,KAA0BC,GAAG,iBAC5B,oBAACb;YAAYU,KAAKE,KAAKE,KAAK;YAAED,KAAK,CAAA,YAAA,AAACD,KAA0BC,GAAG,cAA9B,uBAAA,YAAkC;YAAK,GAAGD,IAAI;2BAEjF,oBAACd;YAAYY,KAAKE,KAAKE,KAAK;YAAEC,OAAOH,KAAKG,KAAK,IAAI;YAAK,GAAGH,IAAI;;KACjE;IAEJ,MAAMI,WAAWC,KAAKC,IAAI,CAACf,MAAMgB,MAAM,GAAGf;IAC1C,MAAMgB,OAAOC,MAAMC,IAAI,CAAC;QAAEH,QAAQH;IAAS,GAAG,CAACO,GAAGC;QAChD,MAAMC,QAAQD,IAAIpB;QAClB,MAAMsB,MAAMD,QAAQrB;QACpB,OAAOD,MAAMwB,KAAK,CAACF,OAAOC;IAC5B;IAEA,OAAON,KAAKQ,GAAG,CAAC,CAACC,KAAKC,QAAUvB,WAAW;YAAEC,UAAUqB,IAAID,GAAG,CAACjB;YAAgBF,OAAOqB;QAAM;AAC9F,EAAE"}

package/lib-commonjs/components/ColorSwatch/ColorSwatch.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

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

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

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

package/lib-commonjs/components/ColorSwatch/useColorSwatch.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorSwatch/useColorSwatch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { slot, useEventCallback, getIntrinsicElementProps, mergeCallbacks } from '@fluentui/react-utilities';\nimport type { ColorSwatchProps, ColorSwatchState } from './ColorSwatch.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\nimport { swatchCSSVars } from './useColorSwatchStyles.styles';\nimport { ProhibitedFilled } from '@fluentui/react-icons';\nimport { tokens } from '@fluentui/react-theme';\n\n/**\n * Create the state required to render ColorSwatch.\n *\n * The returned state can be modified with hooks such as useColorSwatchStyles_unstable,\n * before being passed to renderColorSwatch_unstable.\n *\n * @param props - props from this instance of ColorSwatch\n * @param ref - reference to root HTMLButtonElement of ColorSwatch\n */\nexport const useColorSwatch_unstable = (\n  props: ColorSwatchProps,\n  ref: React.Ref<HTMLButtonElement>,\n): ColorSwatchState => {\n  const { borderColor, color, disabled, disabledIcon, icon, value, onClick, size, shape, style, ...rest } = props;\n  const _size = useSwatchPickerContextValue_unstable(ctx => ctx.size);\n  const _shape = useSwatchPickerContextValue_unstable(ctx => ctx.shape);\n  const isGrid = useSwatchPickerContextValue_unstable(ctx => ctx.isGrid);\n\n  const requestSelectionChange = useSwatchPickerContextValue_unstable(ctx => ctx.requestSelectionChange);\n  const selected = useSwatchPickerContextValue_unstable(ctx => ctx.selectedValue === value);\n\n  const onColorSwatchClick = useEventCallback(\n    mergeCallbacks(onClick, (event: React.MouseEvent<HTMLButtonElement>) =>\n      requestSelectionChange(event, {\n        selectedValue: value,\n        selectedSwatch: color,\n      }),\n    ),\n  );\n\n  const rootVariables = {\n    [swatchCSSVars.color]: color,\n    [swatchCSSVars.borderColor]: borderColor ?? tokens.colorTransparentStroke,\n  };\n\n  const role = isGrid ? 'gridcell' : 'radio';\n  const ariaSelected = isGrid\n    ? {\n        'aria-selected': selected,\n      }\n    : { 'aria-checked': selected };\n\n  const iconShorthand = slot.optional(icon, { elementType: 'span' });\n  const disabledIconShorthand = slot.optional(disabledIcon, {\n    defaultProps: {\n      children: <ProhibitedFilled />,\n    },\n    renderByDefault: true,\n    elementType: 'span',\n  });\n\n  return {\n    components: {\n      root: 'button',\n      icon: 'span',\n      disabledIcon: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        role,\n        ...ariaSelected,\n        onClick: onColorSwatchClick,\n        type: 'button',\n        disabled,\n        ...rest,\n        style: {\n          ...rootVariables,\n          ...style,\n        },\n      }),\n      { elementType: 'button' },\n    ),\n    icon: iconShorthand,\n    disabledIcon: disabledIconShorthand,\n    disabled,\n    size: size ?? _size,\n    shape: shape ?? _shape,\n    selected,\n    color,\n    value,\n  };\n};\n"],"names":["React","slot","useEventCallback","getIntrinsicElementProps","mergeCallbacks","useSwatchPickerContextValue_unstable","swatchCSSVars","ProhibitedFilled","tokens","useColorSwatch_unstable","props","ref","borderColor","color","disabled","disabledIcon","icon","value","onClick","size","shape","style","rest","_size","ctx","_shape","isGrid","requestSelectionChange","selected","selectedValue","onColorSwatchClick","event","selectedSwatch","rootVariables","colorTransparentStroke","role","ariaSelected","iconShorthand","optional","elementType","disabledIconShorthand","defaultProps","children","renderByDefault","components","root","always","type"],"mappings":";;;;+BAiBaS;;;;;;;iEAjBU,QAAQ;gCACkD,4BAA4B;8BAExD,8BAA8B;4CACrD,gCAAgC;4BAC7B,wBAAwB;4BAClC,wBAAwB;AAWxC,gCAAgC,CACrCC,OACAC;IAEA,MAAM,EAAEC,WAAW,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,IAAI,EAAEC,KAAK,EAAEC,OAAO,EAAEC,IAAI,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGZ;IAC1G,MAAMa,YAAQlB,kDAAAA,EAAqCmB,CAAAA,MAAOA,IAAIL,IAAI;IAClE,MAAMM,aAASpB,kDAAAA,EAAqCmB,CAAAA,MAAOA,IAAIJ,KAAK;IACpE,MAAMM,aAASrB,kDAAAA,EAAqCmB,CAAAA,MAAOA,IAAIE,MAAM;IAErE,MAAMC,6BAAyBtB,kDAAAA,EAAqCmB,CAAAA,MAAOA,IAAIG,sBAAsB;IACrG,MAAMC,eAAWvB,kDAAAA,EAAqCmB,CAAAA,MAAOA,IAAIK,aAAa,KAAKZ;IAEnF,MAAMa,yBAAqB5B,gCAAAA,MACzBE,8BAAAA,EAAec,SAAS,CAACa,QACvBJ,uBAAuBI,OAAO;YAC5BF,eAAeZ;YACfe,gBAAgBnB;QAClB;IAIJ,MAAMoB,gBAAgB;QACpB,CAAC3B,yCAAAA,CAAcO,KAAK,CAAC,EAAEA;QACvB,CAACP,yCAAAA,CAAcM,WAAW,CAAC,EAAEA,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,cAAeJ,kBAAAA,CAAO0B,sBAAsB;IAC3E;IAEA,MAAMC,OAAOT,SAAS,aAAa;IACnC,MAAMU,eAAeV,SACjB;QACE,iBAAiBE;IACnB,IACA;QAAE,gBAAgBA;IAAS;IAE/B,MAAMS,gBAAgBpC,oBAAAA,CAAKqC,QAAQ,CAACtB,MAAM;QAAEuB,aAAa;IAAO;IAChE,MAAMC,wBAAwBvC,oBAAAA,CAAKqC,QAAQ,CAACvB,cAAc;QACxD0B,cAAc;YACZC,UAAAA,WAAAA,GAAU,OAAA,aAAA,CAACnC,4BAAAA,EAAAA;QACb;QACAoC,iBAAiB;QACjBJ,aAAa;IACf;IAEA,OAAO;QACLK,YAAY;YACVC,MAAM;YACN7B,MAAM;YACND,cAAc;QAChB;QACA8B,MAAM5C,oBAAAA,CAAK6C,MAAM,CACf3C,4CAAAA,EAAyB,UAAU;YACjCQ;YACAwB;YACA,GAAGC,YAAY;YACflB,SAASY;YACTiB,MAAM;YACNjC;YACA,GAAGQ,IAAI;YACPD,OAAO;gBACL,GAAGY,aAAa;gBAChB,GAAGZ,KAAK;YACV;QACF,IACA;YAAEkB,aAAa;QAAS;QAE1BvB,MAAMqB;QACNtB,cAAcyB;QACd1B;QACAK,MAAMA,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,OAAQI;QACdH,OAAOA,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,QAASK;QAChBG;QACAf;QACAI;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/ColorSwatch/useColorSwatch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { slot, useEventCallback, getIntrinsicElementProps, mergeCallbacks } from '@fluentui/react-utilities';\nimport type { ColorSwatchProps, ColorSwatchState } from './ColorSwatch.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\nimport { swatchCSSVars } from './useColorSwatchStyles.styles';\nimport { ProhibitedFilled } from '@fluentui/react-icons';\nimport { tokens } from '@fluentui/react-theme';\n\n/**\n * Create the state required to render ColorSwatch.\n *\n * The returned state can be modified with hooks such as useColorSwatchStyles_unstable,\n * before being passed to renderColorSwatch_unstable.\n *\n * @param props - props from this instance of ColorSwatch\n * @param ref - reference to root HTMLButtonElement of ColorSwatch\n */\nexport const useColorSwatch_unstable = (\n  props: ColorSwatchProps,\n  ref: React.Ref<HTMLButtonElement>,\n): ColorSwatchState => {\n  const { borderColor, color, disabled, disabledIcon, icon, value, onClick, size, shape, style, ...rest } = props;\n  const _size = useSwatchPickerContextValue_unstable(ctx => ctx.size);\n  const _shape = useSwatchPickerContextValue_unstable(ctx => ctx.shape);\n  const isGrid = useSwatchPickerContextValue_unstable(ctx => ctx.isGrid);\n\n  const requestSelectionChange = useSwatchPickerContextValue_unstable(ctx => ctx.requestSelectionChange);\n  const selected = useSwatchPickerContextValue_unstable(ctx => ctx.selectedValue === value);\n\n  const onColorSwatchClick = useEventCallback(\n    mergeCallbacks(onClick, (event: React.MouseEvent<HTMLButtonElement>) =>\n      requestSelectionChange(event, {\n        selectedValue: value,\n        selectedSwatch: color,\n      }),\n    ),\n  );\n\n  const rootVariables = {\n    [swatchCSSVars.color]: color,\n    [swatchCSSVars.borderColor]: borderColor ?? tokens.colorTransparentStroke,\n  };\n\n  const role = isGrid ? 'gridcell' : 'radio';\n  const ariaSelected = isGrid\n    ? {\n        'aria-selected': selected,\n      }\n    : { 'aria-checked': selected };\n\n  const iconShorthand = slot.optional(icon, { elementType: 'span' });\n  const disabledIconShorthand = slot.optional(disabledIcon, {\n    defaultProps: {\n      children: <ProhibitedFilled />,\n    },\n    renderByDefault: true,\n    elementType: 'span',\n  });\n\n  return {\n    components: {\n      root: 'button',\n      icon: 'span',\n      disabledIcon: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        role,\n        ...ariaSelected,\n        onClick: onColorSwatchClick,\n        type: 'button',\n        disabled,\n        ...rest,\n        style: {\n          ...rootVariables,\n          ...style,\n        },\n      }),\n      { elementType: 'button' },\n    ),\n    icon: iconShorthand,\n    disabledIcon: disabledIconShorthand,\n    disabled,\n    size: size ?? _size,\n    shape: shape ?? _shape,\n    selected,\n    color,\n    value,\n  };\n};\n"],"names":["React","slot","useEventCallback","getIntrinsicElementProps","mergeCallbacks","useSwatchPickerContextValue_unstable","swatchCSSVars","ProhibitedFilled","tokens","useColorSwatch_unstable","props","ref","borderColor","color","disabled","disabledIcon","icon","value","onClick","size","shape","style","rest","_size","ctx","_shape","isGrid","requestSelectionChange","selected","selectedValue","onColorSwatchClick","event","selectedSwatch","rootVariables","colorTransparentStroke","role","ariaSelected","iconShorthand","optional","elementType","disabledIconShorthand","defaultProps","children","renderByDefault","components","root","always","type"],"mappings":"AAAA;;;;;+BAmBaS;;;;;;;iEAjBU,QAAQ;gCACkD,4BAA4B;8BAExD,8BAA8B;4CACrD,gCAAgC;4BAC7B,wBAAwB;4BAClC,wBAAwB;AAWxC,gCAAgC,CACrCC,OACAC;IAEA,MAAM,EAAEC,WAAW,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,IAAI,EAAEC,KAAK,EAAEC,OAAO,EAAEC,IAAI,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGZ;IAC1G,MAAMa,YAAQlB,kDAAAA,EAAqCmB,CAAAA,MAAOA,IAAIL,IAAI;IAClE,MAAMM,aAASpB,kDAAAA,EAAqCmB,CAAAA,MAAOA,IAAIJ,KAAK;IACpE,MAAMM,aAASrB,kDAAAA,EAAqCmB,CAAAA,MAAOA,IAAIE,MAAM;IAErE,MAAMC,6BAAyBtB,kDAAAA,EAAqCmB,CAAAA,MAAOA,IAAIG,sBAAsB;IACrG,MAAMC,WAAWvB,sDAAAA,EAAqCmB,CAAAA,MAAOA,IAAIK,aAAa,KAAKZ;IAEnF,MAAMa,yBAAqB5B,gCAAAA,MACzBE,8BAAAA,EAAec,SAAS,CAACa,QACvBJ,uBAAuBI,OAAO;YAC5BF,eAAeZ;YACfe,gBAAgBnB;QAClB;IAIJ,MAAMoB,gBAAgB;QACpB,CAAC3B,yCAAAA,CAAcO,KAAK,CAAC,EAAEA;QACvB,CAACP,yCAAAA,CAAcM,WAAW,CAAC,EAAEA,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,cAAeJ,kBAAAA,CAAO0B,sBAAsB;IAC3E;IAEA,MAAMC,OAAOT,SAAS,aAAa;IACnC,MAAMU,eAAeV,SACjB;QACE,iBAAiBE;IACnB,IACA;QAAE,gBAAgBA;IAAS;IAE/B,MAAMS,gBAAgBpC,oBAAAA,CAAKqC,QAAQ,CAACtB,MAAM;QAAEuB,aAAa;IAAO;IAChE,MAAMC,wBAAwBvC,oBAAAA,CAAKqC,QAAQ,CAACvB,cAAc;QACxD0B,cAAc;YACZC,UAAAA,WAAAA,GAAU,OAAA,aAAA,CAACnC,4BAAAA,EAAAA;QACb;QACAoC,iBAAiB;QACjBJ,aAAa;IACf;IAEA,OAAO;QACLK,YAAY;YACVC,MAAM;YACN7B,MAAM;YACND,cAAc;QAChB;QACA8B,MAAM5C,oBAAAA,CAAK6C,MAAM,KACf3C,wCAAAA,EAAyB,UAAU;YACjCQ;YACAwB;YACA,GAAGC,YAAY;YACflB,SAASY;YACTiB,MAAM;YACNjC;YACA,GAAGQ,IAAI;YACPD,OAAO;gBACL,GAAGY,aAAa;gBAChB,GAAGZ,KAAK;YACV;QACF,IACA;YAAEkB,aAAa;QAAS;QAE1BvB,MAAMqB;QACNtB,cAAcyB;QACd1B;QACAK,MAAMA,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,OAAQI;QACdH,OAAOA,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,QAASK;QAChBG;QACAf;QACAI;IACF;AACF,EAAE"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["useColorSwatchStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const colorSwatchClassNames = {\n    root: 'fui-ColorSwatch',\n    icon: 'fui-ColorSwatch__icon',\n    disabledIcon: 'fui-ColorSwatch__disabledIcon'\n};\nexport const swatchCSSVars = {\n    color: `--fui-SwatchPicker--color`,\n    borderColor: `--fui-SwatchPicker--borderColor`\n};\nconst { color, borderColor } = swatchCSSVars;\n/**\n * Styles for the root slot\n */ const useResetStyles = makeResetStyles({\n    display: 'inline-flex',\n    flexShrink: 0,\n    alignItems: 'center',\n    justifyContent: 'center',\n    boxSizing: 'border-box',\n    border: `1px solid var(${borderColor})`,\n    background: `var(${color})`,\n    overflow: 'hidden',\n    padding: '0',\n    ':hover': {\n        cursor: 'pointer',\n        border: 'none',\n        boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke1}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`\n    },\n    ':hover:active': {\n        border: 'none',\n        boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`\n    },\n    ':focus': {\n        outline: 'none'\n    },\n    ':focus-visible': {\n        outline: 'none'\n    },\n    ...createCustomFocusIndicatorStyle({\n        border: 'none',\n        outline: 'none',\n        boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`\n    }),\n    // High contrast styles\n    '@media (forced-colors: active)': {\n        forcedColorAdjust: 'none',\n        ':hover': {\n            boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke2Hover}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`\n        },\n        ':hover:active': {\n            boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke2Pressed}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`\n        }\n    }\n});\nconst useStyles = makeStyles({\n    disabled: {\n        ':hover': {\n            cursor: 'not-allowed',\n            boxShadow: 'none'\n        },\n        '@media (forced-colors: active)': {\n            ':hover': {\n                boxShadow: 'none'\n            }\n        }\n    },\n    selected: {\n        border: 'none',\n        boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke1}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`,\n        ':hover': {\n            boxShadow: `inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorCompoundBrandStrokeHover}, inset 0 0 0 6px ${tokens.colorStrokeFocus1}`\n        },\n        ':hover:active': {\n            boxShadow: `inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 7px ${tokens.colorStrokeFocus1}`\n        },\n        ...createCustomFocusIndicatorStyle({\n            boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus2}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`\n        }),\n        '@media (forced-colors: active)': {\n            boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke2Pressed}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`\n        }\n    },\n    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","Bs5ihcz","selected","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","vajtyg","j6ew2k","Bspt33j","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":";;;;;;;;;;;IAGaK,qBAAqB;;;IAKrBI,aAAa;;;iCAgKoB;;;;uBAxKY,gBAAgB;AAGnE,8BAA8B;IACjCH,IAAI,EAAE,iBAAiB;IACvBC,IAAI,EAAE,uBAAuB;IAC7BC,YAAY,EAAE;AAClB,CAAC;AACM,sBAAsB;IACzBE,KAAK,EAAE,CAAA,yBAAA,CAA2B;IAClCC,WAAW,EAAE,CAAA,+BAAA,CAAA;AACjB,CAAC;AACD,MAAM,EAAED,KAAK,EAAEC,WAAAA,EAAa,GAAGF,aAAa;AAC5C;;CAEA,GAAI,MAAMG,cAAc,GAAA,WAAA,OAAGZ,oBAAA,EAAA,WAAA,MAAA;IAAAa,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAwC1B,CAAC;AACF,MAAMC,SAAS,GAAA,WAAA,OAAGd,eAAA,EAAA;IAAAe,QAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAApB,OAAA,EAAA;QAAAqB,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,aAAA,EAAA;QAAAJ,MAAA,EAAA;QAAApB,OAAA,EAAA;QAAAqB,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAI,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAqCjB,CAAC;AACF,MAAMC,aAAa,GAAA,WAAA,OAAG9C,eAAA,EAAA;IAAA,eAAA;QAAA+C,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAA/B,OAAA,EAAA;QAAAgC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAA3B,MAAA,EAAA;IAAA;IAAA4B,KAAA,EAAA;QAAAnB,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAA3B,MAAA,EAAA;IAAA;IAAA6B,MAAA,EAAA;QAAApB,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAoB,KAAA,EAAA;QAAArB,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAJ,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAF,CAAA,EAAA;QAAA;QAAA;YAAA;YAAA;gBAAAG,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CA4BrB,CAAC;AACF,MAAMwB,cAAc,GAAA,WAAA,OAAGrE,eAAA,EAAA;IAAAsE,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;IAAApC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,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;AACF,MAAMsC,aAAa,GAAA,WAAA,OAAGnF,eAAA,EAAA;IAAAO,YAAA,EAAA;QAAA6E,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAA/E,IAAA,EAAA;QAAAgF,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAA,eAAA;QAAAC,OAAA,EAAA;IAAA;IAAAvB,KAAA,EAAA;QAAAuB,OAAA,EAAA;IAAA;IAAAtB,MAAA,EAAA;QAAAsB,OAAA,EAAA;IAAA;IAAArB,KAAA,EAAA;QAAAqB,OAAA,EAAA;IAAA;AAAA,GAAA;IAAA7C,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAsBrB,CAAC;AAGS,MAAM8C,iCAAiCC,KAAK,IAAG;IACtD,aAAa;IACb,MAAM,EAAEC,IAAI,GAAG,QAAQ,EAAEC,KAAK,GAAG,QAAA,EAAU,GAAGF,KAAK;IACnD,MAAMG,WAAW,GAAGnF,cAAc,CAAC,CAAC;IACpC,MAAMoF,MAAM,GAAGjF,SAAS,CAAC,CAAC;IAC1B,MAAMkF,UAAU,GAAGlD,aAAa,CAAC,CAAC;IAClC,MAAMmD,WAAW,GAAG5B,cAAc,CAAC,CAAC;IACpC,MAAM6B,UAAU,GAAGf,aAAa,CAAC,CAAC;IAClC,MAAMgB,qBAAqB,GAAGP,IAAI,KAAK,OAAO,IAAIA,IAAI,KAAK,aAAa,GAAGG,MAAM,CAACtD,aAAa,GAAG,EAAE;IACpGkD,KAAK,CAACtF,IAAI,CAAC+F,SAAS,OAAGnG,mBAAY,EAACG,qBAAqB,CAACC,IAAI,EAAEyF,WAAW,EAAEE,UAAU,CAACJ,IAAI,CAAC,EAAEK,WAAW,CAACJ,KAAK,CAAC,EAAEF,KAAK,CAACxE,QAAQ,IAAI4E,MAAM,CAAC5E,QAAQ,EAAEwE,KAAK,CAACxE,QAAQ,IAAIgF,qBAAqB,EAAER,KAAK,CAAC5E,QAAQ,IAAIgF,MAAM,CAAChF,QAAQ,EAAE4E,KAAK,CAACtF,IAAI,CAAC+F,SAAS,CAAC;IACvP,IAAIT,KAAK,CAAC5E,QAAQ,IAAI4E,KAAK,CAACpF,YAAY,EAAE;QACtCoF,KAAK,CAACpF,YAAY,CAAC6F,SAAS,OAAGnG,mBAAY,EAACiG,UAAU,CAAC5F,IAAI,EAAE4F,UAAU,CAACN,IAAI,CAAC,EAAEM,UAAU,CAAC3F,YAAY,EAAEoF,KAAK,CAACpF,YAAY,CAAC6F,SAAS,CAAC;IACzI;IACA,IAAIT,KAAK,CAACrF,IAAI,EAAE;QACZqF,KAAK,CAACrF,IAAI,CAAC8F,SAAS,OAAGnG,mBAAY,EAACiG,UAAU,CAAC5F,IAAI,EAAE4F,UAAU,CAACN,IAAI,CAAC,EAAED,KAAK,CAACrF,IAAI,CAAC8F,SAAS,CAAC;IAChG;IACA,OAAOT,KAAK;AAChB,CAAC"}
+{"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","Bs5ihcz","selected","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","vajtyg","j6ew2k","Bspt33j","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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorSwatch/useColorSwatchStyles.styles.ts"],"sourcesContent":["import { 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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"}
+{"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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"}

package/lib-commonjs/components/EmptySwatch/EmptySwatch.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/EmptySwatch/EmptySwatch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/EmptySwatch/EmptySwatch.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useEmptySwatch_unstable } from './useEmptySwatch';\nimport { renderEmptySwatch_unstable } from './renderEmptySwatch';\nimport { useEmptySwatchStyles_unstable } from './useEmptySwatchStyles.styles';\nimport type { EmptySwatchProps } from './EmptySwatch.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * EmptySwatch component is used for adding new color swatches.\n */\nexport const EmptySwatch: ForwardRefComponent<EmptySwatchProps> = React.forwardRef((props, ref) => {\n  const state = useEmptySwatch_unstable(props, ref);\n\n  useEmptySwatchStyles_unstable(state);\n  useCustomStyleHook_unstable('useEmptySwatchStyles_unstable')(state);\n  return renderEmptySwatch_unstable(state);\n});\n\nEmptySwatch.displayName = 'EmptySwatch';\n"],"names":["React","useEmptySwatch_unstable","renderEmptySwatch_unstable","useEmptySwatchStyles_unstable","useCustomStyleHook_unstable","EmptySwatch","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAWaK;;;;;;;iEAXU,QAAQ;gCAES,mBAAmB;mCAChB,sBAAsB;4CACnB,gCAAgC;qCAElC,kCAAkC;AAKvE,oBAAMA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,2CAAAA,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,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"}

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

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/EmptySwatch/useEmptySwatch.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { EmptySwatchProps, EmptySwatchState } from './EmptySwatch.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\n\n/**\n * Create the state required to render EmptySwatch.\n *\n * The returned state can be modified with hooks such as useEmptySwatchStyles_unstable,\n * before being passed to renderEmptySwatch_unstable.\n *\n * @param props - props from this instance of EmptySwatch\n * @param ref - reference to root HTMLDivElement of EmptySwatch\n */\nexport const useEmptySwatch_unstable = (\n  props: EmptySwatchProps,\n  ref: React.Ref<HTMLButtonElement>,\n): EmptySwatchState => {\n  const { size, shape, ...rest } = props;\n  const _size = useSwatchPickerContextValue_unstable(ctx => ctx.size);\n  const _shape = useSwatchPickerContextValue_unstable(ctx => ctx.shape);\n  const isGrid = useSwatchPickerContextValue_unstable(ctx => ctx.isGrid);\n\n  const role = isGrid ? 'gridcell' : 'radio';\n  const a11yProps = isGrid ? {} : { 'aria-checked': false };\n  return {\n    components: {\n      root: 'button',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        role,\n        ...a11yProps,\n        ...rest,\n      }),\n      { elementType: 'button' },\n    ),\n    size: size ?? _size,\n    shape: shape ?? _shape,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useSwatchPickerContextValue_unstable","useEmptySwatch_unstable","props","ref","size","shape","rest","_size","ctx","_shape","isGrid","role","a11yProps","components","root","always","elementType"],"mappings":";;;;+BAcaI;;;;;;;iEAdU,QAAQ;gCACgB,4BAA4B;8BAEtB,8BAA8B;AAW5E,gCAAgC,CACrCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGJ;IACjC,MAAMK,YAAQP,kDAAAA,EAAqCQ,CAAAA,MAAOA,IAAIJ,IAAI;IAClE,MAAMK,aAAST,kDAAAA,EAAqCQ,CAAAA,MAAOA,IAAIH,KAAK;IACpE,MAAMK,aAASV,kDAAAA,EAAqCQ,CAAAA,MAAOA,IAAIE,MAAM;IAErE,MAAMC,OAAOD,SAAS,aAAa;IACnC,MAAME,YAAYF,SAAS,CAAC,IAAI;QAAE,gBAAgB;IAAM;IACxD,OAAO;QACLG,YAAY;YACVC,MAAM;QACR;QACAA,MAAMf,oBAAAA,CAAKgB,MAAM,KACfjB,wCAAAA,EAAyB,UAAU;YACjCK;YACAQ;YACA,GAAGC,SAAS;YACZ,GAAGN,IAAI;QACT,IACA;YAAEU,aAAa;QAAS;QAE1BZ,MAAMA,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,OAAQG;QACdF,OAAOA,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,QAASI;IAClB;AACF,EAAE"}
+{"version":3,"sources":["../src/components/EmptySwatch/useEmptySwatch.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { EmptySwatchProps, EmptySwatchState } from './EmptySwatch.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\n\n/**\n * Create the state required to render EmptySwatch.\n *\n * The returned state can be modified with hooks such as useEmptySwatchStyles_unstable,\n * before being passed to renderEmptySwatch_unstable.\n *\n * @param props - props from this instance of EmptySwatch\n * @param ref - reference to root HTMLDivElement of EmptySwatch\n */\nexport const useEmptySwatch_unstable = (\n  props: EmptySwatchProps,\n  ref: React.Ref<HTMLButtonElement>,\n): EmptySwatchState => {\n  const { size, shape, ...rest } = props;\n  const _size = useSwatchPickerContextValue_unstable(ctx => ctx.size);\n  const _shape = useSwatchPickerContextValue_unstable(ctx => ctx.shape);\n  const isGrid = useSwatchPickerContextValue_unstable(ctx => ctx.isGrid);\n\n  const role = isGrid ? 'gridcell' : 'radio';\n  const a11yProps = isGrid ? {} : { 'aria-checked': false };\n  return {\n    components: {\n      root: 'button',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        role,\n        ...a11yProps,\n        ...rest,\n      }),\n      { elementType: 'button' },\n    ),\n    size: size ?? _size,\n    shape: shape ?? _shape,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useSwatchPickerContextValue_unstable","useEmptySwatch_unstable","props","ref","size","shape","rest","_size","ctx","_shape","isGrid","role","a11yProps","components","root","always","elementType"],"mappings":"AAAA;;;;;+BAgBaI;;;;;;;iEAdU,QAAQ;gCACgB,4BAA4B;8BAEtB,8BAA8B;AAW5E,gCAAgC,CACrCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGJ;IACjC,MAAMK,YAAQP,kDAAAA,EAAqCQ,CAAAA,MAAOA,IAAIJ,IAAI;IAClE,MAAMK,aAAST,kDAAAA,EAAqCQ,CAAAA,MAAOA,IAAIH,KAAK;IACpE,MAAMK,aAASV,kDAAAA,EAAqCQ,CAAAA,MAAOA,IAAIE,MAAM;IAErE,MAAMC,OAAOD,SAAS,aAAa;IACnC,MAAME,YAAYF,SAAS,CAAC,IAAI;QAAE,gBAAgB;IAAM;IACxD,OAAO;QACLG,YAAY;YACVC,MAAM;QACR;QACAA,MAAMf,oBAAAA,CAAKgB,MAAM,KACfjB,wCAAAA,EAAyB,UAAU;YACjCK;YACAQ;YACA,GAAGC,SAAS;YACZ,GAAGN,IAAI;QACT,IACA;YAAEU,aAAa;QAAS;QAE1BZ,MAAMA,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,OAAQG;QACdF,OAAOA,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,QAASI;IAClB;AACF,EAAE"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true