npm - @fluentui/react-color-picker - Versions diffs - 9.2.0 → 9.2.1 - Mend

@fluentui/react-color-picker 9.2.0 → 9.2.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 (82) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ColorArea/useColorAreaStyles.styles.ts"],"sourcesContent":["import { 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';\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\nexport const colorAreaCSSVars = {\n areaXProgressVar: `--fui-AreaX--progress`,\n areaYProgressVar: `--fui-AreaY--progress`,\n thumbColorVar: `--fui-Area__thumb--color`,\n mainColorVar: `--fui-Area--main-color`,\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 'use no memo';\n\n const rootStyles = useRootStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const shapeStyles = useShapeStyles();\n\n state.root.className = mergeClasses(\n colorAreaClassNames.root,\n rootStyles,\n shapeStyles[state.shape \|\| 'rounded'],\n state.root.className,\n );\n\n state.thumb.className = mergeClasses(\n colorAreaClassNames.thumb,\n thumbStyles.thumb,\n thumbStyles.focusIndicator,\n state.thumb.className,\n );\n\n state.inputX.className = mergeClasses(colorAreaClassNames.inputX, inputStyles.input, state.inputX.className);\n\n state.inputY.className = mergeClasses(colorAreaClassNames.inputY, inputStyles.input, state.inputY.className);\n return state;\n};\n"],"names":["~~colorAreaCSSVars~~","~~colorAreaClassNames~~","~~useColorAreaStyles_unstable~~","root","thumb","inputX","inputY","areaXProgressVar","areaYProgressVar","thumbColorVar","mainColorVar","thumbSizeVar","useRootStyles","~~makeResetStyles","~~position","border","~~tokens","~~colorNeutralStroke1","background","forcedColorAdjust","display","touchAction","alignItems","justifyItems","minWidth","minHeight","boxSizing","marginBottom","spacingVerticalSNudge","useThumbStyles","~~makeStyles","~~width","height","pointerEvents","outlineStyle","borderRadius","borderRadiusCircular","strokeWidthThin","colorNeutralForeground4","boxShadow","shadow4","backgroundColor","transform","left","bottom","inset","content","strokeWidthThick","colorNeutralBackground1","focusIndicator","~~createFocusOutlineStyle","~~selector","style","outlineWidth","~~shorthands","~~borderWidth","outlineRadius","useInputStyles","input","overflow","top","opacity","padding","margin","useShapeStyles","rounded","borderRadiusMedium","square","borderRadiusNone","state","rootStyles","thumbStyles","inputStyles","shapeStyles","className","~~mergeClasses","~~shape"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;;;;;;;;~~IAaaA~~,gBAAAA~~;eAAAA;;IAPAC~~,mBAAAA;~~eAAAA;;IAuGAC~~,~~2BAAAA~~;~~eAAAA;;;uBA7GyD~~;~~4BAE/C;8BACiB;AAGjC~~,~~MAAMD,sBAAsD~~;~~IACjEE~~,MAAM;IACNC,OAAO;IACPC,QAAQ;IACRC,QAAQ;AACV;~~AAEO~~,~~MAAMN,mBAAmB~~;~~IAC9BO~~,kBAAkB,CAAC,qBAAqB,CAAC;IACzCC,kBAAkB,CAAC,qBAAqB,CAAC;IACzCC,eAAe,CAAC,wBAAwB,CAAC;IACzCC,cAAc,CAAC,sBAAsB,CAAC;AACxC;~~AAEA~~,yBAAyB;AACzB,MAAMC,eAAe,CAAC,yBAAyB,CAAC;AAEhD;;CAEC,GACD,MAAMC,~~gBAAgBC~~,~~IAAAA,~~sBAAAA,EAAgB;~~IACpCC~~,UAAU;IACVC,QAAQ,CAAC,UAAU,~~EAAEC~~,kBAAAA,~~CAAOC~~,mBAAmB,~~CAAC,CAAC~~;IACjDC,YAAY,CAAC,iGAAiG,~~EAAElB~~,~~iBAAiBU~~,YAAY,CAAC,CAAC,CAAC;~~IAChJS~~,mBAAmB;IACnBC,SAAS;IACTC,aAAa;IACbC,YAAY;IACZC,cAAc;IACd,~~CAACZ~~,aAAa,EAAE;~~IAChBa~~,UAAU;IACVC,WAAW;IACXC,WAAW;IACXC,~~cAAcX~~,kBAAAA,~~CAAOY~~,qBAAqB;AAC5C;AAEA;;CAEC,GACD,MAAMC,~~iBAAiBC~~,~~IAAAA,~~iBAAAA,EAAW;~~IAChC1B~~,OAAO;QACLU,UAAU;~~QACViB~~,OAAO,CAAC,IAAI,~~EAAEpB~~,aAAa,CAAC,CAAC;~~QAC7BqB~~,QAAQ,CAAC,IAAI,~~EAAErB~~,aAAa,CAAC,CAAC;~~QAC9BsB~~,eAAe;QACfC,cAAc;~~QACdf~~,mBAAmB;~~QACnBgB~~,~~cAAcnB~~,kBAAAA,~~CAAOoB~~,oBAAoB;~~QACzCrB~~,QAAQ,~~CAAC~~,~~EAAEC,~~kBAAAA,~~CAAOqB~~,eAAe,CAAC,OAAO,~~EAAErB~~,kBAAAA,~~CAAOsB~~,uBAAuB,~~CAAC,CAAC~~;QAC3EC,~~WAAWvB~~,kBAAAA,~~CAAOwB~~,OAAO;QACzBC,iBAAiB,CAAC,IAAI,~~EAAEzC~~,~~iBAAiBS~~,aAAa,CAAC,CAAC,CAAC;~~QACzDiC~~,WAAW;QACXC,MAAM,CAAC,IAAI,~~EAAE3C~~,~~iBAAiBO~~,gBAAgB,CAAC,CAAC,CAAC;~~QACjDqC~~,QAAQ,CAAC,IAAI,~~EAAE5C~~,~~iBAAiBQ~~,gBAAgB,CAAC,CAAC,CAAC;QACnD,YAAY;~~YACVM~~,UAAU;~~YACV+B~~,OAAO;YACPV,~~cAAcnB~~,kBAAAA,~~CAAOoB~~,oBAAoB;~~YACzCV~~,WAAW;~~YACXoB~~,SAAS;~~YACT/B~~,QAAQ,~~CAAC~~,~~EAAEC,~~kBAAAA,~~CAAO+B~~,gBAAgB,CAAC,OAAO,~~EAAE/B~~,kBAAAA,~~CAAOgC~~,uBAAuB,~~CAAC,CAAC~~;QAC9E;IACF;IACAC,~~gBAAgBC~~,~~IAAAA~~,~~qCAAAA,~~EAAwB;~~QACtCC~~,UAAU;QACVC,OAAO;YACLC,~~cAAcrC~~,kBAAAA,~~CAAO+B~~,gBAAgB;YACrC,~~GAAGO~~,iBAAAA,~~CAAWC~~,WAAW,~~CAACvC~~,kBAAAA,~~CAAO+B~~,gBAAgB,CAAC;~~YAClDS~~,~~eAAexC~~,kBAAAA,~~CAAOoB~~,oBAAoB;QAC5C;IACF;AACF;AAEA;;CAEC,GACD,~~MAAMqB~~,~~iBAAiB3B~~,~~IAAAA,~~iBAAAA,EAAW;~~IAChC4B~~,OAAO;QACLC,UAAU;~~QACV7C~~,UAAU;~~QACVmB~~,eAAe;~~QACf2B~~,KAAK;~~QACLjB~~,MAAM;~~QACNkB~~,SAAS;QACTC,SAAS;QACTC,QAAQ;~~QACRhC~~,OAAO;QACPC,QAAQ;IACV;AACF;AAEA,~~MAAMgC~~,~~iBAAiBlC~~,~~IAAAA,~~iBAAAA,EAAW;~~IAChCmC~~,SAAS;~~QACP9B~~,~~cAAcnB~~,kBAAAA,~~CAAOkD~~,kBAAkB;IACzC;IACAC,QAAQ;~~QACNhC~~,~~cAAcnB~~,kBAAAA,~~CAAOoD~~,gBAAgB;IACvC;AACF;AAKO,~~MAAMlE~~,8BAA8B,~~CAACmE~~;IAC1C;IAEA,MAAMC,~~aAAa1D~~;IACnB,~~MAAM2D~~,~~cAAc1C~~;IACpB,~~MAAM2C~~,~~cAAcf~~;IACpB,~~MAAMgB~~,~~cAAcT~~;~~IAEpBK~~,~~MAAMlE~~,IAAI,~~CAACuE~~,SAAS,~~GAAGC~~,~~IAAAA~~,~~mBAAAA~~,~~EACrB1E~~,~~oBAAoBE,~~IAAI,~~EACxBmE~~,YACAG,WAAW,CAACJ,~~MAAMO~~,KAAK,IAAI,UAAU,~~EACrCP~~,~~MAAMlE~~,IAAI,~~CAACuE~~,SAAS;IAGtBL,~~MAAMjE~~,KAAK,~~CAACsE~~,SAAS,~~GAAGC~~,~~IAAAA,~~mBAAAA,~~EACtB1E~~,~~oBAAoBG~~,KAAK,~~EACzBmE~~,~~YAAYnE~~,KAAK,~~EACjBmE~~,~~YAAYtB~~,cAAc,~~EAC1BoB~~,~~MAAMjE~~,KAAK,~~CAACsE~~,SAAS;IAGvBL,~~MAAMhE~~,MAAM,~~CAACqE~~,SAAS,~~GAAGC~~,~~IAAAA,~~mBAAAA,~~EAAa1E~~,~~oBAAoBI~~,MAAM,~~EAAEmE~~,~~YAAYd~~,KAAK,~~EAAEW~~,~~MAAMhE~~,MAAM,~~CAACqE~~,SAAS;IAE3GL,~~MAAM/D~~,MAAM,~~CAACoE~~,SAAS,~~GAAGC~~,~~IAAAA,~~mBAAAA,~~EAAa1E~~,~~oBAAoBK~~,MAAM,~~EAAEkE~~,~~YAAYd~~,KAAK,~~EAAEW~~,~~MAAM/D~~,MAAM,~~CAACoE~~,SAAS;IAC3G,OAAOL;AACT"}
1	+ {"version":3,"sources":["../src/components/ColorArea/useColorAreaStyles.styles.ts"],"sourcesContent":["import { 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';\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\nexport const colorAreaCSSVars = {\n areaXProgressVar: `--fui-AreaX--progress`,\n areaYProgressVar: `--fui-AreaY--progress`,\n thumbColorVar: `--fui-Area__thumb--color`,\n mainColorVar: `--fui-Area--main-color`,\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 'use no memo';\n\n const rootStyles = useRootStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const shapeStyles = useShapeStyles();\n\n state.root.className = mergeClasses(\n colorAreaClassNames.root,\n rootStyles,\n shapeStyles[state.shape \|\| 'rounded'],\n state.root.className,\n );\n\n state.thumb.className = mergeClasses(\n colorAreaClassNames.thumb,\n thumbStyles.thumb,\n thumbStyles.focusIndicator,\n state.thumb.className,\n );\n\n state.inputX.className = mergeClasses(colorAreaClassNames.inputX, inputStyles.input, state.inputX.className);\n\n state.inputY.className = mergeClasses(colorAreaClassNames.inputY, inputStyles.input, state.inputY.className);\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","createFocusOutlineStyle","colorAreaClassNames","root","thumb","inputX","inputY","colorAreaCSSVars","areaXProgressVar","areaYProgressVar","thumbColorVar","mainColorVar","thumbSizeVar","useRootStyles","position","border","colorNeutralStroke1","background","forcedColorAdjust","display","touchAction","alignItems","justifyItems","minWidth","minHeight","boxSizing","marginBottom","spacingVerticalSNudge","useThumbStyles","width","height","pointerEvents","outlineStyle","borderRadius","borderRadiusCircular","strokeWidthThin","colorNeutralForeground4","boxShadow","shadow4","backgroundColor","transform","left","bottom","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":";;;;;;;;;;;IAaaW,gBAAAA;;;IAPAL,mBAAAA;;;+BAuGA+D;;;;uBA7GyD,iBAAiB;4BAEhE,wBAAwB;8BACP,0BAA0B;AAG3D,4BAA4D;IACjE9D,MAAM;IACNC,OAAO;IACPC,QAAQ;IACRC,QAAQ;AACV,EAAE;AAEK,yBAAyB;IAC9BE,kBAAkB,CAAC,qBAAqB,CAAC;IACzCC,kBAAkB,CAAC,qBAAqB,CAAC;IACzCC,eAAe,CAAC,wBAAwB,CAAC;IACzCC,cAAc,CAAC,sBAAsB,CAAC;AACxC,EAAE;AAEF,yBAAyB;AACzB,MAAMC,eAAe,CAAC,yBAAyB,CAAC;AAEhD;;CAEC,GACD,MAAMC,oBAAgBjB,sBAAAA,EAAgB;IACpCkB,UAAU;IACVC,QAAQ,CAAC,UAAU,EAAEf,kBAAAA,CAAOgB,mBAAmB,EAAE;IACjDC,YAAY,CAAC,iGAAiG,EAAEV,iBAAiBI,YAAY,CAAC,CAAC,CAAC;IAChJO,mBAAmB;IACnBC,SAAS;IACTC,aAAa;IACbC,YAAY;IACZC,cAAc;IACd,CAACV,aAAa,EAAE;IAChBW,UAAU;IACVC,WAAW;IACXC,WAAW;IACXC,cAAc1B,kBAAAA,CAAO2B,qBAAqB;AAC5C;AAEA;;CAEC,GACD,MAAMC,qBAAiB/B,iBAAAA,EAAW;IAChCO,OAAO;QACLU,UAAU;QACVe,OAAO,CAAC,IAAI,EAAEjB,aAAa,CAAC,CAAC;QAC7BkB,QAAQ,CAAC,IAAI,EAAElB,aAAa,CAAC,CAAC;QAC9BmB,eAAe;QACfC,cAAc;QACdd,mBAAmB;QACnBe,cAAcjC,kBAAAA,CAAOkC,oBAAoB;QACzCnB,QAAQ,GAAGf,kBAAAA,CAAOmC,eAAe,CAAC,OAAO,EAAEnC,kBAAAA,CAAOoC,uBAAuB,EAAE;QAC3EC,WAAWrC,kBAAAA,CAAOsC,OAAO;QACzBC,iBAAiB,CAAC,IAAI,EAAEhC,iBAAiBG,aAAa,CAAC,CAAC,CAAC;QACzD8B,WAAW;QACXC,MAAM,CAAC,IAAI,EAAElC,iBAAiBC,gBAAgB,CAAC,CAAC,CAAC;QACjDkC,QAAQ,CAAC,IAAI,EAAEnC,iBAAiBE,gBAAgB,CAAC,CAAC,CAAC;QACnD,YAAY;YACVK,UAAU;YACV6B,OAAO;YACPV,cAAcjC,kBAAAA,CAAOkC,oBAAoB;YACzCT,WAAW;YACXmB,SAAS;YACT7B,QAAQ,GAAGf,kBAAAA,CAAO6C,gBAAgB,CAAC,OAAO,EAAE7C,kBAAAA,CAAO8C,uBAAuB,EAAE;QAC9E;IACF;IACAC,gBAAgB9C,yCAAAA,EAAwB;QACtC+C,UAAU;QACVC,OAAO;YACLC,cAAclD,kBAAAA,CAAO6C,gBAAgB;YACrC,GAAG9C,iBAAAA,CAAWoD,WAAW,CAACnD,kBAAAA,CAAO6C,gBAAgB,CAAC;YAClDO,eAAepD,kBAAAA,CAAOkC,oBAAoB;QAC5C;IACF;AACF;AAEA;;CAEC,GACD,MAAMmB,qBAAiBxD,iBAAAA,EAAW;IAChCyD,OAAO;QACLC,UAAU;QACVzC,UAAU;QACViB,eAAe;QACfyB,KAAK;QACLf,MAAM;QACNgB,SAAS;QACTC,SAAS;QACTC,QAAQ;QACR9B,OAAO;QACPC,QAAQ;IACV;AACF;AAEA,MAAM8B,qBAAiB/D,iBAAAA,EAAW;IAChCgE,SAAS;QACP5B,cAAcjC,kBAAAA,CAAO8D,kBAAkB;IACzC;IACAC,QAAQ;QACN9B,cAAcjC,kBAAAA,CAAOgE,gBAAgB;IACvC;AACF;AAKO,MAAMC,8BAA8B,CAACC;IAC1C;IAEA,MAAMC,aAAatD;IACnB,MAAMuD,cAAcxC;IACpB,MAAMyC,cAAchB;IACpB,MAAMiB,cAAcV;IAEpBM,MAAM/D,IAAI,CAACoE,SAAS,GAAGzE,uBAAAA,EACrBI,oBAAoBC,IAAI,EACxBgE,YACAG,WAAW,CAACJ,MAAMM,KAAK,IAAI,UAAU,EACrCN,MAAM/D,IAAI,CAACoE,SAAS;IAGtBL,MAAM9D,KAAK,CAACmE,SAAS,OAAGzE,mBAAAA,EACtBI,oBAAoBE,KAAK,EACzBgE,YAAYhE,KAAK,EACjBgE,YAAYrB,cAAc,EAC1BmB,MAAM9D,KAAK,CAACmE,SAAS;IAGvBL,MAAM7D,MAAM,CAACkE,SAAS,OAAGzE,mBAAAA,EAAaI,oBAAoBG,MAAM,EAAEgE,YAAYf,KAAK,EAAEY,MAAM7D,MAAM,CAACkE,SAAS;IAE3GL,MAAM5D,MAAM,CAACiE,SAAS,OAAGzE,mBAAAA,EAAaI,oBAAoBI,MAAM,EAAE+D,YAAYf,KAAK,EAAEY,MAAM5D,MAAM,CAACiE,SAAS;IAC3G,OAAOL;AACT,EAAE"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import * 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 '../../contexts/colorPicker';\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":["~~ColorPicker~~","~~React~~","~~forwardRef~~","~~props~~","~~ref~~","~~state~~","~~useColorPicker_unstable~~","~~contextValues~~","~~useColorPickerContextValues~~","~~useColorPickerStyles_unstable~~","~~useCustomStyleHook_unstable~~","~~renderColorPicker_unstable~~","displayName"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+~~BAYaA;;;eAAAA;;;;~~iEAZU;~~gCAEiB~~;~~mCACG~~;~~4CACG~~;~~6BAEF~~;~~qCACA~~;~~AAKrC~~,~~MAAMA~~,~~cAAAA,~~WAAAA,~~GAAqDC~~,~~OAAMC~~,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,~~QAAQC~~,~~IAAAA,~~uCAAAA,~~EAAwBH~~,OAAOC;IAC7C,~~MAAMG~~,~~gBAAgBC~~,~~IAAAA,~~wCAAAA,~~EAA4BH~~;~~IAElDI~~,~~IAAAA,~~yDAAAA,~~EAA8BJ~~;~~IAC9BK~~,~~IAAAA,~~gDAAAA,EAA4B,~~iCAAiCL~~;IAE7D,~~OAAOM~~,~~IAAAA,~~6CAAAA,~~EAA2BN~~,~~OAAOE~~;AAC3C;~~AAEAP~~,~~YAAYY~~,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import * 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 '../../contexts/colorPicker';\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":";;;;+BAYaM;;;;;;;iEAZU,QAAQ;gCAES,mBAAmB;mCAChB,sBAAsB;4CACnB,gCAAgC;6BAElC,6BAA6B;qCAC7B,kCAAkC;AAKvE,oBAAMA,WAAAA,GAAqDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQT,uCAAAA,EAAwBO,OAAOC;IAC7C,MAAME,oBAAgBP,wCAAAA,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.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ColorPicker/ColorPicker.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot, EventHandler, EventData } from '@fluentui/react-utilities';\nimport { 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/\n State used in rendering ColorPicker\n */\nexport type ColorPickerState = ComponentState<ColorPickerSlots> & ColorPickerContextValue;\n"],"names":[],"~~rangeMappings~~"~~:";;;;;"~~,"mappings":";;;;;iEAAuB"}
1	+ {"version":3,"sources":["../src/components/ColorPicker/ColorPicker.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot, EventHandler, EventData } from '@fluentui/react-utilities';\nimport { 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/\n State used in rendering ColorPicker\n */\nexport type ColorPickerState = ComponentState<ColorPickerSlots> & ColorPickerContextValue;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ColorPicker/index.ts"],"sourcesContent":["export { ColorPicker } from './ColorPicker';\nexport type {\n ColorPickerOnChangeData,\n ColorPickerProps,\n ColorPickerSlots,\n ColorPickerState,\n} from './ColorPicker.types';\nexport { renderColorPicker_unstable } from './renderColorPicker';\nexport { useColorPicker_unstable } from './useColorPicker';\nexport { colorPickerClassNames, useColorPickerStyles_unstable } from './useColorPickerStyles.styles';\n"],"names":["ColorPicker","~~colorPickerClassNames~~","~~renderColorPicker_unstable~~","~~useColorPickerStyles_unstable~~","~~useColorPicker_unstable~~"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":"~~;;;;;;;;;;;IAASA~~,~~WAAW;eAAXA,~~wBAAW~~;;IASXC~~,~~qBAAqB;eAArBA,~~iDAAqB~~;;IAFrBC~~,~~0BAA0B;eAA1BA,~~6CAA0B~~;;IAEHC~~,~~6BAA6B;eAA7BA,~~yDAA6B~~;;IADpDC~~,~~uBAAuB;eAAvBA,~~uCAAuB;;;6BARJ;~~mCAOe~~;~~gCACH~~;~~4CAC6B~~"}
1	+ {"version":3,"sources":["../src/components/ColorPicker/index.ts"],"sourcesContent":["export { ColorPicker } from './ColorPicker';\nexport type {\n ColorPickerOnChangeData,\n ColorPickerProps,\n ColorPickerSlots,\n ColorPickerState,\n} from './ColorPicker.types';\nexport { renderColorPicker_unstable } from './renderColorPicker';\nexport { useColorPicker_unstable } from './useColorPicker';\nexport { colorPickerClassNames, useColorPickerStyles_unstable } from './useColorPickerStyles.styles';\n"],"names":["ColorPicker","renderColorPicker_unstable","useColorPicker_unstable","colorPickerClassNames","useColorPickerStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eASXG,iDAAqB;;;eAFrBF,6CAA0B;;;eAEHG,yDAA6B;;;eADpDF,uCAAuB;;;6BARJ,gBAAgB;mCAOD,sBAAsB;gCACzB,mBAAmB;4CACU,gCAAgC"}

package/lib-commonjs/components/ColorPicker/renderColorPicker.js.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 { ColorPickerState, 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 = (state: ColorPickerState, contextValues: ColorPickerContextValues) => {\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":["~~renderColorPicker_unstable~~","~~state~~","~~contextValues~~","~~assertSlots~~","~~_jsx~~","~~ColorPickerProvider","~~value","colorPicker","root","children"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+~~BAWaA;;;eAAAA;;;~~4BAVb;~~gCAE4B~~;~~6BAGQ~~;~~AAK7B~~,~~MAAMA~~,~~6BAA6B,~~CAACC,OAAyBC;~~IAClEC~~,~~IAAAA,~~2BAAAA,~~EAA8BF~~;IAE9B,OAAA,WAAA,~~GACEG~~,~~IAAAA,~~eAAA,~~EAACC~~,gCAAAA,EAAAA;~~QAAoBC~~,~~OAAOJ~~,~~cAAcK~~,WAAW;kBACnD,WAAA,~~GAAAH~~,~~IAAAA,~~eAAA,EAACH,~~MAAMO~~,IAAI,EAAA;~~sBAAEP~~,~~MAAMO~~,IAAI,CAACC,QAAQ;;;AAGtC"}
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 { ColorPickerState, 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 = (state: ColorPickerState, contextValues: ColorPickerContextValues) => {\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":";;;;+BAWaE;;;;;;4BAVb,gDAAiD;gCAErB,4BAA4B;6BAGpB,6BAA6B;AAK1D,mCAAmC,CAACC,OAAyBC;QAClEJ,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.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ColorPicker/useColorPicker.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback } from '@fluentui/react-utilities';\nimport type { ColorPickerProps, ColorPickerState } 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 useColorPicker_unstable = (props: ColorPickerProps, ref: React.Ref<HTMLDivElement>): ColorPickerState => {\n const { color, onColorChange, shape, ...rest } = props;\n\n const requestChange: ColorPickerState['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 shape,\n };\n};\n"],"names":["useColorPicker_unstable","props","ref","color","onColorChange","shape","rest","requestChange","~~useEventCallback","~~event","data","type","components","root","~~slot","~~always","~~getIntrinsicElementProps","~~elementType"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+~~BAYaA;;;eAAAA;;;;~~iEAZU;~~gCAC0C~~;~~AAW1D~~,~~MAAMA~~,~~0BAA0B,~~CAACC,OAAyBC;IAC/D,MAAM,EAAEC,KAAK,EAAEC,aAAa,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGL;IAEjD,MAAMM,~~gBAAmDC~~,~~IAAAA,~~gCAAAA,EAAiB,~~CAACC~~,OAAOC;~~QAChFN~~,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,~~cAAgBK~~,OAAO;YACrBE,MAAM;YACNF;~~YACAN~~,~~OAAOO~~,~~KAAKP~~,KAAK;QACnB;IACF;IAEA,OAAO;~~QACLS~~,YAAY;YACVC,MAAM;QACR;QACAA,~~MAAMC~~,oBAAAA,~~CAAKC~~,MAAM,~~CACfC~~,~~IAAAA,~~wCAAAA,EAAyB,OAAO;~~YAC9Bd~~;YACA,GAAGI,IAAI;QACT,IACA;~~YAAEW~~,aAAa;QAAM;~~QAEvBd~~;QACAI;QACAF;IACF;AACF"}
1	+ {"version":3,"sources":["../src/components/ColorPicker/useColorPicker.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback } from '@fluentui/react-utilities';\nimport type { ColorPickerProps, ColorPickerState } 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 useColorPicker_unstable = (props: ColorPickerProps, ref: React.Ref<HTMLDivElement>): ColorPickerState => {\n const { color, onColorChange, shape, ...rest } = props;\n\n const requestChange: ColorPickerState['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 shape,\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useEventCallback","useColorPicker_unstable","props","ref","color","onColorChange","shape","rest","requestChange","event","data","type","components","root","always","elementType"],"mappings":";;;;+BAYaI;;;;;;;iEAZU,QAAQ;gCACkC,4BAA4B;AAWtF,gCAAgC,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,KAAK,EAAEC,aAAa,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGL;IAEjD,MAAMM,oBAAmDR,gCAAAA,EAAiB,CAACS,OAAOC;QAChFL,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAgBI,OAAO;YACrBE,MAAM;YACNF;YACAL,OAAOM,KAAKN,KAAK;QACnB;IACF;IAEA,OAAO;QACLQ,YAAY;YACVC,MAAM;QACR;QACAA,MAAMd,oBAAAA,CAAKe,MAAM,KACfhB,wCAAAA,EAAyB,OAAO;YAC9BK;YACA,GAAGI,IAAI;QACT,IACA;YAAEQ,aAAa;QAAM;QAEvBX;QACAI;QACAF;IACF;AACF,EAAE"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useColorPickerStyles.styles.js"],"sourcesContent":["import { 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 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(colorPickerClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["~~colorPickerClassNames~~","~~useColorPickerStyles_unstable~~","~~root~~","~~useStyles~~","~~__styles~~","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","rmohyg","d","p","state","styles","className"~~,"mergeClasses"~~],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;;;;;;;;~~IAEaA~~,qBAAqB~~;eAArBA;;IAcIC~~,6BAA6B;~~eAA7BA;;;uBAhBwB~~;~~AAElC~~,~~MAAMD~~,~~wBAAwB~~;~~IACjCE~~,~~MAAM~~;~~AACV;AACA~~;;CAEA,GAAI,MAAMC,~~YAAS~~,WAAA,~~GAAGC~~,~~IAAAA,~~eAAA,EAAA;~~IAAAF~~,~~MAAA~~;~~QAAAG~~,~~QAAA~~;QAAAC,~~SAAA~~;QAAAC,~~QAAA~~;QAAAC,~~SAAA~~;QAAAC,~~QAAA~~;IAAA;AAAA,GAAA;IAAAC,~~GAAA~~;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,~~GAAA~~,CAAA;YAAA;SAAA;KAAA;AAAA;~~AASX~~,~~MAAMV~~,~~gCAAiCW~~,~~CAAAA~~;~~IAC9C~~;~~IACA~~,MAAMC,~~SAASV~~;~~IACfS~~,~~MAAMV~~,IAAI,CAACY,SAAS,~~GAAGC~~,~~IAAAA,~~mBAAY,~~EAACf~~,~~sBAAsBE~~,IAAI,EAAEW,~~OAAOX~~,IAAI,EAAEU,~~MAAMV~~,IAAI,CAACY,SAAS;~~IACjG~~,OAAOF;~~AACX~~"}
1	+ {"version":3,"sources":["useColorPickerStyles.styles.js"],"sourcesContent":["import { 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 'use no memo';\n const styles = useStyles();\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":";;;;;;;;;;;IAEaG,qBAAqB;;;IAcjBU,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,aAAa;IACb,MAAMC,MAAM,GAAGV,SAAS,CAAC,CAAC;IAC1BS,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.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ColorPicker/useColorPickerStyles.styles.ts"],"sourcesContent":["import { 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 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(colorPickerClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["~~colorPickerClassNames~~","~~useColorPickerStyles_unstable~~","~~root~~","~~useStyles~~","~~makeStyles~~","display","flexDirection","gap","~~tokens~~","~~spacingVerticalXS~~","state","styles","className"~~,"mergeClasses"~~],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;;;;;;;;~~IAKaA~~,qBAAAA~~;eAAAA;;IAkBAC~~,6BAAAA~~;eAAAA;;;~~uBAvB4B;~~4BAGlB~~;~~AAEhB~~,~~MAAMD,wBAA0D~~;~~IACrEE~~,MAAM;AACR;~~AAEA~~;;CAEC,GACD,MAAMC,~~YAAYC~~,~~IAAAA,~~iBAAAA,EAAW;~~IAC3BF~~,MAAM;~~QACJG~~,SAAS;QACTC,eAAe;QACfC,~~KAAKC~~,kBAAAA,~~CAAOC~~,iBAAiB;IAC/B;AACF;AAKO,~~MAAMR~~,~~gCAAgC,CAACS~~;IAC5C;IAEA,MAAMC,~~SAASR~~;~~IACfO~~,~~MAAMR~~,IAAI,~~CAACU~~,SAAS,~~GAAGC~~,~~IAAAA,~~mBAAAA,~~EAAab~~,~~sBAAsBE~~,IAAI,~~EAAES~~,~~OAAOT~~,IAAI,~~EAAEQ~~,~~MAAMR~~,IAAI,~~CAACU~~,SAAS;IAEjG,OAAOF;AACT"}
1	+ {"version":3,"sources":["../src/components/ColorPicker/useColorPickerStyles.styles.ts"],"sourcesContent":["import { 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 'use no memo';\n\n const styles = useStyles();\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":";;;;;;;;;;;IAKaG,qBAAAA;;;IAkBAO,6BAAAA;;;;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;IAEA,MAAMC,SAASP;IACfM,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.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ColorSlider/ColorSlider.tsx"],"sourcesContent":["import * 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":["~~ColorSlider~~","~~React~~","~~forwardRef~~","~~props~~","~~ref~~","~~state~~","~~useColorSlider_unstable~~","~~useColorSliderStyles_unstable~~","~~useCustomStyleHook_unstable~~","~~renderColorSlider_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/ColorSlider/ColorSlider.tsx"],"sourcesContent":["import * 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":";;;;+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/ColorSlider/ColorSlider.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ColorSlider/ColorSlider.types.ts"],"sourcesContent":["import * 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\n/\n State used in rendering ColorSlider\n */\nexport type ColorSliderState = ComponentState<ColorSliderSlots> &\n Pick<ColorSliderProps, 'vertical' \| 'shape' \| 'channel'>;\n"],"names":[],"~~rangeMappings~~"~~:";;;;;"~~,"mappings":";;;;;iEAAuB"}
1	+ {"version":3,"sources":["../src/components/ColorSlider/ColorSlider.types.ts"],"sourcesContent":["import * 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\n/\n State used in rendering ColorSlider\n */\nexport type ColorSliderState = ComponentState<ColorSliderSlots> &\n Pick<ColorSliderProps, 'vertical' \| 'shape' \| 'channel'>;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ColorSlider/index.ts"],"sourcesContent":["export { ColorSlider } from './ColorSlider';\nexport type { ColorSliderProps, ColorSliderSlots, ColorSliderState, SliderOnChangeData } from './ColorSlider.types';\nexport { renderColorSlider_unstable } from './renderColorSlider';\nexport { useColorSlider_unstable } from './useColorSlider';\nexport {\n colorSliderCSSVars,\n colorSliderClassNames,\n useColorSliderStyles_unstable,\n} from './useColorSliderStyles.styles';\n"],"names":["ColorSlider","~~colorSliderCSSVars~~","~~colorSliderClassNames~~","~~renderColorSlider_unstable~~","~~useColorSliderStyles_unstable~~","~~useColorSlider_unstable~~"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":"~~;;;;;;;;;;;IAASA~~,~~WAAW;eAAXA,~~wBAAW~~;;IAKlBC~~,~~kBAAkB;eAAlBA,~~8CAAkB~~;;IAClBC~~,~~qBAAqB;eAArBA,~~iDAAqB~~;;IAJdC~~,~~0BAA0B;eAA1BA,~~6CAA0B~~;;IAKjCC~~,~~6BAA6B;eAA7BA,~~yDAA6B~~;;IAJtBC~~,~~uBAAuB;eAAvBA,~~uCAAuB;;;6BAHJ;~~mCAEe~~;~~gCACH~~;~~4CAKjC~~"}
1	+ {"version":3,"sources":["../src/components/ColorSlider/index.ts"],"sourcesContent":["export { ColorSlider } from './ColorSlider';\nexport type { ColorSliderProps, ColorSliderSlots, ColorSliderState, SliderOnChangeData } from './ColorSlider.types';\nexport { renderColorSlider_unstable } from './renderColorSlider';\nexport { useColorSlider_unstable } from './useColorSlider';\nexport {\n colorSliderCSSVars,\n colorSliderClassNames,\n useColorSliderStyles_unstable,\n} from './useColorSliderStyles.styles';\n"],"names":["ColorSlider","renderColorSlider_unstable","useColorSlider_unstable","colorSliderCSSVars","colorSliderClassNames","useColorSliderStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eAKlBG,8CAAkB;;;eAClBC,iDAAqB;;;eAJdH,6CAA0B;;;eAKjCI,yDAA6B;;;eAJtBH,uCAAuB;;;6BAHJ,gBAAgB;mCAED,sBAAsB;gCACzB,mBAAmB;4CAKpD,gCAAgC"}

package/lib-commonjs/components/ColorSlider/renderColorSlider.js.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 { ColorSliderState, ColorSliderSlots } from './ColorSlider.types';\n\n/\n Render the final JSX of ColorSlider\n */\nexport const renderColorSlider_unstable = (state: ColorSliderState) => {\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":["~~renderColorSlider_unstable~~","~~state~~","~~assertSlots~~","~~_jsxs","~~root","~~_jsx","~~input","rail","thumb"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+~~BASaA;;;eAAAA;;;~~4BARb;~~gCAE4B~~;~~AAMrB~~,~~MAAMA~~,~~6BAA6B,~~CAACC;~~IACzCC~~,~~IAAAA,~~2BAAAA,~~EAA8BD~~;IAE9B,OAAA,WAAA,~~GACEE~~,~~IAAAA,~~gBAAA,~~EAACF~~,~~MAAMG~~,IAAI,EAAA;;~~0BACTC~~,~~IAAAA,~~eAAA,~~EAACJ~~,~~MAAMK~~,KAAK,EAAA,CAAA;~~0BACZD~~,~~IAAAA,~~eAAA,~~EAACJ~~,~~MAAMM~~,IAAI,EAAA,CAAA;~~0BACXF~~,~~IAAAA,~~eAAA,~~EAACJ~~,~~MAAMO~~,KAAK,EAAA,CAAA;;;AAGlB"}
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 { ColorSliderState, ColorSliderSlots } from './ColorSlider.types';\n\n/\n Render the final JSX of ColorSlider\n */\nexport const renderColorSlider_unstable = (state: ColorSliderState) => {\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":";;;;+BASaC;;;;;;4BARb,iCAAiD;gCAErB,4BAA4B;AAMjD,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"}

package/lib-commonjs/components/ColorSlider/useColorSlider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ColorSlider/useColorSlider.ts"],"sourcesContent":["import * as React from 'react';\nimport { tinycolor } from '@ctrl/tinycolor';\nimport {\n getPartitionedNativeProps,\n useId,\n slot,\n useControllableState,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport { colorSliderCSSVars } from './useColorSliderStyles.styles';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { ColorSliderProps, ColorSliderState } from './ColorSlider.types';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\nimport { MIN, HUE_MAX, MAX as COLOR_MAX } from '../../utils/constants';\nimport { getPercent } from '../../utils/getPercent';\nimport { createHsvColor } from '../../utils/createHsvColor';\nimport { clampValue, type ChannelActions, adjustChannel } from '../../utils/adjustChannel';\nimport { HsvColor } from '../../types/color';\nimport { INITIAL_COLOR_HSV } from '../../utils/constants';\n\n/*\n Create the state required to render ColorSlider.\n \n The returned state can be modified with hooks such as useColorSliderStyles_unstable,\n * before being passed to renderColorSlider_unstable.\n \n @param props - props from this instance of ColorSlider\n * @param ref - reference to root HTMLInputElement of ColorSlider\n /\nexport const useColorSlider_unstable = (\n props: ColorSliderProps,\n ref: React.Ref<HTMLInputElement>,\n): ColorSliderState => {\n 'use no memo';\n\n const { dir } = useFluent();\n const onChangeFromContext = useColorPickerContextValue_unstable(ctx => ctx.requestChange);\n const colorFromContext = useColorPickerContextValue_unstable(ctx => ctx.color);\n const shapeFromContext = useColorPickerContextValue_unstable(ctx => ctx.shape);\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['onChange', 'color'],\n });\n\n const {\n color,\n channel = 'hue',\n onChange = onChangeFromContext,\n shape = shapeFromContext,\n vertical,\n // Slots\n root,\n input,\n rail,\n thumb,\n } = props;\n\n const hsvColor = color \|\| colorFromContext;\n const hslColor = tinycolor(hsvColor).toHsl();\n\n const [currentColor, setCurrentColor] = useControllableState<HsvColor>({\n defaultState: props.defaultColor,\n state: hsvColor,\n initialState: INITIAL_COLOR_HSV,\n });\n\n const MAX = channel === 'hue' ? HUE_MAX : COLOR_MAX;\n\n const valueChannelActions: ChannelActions<number> = {\n hue: clampValue(currentColor.h),\n saturation: clampValue(currentColor.s 100),\n value: clampValue(currentColor.v * 100),\n };\n\n const clampedValue = adjustChannel(channel, valueChannelActions);\n const valuePercent = getPercent(clampedValue, MIN, MAX);\n\n const inputOnChange = input?.onChange;\n\n const _onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(event => {\n const newValue = Number(event.target.value);\n const colorActions: ChannelActions<() => HsvColor> = {\n hue: () => createHsvColor({ ...hsvColor, h: newValue }),\n saturation: () => createHsvColor({ ...hsvColor, s: newValue / 100 }),\n value: () => createHsvColor({ ...hsvColor, v: newValue / 100 }),\n };\n const newColor = adjustChannel(channel, colorActions)();\n\n setCurrentColor(newColor);\n\n inputOnChange?.(event);\n onChange?.(event, {\n type: 'change',\n event,\n color: newColor,\n });\n });\n\n const rootVariables = {\n [colorSliderCSSVars.sliderDirectionVar]: vertical ? '180deg' : dir === 'ltr' ? '-90deg' : '90deg',\n [colorSliderCSSVars.sliderProgressVar]: `${valuePercent}%`,\n [colorSliderCSSVars.thumbColorVar]:\n channel === 'hue' ? `hsl(${clampedValue}, 100%, 50%)` : tinycolor(hsvColor).toRgbString(),\n [colorSliderCSSVars.railColorVar]:\n channel === 'hue'\n ? `hsl(${hslColor.h} ${hslColor.s * 100}%, ${hslColor.l * 100}%)`\n : `hsl(${hslColor.h} 100%, 50%)`,\n };\n\n const state: ColorSliderState = {\n shape,\n vertical,\n channel,\n components: {\n input: 'input',\n rail: 'div',\n root: 'div',\n thumb: 'div',\n },\n root: slot.always(root, {\n defaultProps: {\n role: 'group',\n ...nativeProps.root,\n },\n elementType: 'div',\n }),\n input: slot.always(input, {\n defaultProps: {\n id: useId('slider-', props.id),\n ref,\n min: MIN,\n max: MAX,\n tabIndex: 0,\n ['aria-orientation']: vertical ? 'vertical' : 'horizontal',\n ...nativeProps.primary,\n type: 'range',\n },\n elementType: 'input',\n }),\n rail: slot.always(rail, { elementType: 'div' }),\n thumb: slot.always(thumb, { elementType: 'div' }),\n };\n\n // Root props\n state.root.style = {\n ...rootVariables,\n ...state.root.style,\n };\n\n // Input Props\n state.input.value = clampedValue;\n state.input.onChange = _onChange;\n return state;\n};\n"],"names":["~~useColorSlider_unstable~~","~~props~~","~~ref~~","~~dir~~","~~useFluent~~","~~onChangeFromContext~~","useColorPickerContextValue_unstable","ctx","requestChange","colorFromContext","color","shapeFromContext","shape","nativeProps","~~getPartitionedNativeProps","~~primarySlotTagName","excludedPropNames","channel","onChange","vertical","root","input","rail","thumb","hsvColor","hslColor","~~tinycolor","~~toHsl","currentColor","setCurrentColor","~~useControllableState","~~defaultState","defaultColor","state","initialState","~~INITIAL_COLOR_HSV","MAX","HUE_MAX","COLOR_MAX","~~valueChannelActions","hue","~~clampValue","~~h","saturation","s","value","v","clampedValue","~~adjustChannel","~~valuePercent","~~getPercent","MIN","~~inputOnChange","_onChange","~~useEventCallback","~~event","newValue","Number","target","colorActions","~~createHsvColor","~~newColor","type","rootVariables","~~colorSliderCSSVars","~~sliderDirectionVar","sliderProgressVar","thumbColorVar","toRgbString","railColorVar","l","components","~~slot","~~always","defaultProps","role","elementType","id","~~useId","~~min","max","tabIndex","primary","style"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;+~~BA6BaA;;;eAAAA;;;;~~iEA7BU;~~2BACG~~;~~gCAOnB~~;~~4CAC4B~~;~~qCACa~~;~~6BAEI~~;~~2BACL~~;~~4BACpB~~;~~gCACI~~;+~~BACgC~~;~~AAaxD~~,~~MAAMA~~,~~0BAA0B,~~CACrCC,OACAC;IAEA;IAEA,MAAM,EAAEC,GAAG,EAAE,~~GAAGC~~,~~IAAAA,uCAAAA~~;IAChB,~~MAAMC~~,~~sBAAsBC~~,~~IAAAA,~~gDAAAA,~~EAAoCC~~,CAAAA,MAAOA,IAAIC,aAAa;IACxF,MAAMC,~~mBAAmBH~~,~~IAAAA,~~gDAAAA,~~EAAoCC~~,CAAAA,MAAOA,IAAIG,KAAK;IAC7E,MAAMC,~~mBAAmBL~~,~~IAAAA,~~gDAAAA,~~EAAoCC~~,CAAAA,MAAOA,IAAIK,KAAK;IAC7E,MAAMC,~~cAAcC~~,~~IAAAA,~~yCAAAA,EAA0B;~~QAC5Cb~~;~~QACAc~~,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;SAAQ;IAC1C;IAEA,MAAM,~~EACJN~~,KAAK,~~EACLO~~,UAAU,KAAK,EACfC,~~WAAWb~~,mBAAmB,~~EAC9BO~~,QAAQD,gBAAgB,~~EACxBQ~~,QAAQ,EAERC,~~IAAI~~,EACJC,~~KAAK~~,EACLC,IAAI,EACJC,KAAK,EACN,~~GAAGtB~~;IAEJ,~~MAAMuB~~,~~WAAWd~~,SAASD;IAC1B,~~MAAMgB~~,~~WAAWC~~,~~IAAAA,~~oBAAAA,~~EAAUF~~,~~UAAUG~~,KAAK;IAE1C,MAAM,CAACC,cAAcC,gBAAgB,~~GAAGC~~,~~IAAAA,~~oCAAAA,EAA+B;~~QACrEC~~,~~cAAc9B~~,~~MAAM+B~~,YAAY;QAChCC,~~OAAOT~~;~~QACPU~~,~~cAAcC~~,4BAAAA;IAChB;IAEA,~~MAAMC~~,~~MAAMnB~~,YAAY,~~QAAQoB~~,kBAAAA,~~GAAUC~~,cAAAA;IAE1C,~~MAAMC~~,sBAA8C;QAClDC,~~KAAKC~~,~~IAAAA,~~yBAAAA,~~EAAWb~~,~~aAAac~~,CAAC;QAC9BC,~~YAAYF~~,~~IAAAA,~~yBAAAA,~~EAAWb~~,~~aAAagB~~,CAAC,GAAG;QACxCC,~~OAAOJ~~,~~IAAAA~~,~~yBAAAA~~,~~EAAWb~~,~~aAAakB,~~CAAC,GAAG;IACrC;IAEA,MAAMC,~~eAAeC~~,~~IAAAA,~~4BAAAA,~~EAAc/B~~,~~SAASsB~~;IAC5C,~~MAAMU~~,~~eAAeC~~,~~IAAAA,~~sBAAAA,~~EAAWH~~,~~cAAcI~~,cAAAA,~~EAAKf~~;IAEnD,~~MAAMgB~~,~~gBAAgB/B~~,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOH,QAAQ;IAErC,~~MAAMmC~~,~~YAAwDC~~,~~IAAAA,~~gCAAAA,~~EAAiBC~~,CAAAA;QAC7E,MAAMC,WAAWC,OAAOF,MAAMG,MAAM,~~CAACb~~,KAAK;QAC1C,~~MAAMc~~,eAA+C;~~YACnDnB~~,KAAK,~~IAAMoB~~,~~IAAAA,~~8BAAAA,EAAe;oBAAE,~~GAAGpC~~,QAAQ;~~oBAAEkB~~,~~GAAGc~~;gBAAS;~~YACrDb~~,YAAY,~~IAAMiB~~,~~IAAAA,~~8BAAAA,EAAe;oBAAE,~~GAAGpC~~,QAAQ;~~oBAAEoB~~,~~GAAGY~~,WAAW;gBAAI;~~YAClEX~~,OAAO,~~IAAMe~~,~~IAAAA,~~8BAAAA,EAAe;oBAAE,~~GAAGpC~~,QAAQ;~~oBAAEsB~~,~~GAAGU~~,WAAW;gBAAI;QAC/D;QACA,~~MAAMK~~,~~WAAWb~~,~~IAAAA,~~4BAAAA,~~EAAc/~~B~~,SAAS0C~~;~~QAExC9B~~,~~gBAAgBgC~~;~~QAEhBT~~,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,~~cAAgBG~~;~~QAChBrC~~,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,~~SAAWqC~~,OAAO;~~YAChBO~~,MAAM;~~YACNP~~;~~YACA7C~~,~~OAAOmD~~;QACT;IACF;IAEA,MAAME,gBAAgB;QACpB,~~CAACC~~,8CAAAA,~~CAAmBC~~,kBAAkB,CAAC,~~EAAE9C~~,WAAW,~~WAAWhB~~,QAAQ,QAAQ,WAAW;QAC1F,~~CAAC6D~~,8CAAAA,~~CAAmBE~~,iBAAiB,CAAC,EAAE,~~CAAC~~,~~EAAEjB,~~aAAa,CAAC,CAAC;QAC1D,~~CAACe~~,8CAAAA,~~CAAmBG~~,aAAa,CAAC,~~EAChClD~~,YAAY,QAAQ,CAAC,IAAI,~~EAAE8B~~,aAAa,YAAY,CAAC,~~GAAGrB~~,~~IAAAA,~~oBAAAA,~~EAAUF~~,~~UAAU4C~~,WAAW;QACzF,~~CAACJ~~,8CAAAA,~~CAAmBK~~,YAAY,CAAC,EAC/~~BpD~~,YAAY,QACR,CAAC,IAAI,EAAEQ,~~SAASiB~~,CAAC,CAAC,CAAC,~~EAAEjB~~,~~SAASmB~~,CAAC,GAAG,IAAI,GAAG,~~EAAEnB~~,~~SAAS6C~~,CAAC,GAAG,IAAI,EAAE,CAAC,GAC/D,CAAC,IAAI,~~EAAE7C~~,~~SAASiB~~,CAAC,CAAC,WAAW,CAAC;IACtC;IAEA,~~MAAMT~~,QAA0B;~~QAC9BrB~~;~~QACAO~~;QACAF;~~QACAsD~~,YAAY;~~YACVlD~~,OAAO;YACPC,MAAM;YACNF,MAAM;YACNG,OAAO;QACT;QACAH,~~MAAMoD~~,oBAAAA,~~CAAKC~~,MAAM,~~CAACrD~~,MAAM;~~YACtBsD~~,cAAc;gBACZC,MAAM;gBACN,~~GAAG9D~~,~~YAAYO~~,IAAI;YACrB;~~YACAwD~~,aAAa;QACf;~~QACAvD~~,~~OAAOmD~~,oBAAAA,~~CAAKC~~,MAAM,~~CAACpD~~,OAAO;~~YACxBqD~~,cAAc;gBACZG,~~IAAIC~~,~~IAAAA,~~qBAAAA,EAAM,~~WAAW7E~~,~~MAAM4E~~,EAAE;~~gBAC7B3E~~;~~gBACA6E~~,~~KAAK5B~~,cAAAA;~~gBACL6B~~,~~KAAK5C~~;~~gBACL6C~~,UAAU;gBACV,CAAC,mBAAmB,~~EAAE9D~~,WAAW,aAAa;gBAC9C,~~GAAGN~~,~~YAAYqE~~,OAAO;~~gBACtBpB~~,MAAM;YACR;~~YACAc~~,aAAa;QACf;~~QACAtD~~,~~MAAMkD~~,oBAAAA,~~CAAKC~~,MAAM,~~CAACnD~~,MAAM;~~YAAEsD~~,aAAa;QAAM;~~QAC7CrD~~,~~OAAOiD~~,oBAAAA,~~CAAKC~~,MAAM,~~CAAClD~~,OAAO;~~YAAEqD~~,aAAa;QAAM;IACjD;IAEA,aAAa;~~IACb3C~~,~~MAAMb~~,IAAI,~~CAAC+D~~,KAAK,GAAG;QACjB,~~GAAGpB~~,aAAa;QAChB,~~GAAG9B~~,~~MAAMb~~,IAAI,~~CAAC+D~~,KAAK;IACrB;IAEA,cAAc;~~IACdlD~~,~~MAAMZ~~,KAAK,~~CAACwB~~,KAAK,GAAGE;~~IACpBd~~,~~MAAMZ~~,KAAK,CAACH,QAAQ,~~GAAGmC~~;IACvB,~~OAAOpB~~;AACT"}
1	+ {"version":3,"sources":["../src/components/ColorSlider/useColorSlider.ts"],"sourcesContent":["import * as React from 'react';\nimport { tinycolor } from '@ctrl/tinycolor';\nimport {\n getPartitionedNativeProps,\n useId,\n slot,\n useControllableState,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport { colorSliderCSSVars } from './useColorSliderStyles.styles';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { ColorSliderProps, ColorSliderState } from './ColorSlider.types';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\nimport { MIN, HUE_MAX, MAX as COLOR_MAX } from '../../utils/constants';\nimport { getPercent } from '../../utils/getPercent';\nimport { createHsvColor } from '../../utils/createHsvColor';\nimport { clampValue, type ChannelActions, adjustChannel } from '../../utils/adjustChannel';\nimport { HsvColor } from '../../types/color';\nimport { INITIAL_COLOR_HSV } from '../../utils/constants';\n\n/*\n Create the state required to render ColorSlider.\n \n The returned state can be modified with hooks such as useColorSliderStyles_unstable,\n * before being passed to renderColorSlider_unstable.\n \n @param props - props from this instance of ColorSlider\n * @param ref - reference to root HTMLInputElement of ColorSlider\n /\nexport const useColorSlider_unstable = (\n props: ColorSliderProps,\n ref: React.Ref<HTMLInputElement>,\n): ColorSliderState => {\n 'use no memo';\n\n const { dir } = useFluent();\n const onChangeFromContext = useColorPickerContextValue_unstable(ctx => ctx.requestChange);\n const colorFromContext = useColorPickerContextValue_unstable(ctx => ctx.color);\n const shapeFromContext = useColorPickerContextValue_unstable(ctx => ctx.shape);\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['onChange', 'color'],\n });\n\n const {\n color,\n channel = 'hue',\n onChange = onChangeFromContext,\n shape = shapeFromContext,\n vertical,\n // Slots\n root,\n input,\n rail,\n thumb,\n } = props;\n\n const hsvColor = color \|\| colorFromContext;\n const hslColor = tinycolor(hsvColor).toHsl();\n\n const [currentColor, setCurrentColor] = useControllableState<HsvColor>({\n defaultState: props.defaultColor,\n state: hsvColor,\n initialState: INITIAL_COLOR_HSV,\n });\n\n const MAX = channel === 'hue' ? HUE_MAX : COLOR_MAX;\n\n const valueChannelActions: ChannelActions<number> = {\n hue: clampValue(currentColor.h),\n saturation: clampValue(currentColor.s 100),\n value: clampValue(currentColor.v * 100),\n };\n\n const clampedValue = adjustChannel(channel, valueChannelActions);\n const valuePercent = getPercent(clampedValue, MIN, MAX);\n\n const inputOnChange = input?.onChange;\n\n const _onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(event => {\n const newValue = Number(event.target.value);\n const colorActions: ChannelActions<() => HsvColor> = {\n hue: () => createHsvColor({ ...hsvColor, h: newValue }),\n saturation: () => createHsvColor({ ...hsvColor, s: newValue / 100 }),\n value: () => createHsvColor({ ...hsvColor, v: newValue / 100 }),\n };\n const newColor = adjustChannel(channel, colorActions)();\n\n setCurrentColor(newColor);\n\n inputOnChange?.(event);\n onChange?.(event, {\n type: 'change',\n event,\n color: newColor,\n });\n });\n\n const rootVariables = {\n [colorSliderCSSVars.sliderDirectionVar]: vertical ? '180deg' : dir === 'ltr' ? '-90deg' : '90deg',\n [colorSliderCSSVars.sliderProgressVar]: `${valuePercent}%`,\n [colorSliderCSSVars.thumbColorVar]:\n channel === 'hue' ? `hsl(${clampedValue}, 100%, 50%)` : tinycolor(hsvColor).toRgbString(),\n [colorSliderCSSVars.railColorVar]:\n channel === 'hue'\n ? `hsl(${hslColor.h} ${hslColor.s * 100}%, ${hslColor.l * 100}%)`\n : `hsl(${hslColor.h} 100%, 50%)`,\n };\n\n const state: ColorSliderState = {\n shape,\n vertical,\n channel,\n components: {\n input: 'input',\n rail: 'div',\n root: 'div',\n thumb: 'div',\n },\n root: slot.always(root, {\n defaultProps: {\n role: 'group',\n ...nativeProps.root,\n },\n elementType: 'div',\n }),\n input: slot.always(input, {\n defaultProps: {\n id: useId('slider-', props.id),\n ref,\n min: MIN,\n max: MAX,\n tabIndex: 0,\n ['aria-orientation']: vertical ? 'vertical' : 'horizontal',\n ...nativeProps.primary,\n type: 'range',\n },\n elementType: 'input',\n }),\n rail: slot.always(rail, { elementType: 'div' }),\n thumb: slot.always(thumb, { elementType: 'div' }),\n };\n\n // Root props\n state.root.style = {\n ...rootVariables,\n ...state.root.style,\n };\n\n // Input Props\n state.input.value = clampedValue;\n state.input.onChange = _onChange;\n return state;\n};\n"],"names":["React","tinycolor","getPartitionedNativeProps","useId","slot","useControllableState","useEventCallback","colorSliderCSSVars","useFluent_unstable","useFluent","useColorPickerContextValue_unstable","MIN","HUE_MAX","MAX","COLOR_MAX","getPercent","createHsvColor","clampValue","adjustChannel","INITIAL_COLOR_HSV","useColorSlider_unstable","props","ref","dir","onChangeFromContext","ctx","requestChange","colorFromContext","color","shapeFromContext","shape","nativeProps","primarySlotTagName","excludedPropNames","channel","onChange","vertical","root","input","rail","thumb","hsvColor","hslColor","toHsl","currentColor","setCurrentColor","defaultState","defaultColor","state","initialState","valueChannelActions","hue","h","saturation","s","value","v","clampedValue","valuePercent","inputOnChange","_onChange","event","newValue","Number","target","colorActions","newColor","type","rootVariables","sliderDirectionVar","sliderProgressVar","thumbColorVar","toRgbString","railColorVar","l","components","always","defaultProps","role","elementType","id","min","max","tabIndex","primary","style"],"mappings":";;;;+BA6BaoB;;;;;;;iEA7BU,QAAQ;2BACL,kBAAkB;gCAOrC,4BAA4B;4CACA,gCAAgC;qCACnB,kCAAkC;6BAE9B,6BAA6B;2BAClC,wBAAwB;4BAC5C,yBAAyB;gCACrB,6BAA6B;+BACG,4BAA4B;AAapF,gCAAgC,CACrCC,OACAC;IAEA;IAEA,MAAM,EAAEC,GAAG,EAAE,GAAGd,2CAAAA;IAChB,MAAMe,0BAAsBd,gDAAAA,EAAoCe,CAAAA,MAAOA,IAAIC,aAAa;IACxF,MAAMC,uBAAmBjB,gDAAAA,EAAoCe,CAAAA,MAAOA,IAAIG,KAAK;IAC7E,MAAMC,uBAAmBnB,gDAAAA,EAAoCe,CAAAA,MAAOA,IAAIK,KAAK;IAC7E,MAAMC,kBAAc7B,yCAAAA,EAA0B;QAC5CmB;QACAW,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;SAAQ;IAC1C;IAEA,MAAM,EACJL,KAAK,EACLM,UAAU,KAAK,EACfC,WAAWX,mBAAmB,EAC9BM,QAAQD,gBAAgB,EACxBO,QAAQ,EAERC,AADA,IACI,EACJC,EAFQ,GAEH,EACLC,IAAI,EACJC,KAAK,EACN,GAAGnB;IAEJ,MAAMoB,WAAWb,SAASD;IAC1B,MAAMe,eAAWzC,oBAAAA,EAAUwC,UAAUE,KAAK;IAE1C,MAAM,CAACC,cAAcC,gBAAgB,OAAGxC,oCAAAA,EAA+B;QACrEyC,cAAczB,MAAM0B,YAAY;QAChCC,OAAOP;QACPQ,cAAc9B,4BAAAA;IAChB;IAEA,MAAMN,MAAMqB,YAAY,QAAQtB,kBAAAA,GAAUE,cAAAA;IAE1C,MAAMoC,sBAA8C;QAClDC,SAAKlC,yBAAAA,EAAW2B,aAAaQ,CAAC;QAC9BC,gBAAYpC,yBAAAA,EAAW2B,aAAaU,CAAC,GAAG;QACxCC,OAAOtC,6BAAAA,EAAW2B,aAAaY,CAAC,GAAG;IACrC;IAEA,MAAMC,mBAAevC,4BAAAA,EAAcgB,SAASgB;IAC5C,MAAMQ,mBAAe3C,sBAAAA,EAAW0C,cAAc9C,cAAAA,EAAKE;IAEnD,MAAM8C,gBAAgBrB,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOH,QAAQ;IAErC,MAAMyB,gBAAwDtD,gCAAAA,EAAiBuD,CAAAA;QAC7E,MAAMC,WAAWC,OAAOF,MAAMG,MAAM,CAACT,KAAK;QAC1C,MAAMU,eAA+C;YACnDd,KAAK,QAAMnC,8BAAAA,EAAe;oBAAE,GAAGyB,QAAQ;oBAAEW,GAAGU;gBAAS;YACrDT,YAAY,QAAMrC,8BAAAA,EAAe;oBAAE,GAAGyB,QAAQ;oBAAEa,GAAGQ,WAAW;gBAAI;YAClEP,OAAO,QAAMvC,8BAAAA,EAAe;oBAAE,GAAGyB,QAAQ;oBAAEe,GAAGM,WAAW;gBAAI;QAC/D;QACA,MAAMI,eAAWhD,4BAAAA,EAAcgB,SAAS+B;QAExCpB,gBAAgBqB;QAEhBP,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAgBE;QAChB1B,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAW0B,OAAO;YAChBM,MAAM;YACNN;YACAjC,OAAOsC;QACT;IACF;IAEA,MAAME,gBAAgB;QACpB,CAAC7D,8CAAAA,CAAmB8D,kBAAkB,CAAC,EAAEjC,WAAW,WAAWb,QAAQ,QAAQ,WAAW;QAC1F,CAAChB,8CAAAA,CAAmB+D,iBAAiB,CAAC,EAAE,GAAGZ,aAAa,CAAC,CAAC;QAC1D,CAACnD,8CAAAA,CAAmBgE,aAAa,CAAC,EAChCrC,YAAY,QAAQ,CAAC,IAAI,EAAEuB,aAAa,YAAY,CAAC,OAAGxD,oBAAAA,EAAUwC,UAAU+B,WAAW;QACzF,CAACjE,8CAAAA,CAAmBkE,YAAY,CAAC,EAC/BvC,YAAY,QACR,CAAC,IAAI,EAAEQ,SAASU,CAAC,CAAC,CAAC,EAAEV,SAASY,CAAC,GAAG,IAAI,GAAG,EAAEZ,SAASgC,CAAC,GAAG,IAAI,EAAE,CAAC,GAC/D,CAAC,IAAI,EAAEhC,SAASU,CAAC,CAAC,WAAW,CAAC;IACtC;IAEA,MAAMJ,QAA0B;QAC9BlB;QACAM;QACAF;QACAyC,YAAY;YACVrC,OAAO;YACPC,MAAM;YACNF,MAAM;YACNG,OAAO;QACT;QACAH,MAAMjC,oBAAAA,CAAKwE,MAAM,CAACvC,MAAM;YACtBwC,cAAc;gBACZC,MAAM;gBACN,GAAG/C,YAAYM,IAAI;YACrB;YACA0C,aAAa;QACf;QACAzC,OAAOlC,oBAAAA,CAAKwE,MAAM,CAACtC,OAAO;YACxBuC,cAAc;gBACZG,QAAI7E,qBAAAA,EAAM,WAAWkB,MAAM2D,EAAE;gBAC7B1D;gBACA2D,KAAKtE,cAAAA;gBACLuE,KAAKrE;gBACLsE,UAAU;gBACV,CAAC,mBAAmB,EAAE/C,WAAW,aAAa;gBAC9C,GAAGL,YAAYqD,OAAO;gBACtBjB,MAAM;YACR;YACAY,aAAa;QACf;QACAxC,MAAMnC,oBAAAA,CAAKwE,MAAM,CAACrC,MAAM;YAAEwC,aAAa;QAAM;QAC7CvC,OAAOpC,oBAAAA,CAAKwE,MAAM,CAACpC,OAAO;YAAEuC,aAAa;QAAM;IACjD;IAEA,aAAa;IACb/B,MAAMX,IAAI,CAACgD,KAAK,GAAG;QACjB,GAAGjB,aAAa;QAChB,GAAGpB,MAAMX,IAAI,CAACgD,KAAK;IACrB;IAEA,cAAc;IACdrC,MAAMV,KAAK,CAACiB,KAAK,GAAGE;IACpBT,MAAMV,KAAK,CAACH,QAAQ,GAAGyB;IACvB,OAAOZ;AACT,EAAE"}

package/lib-commonjs/components/ColorSlider/useColorSliderStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useColorSliderStyles.styles.js"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const colorSliderClassNames = {\n root: 'fui-ColorSlider',\n rail: 'fui-ColorSlider__rail',\n thumb: 'fui-ColorSlider__thumb',\n input: 'fui-ColorSlider__input'\n};\nexport 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};\nconst hueBackground = `linear-gradient(${[\n `var(${colorSliderCSSVars.sliderDirectionVar})`,\n 'red',\n 'fuchsia',\n 'blue',\n 'aqua',\n 'lime',\n 'yellow',\n 'red'\n].join(',')})`;\n/*\n Styles for the root slot\n / const useRootStyles = makeResetStyles({\n position: 'relative',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'center',\n justifyItems: 'center',\n [colorSliderCSSVars.thumbSizeVar]: '20px',\n [colorSliderCSSVars.railSizeVar]: '20px',\n minHeight: '32px'\n});\nconst useStyles = makeStyles({\n horizontal: {\n minWidth: '200px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`,\n gridTemplateColumns: `1fr 100% 1fr`\n },\n vertical: {\n minHeight: '280px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr 100% 1fr`,\n gridTemplateColumns: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`\n }\n});\nconst useChannelStyles = makeStyles({\n hue: {\n backgroundImage: hueBackground\n },\n saturation: {\n backgroundImage: `linear-gradient(to right, #808080, var(${colorSliderCSSVars.railColorVar}))`\n },\n value: {\n backgroundImage: `linear-gradient(to right, #000, var(${colorSliderCSSVars.railColorVar}))`\n }\n});\n/\n Styles for the rail slot\n / const useRailStyles = makeStyles({\n rail: {\n pointerEvents: 'none',\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'relative',\n forcedColorAdjust: 'none',\n outlineWidth: '1px',\n outlineStyle: 'solid',\n outlineColor: tokens.colorTransparentStroke,\n '::before': {\n content: \"''\",\n position: 'absolute'\n }\n },\n horizontal: {\n width: '100%',\n height: `var(${colorSliderCSSVars.railSizeVar})`,\n '::before': {\n left: '-1px',\n right: '-1px',\n height: `var(${colorSliderCSSVars.railSizeVar})`\n }\n },\n vertical: {\n width: `var(${colorSliderCSSVars.railSizeVar})`,\n height: '100%',\n '::before': {\n width: `var(${colorSliderCSSVars.railSizeVar})`,\n top: '-1px',\n bottom: '1px'\n }\n }\n});\n/\n Styles for the thumb slot\n / const useThumbStyles = makeStyles({\n thumb: {\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'absolute',\n width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n height: `var(${colorSliderCSSVars.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(${colorSliderCSSVars.thumbColorVar})`,\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 horizontal: {\n transform: 'translateX(-50%)',\n left: `var(${colorSliderCSSVars.sliderProgressVar})`\n },\n vertical: {\n transform: 'translateY(50%)',\n bottom: `var(${colorSliderCSSVars.sliderProgressVar})`\n }\n});\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium\n },\n square: {\n borderRadius: tokens.borderRadiusNone\n }\n});\n/\n Styles for the Input slot\n / const useInputStyles = makeStyles({\n input: {\n cursor: 'pointer',\n opacity: 0,\n gridRowStart: '1',\n gridRowEnd: '-1',\n gridColumnStart: '1',\n gridColumnEnd: '-1',\n padding: '0',\n margin: '0',\n [`:focus-visible ~ .${colorSliderClassNames.thumb}`]: {\n border: `2px solid ${tokens.colorStrokeFocus2}`,\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n borderRadius: tokens.borderRadiusCircular\n }\n },\n horizontal: {\n height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n width: '100%'\n },\n vertical: {\n height: '100%',\n width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n 'writing-mode': 'vertical-lr',\n direction: 'rtl'\n }\n});\n/\n Apply styling to the ColorSlider slots based on the state\n */ export const useColorSliderStyles_unstable = (state)=>{\n 'use no memo';\n const rootStyles = useRootStyles();\n const styles = useStyles();\n const railStyles = useRailStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const shapeStyles = useShapeStyles();\n const channelStyles = useChannelStyles();\n const isVertical = state.vertical;\n state.root.className = mergeClasses(colorSliderClassNames.root, rootStyles, isVertical ? styles.vertical : styles.horizontal, state.root.className);\n state.rail.className = mergeClasses(colorSliderClassNames.rail, railStyles.rail, channelStyles[state.channel \|\| 'hue'], shapeStyles[state.shape \|\| 'rounded'], isVertical ? railStyles.vertical : railStyles.horizontal, state.rail.className);\n state.thumb.className = mergeClasses(colorSliderClassNames.thumb, thumbStyles.thumb, isVertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);\n state.input.className = mergeClasses(colorSliderClassNames.input, inputStyles.input, isVertical ? inputStyles.vertical : inputStyles.horizontal, state.input.className);\n return state;\n};\n"],"names":["colorSliderCSSVars","colorSliderClassNames","useColorSliderStyles_unstable","root","rail","thumb","input","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","thumbSizeVar","railSizeVar","hueBackground","join","useRootStyles","__resetStyles","useStyles","__styles","horizontal","Bf4jedk","wkccdc","Budl1dq","vertical","sshi5w","d","useChannelStyles","hue","Bcmaq0h","saturation","value","useRailStyles","Bkecrkj","Ijaq50","nk6f5a","Br312pm","Bw0ie65","qhf8xq","Bvjb7m6","Bpd4iqm","oeaueh","Bw0xxkn","Ftih45","Brfgrao","a9b677","Bqenvij","Fbdkly","mdwyqc","Baz25je","Ccq8qp","Bciustq","lawp4y","useThumbStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","De3pzq","gc50h5","r59vdv","Budzafs","ck0cow","n07z76","Gng75u","Bcvre1j","Bcgcnre","Bqjgrrk","qa3bma","y0oebl","Biqmznv","Bm6vgfq","Bbv0w2i","uvfttm","eqrjj","Bk5zm6e","m598lv","B4f6apu","ydt019","Bq4z7u6","Bdkvgpv","B0qfbqy","kj8mxx","Bz10aip","oyh7mz","B5kzvoi","p","useShapeStyles","rounded","square","useInputStyles","Bceei9c","abs64n","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","jo39rj","C5zqim","Bdlbwnu","B8rk77i","Bbzx7hc","Hwkvcz","B0nnt1c","Brwsv5j","B2b7vog","B4hmq5e","B8jxwem","B18nadz","Ddg5ig","Byj09el","Dac2s3","Dd2y6r","Bk0t58e","Ewenww","Brqi8qb","zz3kca","low6xx","d0s10n","wea7l5","olu5tv","g5nsvh","Bqvnfwh","Biqzhck","kgocjf","i","state","rootStyles","styles","railStyles","thumbStyles","inputStyles","shapeStyles","channelStyles","isVertical","className","mergeClasses","channel","shape"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1	+ {"version":3,"sources":["useColorSliderStyles.styles.js"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const colorSliderClassNames = {\n root: 'fui-ColorSlider',\n rail: 'fui-ColorSlider__rail',\n thumb: 'fui-ColorSlider__thumb',\n input: 'fui-ColorSlider__input'\n};\nexport 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};\nconst hueBackground = `linear-gradient(${[\n `var(${colorSliderCSSVars.sliderDirectionVar})`,\n 'red',\n 'fuchsia',\n 'blue',\n 'aqua',\n 'lime',\n 'yellow',\n 'red'\n].join(',')})`;\n/*\n Styles for the root slot\n / const useRootStyles = makeResetStyles({\n position: 'relative',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'center',\n justifyItems: 'center',\n [colorSliderCSSVars.thumbSizeVar]: '20px',\n [colorSliderCSSVars.railSizeVar]: '20px',\n minHeight: '32px'\n});\nconst useStyles = makeStyles({\n horizontal: {\n minWidth: '200px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`,\n gridTemplateColumns: `1fr 100% 1fr`\n },\n vertical: {\n minHeight: '280px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr 100% 1fr`,\n gridTemplateColumns: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`\n }\n});\nconst useChannelStyles = makeStyles({\n hue: {\n backgroundImage: hueBackground\n },\n saturation: {\n backgroundImage: `linear-gradient(to right, #808080, var(${colorSliderCSSVars.railColorVar}))`\n },\n value: {\n backgroundImage: `linear-gradient(to right, #000, var(${colorSliderCSSVars.railColorVar}))`\n }\n});\n/\n Styles for the rail slot\n / const useRailStyles = makeStyles({\n rail: {\n pointerEvents: 'none',\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'relative',\n forcedColorAdjust: 'none',\n outlineWidth: '1px',\n outlineStyle: 'solid',\n outlineColor: tokens.colorTransparentStroke,\n '::before': {\n content: \"''\",\n position: 'absolute'\n }\n },\n horizontal: {\n width: '100%',\n height: `var(${colorSliderCSSVars.railSizeVar})`,\n '::before': {\n left: '-1px',\n right: '-1px',\n height: `var(${colorSliderCSSVars.railSizeVar})`\n }\n },\n vertical: {\n width: `var(${colorSliderCSSVars.railSizeVar})`,\n height: '100%',\n '::before': {\n width: `var(${colorSliderCSSVars.railSizeVar})`,\n top: '-1px',\n bottom: '1px'\n }\n }\n});\n/\n Styles for the thumb slot\n / const useThumbStyles = makeStyles({\n thumb: {\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'absolute',\n width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n height: `var(${colorSliderCSSVars.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(${colorSliderCSSVars.thumbColorVar})`,\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 horizontal: {\n transform: 'translateX(-50%)',\n left: `var(${colorSliderCSSVars.sliderProgressVar})`\n },\n vertical: {\n transform: 'translateY(50%)',\n bottom: `var(${colorSliderCSSVars.sliderProgressVar})`\n }\n});\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium\n },\n square: {\n borderRadius: tokens.borderRadiusNone\n }\n});\n/\n Styles for the Input slot\n / const useInputStyles = makeStyles({\n input: {\n cursor: 'pointer',\n opacity: 0,\n gridRowStart: '1',\n gridRowEnd: '-1',\n gridColumnStart: '1',\n gridColumnEnd: '-1',\n padding: '0',\n margin: '0',\n [`:focus-visible ~ .${colorSliderClassNames.thumb}`]: {\n border: `2px solid ${tokens.colorStrokeFocus2}`,\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n borderRadius: tokens.borderRadiusCircular\n }\n },\n horizontal: {\n height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n width: '100%'\n },\n vertical: {\n height: '100%',\n width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n 'writing-mode': 'vertical-lr',\n direction: 'rtl'\n }\n});\n/\n Apply styling to the ColorSlider slots based on the state\n */ export const useColorSliderStyles_unstable = (state)=>{\n 'use no memo';\n const rootStyles = useRootStyles();\n const styles = useStyles();\n const railStyles = useRailStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const shapeStyles = useShapeStyles();\n const channelStyles = useChannelStyles();\n const isVertical = state.vertical;\n state.root.className = mergeClasses(colorSliderClassNames.root, rootStyles, isVertical ? styles.vertical : styles.horizontal, state.root.className);\n state.rail.className = mergeClasses(colorSliderClassNames.rail, railStyles.rail, channelStyles[state.channel \|\| 'hue'], shapeStyles[state.shape \|\| 'rounded'], isVertical ? railStyles.vertical : railStyles.horizontal, state.rail.className);\n state.thumb.className = mergeClasses(colorSliderClassNames.thumb, thumbStyles.thumb, isVertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);\n state.input.className = mergeClasses(colorSliderClassNames.input, inputStyles.input, isVertical ? inputStyles.vertical : inputStyles.horizontal, state.input.className);\n return state;\n};\n"],"names":["__styles","__resetStyles","mergeClasses","tokens","colorSliderClassNames","root","rail","thumb","input","colorSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","thumbSizeVar","railSizeVar","hueBackground","join","useRootStyles","useStyles","horizontal","Bf4jedk","wkccdc","Budl1dq","vertical","sshi5w","d","useChannelStyles","hue","Bcmaq0h","saturation","value","useRailStyles","Bkecrkj","Ijaq50","nk6f5a","Br312pm","Bw0ie65","qhf8xq","Bvjb7m6","Bpd4iqm","oeaueh","Bw0xxkn","Ftih45","Brfgrao","a9b677","Bqenvij","Fbdkly","mdwyqc","Baz25je","Ccq8qp","Bciustq","lawp4y","useThumbStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","De3pzq","gc50h5","r59vdv","Budzafs","ck0cow","n07z76","Gng75u","Bcvre1j","Bcgcnre","Bqjgrrk","qa3bma","y0oebl","Biqmznv","Bm6vgfq","Bbv0w2i","uvfttm","eqrjj","Bk5zm6e","m598lv","B4f6apu","ydt019","Bq4z7u6","Bdkvgpv","B0qfbqy","kj8mxx","Bz10aip","oyh7mz","B5kzvoi","p","useShapeStyles","rounded","square","useInputStyles","Bceei9c","abs64n","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","jo39rj","C5zqim","Bdlbwnu","B8rk77i","Bbzx7hc","Hwkvcz","B0nnt1c","Brwsv5j","B2b7vog","B4hmq5e","B8jxwem","B18nadz","Ddg5ig","Byj09el","Dac2s3","Dd2y6r","Bk0t58e","Ewenww","Brqi8qb","zz3kca","low6xx","d0s10n","wea7l5","olu5tv","g5nsvh","Bqvnfwh","Biqzhck","kgocjf","i","useColorSliderStyles_unstable","state","rootStyles","styles","railStyles","thumbStyles","inputStyles","shapeStyles","channelStyles","isVertical","className","channel","shape"],"mappings":"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"}

package/lib-commonjs/components/ColorSlider/useColorSliderStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/ColorSlider/useColorSliderStyles.styles.ts"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ColorSliderSlots, ColorSliderState } from './ColorSlider.types';\n\nexport const colorSliderClassNames: SlotClassNames<ColorSliderSlots> = {\n root: 'fui-ColorSlider',\n rail: 'fui-ColorSlider__rail',\n thumb: 'fui-ColorSlider__thumb',\n input: 'fui-ColorSlider__input',\n};\n\nexport 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\nconst hueBackground = `linear-gradient(${[\n `var(${colorSliderCSSVars.sliderDirectionVar})`,\n 'red',\n 'fuchsia',\n 'blue',\n 'aqua',\n 'lime',\n 'yellow',\n 'red',\n].join(',')})`;\n\n/*\n Styles for the root slot\n /\nconst useRootStyles = makeResetStyles({\n position: 'relative',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'center',\n justifyItems: 'center',\n [colorSliderCSSVars.thumbSizeVar]: '20px',\n [colorSliderCSSVars.railSizeVar]: '20px',\n minHeight: '32px',\n});\n\nconst useStyles = makeStyles({\n horizontal: {\n minWidth: '200px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`,\n gridTemplateColumns: `1fr 100% 1fr`,\n },\n\n vertical: {\n minHeight: '280px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr 100% 1fr`,\n gridTemplateColumns: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`,\n },\n});\n\nconst useChannelStyles = makeStyles({\n hue: {\n backgroundImage: hueBackground,\n },\n saturation: {\n backgroundImage: `linear-gradient(to right, #808080, var(${colorSliderCSSVars.railColorVar}))`,\n },\n value: {\n backgroundImage: `linear-gradient(to right, #000, var(${colorSliderCSSVars.railColorVar}))`,\n },\n});\n\n/\n Styles for the rail slot\n /\nconst useRailStyles = makeStyles({\n rail: {\n pointerEvents: 'none',\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'relative',\n forcedColorAdjust: 'none',\n outlineWidth: '1px',\n outlineStyle: 'solid',\n outlineColor: tokens.colorTransparentStroke,\n '::before': {\n content: \"''\",\n position: 'absolute',\n },\n },\n\n horizontal: {\n width: '100%',\n height: `var(${colorSliderCSSVars.railSizeVar})`,\n '::before': {\n left: '-1px',\n right: '-1px',\n height: `var(${colorSliderCSSVars.railSizeVar})`,\n },\n },\n\n vertical: {\n width: `var(${colorSliderCSSVars.railSizeVar})`,\n height: '100%',\n '::before': {\n width: `var(${colorSliderCSSVars.railSizeVar})`,\n top: '-1px',\n bottom: '1px',\n },\n },\n});\n\n/\n Styles for the thumb slot\n /\nconst useThumbStyles = makeStyles({\n thumb: {\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'absolute',\n width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n height: `var(${colorSliderCSSVars.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(${colorSliderCSSVars.thumbColorVar})`,\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 horizontal: {\n transform: 'translateX(-50%)',\n left: `var(${colorSliderCSSVars.sliderProgressVar})`,\n },\n vertical: {\n transform: 'translateY(50%)',\n bottom: `var(${colorSliderCSSVars.sliderProgressVar})`,\n },\n});\n\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n },\n square: {\n borderRadius: tokens.borderRadiusNone,\n },\n});\n\n/\n Styles for the Input slot\n /\nconst useInputStyles = makeStyles({\n input: {\n cursor: 'pointer',\n opacity: 0,\n gridRowStart: '1',\n gridRowEnd: '-1',\n gridColumnStart: '1',\n gridColumnEnd: '-1',\n padding: '0',\n margin: '0',\n [`:focus-visible ~ .${colorSliderClassNames.thumb}`]: {\n border: `2px solid ${tokens.colorStrokeFocus2}`,\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n borderRadius: tokens.borderRadiusCircular,\n },\n },\n horizontal: {\n height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n width: '100%',\n },\n vertical: {\n height: '100%',\n width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n 'writing-mode': 'vertical-lr',\n direction: 'rtl',\n },\n});\n\n/\n Apply styling to the ColorSlider slots based on the state\n */\nexport const useColorSliderStyles_unstable = (state: ColorSliderState): ColorSliderState => {\n 'use no memo';\n\n const rootStyles = useRootStyles();\n const styles = useStyles();\n const railStyles = useRailStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const shapeStyles = useShapeStyles();\n const channelStyles = useChannelStyles();\n const isVertical = state.vertical;\n\n state.root.className = mergeClasses(\n colorSliderClassNames.root,\n rootStyles,\n isVertical ? styles.vertical : styles.horizontal,\n state.root.className,\n );\n\n state.rail.className = mergeClasses(\n colorSliderClassNames.rail,\n railStyles.rail,\n channelStyles[state.channel \|\| 'hue'],\n shapeStyles[state.shape \|\| 'rounded'],\n isVertical ? railStyles.vertical : railStyles.horizontal,\n state.rail.className,\n );\n\n state.thumb.className = mergeClasses(\n colorSliderClassNames.thumb,\n thumbStyles.thumb,\n isVertical ? thumbStyles.vertical : thumbStyles.horizontal,\n state.thumb.className,\n );\n\n state.input.className = mergeClasses(\n colorSliderClassNames.input,\n inputStyles.input,\n isVertical ? inputStyles.vertical : inputStyles.horizontal,\n state.input.className,\n );\n return state;\n};\n"],"names":["colorSliderCSSVars","colorSliderClassNames","useColorSliderStyles_unstable","root","rail","thumb","input","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","thumbSizeVar","railSizeVar","hueBackground","join","useRootStyles","makeResetStyles","position","display","touchAction","alignItems","justifyItems","minHeight","useStyles","makeStyles","horizontal","minWidth","gridTemplateRows","gridTemplateColumns","vertical","useChannelStyles","hue","backgroundImage","saturation","value","useRailStyles","pointerEvents","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","forcedColorAdjust","outlineWidth","outlineStyle","outlineColor","tokens","colorTransparentStroke","content","width","height","left","right","top","bottom","useThumbStyles","borderRadius","borderRadiusCircular","border","strokeWidthThin","colorNeutralForeground4","boxShadow","shadow4","backgroundColor","inset","boxSizing","strokeWidthThick","colorNeutralBackground1","transform","useShapeStyles","rounded","borderRadiusMedium","square","borderRadiusNone","useInputStyles","cursor","opacity","padding","margin","colorStrokeFocus2","outline","direction","state","rootStyles","styles","railStyles","thumbStyles","inputStyles","shapeStyles","channelStyles","isVertical","className","mergeClasses","channel","shape"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1	+ {"version":3,"sources":["../src/components/ColorSlider/useColorSliderStyles.styles.ts"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ColorSliderSlots, ColorSliderState } from './ColorSlider.types';\n\nexport const colorSliderClassNames: SlotClassNames<ColorSliderSlots> = {\n root: 'fui-ColorSlider',\n rail: 'fui-ColorSlider__rail',\n thumb: 'fui-ColorSlider__thumb',\n input: 'fui-ColorSlider__input',\n};\n\nexport 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\nconst hueBackground = `linear-gradient(${[\n `var(${colorSliderCSSVars.sliderDirectionVar})`,\n 'red',\n 'fuchsia',\n 'blue',\n 'aqua',\n 'lime',\n 'yellow',\n 'red',\n].join(',')})`;\n\n/*\n Styles for the root slot\n /\nconst useRootStyles = makeResetStyles({\n position: 'relative',\n display: 'inline-grid',\n touchAction: 'none',\n alignItems: 'center',\n justifyItems: 'center',\n [colorSliderCSSVars.thumbSizeVar]: '20px',\n [colorSliderCSSVars.railSizeVar]: '20px',\n minHeight: '32px',\n});\n\nconst useStyles = makeStyles({\n horizontal: {\n minWidth: '200px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`,\n gridTemplateColumns: `1fr 100% 1fr`,\n },\n\n vertical: {\n minHeight: '280px',\n // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n gridTemplateRows: `1fr 100% 1fr`,\n gridTemplateColumns: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`,\n },\n});\n\nconst useChannelStyles = makeStyles({\n hue: {\n backgroundImage: hueBackground,\n },\n saturation: {\n backgroundImage: `linear-gradient(to right, #808080, var(${colorSliderCSSVars.railColorVar}))`,\n },\n value: {\n backgroundImage: `linear-gradient(to right, #000, var(${colorSliderCSSVars.railColorVar}))`,\n },\n});\n\n/\n Styles for the rail slot\n /\nconst useRailStyles = makeStyles({\n rail: {\n pointerEvents: 'none',\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'relative',\n forcedColorAdjust: 'none',\n outlineWidth: '1px',\n outlineStyle: 'solid',\n outlineColor: tokens.colorTransparentStroke,\n '::before': {\n content: \"''\",\n position: 'absolute',\n },\n },\n\n horizontal: {\n width: '100%',\n height: `var(${colorSliderCSSVars.railSizeVar})`,\n '::before': {\n left: '-1px',\n right: '-1px',\n height: `var(${colorSliderCSSVars.railSizeVar})`,\n },\n },\n\n vertical: {\n width: `var(${colorSliderCSSVars.railSizeVar})`,\n height: '100%',\n '::before': {\n width: `var(${colorSliderCSSVars.railSizeVar})`,\n top: '-1px',\n bottom: '1px',\n },\n },\n});\n\n/\n Styles for the thumb slot\n /\nconst useThumbStyles = makeStyles({\n thumb: {\n gridRowStart: '2',\n gridRowEnd: '2',\n gridColumnStart: '2',\n gridColumnEnd: '2',\n position: 'absolute',\n width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n height: `var(${colorSliderCSSVars.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(${colorSliderCSSVars.thumbColorVar})`,\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 horizontal: {\n transform: 'translateX(-50%)',\n left: `var(${colorSliderCSSVars.sliderProgressVar})`,\n },\n vertical: {\n transform: 'translateY(50%)',\n bottom: `var(${colorSliderCSSVars.sliderProgressVar})`,\n },\n});\n\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n },\n square: {\n borderRadius: tokens.borderRadiusNone,\n },\n});\n\n/\n Styles for the Input slot\n /\nconst useInputStyles = makeStyles({\n input: {\n cursor: 'pointer',\n opacity: 0,\n gridRowStart: '1',\n gridRowEnd: '-1',\n gridColumnStart: '1',\n gridColumnEnd: '-1',\n padding: '0',\n margin: '0',\n [`:focus-visible ~ .${colorSliderClassNames.thumb}`]: {\n border: `2px solid ${tokens.colorStrokeFocus2}`,\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n borderRadius: tokens.borderRadiusCircular,\n },\n },\n horizontal: {\n height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n width: '100%',\n },\n vertical: {\n height: '100%',\n width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n 'writing-mode': 'vertical-lr',\n direction: 'rtl',\n },\n});\n\n/\n Apply styling to the ColorSlider slots based on the state\n */\nexport const useColorSliderStyles_unstable = (state: ColorSliderState): ColorSliderState => {\n 'use no memo';\n\n const rootStyles = useRootStyles();\n const styles = useStyles();\n const railStyles = useRailStyles();\n const thumbStyles = useThumbStyles();\n const inputStyles = useInputStyles();\n const shapeStyles = useShapeStyles();\n const channelStyles = useChannelStyles();\n const isVertical = state.vertical;\n\n state.root.className = mergeClasses(\n colorSliderClassNames.root,\n rootStyles,\n isVertical ? styles.vertical : styles.horizontal,\n state.root.className,\n );\n\n state.rail.className = mergeClasses(\n colorSliderClassNames.rail,\n railStyles.rail,\n channelStyles[state.channel \|\| 'hue'],\n shapeStyles[state.shape \|\| 'rounded'],\n isVertical ? railStyles.vertical : railStyles.horizontal,\n state.rail.className,\n );\n\n state.thumb.className = mergeClasses(\n colorSliderClassNames.thumb,\n thumbStyles.thumb,\n isVertical ? thumbStyles.vertical : thumbStyles.horizontal,\n state.thumb.className,\n );\n\n state.input.className = mergeClasses(\n colorSliderClassNames.input,\n inputStyles.input,\n isVertical ? inputStyles.vertical : inputStyles.horizontal,\n state.input.className,\n );\n return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","tokens","colorSliderClassNames","root","rail","thumb","input","colorSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","thumbSizeVar","railSizeVar","hueBackground","join","useRootStyles","position","display","touchAction","alignItems","justifyItems","minHeight","useStyles","horizontal","minWidth","gridTemplateRows","gridTemplateColumns","vertical","useChannelStyles","hue","backgroundImage","saturation","value","useRailStyles","pointerEvents","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","forcedColorAdjust","outlineWidth","outlineStyle","outlineColor","colorTransparentStroke","content","width","height","left","right","top","bottom","useThumbStyles","borderRadius","borderRadiusCircular","border","strokeWidthThin","colorNeutralForeground4","boxShadow","shadow4","backgroundColor","inset","boxSizing","strokeWidthThick","colorNeutralBackground1","transform","useShapeStyles","rounded","borderRadiusMedium","square","borderRadiusNone","useInputStyles","cursor","opacity","padding","margin","colorStrokeFocus2","outline","direction","useColorSliderStyles_unstable","state","rootStyles","styles","railStyles","thumbStyles","inputStyles","shapeStyles","channelStyles","isVertical","className","channel","shape"],"mappings":";;;;;;;;;;;IAYaS,kBAAAA;;;IAPAL,qBAAAA;;;iCAgMA6E;;;;uBArM6C,iBAAiB;4BAEpD,wBAAwB;AAGxC,8BAAgE;IACrE5E,MAAM;IACNC,MAAM;IACNC,OAAO;IACPC,OAAO;AACT,EAAE;AAEK,2BAA2B;IAChCE,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;AAEF,MAAMC,gBAAgB,CAAC,gBAAgB,EAAE;IACvC,CAAC,IAAI,EAAEP,mBAAmBC,kBAAkB,CAAC,CAAC,CAAC;IAC/C;IACA;IACA;IACA;IACA;IACA;IACA;CACD,CAACO,IAAI,CAAC,KAAK,CAAC,CAAC;AAEd;;CAEC,GACD,MAAMC,oBAAgBjB,sBAAAA,EAAgB;IACpCkB,UAAU;IACVC,SAAS;IACTC,aAAa;IACbC,YAAY;IACZC,cAAc;IACd,CAACd,mBAAmBK,YAAY,CAAC,EAAE;IACnC,CAACL,mBAAmBM,WAAW,CAAC,EAAE;IAClCS,WAAW;AACb;AAEA,MAAMC,gBAAYzB,iBAAAA,EAAW;IAC3B0B,YAAY;QACVC,UAAU;QACV,6GAA6G;QAC7GC,kBAAkB,CAAC,QAAQ,EAAEnB,mBAAmBK,YAAY,CAAC,KAAK,CAAC;QACnEe,qBAAqB,CAAC,YAAY,CAAC;IACrC;IAEAC,UAAU;QACRN,WAAW;QACX,6GAA6G;QAC7GI,kBAAkB,CAAC,YAAY,CAAC;QAChCC,qBAAqB,CAAC,QAAQ,EAAEpB,mBAAmBK,YAAY,CAAC,KAAK,CAAC;IACxE;AACF;AAEA,MAAMiB,uBAAmB/B,iBAAAA,EAAW;IAClCgC,KAAK;QACHC,iBAAiBjB;IACnB;IACAkB,YAAY;QACVD,iBAAiB,CAAC,uCAAuC,EAAExB,mBAAmBI,YAAY,CAAC,EAAE,CAAC;IAChG;IACAsB,OAAO;QACLF,iBAAiB,CAAC,oCAAoC,EAAExB,mBAAmBI,YAAY,CAAC,EAAE,CAAC;IAC7F;AACF;AAEA;;CAEC,GACD,MAAMuB,oBAAgBpC,iBAAAA,EAAW;IAC/BM,MAAM;QACJ+B,eAAe;QACfC,cAAc;QACdC,YAAY;QACZC,iBAAiB;QACjBC,eAAe;QACftB,UAAU;QACVuB,mBAAmB;QACnBC,cAAc;QACdC,cAAc;QACdC,cAAc1C,kBAAAA,CAAO2C,sBAAsB;QAC3C,YAAY;YACVC,SAAS;YACT5B,UAAU;QACZ;IACF;IAEAO,YAAY;QACVsB,OAAO;QACPC,QAAQ,CAAC,IAAI,EAAExC,mBAAmBM,WAAW,CAAC,CAAC,CAAC;QAChD,YAAY;YACVmC,MAAM;YACNC,OAAO;YACPF,QAAQ,CAAC,IAAI,EAAExC,mBAAmBM,WAAW,CAAC,CAAC,CAAC;QAClD;IACF;IAEAe,UAAU;QACRkB,OAAO,CAAC,IAAI,EAAEvC,mBAAmBM,WAAW,CAAC,CAAC,CAAC;QAC/CkC,QAAQ;QACR,YAAY;YACVD,OAAO,CAAC,IAAI,EAAEvC,mBAAmBM,WAAW,CAAC,CAAC,CAAC;YAC/CqC,KAAK;YACLC,QAAQ;QACV;IACF;AACF;AAEA;;CAEC,GACD,MAAMC,qBAAiBtD,iBAAAA,EAAW;IAChCO,OAAO;QACL+B,cAAc;QACdC,YAAY;QACZC,iBAAiB;QACjBC,eAAe;QACftB,UAAU;QACV6B,OAAO,CAAC,IAAI,EAAEvC,mBAAmBK,YAAY,CAAC,CAAC,CAAC;QAChDmC,QAAQ,CAAC,IAAI,EAAExC,mBAAmBK,YAAY,CAAC,CAAC,CAAC;QACjDuB,eAAe;QACfO,cAAc;QACdF,mBAAmB;QACnBa,cAAcpD,kBAAAA,CAAOqD,oBAAoB;QACzCC,QAAQ,GAAGtD,kBAAAA,CAAOuD,eAAe,CAAC,OAAO,EAAEvD,kBAAAA,CAAOwD,uBAAuB,EAAE;QAC3EC,WAAWzD,kBAAAA,CAAO0D,OAAO;QACzBC,iBAAiB,CAAC,IAAI,EAAErD,mBAAmBG,aAAa,CAAC,CAAC,CAAC;QAC3D,YAAY;YACVO,UAAU;YACV4C,OAAO;YACPR,cAAcpD,kBAAAA,CAAOqD,oBAAoB;YACzCQ,WAAW;YACXjB,SAAS;YACTU,QAAQ,GAAGtD,kBAAAA,CAAO8D,gBAAgB,CAAC,OAAO,EAAE9D,kBAAAA,CAAO+D,uBAAuB,EAAE;QAC9E;IACF;IACAxC,YAAY;QACVyC,WAAW;QACXjB,MAAM,CAAC,IAAI,EAAEzC,mBAAmBE,iBAAiB,CAAC,CAAC,CAAC;IACtD;IACAmB,UAAU;QACRqC,WAAW;QACXd,QAAQ,CAAC,IAAI,EAAE5C,mBAAmBE,iBAAiB,CAAC,CAAC,CAAC;IACxD;AACF;AAEA,MAAMyD,qBAAiBpE,iBAAAA,EAAW;IAChCqE,SAAS;QACPd,cAAcpD,kBAAAA,CAAOmE,kBAAkB;IACzC;IACAC,QAAQ;QACNhB,cAAcpD,kBAAAA,CAAOqE,gBAAgB;IACvC;AACF;AAEA;;CAEC,GACD,MAAMC,qBAAiBzE,iBAAAA,EAAW;IAChCQ,OAAO;QACLkE,QAAQ;QACRC,SAAS;QACTrC,cAAc;QACdC,YAAY;QACZC,iBAAiB;QACjBC,eAAe;QACfmC,SAAS;QACTC,QAAQ;QACR,CAAC,CAAC,kBAAkB,EAAEzE,sBAAsBG,KAAK,EAAE,CAAC,EAAE;YACpDkD,QAAQ,CAAC,UAAU,EAAEtD,kBAAAA,CAAO2E,iBAAiB,EAAE;YAC/CC,SAAS,GAAG5E,kBAAAA,CAAO8D,gBAAgB,CAAC,OAAO,EAAE9D,kBAAAA,CAAO2C,sBAAsB,EAAE;YAC5ES,cAAcpD,kBAAAA,CAAOqD,oBAAoB;QAC3C;IACF;IACA9B,YAAY;QACVuB,QAAQ,CAAC,IAAI,EAAExC,mBAAmBK,YAAY,CAAC,CAAC,CAAC;QACjDkC,OAAO;IACT;IACAlB,UAAU;QACRmB,QAAQ;QACRD,OAAO,CAAC,IAAI,EAAEvC,mBAAmBK,YAAY,CAAC,CAAC,CAAC;QAChD,gBAAgB;QAChBkE,WAAW;IACb;AACF;AAKO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,aAAajE;IACnB,MAAMkE,SAAS3D;IACf,MAAM4D,aAAajD;IACnB,MAAMkD,cAAchC;IACpB,MAAMiC,cAAcd;IACpB,MAAMe,cAAcpB;IACpB,MAAMqB,gBAAgB1D;IACtB,MAAM2D,aAAaR,MAAMpD,QAAQ;IAEjCoD,MAAM7E,IAAI,CAACsF,SAAS,OAAGzF,mBAAAA,EACrBE,sBAAsBC,IAAI,EAC1B8E,YACAO,aAAaN,OAAOtD,QAAQ,GAAGsD,OAAO1D,UAAU,EAChDwD,MAAM7E,IAAI,CAACsF,SAAS;IAGtBT,MAAM5E,IAAI,CAACqF,SAAS,OAAGzF,mBAAAA,EACrBE,sBAAsBE,IAAI,EAC1B+E,WAAW/E,IAAI,EACfmF,aAAa,CAACP,MAAMU,OAAO,IAAI,MAAM,EACrCJ,WAAW,CAACN,MAAMW,KAAK,IAAI,UAAU,EACrCH,aAAaL,WAAWvD,QAAQ,GAAGuD,WAAW3D,UAAU,EACxDwD,MAAM5E,IAAI,CAACqF,SAAS;IAGtBT,MAAM3E,KAAK,CAACoF,SAAS,OAAGzF,mBAAAA,EACtBE,sBAAsBG,KAAK,EAC3B+E,YAAY/E,KAAK,EACjBmF,aAAaJ,YAAYxD,QAAQ,GAAGwD,YAAY5D,UAAU,EAC1DwD,MAAM3E,KAAK,CAACoF,SAAS;IAGvBT,MAAM1E,KAAK,CAACmF,SAAS,OAAGzF,mBAAAA,EACtBE,sBAAsBI,KAAK,EAC3B+E,YAAY/E,KAAK,EACjBkF,aAAaH,YAAYzD,QAAQ,GAAGyD,YAAY7D,UAAU,EAC1DwD,MAAM1E,KAAK,CAACmF,SAAS;IAEvB,OAAOT;AACT,EAAE"}

package/lib-commonjs/contexts/colorPicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/contexts/colorPicker.ts"],"sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { ColorPickerState, ColorPickerProps } from '../components/ColorPicker/ColorPicker.types';\nimport type { HsvColor } from '../types/color';\n\n/*\n The context through which individual color controls communicate with the picker.\n /\nexport type ColorPickerContextValue = Pick<ColorPickerProps, 'shape' \| 'color'> & {\n /\n @internal\n * Callback used by Sliders to request a change on it's selected value\n * Should be used to get value of color channel\n /\n requestChange: (event: React.ChangeEvent<HTMLInputElement>, data: { color: HsvColor }) => void;\n};\n\nexport const useColorPickerContextValues = (state: ColorPickerState): ColorPickerContextValues => {\n const { color, shape, requestChange } = state;\n\n // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n const colorPicker: ColorPickerContextValue = {\n requestChange,\n color,\n shape,\n };\n\n return { colorPicker };\n};\n\nexport const colorPickerContextDefaultValue: ColorPickerContextValue = {\n requestChange: () => {\n /noop*/\n },\n color: undefined,\n shape: 'rounded',\n};\n\nexport type ColorPickerContextValues = {\n colorPicker: ColorPickerContextValue;\n};\n\nconst colorPickerContext = createContext<ColorPickerContextValue \| undefined>(\n undefined,\n) as Context<ColorPickerContextValue>;\n\nexport const ColorPickerProvider = colorPickerContext.Provider;\n\nexport const useColorPickerContextValue_unstable = <T>(selector: ContextSelector<ColorPickerContextValue, T>): T =>\n useContextSelector(colorPickerContext, (ctx = colorPickerContextDefaultValue) => selector(ctx));\n"],"names":["~~ColorPickerProvider~~","~~colorPickerContextDefaultValue~~","~~useColorPickerContextValue_unstable~~","useColorPickerContextValues","state","color","shape","requestChange","colorPicker","undefined","colorPickerContext","~~createContext~~","Provider","~~selector~~","~~useContextSelector~~","ctx"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;;;;;;;;IA+~~CaA~~,~~mBAAAA~~;~~eAAAA;;IAhBAC~~,~~8BAAAA~~;~~eAAAA;;IAkBAC~~,~~mCAAAA;eAAAA;;IA/BAC,2BAAAA;eAAAA;;;;iEAlBU;sCAC2B;AAiB3C,~~MAAMA,8BAA8B,CAACC;IAC1C,MAAM,EAAEC,KAAK,EAAEC,KAAK,EAAEC,aAAa,EAAE,GAAGH;IAExC,mGAAmG;IACnG,MAAMI,cAAuC;QAC3CD;QACAF;QACAC;IACF;IAEA,OAAO;QAAEE;IAAY;AACvB;~~AAEO~~,~~MAAMP~~,iCAA0D;~~IACrEM~~,eAAe;IACb,MAAM,GACR;IACAF,~~OAAOI~~;~~IACPH~~,OAAO;AACT;~~AAMA~~,~~MAAMI~~,~~qBAAqBC~~,~~IAAAA,~~mCAAAA,~~EACzBF~~;AAGK,~~MAAMT~~,~~sBAAsBU~~,mBAAmBE,QAAQ;~~AAEvD~~,~~MAAMV~~,sCAAsC,~~CAAIW~~,~~WACrDC~~,~~IAAAA,~~wCAAAA,~~EAAmBJ~~,oBAAoB,CAACK,~~MAAMd~~,8BAA8B,~~GAAKY~~,~~SAASE~~"}
1	+ {"version":3,"sources":["../src/contexts/colorPicker.ts"],"sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { ColorPickerState, ColorPickerProps } from '../components/ColorPicker/ColorPicker.types';\nimport type { HsvColor } from '../types/color';\n\n/*\n The context through which individual color controls communicate with the picker.\n /\nexport type ColorPickerContextValue = Pick<ColorPickerProps, 'shape' \| 'color'> & {\n /\n @internal\n * Callback used by Sliders to request a change on it's selected value\n * Should be used to get value of color channel\n /\n requestChange: (event: React.ChangeEvent<HTMLInputElement>, data: { color: HsvColor }) => void;\n};\n\nexport const useColorPickerContextValues = (state: ColorPickerState): ColorPickerContextValues => {\n const { color, shape, requestChange } = state;\n\n // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n const colorPicker: ColorPickerContextValue = {\n requestChange,\n color,\n shape,\n };\n\n return { colorPicker };\n};\n\nexport const colorPickerContextDefaultValue: ColorPickerContextValue = {\n requestChange: () => {\n /noop*/\n },\n color: undefined,\n shape: 'rounded',\n};\n\nexport type ColorPickerContextValues = {\n colorPicker: ColorPickerContextValue;\n};\n\nconst colorPickerContext = createContext<ColorPickerContextValue \| undefined>(\n undefined,\n) as Context<ColorPickerContextValue>;\n\nexport const ColorPickerProvider = colorPickerContext.Provider;\n\nexport const useColorPickerContextValue_unstable = <T>(selector: ContextSelector<ColorPickerContextValue, T>): T =>\n useContextSelector(colorPickerContext, (ctx = colorPickerContextDefaultValue) => selector(ctx));\n"],"names":["React","createContext","useContextSelector","useColorPickerContextValues","state","color","shape","requestChange","colorPicker","colorPickerContextDefaultValue","undefined","colorPickerContext","ColorPickerProvider","Provider","useColorPickerContextValue_unstable","selector","ctx"],"mappings":";;;;;;;;;;;uBA+CaY;;;kCAhBAH;;;uCAkBAK;;;+BA/BAX;;;;;iEAlBU,QAAQ;sCACmB,mCAAmC;AAiB9E,MAAMA,8BAA8B,CAACC;IAC1C,MAAM,EAAEC,KAAK,EAAEC,KAAK,EAAEC,aAAa,EAAE,GAAGH;IAExC,mGAAmG;IACnG,MAAMI,cAAuC;QAC3CD;QACAF;QACAC;IACF;IAEA,OAAO;QAAEE;IAAY;AACvB,EAAE;AAEK,MAAMC,iCAA0D;IACrEF,eAAe;IACb,MAAM,GACR;IACAF,OAAOK;IACPJ,OAAO;AACT,EAAE;AAMF,MAAMK,yBAAqBV,mCAAAA,EACzBS;AAGK,MAAME,sBAAsBD,mBAAmBE,QAAQ,CAAC;AAExD,MAAMC,sCAAsC,CAAIC,eACrDb,wCAAAA,EAAmBS,oBAAoB,CAACK,MAAMP,8BAA8B,GAAKM,SAASC,MAAM"}

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export type { ColorSliderProps, ColorSliderSlots, ColorSliderState } from './ColorSlider';\nexport {\n ColorSlider,\n colorSliderClassNames,\n renderColorSlider_unstable,\n useColorSliderStyles_unstable,\n useColorSlider_unstable,\n} from './ColorSlider';\nexport type { ColorPickerProps, ColorPickerSlots, ColorPickerState } from './ColorPicker';\nexport {\n ColorPicker,\n colorPickerClassNames,\n renderColorPicker_unstable,\n useColorPickerStyles_unstable,\n useColorPicker_unstable,\n} from './ColorPicker';\nexport type { ColorAreaProps, ColorAreaSlots, ColorAreaState } from './ColorArea';\nexport {\n ColorArea,\n colorAreaClassNames,\n renderColorArea_unstable,\n useColorAreaStyles_unstable,\n useColorArea_unstable,\n} from './ColorArea';\nexport type { AlphaSliderProps, AlphaSliderSlots, AlphaSliderState } from './AlphaSlider';\nexport {\n AlphaSlider,\n alphaSliderClassNames,\n renderAlphaSlider_unstable,\n useAlphaSliderStyles_unstable,\n useAlphaSlider_unstable,\n} from './AlphaSlider';\n"],"names":["~~AlphaSlider~~","~~ColorArea~~","~~ColorPicker~~","~~ColorSlider~~","~~alphaSliderClassNames~~","~~colorAreaClassNames~~","colorPickerClassNames","~~colorSliderClassNames~~","~~renderAlphaSlider_unstable~~","~~renderColorArea_unstable~~","~~renderColorPicker_unstable~~","~~renderColorSlider_unstable~~","~~useAlphaSliderStyles_unstable~~","~~useAlphaSlider_unstable","~~useColorAreaStyles_unstable","useColorArea_unstable","~~useColorPickerStyles_unstable~~","~~useColorPicker_unstable~~","~~useColorSliderStyles_unstable~~","~~useColorSlider_unstable~~"],"~~rangeMappings~~"~~:";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"~~,"mappings":";;;;;;;;;;;~~IA0BEA,WAAW~~;~~eAAXA,wBAAW~~;;~~IARXC~~,SAAS~~;eAATA~~,~~oBAAS;;IARTC,WAAW;eAAXA,~~wBAAW~~;;IARXC~~,~~WAAW;eAAXA,~~wBAAW~~;;IAyBXC~~,~~qBAAqB;eAArBA,~~kCAAqB;;~~IARrBC,mBAAmB~~;~~eAAnBA~~,~~8BAAmB;;IARnBC,qBAAqB;eAArBA,~~kCAAqB~~;;IARrBC~~,~~qBAAqB;eAArBA,~~kCAAqB;;~~IAyBrBC~~,0BAA0B~~;eAA1BA~~,~~uCAA0B;;IAR1BC,~~wBAAwB~~;eAAxBA~~,~~mCAAwB;;IARxBC,0BAA0B;eAA1BA,~~uCAA0B~~;;IAR1BC~~,~~0BAA0B;eAA1BA,~~uCAA0B;;~~IAyB1BC,6BAA6B~~;~~eAA7BA~~,~~0CAA6B;;IAC7BC,uBAAuB;eAAvBA,~~oCAAuB~~;;IATvBC~~,~~2BAA2B;eAA3BA,~~sCAA2B~~;;IAC3BC~~,~~qBAAqB;eAArBA,~~gCAAqB~~;;IATrBC~~,~~6BAA6B;eAA7BA,~~0CAA6B~~;;IAC7BC~~,~~uBAAuB;eAAvBA,~~oCAAuB~~;;IATvBC~~,~~6BAA6B;eAA7BA,~~0CAA6B;;IAC7BC~~,uBAAuB~~;~~eAAvBA,oCAAuB~~;;;6BAClB;~~6BAQA~~;~~2BAQA~~;~~6BAQA~~"}
1	+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export type { ColorSliderProps, ColorSliderSlots, ColorSliderState } from './ColorSlider';\nexport {\n ColorSlider,\n colorSliderClassNames,\n renderColorSlider_unstable,\n useColorSliderStyles_unstable,\n useColorSlider_unstable,\n} from './ColorSlider';\nexport type { ColorPickerProps, ColorPickerSlots, ColorPickerState } from './ColorPicker';\nexport {\n ColorPicker,\n colorPickerClassNames,\n renderColorPicker_unstable,\n useColorPickerStyles_unstable,\n useColorPicker_unstable,\n} from './ColorPicker';\nexport type { ColorAreaProps, ColorAreaSlots, ColorAreaState } from './ColorArea';\nexport {\n ColorArea,\n colorAreaClassNames,\n renderColorArea_unstable,\n useColorAreaStyles_unstable,\n useColorArea_unstable,\n} from './ColorArea';\nexport type { AlphaSliderProps, AlphaSliderSlots, AlphaSliderState } from './AlphaSlider';\nexport {\n AlphaSlider,\n alphaSliderClassNames,\n renderAlphaSlider_unstable,\n useAlphaSliderStyles_unstable,\n useAlphaSlider_unstable,\n} from './AlphaSlider';\n"],"names":["ColorSlider","colorSliderClassNames","renderColorSlider_unstable","useColorSliderStyles_unstable","useColorSlider_unstable","ColorPicker","colorPickerClassNames","renderColorPicker_unstable","useColorPickerStyles_unstable","useColorPicker_unstable","ColorArea","colorAreaClassNames","renderColorArea_unstable","useColorAreaStyles_unstable","useColorArea_unstable","AlphaSlider","alphaSliderClassNames","renderAlphaSlider_unstable","useAlphaSliderStyles_unstable","useAlphaSlider_unstable"],"mappings":";;;;;;;;;;;eA0Ba;eAAXe;;IARAL,SAAS;;;;eARTL,wBAAW;;;eARXL,wBAAW;;;eAyBXgB,kCAAqB;;IARrBL;6CAAmB;;;eARnBL,kCAAqB;;;eARrBL,kCAAqB;;IAyBrBgB,0BAA0B;;;IAR1BL,wBAAwB;;;;eARxBL,uCAA0B;;;eAR1BL,uCAA0B;;IAyB1BgB;yDAA6B;;;eAC7BC,oCAAuB;;;eATvBN,sCAA2B;;;eAC3BC,gCAAqB;;;eATrBN,0CAA6B;;;eAC7BC,oCAAuB;;;eATvBN,0CAA6B;;IAC7BC;mDAAuB;;;6BAClB,gBAAgB;6BAQhB,gBAAgB;2BAQhB,cAAc;6BAQd,gBAAgB"}

package/lib-commonjs/types/color.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/types/color.ts"],"sourcesContent":["export type HsvColor = {\n h: number;\n s: number;\n v: number;\n a?: number;\n};\n"],"names":[],"~~rangeMappings":"","~~mappings":""}
1	+ {"version":3,"sources":["../src/types/color.ts"],"sourcesContent":["export type HsvColor = {\n h: number;\n s: number;\n v: number;\n a?: number;\n};\n"],"names":[],"mappings":""}

package/lib-commonjs/utils/adjustChannel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/utils/adjustChannel.ts"],"sourcesContent":["import type { ColorChannel } from '../components/ColorSlider/ColorSlider.types';\nimport { MIN, HUE_MAX, MAX as COLOR_MAX } from './constants';\nimport { clamp } from '@fluentui/react-utilities';\n\n/*\n Clamps a given value to the valid range for a specified color channel.\n \n @param value - The numeric value to be clamped.\n * @param channel - The color channel to use for clamping. Defaults to 'hue'.\n * @returns The clamped value within the range defined by the color channel.\n /\nexport function clampValue(value: number, channel: ColorChannel = 'hue') {\n const MAX = channel === 'hue' ? HUE_MAX : COLOR_MAX;\n return clamp(value, MIN, MAX);\n}\n\nexport type ChannelActions<T> = {\n hue: T;\n saturation: T;\n value: T;\n};\n\n/\n Adjusts the specified color channel using the provided actions.\n \n @template T - The type of the result returned by the actions.\n * @param {ColorChannel} channel - The color channel to adjust.\n * @param {ChannelActions<T>} actions - An object containing actions for each color channel.\n * @returns {T} - The result of the action corresponding to the specified channel, or the hue action if the channel is not found.\n */\nexport function adjustChannel<T>(channel: ColorChannel, actions: ChannelActions<T>): T {\n return actions[channel] \|\| actions.hue;\n}\n"],"names":["~~adjustChannel~~","~~clampValue~~","~~value~~","~~channel~~","~~MAX~~","~~HUE_MAX~~","~~COLOR_MAX~~","~~clamp~~","~~MIN~~","actions","hue"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;;;;;;;;~~IA8BgBA,aAAAA;eAAAA;;IAnBAC,UAAAA;eAAAA~~;;;2BAV+B;~~gCACzB~~;~~AASf~~,SAASA,WAAWC,KAAa,EAAEC,UAAwB,KAAK;IACrE,~~MAAMC~~,~~MAAMD~~,YAAY,~~QAAQE~~,kBAAAA,~~GAAUC~~,cAAAA;IAC1C,~~OAAOC~~,~~IAAAA,~~qBAAAA,~~EAAML~~,~~OAAOM~~,cAAAA,~~EAAKJ~~;AAC3B;AAgBO,~~SAASJ~~,~~cAAiBG~~,OAAqB,~~EAAEM~~,OAA0B;IAChF,OAAOA,OAAO,~~CAACN~~,QAAQ,~~IAAIM~~,QAAQC,GAAG;AACxC"}
1	+ {"version":3,"sources":["../src/utils/adjustChannel.ts"],"sourcesContent":["import type { ColorChannel } from '../components/ColorSlider/ColorSlider.types';\nimport { MIN, HUE_MAX, MAX as COLOR_MAX } from './constants';\nimport { clamp } from '@fluentui/react-utilities';\n\n/*\n Clamps a given value to the valid range for a specified color channel.\n \n @param value - The numeric value to be clamped.\n * @param channel - The color channel to use for clamping. Defaults to 'hue'.\n * @returns The clamped value within the range defined by the color channel.\n /\nexport function clampValue(value: number, channel: ColorChannel = 'hue') {\n const MAX = channel === 'hue' ? HUE_MAX : COLOR_MAX;\n return clamp(value, MIN, MAX);\n}\n\nexport type ChannelActions<T> = {\n hue: T;\n saturation: T;\n value: T;\n};\n\n/\n Adjusts the specified color channel using the provided actions.\n \n @template T - The type of the result returned by the actions.\n * @param {ColorChannel} channel - The color channel to adjust.\n * @param {ChannelActions<T>} actions - An object containing actions for each color channel.\n * @returns {T} - The result of the action corresponding to the specified channel, or the hue action if the channel is not found.\n */\nexport function adjustChannel<T>(channel: ColorChannel, actions: ChannelActions<T>): T {\n return actions[channel] \|\| actions.hue;\n}\n"],"names":["MIN","HUE_MAX","MAX","COLOR_MAX","clamp","clampValue","value","channel","adjustChannel","actions","hue"],"mappings":";;;;;;;;;;;iBA8BgBQ;;;cAnBAH;;;;2BAV+B,cAAc;gCACvC,4BAA4B;AAS3C,SAASA,WAAWC,KAAa,EAAEC,UAAwB,KAAK;IACrE,MAAML,MAAMK,YAAY,QAAQN,kBAAAA,GAAUE,cAAAA;IAC1C,WAAOC,qBAAAA,EAAME,OAAON,cAAAA,EAAKE;AAC3B;AAgBO,SAASM,cAAiBD,OAAqB,EAAEE,OAA0B;IAChF,OAAOA,OAAO,CAACF,QAAQ,IAAIE,QAAQC,GAAG;AACxC"}

package/lib-commonjs/utils/constants.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/utils/constants.ts"],"sourcesContent":["import { tinycolor } from '@ctrl/tinycolor';\n\nexport const MIN = 0;\nexport const MAX = 100;\nexport const HUE_MAX = 360;\nexport const INITIAL_COLOR = '#FFF';\nexport const INITIAL_COLOR_HSV = tinycolor(INITIAL_COLOR).toHsv();\n"],"names":["~~HUE_MAX~~","~~INITIAL_COLOR~~","~~INITIAL_COLOR_HSV~~","~~MAX~~","~~MIN~~","~~tinycolor~~","toHsv"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;;;;;;;;~~IAIaA,OAAAA;eAAAA;;IACAC,aAAAA;eAAAA;;IACAC,iBAAAA;eAAAA;;IAHAC,GAAAA;eAAAA;;IADAC,GAAAA;eAAAA~~;;;2BAFa;~~AAEnB~~,MAAMA,MAAM;~~AACZ~~,~~MAAMD~~,MAAM;~~AACZ~~,~~MAAMH~~,UAAU;~~AAChB~~,MAAMC,gBAAgB;~~AACtB~~,MAAMC,~~oBAAoBG~~,~~IAAAA,~~oBAAAA,~~EAAUJ~~,~~eAAeK~~,KAAK"}
1	+ {"version":3,"sources":["../src/utils/constants.ts"],"sourcesContent":["import { tinycolor } from '@ctrl/tinycolor';\n\nexport const MIN = 0;\nexport const MAX = 100;\nexport const HUE_MAX = 360;\nexport const INITIAL_COLOR = '#FFF';\nexport const INITIAL_COLOR_HSV = tinycolor(INITIAL_COLOR).toHsv();\n"],"names":["tinycolor","MIN","MAX","HUE_MAX","INITIAL_COLOR","INITIAL_COLOR_HSV","toHsv"],"mappings":";;;;;;;;;;;WAIaG;;;iBACAC;;;qBACAC;;;OAHAH;;;OADAD;;;;2BAFa,kBAAkB;AAErC,MAAMA,MAAM,EAAE;AACd,MAAMC,MAAM,IAAI;AAChB,MAAMC,UAAU,IAAI;AACpB,MAAMC,gBAAgB,OAAO;AAC7B,MAAMC,wBAAoBL,oBAAAA,EAAUI,eAAeE,KAAK,GAAG"}

package/lib-commonjs/utils/createHsvColor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/utils/createHsvColor.ts"],"sourcesContent":["import { HsvColor } from '../types/color';\n\n/*\n Creates an HSV color object with optional hue, saturation, value, and alpha components.\n \n @param {Partial<HsvColor>} param0 - An object containing optional HSV color components:\n * - `h` (number): The hue component, default is 0.\n * - `s` (number): The saturation component, default is 0.\n * - `v` (number): The value component, default is 0.\n * - `a` (number): The alpha component, default is 1.\n * @returns {HsvColor} The resulting HSV color object.\n */\nexport function createHsvColor({ h = 0, s = 0, v = 0, a = 1 }: Partial<HsvColor>): HsvColor {\n return { h, s, v, a };\n}\n"],"names":["createHsvColor","h","s","v","a"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":"AAEA;;;;;;;;;CASC~~;;;;+BACeA;;;eAAAA;;;AAAT~~,SAASA,eAAe,EAAEC,IAAI,CAAC,EAAEC,IAAI,CAAC,EAAEC,IAAI,CAAC,EAAEC,IAAI,CAAC,EAAqB;IAC9E,OAAO;QAAEH;QAAGC;QAAGC;QAAGC;IAAE;AACtB"}
1	+ {"version":3,"sources":["../src/utils/createHsvColor.ts"],"sourcesContent":["import { HsvColor } from '../types/color';\n\n/*\n Creates an HSV color object with optional hue, saturation, value, and alpha components.\n \n @param {Partial<HsvColor>} param0 - An object containing optional HSV color components:\n * - `h` (number): The hue component, default is 0.\n * - `s` (number): The saturation component, default is 0.\n * - `v` (number): The value component, default is 0.\n * - `a` (number): The alpha component, default is 1.\n * @returns {HsvColor} The resulting HSV color object.\n */\nexport function createHsvColor({ h = 0, s = 0, v = 0, a = 1 }: Partial<HsvColor>): HsvColor {\n return { h, s, v, a };\n}\n"],"names":["createHsvColor","h","s","v","a"],"mappings":"AAEA;;;;;;;;;CASC,GACD;;;;;;;;;;AAAO,SAASA,eAAe,EAAEC,IAAI,CAAC,EAAEC,IAAI,CAAC,EAAEC,IAAI,CAAC,EAAEC,IAAI,CAAC,EAAqB;IAC9E,OAAO;QAAEH;QAAGC;QAAGC;QAAGC;IAAE;AACtB"}

package/lib-commonjs/utils/getCoordinates.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/utils/getCoordinates.ts"],"sourcesContent":["import { clamp } from '@fluentui/react-utilities';\n\n/*\n Calculates the normalized coordinates of a mouse event relative to a given HTML element.\n \n @param element - The HTML element to calculate the coordinates relative to.\n * @param event - The mouse event containing the clientX and clientY properties.\n * @returns An object containing the normalized x and y coordinates, clamped between 0 and 1.\n /\nexport function getCoordinates(element: HTMLElement, event: PointerEvent) {\n const rect = element.getBoundingClientRect();\n\n const newX = roundTwoDecimal((event.clientX - rect.left) / rect.width);\n const newY = roundTwoDecimal(1 - (event.clientY - rect.top) / rect.height);\n\n return {\n x: clamp(newX, 0, 1),\n y: clamp(newY, 0, 1),\n };\n}\n\n/\n Rounds a given number to two decimal places.\n \n @param num - The number to be rounded.\n * @returns The number rounded to two decimal places.\n /\nexport function roundTwoDecimal(num: number) {\n return Math.round(num 100) / 100;\n}\n"],"names":["~~getCoordinates~~","~~roundTwoDecimal~~","element","event","rect","getBoundingClientRect","newX","clientX","left","width","newY","clientY","top","height","x","~~clamp","~~y","num","Math","round"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","~~mappings":";;;;;;;;;;;~~IASgBA~~,cAAAA~~;eAAAA;;IAkBAC,eAAAA;eAAAA~~;;;gCA3BM;~~AASf~~,~~SAASD~~,~~eAAeE,~~OAAoB,EAAEC,KAAmB;IACtE,MAAMC,OAAOF,QAAQG,qBAAqB;IAE1C,MAAMC,~~OAAOL~~,~~gBAAgB~~,~~AAACE,~~CAAAA,~~MAAMI~~,OAAO,~~GAAGH~~,~~KAAKI~~,~~IAAI~~,~~AAAJA~~,~~IAAQJ~~,~~KAAKK~~,KAAK;IACrE,MAAMC,~~OAAOT~~,gBAAgB,~~IAAI~~,~~AAACE,~~CAAAA,~~MAAMQ~~,OAAO,~~GAAGP~~,~~KAAKQ~~,~~GAAG~~,~~AAAHA~~,~~IAAOR~~,~~KAAKS~~,MAAM;IAEzE,OAAO;QACLC,~~GAAGC~~,~~IAAAA,~~qBAAAA,~~EAAMT~~,MAAM,GAAG;QAClBU,~~GAAGD~~,~~IAAAA,~~qBAAAA,~~EAAML~~,MAAM,GAAG;IACpB;AACF;AAQO,~~SAAST~~,~~gBAAgBgB~~,GAAW;IACzC,OAAOC,KAAKC,KAAK,CAACF,MAAM,OAAO;AACjC"}
1	+ {"version":3,"sources":["../src/utils/getCoordinates.ts"],"sourcesContent":["import { clamp } from '@fluentui/react-utilities';\n\n/*\n Calculates the normalized coordinates of a mouse event relative to a given HTML element.\n \n @param element - The HTML element to calculate the coordinates relative to.\n * @param event - The mouse event containing the clientX and clientY properties.\n * @returns An object containing the normalized x and y coordinates, clamped between 0 and 1.\n /\nexport function getCoordinates(element: HTMLElement, event: PointerEvent) {\n const rect = element.getBoundingClientRect();\n\n const newX = roundTwoDecimal((event.clientX - rect.left) / rect.width);\n const newY = roundTwoDecimal(1 - (event.clientY - rect.top) / rect.height);\n\n return {\n x: clamp(newX, 0, 1),\n y: clamp(newY, 0, 1),\n };\n}\n\n/\n Rounds a given number to two decimal places.\n \n @param num - The number to be rounded.\n * @returns The number rounded to two decimal places.\n /\nexport function roundTwoDecimal(num: number) {\n return Math.round(num 100) / 100;\n}\n"],"names":["clamp","getCoordinates","element","event","rect","getBoundingClientRect","newX","roundTwoDecimal","clientX","left","width","newY","clientY","top","height","x","y","num","Math","round"],"mappings":";;;;;;;;;;;IASgBC,cAAAA;;;mBAkBAM;;;;gCA3BM,4BAA4B;AAS3C,wBAAwBL,OAAoB,EAAEC,KAAmB;IACtE,MAAMC,OAAOF,QAAQG,qBAAqB;IAE1C,MAAMC,OAAOC,gBAAiBJ,CAAAA,MAAMK,OAAO,GAAGJ,KAAKK,IAAG,AAAHA,IAAQL,KAAKM,KAAK;IACrE,MAAMC,OAAOJ,gBAAgB,IAAKJ,CAAAA,MAAMS,OAAO,GAAGR,KAAKS,GAAAA,AAAE,IAAKT,KAAKU,MAAM;IAEzE,OAAO;QACLC,OAAGf,qBAAAA,EAAMM,MAAM,GAAG;QAClBU,OAAGhB,qBAAAA,EAAMW,MAAM,GAAG;IACpB;AACF;AAQO,SAASJ,gBAAgBU,GAAW;IACzC,OAAOC,KAAKC,KAAK,CAACF,MAAM,OAAO;AACjC"}

package/lib-commonjs/utils/getPercent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/utils/getPercent.ts"],"sourcesContent":["/*\n Calculates the percentage of a value within a given range.\n \n @param value - The value to be converted to a percentage.\n * @param min - The minimum value of the range.\n * @param max - The maximum value of the range.\n * @returns The percentage representation of the value within the range [min, max].\n * Returns 0 if `min` is equal to `max`.\n /\nexport const getPercent = (value: number, min: number, max: number) => {\n return max === min ? 0 : ((value - min) / (max - min)) 100;\n};\n"],"names":["getPercent","value","min","max"],"~~rangeMappings":";;;;;;;;;;;;;;;;;;;;","~~mappings":"AAAA;;;;;;;;CAQC~~;;;;+BACYA;;;eAAAA;;;AAAN~~,MAAMA,aAAa,CAACC,OAAeC,KAAaC;IACrD,OAAOA,QAAQD,MAAM,~~IAAI~~,~~AAAED,~~CAAAA,QAAQC,GAAAA,~~IAAQC~~,~~CAAAA~~,MAAMD,GAAAA,~~IAAQ~~;AAC3D"}
1	+ {"version":3,"sources":["../src/utils/getPercent.ts"],"sourcesContent":["/*\n Calculates the percentage of a value within a given range.\n \n @param value - The value to be converted to a percentage.\n * @param min - The minimum value of the range.\n * @param max - The maximum value of the range.\n * @returns The percentage representation of the value within the range [min, max].\n * Returns 0 if `min` is equal to `max`.\n /\nexport const getPercent = (value: number, min: number, max: number) => {\n return max === min ? 0 : ((value - min) / (max - min)) 100;\n};\n"],"names":["getPercent","value","min","max"],"mappings":"AAAA;;;;;;;;CAQC,GACD;;;;;;;;;;AAAO,MAAMA,aAAa,CAACC,OAAeC,KAAaC;IACrD,OAAOA,QAAQD,MAAM,IAAMD,CAAAA,QAAQC,GAAAA,CAAE,IAAMC,MAAMD,GAAAA,CAAE,GAAM;AAC3D,EAAE"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-color-picker",
-  "version": "9.2.0",
+  "version": "9.2.1",
   "description": "ColorPicker component for Fluent UI React.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -25,12 +25,12 @@
   },
   "dependencies": {
     "@ctrl/tinycolor": "^3.3.4",
-    "@fluentui/react-context-selector": "^9.2.2",
-    "@fluentui/react-jsx-runtime": "^9.1.2",
+    "@fluentui/react-context-selector": "^9.2.3",
+    "@fluentui/react-jsx-runtime": "^9.1.3",
     "@fluentui/react-shared-contexts": "^9.24.0",
-    "@fluentui/react-tabster": "^9.26.0",
+    "@fluentui/react-tabster": "^9.26.1",
     "@fluentui/react-theme": "^9.1.24",
-    "@fluentui/react-utilities": "^9.22.0",
+    "@fluentui/react-utilities": "^9.23.0",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },