npm - @fluentui/react-color-picker - Versions diffs - 9.3.1 → 9.3.3 - Mend

@fluentui/react-color-picker 9.3.1 → 9.3.3

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 (129) hide show

package/lib-commonjs/components/ColorArea/useColorAreaStyles.styles.cjs CHANGED Viewed

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    colorAreaClassNames: function() {
+    get colorAreaClassNames () {
         return colorAreaClassNames;
     },
-    useColorAreaStyles_unstable: function() {
+    get useColorAreaStyles_unstable () {
         return useColorAreaStyles_unstable;
     }
 });

package/lib-commonjs/components/ColorArea/useColorAreaStyles.styles.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useColorAreaStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from \"@griffel/react\";\nimport { tokens } from \"@fluentui/react-theme\";\nimport { createFocusOutlineStyle } from \"@fluentui/react-tabster\";\nimport { colorAreaCSSVars } from \"./ColorArea.constants.js\";\nexport const colorAreaClassNames = {\n root: 'fui-ColorArea',\n thumb: 'fui-ColorArea__thumb',\n inputX: 'fui-ColorArea__inputX',\n inputY: 'fui-ColorArea__inputY'\n};\n// Internal CSS variables\nconst thumbSizeVar = `--fui-Slider__thumb--size`;\n/*\n Styles for the root slot\n / const useRootStyles = makeResetStyles({\n position: 'relative',\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n background: `linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, transparent), var(${colorAreaCSSVars.mainColorVar})`,\n forcedColorAdjust: 'none',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'start',\n justifyItems: 'start',\n [thumbSizeVar]: '20px',\n minWidth: '300px',\n minHeight: '300px',\n boxSizing: 'border-box',\n marginBottom: tokens.spacingVerticalSNudge\n});\n/\n Styles for the thumb slot\n / const useThumbStyles = makeStyles({\n thumb: {\n position: 'absolute',\n width: `var(${thumbSizeVar})`,\n height: `var(${thumbSizeVar})`,\n pointerEvents: 'none',\n outlineStyle: 'none',\n forcedColorAdjust: 'none',\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,\n boxShadow: tokens.shadow4,\n backgroundColor: `var(${colorAreaCSSVars.thumbColorVar})`,\n transform: 'translate(-50%, 50%)',\n left: `var(${colorAreaCSSVars.areaXProgressVar})`,\n bottom: `var(${colorAreaCSSVars.areaYProgressVar})`,\n '::before': {\n position: 'absolute',\n inset: '0px',\n borderRadius: tokens.borderRadiusCircular,\n boxSizing: 'border-box',\n content: \"''\",\n border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`\n }\n },\n focusIndicator: createFocusOutlineStyle({\n selector: 'focus-within',\n style: {\n outlineWidth: tokens.strokeWidthThick,\n ...shorthands.borderWidth(tokens.strokeWidthThick),\n outlineRadius: tokens.borderRadiusCircular\n }\n })\n});\n/\n Styles for the Input slot\n / const useInputStyles = makeStyles({\n input: {\n overflow: 'hidden',\n position: 'absolute',\n pointerEvents: 'none',\n top: 0,\n left: 0,\n opacity: 0,\n padding: '0',\n margin: '0',\n width: '100%',\n height: '100%'\n }\n});\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium\n },\n square: {\n borderRadius: tokens.borderRadiusNone\n }\n});\n/\n Apply styling to the ColorArea slots based on the state\n */ export const useColorAreaStyles_unstable = (state)=>{\n const rootStyles = useRootStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const shapeStyles = useShapeStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(colorAreaClassNames.root, rootStyles, shapeStyles[state.shape \|\| 'rounded'], state.root.className);\n // eslint-disable-next-line react-hooks/immutability\n state.thumb.className = mergeClasses(colorAreaClassNames.thumb, thumbStyles.thumb, thumbStyles.focusIndicator, state.thumb.className);\n // eslint-disable-next-line react-hooks/immutability\n state.inputX.className = mergeClasses(colorAreaClassNames.inputX, inputStyles.input, state.inputX.className);\n // eslint-disable-next-line react-hooks/immutability\n state.inputY.className = mergeClasses(colorAreaClassNames.inputY, inputStyles.input, state.inputY.className);\n return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","createFocusOutlineStyle","colorAreaCSSVars","colorAreaClassNames","root","thumb","inputX","inputY","thumbSizeVar","useRootStyles","useThumbStyles","qhf8xq","a9b677","Bqenvij","Bkecrkj","oeaueh","Bvjb7m6","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","De3pzq","Bz10aip","oyh7mz","B5kzvoi","Brfgrao","lawp4y","Fbdkly","mdwyqc","Bciustq","gc50h5","r59vdv","Budzafs","ck0cow","n07z76","Gng75u","Bcvre1j","Ftih45","Bcgcnre","Bqjgrrk","qa3bma","y0oebl","Biqmznv","Bm6vgfq","Bbv0w2i","uvfttm","eqrjj","Bk5zm6e","m598lv","B4f6apu","ydt019","Bq4z7u6","Bdkvgpv","B0qfbqy","kj8mxx","focusIndicator","Brovlpu","B486eqv","Bssx7fj","uh7if5","clntm0","Dlk2r6","h6p2u","I6qiy5","yzno9d","By0wis0","B2j2mmj","wigs8","pbfy6t","B0v4ure","Byrf0fs","Bsiemmq","Bwckmig","skfxo0","Iidy0u","B98u21t","Bvwlmkc","jo1ztg","Ba1iezr","Blmvk6g","B24cy0v","Bil7v7r","Br3gin4","nr063g","ghq09","Bbgo44z","Bseh09z","az1dzo","Ba3ybja","B6352mv","vppk2z","Biaj6j7","B2pnrqr","B29w5g4","Bhhzhcn","Bec0n69","d","p","f","i","m","useInputStyles","input","B68tc82","Bmxbyg5","Bpg54ce","Bhzewxz","abs64n","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","useShapeStyles","rounded","square","useColorAreaStyles_unstable","state","rootStyles","thumbStyles","inputStyles","shapeStyles","className","shape"],"mappings":"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"}
1	+ {"version":3,"sources":["useColorAreaStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from \"@griffel/react\";\nimport { tokens } from \"@fluentui/react-theme\";\nimport { createFocusOutlineStyle } from \"@fluentui/react-tabster\";\nimport { colorAreaCSSVars } from \"./ColorArea.constants.js\";\nexport const colorAreaClassNames = {\n root: 'fui-ColorArea',\n thumb: 'fui-ColorArea__thumb',\n inputX: 'fui-ColorArea__inputX',\n inputY: 'fui-ColorArea__inputY'\n};\n// Internal CSS variables\nconst thumbSizeVar = `--fui-Slider__thumb--size`;\n/*\n Styles for the root slot\n / const useRootStyles = makeResetStyles({\n position: 'relative',\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n background: `linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, transparent), var(${colorAreaCSSVars.mainColorVar})`,\n forcedColorAdjust: 'none',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'start',\n justifyItems: 'start',\n [thumbSizeVar]: '20px',\n minWidth: '300px',\n minHeight: '300px',\n boxSizing: 'border-box',\n marginBottom: tokens.spacingVerticalSNudge\n});\n/\n Styles for the thumb slot\n / const useThumbStyles = makeStyles({\n thumb: {\n position: 'absolute',\n width: `var(${thumbSizeVar})`,\n height: `var(${thumbSizeVar})`,\n pointerEvents: 'none',\n outlineStyle: 'none',\n forcedColorAdjust: 'none',\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,\n boxShadow: tokens.shadow4,\n backgroundColor: `var(${colorAreaCSSVars.thumbColorVar})`,\n transform: 'translate(-50%, 50%)',\n left: `var(${colorAreaCSSVars.areaXProgressVar})`,\n bottom: `var(${colorAreaCSSVars.areaYProgressVar})`,\n '::before': {\n position: 'absolute',\n inset: '0px',\n borderRadius: tokens.borderRadiusCircular,\n boxSizing: 'border-box',\n content: \"''\",\n border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`\n }\n },\n focusIndicator: createFocusOutlineStyle({\n selector: 'focus-within',\n style: {\n outlineWidth: tokens.strokeWidthThick,\n ...shorthands.borderWidth(tokens.strokeWidthThick),\n outlineRadius: tokens.borderRadiusCircular\n }\n })\n});\n/\n Styles for the Input slot\n / const useInputStyles = makeStyles({\n input: {\n overflow: 'hidden',\n position: 'absolute',\n pointerEvents: 'none',\n top: 0,\n left: 0,\n opacity: 0,\n padding: '0',\n margin: '0',\n width: '100%',\n height: '100%'\n }\n});\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium\n },\n square: {\n borderRadius: tokens.borderRadiusNone\n }\n});\n/\n Apply styling to the ColorArea slots based on the state\n */ export const useColorAreaStyles_unstable = (state)=>{\n const rootStyles = useRootStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const shapeStyles = useShapeStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(colorAreaClassNames.root, rootStyles, shapeStyles[state.shape \|\| 'rounded'], state.root.className);\n // eslint-disable-next-line react-hooks/immutability\n state.thumb.className = mergeClasses(colorAreaClassNames.thumb, thumbStyles.thumb, thumbStyles.focusIndicator, state.thumb.className);\n // eslint-disable-next-line react-hooks/immutability\n state.inputX.className = mergeClasses(colorAreaClassNames.inputX, inputStyles.input, state.inputX.className);\n // eslint-disable-next-line react-hooks/immutability\n state.inputY.className = mergeClasses(colorAreaClassNames.inputY, inputStyles.input, state.inputY.className);\n return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","createFocusOutlineStyle","colorAreaCSSVars","colorAreaClassNames","root","thumb","inputX","inputY","thumbSizeVar","useRootStyles","useThumbStyles","qhf8xq","a9b677","Bqenvij","Bkecrkj","oeaueh","Bvjb7m6","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","De3pzq","Bz10aip","oyh7mz","B5kzvoi","Brfgrao","lawp4y","Fbdkly","mdwyqc","Bciustq","gc50h5","r59vdv","Budzafs","ck0cow","n07z76","Gng75u","Bcvre1j","Ftih45","Bcgcnre","Bqjgrrk","qa3bma","y0oebl","Biqmznv","Bm6vgfq","Bbv0w2i","uvfttm","eqrjj","Bk5zm6e","m598lv","B4f6apu","ydt019","Bq4z7u6","Bdkvgpv","B0qfbqy","kj8mxx","focusIndicator","Brovlpu","B486eqv","Bssx7fj","uh7if5","clntm0","Dlk2r6","h6p2u","I6qiy5","yzno9d","By0wis0","B2j2mmj","wigs8","pbfy6t","B0v4ure","Byrf0fs","Bsiemmq","Bwckmig","skfxo0","Iidy0u","B98u21t","Bvwlmkc","jo1ztg","Ba1iezr","Blmvk6g","B24cy0v","Bil7v7r","Br3gin4","nr063g","ghq09","Bbgo44z","Bseh09z","az1dzo","Ba3ybja","B6352mv","vppk2z","Biaj6j7","B2pnrqr","B29w5g4","Bhhzhcn","Bec0n69","d","p","f","i","m","useInputStyles","input","B68tc82","Bmxbyg5","Bpg54ce","Bhzewxz","abs64n","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","useShapeStyles","rounded","square","useColorAreaStyles_unstable","state","rootStyles","thumbStyles","inputStyles","shapeStyles","className","shape"],"mappings":"AAAA,YAAY;;;;;;;;;;;;QAKCO,mBAAmB;;;;eAsFfyI,2BAA2B;;;uBA1F0B,gBAAgB;AAI/E,4BAA4B;IAC/BxI,IAAI,EAAE,eAAe;IACrBC,KAAK,EAAE,sBAAsB;IAC7BC,MAAM,EAAE,uBAAuB;IAC/BC,MAAM,EAAE;AACZ,CAAC;AACD,yBAAA;AACA,MAAMC,YAAY,GAAG,CAAA,yBAAA,CAA2B;AAChD;;CAEA,GAAI,MAAMC,aAAa,GAAA,WAAA,OAAGb,oBAAA,EAAA,WAAA,WAAA;IAAA;IAAA;CAczB,CAAC;AACF;;CAEA,GAAI,MAAMc,cAAc,GAAA,WAAA,OAAGb,eAAA,EAAA;IAAAQ,KAAA,EAAA;QAAAM,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,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,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,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,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,KAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,cAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,KAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,KAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,KAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CAgC1B,CAAC;AACF;;CAEA,GAAI,MAAMC,cAAc,GAAA,WAAA,OAAG3H,eAAA,EAAA;IAAA4H,KAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAjH,MAAA,EAAA;QAAAG,OAAA,EAAA;QAAA+G,OAAA,EAAA;QAAAnF,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAoF,MAAA,EAAA;QAAAC,OAAA,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,OAAA,EAAA;QAAA5H,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAsG,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;KAAA;AAAA,CAa1B,CAAC;AACF,MAAMqB,cAAc,GAAA,WAAA,OAAG5I,eAAA,EAAA;IAAA6I,OAAA,EAAA;QAAAzH,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAsH,MAAA,EAAA;QAAA1H,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAA8F,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAOtB,CAAC;AAGS,qCAAqCyB,KAAK,IAAG;IACpD,MAAMC,UAAU,GAAGrI,aAAa,CAAC,CAAC;IAClC,MAAMsI,WAAW,GAAGrI,cAAc,CAAC,CAAC;IACpC,MAAMsI,WAAW,GAAGxB,cAAc,CAAC,CAAC;IACpC,MAAMyB,WAAW,GAAGR,cAAc,CAAC,CAAC;IACpC,oDAAA;IACAI,KAAK,CAACzI,IAAI,CAAC8I,SAAS,OAAGpJ,mBAAY,EAACK,mBAAmB,CAACC,IAAI,EAAE0I,UAAU,EAAEG,WAAW,CAACJ,KAAK,CAACM,KAAK,IAAI,SAAS,CAAC,EAAEN,KAAK,CAACzI,IAAI,CAAC8I,SAAS,CAAC;IACtI,oDAAA;IACAL,KAAK,CAACxI,KAAK,CAAC6I,SAAS,OAAGpJ,mBAAY,EAACK,mBAAmB,CAACE,KAAK,EAAE0I,WAAW,CAAC1I,KAAK,EAAE0I,WAAW,CAACrE,cAAc,EAAEmE,KAAK,CAACxI,KAAK,CAAC6I,SAAS,CAAC;IACrI,oDAAA;IACAL,KAAK,CAACvI,MAAM,CAAC4I,SAAS,OAAGpJ,mBAAY,EAACK,mBAAmB,CAACG,MAAM,EAAE0I,WAAW,CAACvB,KAAK,EAAEoB,KAAK,CAACvI,MAAM,CAAC4I,SAAS,CAAC;IAC5G,oDAAA;IACAL,KAAK,CAACtI,MAAM,CAAC2I,SAAS,OAAGpJ,mBAAY,EAACK,mBAAmB,CAACI,MAAM,EAAEyI,WAAW,CAACvB,KAAK,EAAEoB,KAAK,CAACtI,MAAM,CAAC2I,SAAS,CAAC;IAC5G,OAAOL,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/ColorArea/useColorAreaStyles.styles.raw.cjs CHANGED Viewed

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    colorAreaClassNames: function() {
+    get colorAreaClassNames () {
         return colorAreaClassNames;
     },
-    useColorAreaStyles_unstable: function() {
+    get useColorAreaStyles_unstable () {
         return useColorAreaStyles_unstable;
     }
 });

package/lib-commonjs/components/ColorArea/useColorAreaStyles.styles.raw.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["~~../~~src/components/ColorArea/useColorAreaStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport type { ColorAreaSlots, ColorAreaState } from './ColorArea.types';\nimport { colorAreaCSSVars } from './ColorArea.constants';\n\nexport const colorAreaClassNames: SlotClassNames<ColorAreaSlots> = {\n root: 'fui-ColorArea',\n thumb: 'fui-ColorArea__thumb',\n inputX: 'fui-ColorArea__inputX',\n inputY: 'fui-ColorArea__inputY',\n};\n\n// Internal CSS variables\nconst thumbSizeVar = `--fui-Slider__thumb--size`;\n\n/*\n Styles for the root slot\n /\nconst useRootStyles = makeResetStyles({\n position: 'relative',\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n background: `linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, transparent), var(${colorAreaCSSVars.mainColorVar})`,\n forcedColorAdjust: 'none',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'start',\n justifyItems: 'start',\n [thumbSizeVar]: '20px',\n minWidth: '300px',\n minHeight: '300px',\n boxSizing: 'border-box',\n marginBottom: tokens.spacingVerticalSNudge,\n});\n\n/\n Styles for the thumb slot\n /\nconst useThumbStyles = makeStyles({\n thumb: {\n position: 'absolute',\n width: `var(${thumbSizeVar})`,\n height: `var(${thumbSizeVar})`,\n pointerEvents: 'none',\n outlineStyle: 'none',\n forcedColorAdjust: 'none',\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,\n boxShadow: tokens.shadow4,\n backgroundColor: `var(${colorAreaCSSVars.thumbColorVar})`,\n transform: 'translate(-50%, 50%)',\n left: `var(${colorAreaCSSVars.areaXProgressVar})`,\n bottom: `var(${colorAreaCSSVars.areaYProgressVar})`,\n '::before': {\n position: 'absolute',\n inset: '0px',\n borderRadius: tokens.borderRadiusCircular,\n boxSizing: 'border-box',\n content: \"''\",\n border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`,\n },\n },\n focusIndicator: createFocusOutlineStyle({\n selector: 'focus-within',\n style: {\n outlineWidth: tokens.strokeWidthThick,\n ...shorthands.borderWidth(tokens.strokeWidthThick),\n outlineRadius: tokens.borderRadiusCircular,\n },\n }),\n});\n\n/\n Styles for the Input slot\n /\nconst useInputStyles = makeStyles({\n input: {\n overflow: 'hidden',\n position: 'absolute',\n pointerEvents: 'none',\n top: 0,\n left: 0,\n opacity: 0,\n padding: '0',\n margin: '0',\n width: '100%',\n height: '100%',\n },\n});\n\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n },\n square: {\n borderRadius: tokens.borderRadiusNone,\n },\n});\n\n/\n Apply styling to the ColorArea slots based on the state\n */\nexport const useColorAreaStyles_unstable = (state: ColorAreaState): ColorAreaState => {\n const rootStyles = useRootStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const shapeStyles = useShapeStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n colorAreaClassNames.root,\n rootStyles,\n shapeStyles[state.shape \|\| 'rounded'],\n state.root.className,\n );\n\n // eslint-disable-next-line react-hooks/immutability\n state.thumb.className = mergeClasses(\n colorAreaClassNames.thumb,\n thumbStyles.thumb,\n thumbStyles.focusIndicator,\n state.thumb.className,\n );\n\n // eslint-disable-next-line react-hooks/immutability\n state.inputX.className = mergeClasses(colorAreaClassNames.inputX, inputStyles.input, state.inputX.className);\n\n // eslint-disable-next-line react-hooks/immutability\n state.inputY.className = mergeClasses(colorAreaClassNames.inputY, inputStyles.input, state.inputY.className);\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","createFocusOutlineStyle","colorAreaCSSVars","colorAreaClassNames","root","thumb","inputX","inputY","thumbSizeVar","useRootStyles","position","border","colorNeutralStroke1","background","mainColorVar","forcedColorAdjust","display","touchAction","alignItems","justifyItems","minWidth","minHeight","boxSizing","marginBottom","spacingVerticalSNudge","useThumbStyles","width","height","pointerEvents","outlineStyle","borderRadius","borderRadiusCircular","strokeWidthThin","colorNeutralForeground4","boxShadow","shadow4","backgroundColor","thumbColorVar","transform","left","areaXProgressVar","bottom","areaYProgressVar","inset","content","strokeWidthThick","colorNeutralBackground1","focusIndicator","selector","style","outlineWidth","borderWidth","outlineRadius","useInputStyles","input","overflow","top","opacity","padding","margin","useShapeStyles","rounded","borderRadiusMedium","square","borderRadiusNone","useColorAreaStyles_unstable","state","rootStyles","thumbStyles","inputStyles","shapeStyles","className","shape"],"mappings":"AAAA;;;;;;;;;;;;~~IASaO,mBAAAA;;;+BAgGA8D;eAAAA~~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~~GAAGzE~~,~~uBAAAA~~,EACtBK,oBAAoBE,KAAK,EACzB+D,YAAY/D,KAAK,EACjB+D,YAAYrB,cAAc,EAC1BmB,MAAM7D,KAAK,CAACkE,SAAS;IAGvB,oDAAoD;IACpDL,MAAM5D,MAAM,CAACiE,SAAS,OAAGzE,mBAAAA,EAAaK,oBAAoBG,MAAM,EAAE+D,YAAYf,KAAK,EAAEY,MAAM5D,MAAM,CAACiE,SAAS;IAE3G,oDAAoD;IACpDL,MAAM3D,MAAM,CAACgE,SAAS,OAAGzE,mBAAAA,EAAaK,oBAAoBI,MAAM,EAAE8D,YAAYf,KAAK,EAAEY,MAAM3D,MAAM,CAACgE,SAAS;IAC3G,OAAOL;AACT,EAAE"}
1	+ {"version":3,"sources":["../../../src/components/ColorArea/useColorAreaStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport type { ColorAreaSlots, ColorAreaState } from './ColorArea.types';\nimport { colorAreaCSSVars } from './ColorArea.constants';\n\nexport const colorAreaClassNames: SlotClassNames<ColorAreaSlots> = {\n root: 'fui-ColorArea',\n thumb: 'fui-ColorArea__thumb',\n inputX: 'fui-ColorArea__inputX',\n inputY: 'fui-ColorArea__inputY',\n};\n\n// Internal CSS variables\nconst thumbSizeVar = `--fui-Slider__thumb--size`;\n\n/*\n Styles for the root slot\n /\nconst useRootStyles = makeResetStyles({\n position: 'relative',\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n background: `linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, transparent), var(${colorAreaCSSVars.mainColorVar})`,\n forcedColorAdjust: 'none',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'start',\n justifyItems: 'start',\n [thumbSizeVar]: '20px',\n minWidth: '300px',\n minHeight: '300px',\n boxSizing: 'border-box',\n marginBottom: tokens.spacingVerticalSNudge,\n});\n\n/\n Styles for the thumb slot\n /\nconst useThumbStyles = makeStyles({\n thumb: {\n position: 'absolute',\n width: `var(${thumbSizeVar})`,\n height: `var(${thumbSizeVar})`,\n pointerEvents: 'none',\n outlineStyle: 'none',\n forcedColorAdjust: 'none',\n borderRadius: tokens.borderRadiusCircular,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,\n boxShadow: tokens.shadow4,\n backgroundColor: `var(${colorAreaCSSVars.thumbColorVar})`,\n transform: 'translate(-50%, 50%)',\n left: `var(${colorAreaCSSVars.areaXProgressVar})`,\n bottom: `var(${colorAreaCSSVars.areaYProgressVar})`,\n '::before': {\n position: 'absolute',\n inset: '0px',\n borderRadius: tokens.borderRadiusCircular,\n boxSizing: 'border-box',\n content: \"''\",\n border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`,\n },\n },\n focusIndicator: createFocusOutlineStyle({\n selector: 'focus-within',\n style: {\n outlineWidth: tokens.strokeWidthThick,\n ...shorthands.borderWidth(tokens.strokeWidthThick),\n outlineRadius: tokens.borderRadiusCircular,\n },\n }),\n});\n\n/\n Styles for the Input slot\n /\nconst useInputStyles = makeStyles({\n input: {\n overflow: 'hidden',\n position: 'absolute',\n pointerEvents: 'none',\n top: 0,\n left: 0,\n opacity: 0,\n padding: '0',\n margin: '0',\n width: '100%',\n height: '100%',\n },\n});\n\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n },\n square: {\n borderRadius: tokens.borderRadiusNone,\n },\n});\n\n/\n Apply styling to the ColorArea slots based on the state\n */\nexport const useColorAreaStyles_unstable = (state: ColorAreaState): ColorAreaState => {\n const rootStyles = useRootStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const shapeStyles = useShapeStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n colorAreaClassNames.root,\n rootStyles,\n shapeStyles[state.shape \|\| 'rounded'],\n state.root.className,\n );\n\n // eslint-disable-next-line react-hooks/immutability\n state.thumb.className = mergeClasses(\n colorAreaClassNames.thumb,\n thumbStyles.thumb,\n thumbStyles.focusIndicator,\n state.thumb.className,\n );\n\n // eslint-disable-next-line react-hooks/immutability\n state.inputX.className = mergeClasses(colorAreaClassNames.inputX, inputStyles.input, state.inputX.className);\n\n // eslint-disable-next-line react-hooks/immutability\n state.inputY.className = mergeClasses(colorAreaClassNames.inputY, inputStyles.input, state.inputY.className);\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","createFocusOutlineStyle","colorAreaCSSVars","colorAreaClassNames","root","thumb","inputX","inputY","thumbSizeVar","useRootStyles","position","border","colorNeutralStroke1","background","mainColorVar","forcedColorAdjust","display","touchAction","alignItems","justifyItems","minWidth","minHeight","boxSizing","marginBottom","spacingVerticalSNudge","useThumbStyles","width","height","pointerEvents","outlineStyle","borderRadius","borderRadiusCircular","strokeWidthThin","colorNeutralForeground4","boxShadow","shadow4","backgroundColor","thumbColorVar","transform","left","areaXProgressVar","bottom","areaYProgressVar","inset","content","strokeWidthThick","colorNeutralBackground1","focusIndicator","selector","style","outlineWidth","borderWidth","outlineRadius","useInputStyles","input","overflow","top","opacity","padding","margin","useShapeStyles","rounded","borderRadiusMedium","square","borderRadiusNone","useColorAreaStyles_unstable","state","rootStyles","thumbStyles","inputStyles","shapeStyles","className","shape"],"mappings":"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"}

package/lib-commonjs/components/ColorPicker/ColorPicker.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["~~../~~src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useColorPicker_unstable } from './useColorPicker';\nimport { renderColorPicker_unstable } from './renderColorPicker';\nimport { useColorPickerStyles_unstable } from './useColorPickerStyles.styles';\nimport type { ColorPickerProps } from './ColorPicker.types';\nimport { useColorPickerContextValues } from './useColorPickerContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n ColorPicker component\n */\nexport const ColorPicker: ForwardRefComponent<ColorPickerProps> = React.forwardRef((props, ref) => {\n const state = useColorPicker_unstable(props, ref);\n const contextValues = useColorPickerContextValues(state);\n\n useColorPickerStyles_unstable(state);\n useCustomStyleHook_unstable('useColorPickerStyles_unstable')(state);\n\n return renderColorPicker_unstable(state, contextValues);\n});\n\nColorPicker.displayName = 'ColorPicker';\n"],"names":["React","useColorPicker_unstable","renderColorPicker_unstable","useColorPickerStyles_unstable","useColorPickerContextValues","useCustomStyleHook_unstable","ColorPicker","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCAES,sBAAmB;mCAChB,yBAAsB;4CACnB,mCAAgC;6CAElC,mCAAgC;qCAChC,kCAAkC;AAKvE,MAAMM,cAAAA,WAAAA,GAAqDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQT,uCAAAA,EAAwBO,OAAOC;IAC7C,MAAME,oBAAgBP,wDAAAA,EAA4BM;QAElDP,yDAAAA,EAA8BO;QAC9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOR,6CAAAA,EAA2BQ,OAAOC;AAC3C,GAAG;AAEHL,YAAYM,WAAW,GAAG"}
1	+ {"version":3,"sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useColorPicker_unstable } from './useColorPicker';\nimport { renderColorPicker_unstable } from './renderColorPicker';\nimport { useColorPickerStyles_unstable } from './useColorPickerStyles.styles';\nimport type { ColorPickerProps } from './ColorPicker.types';\nimport { useColorPickerContextValues } from './useColorPickerContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n ColorPicker component\n */\nexport const ColorPicker: ForwardRefComponent<ColorPickerProps> = React.forwardRef((props, ref) => {\n const state = useColorPicker_unstable(props, ref);\n const contextValues = useColorPickerContextValues(state);\n\n useColorPickerStyles_unstable(state);\n useCustomStyleHook_unstable('useColorPickerStyles_unstable')(state);\n\n return renderColorPicker_unstable(state, contextValues);\n});\n\nColorPicker.displayName = 'ColorPicker';\n"],"names":["React","useColorPicker_unstable","renderColorPicker_unstable","useColorPickerStyles_unstable","useColorPickerContextValues","useCustomStyleHook_unstable","ColorPicker","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCAES,sBAAmB;mCAChB,yBAAsB;4CACnB,mCAAgC;6CAElC,mCAAgC;qCAChC,kCAAkC;AAKvE,MAAMM,cAAAA,WAAAA,GAAqDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQT,uCAAAA,EAAwBO,OAAOC;IAC7C,MAAME,oBAAgBP,wDAAAA,EAA4BM;QAElDP,yDAAAA,EAA8BO;QAC9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOR,6CAAAA,EAA2BQ,OAAOC;AAC3C,GAAG;AAEHL,YAAYM,WAAW,GAAG"}

package/lib-commonjs/components/ColorPicker/ColorPicker.types.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["~~../~~src/components/ColorPicker/ColorPicker.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot, EventHandler, EventData } from '@fluentui/react-utilities';\nimport type { ColorPickerContextValue } from '../../contexts/colorPicker';\nimport type { HsvColor } from '../../types/color';\n\nexport type ColorPickerOnChangeData = EventData<'change', React.ChangeEvent<HTMLInputElement>> & {\n color: HsvColor;\n};\n\nexport type ColorPickerSlots = {\n root: Slot<'div'>;\n};\n\n/*\n ColorPicker Props\n /\nexport type ColorPickerProps = Omit<ComponentProps<Partial<ColorPickerSlots>>, 'color'> & {\n /\n Selected color.\n /\n color?: HsvColor;\n\n /\n Callback for when the user changes the color.\n /\n onColorChange?: EventHandler<ColorPickerOnChangeData>;\n\n /\n ColorPicker shape\n * @defaultvalue 'rounded'\n /\n shape?: 'rounded' \| 'square';\n};\n\n/* ColorPicker Base Props /\nexport type ColorPickerBaseProps = Omit<ColorPickerProps, 'shape'>;\n\n/\n State used in rendering ColorPicker\n /\nexport type ColorPickerState = ComponentState<ColorPickerSlots> & ColorPickerContextValue;\n\n/* State used in rendering unstyled ColorPicker */\nexport type ColorPickerBaseState = Omit<ColorPickerState, 'shape'>;\n"],"names":[],"mappings":"AA0CA,iDAAiD,GACjD,WAAmE"}
1	+ {"version":3,"sources":["../../../src/components/ColorPicker/ColorPicker.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot, EventHandler, EventData } from '@fluentui/react-utilities';\nimport type { ColorPickerContextValue } from '../../contexts/colorPicker';\nimport type { HsvColor } from '../../types/color';\n\nexport type ColorPickerOnChangeData = EventData<'change', React.ChangeEvent<HTMLInputElement>> & {\n color: HsvColor;\n};\n\nexport type ColorPickerSlots = {\n root: Slot<'div'>;\n};\n\n/*\n ColorPicker Props\n /\nexport type ColorPickerProps = Omit<ComponentProps<Partial<ColorPickerSlots>>, 'color'> & {\n /\n Selected color.\n /\n color?: HsvColor;\n\n /\n Callback for when the user changes the color.\n /\n onColorChange?: EventHandler<ColorPickerOnChangeData>;\n\n /\n ColorPicker shape\n * @defaultvalue 'rounded'\n /\n shape?: 'rounded' \| 'square';\n};\n\n/* ColorPicker Base Props /\nexport type ColorPickerBaseProps = Omit<ColorPickerProps, 'shape'>;\n\n/\n State used in rendering ColorPicker\n /\nexport type ColorPickerState = ComponentState<ColorPickerSlots> & ColorPickerContextValue;\n\n/* State used in rendering unstyled ColorPicker */\nexport type ColorPickerBaseState = Omit<ColorPickerState, 'shape'>;\n"],"names":[],"mappings":"AA0CA,iDAAiD,GACjD,WAAmE"}

