@fluentui/react-swatch-picker 9.5.4 → 9.6.0

package/lib/components/SwatchPickerRow/index.js

@@ -1,4 +1,4 @@
-export { SwatchPickerRow } from './SwatchPickerRow';
-export { renderSwatchPickerRow_unstable } from './renderSwatchPickerRow';
-export { useSwatchPickerRow_unstable } from './useSwatchPickerRow';
-export { swatchPickerRowClassNames, useSwatchPickerRowStyles_unstable } from './useSwatchPickerRowStyles.styles';
+export { SwatchPickerRow } from "./SwatchPickerRow.js";
+export { renderSwatchPickerRow_unstable } from "./renderSwatchPickerRow.js";
+export { useSwatchPickerRow_unstable, useSwatchPickerRowBase_unstable } from "./useSwatchPickerRow.js";
+export { swatchPickerRowClassNames, useSwatchPickerRowStyles_unstable } from "./useSwatchPickerRowStyles.styles.js";

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SwatchPickerRow/index.ts"],"sourcesContent":["export { SwatchPickerRow } from './SwatchPickerRow';\nexport type { SwatchPickerRowProps, SwatchPickerRowSlots, SwatchPickerRowState } from './SwatchPickerRow.types';\nexport { renderSwatchPickerRow_unstable } from './renderSwatchPickerRow';\nexport { useSwatchPickerRow_unstable } from './useSwatchPickerRow';\nexport { swatchPickerRowClassNames, useSwatchPickerRowStyles_unstable } from './useSwatchPickerRowStyles.styles';\n"],"names":["SwatchPickerRow","renderSwatchPickerRow_unstable","useSwatchPickerRow_unstable","swatchPickerRowClassNames","useSwatchPickerRowStyles_unstable"],"mappings":"AAAA,SAASA,eAAe,QAAQ,oBAAoB;AAEpD,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,yBAAyB,EAAEC,iCAAiC,QAAQ,oCAAoC"}
+{"version":3,"sources":["../src/components/SwatchPickerRow/index.ts"],"sourcesContent":["export { SwatchPickerRow } from './SwatchPickerRow';\nexport type {\n  SwatchPickerRowBaseProps,\n  SwatchPickerRowBaseState,\n  SwatchPickerRowProps,\n  SwatchPickerRowSlots,\n  SwatchPickerRowState,\n} from './SwatchPickerRow.types';\nexport { renderSwatchPickerRow_unstable } from './renderSwatchPickerRow';\nexport { useSwatchPickerRow_unstable, useSwatchPickerRowBase_unstable } from './useSwatchPickerRow';\nexport { swatchPickerRowClassNames, useSwatchPickerRowStyles_unstable } from './useSwatchPickerRowStyles.styles';\n"],"names":["SwatchPickerRow","renderSwatchPickerRow_unstable","useSwatchPickerRow_unstable","useSwatchPickerRowBase_unstable","swatchPickerRowClassNames","useSwatchPickerRowStyles_unstable"],"mappings":"AAAA,SAASA,eAAe,QAAQ,uBAAoB;AAQpD,SAASC,8BAA8B,QAAQ,6BAA0B;AACzE,SAASC,2BAA2B,EAAEC,+BAA+B,QAAQ,0BAAuB;AACpG,SAASC,yBAAyB,EAAEC,iCAAiC,QAAQ,uCAAoC"}

