npm - @fluentui/react-swatch-picker - Versions diffs - 9.3.7 → 9.4.1 - Mend

@fluentui/react-swatch-picker 9.3.7 → 9.4.1

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

Files changed (95) hide show

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

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

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

@@ -0,0 +1,205 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    colorSwatchClassNames: function() {
+        return colorSwatchClassNames;
+    },
+    swatchCSSVars: function() {
+        return swatchCSSVars;
+    },
+    useColorSwatchStyles_unstable: function() {
+        return useColorSwatchStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _reacttabster = require("@fluentui/react-tabster");
+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;
+/**
+ * Styles for the root slot
+ */ const useResetStyles = (0, _react.makeResetStyles)({
+    display: 'inline-flex',
+    flexShrink: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxSizing: 'border-box',
+    border: `1px solid var(${borderColor})`,
+    background: `var(${color})`,
+    overflow: 'hidden',
+    padding: '0',
+    ':hover': {
+        cursor: 'pointer',
+        border: 'none',
+        boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorBrandStroke1}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`
+    },
+    ':hover:active': {
+        border: 'none',
+        boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThickest} ${_reacttheme.tokens.colorStrokeFocus1}`
+    },
+    ':focus': {
+        outline: 'none'
+    },
+    ':focus-visible': {
+        outline: 'none'
+    },
+    ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+        border: 'none',
+        outline: 'none',
+        boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorStrokeFocus2}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`
+    }),
+    // High contrast styles
+    '@media (forced-colors: active)': {
+        forcedColorAdjust: 'none',
+        ':hover': {
+            boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorBrandStroke2Hover}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`
+        },
+        ':hover:active': {
+            boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorBrandStroke2Pressed}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThickest} ${_reacttheme.tokens.colorStrokeFocus1}`
+        }
+    }
+});
+const useStyles = (0, _react.makeStyles)({
+    disabled: {
+        ':hover': {
+            cursor: 'not-allowed',
+            boxShadow: 'none'
+        },
+        '@media (forced-colors: active)': {
+            ':hover': {
+                boxShadow: 'none'
+            }
+        }
+    },
+    selected: {
+        border: 'none',
+        boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorBrandStroke1}, inset 0 0 0 5px ${_reacttheme.tokens.colorStrokeFocus1}`,
+        ':hover': {
+            boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThickest} ${_reacttheme.tokens.colorCompoundBrandStrokeHover}, inset 0 0 0 6px ${_reacttheme.tokens.colorStrokeFocus1}`
+        },
+        ':hover:active': {
+            boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThickest} ${_reacttheme.tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 7px ${_reacttheme.tokens.colorStrokeFocus1}`
+        },
+        ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+            boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus2}, inset 0 0 0 5px ${_reacttheme.tokens.colorStrokeFocus1}`
+        }),
+        '@media (forced-colors: active)': {
+            boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorBrandStroke2Pressed}, inset 0 0 0 5px ${_reacttheme.tokens.colorStrokeFocus1}`
+        }
+    },
+    selectedSmall: {
+        boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorBrandStroke1}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`,
+        ':hover': {
+            boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorCompoundBrandStrokeHover}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`
+        },
+        ':hover:active': {
+            boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThickest} ${_reacttheme.tokens.colorStrokeFocus1}`
+        }
+    }
+});
+const useSizeStyles = (0, _react.makeStyles)({
+    'extra-small': {
+        width: '20px',
+        height: '20px',
+        ':hover': {
+            boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThin} ${_reacttheme.tokens.colorBrandStroke1}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorStrokeFocus1}`
+        },
+        ':hover:active': {
+            border: 'none',
+            boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`
+        }
+    },
+    small: {
+        width: '24px',
+        height: '24px',
+        ':hover:active': {
+            border: 'none',
+            boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`
+        }
+    },
+    medium: {
+        width: '28px',
+        height: '28px'
+    },
+    large: {
+        width: '32px',
+        height: '32px'
+    }
+});
+const useShapeStyles = (0, _react.makeStyles)({
+    rounded: {
+        borderRadius: _reacttheme.tokens.borderRadiusMedium,
+        ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+            borderRadius: _reacttheme.tokens.borderRadiusMedium
+        })
+    },
+    circular: {
+        borderRadius: _reacttheme.tokens.borderRadiusCircular,
+        ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+            borderRadius: _reacttheme.tokens.borderRadiusCircular
+        })
+    },
+    square: {
+        borderRadius: _reacttheme.tokens.borderRadiusNone,
+        ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+            borderRadius: _reacttheme.tokens.borderRadiusNone
+        })
+    }
+});
+const useIconStyles = (0, _react.makeStyles)({
+    disabledIcon: {
+        color: _reacttheme.tokens.colorNeutralForegroundInverted,
+        filter: 'drop-shadow(0 1px 1px rgb(0 0 0 / 1))'
+    },
+    icon: {
+        position: 'absolute',
+        display: 'flex',
+        alignSelf: 'center'
+    },
+    'extra-small': {
+        fontSize: '16px'
+    },
+    small: {
+        fontSize: '16px'
+    },
+    medium: {
+        fontSize: '20px'
+    },
+    large: {
+        fontSize: '24px'
+    }
+});
+const useColorSwatchStyles_unstable = (state)=>{
+    'use no memo';
+    const { size = 'medium', shape = 'square' } = state;
+    const resetStyles = useResetStyles();
+    const styles = useStyles();
+    const sizeStyles = useSizeStyles();
+    const shapeStyles = useShapeStyles();
+    const iconStyles = useIconStyles();
+    const smallerSelectedStyles = size === 'small' || size === 'extra-small' ? styles.selectedSmall : '';
+    state.root.className = (0, _react.mergeClasses)(colorSwatchClassNames.root, resetStyles, sizeStyles[size], shapeStyles[shape], state.selected && styles.selected, state.selected && smallerSelectedStyles, state.disabled && styles.disabled, state.root.className);
+    if (state.disabled && state.disabledIcon) {
+        state.disabledIcon.className = (0, _react.mergeClasses)(iconStyles.icon, iconStyles[size], iconStyles.disabledIcon, state.disabledIcon.className);
+    }
+    if (state.icon) {
+        state.icon.className = (0, _react.mergeClasses)(iconStyles.icon, iconStyles[size], state.icon.className);
+    }
+    return state;
+};

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

@@ -0,0 +1 @@

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

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/EmptySwatch/EmptySwatch.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useEmptySwatch_unstable } from './useEmptySwatch';\nimport { renderEmptySwatch_unstable } from './renderEmptySwatch';\nimport { useEmptySwatchStyles_unstable } from './useEmptySwatchStyles.styles';\nimport type { EmptySwatchProps } from './EmptySwatch.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n EmptySwatch component is used for adding new color swatches.\n */\nexport const EmptySwatch: ForwardRefComponent<EmptySwatchProps> = React.forwardRef((props, ref) => {\n const state = useEmptySwatch_unstable(props, ref);\n\n useEmptySwatchStyles_unstable(state);\n useCustomStyleHook_unstable('useEmptySwatchStyles_unstable')(state);\n return renderEmptySwatch_unstable(state);\n});\n\nEmptySwatch.displayName = 'EmptySwatch';\n"],"names":["~~EmptySwatch~~","~~React~~","~~forwardRef~~","~~props~~","~~ref~~","~~state~~","~~useEmptySwatch_unstable~~","~~useEmptySwatchStyles_unstable~~","~~useCustomStyleHook_unstable~~","~~renderEmptySwatch_unstable~~","displayName"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+~~BAWaA;;;eAAAA;;;;~~iEAXU;~~gCAEiB~~;~~mCACG~~;~~4CACG~~;~~qCAEF~~;~~AAKrC~~,~~MAAMA~~,~~cAAAA,~~WAAAA,~~GAAqDC~~,~~OAAMC~~,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,~~QAAQC~~,~~IAAAA~~,~~uCAAAA~~,~~EAAwBH,~~OAAOC;~~IAE7CG~~,~~IAAAA,~~yDAAAA,~~EAA8BF~~;~~IAC9BG~~,~~IAAAA,~~gDAAAA,EAA4B,~~iCAAiCH~~;IAC7D,~~OAAOI~~,~~IAAAA,~~6CAAAA,~~EAA2BJ~~;AACpC;~~AAEAL~~,~~YAAYU~~,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/EmptySwatch/EmptySwatch.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useEmptySwatch_unstable } from './useEmptySwatch';\nimport { renderEmptySwatch_unstable } from './renderEmptySwatch';\nimport { useEmptySwatchStyles_unstable } from './useEmptySwatchStyles.styles';\nimport type { EmptySwatchProps } from './EmptySwatch.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n EmptySwatch component is used for adding new color swatches.\n */\nexport const EmptySwatch: ForwardRefComponent<EmptySwatchProps> = React.forwardRef((props, ref) => {\n const state = useEmptySwatch_unstable(props, ref);\n\n useEmptySwatchStyles_unstable(state);\n useCustomStyleHook_unstable('useEmptySwatchStyles_unstable')(state);\n return renderEmptySwatch_unstable(state);\n});\n\nEmptySwatch.displayName = 'EmptySwatch';\n"],"names":["React","useEmptySwatch_unstable","renderEmptySwatch_unstable","useEmptySwatchStyles_unstable","useCustomStyleHook_unstable","EmptySwatch","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAWaK;;;;;;;iEAXU,QAAQ;gCAES,mBAAmB;mCAChB,sBAAsB;4CACnB,gCAAgC;qCAElC,kCAAkC;AAKvE,oBAAMA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,2CAAAA,EAAwBM,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAC9BL,gDAAAA,EAA4B,iCAAiCK;IAC7D,WAAOP,6CAAAA,EAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/EmptySwatch/index.ts"],"sourcesContent":["export { EmptySwatch } from './EmptySwatch';\nexport type { EmptySwatchProps, EmptySwatchSlots, EmptySwatchState } from './EmptySwatch.types';\nexport { renderEmptySwatch_unstable } from './renderEmptySwatch';\nexport { useEmptySwatch_unstable } from './useEmptySwatch';\nexport { emptySwatchClassNames, useEmptySwatchStyles_unstable } from './useEmptySwatchStyles.styles';\n"],"names":["EmptySwatch","~~emptySwatchClassNames~~","~~renderEmptySwatch_unstable~~","~~useEmptySwatchStyles_unstable~~","~~useEmptySwatch_unstable~~"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":"~~;;;;;;;;;;;IAASA~~,~~WAAW;eAAXA,~~wBAAW~~;;IAIXC~~,~~qBAAqB;eAArBA,~~iDAAqB~~;;IAFrBC~~,~~0BAA0B;eAA1BA,~~6CAA0B~~;;IAEHC~~,~~6BAA6B;eAA7BA,~~yDAA6B~~;;IADpDC~~,~~uBAAuB;eAAvBA,~~uCAAuB;;;6BAHJ;~~mCAEe~~;~~gCACH~~;~~4CAC6B~~"}
1	+ {"version":3,"sources":["../src/components/EmptySwatch/index.ts"],"sourcesContent":["export { EmptySwatch } from './EmptySwatch';\nexport type { EmptySwatchProps, EmptySwatchSlots, EmptySwatchState } from './EmptySwatch.types';\nexport { renderEmptySwatch_unstable } from './renderEmptySwatch';\nexport { useEmptySwatch_unstable } from './useEmptySwatch';\nexport { emptySwatchClassNames, useEmptySwatchStyles_unstable } from './useEmptySwatchStyles.styles';\n"],"names":["EmptySwatch","renderEmptySwatch_unstable","useEmptySwatch_unstable","emptySwatchClassNames","useEmptySwatchStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eAIXG,iDAAqB;;;eAFrBF,6CAA0B;;;eAEHG,yDAA6B;;;eADpDF,uCAAuB;;;6BAHJ,gBAAgB;mCAED,sBAAsB;gCACzB,mBAAmB;4CACU,gCAAgC"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/EmptySwatch/renderEmptySwatch.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { EmptySwatchState, EmptySwatchSlots } from './EmptySwatch.types';\n\n/\n Render the final JSX of EmptySwatch\n */\nexport const renderEmptySwatch_unstable = (state: EmptySwatchState) => {\n assertSlots<EmptySwatchSlots>(state);\n\n return <state.root />;\n};\n"],"names":["~~renderEmptySwatch_unstable~~","~~state~~","~~assertSlots~~","~~_jsx","~~root"],"~~rangeMappings~~":"~~;;;;;;;;;;;;;;;"~~,~~"mappings":";;;;+BASaA;;;eAAAA;;;4BARb~~;~~gCAE4B~~;~~AAMrB~~,~~MAAMA~~,6BAA6B,CAACC;~~IACzCC~~,~~IAAAA,~~2BAAAA,~~EAA8BD~~;IAE9B,OAAA,WAAA,~~GAAOE~~,~~IAAAA,~~eAAA,~~EAACF~~,~~MAAMG~~,IAAI,EAAA,CAAA;AACpB"}
1	+ {"version":3,"sources":["../src/components/EmptySwatch/renderEmptySwatch.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { EmptySwatchState, EmptySwatchSlots } from './EmptySwatch.types';\n\n/\n Render the final JSX of EmptySwatch\n */\nexport const renderEmptySwatch_unstable = (state: EmptySwatchState) => {\n assertSlots<EmptySwatchSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderEmptySwatch_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;AAMjD,MAAMC,6BAA6B,CAACC;QACzCF,2BAAAA,EAA8BE;IAE9B,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useEmptySwatchStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const emptySwatchClassNames = {\n root: 'fui-EmptySwatch'\n};\n/*\n Styles for the root slot\n / const useStyles = makeResetStyles({\n backgroundColor: tokens.colorTransparentBackground,\n border: `1px dashed ${tokens.colorNeutralForeground4}`\n});\nconst useSizeStyles = makeStyles({\n 'extra-small': {\n width: '20px',\n height: '20px'\n },\n small: {\n width: '24px',\n height: '24px'\n },\n medium: {\n width: '28px',\n height: '28px'\n },\n large: {\n width: '32px',\n height: '32px'\n }\n});\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusMedium\n })\n },\n circular: {\n borderRadius: tokens.borderRadiusCircular,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusCircular\n })\n },\n square: {\n borderRadius: tokens.borderRadiusNone,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusNone\n })\n }\n});\n/\n Apply styling to the EmptySwatch slots based on the state\n */ export const useEmptySwatchStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n const shapeStyles = useShapeStyles();\n var _state_size;\n const size = (_state_size = state.size) !== null && _state_size !== void 0 ? _state_size : 'medium';\n var _state_shape;\n state.root.className = mergeClasses(emptySwatchClassNames.root, styles, sizeStyles[size], shapeStyles[(_state_shape = state.shape) !== null && _state_shape !== void 0 ? _state_shape : 'square'], state.root.className);\n return state;\n};\n"],"names":["~~emptySwatchClassNames~~","~~useEmptySwatchStyles_unstable~~","~~root~~","~~useStyles~~","~~__resetStyles~~","~~useSizeStyles~~","~~__styles~~","a9b677","Bqenvij","small","medium","large","d","useShapeStyles","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","circular","square","p","state","styles","sizeStyles","shapeStyles","_state_size","size","_state_shape","className","~~mergeClasses","~~shape"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;;;;;;;;~~IAGaA~~,qBAAqB;~~eAArBA;;IAiDIC~~,~~6BAA6B~~;~~eAA7BA;;;uBApDyC;AAGnD~~,~~MAAMD~~,~~wBAAwB~~;~~IACjCE~~,~~MAAM~~;~~AACV;AACA~~;;CAEA,GAAI,MAAMC,~~YAAS~~,WAAA,~~GAAGC~~,~~IAAAA,~~oBAAA,EAAA,YAAA,MAAA;IAAA;CAGrB;~~AACD~~,~~MAAMC~~,~~gBAAa~~,WAAA,~~GAAGC~~,~~IAAAA,~~eAAA,EAAA;IAAA,eAAA;~~QAAAC~~,~~QAAA~~;QAAAC,~~SAAA~~;IAAA;IAAAC,~~OAAA~~;QAAAF,~~QAAA~~;QAAAC,~~SAAA~~;IAAA;IAAAE,~~QAAA~~;QAAAH,~~QAAA~~;QAAAC,~~SAAA~~;IAAA;IAAAG,~~OAAA~~;QAAAJ,~~QAAA~~;QAAAC,~~SAAA~~;IAAA;AAAA,GAAA;IAAAI,~~GAAA~~;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;~~AAkBtB~~,MAAMC,~~iBAAc~~,WAAA,~~GAAGP~~,~~IAAAA,~~eAAA,EAAA;~~IAAAQ~~,~~SAAA~~;QAAAC,~~SAAA~~;QAAAC,~~SAAA~~;QAAAC,~~SAAA~~;QAAAC,~~SAAA~~;QAAAC,~~QAAA~~;QAAAC,~~SAAA~~;QAAAC,~~QAAA~~;QAAAC,~~QAAA~~;QAAAC,~~SAAA~~;QAAAC,~~SAAA~~;IAAA;IAAAC,~~UAAA~~;QAAAV,~~SAAA~~;QAAAC,~~SAAA~~;QAAAC,~~SAAA~~;QAAAC,~~SAAA~~;QAAAC,~~QAAA~~;QAAAC,~~SAAA~~;QAAAC,~~QAAA~~;QAAAC,~~QAAA~~;QAAAC,~~SAAA~~;QAAAC,~~SAAA~~;IAAA;IAAAE,~~QAAA~~;QAAAX,~~SAAA~~;QAAAC,~~SAAA~~;QAAAC,~~SAAA~~;QAAAC,~~SAAA~~;QAAAC,~~QAAA~~;QAAAC,~~SAAA~~;QAAAC,~~QAAA~~;QAAAC,~~QAAA~~;QAAAC,~~SAAA~~;QAAAC,~~SAAA~~;IAAA;AAAA,GAAA;IAAAZ,~~GAAA~~;QAAA;YAAA;YAAA;gBAAAe,~~GAAA~~,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,~~GAAA~~,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,~~GAAA~~,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,~~GAAA~~,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,~~GAAA~~,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,~~GAAA~~,CAAA;YAAA;SAAA;KAAA;AAAA;~~AAsBZ~~,~~MAAM1B~~,~~gCAAiC2B~~,~~CAAAA~~;~~IAC9C~~;~~IACA~~,MAAMC,~~SAAS1B~~;~~IACf~~,~~MAAM2B~~,~~aAAazB~~;~~IACnB~~,MAAM0B,~~cAAclB~~;~~IACpB~~,~~IAAImB~~;~~IACJ~~,MAAMC,~~OAAO~~,~~AAACD~~,~~CAAAA~~,~~cAAcJ~~,~~MAAMK~~,~~IAAI~~,~~AAAJA~~,~~MAAU~~,~~QAAQD~~,~~gBAAgB~~,KAAK,~~IAAIA~~,~~cAAc~~;~~IAC3F~~,IAAIE;~~IACJN~~,~~MAAM1B~~,IAAI,~~CAACiC~~,SAAS,~~GAAGC~~,~~IAAAA~~,~~mBAAY~~,~~EAACpC~~,~~sBAAsBE~~,IAAI,~~EAAE2B~~,~~QAAQC~~,UAAU,CAACG,~~KAAK~~,EAAEF,WAAW,CAAC,~~AAACG~~,~~CAAAA~~,~~eAAeN~~,~~MAAMS,~~KAAK,~~AAALA~~,~~MAAW~~,~~QAAQH~~,~~iBAAiB~~,KAAK,~~IAAIA~~,~~eAAe~~,~~SAAS~~,EAAEN,~~MAAM1B~~,IAAI,~~CAACiC~~,SAAS;~~IACvN~~,OAAOP;~~AACX~~"}
1	+ {"version":3,"sources":["useEmptySwatchStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const emptySwatchClassNames = {\n root: 'fui-EmptySwatch'\n};\n/*\n Styles for the root slot\n / const useStyles = makeResetStyles({\n backgroundColor: tokens.colorTransparentBackground,\n border: `1px dashed ${tokens.colorNeutralForeground4}`\n});\nconst useSizeStyles = makeStyles({\n 'extra-small': {\n width: '20px',\n height: '20px'\n },\n small: {\n width: '24px',\n height: '24px'\n },\n medium: {\n width: '28px',\n height: '28px'\n },\n large: {\n width: '32px',\n height: '32px'\n }\n});\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusMedium\n })\n },\n circular: {\n borderRadius: tokens.borderRadiusCircular,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusCircular\n })\n },\n square: {\n borderRadius: tokens.borderRadiusNone,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusNone\n })\n }\n});\n/\n Apply styling to the EmptySwatch slots based on the state\n */ export const useEmptySwatchStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n const shapeStyles = useShapeStyles();\n var _state_size;\n const size = (_state_size = state.size) !== null && _state_size !== void 0 ? _state_size : 'medium';\n var _state_shape;\n state.root.className = mergeClasses(emptySwatchClassNames.root, styles, sizeStyles[size], shapeStyles[(_state_shape = state.shape) !== null && _state_shape !== void 0 ? _state_shape : 'square'], state.root.className);\n return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","tokens","createCustomFocusIndicatorStyle","emptySwatchClassNames","root","useStyles","useSizeStyles","a9b677","Bqenvij","small","medium","large","d","useShapeStyles","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","circular","square","p","useEmptySwatchStyles_unstable","state","styles","sizeStyles","shapeStyles","_state_size","size","_state_shape","className","shape"],"mappings":"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"}

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

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    emptySwatchClassNames: function() {
+        return emptySwatchClassNames;
+    },
+    useEmptySwatchStyles_unstable: function() {
+        return useEmptySwatchStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _reacttabster = require("@fluentui/react-tabster");
+const emptySwatchClassNames = {
+    root: 'fui-EmptySwatch'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeResetStyles)({
+    backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+    border: `1px dashed ${_reacttheme.tokens.colorNeutralForeground4}`
+});
+const useSizeStyles = (0, _react.makeStyles)({
+    'extra-small': {
+        width: '20px',
+        height: '20px'
+    },
+    small: {
+        width: '24px',
+        height: '24px'
+    },
+    medium: {
+        width: '28px',
+        height: '28px'
+    },
+    large: {
+        width: '32px',
+        height: '32px'
+    }
+});
+const useShapeStyles = (0, _react.makeStyles)({
+    rounded: {
+        borderRadius: _reacttheme.tokens.borderRadiusMedium,
+        ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+            borderRadius: _reacttheme.tokens.borderRadiusMedium
+        })
+    },
+    circular: {
+        borderRadius: _reacttheme.tokens.borderRadiusCircular,
+        ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+            borderRadius: _reacttheme.tokens.borderRadiusCircular
+        })
+    },
+    square: {
+        borderRadius: _reacttheme.tokens.borderRadiusNone,
+        ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+            borderRadius: _reacttheme.tokens.borderRadiusNone
+        })
+    }
+});
+const useEmptySwatchStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const sizeStyles = useSizeStyles();
+    const shapeStyles = useShapeStyles();
+    var _state_size;
+    const size = (_state_size = state.size) !== null && _state_size !== void 0 ? _state_size : 'medium';
+    var _state_shape;
+    state.root.className = (0, _react.mergeClasses)(emptySwatchClassNames.root, styles, sizeStyles[size], shapeStyles[(_state_shape = state.shape) !== null && _state_shape !== void 0 ? _state_shape : 'square'], state.root.className);
+    return state;
+};

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

