@fluentui/react-color-picker 9.2.19 → 9.3.0

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

@@ -9,15 +9,15 @@ Object.defineProperty(exports, "useAlphaSliderState_unstable", {
         return useAlphaSliderState_unstable;
     }
 });
-const _tinycolor = require("@ctrl/tinycolor");
 const _reactutilities = require("@fluentui/react-utilities");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
-const _useAlphaSliderStylesstyles = require("./useAlphaSliderStyles.styles");
-const _colorPicker = require("../../contexts/colorPicker");
-const _constants = require("../../utils/constants");
-const _getPercent = require("../../utils/getPercent");
-const _alphaSliderUtils = require("./alphaSliderUtils");
-const _createHsvColor = require("../../utils/createHsvColor");
+const _AlphaSliderconstants = require("./AlphaSlider.constants.cjs");
+const _colorPicker = require("../../contexts/colorPicker.cjs");
+const _constants = require("../../utils/constants.cjs");
+const _getPercent = require("../../utils/getPercent.cjs");
+const _alphaSliderUtils = require("./alphaSliderUtils.cjs");
+const _createHsvColor = require("../../utils/createHsvColor.cjs");
+const _createHslColor = require("../../utils/createHslColor.cjs");
 const useAlphaSliderState_unstable = (state, props)=>{
     var _props_defaultColor;
     const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
@@ -25,7 +25,7 @@ const useAlphaSliderState_unstable = (state, props)=>{
     const colorFromContext = (0, _colorPicker.useColorPickerContextValue_unstable)((ctx)=>ctx.color);
     const { color, onChange = onChangeFromContext, transparency = false, vertical = false } = props;
     const hsvColor = color || colorFromContext;
-    const hslColor = (0, _tinycolor.tinycolor)(hsvColor).toHsl();
+    const hslColor = (0, _createHslColor.createHslColor)(hsvColor);
     const [currentValue, setCurrentValue] = (0, _reactutilities.useControllableState)({
         defaultState: (0, _alphaSliderUtils.calculateTransparencyValue)(transparency, (_props_defaultColor = props.defaultColor) === null || _props_defaultColor === void 0 ? void 0 : _props_defaultColor.a),
         state: (0, _alphaSliderUtils.calculateTransparencyValue)(transparency, hsvColor === null || hsvColor === void 0 ? void 0 : hsvColor.a),
@@ -50,10 +50,10 @@ const useAlphaSliderState_unstable = (state, props)=>{
     });
     const sliderDirection = (0, _alphaSliderUtils.getSliderDirection)(dir, vertical, transparency);
     const rootVariables = {
-        [_useAlphaSliderStylesstyles.alphaSliderCSSVars.sliderDirectionVar]: sliderDirection,
-        [_useAlphaSliderStylesstyles.alphaSliderCSSVars.sliderProgressVar]: `${valuePercent}%`,
-        [_useAlphaSliderStylesstyles.alphaSliderCSSVars.thumbColorVar]: `hsla(${hslColor.h} ${hslColor.s * 100}%, ${hslColor.l * 100}%, ${hslColor.a})`,
-        [_useAlphaSliderStylesstyles.alphaSliderCSSVars.railColorVar]: `hsl(${hslColor.h} ${hslColor.s * 100}%, ${hslColor.l * 100}%)`
+        [_AlphaSliderconstants.alphaSliderCSSVars.sliderDirectionVar]: sliderDirection,
+        [_AlphaSliderconstants.alphaSliderCSSVars.sliderProgressVar]: `${valuePercent}%`,
+        [_AlphaSliderconstants.alphaSliderCSSVars.thumbColorVar]: `hsla(${hslColor.h}, ${hslColor.s * 100}%, ${hslColor.l * 100}%, ${hslColor.a})`,
+        [_AlphaSliderconstants.alphaSliderCSSVars.railColorVar]: `hsl(${hslColor.h}, ${hslColor.s * 100}%, ${hslColor.l * 100}%)`
     };
     // Root props
     // eslint-disable-next-line react-hooks/immutability

package/lib-commonjs/components/AlphaSlider/useAlphaSliderState.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AlphaSlider/useAlphaSliderState.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { clamp, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { alphaSliderCSSVars } from './AlphaSlider.constants';\nimport type { AlphaSliderState, AlphaSliderProps } from './AlphaSlider.types';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\nimport { MIN, MAX } from '../../utils/constants';\nimport { getPercent } from '../../utils/getPercent';\nimport { adjustToTransparency, calculateTransparencyValue, getSliderDirection } from './alphaSliderUtils';\nimport { createHsvColor } from '../../utils/createHsvColor';\nimport { createHslColor } from '../../utils/createHslColor';\n\nexport const useAlphaSliderState_unstable = (state: AlphaSliderState, props: AlphaSliderProps): AlphaSliderState => {\n  const { dir } = useFluent();\n  const onChangeFromContext = useColorPickerContextValue_unstable(ctx => ctx.requestChange);\n  const colorFromContext = useColorPickerContextValue_unstable(ctx => ctx.color);\n  const { color, onChange = onChangeFromContext, transparency = false, vertical = false } = props;\n  const hsvColor = color || colorFromContext;\n  const hslColor = createHslColor(hsvColor);\n\n  const [currentValue, setCurrentValue] = useControllableState({\n    defaultState: calculateTransparencyValue(transparency, props.defaultColor?.a),\n    state: calculateTransparencyValue(transparency, hsvColor?.a),\n    initialState: adjustToTransparency(100, transparency),\n  });\n\n  const clampedValue = clamp(currentValue, MIN, MAX);\n  const valuePercent = getPercent(clampedValue, MIN, MAX);\n\n  const inputOnChange = state.input.onChange;\n\n  const _onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(event => {\n    const newValue = adjustToTransparency(Number(event.target.value), transparency);\n    const newColor = createHsvColor({ ...hsvColor, a: newValue / 100 });\n    setCurrentValue(newValue);\n    inputOnChange?.(event);\n    onChange?.(event, { type: 'change', event, color: newColor });\n  });\n\n  const sliderDirection = getSliderDirection(dir, vertical, transparency);\n\n  const rootVariables = {\n    [alphaSliderCSSVars.sliderDirectionVar]: sliderDirection,\n    [alphaSliderCSSVars.sliderProgressVar]: `${valuePercent}%`,\n    [alphaSliderCSSVars.thumbColorVar]: `hsla(${hslColor.h}, ${hslColor.s * 100}%, ${hslColor.l * 100}%, ${\n      hslColor.a\n    })`,\n    [alphaSliderCSSVars.railColorVar]: `hsl(${hslColor.h}, ${hslColor.s * 100}%, ${hslColor.l * 100}%)`,\n  };\n\n  // Root props\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.style = {\n    ...rootVariables,\n    ...state.root.style,\n  };\n\n  // Input Props\n  // eslint-disable-next-line react-hooks/immutability\n  state.input.value = clampedValue;\n  // eslint-disable-next-line react-hooks/immutability\n  state.input.onChange = _onChange;\n\n  return state;\n};\n"],"names":["clamp","useControllableState","useEventCallback","useFluent_unstable","useFluent","alphaSliderCSSVars","useColorPickerContextValue_unstable","MIN","MAX","getPercent","adjustToTransparency","calculateTransparencyValue","getSliderDirection","createHsvColor","createHslColor","useAlphaSliderState_unstable","state","props","dir","onChangeFromContext","ctx","requestChange","colorFromContext","color","onChange","transparency","vertical","hsvColor","hslColor","currentValue","setCurrentValue","defaultState","defaultColor","a","initialState","clampedValue","valuePercent","inputOnChange","input","_onChange","event","newValue","Number","target","value","newColor","type","sliderDirection","rootVariables","sliderDirectionVar","sliderProgressVar","thumbColorVar","h","s","l","railColorVar","root","style"],"mappings":"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"}

package/lib-commonjs/components/AlphaSlider/{useAlphaSliderStyles.styles.js → useAlphaSliderStyles.styles.cjs}

@@ -10,9 +10,6 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    alphaSliderCSSVars: function() {
-        return alphaSliderCSSVars;
-    },
     alphaSliderClassNames: function() {
         return alphaSliderClassNames;
     },
@@ -21,7 +18,7 @@ _export(exports, {
     }
 });
 const _react = require("@griffel/react");
-const _useColorSliderStylesstyles = require("../ColorSlider/useColorSliderStyles.styles");
+const _useColorSliderStylesstyles = require("../ColorSlider/useColorSliderStyles.styles.cjs");
 const TRANSPARENT_IMAGE_URL = 'https://fabricweb.azureedge.net/fabric-website/assets/images/transparent-pattern.png';
 const alphaSliderClassNames = {
     root: 'fui-AlphaSlider',
@@ -29,12 +26,6 @@ const alphaSliderClassNames = {
     thumb: 'fui-AlphaSlider__thumb',
     input: 'fui-AlphaSlider__input'
 };
-const alphaSliderCSSVars = {
-    sliderDirectionVar: `--fui-AlphaSlider--direction`,
-    sliderProgressVar: `--fui-AlphaSlider--progress`,
-    thumbColorVar: `--fui-AlphaSlider__thumb--color`,
-    railColorVar: `--fui-AlphaSlider__rail--color`
-};
 /**
  * Styles for the root slot
  */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({

package/lib-commonjs/components/AlphaSlider/useAlphaSliderStyles.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useAlphaSliderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from \"@griffel/react\";\nimport { tokens } from \"@fluentui/react-theme\";\nimport { useColorSliderStyles_unstable } from \"../ColorSlider/useColorSliderStyles.styles.js\";\nimport { alphaSliderCSSVars } from \"./AlphaSlider.constants.js\";\nconst TRANSPARENT_IMAGE_URL = 'https://fabricweb.azureedge.net/fabric-website/assets/images/transparent-pattern.png';\nexport const alphaSliderClassNames = {\n    root: 'fui-AlphaSlider',\n    rail: 'fui-AlphaSlider__rail',\n    thumb: 'fui-AlphaSlider__thumb',\n    input: 'fui-AlphaSlider__input'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    rail: {\n        border: `1px solid ${tokens.colorNeutralStroke1}`,\n        backgroundImage: `linear-gradient(var(${alphaSliderCSSVars.sliderDirectionVar}), transparent, var(${alphaSliderCSSVars.railColorVar})), url(${TRANSPARENT_IMAGE_URL})`\n    }\n});\n/**\n * Styles for the thumb slot\n */ const useThumbStyles = makeStyles({\n    thumb: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        '::before': {\n            backgroundColor: `var(${alphaSliderCSSVars.thumbColorVar})`\n        }\n    },\n    horizontal: {\n        transform: 'translateX(-50%)',\n        left: `var(${alphaSliderCSSVars.sliderProgressVar})`\n    },\n    vertical: {\n        transform: 'translateY(50%)',\n        bottom: `var(${alphaSliderCSSVars.sliderProgressVar})`\n    }\n});\n/**\n * Apply styling to the AlphaSlider slots based on the state\n */ export const useAlphaSliderStyles_unstable = (state)=>{\n    const styles = useStyles();\n    const thumbStyles = useThumbStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(alphaSliderClassNames.root, state.root.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.input.className = mergeClasses(alphaSliderClassNames.input, state.input.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.rail.className = mergeClasses(alphaSliderClassNames.rail, styles.rail, state.rail.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.thumb.className = mergeClasses(alphaSliderClassNames.thumb, thumbStyles.thumb, state.vertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.thumb.className = mergeClasses(alphaSliderClassNames.thumb, thumbStyles.thumb, state.vertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);\n    useColorSliderStyles_unstable(state);\n    return state;\n};\n"],"names":["__styles","mergeClasses","tokens","useColorSliderStyles_unstable","alphaSliderCSSVars","TRANSPARENT_IMAGE_URL","alphaSliderClassNames","root","rail","thumb","input","useStyles","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bcmaq0h","d","p","useThumbStyles","De3pzq","cmx5o7","horizontal","Bz10aip","oyh7mz","vertical","B5kzvoi","useAlphaSliderStyles_unstable","state","styles","thumbStyles","className"],"mappings":"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"}

package/lib-commonjs/components/AlphaSlider/{useAlphaSliderStyles.styles.raw.js → useAlphaSliderStyles.styles.raw.cjs}

@@ -10,9 +10,6 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    alphaSliderCSSVars: function() {
-        return alphaSliderCSSVars;
-    },
     alphaSliderClassNames: function() {
         return alphaSliderClassNames;
     },
@@ -22,7 +19,8 @@ _export(exports, {
 });
 const _react = require("@griffel/react");
 const _reacttheme = require("@fluentui/react-theme");
-const _useColorSliderStylesstyles = require("../ColorSlider/useColorSliderStyles.styles");
+const _useColorSliderStylesstyles = require("../ColorSlider/useColorSliderStyles.styles.cjs");
+const _AlphaSliderconstants = require("./AlphaSlider.constants.cjs");
 const TRANSPARENT_IMAGE_URL = 'https://fabricweb.azureedge.net/fabric-website/assets/images/transparent-pattern.png';
 const alphaSliderClassNames = {
     root: 'fui-AlphaSlider',
@@ -30,18 +28,12 @@ const alphaSliderClassNames = {
     thumb: 'fui-AlphaSlider__thumb',
     input: 'fui-AlphaSlider__input'
 };
-const alphaSliderCSSVars = {
-    sliderDirectionVar: `--fui-AlphaSlider--direction`,
-    sliderProgressVar: `--fui-AlphaSlider--progress`,
-    thumbColorVar: `--fui-AlphaSlider__thumb--color`,
-    railColorVar: `--fui-AlphaSlider__rail--color`
-};
 /**
  * Styles for the root slot
  */ const useStyles = (0, _react.makeStyles)({
     rail: {
         border: `1px solid ${_reacttheme.tokens.colorNeutralStroke1}`,
-        backgroundImage: `linear-gradient(var(${alphaSliderCSSVars.sliderDirectionVar}), transparent, var(${alphaSliderCSSVars.railColorVar})), url(${TRANSPARENT_IMAGE_URL})`
+        backgroundImage: `linear-gradient(var(${_AlphaSliderconstants.alphaSliderCSSVars.sliderDirectionVar}), transparent, var(${_AlphaSliderconstants.alphaSliderCSSVars.railColorVar})), url(${TRANSPARENT_IMAGE_URL})`
     }
 });
 /**
@@ -50,16 +42,16 @@ const alphaSliderCSSVars = {
     thumb: {
         backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
         '::before': {
-            backgroundColor: `var(${alphaSliderCSSVars.thumbColorVar})`
+            backgroundColor: `var(${_AlphaSliderconstants.alphaSliderCSSVars.thumbColorVar})`
         }
     },
     horizontal: {
         transform: 'translateX(-50%)',
-        left: `var(${alphaSliderCSSVars.sliderProgressVar})`
+        left: `var(${_AlphaSliderconstants.alphaSliderCSSVars.sliderProgressVar})`
     },
     vertical: {
         transform: 'translateY(50%)',
-        bottom: `var(${alphaSliderCSSVars.sliderProgressVar})`
+        bottom: `var(${_AlphaSliderconstants.alphaSliderCSSVars.sliderProgressVar})`
     }
 });
 const useAlphaSliderStyles_unstable = (state)=>{

package/lib-commonjs/components/AlphaSlider/useAlphaSliderStyles.styles.raw.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AlphaSlider/useAlphaSliderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useColorSliderStyles_unstable } from '../ColorSlider/useColorSliderStyles.styles';\nimport type { AlphaSliderSlots, AlphaSliderState } from './AlphaSlider.types';\nimport { alphaSliderCSSVars } from './AlphaSlider.constants';\n\nconst TRANSPARENT_IMAGE_URL = 'https://fabricweb.azureedge.net/fabric-website/assets/images/transparent-pattern.png';\n\nexport const alphaSliderClassNames: SlotClassNames<AlphaSliderSlots> = {\n  root: 'fui-AlphaSlider',\n  rail: 'fui-AlphaSlider__rail',\n  thumb: 'fui-AlphaSlider__thumb',\n  input: 'fui-AlphaSlider__input',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  rail: {\n    border: `1px solid ${tokens.colorNeutralStroke1}`,\n    backgroundImage: `linear-gradient(var(${alphaSliderCSSVars.sliderDirectionVar}), transparent, var(${alphaSliderCSSVars.railColorVar})), url(${TRANSPARENT_IMAGE_URL})`,\n  },\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n  thumb: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    '::before': {\n      backgroundColor: `var(${alphaSliderCSSVars.thumbColorVar})`,\n    },\n  },\n  horizontal: {\n    transform: 'translateX(-50%)',\n    left: `var(${alphaSliderCSSVars.sliderProgressVar})`,\n  },\n  vertical: {\n    transform: 'translateY(50%)',\n    bottom: `var(${alphaSliderCSSVars.sliderProgressVar})`,\n  },\n});\n\n/**\n * Apply styling to the AlphaSlider slots based on the state\n */\nexport const useAlphaSliderStyles_unstable = (state: AlphaSliderState): AlphaSliderState => {\n  const styles = useStyles();\n  const thumbStyles = useThumbStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(alphaSliderClassNames.root, state.root.className);\n  // eslint-disable-next-line react-hooks/immutability\n  state.input.className = mergeClasses(alphaSliderClassNames.input, state.input.className);\n  // eslint-disable-next-line react-hooks/immutability\n  state.rail.className = mergeClasses(alphaSliderClassNames.rail, styles.rail, state.rail.className);\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.thumb.className = mergeClasses(\n    alphaSliderClassNames.thumb,\n    thumbStyles.thumb,\n    state.vertical ? thumbStyles.vertical : thumbStyles.horizontal,\n    state.thumb.className,\n  );\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.thumb.className = mergeClasses(\n    alphaSliderClassNames.thumb,\n    thumbStyles.thumb,\n    state.vertical ? thumbStyles.vertical : thumbStyles.horizontal,\n    state.thumb.className,\n  );\n\n  useColorSliderStyles_unstable(state);\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","useColorSliderStyles_unstable","alphaSliderCSSVars","TRANSPARENT_IMAGE_URL","alphaSliderClassNames","root","rail","thumb","input","useStyles","border","colorNeutralStroke1","backgroundImage","sliderDirectionVar","railColorVar","useThumbStyles","backgroundColor","colorNeutralBackground1","thumbColorVar","horizontal","transform","left","sliderProgressVar","vertical","bottom","useAlphaSliderStyles_unstable","state","styles","thumbStyles","className"],"mappings":"AAAA;;;;;;;;;;;;IAWaM,qBAAAA;;;IAwCAqB,6BAAAA;;;;uBAjD4B,iBAAiB;4BACnC,wBAAwB;4CAED,gDAA6C;sCAExD,6BAA0B;AAE7D,MAAMtB,wBAAwB;AAEvB,8BAAgE;IACrEE,MAAM;IACNC,MAAM;IACNC,OAAO;IACPC,OAAO;AACT,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYX,iBAAAA,EAAW;IAC3BQ,MAAM;QACJI,QAAQ,CAAC,UAAU,EAAEV,kBAAAA,CAAOW,mBAAmB,EAAE;QACjDC,iBAAiB,CAAC,oBAAoB,EAAEV,wCAAAA,CAAmBW,kBAAkB,CAAC,oBAAoB,EAAEX,wCAAAA,CAAmBY,YAAY,CAAC,QAAQ,EAAEX,sBAAsB,CAAC,CAAC;IACxK;AACF;AAEA;;CAEC,GACD,MAAMY,qBAAiBjB,iBAAAA,EAAW;IAChCS,OAAO;QACLS,iBAAiBhB,kBAAAA,CAAOiB,uBAAuB;QAC/C,YAAY;YACVD,iBAAiB,CAAC,IAAI,EAAEd,wCAAAA,CAAmBgB,aAAa,CAAC,CAAC,CAAC;QAC7D;IACF;IACAC,YAAY;QACVC,WAAW;QACXC,MAAM,CAAC,IAAI,EAAEnB,wCAAAA,CAAmBoB,iBAAiB,CAAC,CAAC,CAAC;IACtD;IACAC,UAAU;QACRH,WAAW;QACXI,QAAQ,CAAC,IAAI,EAAEtB,wCAAAA,CAAmBoB,iBAAiB,CAAC,CAAC,CAAC;IACxD;AACF;AAKO,sCAAsC,CAACI;IAC5C,MAAMC,SAASlB;IACf,MAAMmB,cAAcb;IACpB,oDAAoD;IACpDW,MAAMrB,IAAI,CAACwB,SAAS,GAAG9B,uBAAAA,EAAaK,sBAAsBC,IAAI,EAAEqB,MAAMrB,IAAI,CAACwB,SAAS;IACpF,oDAAoD;IACpDH,MAAMlB,KAAK,CAACqB,SAAS,OAAG9B,mBAAAA,EAAaK,sBAAsBI,KAAK,EAAEkB,MAAMlB,KAAK,CAACqB,SAAS;IACvF,oDAAoD;IACpDH,MAAMpB,IAAI,CAACuB,SAAS,OAAG9B,mBAAAA,EAAaK,sBAAsBE,IAAI,EAAEqB,OAAOrB,IAAI,EAAEoB,MAAMpB,IAAI,CAACuB,SAAS;IAEjG,oDAAoD;IACpDH,MAAMnB,KAAK,CAACsB,SAAS,OAAG9B,mBAAAA,EACtBK,sBAAsBG,KAAK,EAC3BqB,YAAYrB,KAAK,EACjBmB,MAAMH,QAAQ,GAAGK,YAAYL,QAAQ,GAAGK,YAAYT,UAAU,EAC9DO,MAAMnB,KAAK,CAACsB,SAAS;IAGvB,oDAAoD;IACpDH,MAAMnB,KAAK,CAACsB,SAAS,OAAG9B,mBAAAA,EACtBK,sBAAsBG,KAAK,EAC3BqB,YAAYrB,KAAK,EACjBmB,MAAMH,QAAQ,GAAGK,YAAYL,QAAQ,GAAGK,YAAYT,UAAU,EAC9DO,MAAMnB,KAAK,CAACsB,SAAS;QAGvB5B,yDAAAA,EAA8ByB;IAC9B,OAAOA;AACT,EAAE"}

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

@@ -11,9 +11,9 @@ Object.defineProperty(exports, "ColorArea", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _useColorArea = require("./useColorArea");
-const _renderColorArea = require("./renderColorArea");
-const _useColorAreaStylesstyles = require("./useColorAreaStyles.styles");
+const _useColorArea = require("./useColorArea.cjs");
+const _renderColorArea = require("./renderColorArea.cjs");
+const _useColorAreaStylesstyles = require("./useColorAreaStyles.styles.cjs");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const ColorArea = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useColorArea.useColorArea_unstable)(props, ref);

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorArea/ColorArea.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useColorArea_unstable } from './useColorArea';\nimport { renderColorArea_unstable } from './renderColorArea';\nimport { useColorAreaStyles_unstable } from './useColorAreaStyles.styles';\nimport type { ColorAreaProps } from './ColorArea.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ColorArea component\n */\nexport const ColorArea: ForwardRefComponent<ColorAreaProps> = React.forwardRef((props, ref) => {\n  const state = useColorArea_unstable(props, ref);\n\n  useColorAreaStyles_unstable(state);\n  useCustomStyleHook_unstable('useColorAreaStyles_unstable')(state);\n\n  return renderColorArea_unstable(state);\n});\n\nColorArea.displayName = 'ColorArea';\n"],"names":["React","useColorArea_unstable","renderColorArea_unstable","useColorAreaStyles_unstable","useCustomStyleHook_unstable","ColorArea","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;8BAEO,iBAAiB;iCACd,oBAAoB;0CACjB,8BAA8B;qCAE9B,kCAAkC;AAKvE,MAAMK,YAAAA,WAAAA,GAAiDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,YAAQR,mCAAAA,EAAsBM,OAAOC;QAE3CL,qDAAAA,EAA4BM;QAC5BL,gDAAAA,EAA4B,+BAA+BK;IAE3D,WAAOP,yCAAAA,EAAyBO;AAClC,GAAG;AAEHJ,UAAUK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/ColorArea/ColorArea.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useColorArea_unstable } from './useColorArea';\nimport { renderColorArea_unstable } from './renderColorArea';\nimport { useColorAreaStyles_unstable } from './useColorAreaStyles.styles';\nimport type { ColorAreaProps } from './ColorArea.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ColorArea component\n */\nexport const ColorArea: ForwardRefComponent<ColorAreaProps> = React.forwardRef((props, ref) => {\n  const state = useColorArea_unstable(props, ref);\n\n  useColorAreaStyles_unstable(state);\n  useCustomStyleHook_unstable('useColorAreaStyles_unstable')(state);\n\n  return renderColorArea_unstable(state);\n});\n\nColorArea.displayName = 'ColorArea';\n"],"names":["React","useColorArea_unstable","renderColorArea_unstable","useColorAreaStyles_unstable","useCustomStyleHook_unstable","ColorArea","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;8BAEO,oBAAiB;iCACd,uBAAoB;0CACjB,iCAA8B;qCAE9B,kCAAkC;AAKvE,MAAMK,YAAAA,WAAAA,GAAiDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,YAAQR,mCAAAA,EAAsBM,OAAOC;QAE3CL,qDAAAA,EAA4BM;QAC5BL,gDAAAA,EAA4B,+BAA+BK;IAE3D,WAAOP,yCAAAA,EAAyBO;AAClC,GAAG;AAEHJ,UAAUK,WAAW,GAAG"}

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "colorAreaCSSVars", {
+    enumerable: true,
+    get: function() {
+        return colorAreaCSSVars;
+    }
+});
+const colorAreaCSSVars = {
+    areaXProgressVar: `--fui-AreaX--progress`,
+    areaYProgressVar: `--fui-AreaY--progress`,
+    thumbColorVar: `--fui-Area__thumb--color`,
+    mainColorVar: `--fui-Area--main-color`
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorArea/ColorArea.constants.ts"],"sourcesContent":["export 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"],"names":["colorAreaCSSVars","areaXProgressVar","areaYProgressVar","thumbColorVar","mainColorVar"],"mappings":";;;;;;;;;;AAAO,MAAMA,mBAAmB;IAC9BC,kBAAkB,CAAC,qBAAqB,CAAC;IACzCC,kBAAkB,CAAC,qBAAqB,CAAC;IACzCC,eAAe,CAAC,wBAAwB,CAAC;IACzCC,cAAc,CAAC,sBAAsB,CAAC;AACxC,EAAE"}

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

@@ -1,5 +1,5 @@
 /**
- * State used in rendering ColorArea
+ * ColorArea Base State
  */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorArea/ColorArea.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentState, Slot, EventHandler, EventData, ComponentProps } from '@fluentui/react-utilities';\nimport type { HsvColor } from '../../types/color';\nimport type { ColorPickerProps } from '../ColorPicker/ColorPicker.types';\n\nexport type ColorAreaOnColorChangeData = EventData<'change', React.SyntheticEvent | PointerEvent> & {\n  color: HsvColor;\n};\n\nexport type ColorAreaSlots = {\n  root: NonNullable<Slot<'div'>>;\n  thumb?: NonNullable<Slot<'div'>>;\n  inputX?: NonNullable<Slot<'input'>>;\n  inputY?: NonNullable<Slot<'input'>>;\n};\n\n/**\n * ColorArea Props\n */\nexport type ColorAreaProps = Omit<ComponentProps<Partial<ColorAreaSlots>>, 'color' | 'onChange'> &\n  Pick<ColorPickerProps, 'shape'> & {\n    /**\n     * The current color of the ColorArea.\n     */\n    color?: HsvColor;\n\n    /**\n     * The starting value for an uncontrolled ColorArea.\n     */\n    defaultColor?: HsvColor;\n\n    /**\n     * Triggers a callback when the value has been changed. This will be called on every individual step.\n     */\n    onChange?: EventHandler<ColorAreaOnColorChangeData>;\n  };\n\n/**\n * State used in rendering ColorArea\n */\nexport type ColorAreaState = ComponentState<Required<ColorAreaSlots>> & Pick<ColorAreaProps, 'color' | 'shape'>;\n"],"names":[],"mappings":"AAqCA;;CAEC,GACD,WAAgH"}
+{"version":3,"sources":["../src/components/ColorArea/ColorArea.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentState, Slot, EventHandler, EventData, ComponentProps } from '@fluentui/react-utilities';\nimport type { HsvColor } from '../../types/color';\nimport type { ColorPickerProps } from '../ColorPicker/ColorPicker.types';\n\nexport type ColorAreaOnColorChangeData = EventData<'change', React.SyntheticEvent | PointerEvent> & {\n  color: HsvColor;\n};\n\nexport type ColorAreaSlots = {\n  root: NonNullable<Slot<'div'>>;\n  thumb?: NonNullable<Slot<'div'>>;\n  inputX?: NonNullable<Slot<'input'>>;\n  inputY?: NonNullable<Slot<'input'>>;\n};\n\n/**\n * ColorArea Props\n */\nexport type ColorAreaProps = Omit<ComponentProps<Partial<ColorAreaSlots>>, 'color' | 'onChange'> &\n  Pick<ColorPickerProps, 'shape'> & {\n    /**\n     * The current color of the ColorArea.\n     */\n    color?: HsvColor;\n\n    /**\n     * The starting value for an uncontrolled ColorArea.\n     */\n    defaultColor?: HsvColor;\n\n    /**\n     * Triggers a callback when the value has been changed. This will be called on every individual step.\n     */\n    onChange?: EventHandler<ColorAreaOnColorChangeData>;\n  };\n\n/**\n * ColorArea Base Props\n */\nexport type ColorAreaBaseProps = Omit<ColorAreaProps, 'shape'>;\n\n/**\n * State used in rendering ColorArea\n */\nexport type ColorAreaState = ComponentState<Required<ColorAreaSlots>> & Pick<ColorAreaProps, 'color' | 'shape'>;\n\n/**\n * ColorArea Base State\n */\nexport type ColorAreaBaseState = ComponentState<Required<ColorAreaSlots>> & Pick<ColorAreaProps, 'color'>;\n"],"names":[],"mappings":"AA+CA;;CAEC,GACD,WAA0G"}

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

@@ -13,7 +13,7 @@ _export(exports, {
         return _ColorArea.ColorArea;
     },
     colorAreaCSSVars: function() {
-        return _useColorAreaStylesstyles.colorAreaCSSVars;
+        return _ColorAreaconstants.colorAreaCSSVars;
     },
     colorAreaClassNames: function() {
         return _useColorAreaStylesstyles.colorAreaClassNames;
@@ -21,6 +21,9 @@ _export(exports, {
     renderColorArea_unstable: function() {
         return _renderColorArea.renderColorArea_unstable;
     },
+    useColorAreaBase_unstable: function() {
+        return _useColorArea.useColorAreaBase_unstable;
+    },
     useColorAreaStyles_unstable: function() {
         return _useColorAreaStylesstyles.useColorAreaStyles_unstable;
     },
@@ -28,7 +31,8 @@ _export(exports, {
         return _useColorArea.useColorArea_unstable;
     }
 });
-const _ColorArea = require("./ColorArea");
-const _renderColorArea = require("./renderColorArea");
-const _useColorArea = require("./useColorArea");
-const _useColorAreaStylesstyles = require("./useColorAreaStyles.styles");
+const _ColorArea = require("./ColorArea.cjs");
+const _renderColorArea = require("./renderColorArea.cjs");
+const _useColorArea = require("./useColorArea.cjs");
+const _useColorAreaStylesstyles = require("./useColorAreaStyles.styles.cjs");
+const _ColorAreaconstants = require("./ColorArea.constants.cjs");

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorArea/index.ts"],"sourcesContent":["export { ColorArea } from './ColorArea';\nexport type {\n  ColorAreaBaseProps,\n  ColorAreaBaseState,\n  ColorAreaOnColorChangeData,\n  ColorAreaProps,\n  ColorAreaSlots,\n  ColorAreaState,\n} from './ColorArea.types';\nexport { renderColorArea_unstable } from './renderColorArea';\nexport { useColorAreaBase_unstable, useColorArea_unstable } from './useColorArea';\nexport { colorAreaClassNames, useColorAreaStyles_unstable } from './useColorAreaStyles.styles';\nexport { colorAreaCSSVars } from './ColorArea.constants';\n"],"names":["ColorArea","renderColorArea_unstable","useColorAreaBase_unstable","useColorArea_unstable","colorAreaClassNames","useColorAreaStyles_unstable","colorAreaCSSVars"],"mappings":";;;;;;;;;;;IAASA;mCAAS;;IAYTM;mDAAgB;;;eADhBF,6CAAmB;;;eAFnBH,yCAAwB;;;eACxBC,uCAAyB;;;eACJG,qDAA2B;;;eADrBF,mCAAqB;;;2BAV/B,iBAAc;iCASC,uBAAoB;8BACI,oBAAiB;0CACjB,iCAA8B;oCAC9D,2BAAwB"}

package/lib-commonjs/components/ColorArea/renderColorArea.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorArea/renderColorArea.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ColorAreaBaseState, ColorAreaSlots } from './ColorArea.types';\n\n/**\n * Render the final JSX of ColorArea\n */\nexport const renderColorArea_unstable = (state: ColorAreaBaseState): JSXElement => {\n  assertSlots<ColorAreaSlots>(state);\n\n  return (\n    <state.root>\n      <state.thumb>\n        <state.inputX />\n        <state.inputY />\n      </state.thumb>\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderColorArea_unstable","state","root","thumb","inputX","inputY"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,iCAAiC,CAACC;QACvCF,2BAAAA,EAA4BE;IAE5B,OAAA,WAAA,OACE,eAAA,EAACA,MAAMC,IAAI,EAAA;kBACT,WAAA,OAAA,gBAAA,EAACD,MAAME,KAAK,EAAA;;kCACV,eAAA,EAACF,MAAMG,MAAM,EAAA,CAAA;kCACb,eAAA,EAACH,MAAMI,MAAM,EAAA,CAAA;;;;AAIrB,EAAE"}

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

@@ -3,23 +3,31 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useColorArea_unstable", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useColorAreaBase_unstable: function() {
+        return useColorAreaBase_unstable;
+    },
+    useColorArea_unstable: function() {
         return useColorArea_unstable;
     }
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _tinycolor = require("@ctrl/tinycolor");
 const _reactutilities = require("@fluentui/react-utilities");
-const _useColorAreaStylesstyles = require("./useColorAreaStyles.styles");
+const _ColorAreaconstants = require("./ColorArea.constants.cjs");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const _reacttabster = require("@fluentui/react-tabster");
-const _constants = require("../../utils/constants");
-const _getCoordinates = require("../../utils/getCoordinates");
-const _colorPicker = require("../../contexts/colorPicker");
-const useColorArea_unstable = (props, ref)=>{
+const _constants = require("../../utils/constants.cjs");
+const _getCoordinates = require("../../utils/getCoordinates.cjs");
+const _colorPicker = require("../../contexts/colorPicker.cjs");
+const _createHslColor = require("../../utils/createHslColor.cjs");
+const useColorAreaBase_unstable = (props, ref)=>{
     const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
     const rootRef = _react.useRef(null);
     const xRef = _react.useRef(null);
@@ -27,8 +35,7 @@ const useColorArea_unstable = (props, ref)=>{
     const focusWithinRef = (0, _reacttabster.useFocusWithin)();
     const onChangeFromContext = (0, _colorPicker.useColorPickerContextValue_unstable)((ctx)=>ctx.requestChange);
     const colorFromContext = (0, _colorPicker.useColorPickerContextValue_unstable)((ctx)=>ctx.color);
-    const shapeFromContext = (0, _colorPicker.useColorPickerContextValue_unstable)((ctx)=>ctx.shape);
-    const { onChange = onChangeFromContext, shape = shapeFromContext, inputX, inputY, thumb, color, ...rest } = props;
+    const { onChange = onChangeFromContext, inputX, inputY, thumb, color, ...rest } = props;
     const [hsvColor, setColor] = (0, _reactutilities.useControllableState)({
         defaultState: props.defaultColor,
         state: color || colorFromContext,
@@ -132,13 +139,12 @@ const useColorArea_unstable = (props, ref)=>{
         });
     });
     const rootVariables = {
-        [_useColorAreaStylesstyles.colorAreaCSSVars.areaXProgressVar]: `${saturation}%`,
-        [_useColorAreaStylesstyles.colorAreaCSSVars.areaYProgressVar]: `${value}%`,
-        [_useColorAreaStylesstyles.colorAreaCSSVars.thumbColorVar]: (0, _tinycolor.tinycolor)(hsvColor).toRgbString(),
-        [_useColorAreaStylesstyles.colorAreaCSSVars.mainColorVar]: `hsl(${hsvColor.h}, 100%, 50%)`
+        [_ColorAreaconstants.colorAreaCSSVars.areaXProgressVar]: `${saturation}%`,
+        [_ColorAreaconstants.colorAreaCSSVars.areaYProgressVar]: `${value}%`,
+        [_ColorAreaconstants.colorAreaCSSVars.thumbColorVar]: (0, _createHslColor.createHslColorString)(hsvColor),
+        [_ColorAreaconstants.colorAreaCSSVars.mainColorVar]: `hsl(${hsvColor.h}, 100%, 50%)`
     };
     const state = {
-        shape,
         components: {
             inputX: 'input',
             inputY: 'input',
@@ -189,3 +195,12 @@ const useColorArea_unstable = (props, ref)=>{
     state.inputY.value = value;
     return state;
 };
+const useColorArea_unstable = (props, ref)=>{
+    const shapeFromContext = (0, _colorPicker.useColorPickerContextValue_unstable)((ctx)=>ctx.shape);
+    const { shape = shapeFromContext, ...rest } = props;
+    const state = {
+        ...useColorAreaBase_unstable(rest, ref),
+        shape
+    };
+    return state;
+};

package/lib-commonjs/components/ColorArea/useColorArea.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorArea/useColorArea.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useId, slot, useMergedRefs, mergeCallbacks, getIntrinsicElementProps } from '@fluentui/react-utilities';\nimport type { ColorAreaBaseProps, ColorAreaBaseState, ColorAreaProps, ColorAreaState } from './ColorArea.types';\nimport type { HsvColor } from '../../types/color';\nimport { colorAreaCSSVars } from './ColorArea.constants';\nimport { useEventCallback, useControllableState } from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { INITIAL_COLOR_HSV } from '../../utils/constants';\nimport { getCoordinates } from '../../utils/getCoordinates';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\nimport { createHslColorString } from '../../utils/createHslColor';\n\n/**\n * Create the state required to render unstyled ColorArea.\n *\n * The returned state can be modified with hooks before being passed to renderColorArea_unstable.\n *\n * @param props - props from this instance of ColorArea\n * @param ref - reference to root HTMLDivElement of ColorArea\n */\nexport const useColorAreaBase_unstable = (\n  props: ColorAreaBaseProps,\n  ref: React.Ref<HTMLDivElement>,\n): ColorAreaBaseState => {\n  const { targetDocument } = useFluent();\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const xRef = React.useRef<HTMLInputElement>(null);\n  const yRef = React.useRef<HTMLInputElement>(null);\n  const focusWithinRef = useFocusWithin();\n  const onChangeFromContext = useColorPickerContextValue_unstable(ctx => ctx.requestChange);\n  const colorFromContext = useColorPickerContextValue_unstable(ctx => ctx.color);\n\n  const {\n    onChange = onChangeFromContext as unknown as ColorAreaProps['onChange'],\n    // Slots\n    inputX,\n    inputY,\n    thumb,\n    color,\n    ...rest\n  } = props;\n\n  const [hsvColor, setColor] = useControllableState<HsvColor>({\n    defaultState: props.defaultColor,\n    state: color || colorFromContext,\n    initialState: INITIAL_COLOR_HSV,\n  });\n  const saturation = Math.round(hsvColor.s * 100);\n  const value = Math.round(hsvColor.v * 100);\n\n  const [activeAxis, setActiveAxis] = React.useState<'x' | 'y' | null>(null);\n\n  const requestColorChange = useEventCallback((event: PointerEvent) => {\n    if (!rootRef.current) {\n      return;\n    }\n\n    const coordinates = getCoordinates(rootRef.current, event);\n    const newColor: HsvColor = {\n      ...hsvColor,\n      s: coordinates.x,\n      v: coordinates.y,\n    };\n\n    setColor(newColor);\n    onChange?.(event, {\n      type: 'change',\n      event,\n      color: newColor,\n    });\n  });\n\n  const handleDocumentPointerMove = React.useCallback(\n    (event: PointerEvent) => {\n      requestColorChange(event);\n    },\n    [requestColorChange],\n  );\n\n  const handleDocumentPointerUp = useEventCallback(() => {\n    targetDocument?.removeEventListener('pointermove', handleDocumentPointerMove);\n  });\n\n  const handleRootOnPointerDown: React.PointerEventHandler<HTMLDivElement> = useEventCallback(event => {\n    event.stopPropagation();\n    event.preventDefault();\n\n    requestColorChange(event.nativeEvent);\n\n    targetDocument?.addEventListener('pointermove', handleDocumentPointerMove);\n    targetDocument?.addEventListener('pointerup', handleDocumentPointerUp, { once: true });\n  });\n\n  const handleInputOnChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(event => {\n    const targetValue = Number(event.target.value) / 100;\n    const newColor: HsvColor = {\n      ...hsvColor,\n      ...(event.target === xRef.current && { s: targetValue }),\n      ...(event.target === yRef.current && { v: targetValue }),\n    };\n\n    setColor(newColor);\n    onChange?.(event, { type: 'change', event, color: newColor });\n  });\n\n  const handleRootOnKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    let deltaX = 0;\n    let deltaY = 0;\n    let axis: 'x' | 'y' = 'x';\n\n    switch (event.key) {\n      case 'ArrowUp':\n        event.preventDefault();\n\n        axis = 'y';\n        deltaY = 1;\n\n        break;\n      case 'ArrowDown':\n        event.preventDefault();\n\n        axis = 'y';\n        deltaY = -1;\n\n        break;\n      case 'ArrowLeft':\n        event.preventDefault();\n\n        axis = 'x';\n        deltaX = -1;\n\n        break;\n      case 'ArrowRight':\n        event.preventDefault();\n\n        axis = 'x';\n        deltaX = 1;\n\n        break;\n    }\n\n    if (deltaX === 0 && deltaY === 0) {\n      return;\n    }\n\n    const newColor: HsvColor = {\n      ...hsvColor,\n      s: Math.min(Math.max(hsvColor.s + deltaX / 100, 0), 1),\n      v: Math.min(Math.max(hsvColor.v + deltaY / 100, 0), 1),\n    };\n\n    setColor(newColor);\n    setActiveAxis(axis);\n\n    onChange?.(event, { type: 'change', event, color: newColor });\n  });\n\n  const rootVariables = {\n    [colorAreaCSSVars.areaXProgressVar]: `${saturation}%`,\n    [colorAreaCSSVars.areaYProgressVar]: `${value}%`,\n    [colorAreaCSSVars.thumbColorVar]: createHslColorString(hsvColor),\n    [colorAreaCSSVars.mainColorVar]: `hsl(${hsvColor.h}, 100%, 50%)`,\n  };\n  const state: ColorAreaBaseState = {\n    components: {\n      inputX: 'input',\n      inputY: 'input',\n      root: 'div',\n      thumb: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...rest,\n      }),\n      { elementType: 'div' },\n    ),\n    inputX: slot.always(inputX, {\n      defaultProps: {\n        id: useId('sliderX-'),\n        type: 'range',\n        ...(activeAxis && { tabIndex: activeAxis === 'x' ? 0 : -1 }),\n      },\n      elementType: 'input',\n    }),\n    inputY: slot.always(inputY, {\n      defaultProps: {\n        id: useId('sliderY-'),\n        type: 'range',\n        tabIndex: activeAxis && activeAxis === 'y' ? 0 : -1,\n      },\n      elementType: 'input',\n    }),\n    thumb: slot.always(thumb, { elementType: 'div' }),\n  };\n\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n  state.thumb.ref = useMergedRefs(state.thumb.ref, focusWithinRef);\n  state.inputX.ref = useMergedRefs(state.inputX.ref, xRef);\n  state.inputY.ref = useMergedRefs(state.inputY.ref, yRef);\n\n  state.root.style = {\n    ...state.root.style,\n    ...rootVariables,\n  };\n\n  state.root.onPointerDown = useEventCallback(mergeCallbacks(state.root.onPointerDown, handleRootOnPointerDown));\n  state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, handleRootOnKeyDown));\n  state.inputX.onChange = useEventCallback(mergeCallbacks(state.inputX.onChange, handleInputOnChange));\n  state.inputY.onChange = useEventCallback(mergeCallbacks(state.inputY.onChange, handleInputOnChange));\n\n  state.inputX.value = saturation;\n  state.inputY.value = value;\n\n  return state;\n};\n\n/**\n * Create the state required to render ColorArea.\n *\n * The returned state can be modified with hooks such as useColorAreaStyles_unstable,\n * before being passed to renderColorArea_unstable.\n *\n * @param props - props from this instance of ColorArea\n * @param ref - reference to root HTMLDivElement of ColorArea\n */\nexport const useColorArea_unstable = (props: ColorAreaProps, ref: React.Ref<HTMLDivElement>): ColorAreaState => {\n  const shapeFromContext = useColorPickerContextValue_unstable(ctx => ctx.shape);\n\n  const { shape = shapeFromContext, ...rest } = props;\n\n  const state: ColorAreaState = {\n    ...useColorAreaBase_unstable(rest, ref),\n    shape,\n  };\n\n  return state;\n};\n"],"names":["React","useId","slot","useMergedRefs","mergeCallbacks","getIntrinsicElementProps","colorAreaCSSVars","useEventCallback","useControllableState","useFluent_unstable","useFluent","useFocusWithin","INITIAL_COLOR_HSV","getCoordinates","useColorPickerContextValue_unstable","createHslColorString","useColorAreaBase_unstable","props","ref","targetDocument","rootRef","useRef","xRef","yRef","focusWithinRef","onChangeFromContext","ctx","requestChange","colorFromContext","color","onChange","inputX","inputY","thumb","rest","hsvColor","setColor","defaultState","defaultColor","state","initialState","saturation","Math","round","s","value","v","activeAxis","setActiveAxis","useState","requestColorChange","event","current","coordinates","newColor","x","y","type","handleDocumentPointerMove","useCallback","handleDocumentPointerUp","removeEventListener","handleRootOnPointerDown","stopPropagation","preventDefault","nativeEvent","addEventListener","once","handleInputOnChange","targetValue","Number","target","handleRootOnKeyDown","deltaX","deltaY","axis","key","min","max","rootVariables","areaXProgressVar","areaYProgressVar","thumbColorVar","mainColorVar","h","components","root","always","elementType","defaultProps","id","tabIndex","style","onPointerDown","onKeyDown","useColorArea_unstable","shapeFromContext","shape"],"mappings":"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"}

package/lib-commonjs/components/ColorArea/{useColorAreaStyles.styles.js → useColorAreaStyles.styles.cjs}

@@ -10,9 +10,6 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    colorAreaCSSVars: function() {
-        return colorAreaCSSVars;
-    },
     colorAreaClassNames: function() {
         return colorAreaClassNames;
     },
@@ -27,12 +24,6 @@ const colorAreaClassNames = {
     inputX: 'fui-ColorArea__inputX',
     inputY: 'fui-ColorArea__inputY'
 };
-const colorAreaCSSVars = {
-    areaXProgressVar: `--fui-AreaX--progress`,
-    areaYProgressVar: `--fui-AreaY--progress`,
-    thumbColorVar: `--fui-Area__thumb--color`,
-    mainColorVar: `--fui-Area--main-color`
-};
 // Internal CSS variables
 const thumbSizeVar = `--fui-Slider__thumb--size`;
 /**

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

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

package/lib-commonjs/components/ColorArea/{useColorAreaStyles.styles.raw.js → useColorAreaStyles.styles.raw.cjs}

@@ -10,9 +10,6 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    colorAreaCSSVars: function() {
-        return colorAreaCSSVars;
-    },
     colorAreaClassNames: function() {
         return colorAreaClassNames;
     },
@@ -23,18 +20,13 @@ _export(exports, {
 const _react = require("@griffel/react");
 const _reacttheme = require("@fluentui/react-theme");
 const _reacttabster = require("@fluentui/react-tabster");
+const _ColorAreaconstants = require("./ColorArea.constants.cjs");
 const colorAreaClassNames = {
     root: 'fui-ColorArea',
     thumb: 'fui-ColorArea__thumb',
     inputX: 'fui-ColorArea__inputX',
     inputY: 'fui-ColorArea__inputY'
 };
-const colorAreaCSSVars = {
-    areaXProgressVar: `--fui-AreaX--progress`,
-    areaYProgressVar: `--fui-AreaY--progress`,
-    thumbColorVar: `--fui-Area__thumb--color`,
-    mainColorVar: `--fui-Area--main-color`
-};
 // Internal CSS variables
 const thumbSizeVar = `--fui-Slider__thumb--size`;
 /**
@@ -42,7 +34,7 @@ const thumbSizeVar = `--fui-Slider__thumb--size`;
  */ const useRootStyles = (0, _react.makeResetStyles)({
     position: 'relative',
     border: `1px solid ${_reacttheme.tokens.colorNeutralStroke1}`,
-    background: `linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, transparent), var(${colorAreaCSSVars.mainColorVar})`,
+    background: `linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, transparent), var(${_ColorAreaconstants.colorAreaCSSVars.mainColorVar})`,
     forcedColorAdjust: 'none',
     display: 'inline-grid',
     touchAction: 'none',
@@ -67,10 +59,10 @@ const thumbSizeVar = `--fui-Slider__thumb--size`;
         borderRadius: _reacttheme.tokens.borderRadiusCircular,
         border: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralForeground4}`,
         boxShadow: _reacttheme.tokens.shadow4,
-        backgroundColor: `var(${colorAreaCSSVars.thumbColorVar})`,
+        backgroundColor: `var(${_ColorAreaconstants.colorAreaCSSVars.thumbColorVar})`,
         transform: 'translate(-50%, 50%)',
-        left: `var(${colorAreaCSSVars.areaXProgressVar})`,
-        bottom: `var(${colorAreaCSSVars.areaYProgressVar})`,
+        left: `var(${_ColorAreaconstants.colorAreaCSSVars.areaXProgressVar})`,
+        bottom: `var(${_ColorAreaconstants.colorAreaCSSVars.areaYProgressVar})`,
         '::before': {
             position: 'absolute',
             inset: '0px',

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorArea/useColorAreaStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport type { ColorAreaSlots, ColorAreaState } from './ColorArea.types';\nimport { colorAreaCSSVars } from './ColorArea.constants';\n\nexport const colorAreaClassNames: SlotClassNames<ColorAreaSlots> = {\n  root: 'fui-ColorArea',\n  thumb: 'fui-ColorArea__thumb',\n  inputX: 'fui-ColorArea__inputX',\n  inputY: 'fui-ColorArea__inputY',\n};\n\n// Internal CSS variables\nconst thumbSizeVar = `--fui-Slider__thumb--size`;\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeResetStyles({\n  position: 'relative',\n  border: `1px solid ${tokens.colorNeutralStroke1}`,\n  background: `linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, transparent), var(${colorAreaCSSVars.mainColorVar})`,\n  forcedColorAdjust: 'none',\n  display: 'inline-grid',\n  touchAction: 'none',\n  alignItems: 'start',\n  justifyItems: 'start',\n  [thumbSizeVar]: '20px',\n  minWidth: '300px',\n  minHeight: '300px',\n  boxSizing: 'border-box',\n  marginBottom: tokens.spacingVerticalSNudge,\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n  thumb: {\n    position: 'absolute',\n    width: `var(${thumbSizeVar})`,\n    height: `var(${thumbSizeVar})`,\n    pointerEvents: 'none',\n    outlineStyle: 'none',\n    forcedColorAdjust: 'none',\n    borderRadius: tokens.borderRadiusCircular,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,\n    boxShadow: tokens.shadow4,\n    backgroundColor: `var(${colorAreaCSSVars.thumbColorVar})`,\n    transform: 'translate(-50%, 50%)',\n    left: `var(${colorAreaCSSVars.areaXProgressVar})`,\n    bottom: `var(${colorAreaCSSVars.areaYProgressVar})`,\n    '::before': {\n      position: 'absolute',\n      inset: '0px',\n      borderRadius: tokens.borderRadiusCircular,\n      boxSizing: 'border-box',\n      content: \"''\",\n      border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`,\n    },\n  },\n  focusIndicator: createFocusOutlineStyle({\n    selector: 'focus-within',\n    style: {\n      outlineWidth: tokens.strokeWidthThick,\n      ...shorthands.borderWidth(tokens.strokeWidthThick),\n      outlineRadius: tokens.borderRadiusCircular,\n    },\n  }),\n});\n\n/**\n * Styles for the Input slot\n */\nconst useInputStyles = makeStyles({\n  input: {\n    overflow: 'hidden',\n    position: 'absolute',\n    pointerEvents: 'none',\n    top: 0,\n    left: 0,\n    opacity: 0,\n    padding: '0',\n    margin: '0',\n    width: '100%',\n    height: '100%',\n  },\n});\n\nconst useShapeStyles = makeStyles({\n  rounded: {\n    borderRadius: tokens.borderRadiusMedium,\n  },\n  square: {\n    borderRadius: tokens.borderRadiusNone,\n  },\n});\n\n/**\n * Apply styling to the ColorArea slots based on the state\n */\nexport const useColorAreaStyles_unstable = (state: ColorAreaState): ColorAreaState => {\n  const rootStyles = useRootStyles();\n  const thumbStyles = useThumbStyles();\n  const inputStyles = useInputStyles();\n  const shapeStyles = useShapeStyles();\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    colorAreaClassNames.root,\n    rootStyles,\n    shapeStyles[state.shape || 'rounded'],\n    state.root.className,\n  );\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.thumb.className = mergeClasses(\n    colorAreaClassNames.thumb,\n    thumbStyles.thumb,\n    thumbStyles.focusIndicator,\n    state.thumb.className,\n  );\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.inputX.className = mergeClasses(colorAreaClassNames.inputX, inputStyles.input, state.inputX.className);\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.inputY.className = mergeClasses(colorAreaClassNames.inputY, inputStyles.input, state.inputY.className);\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","shorthands","tokens","createFocusOutlineStyle","colorAreaCSSVars","colorAreaClassNames","root","thumb","inputX","inputY","thumbSizeVar","useRootStyles","position","border","colorNeutralStroke1","background","mainColorVar","forcedColorAdjust","display","touchAction","alignItems","justifyItems","minWidth","minHeight","boxSizing","marginBottom","spacingVerticalSNudge","useThumbStyles","width","height","pointerEvents","outlineStyle","borderRadius","borderRadiusCircular","strokeWidthThin","colorNeutralForeground4","boxShadow","shadow4","backgroundColor","thumbColorVar","transform","left","areaXProgressVar","bottom","areaYProgressVar","inset","content","strokeWidthThick","colorNeutralBackground1","focusIndicator","selector","style","outlineWidth","borderWidth","outlineRadius","useInputStyles","input","overflow","top","opacity","padding","margin","useShapeStyles","rounded","borderRadiusMedium","square","borderRadiusNone","useColorAreaStyles_unstable","state","rootStyles","thumbStyles","inputStyles","shapeStyles","className","shape"],"mappings":"AAAA;;;;;;;;;;;;IASaO,mBAAAA;;;+BAgGA8D;eAAAA;;;uBAvGyD,iBAAiB;4BAEhE,wBAAwB;8BACP,0BAA0B;oCAEjC,2BAAwB;AAElD,4BAA4D;IACjE7D,MAAM;IACNC,OAAO;IACPC,QAAQ;IACRC,QAAQ;AACV,EAAE;AAEF,yBAAyB;AACzB,MAAMC,eAAe,CAAC,yBAAyB,CAAC;AAEhD;;CAEC,GACD,MAAMC,oBAAgBb,sBAAAA,EAAgB;IACpCc,UAAU;IACVC,QAAQ,CAAC,UAAU,EAAEX,kBAAAA,CAAOY,mBAAmB,EAAE;IACjDC,YAAY,CAAC,iGAAiG,EAAEX,oCAAAA,CAAiBY,YAAY,CAAC,CAAC,CAAC;IAChJC,mBAAmB;IACnBC,SAAS;IACTC,aAAa;IACbC,YAAY;IACZC,cAAc;IACd,CAACX,aAAa,EAAE;IAChBY,UAAU;IACVC,WAAW;IACXC,WAAW;IACXC,cAAcvB,kBAAAA,CAAOwB,qBAAqB;AAC5C;AAEA;;CAEC,GACD,MAAMC,qBAAiB5B,iBAAAA,EAAW;IAChCQ,OAAO;QACLK,UAAU;QACVgB,OAAO,CAAC,IAAI,EAAElB,aAAa,CAAC,CAAC;QAC7BmB,QAAQ,CAAC,IAAI,EAAEnB,aAAa,CAAC,CAAC;QAC9BoB,eAAe;QACfC,cAAc;QACdd,mBAAmB;QACnBe,cAAc9B,kBAAAA,CAAO+B,oBAAoB;QACzCpB,QAAQ,GAAGX,kBAAAA,CAAOgC,eAAe,CAAC,OAAO,EAAEhC,kBAAAA,CAAOiC,uBAAuB,EAAE;QAC3EC,WAAWlC,kBAAAA,CAAOmC,OAAO;QACzBC,iBAAiB,CAAC,IAAI,EAAElC,oCAAAA,CAAiBmC,aAAa,CAAC,CAAC,CAAC;QACzDC,WAAW;QACXC,MAAM,CAAC,IAAI,EAAErC,oCAAAA,CAAiBsC,gBAAgB,CAAC,CAAC,CAAC;QACjDC,QAAQ,CAAC,IAAI,EAAEvC,oCAAAA,CAAiBwC,gBAAgB,CAAC,CAAC,CAAC;QACnD,YAAY;YACVhC,UAAU;YACViC,OAAO;YACPb,cAAc9B,kBAAAA,CAAO+B,oBAAoB;YACzCT,WAAW;YACXsB,SAAS;YACTjC,QAAQ,GAAGX,kBAAAA,CAAO6C,gBAAgB,CAAC,OAAO,EAAE7C,kBAAAA,CAAO8C,uBAAuB,EAAE;QAC9E;IACF;IACAC,oBAAgB9C,qCAAAA,EAAwB;QACtC+C,UAAU;QACVC,OAAO;YACLC,cAAclD,kBAAAA,CAAO6C,gBAAgB;YACrC,GAAG9C,iBAAAA,CAAWoD,WAAW,CAACnD,kBAAAA,CAAO6C,gBAAgB,CAAC;YAClDO,eAAepD,kBAAAA,CAAO+B,oBAAoB;QAC5C;IACF;AACF;AAEA;;CAEC,GACD,MAAMsB,qBAAiBxD,iBAAAA,EAAW;IAChCyD,OAAO;QACLC,UAAU;QACV7C,UAAU;QACVkB,eAAe;QACf4B,KAAK;QACLjB,MAAM;QACNkB,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRjC,OAAO;QACPC,QAAQ;IACV;AACF;AAEA,MAAMiC,qBAAiB/D,iBAAAA,EAAW;IAChCgE,SAAS;QACP/B,cAAc9B,kBAAAA,CAAO8D,kBAAkB;IACzC;IACAC,QAAQ;QACNjC,cAAc9B,kBAAAA,CAAOgE,gBAAgB;IACvC;AACF;AAKO,oCAAoC,CAACE;IAC1C,MAAMC,aAAa1D;IACnB,MAAM2D,cAAc3C;IACpB,MAAM4C,cAAchB;IACpB,MAAMiB,cAAcV;IAEpB,oDAAoD;IACpDM,MAAM9D,IAAI,CAACmE,SAAS,OAAGzE,mBAAAA,EACrBK,oBAAoBC,IAAI,EACxB+D,YACAG,WAAW,CAACJ,MAAMM,KAAK,IAAI,UAAU,EACrCN,MAAM9D,IAAI,CAACmE,SAAS;IAGtB,oDAAoD;IACpDL,MAAM7D,KAAK,CAACkE,SAAS,GAAGzE,uBAAAA,EACtBK,oBAAoBE,KAAK,EACzB+D,YAAY/D,KAAK,EACjB+D,YAAYrB,cAAc,EAC1BmB,MAAM7D,KAAK,CAACkE,SAAS;IAGvB,oDAAoD;IACpDL,MAAM5D,MAAM,CAACiE,SAAS,OAAGzE,mBAAAA,EAAaK,oBAAoBG,MAAM,EAAE+D,YAAYf,KAAK,EAAEY,MAAM5D,MAAM,CAACiE,SAAS;IAE3G,oDAAoD;IACpDL,MAAM3D,MAAM,CAACgE,SAAS,OAAGzE,mBAAAA,EAAaK,oBAAoBI,MAAM,EAAE8D,YAAYf,KAAK,EAAEY,MAAM3D,MAAM,CAACgE,SAAS;IAC3G,OAAOL;AACT,EAAE"}

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

@@ -11,10 +11,10 @@ Object.defineProperty(exports, "ColorPicker", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _useColorPicker = require("./useColorPicker");
-const _renderColorPicker = require("./renderColorPicker");
-const _useColorPickerStylesstyles = require("./useColorPickerStyles.styles");
-const _useColorPickerContextValues = require("./useColorPickerContextValues");
+const _useColorPicker = require("./useColorPicker.cjs");
+const _renderColorPicker = require("./renderColorPicker.cjs");
+const _useColorPickerStylesstyles = require("./useColorPickerStyles.styles.cjs");
+const _useColorPickerContextValues = require("./useColorPickerContextValues.cjs");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const ColorPicker = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     const state = (0, _useColorPicker.useColorPicker_unstable)(props, ref);

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

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

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

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

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

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