package/lib/components/SwatchPickerRow/renderSwatchPickerRow.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 SwatchPickerRow
  */ export const renderSwatchPickerRow_unstable = (state)=>{

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 { 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"}
+{"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 { SwatchPickerRowBaseState, SwatchPickerRowSlots } from './SwatchPickerRow.types';\n\n/**\n * Render the final JSX of SwatchPickerRow\n */\nexport const renderSwatchPickerRow_unstable = (state: SwatchPickerRowBaseState): 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,17 +1,15 @@
 '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 SwatchPickerRow.
+ * Create the base state required to render unstyled SwatchPickerRow.
  *
- * The returned state can be modified with hooks such as useSwatchPickerRowStyles_unstable,
- * before being passed to renderSwatchPickerRow_unstable.
+ * The returned state can be modified with hooks before being passed to renderSwatchPickerRow_unstable.
  *
  * @param props - props from this instance of SwatchPickerRow
  * @param ref - reference to root HTMLDivElement of SwatchPickerRow
- */ export const useSwatchPickerRow_unstable = (props, ref)=>{
+ */ export const useSwatchPickerRowBase_unstable = (props, ref)=>{
     const { style, ...rest } = props;
-    const spacing = useSwatchPickerContextValue_unstable((ctx)=>ctx.spacing);
     return {
         components: {
             root: 'div'
@@ -22,7 +20,22 @@ import { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicke
             ...rest
         }), {
             elementType: 'div'
-        }),
+        })
+    };
+};
+/**
+ * Create the state required to render SwatchPickerRow.
+ *
+ * The returned state can be modified with hooks such as useSwatchPickerRowStyles_unstable,
+ * before being passed to renderSwatchPickerRow_unstable.
+ *
+ * @param props - props from this instance of SwatchPickerRow
+ * @param ref - reference to root HTMLDivElement of SwatchPickerRow
+ */ export const useSwatchPickerRow_unstable = (props, ref)=>{
+    const spacing = useSwatchPickerContextValue_unstable((ctx)=>ctx.spacing);
+    const baseState = useSwatchPickerRowBase_unstable(props, ref);
+    return {
+        ...baseState,
         spacing
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SwatchPickerRow/useSwatchPickerRow.ts"],"sourcesContent":["'use client';\n\nimport type * 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":["getIntrinsicElementProps","slot","useSwatchPickerContextValue_unstable","useSwatchPickerRow_unstable","props","ref","style","rest","spacing","ctx","components","root","always","role","elementType"],"mappings":"AAAA;AAGA,SAASA,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 type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type {\n  SwatchPickerRowBaseProps,\n  SwatchPickerRowBaseState,\n  SwatchPickerRowProps,\n  SwatchPickerRowState,\n} from './SwatchPickerRow.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\n\n/**\n * Create the base state required to render unstyled SwatchPickerRow.\n *\n * The returned state can be modified with hooks 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 useSwatchPickerRowBase_unstable = (\n  props: SwatchPickerRowBaseProps,\n  ref: React.Ref<HTMLDivElement>,\n): SwatchPickerRowBaseState => {\n  const { style, ...rest } = props;\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  };\n};\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 spacing = useSwatchPickerContextValue_unstable(ctx => ctx.spacing);\n  const baseState = useSwatchPickerRowBase_unstable(props, ref);\n\n  return {\n    ...baseState,\n    spacing,\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","useSwatchPickerContextValue_unstable","useSwatchPickerRowBase_unstable","props","ref","style","rest","components","root","always","role","elementType","useSwatchPickerRow_unstable","spacing","ctx","baseState"],"mappings":"AAAA;AAGA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAO3E,SAASC,oCAAoC,QAAQ,iCAA8B;AAEnF;;;;;;;CAOC,GACD,OAAO,MAAMC,kCAAkC,CAC7CC,OACAC;IAEA,MAAM,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGH;IAE3B,OAAO;QACLI,YAAY;YACVC,MAAM;QACR;QACAA,MAAMR,KAAKS,MAAM,CACfV,yBAAyB,OAAO;YAC9BK;YACAM,MAAM;YACN,GAAGJ,IAAI;QACT,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE;AAEF;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCT,OACAC;IAEA,MAAMS,UAAUZ,qCAAqCa,CAAAA,MAAOA,IAAID,OAAO;IACvE,MAAME,YAAYb,gCAAgCC,OAAOC;IAEzD,OAAO;QACL,GAAGW,SAAS;QACZF;IACF;AACF,EAAE"}

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

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

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

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

package/lib/contexts/index.js

@@ -1,2 +1,2 @@
-export { SwatchPickerProvider, swatchPickerContextDefaultValue, useSwatchPickerContextValue_unstable } from './swatchPicker';
-export { useSwatchPickerContextValues } from '../components/SwatchPicker/useSwatchPickerContextValues';
+export { SwatchPickerProvider, swatchPickerContextDefaultValue, useSwatchPickerContextValue_unstable } from "./swatchPicker.js";
+export { useSwatchPickerContextValues } from "../components/SwatchPicker/useSwatchPickerContextValues.js";

package/lib/contexts/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export type { SwatchPickerContextValue, SwatchPickerContextValues } from './swatchPicker';\nexport {\n  SwatchPickerProvider,\n  swatchPickerContextDefaultValue,\n  useSwatchPickerContextValue_unstable,\n} from './swatchPicker';\nexport { useSwatchPickerContextValues } from '../components/SwatchPicker/useSwatchPickerContextValues';\n"],"names":["SwatchPickerProvider","swatchPickerContextDefaultValue","useSwatchPickerContextValue_unstable","useSwatchPickerContextValues"],"mappings":"AACA,SACEA,oBAAoB,EACpBC,+BAA+B,EAC/BC,oCAAoC,QAC/B,iBAAiB;AACxB,SAASC,4BAA4B,QAAQ,0DAA0D"}
+{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export type { SwatchPickerContextValue, SwatchPickerContextValues } from './swatchPicker';\nexport {\n  SwatchPickerProvider,\n  swatchPickerContextDefaultValue,\n  useSwatchPickerContextValue_unstable,\n} from './swatchPicker';\nexport { useSwatchPickerContextValues } from '../components/SwatchPicker/useSwatchPickerContextValues';\n"],"names":["SwatchPickerProvider","swatchPickerContextDefaultValue","useSwatchPickerContextValue_unstable","useSwatchPickerContextValues"],"mappings":"AACA,SACEA,oBAAoB,EACpBC,+BAA+B,EAC/BC,oCAAoC,QAC/B,oBAAiB;AACxB,SAASC,4BAA4B,QAAQ,6DAA0D"}

package/lib/contexts/swatchPicker.js

@@ -1,5 +1,5 @@
 'use client';
-import { createContext, useContextSelector } from '@fluentui/react-context-selector';
+import { createContext, useContextSelector } from "@fluentui/react-context-selector";
 export const swatchPickerContextDefaultValue = {
     requestSelectionChange: ()=>{
     /*noop*/ },

package/lib/index.js

@@ -1,7 +1,7 @@
-export { SwatchPicker, renderSwatchPicker_unstable, useSwatchPickerStyles_unstable, useSwatchPicker_unstable, swatchPickerClassNames } from './SwatchPicker';
-export { SwatchPickerProvider, swatchPickerContextDefaultValue, useSwatchPickerContextValue_unstable, useSwatchPickerContextValues } from './contexts';
-export { ColorSwatch, renderColorSwatch_unstable, useColorSwatchStyles_unstable, useColorSwatch_unstable, colorSwatchClassNames, swatchCSSVars } from './ColorSwatch';
-export { ImageSwatch, renderImageSwatch_unstable, useImageSwatchStyles_unstable, useImageSwatch_unstable, imageSwatchClassNames } from './ImageSwatch';
-export { SwatchPickerRow, renderSwatchPickerRow_unstable, useSwatchPickerRowStyles_unstable, useSwatchPickerRow_unstable, swatchPickerRowClassNames } from './SwatchPickerRow';
-export { renderSwatchPickerGrid } from './utils/renderUtils';
-export { EmptySwatch, renderEmptySwatch_unstable, useEmptySwatchStyles_unstable, useEmptySwatch_unstable, emptySwatchClassNames } from './EmptySwatch';
+export { SwatchPicker, renderSwatchPicker_unstable, useSwatchPickerStyles_unstable, useSwatchPicker_unstable, useSwatchPickerBase_unstable, swatchPickerClassNames } from "./SwatchPicker.js";
+export { SwatchPickerProvider, swatchPickerContextDefaultValue, useSwatchPickerContextValue_unstable, useSwatchPickerContextValues } from "./contexts/index.js";
+export { ColorSwatch, renderColorSwatch_unstable, useColorSwatchStyles_unstable, useColorSwatch_unstable, useColorSwatchBase_unstable, colorSwatchClassNames, swatchCSSVars } from "./ColorSwatch.js";
+export { ImageSwatch, renderImageSwatch_unstable, useImageSwatchStyles_unstable, useImageSwatch_unstable, useImageSwatchBase_unstable, imageSwatchClassNames } from "./ImageSwatch.js";
+export { SwatchPickerRow, renderSwatchPickerRow_unstable, useSwatchPickerRowStyles_unstable, useSwatchPickerRowBase_unstable, useSwatchPickerRow_unstable, swatchPickerRowClassNames } from "./SwatchPickerRow.js";
+export { renderSwatchPickerGrid } from "./utils/renderUtils.js";
+export { EmptySwatch, renderEmptySwatch_unstable, useEmptySwatchStyles_unstable, useEmptySwatch_unstable, useEmptySwatchBase_unstable, emptySwatchClassNames } from "./EmptySwatch.js";

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  SwatchPicker,\n  renderSwatchPicker_unstable,\n  useSwatchPickerStyles_unstable,\n  useSwatchPicker_unstable,\n  swatchPickerClassNames,\n} from './SwatchPicker';\nexport {\n  SwatchPickerProvider,\n  swatchPickerContextDefaultValue,\n  useSwatchPickerContextValue_unstable,\n  useSwatchPickerContextValues,\n} from './contexts';\nexport type { SwatchPickerContextValue, SwatchPickerContextValues } from './contexts';\nexport type {\n  SwatchPickerProps,\n  SwatchPickerSlots,\n  SwatchPickerState,\n  SwatchPickerOnSelectionChangeData,\n  SwatchPickerOnSelectEventHandler,\n} from './SwatchPicker';\nexport {\n  ColorSwatch,\n  renderColorSwatch_unstable,\n  useColorSwatchStyles_unstable,\n  useColorSwatch_unstable,\n  colorSwatchClassNames,\n  swatchCSSVars,\n} from './ColorSwatch';\nexport type { ColorSwatchProps, ColorSwatchSlots, ColorSwatchState } from './ColorSwatch';\nexport {\n  ImageSwatch,\n  renderImageSwatch_unstable,\n  useImageSwatchStyles_unstable,\n  useImageSwatch_unstable,\n  imageSwatchClassNames,\n} from './ImageSwatch';\nexport type { ImageSwatchProps, ImageSwatchSlots, ImageSwatchState } from './ImageSwatch';\nexport type { SwatchPickerRowProps, SwatchPickerRowSlots, SwatchPickerRowState } from './SwatchPickerRow';\nexport {\n  SwatchPickerRow,\n  renderSwatchPickerRow_unstable,\n  useSwatchPickerRowStyles_unstable,\n  useSwatchPickerRow_unstable,\n  swatchPickerRowClassNames,\n} from './SwatchPickerRow';\nexport { renderSwatchPickerGrid } from './utils/renderUtils';\nexport type { SwatchProps, SwatchPickerGridProps } from './utils/renderUtils';\nexport {\n  EmptySwatch,\n  renderEmptySwatch_unstable,\n  useEmptySwatchStyles_unstable,\n  useEmptySwatch_unstable,\n  emptySwatchClassNames,\n} from './EmptySwatch';\nexport type { EmptySwatchProps, EmptySwatchSlots, EmptySwatchState } from './EmptySwatch';\n"],"names":["SwatchPicker","renderSwatchPicker_unstable","useSwatchPickerStyles_unstable","useSwatchPicker_unstable","swatchPickerClassNames","SwatchPickerProvider","swatchPickerContextDefaultValue","useSwatchPickerContextValue_unstable","useSwatchPickerContextValues","ColorSwatch","renderColorSwatch_unstable","useColorSwatchStyles_unstable","useColorSwatch_unstable","colorSwatchClassNames","swatchCSSVars","ImageSwatch","renderImageSwatch_unstable","useImageSwatchStyles_unstable","useImageSwatch_unstable","imageSwatchClassNames","SwatchPickerRow","renderSwatchPickerRow_unstable","useSwatchPickerRowStyles_unstable","useSwatchPickerRow_unstable","swatchPickerRowClassNames","renderSwatchPickerGrid","EmptySwatch","renderEmptySwatch_unstable","useEmptySwatchStyles_unstable","useEmptySwatch_unstable","emptySwatchClassNames"],"mappings":"AAAA,SACEA,YAAY,EACZC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,wBAAwB,EACxBC,sBAAsB,QACjB,iBAAiB;AACxB,SACEC,oBAAoB,EACpBC,+BAA+B,EAC/BC,oCAAoC,EACpCC,4BAA4B,QACvB,aAAa;AASpB,SACEC,WAAW,EACXC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,EACvBC,qBAAqB,EACrBC,aAAa,QACR,gBAAgB;AAEvB,SACEC,WAAW,EACXC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,EACvBC,qBAAqB,QAChB,gBAAgB;AAGvB,SACEC,eAAe,EACfC,8BAA8B,EAC9BC,iCAAiC,EACjCC,2BAA2B,EAC3BC,yBAAyB,QACpB,oBAAoB;AAC3B,SAASC,sBAAsB,QAAQ,sBAAsB;AAE7D,SACEC,WAAW,EACXC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,EACvBC,qBAAqB,QAChB,gBAAgB"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  SwatchPicker,\n  renderSwatchPicker_unstable,\n  useSwatchPickerStyles_unstable,\n  useSwatchPicker_unstable,\n  useSwatchPickerBase_unstable,\n  swatchPickerClassNames,\n} from './SwatchPicker';\nexport {\n  SwatchPickerProvider,\n  swatchPickerContextDefaultValue,\n  useSwatchPickerContextValue_unstable,\n  useSwatchPickerContextValues,\n} from './contexts';\nexport type { SwatchPickerContextValue, SwatchPickerContextValues } from './contexts';\nexport type {\n  SwatchPickerBaseProps,\n  SwatchPickerBaseState,\n  SwatchPickerProps,\n  SwatchPickerSlots,\n  SwatchPickerState,\n  SwatchPickerOnSelectionChangeData,\n  SwatchPickerOnSelectEventHandler,\n} from './SwatchPicker';\nexport {\n  ColorSwatch,\n  renderColorSwatch_unstable,\n  useColorSwatchStyles_unstable,\n  useColorSwatch_unstable,\n  useColorSwatchBase_unstable,\n  colorSwatchClassNames,\n  swatchCSSVars,\n} from './ColorSwatch';\nexport type {\n  ColorSwatchBaseProps,\n  ColorSwatchBaseState,\n  ColorSwatchProps,\n  ColorSwatchSlots,\n  ColorSwatchState,\n} from './ColorSwatch';\nexport {\n  ImageSwatch,\n  renderImageSwatch_unstable,\n  useImageSwatchStyles_unstable,\n  useImageSwatch_unstable,\n  useImageSwatchBase_unstable,\n  imageSwatchClassNames,\n} from './ImageSwatch';\nexport type {\n  ImageSwatchBaseProps,\n  ImageSwatchBaseState,\n  ImageSwatchProps,\n  ImageSwatchSlots,\n  ImageSwatchState,\n} from './ImageSwatch';\nexport type {\n  SwatchPickerRowBaseProps,\n  SwatchPickerRowBaseState,\n  SwatchPickerRowProps,\n  SwatchPickerRowSlots,\n  SwatchPickerRowState,\n} from './SwatchPickerRow';\nexport {\n  SwatchPickerRow,\n  renderSwatchPickerRow_unstable,\n  useSwatchPickerRowStyles_unstable,\n  useSwatchPickerRowBase_unstable,\n  useSwatchPickerRow_unstable,\n  swatchPickerRowClassNames,\n} from './SwatchPickerRow';\nexport { renderSwatchPickerGrid } from './utils/renderUtils';\nexport type { SwatchProps, SwatchPickerGridProps } from './utils/renderUtils';\nexport {\n  EmptySwatch,\n  renderEmptySwatch_unstable,\n  useEmptySwatchStyles_unstable,\n  useEmptySwatch_unstable,\n  useEmptySwatchBase_unstable,\n  emptySwatchClassNames,\n} from './EmptySwatch';\nexport type {\n  EmptySwatchBaseProps,\n  EmptySwatchBaseState,\n  EmptySwatchProps,\n  EmptySwatchSlots,\n  EmptySwatchState,\n} from './EmptySwatch';\n"],"names":["SwatchPicker","renderSwatchPicker_unstable","useSwatchPickerStyles_unstable","useSwatchPicker_unstable","useSwatchPickerBase_unstable","swatchPickerClassNames","SwatchPickerProvider","swatchPickerContextDefaultValue","useSwatchPickerContextValue_unstable","useSwatchPickerContextValues","ColorSwatch","renderColorSwatch_unstable","useColorSwatchStyles_unstable","useColorSwatch_unstable","useColorSwatchBase_unstable","colorSwatchClassNames","swatchCSSVars","ImageSwatch","renderImageSwatch_unstable","useImageSwatchStyles_unstable","useImageSwatch_unstable","useImageSwatchBase_unstable","imageSwatchClassNames","SwatchPickerRow","renderSwatchPickerRow_unstable","useSwatchPickerRowStyles_unstable","useSwatchPickerRowBase_unstable","useSwatchPickerRow_unstable","swatchPickerRowClassNames","renderSwatchPickerGrid","EmptySwatch","renderEmptySwatch_unstable","useEmptySwatchStyles_unstable","useEmptySwatch_unstable","useEmptySwatchBase_unstable","emptySwatchClassNames"],"mappings":"AAAA,SACEA,YAAY,EACZC,2BAA2B,EAC3BC,8BAA8B,EAC9BC,wBAAwB,EACxBC,4BAA4B,EAC5BC,sBAAsB,QACjB,oBAAiB;AACxB,SACEC,oBAAoB,EACpBC,+BAA+B,EAC/BC,oCAAoC,EACpCC,4BAA4B,QACvB,sBAAa;AAWpB,SACEC,WAAW,EACXC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,EACvBC,2BAA2B,EAC3BC,qBAAqB,EACrBC,aAAa,QACR,mBAAgB;AAQvB,SACEC,WAAW,EACXC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,EACvBC,2BAA2B,EAC3BC,qBAAqB,QAChB,mBAAgB;AAevB,SACEC,eAAe,EACfC,8BAA8B,EAC9BC,iCAAiC,EACjCC,+BAA+B,EAC/BC,2BAA2B,EAC3BC,yBAAyB,QACpB,uBAAoB;AAC3B,SAASC,sBAAsB,QAAQ,yBAAsB;AAE7D,SACEC,WAAW,EACXC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,EACvBC,2BAA2B,EAC3BC,qBAAqB,QAChB,mBAAgB"}

package/lib/utils/renderUtils.js

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { ColorSwatch, SwatchPickerRow, ImageSwatch } from '../';
+import * as React from "react";
+import { ColorSwatch, SwatchPickerRow, ImageSwatch } from "../index.js";
 export const renderSwatchPickerGrid = (props)=>{
     const { items, columnCount, renderRow, renderSwatch } = props;
     const _renderRow = renderRow || (({ children, rowId })=>/*#__PURE__*/ React.createElement(SwatchPickerRow, {

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): 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"}
+{"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,cAAM;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/{ColorSwatch.js → ColorSwatch.cjs}

@@ -21,6 +21,9 @@ _export(exports, {
     swatchCSSVars: function() {
         return _index.swatchCSSVars;
     },
+    useColorSwatchBase_unstable: function() {
+        return _index.useColorSwatchBase_unstable;
+    },
     useColorSwatchStyles_unstable: function() {
         return _index.useColorSwatchStyles_unstable;
     },
@@ -28,4 +31,4 @@ _export(exports, {
         return _index.useColorSwatch_unstable;
     }
 });
-const _index = require("./components/ColorSwatch/index");
+const _index = require("./components/ColorSwatch/index.cjs");

package/lib-commonjs/ColorSwatch.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ColorSwatch.ts"],"sourcesContent":["export type {\n  ColorSwatchBaseProps,\n  ColorSwatchBaseState,\n  ColorSwatchProps,\n  ColorSwatchSlots,\n  ColorSwatchState,\n} from './components/ColorSwatch/index';\nexport {\n  ColorSwatch,\n  colorSwatchClassNames,\n  renderColorSwatch_unstable,\n  swatchCSSVars,\n  useColorSwatchStyles_unstable,\n  useColorSwatch_unstable,\n  useColorSwatchBase_unstable,\n} from './components/ColorSwatch/index';\n"],"names":["ColorSwatch","colorSwatchClassNames","renderColorSwatch_unstable","swatchCSSVars","useColorSwatchStyles_unstable","useColorSwatch_unstable","useColorSwatchBase_unstable"],"mappings":";;;;;;;;;;;;eAQEA,kBAAW;;;eACXC,4BAAqB;;;eACrBC,iCAA0B;;;eAC1BC,oBAAa;;;eAGbG,kCAA2B;;;eAF3BF,oCAA6B;;;eAC7BC,8BAAuB;;;uBAElB,oCAAiC"}

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

@@ -18,6 +18,9 @@ _export(exports, {
     renderEmptySwatch_unstable: function() {
         return _index.renderEmptySwatch_unstable;
     },
+    useEmptySwatchBase_unstable: function() {
+        return _index.useEmptySwatchBase_unstable;
+    },
     useEmptySwatchStyles_unstable: function() {
         return _index.useEmptySwatchStyles_unstable;
     },
@@ -25,4 +28,4 @@ _export(exports, {
         return _index.useEmptySwatch_unstable;
     }
 });
-const _index = require("./components/EmptySwatch/index");
+const _index = require("./components/EmptySwatch/index.cjs");

package/lib-commonjs/EmptySwatch.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/EmptySwatch.ts"],"sourcesContent":["export type {\n  EmptySwatchBaseProps,\n  EmptySwatchBaseState,\n  EmptySwatchProps,\n  EmptySwatchSlots,\n  EmptySwatchState,\n} from './components/EmptySwatch/index';\nexport {\n  EmptySwatch,\n  emptySwatchClassNames,\n  renderEmptySwatch_unstable,\n  useEmptySwatchBase_unstable,\n  useEmptySwatchStyles_unstable,\n  useEmptySwatch_unstable,\n} from './components/EmptySwatch/index';\n"],"names":["EmptySwatch","emptySwatchClassNames","renderEmptySwatch_unstable","useEmptySwatchBase_unstable","useEmptySwatchStyles_unstable","useEmptySwatch_unstable"],"mappings":";;;;;;;;;;;;eAQEA,kBAAW;;;eACXC,4BAAqB;;;eACrBC,iCAA0B;;;eAC1BC,kCAA2B;;;eAC3BC,oCAA6B;;;eAC7BC,8BAAuB;;;uBAClB,oCAAiC"}

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

@@ -18,6 +18,9 @@ _export(exports, {
     renderImageSwatch_unstable: function() {
         return _index.renderImageSwatch_unstable;
     },
+    useImageSwatchBase_unstable: function() {
+        return _index.useImageSwatchBase_unstable;
+    },
     useImageSwatchStyles_unstable: function() {
         return _index.useImageSwatchStyles_unstable;
     },
@@ -25,4 +28,4 @@ _export(exports, {
         return _index.useImageSwatch_unstable;
     }
 });
-const _index = require("./components/ImageSwatch/index");
+const _index = require("./components/ImageSwatch/index.cjs");

package/lib-commonjs/ImageSwatch.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ImageSwatch.ts"],"sourcesContent":["export type {\n  ImageSwatchBaseProps,\n  ImageSwatchBaseState,\n  ImageSwatchProps,\n  ImageSwatchSlots,\n  ImageSwatchState,\n} from './components/ImageSwatch/index';\nexport {\n  ImageSwatch,\n  imageSwatchClassNames,\n  renderImageSwatch_unstable,\n  useImageSwatchStyles_unstable,\n  useImageSwatch_unstable,\n  useImageSwatchBase_unstable,\n} from './components/ImageSwatch/index';\n"],"names":["ImageSwatch","imageSwatchClassNames","renderImageSwatch_unstable","useImageSwatchStyles_unstable","useImageSwatch_unstable","useImageSwatchBase_unstable"],"mappings":";;;;;;;;;;;;eAQEA,kBAAW;;;eACXC,4BAAqB;;;eACrBC,iCAA0B;;;eAG1BG,kCAA2B;;;eAF3BF,oCAA6B;;;eAC7BC,8BAAuB;;;uBAElB,oCAAiC"}

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

@@ -18,6 +18,9 @@ _export(exports, {
     swatchPickerClassNames: function() {
         return _index.swatchPickerClassNames;
     },
+    useSwatchPickerBase_unstable: function() {
+        return _index.useSwatchPickerBase_unstable;
+    },
     useSwatchPickerStyles_unstable: function() {
         return _index.useSwatchPickerStyles_unstable;
     },
@@ -25,4 +28,4 @@ _export(exports, {
         return _index.useSwatchPicker_unstable;
     }
 });
-const _index = require("./components/SwatchPicker/index");
+const _index = require("./components/SwatchPicker/index.cjs");

package/lib-commonjs/SwatchPicker.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/SwatchPicker.ts"],"sourcesContent":["export type {\n  SwatchPickerBaseProps,\n  SwatchPickerBaseState,\n  SwatchPickerOnSelectEventHandler,\n  SwatchPickerOnSelectionChangeData,\n  SwatchPickerProps,\n  SwatchPickerSlots,\n  SwatchPickerState,\n} from './components/SwatchPicker/index';\nexport {\n  SwatchPicker,\n  renderSwatchPicker_unstable,\n  swatchPickerClassNames,\n  useSwatchPickerStyles_unstable,\n  useSwatchPicker_unstable,\n  useSwatchPickerBase_unstable,\n} from './components/SwatchPicker/index';\n"],"names":["SwatchPicker","renderSwatchPicker_unstable","swatchPickerClassNames","useSwatchPickerStyles_unstable","useSwatchPicker_unstable","useSwatchPickerBase_unstable"],"mappings":";;;;;;;;;;;;eAUEA,mBAAY;;;eACZC,kCAA2B;;;eAC3BC,6BAAsB;;;eAGtBG,mCAA4B;;;eAF5BF,qCAA8B;;;eAC9BC,+BAAwB;;;uBAEnB,qCAAkC"}

package/lib-commonjs/{SwatchPickerRow.js → SwatchPickerRow.cjs}

@@ -18,6 +18,9 @@ _export(exports, {
     swatchPickerRowClassNames: function() {
         return _index.swatchPickerRowClassNames;
     },
+    useSwatchPickerRowBase_unstable: function() {
+        return _index.useSwatchPickerRowBase_unstable;
+    },
     useSwatchPickerRowStyles_unstable: function() {
         return _index.useSwatchPickerRowStyles_unstable;
     },
@@ -25,4 +28,4 @@ _export(exports, {
         return _index.useSwatchPickerRow_unstable;
     }
 });
-const _index = require("./components/SwatchPickerRow/index");
+const _index = require("./components/SwatchPickerRow/index.cjs");

package/lib-commonjs/SwatchPickerRow.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/SwatchPickerRow.ts"],"sourcesContent":["export type {\n  SwatchPickerRowBaseProps,\n  SwatchPickerRowBaseState,\n  SwatchPickerRowProps,\n  SwatchPickerRowSlots,\n  SwatchPickerRowState,\n} from './components/SwatchPickerRow/index';\nexport {\n  SwatchPickerRow,\n  renderSwatchPickerRow_unstable,\n  swatchPickerRowClassNames,\n  useSwatchPickerRowStyles_unstable,\n  useSwatchPickerRow_unstable,\n  useSwatchPickerRowBase_unstable,\n} from './components/SwatchPickerRow/index';\n"],"names":["SwatchPickerRow","renderSwatchPickerRow_unstable","swatchPickerRowClassNames","useSwatchPickerRowStyles_unstable","useSwatchPickerRow_unstable","useSwatchPickerRowBase_unstable"],"mappings":";;;;;;;;;;;;eAQEA,sBAAe;;;eACfC,qCAA8B;;;eAC9BC,gCAAyB;;;eAGzBG,sCAA+B;;;eAF/BF,wCAAiC;;;eACjCC,kCAA2B;;;uBAEtB,wCAAqC"}

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

@@ -11,9 +11,9 @@ Object.defineProperty(exports, "ColorSwatch", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _useColorSwatch = require("./useColorSwatch");
-const _renderColorSwatch = require("./renderColorSwatch");
-const _useColorSwatchStylesstyles = require("./useColorSwatchStyles.styles");
+const _useColorSwatch = require("./useColorSwatch.cjs");
+const _renderColorSwatch = require("./renderColorSwatch.cjs");
+const _useColorSwatchStylesstyles = require("./useColorSwatchStyles.styles.cjs");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const ColorSwatch = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useColorSwatch.useColorSwatch_unstable)(props, ref);

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

@@ -1 +1 @@
-{"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"}
+{"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,sBAAmB;mCAChB,yBAAsB;4CACnB,mCAAgC;qCAElC,kCAAkC;AAKvE,MAAMK,cAAAA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQR,uCAAAA,EAAwBM,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAC9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOP,6CAAAA,EAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

package/lib-commonjs/components/ColorSwatch/ColorSwatch.constants.cjs

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "swatchCSSVars", {
+    enumerable: true,
+    get: function() {
+        return swatchCSSVars;
+    }
+});
+const swatchCSSVars = {
+    color: `--fui-SwatchPicker--color`,
+    borderColor: `--fui-SwatchPicker--borderColor`
+};

package/lib-commonjs/components/ColorSwatch/ColorSwatch.constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorSwatch/ColorSwatch.constants.ts"],"sourcesContent":["export const swatchCSSVars = {\n  color: `--fui-SwatchPicker--color`,\n  borderColor: `--fui-SwatchPicker--borderColor`,\n};\n"],"names":["swatchCSSVars","color","borderColor"],"mappings":";;;;;;;;;;AAAO,MAAMA,gBAAgB;IAC3BC,OAAO,CAAC,yBAAyB,CAAC;IAClCC,aAAa,CAAC,+BAA+B,CAAC;AAChD,EAAE"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorSwatch/ColorSwatch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';\n\nexport type ColorSwatchSlots = {\n  root: NonNullable<Slot<'button'>>;\n  icon?: Slot<'span'>;\n  disabledIcon?: Slot<'span'>;\n};\n\n/**\n * ColorSwatch Props\n */\nexport type ColorSwatchProps = ComponentProps<ColorSwatchSlots> &\n  Pick<SwatchPickerProps, 'size' | 'shape'> & {\n    /**\n     * Border color when contrast is low\n     */\n    borderColor?: string;\n\n    /**\n     * Swatch color\n     */\n    color: string;\n\n    /**\n     * Whether the swatch is disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Swatch value\n     */\n    value: string;\n  };\n\n/**\n * State used in rendering ColorSwatch\n */\nexport type ColorSwatchState = ComponentState<ColorSwatchSlots> &\n  Pick<ColorSwatchProps, 'color' | 'disabled' | 'size' | 'shape' | 'value'> & {\n    selected: boolean;\n  };\n"],"names":[],"mappings":"AAmCA;;CAEC,GACD,WAGI"}
+{"version":3,"sources":["../src/components/ColorSwatch/ColorSwatch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';\n\nexport type ColorSwatchSlots = {\n  root: NonNullable<Slot<'button'>>;\n  icon?: Slot<'span'>;\n  disabledIcon?: Slot<'span'>;\n};\n\n/**\n * ColorSwatch Props\n */\nexport type ColorSwatchProps = ComponentProps<ColorSwatchSlots> &\n  Pick<SwatchPickerProps, 'size' | 'shape'> & {\n    /**\n     * Border color when contrast is low\n     */\n    borderColor?: string;\n\n    /**\n     * Swatch color\n     */\n    color: string;\n\n    /**\n     * Whether the swatch is disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Swatch value\n     */\n    value: string;\n  };\n\nexport type ColorSwatchBaseProps = Omit<ColorSwatchProps, 'size' | 'shape'>;\n\n/**\n * State used in rendering ColorSwatch\n */\nexport type ColorSwatchState = ComponentState<ColorSwatchSlots> &\n  Pick<ColorSwatchProps, 'color' | 'disabled' | 'size' | 'shape' | 'value'> & {\n    selected: boolean;\n  };\n\nexport type ColorSwatchBaseState = Omit<ColorSwatchState, 'size' | 'shape'>;\n"],"names":[],"mappings":""}

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

@@ -19,7 +19,10 @@ _export(exports, {
         return _renderColorSwatch.renderColorSwatch_unstable;
     },
     swatchCSSVars: function() {
-        return _useColorSwatchStylesstyles.swatchCSSVars;
+        return _ColorSwatchconstants.swatchCSSVars;
+    },
+    useColorSwatchBase_unstable: function() {
+        return _useColorSwatch.useColorSwatchBase_unstable;
     },
     useColorSwatchStyles_unstable: function() {
         return _useColorSwatchStylesstyles.useColorSwatchStyles_unstable;
@@ -28,7 +31,8 @@ _export(exports, {
         return _useColorSwatch.useColorSwatch_unstable;
     }
 });
-const _ColorSwatch = require("./ColorSwatch");
-const _renderColorSwatch = require("./renderColorSwatch");
-const _useColorSwatch = require("./useColorSwatch");
-const _useColorSwatchStylesstyles = require("./useColorSwatchStyles.styles");
+const _ColorSwatch = require("./ColorSwatch.cjs");
+const _renderColorSwatch = require("./renderColorSwatch.cjs");
+const _useColorSwatch = require("./useColorSwatch.cjs");
+const _useColorSwatchStylesstyles = require("./useColorSwatchStyles.styles.cjs");
+const _ColorSwatchconstants = require("./ColorSwatch.constants.cjs");

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorSwatch/index.ts"],"sourcesContent":["export { ColorSwatch } from './ColorSwatch';\nexport type {\n  ColorSwatchBaseProps,\n  ColorSwatchBaseState,\n  ColorSwatchProps,\n  ColorSwatchSlots,\n  ColorSwatchState,\n} from './ColorSwatch.types';\nexport { renderColorSwatch_unstable } from './renderColorSwatch';\nexport { useColorSwatch_unstable, useColorSwatchBase_unstable } from './useColorSwatch';\nexport { colorSwatchClassNames, useColorSwatchStyles_unstable } from './useColorSwatchStyles.styles';\nexport { swatchCSSVars } from './ColorSwatch.constants';\n"],"names":["ColorSwatch","renderColorSwatch_unstable","useColorSwatch_unstable","useColorSwatchBase_unstable","colorSwatchClassNames","useColorSwatchStyles_unstable","swatchCSSVars"],"mappings":";;;;;;;;;;;IAASA;uCAAW;;IAUXI;gEAAqB;;;eAFrBH,6CAA0B;;;eAG1BK,mCAAa;;;eAFYH,2CAA2B;;;eAC7BE,yDAA6B;;;eADpDH,uCAAuB;;;6BATJ,mBAAgB;mCAQD,yBAAsB;gCACI,sBAAmB;4CACnB,mCAAgC;sCACvE,6BAA0B"}

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

@@ -0,0 +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 { JSXElement } from '@fluentui/react-utilities';\nimport type { ColorSwatchBaseState, ColorSwatchSlots } from './ColorSwatch.types';\n\n/**\n * Render the final JSX of ColorSwatch\n */\nexport const renderColorSwatch_unstable = (state: ColorSwatchBaseState): 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 → useColorSwatch.cjs}

@@ -3,23 +3,28 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useColorSwatch_unstable", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useColorSwatchBase_unstable: function() {
+        return useColorSwatchBase_unstable;
+    },
+    useColorSwatch_unstable: function() {
         return useColorSwatch_unstable;
     }
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
-const _swatchPicker = require("../../contexts/swatchPicker");
-const _useColorSwatchStylesstyles = require("./useColorSwatchStyles.styles");
+const _swatchPicker = require("../../contexts/swatchPicker.cjs");
 const _reacticons = require("@fluentui/react-icons");
-const _reacttheme = require("@fluentui/react-theme");
-const useColorSwatch_unstable = (props, ref)=>{
-    const { borderColor, color, disabled, disabledIcon, icon, value, onClick, size, shape, style, ...rest } = props;
-    const _size = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.size);
-    const _shape = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.shape);
+const _ColorSwatchconstants = require("./ColorSwatch.constants.cjs");
+const useColorSwatchBase_unstable = (props, ref)=>{
+    const { borderColor, color, disabled, disabledIcon, icon, value, onClick, style, ...rest } = props;
     const isGrid = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.isGrid);
     const requestSelectionChange = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.requestSelectionChange);
     const selected = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.selectedValue === value);
@@ -28,8 +33,8 @@ const useColorSwatch_unstable = (props, ref)=>{
             selectedSwatch: color
         })));
     const rootVariables = {
-        [_useColorSwatchStylesstyles.swatchCSSVars.color]: color,
-        [_useColorSwatchStylesstyles.swatchCSSVars.borderColor]: borderColor !== null && borderColor !== void 0 ? borderColor : _reacttheme.tokens.colorTransparentStroke
+        [_ColorSwatchconstants.swatchCSSVars.color]: color,
+        [_ColorSwatchconstants.swatchCSSVars.borderColor]: borderColor
     };
     const role = isGrid ? 'gridcell' : 'radio';
     const ariaSelected = isGrid ? {
@@ -41,10 +46,6 @@ const useColorSwatch_unstable = (props, ref)=>{
         elementType: 'span'
     });
     const disabledIconShorthand = _reactutilities.slot.optional(disabledIcon, {
-        defaultProps: {
-            children: /*#__PURE__*/ _react.createElement(_reacticons.ProhibitedFilled, null)
-        },
-        renderByDefault: true,
         elementType: 'span'
     });
     return {
@@ -71,10 +72,27 @@ const useColorSwatch_unstable = (props, ref)=>{
         icon: iconShorthand,
         disabledIcon: disabledIconShorthand,
         disabled,
-        size: size !== null && size !== void 0 ? size : _size,
-        shape: shape !== null && shape !== void 0 ? shape : _shape,
         selected,
         color,
         value
     };
 };
+const useColorSwatch_unstable = (props, ref)=>{
+    const sizeFromContext = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.size);
+    const shapeFromContext = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.shape);
+    const { size = sizeFromContext, shape = shapeFromContext, disabledIcon, ...rest } = props;
+    const baseState = useColorSwatchBase_unstable(rest, ref);
+    return {
+        ...baseState,
+        size,
+        shape,
+        disabledIcon: _reactutilities.slot.optional(disabledIcon, {
+            defaultProps: {
+                ...baseState.disabledIcon,
+                children: /*#__PURE__*/ _react.createElement(_reacticons.ProhibitedFilled, null)
+            },
+            renderByDefault: true,
+            elementType: 'span'
+        })
+    };
+};

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

