npm - @fluentui/react-color-picker - Versions diffs - 9.2.16 → 9.2.18 - Mend

@fluentui/react-color-picker 9.2.16 → 9.2.18

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

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["useColorSliderStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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":"AAAA,YAAY;;;;;;;;;;;;IASCS,kBAAkB;;;IANlBL,qBAAqB;;;IA8KjBmJ,6BAA6B;;;;uBAhLY,gBAAgB;AAEnE,8BAA8B;IACjClJ,IAAI,EAAE,iBAAiB;IACvBC,IAAI,EAAE,uBAAuB;IAC7BC,KAAK,EAAE,wBAAwB;IAC/BC,KAAK,EAAE;AACX,CAAC;AACM,2BAA2B;IAC9BE,kBAAkB,EAAE,CAAA,uBAAA,CAAyB;IAC7CC,iBAAiB,EAAE,CAAA,sBAAA,CAAwB;IAC3CC,aAAa,EAAE,CAAA,0BAAA,CAA4B;IAC3CC,YAAY,EAAE,CAAA,yBAAA,CAA2B;IACzCC,YAAY,EAAE,CAAA,yBAAA,CAA2B;IACzCC,WAAW,EAAE,CAAA,wBAAA,CAAA;AACjB,CAAC;AACD,MAAMC,aAAa,GAAG,CAAA,gBAAA,EAAmB;IACrC,CAAA,IAAA,EAAOP,kBAAkB,CAACC,kBAAkB,CAAA,CAAA,CAAG;IAC/C,KAAK;IACL,SAAS;IACT,MAAM;IACN,MAAM;IACN,MAAM;IACN,QAAQ;IACR,KAAK;CACR,CAACO,IAAI,CAAC,GAAG,CAAC,CAAA,CAAA,CAAG;AACd;;CAEA,GAAI,MAAMC,aAAa,GAAA,WAAA,OAAGjB,oBAAA,EAAA,YAAA,MAAA;IAAA;CASzB,CAAC;AACF,MAAMkB,SAAS,GAAA,WAAA,OAAGnB,eAAA,EAAA;IAAAoB,UAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,MAAA,EAAA;QAAAH,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAG,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAajB,CAAC;AACF,MAAMC,gBAAgB,GAAA,WAAA,OAAG3B,eAAA,EAAA;IAAA4B,GAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,UAAA,EAAA;QAAAD,OAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAE,KAAA,EAAA;QAAAF,OAAA,EAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAH,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAUxB,CAAC;AACF;;CAEA,GAAI,MAAMM,aAAa,GAAA,WAAA,OAAGhC,eAAA,EAAA;IAAAM,IAAA,EAAA;QAAA2B,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAxB,UAAA,EAAA;QAAAyB,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;IAAA;IAAAzB,QAAA,EAAA;QAAAqB,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAI,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAA1B,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAmCzB,CAAC;AACF;;CAEA,GAAI,MAAM2B,cAAc,GAAA,WAAA,GAAGrD,mBAAA,EAAA;IAAAO,KAAA,EAAA;QAAA2B,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAO,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAb,OAAA,EAAA;QAAAQ,MAAA,EAAA;QAAAF,OAAA,EAAA;QAAAe,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAjC,OAAA,EAAA;QAAAQ,MAAA,EAAA;QAAAL,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAG,OAAA,EAAA;QAAA2B,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAzC,MAAA,EAAA;QAAA0C,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,KAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAjF,UAAA,EAAA;QAAAkF,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAA/E,QAAA,EAAA;QAAA8E,OAAA,EAAA;QAAAE,OAAA,EAAA;IAAA;AAAA,GAAA;IAAA9E,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAA+E,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAiC1B,CAAC;AACF,MAAMC,cAAc,GAAA,WAAA,OAAG1G,eAAA,EAAA;IAAA2G,OAAA,EAAA;QAAArD,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAkD,MAAA,EAAA;QAAAtD,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAhC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAA+E,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAOtB,CAAC;AACF;;CAEA,GAAI,MAAMI,cAAc,GAAA,WAAA,OAAG7G,eAAA,EAAA;IAAAQ,KAAA,EAAA;QAAAsG,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAA7E,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAA2E,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAA/H,UAAA,EAAA;QAAA0B,OAAA,EAAA;QAAAD,MAAA,EAAA;IAAA;IAAArB,QAAA,EAAA;QAAAsB,OAAA,EAAA;QAAAD,MAAA,EAAA;QAAAuG,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAA3H,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAA+E,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAA6C,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAA7C,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CA0B1B,CAAC;AAGS,uCAAuC+C,KAAK,IAAG;IACtD,aAAa;IACb,MAAMC,UAAU,GAAGvI,aAAa,CAAC,CAAC;IAClC,MAAMwI,MAAM,GAAGvI,SAAS,CAAC,CAAC;IAC1B,MAAMwI,UAAU,GAAG3H,aAAa,CAAC,CAAC;IAClC,MAAM4H,WAAW,GAAGvG,cAAc,CAAC,CAAC;IACpC,MAAMwG,WAAW,GAAGhD,cAAc,CAAC,CAAC;IACpC,MAAMiD,WAAW,GAAGpD,cAAc,CAAC,CAAC;IACpC,MAAMqD,aAAa,GAAGpI,gBAAgB,CAAC,CAAC;IACxC,MAAMqI,UAAU,GAAGR,KAAK,CAAChI,QAAQ;IACjCgI,KAAK,CAACnJ,IAAI,CAAC4J,SAAS,OAAG/J,mBAAY,EAACE,qBAAqB,CAACC,IAAI,EAAEoJ,UAAU,EAAEO,UAAU,GAAGN,MAAM,CAAClI,QAAQ,GAAGkI,MAAM,CAACtI,UAAU,EAAEoI,KAAK,CAACnJ,IAAI,CAAC4J,SAAS,CAAC;IACnJT,KAAK,CAAClJ,IAAI,CAAC2J,SAAS,OAAG/J,mBAAY,EAACE,qBAAqB,CAACE,IAAI,EAAEqJ,UAAU,CAACrJ,IAAI,EAAEyJ,aAAa,CAACP,KAAK,CAACU,OAAO,IAAI,KAAK,CAAC,EAAEJ,WAAW,CAACN,KAAK,CAACW,KAAK,IAAI,SAAS,CAAC,EAAEH,UAAU,GAAGL,UAAU,CAACnI,QAAQ,GAAGmI,UAAU,CAACvI,UAAU,EAAEoI,KAAK,CAAClJ,IAAI,CAAC2J,SAAS,CAAC;IAC9OT,KAAK,CAACjJ,KAAK,CAAC0J,SAAS,OAAG/J,mBAAY,EAACE,qBAAqB,CAACG,KAAK,EAAEqJ,WAAW,CAACrJ,KAAK,EAAEyJ,UAAU,GAAGJ,WAAW,CAACpI,QAAQ,GAAGoI,WAAW,CAACxI,UAAU,EAAEoI,KAAK,CAACjJ,KAAK,CAAC0J,SAAS,CAAC;IACvKT,KAAK,CAAChJ,KAAK,CAACyJ,SAAS,OAAG/J,mBAAY,EAACE,qBAAqB,CAACI,KAAK,EAAEqJ,WAAW,CAACrJ,KAAK,EAAEwJ,UAAU,GAAGH,WAAW,CAACrI,QAAQ,GAAGqI,WAAW,CAACzI,UAAU,EAAEoI,KAAK,CAAChJ,KAAK,CAACyJ,SAAS,CAAC;IACvK,OAAOT,KAAK;AAChB,CAAC"}
1	+ {"version":3,"sources":["useColorSliderStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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 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 // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(colorSliderClassNames.root, rootStyles, isVertical ? styles.vertical : styles.horizontal, state.root.className);\n // eslint-disable-next-line react-hooks/immutability\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 // eslint-disable-next-line react-hooks/immutability\n state.thumb.className = mergeClasses(colorSliderClassNames.thumb, thumbStyles.thumb, isVertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);\n // eslint-disable-next-line react-hooks/immutability\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 CHANGED Viewed

@@ -195,7 +195,6 @@ const useShapeStyles = (0, _react.makeStyles)({
     }
 });
 const useColorSliderStyles_unstable = (state)=>{
-    'use no memo';
     const rootStyles = useRootStyles();
     const styles = useStyles();
     const railStyles = useRailStyles();
@@ -204,9 +203,13 @@ const useColorSliderStyles_unstable = (state)=>{
     const shapeStyles = useShapeStyles();
     const channelStyles = useChannelStyles();
     const isVertical = state.vertical;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(colorSliderClassNames.root, rootStyles, isVertical ? styles.vertical : styles.horizontal, state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.rail.className = (0, _react.mergeClasses)(colorSliderClassNames.rail, railStyles.rail, channelStyles[state.channel || 'hue'], shapeStyles[state.shape || 'rounded'], isVertical ? railStyles.vertical : railStyles.horizontal, state.rail.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.thumb.className = (0, _react.mergeClasses)(colorSliderClassNames.thumb, thumbStyles.thumb, isVertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.input.className = (0, _react.mergeClasses)(colorSliderClassNames.input, inputStyles.input, isVertical ? inputStyles.vertical : inputStyles.horizontal, state.input.className);
     return state;
 };

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":["'use client';\n\nimport { 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":"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"}
1	+ {"version":3,"sources":["../src/components/ColorSlider/useColorSliderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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 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 // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n colorSliderClassNames.root,\n rootStyles,\n isVertical ? styles.vertical : styles.horizontal,\n state.root.className,\n );\n\n // eslint-disable-next-line react-hooks/immutability\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 // eslint-disable-next-line react-hooks/immutability\n state.thumb.className = mergeClasses(\n colorSliderClassNames.thumb,\n thumbStyles.thumb,\n isVertical ? thumbStyles.vertical : thumbStyles.horizontal,\n state.thumb.className,\n );\n\n // eslint-disable-next-line react-hooks/immutability\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":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-color-picker",
-  "version": "9.2.16",
+  "version": "9.2.18",
   "description": "ColorPicker component for Fluent UI React.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -19,12 +19,12 @@
   "license": "MIT",
   "dependencies": {
     "@ctrl/tinycolor": "^3.3.4",
-    "@fluentui/react-context-selector": "^9.2.16",
-    "@fluentui/react-jsx-runtime": "^9.4.2",
+    "@fluentui/react-context-selector": "^9.2.18",
+    "@fluentui/react-jsx-runtime": "^9.4.4",
     "@fluentui/react-shared-contexts": "^9.26.2",
-    "@fluentui/react-tabster": "^9.26.14",
+    "@fluentui/react-tabster": "^9.26.16",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-utilities": "^9.26.3",
+    "@fluentui/react-utilities": "^9.26.5",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },