@fluentui/react-swatch-picker 9.5.3 → 9.6.0

package/lib/components/EmptySwatch/useEmptySwatch.js

@@ -1,18 +1,14 @@
 'use client';
-import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
-import { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';
+import { getIntrinsicElementProps, slot } from "@fluentui/react-utilities";
+import { useSwatchPickerContextValue_unstable } from "../../contexts/swatchPicker.js";
 /**
- * Create the state required to render EmptySwatch.
+ * Create the base state required to render unstyled EmptySwatch.
  *
- * The returned state can be modified with hooks such as useEmptySwatchStyles_unstable,
- * before being passed to renderEmptySwatch_unstable.
+ * The returned state can be modified with hooks before being passed to renderEmptySwatch_unstable.
  *
  * @param props - props from this instance of EmptySwatch
  * @param ref - reference to root HTMLDivElement of EmptySwatch
- */ export const useEmptySwatch_unstable = (props, ref)=>{
-    const { size, shape, ...rest } = props;
-    const _size = useSwatchPickerContextValue_unstable((ctx)=>ctx.size);
-    const _shape = useSwatchPickerContextValue_unstable((ctx)=>ctx.shape);
+ */ export const useEmptySwatchBase_unstable = (props, ref)=>{
     const isGrid = useSwatchPickerContextValue_unstable((ctx)=>ctx.isGrid);
     const role = isGrid ? 'gridcell' : 'radio';
     const a11yProps = isGrid ? {} : {
@@ -26,11 +22,28 @@ import { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicke
             ref,
             role,
             ...a11yProps,
-            ...rest
+            ...props
         }), {
             elementType: 'button'
-        }),
-        size: size !== null && size !== void 0 ? size : _size,
-        shape: shape !== null && shape !== void 0 ? shape : _shape
+        })
+    };
+};
+/**
+ * Create the state required to render EmptySwatch.
+ *
+ * The returned state can be modified with hooks such as useEmptySwatchStyles_unstable,
+ * before being passed to renderEmptySwatch_unstable.
+ *
+ * @param props - props from this instance of EmptySwatch
+ * @param ref - reference to root HTMLDivElement of EmptySwatch
+ */ export const useEmptySwatch_unstable = (props, ref)=>{
+    const sizeFromContext = useSwatchPickerContextValue_unstable((ctx)=>ctx.size);
+    const shapeFromContext = useSwatchPickerContextValue_unstable((ctx)=>ctx.shape);
+    const { size = sizeFromContext, shape = shapeFromContext, ...rest } = props;
+    const baseState = useEmptySwatchBase_unstable(rest, ref);
+    return {
+        ...baseState,
+        size,
+        shape
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/EmptySwatch/useEmptySwatch.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { 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":["getIntrinsicElementProps","slot","useSwatchPickerContextValue_unstable","useEmptySwatch_unstable","props","ref","size","shape","rest","_size","ctx","_shape","isGrid","role","a11yProps","components","root","always","elementType"],"mappings":"AAAA;AAGA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,oCAAoC,QAAQ,8BAA8B;AAEnF;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CACrCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGJ;IACjC,MAAMK,QAAQP,qCAAqCQ,CAAAA,MAAOA,IAAIJ,IAAI;IAClE,MAAMK,SAAST,qCAAqCQ,CAAAA,MAAOA,IAAIH,KAAK;IACpE,MAAMK,SAASV,qCAAqCQ,CAAAA,MAAOA,IAAIE,MAAM;IAErE,MAAMC,OAAOD,SAAS,aAAa;IACnC,MAAME,YAAYF,SAAS,CAAC,IAAI;QAAE,gBAAgB;IAAM;IACxD,OAAO;QACLG,YAAY;YACVC,MAAM;QACR;QACAA,MAAMf,KAAKgB,MAAM,CACfjB,yBAAyB,UAAU;YACjCK;YACAQ;YACA,GAAGC,SAAS;YACZ,GAAGN,IAAI;QACT,IACA;YAAEU,aAAa;QAAS;QAE1BZ,MAAMA,iBAAAA,kBAAAA,OAAQG;QACdF,OAAOA,kBAAAA,mBAAAA,QAASI;IAClB;AACF,EAAE"}
+{"version":3,"sources":["../src/components/EmptySwatch/useEmptySwatch.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type {\n  EmptySwatchBaseProps,\n  EmptySwatchBaseState,\n  EmptySwatchProps,\n  EmptySwatchState,\n} from './EmptySwatch.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\n\n/**\n * Create the base state required to render unstyled EmptySwatch.\n *\n * The returned state can be modified with hooks before being passed to renderEmptySwatch_unstable.\n *\n * @param props - props from this instance of EmptySwatch\n * @param ref - reference to root HTMLDivElement of EmptySwatch\n */\nexport const useEmptySwatchBase_unstable = (\n  props: EmptySwatchBaseProps,\n  ref: React.Ref<HTMLButtonElement>,\n): EmptySwatchBaseState => {\n  const isGrid = useSwatchPickerContextValue_unstable(ctx => ctx.isGrid);\n\n  const role = isGrid ? 'gridcell' : 'radio';\n  const a11yProps = isGrid ? {} : { 'aria-checked': false };\n  return {\n    components: {\n      root: 'button',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        role,\n        ...a11yProps,\n        ...props,\n      }),\n      { elementType: 'button' },\n    ),\n  };\n};\n\n/**\n * Create the state required to render EmptySwatch.\n *\n * The returned state can be modified with hooks such as useEmptySwatchStyles_unstable,\n * before being passed to renderEmptySwatch_unstable.\n *\n * @param props - props from this instance of EmptySwatch\n * @param ref - reference to root HTMLDivElement of EmptySwatch\n */\nexport const useEmptySwatch_unstable = (\n  props: EmptySwatchProps,\n  ref: React.Ref<HTMLButtonElement>,\n): EmptySwatchState => {\n  const sizeFromContext = useSwatchPickerContextValue_unstable(ctx => ctx.size);\n  const shapeFromContext = useSwatchPickerContextValue_unstable(ctx => ctx.shape);\n  const { size = sizeFromContext, shape = shapeFromContext, ...rest } = props;\n\n  const baseState = useEmptySwatchBase_unstable(rest, ref);\n\n  return {\n    ...baseState,\n    size,\n    shape,\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","useSwatchPickerContextValue_unstable","useEmptySwatchBase_unstable","props","ref","isGrid","ctx","role","a11yProps","components","root","always","elementType","useEmptySwatch_unstable","sizeFromContext","size","shapeFromContext","shape","rest","baseState"],"mappings":"AAAA;AAGA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAO3E,SAASC,oCAAoC,QAAQ,iCAA8B;AAEnF;;;;;;;CAOC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAMC,SAASJ,qCAAqCK,CAAAA,MAAOA,IAAID,MAAM;IAErE,MAAME,OAAOF,SAAS,aAAa;IACnC,MAAMG,YAAYH,SAAS,CAAC,IAAI;QAAE,gBAAgB;IAAM;IACxD,OAAO;QACLI,YAAY;YACVC,MAAM;QACR;QACAA,MAAMV,KAAKW,MAAM,CACfZ,yBAAyB,UAAU;YACjCK;YACAG;YACA,GAAGC,SAAS;YACZ,GAAGL,KAAK;QACV,IACA;YAAES,aAAa;QAAS;IAE5B;AACF,EAAE;AAEF;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CACrCV,OACAC;IAEA,MAAMU,kBAAkBb,qCAAqCK,CAAAA,MAAOA,IAAIS,IAAI;IAC5E,MAAMC,mBAAmBf,qCAAqCK,CAAAA,MAAOA,IAAIW,KAAK;IAC9E,MAAM,EAAEF,OAAOD,eAAe,EAAEG,QAAQD,gBAAgB,EAAE,GAAGE,MAAM,GAAGf;IAEtE,MAAMgB,YAAYjB,4BAA4BgB,MAAMd;IAEpD,OAAO;QACL,GAAGe,SAAS;QACZJ;QACAE;IACF;AACF,EAAE"}

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

@@ -1,8 +1,8 @@
 'use client';
 
-import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
-import { tokens } from '@fluentui/react-theme';
-import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { __resetStyles, __styles, mergeClasses } from "@griffel/react";
+import { tokens } from "@fluentui/react-theme";
+import { createCustomFocusIndicatorStyle } from "@fluentui/react-tabster";
 export const emptySwatchClassNames = {
   root: 'fui-EmptySwatch'
 };
@@ -86,8 +86,6 @@ const useShapeStyles = /*#__PURE__*/__styles({
  * Apply styling to the EmptySwatch slots based on the state
  */
 export const useEmptySwatchStyles_unstable = state => {
-  'use no memo';
-
   const styles = useStyles();
   const sizeStyles = useSizeStyles();
   const shapeStyles = useShapeStyles();

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

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","createCustomFocusIndicatorStyle","emptySwatchClassNames","root","useStyles","useSizeStyles","a9b677","Bqenvij","small","medium","large","d","useShapeStyles","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","circular","square","p","useEmptySwatchStyles_unstable","state","styles","sizeStyles","shapeStyles","_state_size","size","_state_shape","className","shape"],"sources":["useEmptySwatchStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const emptySwatchClassNames = {\n    root: 'fui-EmptySwatch'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n    backgroundColor: tokens.colorTransparentBackground,\n    border: `1px dashed ${tokens.colorNeutralForeground4}`\n});\nconst useSizeStyles = makeStyles({\n    'extra-small': {\n        width: '20px',\n        height: '20px'\n    },\n    small: {\n        width: '24px',\n        height: '24px'\n    },\n    medium: {\n        width: '28px',\n        height: '28px'\n    },\n    large: {\n        width: '32px',\n        height: '32px'\n    }\n});\nconst useShapeStyles = makeStyles({\n    rounded: {\n        borderRadius: tokens.borderRadiusMedium,\n        ...createCustomFocusIndicatorStyle({\n            borderRadius: tokens.borderRadiusMedium\n        })\n    },\n    circular: {\n        borderRadius: tokens.borderRadiusCircular,\n        ...createCustomFocusIndicatorStyle({\n            borderRadius: tokens.borderRadiusCircular\n        })\n    },\n    square: {\n        borderRadius: tokens.borderRadiusNone,\n        ...createCustomFocusIndicatorStyle({\n            borderRadius: tokens.borderRadiusNone\n        })\n    }\n});\n/**\n * Apply styling to the EmptySwatch slots based on the state\n */ export const useEmptySwatchStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const sizeStyles = useSizeStyles();\n    const shapeStyles = useShapeStyles();\n    var _state_size;\n    const size = (_state_size = state.size) !== null && _state_size !== void 0 ? _state_size : 'medium';\n    var _state_shape;\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(emptySwatchClassNames.root, styles, sizeStyles[size], shapeStyles[(_state_shape = state.shape) !== null && _state_shape !== void 0 ? _state_shape : 'square'], state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,aAAA,sIAGrB,CAAC;AACF,MAAMQ,aAAa,gBAAGP,QAAA;EAAA;IAAAQ,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAF,MAAA;IAAAC,OAAA;EAAA;EAAAE,MAAA;IAAAH,MAAA;IAAAC,OAAA;EAAA;EAAAG,KAAA;IAAAJ,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAI,CAAA;AAAA,CAiBrB,CAAC;AACF,MAAMC,cAAc,gBAAGd,QAAA;EAAAe,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAV,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAE,MAAA;IAAAX,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAZ,CAAA;IAAAe,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAmBtB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACb,MAAMC,MAAM,GAAGzB,SAAS,CAAC,CAAC;EAC1B,MAAM0B,UAAU,GAAGzB,aAAa,CAAC,CAAC;EAClC,MAAM0B,WAAW,GAAGnB,cAAc,CAAC,CAAC;EACpC,IAAIoB,WAAW;EACf,MAAMC,IAAI,GAAG,CAACD,WAAW,GAAGJ,KAAK,CAACK,IAAI,MAAM,IAAI,IAAID,WAAW,KAAK,KAAK,CAAC,GAAGA,WAAW,GAAG,QAAQ;EACnG,IAAIE,YAAY;EAChB;EACAN,KAAK,CAACzB,IAAI,CAACgC,SAAS,GAAGpC,YAAY,CAACG,qBAAqB,CAACC,IAAI,EAAE0B,MAAM,EAAEC,UAAU,CAACG,IAAI,CAAC,EAAEF,WAAW,CAAC,CAACG,YAAY,GAAGN,KAAK,CAACQ,KAAK,MAAM,IAAI,IAAIF,YAAY,KAAK,KAAK,CAAC,GAAGA,YAAY,GAAG,QAAQ,CAAC,EAAEN,KAAK,CAACzB,IAAI,CAACgC,SAAS,CAAC;EACxN,OAAOP,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","createCustomFocusIndicatorStyle","emptySwatchClassNames","root","useStyles","useSizeStyles","a9b677","Bqenvij","small","medium","large","d","useShapeStyles","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","circular","square","p","useEmptySwatchStyles_unstable","state","styles","sizeStyles","shapeStyles","_state_size","size","_state_shape","className","shape"],"sources":["useEmptySwatchStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from \"@griffel/react\";\nimport { tokens } from \"@fluentui/react-theme\";\nimport { createCustomFocusIndicatorStyle } from \"@fluentui/react-tabster\";\nexport const emptySwatchClassNames = {\n    root: 'fui-EmptySwatch'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n    backgroundColor: tokens.colorTransparentBackground,\n    border: `1px dashed ${tokens.colorNeutralForeground4}`\n});\nconst useSizeStyles = makeStyles({\n    'extra-small': {\n        width: '20px',\n        height: '20px'\n    },\n    small: {\n        width: '24px',\n        height: '24px'\n    },\n    medium: {\n        width: '28px',\n        height: '28px'\n    },\n    large: {\n        width: '32px',\n        height: '32px'\n    }\n});\nconst useShapeStyles = makeStyles({\n    rounded: {\n        borderRadius: tokens.borderRadiusMedium,\n        ...createCustomFocusIndicatorStyle({\n            borderRadius: tokens.borderRadiusMedium\n        })\n    },\n    circular: {\n        borderRadius: tokens.borderRadiusCircular,\n        ...createCustomFocusIndicatorStyle({\n            borderRadius: tokens.borderRadiusCircular\n        })\n    },\n    square: {\n        borderRadius: tokens.borderRadiusNone,\n        ...createCustomFocusIndicatorStyle({\n            borderRadius: tokens.borderRadiusNone\n        })\n    }\n});\n/**\n * Apply styling to the EmptySwatch slots based on the state\n */ export const useEmptySwatchStyles_unstable = (state)=>{\n    const styles = useStyles();\n    const sizeStyles = useSizeStyles();\n    const shapeStyles = useShapeStyles();\n    var _state_size;\n    const size = (_state_size = state.size) !== null && _state_size !== void 0 ? _state_size : 'medium';\n    var _state_shape;\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(emptySwatchClassNames.root, styles, sizeStyles[size], shapeStyles[(_state_shape = state.shape) !== null && _state_shape !== void 0 ? _state_shape : 'square'], state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,aAAA,sIAGrB,CAAC;AACF,MAAMQ,aAAa,gBAAGP,QAAA;EAAA;IAAAQ,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAF,MAAA;IAAAC,OAAA;EAAA;EAAAE,MAAA;IAAAH,MAAA;IAAAC,OAAA;EAAA;EAAAG,KAAA;IAAAJ,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAI,CAAA;AAAA,CAiBrB,CAAC;AACF,MAAMC,cAAc,gBAAGd,QAAA;EAAAe,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAV,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAE,MAAA;IAAAX,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAZ,CAAA;IAAAe,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAmBtB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,MAAMC,MAAM,GAAGzB,SAAS,CAAC,CAAC;EAC1B,MAAM0B,UAAU,GAAGzB,aAAa,CAAC,CAAC;EAClC,MAAM0B,WAAW,GAAGnB,cAAc,CAAC,CAAC;EACpC,IAAIoB,WAAW;EACf,MAAMC,IAAI,GAAG,CAACD,WAAW,GAAGJ,KAAK,CAACK,IAAI,MAAM,IAAI,IAAID,WAAW,KAAK,KAAK,CAAC,GAAGA,WAAW,GAAG,QAAQ;EACnG,IAAIE,YAAY;EAChB;EACAN,KAAK,CAACzB,IAAI,CAACgC,SAAS,GAAGpC,YAAY,CAACG,qBAAqB,CAACC,IAAI,EAAE0B,MAAM,EAAEC,UAAU,CAACG,IAAI,CAAC,EAAEF,WAAW,CAAC,CAACG,YAAY,GAAGN,KAAK,CAACQ,KAAK,MAAM,IAAI,IAAIF,YAAY,KAAK,KAAK,CAAC,GAAGA,YAAY,GAAG,QAAQ,CAAC,EAAEN,KAAK,CAACzB,IAAI,CAACgC,SAAS,CAAC;EACxN,OAAOP,KAAK;AAChB,CAAC","ignoreList":[]}

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

@@ -1,7 +1,7 @@
 'use client';
-import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
-import { tokens } from '@fluentui/react-theme';
-import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { makeResetStyles, makeStyles, mergeClasses } from "@griffel/react";
+import { tokens } from "@fluentui/react-theme";
+import { createCustomFocusIndicatorStyle } from "@fluentui/react-tabster";
 export const emptySwatchClassNames = {
     root: 'fui-EmptySwatch'
 };
@@ -52,7 +52,6 @@ const useShapeStyles = makeStyles({
 /**
  * Apply styling to the EmptySwatch slots based on the state
  */ export const useEmptySwatchStyles_unstable = (state)=>{
-    'use no memo';
     const styles = useStyles();
     const sizeStyles = useSizeStyles();
     const shapeStyles = useShapeStyles();

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

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

package/lib/components/ImageSwatch/ImageSwatch.js

@@ -1,9 +1,9 @@
 'use client';
-import * as React from 'react';
-import { useImageSwatch_unstable } from './useImageSwatch';
-import { renderImageSwatch_unstable } from './renderImageSwatch';
-import { useImageSwatchStyles_unstable } from './useImageSwatchStyles.styles';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import * as React from "react";
+import { useImageSwatch_unstable } from "./useImageSwatch.js";
+import { renderImageSwatch_unstable } from "./renderImageSwatch.js";
+import { useImageSwatchStyles_unstable } from "./useImageSwatchStyles.styles.js";
+import { useCustomStyleHook_unstable } from "@fluentui/react-shared-contexts";
 /**
  * ImageSwatch component is used to render an images, patterns and textures.
  */ export const ImageSwatch = /*#__PURE__*/ React.forwardRef((props, ref)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ImageSwatch/ImageSwatch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useImageSwatch_unstable } from './useImageSwatch';\nimport { renderImageSwatch_unstable } from './renderImageSwatch';\nimport { useImageSwatchStyles_unstable } from './useImageSwatchStyles.styles';\nimport type { ImageSwatchProps } from './ImageSwatch.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ImageSwatch component is used to render an images, patterns and textures.\n */\nexport const ImageSwatch: ForwardRefComponent<ImageSwatchProps> = React.forwardRef((props, ref) => {\n  const state = useImageSwatch_unstable(props, ref);\n\n  useImageSwatchStyles_unstable(state);\n  useCustomStyleHook_unstable('useImageSwatchStyles_unstable')(state);\n\n  return renderImageSwatch_unstable(state);\n});\n\nImageSwatch.displayName = 'ImageSwatch';\n"],"names":["React","useImageSwatch_unstable","renderImageSwatch_unstable","useImageSwatchStyles_unstable","useCustomStyleHook_unstable","ImageSwatch","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,gCAAgC;AAE9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CL,8BAA8BM;IAC9BL,4BAA4B,iCAAiCK;IAE7D,OAAOP,2BAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/ImageSwatch/ImageSwatch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useImageSwatch_unstable } from './useImageSwatch';\nimport { renderImageSwatch_unstable } from './renderImageSwatch';\nimport { useImageSwatchStyles_unstable } from './useImageSwatchStyles.styles';\nimport type { ImageSwatchProps } from './ImageSwatch.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ImageSwatch component is used to render an images, patterns and textures.\n */\nexport const ImageSwatch: ForwardRefComponent<ImageSwatchProps> = React.forwardRef((props, ref) => {\n  const state = useImageSwatch_unstable(props, ref);\n\n  useImageSwatchStyles_unstable(state);\n  useCustomStyleHook_unstable('useImageSwatchStyles_unstable')(state);\n\n  return renderImageSwatch_unstable(state);\n});\n\nImageSwatch.displayName = 'ImageSwatch';\n"],"names":["React","useImageSwatch_unstable","renderImageSwatch_unstable","useImageSwatchStyles_unstable","useCustomStyleHook_unstable","ImageSwatch","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,QAAQ,sBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,yBAAsB;AACjE,SAASC,6BAA6B,QAAQ,mCAAgC;AAE9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CL,8BAA8BM;IAC9BL,4BAA4B,iCAAiCK;IAE7D,OAAOP,2BAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

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

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

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

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

package/lib/components/ImageSwatch/index.js

@@ -1,4 +1,4 @@
-export { ImageSwatch } from './ImageSwatch';
-export { renderImageSwatch_unstable } from './renderImageSwatch';
-export { useImageSwatch_unstable } from './useImageSwatch';
-export { imageSwatchClassNames, useImageSwatchStyles_unstable } from './useImageSwatchStyles.styles';
+export { ImageSwatch } from "./ImageSwatch.js";
+export { renderImageSwatch_unstable } from "./renderImageSwatch.js";
+export { useImageSwatch_unstable, useImageSwatchBase_unstable } from "./useImageSwatch.js";
+export { imageSwatchClassNames, useImageSwatchStyles_unstable } from "./useImageSwatchStyles.styles.js";

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ImageSwatch/index.ts"],"sourcesContent":["export { ImageSwatch } from './ImageSwatch';\nexport type { ImageSwatchProps, ImageSwatchSlots, ImageSwatchState } from './ImageSwatch.types';\nexport { renderImageSwatch_unstable } from './renderImageSwatch';\nexport { useImageSwatch_unstable } from './useImageSwatch';\nexport { imageSwatchClassNames, useImageSwatchStyles_unstable } from './useImageSwatchStyles.styles';\n"],"names":["ImageSwatch","renderImageSwatch_unstable","useImageSwatch_unstable","imageSwatchClassNames","useImageSwatchStyles_unstable"],"mappings":"AAAA,SAASA,WAAW,QAAQ,gBAAgB;AAE5C,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,qBAAqB,EAAEC,6BAA6B,QAAQ,gCAAgC"}
+{"version":3,"sources":["../src/components/ImageSwatch/index.ts"],"sourcesContent":["export { ImageSwatch } from './ImageSwatch';\nexport type {\n  ImageSwatchBaseProps,\n  ImageSwatchBaseState,\n  ImageSwatchProps,\n  ImageSwatchSlots,\n  ImageSwatchState,\n} from './ImageSwatch.types';\nexport { renderImageSwatch_unstable } from './renderImageSwatch';\nexport { useImageSwatch_unstable, useImageSwatchBase_unstable } from './useImageSwatch';\nexport { imageSwatchClassNames, useImageSwatchStyles_unstable } from './useImageSwatchStyles.styles';\n"],"names":["ImageSwatch","renderImageSwatch_unstable","useImageSwatch_unstable","useImageSwatchBase_unstable","imageSwatchClassNames","useImageSwatchStyles_unstable"],"mappings":"AAAA,SAASA,WAAW,QAAQ,mBAAgB;AAQ5C,SAASC,0BAA0B,QAAQ,yBAAsB;AACjE,SAASC,uBAAuB,EAAEC,2BAA2B,QAAQ,sBAAmB;AACxF,SAASC,qBAAqB,EAAEC,6BAA6B,QAAQ,mCAAgC"}

package/lib/components/ImageSwatch/renderImageSwatch.js

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

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

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

package/lib/components/ImageSwatch/useImageSwatch.js

@@ -1,18 +1,15 @@
 'use client';
-import { getIntrinsicElementProps, slot, useEventCallback, mergeCallbacks } from '@fluentui/react-utilities';
-import { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';
+import { getIntrinsicElementProps, slot, useEventCallback, mergeCallbacks } from "@fluentui/react-utilities";
+import { useSwatchPickerContextValue_unstable } from "../../contexts/swatchPicker.js";
 /**
- * Create the state required to render ImageSwatch.
+ * Create the base state required to render unstyled ImageSwatch.
  *
- * The returned state can be modified with hooks such as useImageSwatchStyles_unstable,
- * before being passed to renderImageSwatch_unstable.
+ * The returned state can be modified with hooks before being passed to renderImageSwatch_unstable.
  *
  * @param props - props from this instance of ImageSwatch
  * @param ref - reference to root HTMLDivElement of ImageSwatch
- */ export const useImageSwatch_unstable = (props, ref)=>{
+ */ export const useImageSwatchBase_unstable = (props, ref)=>{
     const { src, value, onClick, style, ...rest } = props;
-    const size = useSwatchPickerContextValue_unstable((ctx)=>ctx.size);
-    const shape = useSwatchPickerContextValue_unstable((ctx)=>ctx.shape);
     const isGrid = useSwatchPickerContextValue_unstable((ctx)=>ctx.isGrid);
     const requestSelectionChange = useSwatchPickerContextValue_unstable((ctx)=>ctx.requestSelectionChange);
     const selected = useSwatchPickerContextValue_unstable((ctx)=>ctx.selectedValue === value);
@@ -44,8 +41,25 @@ import { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicke
             elementType: 'button'
         }),
         value,
-        selected,
-        size,
-        shape
+        selected
+    };
+};
+/**
+ * Create the state required to render ImageSwatch.
+ *
+ * The returned state can be modified with hooks such as useImageSwatchStyles_unstable,
+ * before being passed to renderImageSwatch_unstable.
+ *
+ * @param props - props from this instance of ImageSwatch
+ * @param ref - reference to root HTMLDivElement of ImageSwatch
+ */ export const useImageSwatch_unstable = (props, ref)=>{
+    const sizeFromContext = useSwatchPickerContextValue_unstable((ctx)=>ctx.size);
+    const shapeFromContext = useSwatchPickerContextValue_unstable((ctx)=>ctx.shape);
+    const { size: _size, shape: _shape, ...rest } = props;
+    const baseState = useImageSwatchBase_unstable(rest, ref);
+    return {
+        ...baseState,
+        size: sizeFromContext,
+        shape: shapeFromContext
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ImageSwatch/useImageSwatch.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback, mergeCallbacks } from '@fluentui/react-utilities';\nimport type { ImageSwatchProps, ImageSwatchState } from './ImageSwatch.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\n\n/**\n * Create the state required to render ImageSwatch.\n *\n * The returned state can be modified with hooks such as useImageSwatchStyles_unstable,\n * before being passed to renderImageSwatch_unstable.\n *\n * @param props - props from this instance of ImageSwatch\n * @param ref - reference to root HTMLDivElement of ImageSwatch\n */\nexport const useImageSwatch_unstable = (\n  props: ImageSwatchProps,\n  ref: React.Ref<HTMLButtonElement>,\n): ImageSwatchState => {\n  const { src, value, onClick, style, ...rest } = props;\n  const size = useSwatchPickerContextValue_unstable(ctx => ctx.size);\n  const shape = useSwatchPickerContextValue_unstable(ctx => ctx.shape);\n  const isGrid = useSwatchPickerContextValue_unstable(ctx => ctx.isGrid);\n\n  const requestSelectionChange = useSwatchPickerContextValue_unstable(ctx => ctx.requestSelectionChange);\n  const selected = useSwatchPickerContextValue_unstable(ctx => ctx.selectedValue === value);\n\n  const role = isGrid ? 'gridcell' : 'radio';\n  const ariaSelected = isGrid\n    ? {\n        'aria-selected': selected,\n      }\n    : { 'aria-checked': selected };\n\n  const onImageSwatchClick = useEventCallback(\n    mergeCallbacks(onClick, (event: React.MouseEvent<HTMLButtonElement>) =>\n      requestSelectionChange(event, {\n        selectedValue: value,\n        selectedSwatch: src,\n      }),\n    ),\n  );\n\n  return {\n    components: {\n      root: 'button',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        role,\n        ...ariaSelected,\n        onClick: onImageSwatchClick,\n        ...rest,\n        style: {\n          backgroundImage: `url(${src})`,\n          ...style,\n        },\n      }),\n      { elementType: 'button' },\n    ),\n    value,\n    selected,\n    size,\n    shape,\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","useEventCallback","mergeCallbacks","useSwatchPickerContextValue_unstable","useImageSwatch_unstable","props","ref","src","value","onClick","style","rest","size","ctx","shape","isGrid","requestSelectionChange","selected","selectedValue","role","ariaSelected","onImageSwatchClick","event","selectedSwatch","components","root","always","backgroundImage","elementType"],"mappings":"AAAA;AAGA,SAASA,wBAAwB,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,cAAc,QAAQ,4BAA4B;AAE7G,SAASC,oCAAoC,QAAQ,8BAA8B;AAEnF;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CACrCC,OACAC;IAEA,MAAM,EAAEC,GAAG,EAAEC,KAAK,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGN;IAChD,MAAMO,OAAOT,qCAAqCU,CAAAA,MAAOA,IAAID,IAAI;IACjE,MAAME,QAAQX,qCAAqCU,CAAAA,MAAOA,IAAIC,KAAK;IACnE,MAAMC,SAASZ,qCAAqCU,CAAAA,MAAOA,IAAIE,MAAM;IAErE,MAAMC,yBAAyBb,qCAAqCU,CAAAA,MAAOA,IAAIG,sBAAsB;IACrG,MAAMC,WAAWd,qCAAqCU,CAAAA,MAAOA,IAAIK,aAAa,KAAKV;IAEnF,MAAMW,OAAOJ,SAAS,aAAa;IACnC,MAAMK,eAAeL,SACjB;QACE,iBAAiBE;IACnB,IACA;QAAE,gBAAgBA;IAAS;IAE/B,MAAMI,qBAAqBpB,iBACzBC,eAAeO,SAAS,CAACa,QACvBN,uBAAuBM,OAAO;YAC5BJ,eAAeV;YACfe,gBAAgBhB;QAClB;IAIJ,OAAO;QACLiB,YAAY;YACVC,MAAM;QACR;QACAA,MAAMzB,KAAK0B,MAAM,CACf3B,yBAAyB,UAAU;YACjCO;YACAa;YACA,GAAGC,YAAY;YACfX,SAASY;YACT,GAAGV,IAAI;YACPD,OAAO;gBACLiB,iBAAiB,CAAC,IAAI,EAAEpB,IAAI,CAAC,CAAC;gBAC9B,GAAGG,KAAK;YACV;QACF,IACA;YAAEkB,aAAa;QAAS;QAE1BpB;QACAS;QACAL;QACAE;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/ImageSwatch/useImageSwatch.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback, mergeCallbacks } from '@fluentui/react-utilities';\nimport type {\n  ImageSwatchBaseProps,\n  ImageSwatchBaseState,\n  ImageSwatchProps,\n  ImageSwatchState,\n} from './ImageSwatch.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\n\n/**\n * Create the base state required to render unstyled ImageSwatch.\n *\n * The returned state can be modified with hooks before being passed to renderImageSwatch_unstable.\n *\n * @param props - props from this instance of ImageSwatch\n * @param ref - reference to root HTMLDivElement of ImageSwatch\n */\nexport const useImageSwatchBase_unstable = (\n  props: ImageSwatchBaseProps,\n  ref: React.Ref<HTMLButtonElement>,\n): ImageSwatchBaseState => {\n  const { src, value, onClick, style, ...rest } = props;\n  const isGrid = useSwatchPickerContextValue_unstable(ctx => ctx.isGrid);\n\n  const requestSelectionChange = useSwatchPickerContextValue_unstable(ctx => ctx.requestSelectionChange);\n  const selected = useSwatchPickerContextValue_unstable(ctx => ctx.selectedValue === value);\n\n  const role = isGrid ? 'gridcell' : 'radio';\n  const ariaSelected = isGrid\n    ? {\n        'aria-selected': selected,\n      }\n    : { 'aria-checked': selected };\n\n  const onImageSwatchClick = useEventCallback(\n    mergeCallbacks(onClick, (event: React.MouseEvent<HTMLButtonElement>) =>\n      requestSelectionChange(event, {\n        selectedValue: value,\n        selectedSwatch: src,\n      }),\n    ),\n  );\n\n  return {\n    components: {\n      root: 'button',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        role,\n        ...ariaSelected,\n        onClick: onImageSwatchClick,\n        ...rest,\n        style: {\n          backgroundImage: `url(${src})`,\n          ...style,\n        },\n      }),\n      { elementType: 'button' },\n    ),\n    value,\n    selected,\n  };\n};\n\n/**\n * Create the state required to render ImageSwatch.\n *\n * The returned state can be modified with hooks such as useImageSwatchStyles_unstable,\n * before being passed to renderImageSwatch_unstable.\n *\n * @param props - props from this instance of ImageSwatch\n * @param ref - reference to root HTMLDivElement of ImageSwatch\n */\nexport const useImageSwatch_unstable = (\n  props: ImageSwatchProps,\n  ref: React.Ref<HTMLButtonElement>,\n): ImageSwatchState => {\n  const sizeFromContext = useSwatchPickerContextValue_unstable(ctx => ctx.size);\n  const shapeFromContext = useSwatchPickerContextValue_unstable(ctx => ctx.shape);\n\n  const { size: _size, shape: _shape, ...rest } = props;\n\n  const baseState = useImageSwatchBase_unstable(rest, ref);\n\n  return {\n    ...baseState,\n    size: sizeFromContext,\n    shape: shapeFromContext,\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","useEventCallback","mergeCallbacks","useSwatchPickerContextValue_unstable","useImageSwatchBase_unstable","props","ref","src","value","onClick","style","rest","isGrid","ctx","requestSelectionChange","selected","selectedValue","role","ariaSelected","onImageSwatchClick","event","selectedSwatch","components","root","always","backgroundImage","elementType","useImageSwatch_unstable","sizeFromContext","size","shapeFromContext","shape","_size","_shape","baseState"],"mappings":"AAAA;AAGA,SAASA,wBAAwB,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,cAAc,QAAQ,4BAA4B;AAO7G,SAASC,oCAAoC,QAAQ,iCAA8B;AAEnF;;;;;;;CAOC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,GAAG,EAAEC,KAAK,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGN;IAChD,MAAMO,SAAST,qCAAqCU,CAAAA,MAAOA,IAAID,MAAM;IAErE,MAAME,yBAAyBX,qCAAqCU,CAAAA,MAAOA,IAAIC,sBAAsB;IACrG,MAAMC,WAAWZ,qCAAqCU,CAAAA,MAAOA,IAAIG,aAAa,KAAKR;IAEnF,MAAMS,OAAOL,SAAS,aAAa;IACnC,MAAMM,eAAeN,SACjB;QACE,iBAAiBG;IACnB,IACA;QAAE,gBAAgBA;IAAS;IAE/B,MAAMI,qBAAqBlB,iBACzBC,eAAeO,SAAS,CAACW,QACvBN,uBAAuBM,OAAO;YAC5BJ,eAAeR;YACfa,gBAAgBd;QAClB;IAIJ,OAAO;QACLe,YAAY;YACVC,MAAM;QACR;QACAA,MAAMvB,KAAKwB,MAAM,CACfzB,yBAAyB,UAAU;YACjCO;YACAW;YACA,GAAGC,YAAY;YACfT,SAASU;YACT,GAAGR,IAAI;YACPD,OAAO;gBACLe,iBAAiB,CAAC,IAAI,EAAElB,IAAI,CAAC,CAAC;gBAC9B,GAAGG,KAAK;YACV;QACF,IACA;YAAEgB,aAAa;QAAS;QAE1BlB;QACAO;IACF;AACF,EAAE;AAEF;;;;;;;;CAQC,GACD,OAAO,MAAMY,0BAA0B,CACrCtB,OACAC;IAEA,MAAMsB,kBAAkBzB,qCAAqCU,CAAAA,MAAOA,IAAIgB,IAAI;IAC5E,MAAMC,mBAAmB3B,qCAAqCU,CAAAA,MAAOA,IAAIkB,KAAK;IAE9E,MAAM,EAAEF,MAAMG,KAAK,EAAED,OAAOE,MAAM,EAAE,GAAGtB,MAAM,GAAGN;IAEhD,MAAM6B,YAAY9B,4BAA4BO,MAAML;IAEpD,OAAO;QACL,GAAG4B,SAAS;QACZL,MAAMD;QACNG,OAAOD;IACT;AACF,EAAE"}

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

@@ -1,8 +1,8 @@
 'use client';
 
-import { __styles, mergeClasses, __resetStyles } from '@griffel/react';
-import { tokens } from '@fluentui/react-theme';
-import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { __styles, mergeClasses, __resetStyles } from "@griffel/react";
+import { tokens } from "@fluentui/react-theme";
+import { createCustomFocusIndicatorStyle } from "@fluentui/react-tabster";
 export const imageSwatchClassNames = {
   root: 'fui-ImageSwatch'
 };
@@ -123,8 +123,6 @@ const useShapeStyles = /*#__PURE__*/__styles({
  * Apply styling to the ImageSwatch slots based on the state
  */
 export const useImageSwatchStyles_unstable = state => {
-  'use no memo';
-
   const styles = useStyles();
   const selectedStyles = useStylesSelected();
   const sizeStyles = useSizeStyles();

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

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

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

@@ -1,7 +1,7 @@
 'use client';
-import { makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';
-import { tokens } from '@fluentui/react-theme';
-import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { makeStyles, mergeClasses, makeResetStyles } from "@griffel/react";
+import { tokens } from "@fluentui/react-theme";
+import { createCustomFocusIndicatorStyle } from "@fluentui/react-tabster";
 export const imageSwatchClassNames = {
     root: 'fui-ImageSwatch'
 };
@@ -104,7 +104,6 @@ const useShapeStyles = makeStyles({
 /**
  * Apply styling to the ImageSwatch slots based on the state
  */ export const useImageSwatchStyles_unstable = (state)=>{
-    'use no memo';
     const styles = useStyles();
     const selectedStyles = useStylesSelected();
     const sizeStyles = useSizeStyles();

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ImageSwatch/useImageSwatchStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ImageSwatchSlots, ImageSwatchState } from './ImageSwatch.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n\nexport const imageSwatchClassNames: SlotClassNames<ImageSwatchSlots> = {\n  root: 'fui-ImageSwatch',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeResetStyles({\n  display: 'inline-flex',\n  boxSizing: 'border-box',\n  border: `1px solid ${tokens.colorTransparentStroke}`,\n  backgroundSize: 'cover',\n  backgroundRepeat: 'no-repeat',\n  padding: '0',\n  ':hover': {\n    cursor: 'pointer',\n    border: 'none',\n    boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke1}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`,\n  },\n  ':hover:active': {\n    border: 'none',\n    boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`,\n  },\n  ':focus': {\n    outline: 'none',\n  },\n  ':focus-visible': {\n    outline: 'none',\n  },\n  ...createCustomFocusIndicatorStyle({\n    border: 'none',\n    outline: 'none',\n    boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`,\n  }),\n\n  // High contrast styles\n\n  '@media (forced-colors: active)': {\n    forcedColorAdjust: 'none',\n    ':hover': {\n      boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke2Hover}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`,\n    },\n    ':hover:active': {\n      boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke2Pressed}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`,\n    },\n  },\n});\n\nconst useStylesSelected = makeStyles({\n  selected: {\n    border: 'none',\n    boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke1}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`,\n    ':hover': {\n      boxShadow: `inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorCompoundBrandStrokeHover}, inset 0 0 0 6px ${tokens.colorStrokeFocus1}`,\n    },\n    ':hover:active': {\n      boxShadow: `inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 7px ${tokens.colorStrokeFocus1}`,\n    },\n    ...createCustomFocusIndicatorStyle({\n      boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus2}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`,\n    }),\n    '@media (forced-colors: active)': {\n      boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke2Pressed}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`,\n    },\n  },\n});\n\nconst useSizeStyles = makeStyles({\n  'extra-small': {\n    width: '20px',\n    height: '20px',\n  },\n  small: {\n    width: '24px',\n    height: '24px',\n  },\n  medium: {\n    width: '28px',\n    height: '28px',\n  },\n  large: {\n    width: '32px',\n    height: '32px',\n  },\n});\n\nconst useShapeStyles = makeStyles({\n  rounded: {\n    borderRadius: tokens.borderRadiusMedium,\n    ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusMedium }),\n  },\n  circular: {\n    borderRadius: tokens.borderRadiusCircular,\n    ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusCircular }),\n  },\n  square: {\n    borderRadius: tokens.borderRadiusNone,\n    ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusNone }),\n  },\n});\n\n/**\n * Apply styling to the ImageSwatch slots based on the state\n */\nexport const useImageSwatchStyles_unstable = (state: ImageSwatchState): ImageSwatchState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const selectedStyles = useStylesSelected();\n  const sizeStyles = useSizeStyles();\n  const shapeStyles = useShapeStyles();\n\n  const { size = 'medium', shape = 'square' } = state;\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    imageSwatchClassNames.root,\n    styles,\n    sizeStyles[size],\n    shapeStyles[shape],\n    state.selected && selectedStyles.selected,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","makeResetStyles","tokens","createCustomFocusIndicatorStyle","imageSwatchClassNames","root","useStyles","display","boxSizing","border","colorTransparentStroke","backgroundSize","backgroundRepeat","padding","cursor","boxShadow","strokeWidthThick","colorBrandStroke1","strokeWidthThicker","colorStrokeFocus1","colorCompoundBrandStrokePressed","strokeWidthThickest","outline","colorStrokeFocus2","forcedColorAdjust","colorBrandStroke2Hover","colorBrandStroke2Pressed","useStylesSelected","selected","colorCompoundBrandStrokeHover","useSizeStyles","width","height","small","medium","large","useShapeStyles","rounded","borderRadius","borderRadiusMedium","circular","borderRadiusCircular","square","borderRadiusNone","useImageSwatchStyles_unstable","state","styles","selectedStyles","sizeStyles","shapeStyles","size","shape","className"],"mappings":"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"}
+{"version":3,"sources":["../src/components/ImageSwatch/useImageSwatchStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ImageSwatchSlots, ImageSwatchState } from './ImageSwatch.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n\nexport const imageSwatchClassNames: SlotClassNames<ImageSwatchSlots> = {\n  root: 'fui-ImageSwatch',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeResetStyles({\n  display: 'inline-flex',\n  boxSizing: 'border-box',\n  border: `1px solid ${tokens.colorTransparentStroke}`,\n  backgroundSize: 'cover',\n  backgroundRepeat: 'no-repeat',\n  padding: '0',\n  ':hover': {\n    cursor: 'pointer',\n    border: 'none',\n    boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke1}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`,\n  },\n  ':hover:active': {\n    border: 'none',\n    boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`,\n  },\n  ':focus': {\n    outline: 'none',\n  },\n  ':focus-visible': {\n    outline: 'none',\n  },\n  ...createCustomFocusIndicatorStyle({\n    border: 'none',\n    outline: 'none',\n    boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`,\n  }),\n\n  // High contrast styles\n\n  '@media (forced-colors: active)': {\n    forcedColorAdjust: 'none',\n    ':hover': {\n      boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke2Hover}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`,\n    },\n    ':hover:active': {\n      boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke2Pressed}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`,\n    },\n  },\n});\n\nconst useStylesSelected = makeStyles({\n  selected: {\n    border: 'none',\n    boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke1}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`,\n    ':hover': {\n      boxShadow: `inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorCompoundBrandStrokeHover}, inset 0 0 0 6px ${tokens.colorStrokeFocus1}`,\n    },\n    ':hover:active': {\n      boxShadow: `inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 7px ${tokens.colorStrokeFocus1}`,\n    },\n    ...createCustomFocusIndicatorStyle({\n      boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus2}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`,\n    }),\n    '@media (forced-colors: active)': {\n      boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke2Pressed}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`,\n    },\n  },\n});\n\nconst useSizeStyles = makeStyles({\n  'extra-small': {\n    width: '20px',\n    height: '20px',\n  },\n  small: {\n    width: '24px',\n    height: '24px',\n  },\n  medium: {\n    width: '28px',\n    height: '28px',\n  },\n  large: {\n    width: '32px',\n    height: '32px',\n  },\n});\n\nconst useShapeStyles = makeStyles({\n  rounded: {\n    borderRadius: tokens.borderRadiusMedium,\n    ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusMedium }),\n  },\n  circular: {\n    borderRadius: tokens.borderRadiusCircular,\n    ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusCircular }),\n  },\n  square: {\n    borderRadius: tokens.borderRadiusNone,\n    ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusNone }),\n  },\n});\n\n/**\n * Apply styling to the ImageSwatch slots based on the state\n */\nexport const useImageSwatchStyles_unstable = (state: ImageSwatchState): ImageSwatchState => {\n  const styles = useStyles();\n  const selectedStyles = useStylesSelected();\n  const sizeStyles = useSizeStyles();\n  const shapeStyles = useShapeStyles();\n\n  const { size = 'medium', shape = 'square' } = state;\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    imageSwatchClassNames.root,\n    styles,\n    sizeStyles[size],\n    shapeStyles[shape],\n    state.selected && selectedStyles.selected,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","makeResetStyles","tokens","createCustomFocusIndicatorStyle","imageSwatchClassNames","root","useStyles","display","boxSizing","border","colorTransparentStroke","backgroundSize","backgroundRepeat","padding","cursor","boxShadow","strokeWidthThick","colorBrandStroke1","strokeWidthThicker","colorStrokeFocus1","colorCompoundBrandStrokePressed","strokeWidthThickest","outline","colorStrokeFocus2","forcedColorAdjust","colorBrandStroke2Hover","colorBrandStroke2Pressed","useStylesSelected","selected","colorCompoundBrandStrokeHover","useSizeStyles","width","height","small","medium","large","useShapeStyles","rounded","borderRadius","borderRadiusMedium","circular","borderRadiusCircular","square","borderRadiusNone","useImageSwatchStyles_unstable","state","styles","selectedStyles","sizeStyles","shapeStyles","size","shape","className"],"mappings":"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"}

package/lib/components/SwatchPicker/SwatchPicker.js

@@ -1,10 +1,10 @@
 'use client';
-import * as React from 'react';
-import { useSwatchPicker_unstable } from './useSwatchPicker';
-import { renderSwatchPicker_unstable } from './renderSwatchPicker';
-import { useSwatchPickerStyles_unstable } from './useSwatchPickerStyles.styles';
-import { useSwatchPickerContextValues } from './useSwatchPickerContextValues';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import * as React from "react";
+import { useSwatchPicker_unstable } from "./useSwatchPicker.js";
+import { renderSwatchPicker_unstable } from "./renderSwatchPicker.js";
+import { useSwatchPickerStyles_unstable } from "./useSwatchPickerStyles.styles.js";
+import { useSwatchPickerContextValues } from "./useSwatchPickerContextValues.js";
+import { useCustomStyleHook_unstable } from "@fluentui/react-shared-contexts";
 /**
  * SwatchPicker component - TODO: add more docs
  */ export const SwatchPicker = /*#__PURE__*/ React.forwardRef((props, ref)=>{

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

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

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

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

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

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

package/lib/components/SwatchPicker/index.js

@@ -1,4 +1,4 @@
-export { SwatchPicker } from './SwatchPicker';
-export { renderSwatchPicker_unstable } from './renderSwatchPicker';
-export { useSwatchPicker_unstable } from './useSwatchPicker';
-export { swatchPickerClassNames, useSwatchPickerStyles_unstable } from './useSwatchPickerStyles.styles';
+export { SwatchPicker } from "./SwatchPicker.js";
+export { renderSwatchPicker_unstable } from "./renderSwatchPicker.js";
+export { useSwatchPicker_unstable, useSwatchPickerBase_unstable } from "./useSwatchPicker.js";
+export { swatchPickerClassNames, useSwatchPickerStyles_unstable } from "./useSwatchPickerStyles.styles.js";

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SwatchPicker/index.ts"],"sourcesContent":["export { SwatchPicker } from './SwatchPicker';\nexport type {\n  SwatchPickerOnSelectEventHandler,\n  SwatchPickerOnSelectionChangeData,\n  SwatchPickerProps,\n  SwatchPickerSlots,\n  SwatchPickerState,\n} from './SwatchPicker.types';\nexport { renderSwatchPicker_unstable } from './renderSwatchPicker';\nexport { useSwatchPicker_unstable } from './useSwatchPicker';\nexport { swatchPickerClassNames, useSwatchPickerStyles_unstable } from './useSwatchPickerStyles.styles';\n"],"names":["SwatchPicker","renderSwatchPicker_unstable","useSwatchPicker_unstable","swatchPickerClassNames","useSwatchPickerStyles_unstable"],"mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAQ9C,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,iCAAiC"}
+{"version":3,"sources":["../src/components/SwatchPicker/index.ts"],"sourcesContent":["export { SwatchPicker } from './SwatchPicker';\nexport type {\n  SwatchPickerBaseProps,\n  SwatchPickerBaseState,\n  SwatchPickerOnSelectEventHandler,\n  SwatchPickerOnSelectionChangeData,\n  SwatchPickerProps,\n  SwatchPickerSlots,\n  SwatchPickerState,\n} from './SwatchPicker.types';\nexport { renderSwatchPicker_unstable } from './renderSwatchPicker';\nexport { useSwatchPicker_unstable, useSwatchPickerBase_unstable } from './useSwatchPicker';\nexport { swatchPickerClassNames, useSwatchPickerStyles_unstable } from './useSwatchPickerStyles.styles';\n"],"names":["SwatchPicker","renderSwatchPicker_unstable","useSwatchPicker_unstable","useSwatchPickerBase_unstable","swatchPickerClassNames","useSwatchPickerStyles_unstable"],"mappings":"AAAA,SAASA,YAAY,QAAQ,oBAAiB;AAU9C,SAASC,2BAA2B,QAAQ,0BAAuB;AACnE,SAASC,wBAAwB,EAAEC,4BAA4B,QAAQ,uBAAoB;AAC3F,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,oCAAiC"}

package/lib/components/SwatchPicker/renderSwatchPicker.js

@@ -1,6 +1,6 @@
   import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import { assertSlots } from '@fluentui/react-utilities';
-import { SwatchPickerProvider } from '../../contexts/swatchPicker';
+import { assertSlots } from "@fluentui/react-utilities";
+import { SwatchPickerProvider } from "../../contexts/swatchPicker.js";
 /**
  * Render the final JSX of SwatchPicker
  */ export const renderSwatchPicker_unstable = (state, contextValues)=>{

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 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"}
+{"version":3,"sources":["../src/components/SwatchPicker/renderSwatchPicker.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { SwatchPickerProvider } from '../../contexts/swatchPicker';\nimport type { SwatchPickerContextValues } from '../../contexts/swatchPicker';\nimport type { SwatchPickerBaseState, SwatchPickerSlots } from './SwatchPicker.types';\n\n/**\n * Render the final JSX of SwatchPicker\n */\nexport const renderSwatchPicker_unstable = (\n  state: SwatchPickerBaseState,\n  contextValues: SwatchPickerContextValues,\n): JSXElement => {\n  assertSlots<SwatchPickerSlots>(state);\n\n  return (\n    <SwatchPickerProvider value={contextValues.swatchPicker}>\n      <state.root>{state.root.children}</state.root>\n    </SwatchPickerProvider>\n  );\n};\n"],"names":["assertSlots","SwatchPickerProvider","renderSwatchPicker_unstable","state","contextValues","value","swatchPicker","root","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,oBAAoB,QAAQ,iCAA8B;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"}