package/lib-commonjs/components/ColorPicker/index.cjs CHANGED Viewed

@@ -5,32 +5,32 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    ColorPicker: function() {
+    get ColorPicker () {
         return _ColorPicker.ColorPicker;
     },
-    colorPickerClassNames: function() {
+    get colorPickerClassNames () {
         return _useColorPickerStylesstyles.colorPickerClassNames;
     },
-    renderColorPicker_unstable: function() {
+    get renderColorPicker_unstable () {
         return _renderColorPicker.renderColorPicker_unstable;
     },
-    useColorPickerBaseContextValues_unstable: function() {
+    get useColorPickerBaseContextValues_unstable () {
         return _useColorPickerContextValues.useColorPickerBaseContextValues_unstable;
     },
-    useColorPickerBase_unstable: function() {
+    get useColorPickerBase_unstable () {
         return _useColorPicker.useColorPickerBase_unstable;
     },
-    useColorPickerContextValues: function() {
+    get useColorPickerContextValues () {
         return _useColorPickerContextValues.useColorPickerContextValues;
     },
-    useColorPickerStyles_unstable: function() {
+    get useColorPickerStyles_unstable () {
         return _useColorPickerStylesstyles.useColorPickerStyles_unstable;
     },
-    useColorPicker_unstable: function() {
+    get useColorPicker_unstable () {
         return _useColorPicker.useColorPicker_unstable;
     }
 });

package/lib-commonjs/components/ColorPicker/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["~~../~~src/components/ColorPicker/index.ts"],"sourcesContent":["export { ColorPicker } from './ColorPicker';\nexport type {\n ColorPickerBaseProps,\n ColorPickerBaseState,\n ColorPickerOnChangeData,\n ColorPickerProps,\n ColorPickerSlots,\n ColorPickerState,\n} from './ColorPicker.types';\nexport { renderColorPicker_unstable } from './renderColorPicker';\nexport { useColorPickerBase_unstable, useColorPicker_unstable } from './useColorPicker';\nexport { useColorPickerBaseContextValues_unstable, useColorPickerContextValues } from './useColorPickerContextValues';\nexport { colorPickerClassNames, useColorPickerStyles_unstable } from './useColorPickerStyles.styles';\n"],"names":["ColorPicker","renderColorPicker_unstable","useColorPickerBase_unstable","useColorPicker_unstable","useColorPickerBaseContextValues_unstable","useColorPickerContextValues","colorPickerClassNames","useColorPickerStyles_unstable"],"mappings":"~~;;;;;;;;;;;IAASA;uCAAW;;yBAYU;eAArBM~~;;;~~eAHAL~~,6CAA0B;;;eAE1BG,qEAAwC;;;eADxCF,2CAA2B;;;eACeG,wDAA2B;;;eAC9CE,yDAA6B;;;eAFvBJ,uCAAuB;;;6BAVjC,mBAAgB;mCASD,yBAAsB;gCACI,sBAAmB;6CACF,mCAAgC;4CACjD,mCAAgC"}
1	+ {"version":3,"sources":["../../../src/components/ColorPicker/index.ts"],"sourcesContent":["export { ColorPicker } from './ColorPicker';\nexport type {\n ColorPickerBaseProps,\n ColorPickerBaseState,\n ColorPickerOnChangeData,\n ColorPickerProps,\n ColorPickerSlots,\n ColorPickerState,\n} from './ColorPicker.types';\nexport { renderColorPicker_unstable } from './renderColorPicker';\nexport { useColorPickerBase_unstable, useColorPicker_unstable } from './useColorPicker';\nexport { useColorPickerBaseContextValues_unstable, useColorPickerContextValues } from './useColorPickerContextValues';\nexport { colorPickerClassNames, useColorPickerStyles_unstable } from './useColorPickerStyles.styles';\n"],"names":["ColorPicker","renderColorPicker_unstable","useColorPickerBase_unstable","useColorPicker_unstable","useColorPickerBaseContextValues_unstable","useColorPickerContextValues","colorPickerClassNames","useColorPickerStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eAYXM,iDAAqB;;;eAHrBL,6CAA0B;;;eAE1BG,qEAAwC;;;eADxCF,2CAA2B;;;eACeG,wDAA2B;;;eAC9CE,yDAA6B;;;eAFvBJ,uCAAuB;;;6BAVjC,mBAAgB;mCASD,yBAAsB;gCACI,sBAAmB;6CACF,mCAAgC;4CACjD,mCAAgC"}

package/lib-commonjs/components/ColorPicker/renderColorPicker.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["~~../~~src/components/ColorPicker/renderColorPicker.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 { ColorPickerBaseState, ColorPickerSlots } from './ColorPicker.types';\nimport type { ColorPickerContextValues } from '../../contexts/colorPicker';\nimport { ColorPickerProvider } from '../../contexts/colorPicker';\n\n/\n Render the final JSX of ColorPicker\n */\nexport const renderColorPicker_unstable = (\n state: ColorPickerBaseState,\n contextValues: ColorPickerContextValues,\n): JSXElement => {\n assertSlots<ColorPickerSlots>(state);\n\n return (\n <ColorPickerProvider value={contextValues.colorPicker}>\n <state.root>{state.root.children}</state.root>\n </ColorPickerProvider>\n );\n};\n"],"names":["assertSlots","ColorPickerProvider","renderColorPicker_unstable","state","contextValues","value","colorPicker","root","children"],"mappings":";;;;+BAYaE~~;;;;;;4BAXb~~,gDAAiD~~;gCAErB~~,4BAA4B;6BAIpB,gCAA6B;AAK1D,mCAAmC,~~CACxCC~~,OACAC;QAEAJ,2BAAAA,EAA8BG;IAE9B,OAAA,WAAA,OACE,eAAA,EAACF,gCAAAA,EAAAA;QAAoBI,OAAOD,cAAcE,WAAW;kBACnD,WAAA,OAAA,eAAA,EAACH,MAAMI,IAAI,EAAA;sBAAEJ,MAAMI,IAAI,CAACC,QAAQ;;;AAGtC,EAAE"}
1	+ {"version":3,"sources":["../../../src/components/ColorPicker/renderColorPicker.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 { ColorPickerBaseState, ColorPickerSlots } from './ColorPicker.types';\nimport type { ColorPickerContextValues } from '../../contexts/colorPicker';\nimport { ColorPickerProvider } from '../../contexts/colorPicker';\n\n/\n Render the final JSX of ColorPicker\n */\nexport const renderColorPicker_unstable = (\n state: ColorPickerBaseState,\n contextValues: ColorPickerContextValues,\n): JSXElement => {\n assertSlots<ColorPickerSlots>(state);\n\n return (\n <ColorPickerProvider value={contextValues.colorPicker}>\n <state.root>{state.root.children}</state.root>\n </ColorPickerProvider>\n );\n};\n"],"names":["assertSlots","ColorPickerProvider","renderColorPicker_unstable","state","contextValues","value","colorPicker","root","children"],"mappings":";;;;+BAYaE;;;;;;;gCAXb,gDAAiD,GAEjD,SAASF,WAAW,QAAQ,4BAA4B;6BAIpB,gCAA6B;AAK1D,mCAAmC,CACxCG,OACAC;QAEAJ,2BAAAA,EAA8BG;IAE9B,OAAA,WAAA,OACE,eAAA,EAACF,gCAAAA,EAAAA;QAAoBI,OAAOD,cAAcE,WAAW;kBACnD,WAAA,OAAA,eAAA,EAACH,MAAMI,IAAI,EAAA;sBAAEJ,MAAMI,IAAI,CAACC,QAAQ;;;AAGtC,EAAE"}

package/lib-commonjs/components/ColorPicker/useColorPicker.cjs CHANGED Viewed

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    useColorPickerBase_unstable: function() {
+    get useColorPickerBase_unstable () {
         return useColorPickerBase_unstable;
     },
-    useColorPicker_unstable: function() {
+    get useColorPicker_unstable () {
         return useColorPicker_unstable;
     }
 });

package/lib-commonjs/components/ColorPicker/useColorPicker.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["~~../~~src/components/ColorPicker/useColorPicker.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback } from '@fluentui/react-utilities';\nimport type {\n ColorPickerBaseProps,\n ColorPickerBaseState,\n ColorPickerProps,\n ColorPickerState,\n} from './ColorPicker.types';\n/*\n Create the state required to render ColorPicker.\n \n The returned state can be modified with hooks such as useColorPickerStyles_unstable,\n * before being passed to renderColorPicker_unstable.\n \n @param props - props from this instance of ColorPicker\n * @param ref - reference to root HTMLDivElement of ColorPicker\n */\nexport const useColorPickerBase_unstable = (\n props: ColorPickerBaseProps,\n ref: React.Ref<HTMLDivElement>,\n): ColorPickerBaseState => {\n const { color, onColorChange, ...rest } = props;\n\n const requestChange: ColorPickerBaseState['requestChange'] = useEventCallback((event, data) => {\n onColorChange?.(event, {\n type: 'change',\n event,\n color: data.color,\n });\n });\n\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...rest,\n }),\n { elementType: 'div' },\n ),\n color,\n requestChange,\n };\n};\n\nexport const useColorPicker_unstable = (props: ColorPickerProps, ref: React.Ref<HTMLDivElement>): ColorPickerState => {\n const { shape, ...baseProps } = props;\n\n return {\n ...useColorPickerBase_unstable(baseProps, ref),\n shape,\n };\n};\n"],"names":["getIntrinsicElementProps","slot","useEventCallback","useColorPickerBase_unstable","props","ref","color","onColorChange","rest","requestChange","event","data","type","components","root","always","elementType","useColorPicker_unstable","shape","baseProps"],"mappings":"AAAA;;;;;;;;;;;;~~IAmBaG~~,~~2BAAAA;;;2BA8BAc;;;;gCA9CoD,~~4BAA4B;AAgBtF,oCAAoC,~~CACzCb~~,OACAC;IAEA,MAAM,EAAEC,KAAK,EAAEC,aAAa,EAAE,GAAGC,MAAM,GAAGJ;IAE1C,MAAMK,oBAAuDP,gCAAAA,EAAiB,CAACQ,OAAOC;QACpFJ,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAgBG,OAAO;YACrBE,MAAM;YACNF;YACAJ,OAAOK,KAAKL,KAAK;QACnB;IACF;IAEA,OAAO;QACLO,YAAY;YACVC,MAAM;QACR;QACAA,MAAMb,oBAAAA,CAAKc,MAAM,KACff,wCAAAA,EAAyB,OAAO;YAC9BK;YACA,GAAGG,IAAI;QACT,IACA;YAAEQ,aAAa;QAAM;QAEvBV;QACAG;IACF;AACF,EAAE;AAEK,MAAMQ,0BAA0B,CAACb,OAAyBC;IAC/D,MAAM,EAAEa,KAAK,EAAE,GAAGC,WAAW,GAAGf;IAEhC,OAAO;QACL,GAAGD,4BAA4BgB,WAAWd,IAAI;QAC9Ca;IACF;AACF,EAAE"}
1	+ {"version":3,"sources":["../../../src/components/ColorPicker/useColorPicker.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback } from '@fluentui/react-utilities';\nimport type {\n ColorPickerBaseProps,\n ColorPickerBaseState,\n ColorPickerProps,\n ColorPickerState,\n} from './ColorPicker.types';\n/*\n Create the state required to render ColorPicker.\n \n The returned state can be modified with hooks such as useColorPickerStyles_unstable,\n * before being passed to renderColorPicker_unstable.\n \n @param props - props from this instance of ColorPicker\n * @param ref - reference to root HTMLDivElement of ColorPicker\n */\nexport const useColorPickerBase_unstable = (\n props: ColorPickerBaseProps,\n ref: React.Ref<HTMLDivElement>,\n): ColorPickerBaseState => {\n const { color, onColorChange, ...rest } = props;\n\n const requestChange: ColorPickerBaseState['requestChange'] = useEventCallback((event, data) => {\n onColorChange?.(event, {\n type: 'change',\n event,\n color: data.color,\n });\n });\n\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...rest,\n }),\n { elementType: 'div' },\n ),\n color,\n requestChange,\n };\n};\n\nexport const useColorPicker_unstable = (props: ColorPickerProps, ref: React.Ref<HTMLDivElement>): ColorPickerState => {\n const { shape, ...baseProps } = props;\n\n return {\n ...useColorPickerBase_unstable(baseProps, ref),\n shape,\n };\n};\n"],"names":["getIntrinsicElementProps","slot","useEventCallback","useColorPickerBase_unstable","props","ref","color","onColorChange","rest","requestChange","event","data","type","components","root","always","elementType","useColorPicker_unstable","shape","baseProps"],"mappings":"AAAA;;;;;;;;;;;;QAmBaG;;;;;;;gCAhBoD,4BAA4B;AAgBtF,oCAAoC,CACzCC,OACAC;IAEA,MAAM,EAAEC,KAAK,EAAEC,aAAa,EAAE,GAAGC,MAAM,GAAGJ;IAE1C,MAAMK,oBAAuDP,gCAAAA,EAAiB,CAACQ,OAAOC;QACpFJ,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAgBG,OAAO;YACrBE,MAAM;YACNF;YACAJ,OAAOK,KAAKL,KAAK;QACnB;IACF;IAEA,OAAO;QACLO,YAAY;YACVC,MAAM;QACR;QACAA,MAAMb,oBAAAA,CAAKc,MAAM,KACff,wCAAAA,EAAyB,OAAO;YAC9BK;YACA,GAAGG,IAAI;QACT,IACA;YAAEQ,aAAa;QAAM;QAEvBV;QACAG;IACF;AACF,EAAE;AAEK,MAAMQ,0BAA0B,CAACb,OAAyBC;IAC/D,MAAM,EAAEa,KAAK,EAAE,GAAGC,WAAW,GAAGf;IAEhC,OAAO;QACL,GAAGD,4BAA4BgB,WAAWd,IAAI;QAC9Ca;IACF;AACF,EAAE"}

package/lib-commonjs/components/ColorPicker/useColorPickerContextValues.cjs CHANGED Viewed

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    useColorPickerBaseContextValues_unstable: function() {
+    get useColorPickerBaseContextValues_unstable () {
         return useColorPickerBaseContextValues_unstable;
     },
-    useColorPickerContextValues: function() {
+    get useColorPickerContextValues () {
         return useColorPickerContextValues;
     }
 });

package/lib-commonjs/components/ColorPicker/useColorPickerContextValues.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["~~../~~src/components/ColorPicker/useColorPickerContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ColorPickerContextValue, ColorPickerContextValues } from '../../contexts/colorPicker';\nimport type { ColorPickerBaseState, ColorPickerState } from './ColorPicker.types';\n\nexport const useColorPickerBaseContextValues_unstable = (state: ColorPickerBaseState): ColorPickerContextValues => {\n const { color, requestChange } = state;\n\n const colorPicker = React.useMemo<ColorPickerContextValue>(\n () => ({\n requestChange,\n color,\n shape: undefined,\n }),\n [requestChange, color],\n );\n\n return { colorPicker };\n};\n\nexport const useColorPickerContextValues = (state: ColorPickerState): ColorPickerContextValues => {\n const { color, shape, requestChange } = state;\n\n const colorPicker = React.useMemo<ColorPickerContextValue>(\n () => ({\n requestChange,\n color,\n shape,\n }),\n [requestChange, color, shape],\n );\n\n return { colorPicker };\n};\n"],"names":["React","useColorPickerBaseContextValues_unstable","state","color","requestChange","colorPicker","useMemo","shape","undefined","useColorPickerContextValues"],"mappings":"AAAA;;;;;;;;;;;;~~IAMaC,wCAAAA;;;+BAeAQ;eAAAA;;;;~~iEAnBU,QAAQ;AAIxB,iDAAiD,CAACP;IACvD,MAAM,EAAEC,KAAK,EAAEC,aAAa,EAAE,GAAGF;IAEjC,MAAMG,cAAcL,OAAMM,OAAO,CAC/B,IAAO,CAAA;YACLF;YACAD;YACAI,OAAOC;SACT,CAAA,EACA;QAACJ;QAAeD;KAAM;IAGxB,OAAO;QAAEE;IAAY;AACvB,EAAE;AAEK,oCAAoC,CAACH;IAC1C,MAAM,EAAEC,KAAK,EAAEI,KAAK,EAAEH,aAAa,EAAE,GAAGF;IAExC,MAAMG,cAAcL,OAAMM,OAAO,CAC/B,IAAO,CAAA;YACLF;YACAD;YACAI;SACF,CAAA,EACA;QAACH;QAAeD;QAAOI;KAAM;IAG/B,OAAO;QAAEF;IAAY;AACvB,EAAE"}
1	+ {"version":3,"sources":["../../../src/components/ColorPicker/useColorPickerContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ColorPickerContextValue, ColorPickerContextValues } from '../../contexts/colorPicker';\nimport type { ColorPickerBaseState, ColorPickerState } from './ColorPicker.types';\n\nexport const useColorPickerBaseContextValues_unstable = (state: ColorPickerBaseState): ColorPickerContextValues => {\n const { color, requestChange } = state;\n\n const colorPicker = React.useMemo<ColorPickerContextValue>(\n () => ({\n requestChange,\n color,\n shape: undefined,\n }),\n [requestChange, color],\n );\n\n return { colorPicker };\n};\n\nexport const useColorPickerContextValues = (state: ColorPickerState): ColorPickerContextValues => {\n const { color, shape, requestChange } = state;\n\n const colorPicker = React.useMemo<ColorPickerContextValue>(\n () => ({\n requestChange,\n color,\n shape,\n }),\n [requestChange, color, shape],\n );\n\n return { colorPicker };\n};\n"],"names":["React","useColorPickerBaseContextValues_unstable","state","color","requestChange","colorPicker","useMemo","shape","undefined","useColorPickerContextValues"],"mappings":"AAAA;;;;;;;;;;;;QAMaC;;;QAeAQ;;;;;iEAnBU,QAAQ;AAIxB,iDAAiD,CAACP;IACvD,MAAM,EAAEC,KAAK,EAAEC,aAAa,EAAE,GAAGF;IAEjC,MAAMG,cAAcL,OAAMM,OAAO,CAC/B,IAAO,CAAA;YACLF;YACAD;YACAI,OAAOC;SACT,CAAA,EACA;QAACJ;QAAeD;KAAM;IAGxB,OAAO;QAAEE;IAAY;AACvB,EAAE;AAEK,oCAAoC,CAACH;IAC1C,MAAM,EAAEC,KAAK,EAAEI,KAAK,EAAEH,aAAa,EAAE,GAAGF;IAExC,MAAMG,cAAcL,OAAMM,OAAO,CAC/B,IAAO,CAAA;YACLF;YACAD;YACAI;SACF,CAAA,EACA;QAACH;QAAeD;QAAOI;KAAM;IAG/B,OAAO;QAAEF;IAAY;AACvB,EAAE"}

package/lib-commonjs/components/ColorPicker/useColorPickerStyles.styles.cjs CHANGED Viewed

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    colorPickerClassNames: function() {
+    get colorPickerClassNames () {
         return colorPickerClassNames;
     },
-    useColorPickerStyles_unstable: function() {
+    get useColorPickerStyles_unstable () {
         return useColorPickerStyles_unstable;
     }
 });

package/lib-commonjs/components/ColorPicker/useColorPickerStyles.styles.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useColorPickerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from \"@griffel/react\";\nimport { tokens } from \"@fluentui/react-theme\";\nexport const colorPickerClassNames = {\n root: 'fui-ColorPicker'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n gap: tokens.spacingVerticalXS\n }\n});\n/\n Apply styling to the ColorPicker slots based on the state\n */ export const useColorPickerStyles_unstable = (state)=>{\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(colorPickerClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","tokens","colorPickerClassNames","root","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","rmohyg","d","p","useColorPickerStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;~~IAGCG~~,qBAAqB;;;~~iCAcY;eAA7BU;;;uBAhBwB~~,gBAAgB;AAElD,8BAA8B;IACjCT,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAMrB,CAAC;AAGS,uCAAuCE,KAAK,IAAG;IACtD,MAAMC,MAAM,GAAGV,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAS,KAAK,CAACV,IAAI,CAACY,SAAS,OAAGf,mBAAY,EAACE,qBAAqB,CAACC,IAAI,EAAEW,MAAM,CAACX,IAAI,EAAEU,KAAK,CAACV,IAAI,CAACY,SAAS,CAAC;IAClG,OAAOF,KAAK;AAChB,CAAC"}
1	+ {"version":3,"sources":["useColorPickerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from \"@griffel/react\";\nimport { tokens } from \"@fluentui/react-theme\";\nexport const colorPickerClassNames = {\n root: 'fui-ColorPicker'\n};\n/*\n Styles for the root slot\n / const useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n gap: tokens.spacingVerticalXS\n }\n});\n/\n Apply styling to the ColorPicker slots based on the state\n */ export const useColorPickerStyles_unstable = (state)=>{\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(colorPickerClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","tokens","colorPickerClassNames","root","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","rmohyg","d","p","useColorPickerStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;QAGCG,qBAAqB;;;QAcjBU,6BAA6B;;;;uBAhBL,gBAAgB;AAElD,8BAA8B;IACjCT,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAMrB,CAAC;AAGS,uCAAuCE,KAAK,IAAG;IACtD,MAAMC,MAAM,GAAGV,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAS,KAAK,CAACV,IAAI,CAACY,SAAS,OAAGf,mBAAY,EAACE,qBAAqB,CAACC,IAAI,EAAEW,MAAM,CAACX,IAAI,EAAEU,KAAK,CAACV,IAAI,CAACY,SAAS,CAAC;IAClG,OAAOF,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/ColorPicker/useColorPickerStyles.styles.raw.cjs CHANGED Viewed

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    colorPickerClassNames: function() {
+    get colorPickerClassNames () {
         return colorPickerClassNames;
     },
-    useColorPickerStyles_unstable: function() {
+    get useColorPickerStyles_unstable () {
         return useColorPickerStyles_unstable;
     }
 });

package/lib-commonjs/components/ColorPicker/useColorPickerStyles.styles.raw.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["~~../~~src/components/ColorPicker/useColorPickerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ColorPickerSlots, ColorPickerState } from './ColorPicker.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const colorPickerClassNames: SlotClassNames<ColorPickerSlots> = {\n root: 'fui-ColorPicker',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n gap: tokens.spacingVerticalXS,\n },\n});\n\n/\n Apply styling to the ColorPicker slots based on the state\n */\nexport const useColorPickerStyles_unstable = (state: ColorPickerState): ColorPickerState => {\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(colorPickerClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","colorPickerClassNames","root","useStyles","display","flexDirection","gap","spacingVerticalXS","useColorPickerStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;~~IAOaG,qBAAAA~~;;;~~IAkBAO,6BAAAA;;;;~~uBAvB4B,iBAAiB;4BAGnC,wBAAwB;AAExC,8BAAgE;IACrEN,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,~~YAAYL~~,~~qBAAAA~~,EAAW;IAC3BI,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,KAAKN,kBAAAA,CAAOO,iBAAiB;IAC/B;AACF;AAKO,sCAAsC,CAACE;IAC5C,MAAMC,SAASP;IACf,oDAAoD;IACpDM,MAAMP,IAAI,CAACS,SAAS,OAAGZ,mBAAAA,EAAaE,sBAAsBC,IAAI,EAAEQ,OAAOR,IAAI,EAAEO,MAAMP,IAAI,CAACS,SAAS;IAEjG,OAAOF;AACT,EAAE"}
1	+ {"version":3,"sources":["../../../src/components/ColorPicker/useColorPickerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ColorPickerSlots, ColorPickerState } from './ColorPicker.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const colorPickerClassNames: SlotClassNames<ColorPickerSlots> = {\n root: 'fui-ColorPicker',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n gap: tokens.spacingVerticalXS,\n },\n});\n\n/\n Apply styling to the ColorPicker slots based on the state\n */\nexport const useColorPickerStyles_unstable = (state: ColorPickerState): ColorPickerState => {\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(colorPickerClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","colorPickerClassNames","root","useStyles","display","flexDirection","gap","spacingVerticalXS","useColorPickerStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;QAOaG;;;;eAkBAO;;;uBAvB4B,iBAAiB;4BAGnC,wBAAwB;AAExC,8BAAgE;IACrEN,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYL,iBAAAA,EAAW;IAC3BI,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,KAAKN,kBAAAA,CAAOO,iBAAiB;IAC/B;AACF;AAKO,sCAAsC,CAACE;IAC5C,MAAMC,SAASP;IACf,oDAAoD;IACpDM,MAAMP,IAAI,CAACS,SAAS,OAAGZ,mBAAAA,EAAaE,sBAAsBC,IAAI,EAAEQ,OAAOR,IAAI,EAAEO,MAAMP,IAAI,CAACS,SAAS;IAEjG,OAAOF;AACT,EAAE"}

package/lib-commonjs/components/ColorSlider/ColorSlider.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["~~../~~src/components/ColorSlider/ColorSlider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useColorSlider_unstable } from './useColorSlider';\nimport { renderColorSlider_unstable } from './renderColorSlider';\nimport { useColorSliderStyles_unstable } from './useColorSliderStyles.styles';\nimport type { ColorSliderProps } from './ColorSlider.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n ColorSlider component\n */\nexport const ColorSlider: ForwardRefComponent<ColorSliderProps> = React.forwardRef((props, ref) => {\n const state = useColorSlider_unstable(props, ref);\n\n useColorSliderStyles_unstable(state);\n useCustomStyleHook_unstable('useColorSliderStyles_unstable')(state);\n\n return renderColorSlider_unstable(state);\n});\n\nColorSlider.displayName = 'ColorSlider';\n"],"names":["React","useColorSlider_unstable","renderColorSlider_unstable","useColorSliderStyles_unstable","useCustomStyleHook_unstable","ColorSlider","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"}
1	+ {"version":3,"sources":["../../../src/components/ColorSlider/ColorSlider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useColorSlider_unstable } from './useColorSlider';\nimport { renderColorSlider_unstable } from './renderColorSlider';\nimport { useColorSliderStyles_unstable } from './useColorSliderStyles.styles';\nimport type { ColorSliderProps } from './ColorSlider.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n ColorSlider component\n */\nexport const ColorSlider: ForwardRefComponent<ColorSliderProps> = React.forwardRef((props, ref) => {\n const state = useColorSlider_unstable(props, ref);\n\n useColorSliderStyles_unstable(state);\n useCustomStyleHook_unstable('useColorSliderStyles_unstable')(state);\n\n return renderColorSlider_unstable(state);\n});\n\nColorSlider.displayName = 'ColorSlider';\n"],"names":["React","useColorSlider_unstable","renderColorSlider_unstable","useColorSliderStyles_unstable","useCustomStyleHook_unstable","ColorSlider","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/ColorSlider/ColorSlider.constants.cjs CHANGED Viewed

@@ -13,6 +13,7 @@ const colorSliderCSSVars = {
     sliderProgressVar: `--fui-Slider--progress`,
     thumbColorVar: `--fui-Slider__thumb--color`,
     railColorVar: `--fui-Slider__rail--color`,
+    railColorLowVar: `--fui-Slider__rail--color-low`,
     thumbSizeVar: `--fui-Slider__thumb--size`,
     railSizeVar: `--fui-Slider__rail--size`
 };

package/lib-commonjs/components/ColorSlider/ColorSlider.constants.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["~~../~~src/components/ColorSlider/ColorSlider.constants.ts"],"sourcesContent":["export const colorSliderCSSVars = {\n sliderDirectionVar: `--fui-Slider--direction`,\n sliderProgressVar: `--fui-Slider--progress`,\n thumbColorVar: `--fui-Slider__thumb--color`,\n railColorVar: `--fui-Slider__rail--color`,\n thumbSizeVar: `--fui-Slider__thumb--size`,\n railSizeVar: `--fui-Slider__rail--size`,\n};\n"],"names":["colorSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","thumbSizeVar","railSizeVar"],"mappings":";;;;+BAAaA;;;;;;AAAN,2BAA2B;IAChCC,oBAAoB,CAAC,uBAAuB,CAAC;IAC7CC,mBAAmB,CAAC,sBAAsB,CAAC;IAC3CC,eAAe,CAAC,0BAA0B,CAAC;IAC3CC,cAAc,CAAC,yBAAyB,CAAC;IACzCC,cAAc,CAAC,yBAAyB,CAAC;IACzCC,aAAa,CAAC,wBAAwB,CAAC;AACzC,EAAE"}
1	+ {"version":3,"sources":["../../../src/components/ColorSlider/ColorSlider.constants.ts"],"sourcesContent":["export const colorSliderCSSVars = {\n sliderDirectionVar: `--fui-Slider--direction`,\n sliderProgressVar: `--fui-Slider--progress`,\n thumbColorVar: `--fui-Slider__thumb--color`,\n railColorVar: `--fui-Slider__rail--color`,\n railColorLowVar: `--fui-Slider__rail--color-low`,\n thumbSizeVar: `--fui-Slider__thumb--size`,\n railSizeVar: `--fui-Slider__rail--size`,\n};\n"],"names":["colorSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","railColorLowVar","thumbSizeVar","railSizeVar"],"mappings":";;;;+BAAaA;;;;;;AAAN,2BAA2B;IAChCC,oBAAoB,CAAC,uBAAuB,CAAC;IAC7CC,mBAAmB,CAAC,sBAAsB,CAAC;IAC3CC,eAAe,CAAC,0BAA0B,CAAC;IAC3CC,cAAc,CAAC,yBAAyB,CAAC;IACzCC,iBAAiB,CAAC,6BAA6B,CAAC;IAChDC,cAAc,CAAC,yBAAyB,CAAC;IACzCC,aAAa,CAAC,wBAAwB,CAAC;AACzC,EAAE"}

package/lib-commonjs/components/ColorSlider/ColorSlider.types.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["~~../~~src/components/ColorSlider/ColorSlider.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot, EventHandler, EventData } from '@fluentui/react-utilities';\nimport type { HsvColor } from '../../types/color';\nimport type { ColorPickerProps } from '../ColorPicker/ColorPicker.types';\n\nexport type SliderOnChangeData = EventData<'change', React.ChangeEvent<HTMLInputElement>> & {\n color: HsvColor;\n};\n\nexport type ColorSliderSlots = {\n root: NonNullable<Slot<'div'>>;\n rail: NonNullable<Slot<'div'>>;\n thumb: NonNullable<Slot<'div'>>;\n input: NonNullable<Slot<'input'>>;\n};\n\nexport type ColorChannel = 'hue' \| 'saturation' \| 'value';\n\n/*\n ColorSlider Props\n /\nexport type ColorSliderProps = Omit<\n ComponentProps<Partial<ColorSliderSlots>, 'input'>,\n 'defaultValue' \| 'onChange' \| 'value' \| 'color'\n> &\n Pick<ColorPickerProps, 'shape'> & {\n /\n Color channel of the Slider.\n * @default `hue`\n /\n channel?: ColorChannel;\n\n /\n Triggers a callback when the value has been changed. This will be called on every individual step.\n /\n onChange?: EventHandler<SliderOnChangeData>;\n\n /\n Render the Slider in a vertical orientation, smallest value on the bottom.\n * @default `false`\n /\n vertical?: boolean;\n\n /\n Color of the ColorPicker\n /\n color?: HsvColor;\n\n /\n The starting color for an uncontrolled ColorSlider.\n /\n defaultColor?: HsvColor;\n };\n\nexport type ColorSliderBaseProps = Omit<ColorSliderProps, 'shape'>;\n\n/\n State used in rendering ColorSlider\n */\nexport type ColorSliderState = ComponentState<ColorSliderSlots> &\n Pick<ColorSliderProps, 'vertical' \| 'shape' \| 'channel'>;\n\nexport type ColorSliderBaseState = Omit<ColorSliderState, 'shape'>;\n"],"names":[],"mappings":""}
1	+ {"version":3,"sources":["../../../src/components/ColorSlider/ColorSlider.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot, EventHandler, EventData } from '@fluentui/react-utilities';\nimport type { HsvColor } from '../../types/color';\nimport type { ColorPickerProps } from '../ColorPicker/ColorPicker.types';\n\nexport type SliderOnChangeData = EventData<'change', React.ChangeEvent<HTMLInputElement>> & {\n color: HsvColor;\n};\n\nexport type ColorSliderSlots = {\n root: NonNullable<Slot<'div'>>;\n rail: NonNullable<Slot<'div'>>;\n thumb: NonNullable<Slot<'div'>>;\n input: NonNullable<Slot<'input'>>;\n};\n\nexport type ColorChannel = 'hue' \| 'saturation' \| 'value';\n\n/*\n ColorSlider Props\n /\nexport type ColorSliderProps = Omit<\n ComponentProps<Partial<ColorSliderSlots>, 'input'>,\n 'defaultValue' \| 'onChange' \| 'value' \| 'color'\n> &\n Pick<ColorPickerProps, 'shape'> & {\n /\n Color channel of the Slider.\n * @default `hue`\n /\n channel?: ColorChannel;\n\n /\n Triggers a callback when the value has been changed. This will be called on every individual step.\n /\n onChange?: EventHandler<SliderOnChangeData>;\n\n /\n Render the Slider in a vertical orientation, smallest value on the bottom.\n * @default `false`\n /\n vertical?: boolean;\n\n /\n Color of the ColorPicker\n /\n color?: HsvColor;\n\n /\n The starting color for an uncontrolled ColorSlider.\n /\n defaultColor?: HsvColor;\n };\n\nexport type ColorSliderBaseProps = Omit<ColorSliderProps, 'shape'>;\n\n/\n State used in rendering ColorSlider\n */\nexport type ColorSliderState = ComponentState<ColorSliderSlots> &\n Pick<ColorSliderProps, 'vertical' \| 'shape' \| 'channel'>;\n\nexport type ColorSliderBaseState = Omit<ColorSliderState, 'shape'>;\n"],"names":[],"mappings":""}

package/lib-commonjs/components/ColorSlider/index.cjs CHANGED Viewed

@@ -5,29 +5,29 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    ColorSlider: function() {
+    get ColorSlider () {
         return _ColorSlider.ColorSlider;
     },
-    colorSliderCSSVars: function() {
+    get colorSliderCSSVars () {
         return _ColorSliderconstants.colorSliderCSSVars;
     },
-    colorSliderClassNames: function() {
+    get colorSliderClassNames () {
         return _useColorSliderStylesstyles.colorSliderClassNames;
     },
-    renderColorSlider_unstable: function() {
+    get renderColorSlider_unstable () {
         return _renderColorSlider.renderColorSlider_unstable;
     },
-    useColorSliderBase_unstable: function() {
+    get useColorSliderBase_unstable () {
         return _useColorSlider.useColorSliderBase_unstable;
     },
-    useColorSliderStyles_unstable: function() {
+    get useColorSliderStyles_unstable () {
         return _useColorSliderStylesstyles.useColorSliderStyles_unstable;
     },
-    useColorSlider_unstable: function() {
+    get useColorSlider_unstable () {
         return _useColorSlider.useColorSlider_unstable;
     }
 });

package/lib-commonjs/components/ColorSlider/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["~~../~~src/components/ColorSlider/index.ts"],"sourcesContent":["export { ColorSlider } from './ColorSlider';\nexport type {\n ColorChannel,\n ColorSliderBaseProps,\n ColorSliderBaseState,\n ColorSliderProps,\n ColorSliderSlots,\n ColorSliderState,\n SliderOnChangeData,\n} from './ColorSlider.types';\nexport { renderColorSlider_unstable } from './renderColorSlider';\nexport { useColorSliderBase_unstable, useColorSlider_unstable } from './useColorSlider';\nexport { colorSliderClassNames, useColorSliderStyles_unstable } from './useColorSliderStyles.styles';\nexport { colorSliderCSSVars } from './ColorSlider.constants';\n"],"names":["ColorSlider","renderColorSlider_unstable","useColorSliderBase_unstable","useColorSlider_unstable","colorSliderClassNames","useColorSliderStyles_unstable","colorSliderCSSVars"],"mappings":"~~;;;;;;;;;;;IAASA;uCAAW;;IAaXM;uDAAkB~~;;;eADlBF,iDAAqB;;;eAFrBH,6CAA0B;;;eAC1BC,2CAA2B;;;eACJG,yDAA6B;;;eADvBF,uCAAuB;;;6BAXjC,mBAAgB;mCAUD,yBAAsB;gCACI,sBAAmB;4CACnB,mCAAgC;sCAClE,6BAA0B"}
1	+ {"version":3,"sources":["../../../src/components/ColorSlider/index.ts"],"sourcesContent":["export { ColorSlider } from './ColorSlider';\nexport type {\n ColorChannel,\n ColorSliderBaseProps,\n ColorSliderBaseState,\n ColorSliderProps,\n ColorSliderSlots,\n ColorSliderState,\n SliderOnChangeData,\n} from './ColorSlider.types';\nexport { renderColorSlider_unstable } from './renderColorSlider';\nexport { useColorSliderBase_unstable, useColorSlider_unstable } from './useColorSlider';\nexport { colorSliderClassNames, useColorSliderStyles_unstable } from './useColorSliderStyles.styles';\nexport { colorSliderCSSVars } from './ColorSlider.constants';\n"],"names":["ColorSlider","renderColorSlider_unstable","useColorSliderBase_unstable","useColorSlider_unstable","colorSliderClassNames","useColorSliderStyles_unstable","colorSliderCSSVars"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eAaXM,wCAAkB;;;eADlBF,iDAAqB;;;eAFrBH,6CAA0B;;;eAC1BC,2CAA2B;;;eACJG,yDAA6B;;;eADvBF,uCAAuB;;;6BAXjC,mBAAgB;mCAUD,yBAAsB;gCACI,sBAAmB;4CACnB,mCAAgC;sCAClE,6BAA0B"}

package/lib-commonjs/components/ColorSlider/renderColorSlider.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["~~../~~src/components/ColorSlider/renderColorSlider.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 { ColorSliderBaseState, ColorSliderSlots } from './ColorSlider.types';\n\n/\n Render the final JSX of ColorSlider\n */\nexport const renderColorSlider_unstable = (state: ColorSliderBaseState): JSXElement => {\n assertSlots<ColorSliderSlots>(state);\n\n return (\n <state.root>\n <state.input />\n <state.rail />\n <state.thumb />\n </state.root>\n );\n};\n"],"names":["assertSlots","renderColorSlider_unstable","state","root","input","rail","thumb"],"mappings":";;;;+BAUaC~~;;;;;;4BATb~~,~~iCAAiD;gCAErB~~,4BAA4B;AAOjD,mCAAmC,~~CAACC~~;QACzCF,2BAAAA,EAA8BE;IAE9B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;8BACT,eAAA,EAACD,MAAME,KAAK,EAAA,CAAA;8BACZ,eAAA,EAACF,MAAMG,IAAI,EAAA,CAAA;8BACX,eAAA,EAACH,MAAMI,KAAK,EAAA,CAAA;;;AAGlB,EAAE"}
1	+ {"version":3,"sources":["../../../src/components/ColorSlider/renderColorSlider.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 { ColorSliderBaseState, ColorSliderSlots } from './ColorSlider.types';\n\n/\n Render the final JSX of ColorSlider\n */\nexport const renderColorSlider_unstable = (state: ColorSliderBaseState): JSXElement => {\n assertSlots<ColorSliderSlots>(state);\n\n return (\n <state.root>\n <state.input />\n <state.rail />\n <state.thumb />\n </state.root>\n );\n};\n"],"names":["assertSlots","renderColorSlider_unstable","state","root","input","rail","thumb"],"mappings":";;;;+BAUaC;;;;;;;gCATb,gDAAiD,GAEjD,SAASD,WAAW,QAAQ,4BAA4B;AAOjD,mCAAmC,CAACE;QACzCF,2BAAAA,EAA8BE;IAE9B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;8BACT,eAAA,EAACD,MAAME,KAAK,EAAA,CAAA;8BACZ,eAAA,EAACF,MAAMG,IAAI,EAAA,CAAA;8BACX,eAAA,EAACH,MAAMI,KAAK,EAAA,CAAA;;;AAGlB,EAAE"}

package/lib-commonjs/components/ColorSlider/useColorSlider.cjs CHANGED Viewed

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    useColorSliderBase_unstable: function() {
+    get useColorSliderBase_unstable () {
         return useColorSliderBase_unstable;
     },
-    useColorSlider_unstable: function() {
+    get useColorSlider_unstable () {
         return useColorSlider_unstable;
     }
 });
@@ -22,7 +22,6 @@ const _ColorSliderconstants = require("./ColorSlider.constants.cjs");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const _colorPicker = require("../../contexts/colorPicker.cjs");
 const _constants = require("../../utils/constants.cjs");
-const _getPercent = require("../../utils/getPercent.cjs");
 const _createHsvColor = require("../../utils/createHsvColor.cjs");
 const _adjustChannel = require("../../utils/adjustChannel.cjs");
 const _createHslColor = require("../../utils/createHslColor.cjs");
@@ -40,11 +39,10 @@ const useColorSliderBase_unstable = (props, ref)=>{
         ]
     });
     const { color, channel = 'hue', onChange = onChangeFromContext, vertical, root, input, rail, thumb } = props;
-    const hsvColor = color || colorFromContext;
-    const hslColor = (0, _createHslColor.createHslColor)(hsvColor);
+    const hslColor = (0, _createHslColor.createHslColor)(color || colorFromContext);
     const [currentColor, setCurrentColor] = (0, _reactutilities.useControllableState)({
         defaultState: props.defaultColor,
-        state: hsvColor,
+        state: color || colorFromContext,
         initialState: _constants.INITIAL_COLOR_HSV
     });
     const MAX = channel === 'hue' ? _constants.HUE_MAX : _constants.MAX;
@@ -54,21 +52,21 @@ const useColorSliderBase_unstable = (props, ref)=>{
         value: (0, _adjustChannel.clampValue)(currentColor.v * 100)
     };
     const clampedValue = (0, _adjustChannel.adjustChannel)(channel, valueChannelActions);
-    const valuePercent = (0, _getPercent.getPercent)(clampedValue, _constants.MIN, MAX);
+    const valuePercent = (0, _reactutilities.getPercentInRange)(clampedValue, _constants.MIN, MAX);
     const inputOnChange = input === null || input === void 0 ? void 0 : input.onChange;
     const _onChange = (0, _reactutilities.useEventCallback)((event)=>{
         const newValue = Number(event.target.value);
         const colorActions = {
             hue: ()=>(0, _createHsvColor.createHsvColor)({
-                    ...hsvColor,
+                    ...currentColor,
                     h: newValue
                 }),
             saturation: ()=>(0, _createHsvColor.createHsvColor)({
-                    ...hsvColor,
+                    ...currentColor,
                     s: newValue / 100
                 }),
             value: ()=>(0, _createHsvColor.createHsvColor)({
-                    ...hsvColor,
+                    ...currentColor,
                     v: newValue / 100
                 })
         };
@@ -84,8 +82,27 @@ const useColorSliderBase_unstable = (props, ref)=>{
     const rootVariables = {
         [_ColorSliderconstants.colorSliderCSSVars.sliderDirectionVar]: vertical ? '180deg' : dir === 'ltr' ? '-90deg' : '90deg',
         [_ColorSliderconstants.colorSliderCSSVars.sliderProgressVar]: `${valuePercent}%`,
-        [_ColorSliderconstants.colorSliderCSSVars.thumbColorVar]: channel === 'hue' ? `hsl(${clampedValue}, 100%, 50%)` : (0, _createHslColor.createHslColorString)(hsvColor),
-        [_ColorSliderconstants.colorSliderCSSVars.railColorVar]: channel === 'hue' ? `hsl(${hslColor.h}, ${hslColor.s * 100}%, ${hslColor.l * 100}%)` : `hsl(${hslColor.h}, 100%, 50%)`
+        [_ColorSliderconstants.colorSliderCSSVars.thumbColorVar]: channel === 'hue' ? `hsl(${clampedValue}, 100%, 50%)` : (0, _createHslColor.createHslColorString)(currentColor),
+        [_ColorSliderconstants.colorSliderCSSVars.railColorVar]: channel === 'hue' ? `hsl(${hslColor.h}, ${hslColor.s * 100}%, ${hslColor.l * 100}%)` : (0, _createHslColor.createHslColorString)({
+            ...currentColor,
+            ...channel === 'saturation' ? {
+                s: 1
+            } : {
+                v: 1
+            },
+            a: 1
+        }),
+        ...channel !== 'hue' && {
+            [_ColorSliderconstants.colorSliderCSSVars.railColorLowVar]: (0, _createHslColor.createHslColorString)({
+                ...currentColor,
+                ...channel === 'saturation' ? {
+                    s: 0
+                } : {
+                    v: 0
+                },
+                a: 1
+            })
+        }
     };
     const state = {
         vertical,