@@ -0,0 +1 @@

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

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ImageSwatch/ImageSwatch.tsx"],"sourcesContent":["import * 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":["~~ImageSwatch~~","~~React~~","~~forwardRef~~","~~props~~","~~ref~~","~~state~~","~~useImageSwatch_unstable~~","~~useImageSwatchStyles_unstable~~","~~useCustomStyleHook_unstable~~","~~renderImageSwatch_unstable~~","displayName"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+~~BAWaA;;;eAAAA;;;;~~iEAXU;~~gCAEiB~~;~~mCACG~~;~~4CACG~~;~~qCAEF~~;~~AAKrC~~,~~MAAMA~~,~~cAAAA,~~WAAAA,~~GAAqDC~~,~~OAAMC~~,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,~~QAAQC~~,~~IAAAA~~,~~uCAAAA~~,~~EAAwBH,~~OAAOC;~~IAE7CG~~,~~IAAAA,~~yDAAAA,~~EAA8BF~~;~~IAC9BG~~,~~IAAAA,~~gDAAAA,EAA4B,~~iCAAiCH~~;IAE7D,~~OAAOI~~,~~IAAAA,~~6CAAAA,~~EAA2BJ~~;AACpC;~~AAEAL~~,~~YAAYU~~,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/ImageSwatch/ImageSwatch.tsx"],"sourcesContent":["import * 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":";;;;+BAWaK;;;;;;;iEAXU,QAAQ;gCAES,mBAAmB;mCAChB,sBAAsB;4CACnB,gCAAgC;qCAElC,kCAAkC;AAKvE,oBAAMA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,2CAAAA,EAAwBM,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAC9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOP,6CAAAA,EAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ImageSwatch/ImageSwatch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { 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":[],"~~rangeMappings":";;","~~mappings":"AAuBA;;CAEC"}
1	+ {"version":3,"sources":["../src/components/ImageSwatch/ImageSwatch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { 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"}

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

	@@ -1 +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","~~imageSwatchClassNames~~","~~renderImageSwatch_unstable~~","~~useImageSwatchStyles_unstable~~","~~useImageSwatch_unstable~~"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":"~~;;;;;;;;;;;IAASA~~,~~WAAW;eAAXA,~~wBAAW~~;;IAIXC~~,~~qBAAqB;eAArBA,~~iDAAqB~~;;IAFrBC~~,~~0BAA0B;eAA1BA,~~6CAA0B~~;;IAEHC~~,~~6BAA6B;eAA7BA,~~yDAA6B~~;;IADpDC~~,~~uBAAuB;eAAvBA,~~uCAAuB;;;6BAHJ;~~mCAEe~~;~~gCACH~~;~~4CAC6B~~"}
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":";;;;;;;;;;;;eAASA,wBAAW;;;eAIXG,iDAAqB;;;eAFrBF,6CAA0B;;;eAEHG,yDAA6B;;;eADpDF,uCAAuB;;;6BAHJ,gBAAgB;mCAED,sBAAsB;gCACzB,mBAAmB;4CACU,gCAAgC"}

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

	@@ -1 +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 { ImageSwatchState, ImageSwatchSlots } from './ImageSwatch.types';\n\n/\n Render the final JSX of ImageSwatch\n */\nexport const renderImageSwatch_unstable = (state: ImageSwatchState) => {\n assertSlots<ImageSwatchSlots>(state);\n\n return <state.root />;\n};\n"],"names":["~~renderImageSwatch_unstable~~","~~state~~","~~assertSlots~~","~~_jsx","~~root"],"~~rangeMappings~~":"~~;;;;;;;;;;;;;;;"~~,~~"mappings":";;;;+BASaA;;;eAAAA;;;4BARb~~;~~gCAE4B~~;~~AAMrB~~,~~MAAMA~~,6BAA6B,CAACC;~~IACzCC~~,~~IAAAA,~~2BAAAA,~~EAA8BD~~;IAE9B,OAAA,WAAA,~~GAAOE~~,~~IAAAA,~~eAAA,~~EAACF~~,~~MAAMG~~,IAAI,EAAA,CAAA;AACpB"}
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 { ImageSwatchState, ImageSwatchSlots } from './ImageSwatch.types';\n\n/\n Render the final JSX of ImageSwatch\n */\nexport const renderImageSwatch_unstable = (state: ImageSwatchState) => {\n assertSlots<ImageSwatchSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderImageSwatch_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;AAMjD,MAAMC,6BAA6B,CAACC;QACzCF,2BAAAA,EAA8BE;IAE9B,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ImageSwatch/useImageSwatch.ts"],"sourcesContent":["import * 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":["useImageSwatch_unstable","props","ref","src","value","onClick","style","rest","size","~~useSwatchPickerContextValue_unstable","~~ctx","shape","isGrid","requestSelectionChange","selected","selectedValue","role","ariaSelected","onImageSwatchClick","~~useEventCallback","mergeCallbacks","~~event","selectedSwatch","components","root","~~slot","~~always","~~getIntrinsicElementProps","~~backgroundImage","elementType"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+~~BAcaA;;;eAAAA;;;;~~iEAdU;~~gCAC0D~~;~~8BAE5B~~;~~AAW9C~~,~~MAAMA~~,~~0BAA0B,~~CACrCC,OACAC;IAEA,MAAM,EAAEC,GAAG,EAAEC,KAAK,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGN;IAChD,MAAMO,~~OAAOC~~,~~IAAAA,~~kDAAAA,~~EAAqCC~~,CAAAA,MAAOA,~~IAAIF~~,IAAI;IACjE,~~MAAMG~~,~~QAAQF~~,~~IAAAA,~~kDAAAA,~~EAAqCC~~,CAAAA,MAAOA,IAAIC,KAAK;IACnE,MAAMC,~~SAASH~~,~~IAAAA,~~kDAAAA,~~EAAqCC~~,CAAAA,MAAOA,IAAIE,MAAM;IAErE,MAAMC,~~yBAAyBJ~~,~~IAAAA,~~kDAAAA,~~EAAqCC~~,CAAAA,MAAOA,IAAIG,sBAAsB;IACrG,MAAMC,~~WAAWL~~,~~IAAAA~~,~~kDAAAA~~,~~EAAqCC,~~CAAAA,MAAOA,IAAIK,aAAa,~~KAAKX~~;IAEnF,~~MAAMY~~,OAAOJ,SAAS,aAAa;IACnC,MAAMK,eAAeL,SACjB;QACE,iBAAiBE;IACnB,IACA;QAAE,gBAAgBA;IAAS;IAE/B,MAAMI,~~qBAAqBC~~,~~IAAAA,~~gCAAAA,~~EACzBC~~,~~IAAAA,~~8BAAAA,~~EAAef~~,SAAS,~~CAACgB~~,~~QACvBR~~,~~uBAAuBQ~~,OAAO;~~YAC5BN~~,~~eAAeX~~;~~YACfkB~~,~~gBAAgBnB~~;QAClB;IAIJ,OAAO;~~QACLoB~~,YAAY;YACVC,MAAM;QACR;QACAA,~~MAAMC~~,oBAAAA,~~CAAKC~~,MAAM,~~CACfC~~,~~IAAAA,~~wCAAAA,EAAyB,UAAU;~~YACjCzB~~;~~YACAc~~;YACA,GAAGC,YAAY;~~YACfZ~~,~~SAASa~~;YACT,~~GAAGX~~,IAAI;YACPD,OAAO;~~gBACLsB~~,iBAAiB,CAAC,IAAI,~~EAAEzB~~,IAAI,CAAC,CAAC;gBAC9B,GAAGG,KAAK;YACV;QACF,IACA;~~YAAEuB~~,aAAa;QAAS;~~QAE1BzB~~;~~QACAU~~;~~QACAN~~;~~QACAG~~;IACF;AACF"}
1	+ {"version":3,"sources":["../src/components/ImageSwatch/useImageSwatch.ts"],"sourcesContent":["import * 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":["React","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":";;;;+BAcaM;;;;;;;iEAdU,QAAQ;gCACkD,4BAA4B;8BAExD,8BAA8B;AAW5E,gCAAgC,CACrCC,OACAC;IAEA,MAAM,EAAEC,GAAG,EAAEC,KAAK,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGN;IAChD,MAAMO,WAAOT,kDAAAA,EAAqCU,CAAAA,MAAOA,IAAID,IAAI;IACjE,MAAME,YAAQX,kDAAAA,EAAqCU,CAAAA,MAAOA,IAAIC,KAAK;IACnE,MAAMC,aAASZ,kDAAAA,EAAqCU,CAAAA,MAAOA,IAAIE,MAAM;IAErE,MAAMC,6BAAyBb,kDAAAA,EAAqCU,CAAAA,MAAOA,IAAIG,sBAAsB;IACrG,MAAMC,WAAWd,sDAAAA,EAAqCU,CAAAA,MAAOA,IAAIK,aAAa,KAAKV;IAEnF,MAAMW,OAAOJ,SAAS,aAAa;IACnC,MAAMK,eAAeL,SACjB;QACE,iBAAiBE;IACnB,IACA;QAAE,gBAAgBA;IAAS;IAE/B,MAAMI,yBAAqBpB,gCAAAA,MACzBC,8BAAAA,EAAeO,SAAS,CAACa,QACvBN,uBAAuBM,OAAO;YAC5BJ,eAAeV;YACfe,gBAAgBhB;QAClB;IAIJ,OAAO;QACLiB,YAAY;YACVC,MAAM;QACR;QACAA,MAAMzB,oBAAAA,CAAK0B,MAAM,KACf3B,wCAAAA,EAAyB,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"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useImageSwatchStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const imageSwatchClassNames = {\n root: 'fui-ImageSwatch'\n};\n/*\n Styles for the root slot\n / const useStyles = makeResetStyles({\n display: 'inline-flex',\n boxSizing: 'border-box',\n border: `1px solid ${tokens.colorTransparentStroke}`,\n backgroundSize: 'cover',\n backgroundRepeat: 'no-repeat',\n padding: '0',\n ':hover': {\n cursor: 'pointer',\n border: 'none',\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke1}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`\n },\n ':hover:active': {\n border: 'none',\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`\n },\n ':focus': {\n outline: 'none'\n },\n ':focus-visible': {\n outline: 'none'\n },\n ...createCustomFocusIndicatorStyle({\n border: 'none',\n outline: 'none',\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`\n }),\n // High contrast styles\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'none',\n ':hover': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke2Hover}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`\n },\n ':hover:active': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke2Pressed}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`\n }\n }\n});\nconst useStylesSelected = makeStyles({\n selected: {\n border: 'none',\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke1}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`,\n ':hover': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorCompoundBrandStrokeHover}, inset 0 0 0 6px ${tokens.colorStrokeFocus1}`\n },\n ':hover:active': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 7px ${tokens.colorStrokeFocus1}`\n },\n ...createCustomFocusIndicatorStyle({\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus2}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`\n }),\n '@media (forced-colors: active)': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke2Pressed}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`\n }\n }\n});\nconst useSizeStyles = makeStyles({\n 'extra-small': {\n width: '20px',\n height: '20px'\n },\n small: {\n width: '24px',\n height: '24px'\n },\n medium: {\n width: '28px',\n height: '28px'\n },\n large: {\n width: '32px',\n height: '32px'\n }\n});\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusMedium\n })\n },\n circular: {\n borderRadius: tokens.borderRadiusCircular,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusCircular\n })\n },\n square: {\n borderRadius: tokens.borderRadiusNone,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusNone\n })\n }\n});\n/\n Apply styling to the ImageSwatch slots based on the state\n */ export const useImageSwatchStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const selectedStyles = useStylesSelected();\n const sizeStyles = useSizeStyles();\n const shapeStyles = useShapeStyles();\n const { size = 'medium', shape = 'square' } = state;\n state.root.className = mergeClasses(imageSwatchClassNames.root, styles, sizeStyles[size], shapeStyles[shape], state.selected && selectedStyles.selected, state.root.className);\n return state;\n};\n"],"names":["~~imageSwatchClassNames~~","~~useImageSwatchStyles_unstable~~","~~root~~","~~useStyles~~","~~__resetStyles~~","r","s","useStylesSelected","~~__styles","~~selected","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","Bvxd0ez","vajtyg","j6ew2k","Bspt33j","d","p","h","m","useSizeStyles","a9b677","Bqenvij","small","medium","large","useShapeStyles","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","circular","square","state","styles","selectedStyles","sizeStyles","shapeStyles","size","shape","className"~~,"mergeClasses"~~],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;~~IAGaA~~,qBAAqB;~~eAArBA;;IAqGIC,6BAA6B;eAA7BA~~;;;uBAxGyC;~~AAGnD~~,~~MAAMD,wBAAwB~~;~~IACjCE~~,~~MAAM~~;AACV;~~AACA~~;;CAEA,GAAI,MAAMC,~~YAAS~~,WAAA,~~GAAGC~~,~~IAAAA,~~oBAAA,EAAA,YAAA,MAAA;~~IAAAC~~,~~GAAA~~;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,~~GAAA~~;QAAA;KAAA;AAAA;~~AAsCtB~~,MAAMC,~~oBAAiB~~,WAAA,~~GAAGC~~,~~IAAAA,~~eAAA,EAAA;~~IAAAC~~,~~UAAA~~;QAAAC,~~SAAA~~;QAAAC,~~SAAA~~;QAAAC,~~QAAA~~;QAAAC,~~SAAA~~;QAAAC,~~SAAA~~;QAAAC,~~QAAA~~;QAAAC,~~QAAA~~;QAAAC,~~QAAA~~;QAAAC,~~QAAA~~;QAAAC,~~QAAA~~;QAAAC,~~QAAA~~;QAAAC,~~SAAA~~;QAAAC,~~QAAA~~;QAAAC,~~QAAA~~;QAAAC,~~QAAA~~;QAAAC,~~SAAA~~;QAAAC,~~QAAA~~;QAAAC,~~QAAA~~;QAAAC,~~SAAA~~;QAAAC,~~QAAA~~;QAAAC,~~QAAA~~;QAAAC,~~SAAA~~;IAAA;AAAA,GAAA;IAAAC,~~GAAA~~;QAAA;YAAA;YAAA;gBAAAC,~~GAAA~~,CAAA;YAAA;SAAA;QAAA;QAAA;KAAA;IAAAC,~~GAAA~~;QAAA;QAAA;KAAA;IAAAC,~~GAAA~~;QAAA;YAAA;YAAA;gBAAAA,~~GAAA~~;YAAA;SAAA;KAAA;AAAA;~~AAkB1B~~,MAAMC,~~gBAAa~~,WAAA,~~GAAG5B~~,~~IAAAA,~~eAAA,EAAA;IAAA,eAAA;~~QAAA6B~~,~~QAAA~~;QAAAC,~~SAAA~~;IAAA;IAAAC,~~OAAA~~;QAAAF,~~QAAA~~;QAAAC,~~SAAA~~;IAAA;IAAAE,~~QAAA~~;QAAAH,~~QAAA~~;QAAAC,~~SAAA~~;IAAA;IAAAG,~~OAAA~~;QAAAJ,~~QAAA~~;QAAAC,~~SAAA~~;IAAA;AAAA,GAAA;IAAAN,~~GAAA~~;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;~~AAkBtB~~,MAAMU,~~iBAAc~~,WAAA,~~GAAGlC~~,~~IAAAA~~,~~eAAA,~~EAAA;~~IAAAmC~~,~~SAAA~~;QAAAC,~~SAAA~~;QAAAC,~~SAAA~~;QAAAC,~~SAAA~~;QAAAC,~~SAAA~~;QAAAC,~~QAAA~~;QAAAC,~~SAAA~~;QAAAC,~~QAAA~~;QAAAC,~~QAAA~~;QAAAC,~~SAAA~~;QAAAC,~~SAAA~~;IAAA;IAAAC,~~UAAA~~;QAAAV,~~SAAA~~;QAAAC,~~SAAA~~;QAAAC,~~SAAA~~;QAAAC,~~SAAA~~;QAAAC,~~QAAA~~;QAAAC,~~SAAA~~;QAAAC,~~QAAA~~;QAAAC,~~QAAA~~;QAAAC,~~SAAA~~;QAAAC,~~SAAA~~;IAAA;IAAAE,~~QAAA~~;QAAAX,~~SAAA~~;QAAAC,~~SAAA~~;QAAAC,~~SAAA~~;QAAAC,~~SAAA~~;QAAAC,~~QAAA~~;QAAAC,~~SAAA~~;QAAAC,~~QAAA~~;QAAAC,~~QAAA~~;QAAAC,~~SAAA~~;QAAAC,~~SAAA~~;IAAA;AAAA,GAAA;IAAArB,~~GAAA~~;QAAA;YAAA;YAAA;gBAAAC,~~GAAA~~,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,~~GAAA~~,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,~~GAAA~~,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,~~GAAA~~,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,~~GAAA~~,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,~~GAAA~~,CAAA;YAAA;SAAA;KAAA;AAAA;~~AAsBZ~~,~~MAAMhC~~,~~gCAAiCuD~~,~~CAAAA~~;~~IAC9C~~;~~IACA~~,MAAMC,~~SAAStD~~;~~IACf~~,~~MAAMuD~~,~~iBAAiBnD~~;~~IACvB~~,MAAMoD,~~aAAavB~~;~~IACnB~~,~~MAAMwB~~,~~cAAclB~~;~~IACpB~~,MAAM,~~EAAEmB~~,~~OAAO~~,QAAQ,EAAEC,~~QAAQ~~,QAAA,EAAU,GAAGN;~~IAC9CA~~,~~MAAMtD~~,IAAI,~~CAAC6D~~,SAAS,~~GAAGC~~,~~IAAAA,~~mBAAY,~~EAAChE~~,~~sBAAsBE~~,IAAI,~~EAAEuD~~,~~QAAQE~~,UAAU,CAACE,~~KAAK~~,EAAED,WAAW,CAACE,~~MAAM~~,EAAEN,~~MAAM/C~~,QAAQ,~~IAAIiD~~,~~eAAejD~~,QAAQ,~~EAAE+C~~,~~MAAMtD~~,IAAI,~~CAAC6D~~,SAAS;~~IAC7K~~,OAAOP;~~AACX~~"}
1	+ {"version":3,"sources":["useImageSwatchStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const imageSwatchClassNames = {\n root: 'fui-ImageSwatch'\n};\n/*\n Styles for the root slot\n / const useStyles = makeResetStyles({\n display: 'inline-flex',\n boxSizing: 'border-box',\n border: `1px solid ${tokens.colorTransparentStroke}`,\n backgroundSize: 'cover',\n backgroundRepeat: 'no-repeat',\n padding: '0',\n ':hover': {\n cursor: 'pointer',\n border: 'none',\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke1}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`\n },\n ':hover:active': {\n border: 'none',\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`\n },\n ':focus': {\n outline: 'none'\n },\n ':focus-visible': {\n outline: 'none'\n },\n ...createCustomFocusIndicatorStyle({\n border: 'none',\n outline: 'none',\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`\n }),\n // High contrast styles\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'none',\n ':hover': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke2Hover}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`\n },\n ':hover:active': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke2Pressed}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`\n }\n }\n});\nconst useStylesSelected = makeStyles({\n selected: {\n border: 'none',\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke1}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`,\n ':hover': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorCompoundBrandStrokeHover}, inset 0 0 0 6px ${tokens.colorStrokeFocus1}`\n },\n ':hover:active': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 7px ${tokens.colorStrokeFocus1}`\n },\n ...createCustomFocusIndicatorStyle({\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus2}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`\n }),\n '@media (forced-colors: active)': {\n boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke2Pressed}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`\n }\n }\n});\nconst useSizeStyles = makeStyles({\n 'extra-small': {\n width: '20px',\n height: '20px'\n },\n small: {\n width: '24px',\n height: '24px'\n },\n medium: {\n width: '28px',\n height: '28px'\n },\n large: {\n width: '32px',\n height: '32px'\n }\n});\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusMedium\n })\n },\n circular: {\n borderRadius: tokens.borderRadiusCircular,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusCircular\n })\n },\n square: {\n borderRadius: tokens.borderRadiusNone,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusNone\n })\n }\n});\n/\n Apply styling to the ImageSwatch slots based on the state\n */ export const useImageSwatchStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const selectedStyles = useStylesSelected();\n const sizeStyles = useSizeStyles();\n const shapeStyles = useShapeStyles();\n const { size = 'medium', shape = 'square' } = state;\n state.root.className = mergeClasses(imageSwatchClassNames.root, styles, sizeStyles[size], shapeStyles[shape], state.selected && selectedStyles.selected, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","__resetStyles","tokens","createCustomFocusIndicatorStyle","imageSwatchClassNames","root","useStyles","r","s","useStylesSelected","selected","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","Bvxd0ez","vajtyg","j6ew2k","Bspt33j","d","p","h","m","useSizeStyles","a9b677","Bqenvij","small","medium","large","useShapeStyles","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","circular","square","useImageSwatchStyles_unstable","state","styles","selectedStyles","sizeStyles","shapeStyles","size","shape","className"],"mappings":";;;;;;;;;;;IAGaK,qBAAqB;;;iCAqGY;eAA7BqD;;;uBAxGyC,gBAAgB;AAGnE,8BAA8B;IACjCpD,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGL,oBAAA,EAAA,YAAA,MAAA;IAAAM,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAqCrB,CAAC;AACF,MAAMC,iBAAiB,GAAA,WAAA,OAAGV,eAAA,EAAA;IAAAW,QAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CAiBzB,CAAC;AACF,MAAMC,aAAa,GAAA,WAAA,OAAGtC,eAAA,EAAA;IAAA,eAAA;QAAAuC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,KAAA,EAAA;QAAAF,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAE,MAAA,EAAA;QAAAH,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAG,KAAA,EAAA;QAAAJ,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAN,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAiBrB,CAAC;AACF,MAAMU,cAAc,GAAA,WAAA,GAAG5C,mBAAA,EAAA;IAAA6C,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAV,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAE,MAAA,EAAA;QAAAX,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAArB,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAmBtB,CAAC;AAGS,sCAAuCwB,KAAK,IAAG;IACtD,aAAa;IACb,MAAMC,MAAM,GAAGrD,SAAS,CAAC,CAAC;IAC1B,MAAMsD,cAAc,GAAGnD,iBAAiB,CAAC,CAAC;IAC1C,MAAMoD,UAAU,GAAGxB,aAAa,CAAC,CAAC;IAClC,MAAMyB,WAAW,GAAGnB,cAAc,CAAC,CAAC;IACpC,MAAM,EAAEoB,IAAI,GAAG,QAAQ,EAAEC,KAAK,GAAG,QAAA,EAAU,GAAGN,KAAK;IACnDA,KAAK,CAACrD,IAAI,CAAC4D,SAAS,OAAGjE,mBAAY,EAACI,qBAAqB,CAACC,IAAI,EAAEsD,MAAM,EAAEE,UAAU,CAACE,IAAI,CAAC,EAAED,WAAW,CAACE,KAAK,CAAC,EAAEN,KAAK,CAAChD,QAAQ,IAAIkD,cAAc,CAAClD,QAAQ,EAAEgD,KAAK,CAACrD,IAAI,CAAC4D,SAAS,CAAC;IAC9K,OAAOP,KAAK;AAChB,CAAC"}