@@ -0,0 +1 @@
+{"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 {\n  ColorSwatchBaseProps,\n  ColorSwatchBaseState,\n  ColorSwatchProps,\n  ColorSwatchState,\n} from './ColorSwatch.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\nimport { ProhibitedFilled } from '@fluentui/react-icons';\nimport { swatchCSSVars } from './ColorSwatch.constants';\n\n/**\n * Create the basee state required to render unstyled ColorSwatch.\n *\n * The returned state can be modified with hooks 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 useColorSwatchBase_unstable = (\n  props: ColorSwatchBaseProps,\n  ref: React.Ref<HTMLButtonElement>,\n): ColorSwatchBaseState => {\n  const { borderColor, color, disabled, disabledIcon, icon, 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 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,\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    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    selected,\n    color,\n    value,\n  };\n};\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 sizeFromContext = useSwatchPickerContextValue_unstable(ctx => ctx.size);\n  const shapeFromContext = useSwatchPickerContextValue_unstable(ctx => ctx.shape);\n  const { size = sizeFromContext, shape = shapeFromContext, disabledIcon, ...rest } = props;\n\n  const baseState = useColorSwatchBase_unstable(rest, ref);\n\n  return {\n    ...baseState,\n    size,\n    shape,\n    disabledIcon: slot.optional(disabledIcon, {\n      defaultProps: {\n        ...baseState.disabledIcon,\n        children: <ProhibitedFilled />,\n      },\n      renderByDefault: true,\n      elementType: 'span',\n    }),\n  };\n};\n"],"names":["React","slot","useEventCallback","getIntrinsicElementProps","mergeCallbacks","useSwatchPickerContextValue_unstable","ProhibitedFilled","swatchCSSVars","useColorSwatchBase_unstable","props","ref","borderColor","color","disabled","disabledIcon","icon","value","onClick","style","rest","isGrid","ctx","requestSelectionChange","selected","selectedValue","onColorSwatchClick","event","selectedSwatch","rootVariables","role","ariaSelected","iconShorthand","optional","elementType","disabledIconShorthand","components","root","always","type","useColorSwatch_unstable","sizeFromContext","size","shapeFromContext","shape","baseState","defaultProps","children","renderByDefault"],"mappings":"AAAA;;;;;;;;;;;;IAsBaQ,2BAAAA;;;IA4EA+B,uBAAAA;;;;;iEAhGU,QAAQ;gCACkD,4BAA4B;8BAOxD,iCAA8B;4BAClD,wBAAwB;sCAC3B,6BAA0B;AAUjD,oCAAoC,CACzC9B,OACAC;IAEA,MAAM,EAAEC,WAAW,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,IAAI,EAAEC,KAAK,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGV;IAC7F,MAAMW,aAASf,kDAAAA,EAAqCgB,CAAAA,MAAOA,IAAID,MAAM;IAErE,MAAME,yBAAyBjB,sDAAAA,EAAqCgB,CAAAA,MAAOA,IAAIC,sBAAsB;IACrG,MAAMC,eAAWlB,kDAAAA,EAAqCgB,CAAAA,MAAOA,IAAIG,aAAa,KAAKR;IAEnF,MAAMS,yBAAqBvB,gCAAAA,MACzBE,8BAAAA,EAAea,SAAS,CAACS,QACvBJ,uBAAuBI,OAAO;YAC5BF,eAAeR;YACfW,gBAAgBf;QAClB;IAIJ,MAAMgB,gBAAgB;QACpB,CAACrB,mCAAAA,CAAcK,KAAK,CAAC,EAAEA;QACvB,CAACL,mCAAAA,CAAcI,WAAW,CAAC,EAAEA;IAC/B;IAEA,MAAMkB,OAAOT,SAAS,aAAa;IACnC,MAAMU,eAAeV,SACjB;QACE,iBAAiBG;IACnB,IACA;QAAE,gBAAgBA;IAAS;IAE/B,MAAMQ,gBAAgB9B,oBAAAA,CAAK+B,QAAQ,CAACjB,MAAM;QAAEkB,aAAa;IAAO;IAChE,MAAMC,wBAAwBjC,oBAAAA,CAAK+B,QAAQ,CAAClB,cAAc;QACxDmB,aAAa;IACf;IAEA,OAAO;QACLE,YAAY;YACVC,MAAM;YACNrB,MAAM;YACND,cAAc;QAChB;QACAsB,MAAMnC,oBAAAA,CAAKoC,MAAM,KACflC,wCAAAA,EAAyB,UAAU;YACjCO;YACAmB;YACA,GAAGC,YAAY;YACfb,SAASQ;YACTa,MAAM;YACNzB;YACA,GAAGM,IAAI;YACPD,OAAO;gBACL,GAAGU,aAAa;gBAChB,GAAGV,KAAK;YACV;QACF,IACA;YAAEe,aAAa;QAAS;QAE1BlB,MAAMgB;QACNjB,cAAcoB;QACdrB;QACAU;QACAX;QACAI;IACF;AACF,EAAE;AAWK,gCAAgC,CACrCP,OACAC;IAEA,MAAM8B,sBAAkBnC,kDAAAA,EAAqCgB,CAAAA,MAAOA,IAAIoB,IAAI;IAC5E,MAAMC,uBAAmBrC,kDAAAA,EAAqCgB,CAAAA,MAAOA,IAAIsB,KAAK;IAC9E,MAAM,EAAEF,OAAOD,eAAe,EAAEG,QAAQD,gBAAgB,EAAE5B,YAAY,EAAE,GAAGK,MAAM,GAAGV;IAEpF,MAAMmC,YAAYpC,4BAA4BW,MAAMT;IAEpD,OAAO;QACL,GAAGkC,SAAS;QACZH;QACAE;QACA7B,cAAcb,oBAAAA,CAAK+B,QAAQ,CAAClB,cAAc;YACxC+B,cAAc;gBACZ,GAAGD,UAAU9B,YAAY;gBACzBgC,UAAAA,WAAAA,GAAU,OAAA,aAAA,CAACxC,4BAAAA,EAAAA;YACb;YACAyC,iBAAiB;YACjBd,aAAa;QACf;IACF;AACF,EAAE"}

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

@@ -13,37 +13,31 @@ _export(exports, {
     colorSwatchClassNames: function() {
         return colorSwatchClassNames;
     },
-    swatchCSSVars: function() {
-        return swatchCSSVars;
-    },
     useColorSwatchStyles_unstable: function() {
         return useColorSwatchStyles_unstable;
     }
 });
 const _react = require("@griffel/react");
+const _ColorSwatchconstants = require("./ColorSwatch.constants.cjs");
 const colorSwatchClassNames = {
     root: 'fui-ColorSwatch',
     icon: 'fui-ColorSwatch__icon',
     disabledIcon: 'fui-ColorSwatch__disabledIcon'
 };
-const swatchCSSVars = {
-    color: `--fui-SwatchPicker--color`,
-    borderColor: `--fui-SwatchPicker--borderColor`
-};
-const { color, borderColor } = swatchCSSVars;
+const { color, borderColor } = _ColorSwatchconstants.swatchCSSVars;
 /**
  * Styles for the root slot
- */ const useResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("ryw27oi", null, {
+ */ const useResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r15zvwyd", null, {
     r: [
-        ".ryw27oi{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid var(--fui-SwatchPicker--borderColor);background:var(--fui-SwatchPicker--color);overflow:hidden;padding:0;}",
-        ".ryw27oi:hover{cursor:pointer;border:none;box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorBrandStroke1),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}",
-        ".ryw27oi:hover:active{border:none;box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorCompoundBrandStrokePressed),inset 0 0 0 var(--strokeWidthThickest) var(--colorStrokeFocus1);}",
-        ".ryw27oi:focus{outline:none;}",
-        ".ryw27oi:focus-visible{outline:none;}",
-        ".ryw27oi[data-fui-focus-visible]{border:none;outline:none;box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus2),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}"
+        ".r15zvwyd{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid var(--fui-SwatchPicker--borderColor, var(--colorTransparentStroke));background:var(--fui-SwatchPicker--color);overflow:hidden;padding:0;}",
+        ".r15zvwyd:hover{cursor:pointer;border:none;box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorBrandStroke1),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}",
+        ".r15zvwyd:hover:active{border:none;box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorCompoundBrandStrokePressed),inset 0 0 0 var(--strokeWidthThickest) var(--colorStrokeFocus1);}",
+        ".r15zvwyd:focus{outline:none;}",
+        ".r15zvwyd:focus-visible{outline:none;}",
+        ".r15zvwyd[data-fui-focus-visible]{border:none;outline:none;box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus2),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}"
     ],
     s: [
-        "@media (forced-colors: active){.ryw27oi{forced-color-adjust:none;}.ryw27oi:hover{box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorBrandStroke2Hover),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}.ryw27oi:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke2Pressed),inset 0 0 0 var(--strokeWidthThickest) var(--colorStrokeFocus1);}}"
+        "@media (forced-colors: active){.r15zvwyd{forced-color-adjust:none;}.r15zvwyd:hover{box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorBrandStroke2Hover),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}.r15zvwyd:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke2Pressed),inset 0 0 0 var(--strokeWidthThickest) var(--colorStrokeFocus1);}}"
     ]
 });
 const useStyles = /*#__PURE__*/ (0, _react.__styles)({