@fluentui/react-color-picker 9.3.2 → 9.3.3

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

@@ -1 +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, getSliderDirection } from './alphaSliderUtils';\nimport { createHsvColor } from '../../utils/createHsvColor';\nimport { createHslColor } from '../../utils/createHslColor';\nimport type { HsvColor } from '../../types/color';\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 [currentColor, setCurrentColor] = useControllableState<HsvColor>({\n    defaultState: props.defaultColor,\n    state: color || colorFromContext,\n    initialState: createHsvColor({}),\n  });\n  const hslColor = createHslColor(currentColor);\n  const currentValue = adjustToTransparency((currentColor.a ?? 1) * 100, transparency);\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({ ...currentColor, a: newValue / 100 });\n    setCurrentColor(newColor);\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","getSliderDirection","createHsvColor","createHslColor","useAlphaSliderState_unstable","state","props","dir","onChangeFromContext","ctx","requestChange","colorFromContext","color","onChange","transparency","vertical","currentColor","setCurrentColor","defaultState","defaultColor","initialState","hslColor","currentValue","a","clampedValue","valuePercent","inputOnChange","input","_onChange","event","newValue","Number","target","value","newColor","type","sliderDirection","rootVariables","sliderDirectionVar","sliderProgressVar","thumbColorVar","h","s","l","railColorVar","root","style"],"mappings":"AAAA;;;;;+BAeac;;;;;;gCAZiD,4BAA4B;qCAC1C,kCAAkC;sCAC/C,6BAA0B;6BAET,gCAA6B;2BACxD,2BAAwB;4BACtB,4BAAyB;kCACK,wBAAqB;gCAC/C,gCAA6B;gCAC7B,gCAA6B;AAGrD,qCAAqC,CAACC,OAAyBC;IACpE,MAAM,EAAEC,GAAG,EAAE,OAAGb,uCAAAA;IAChB,MAAMc,0BAAsBZ,gDAAAA,EAAoCa,CAAAA,MAAOA,IAAIC,aAAa;IACxF,MAAMC,uBAAmBf,gDAAAA,EAAoCa,CAAAA,MAAOA,IAAIG,KAAK;IAC7E,MAAM,EAAEA,KAAK,EAAEC,WAAWL,mBAAmB,EAAEM,eAAe,KAAK,EAAEC,WAAW,KAAK,EAAE,GAAGT;IAC1F,MAAM,CAACU,cAAcC,gBAAgB,OAAG1B,oCAAAA,EAA+B;QACrE2B,cAAcZ,MAAMa,YAAY;QAChCd,OAAOO,SAASD;QAChBS,kBAAclB,8BAAAA,EAAe,CAAC;IAChC;IACA,MAAMmB,eAAWlB,8BAAAA,EAAea;QACWA;IAA3C,MAAMM,mBAAetB,sCAAAA,EAAsBgB,CAAAA,CAAAA,kBAAAA,aAAaO,CAAC,MAAA,QAAdP,oBAAAA,KAAAA,IAAAA,mBAAkB,CAAA,GAAK,KAAKF;IAEvE,MAAMU,mBAAelC,qBAAAA,EAAMgC,cAAczB,cAAAA,EAAKC,cAAAA;IAC9C,MAAM2B,eAAe1B,0BAAAA,EAAWyB,cAAc3B,cAAAA,EAAKC,cAAAA;IAEnD,MAAM4B,gBAAgBrB,MAAMsB,KAAK,CAACd,QAAQ;IAE1C,MAAMe,gBAAwDpC,gCAAAA,EAAiBqC,CAAAA;QAC7E,MAAMC,eAAW9B,sCAAAA,EAAqB+B,OAAOF,MAAMG,MAAM,CAACC,KAAK,GAAGnB;QAClE,MAAMoB,eAAWhC,8BAAAA,EAAe;YAAE,GAAGc,YAAY;YAAEO,GAAGO,WAAW;QAAI;QACrEb,gBAAgBiB;QAChBR,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAgBG;QAChBhB,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWgB,OAAO;YAAEM,MAAM;YAAUN;YAAOjB,OAAOsB;QAAS;IAC7D;IAEA,MAAME,sBAAkBnC,oCAAAA,EAAmBM,KAAKQ,UAAUD;IAE1D,MAAMuB,gBAAgB;QACpB,CAAC1C,wCAAAA,CAAmB2C,kBAAkB,CAAC,EAAEF;QACzC,CAACzC,wCAAAA,CAAmB4C,iBAAiB,CAAC,EAAE,GAAGd,aAAa,CAAC,CAAC;QAC1D,CAAC9B,wCAAAA,CAAmB6C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAEnB,SAASoB,CAAC,CAAC,EAAE,EAAEpB,SAASqB,CAAC,GAAG,IAAI,GAAG,EAAErB,SAASsB,CAAC,GAAG,IAAI,GAAG,EACnGtB,SAASE,CAAC,CACX,CAAC,CAAC;QACH,CAAC5B,wCAAAA,CAAmBiD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAEvB,SAASoB,CAAC,CAAC,EAAE,EAAEpB,SAASqB,CAAC,GAAG,IAAI,GAAG,EAAErB,SAASsB,CAAC,GAAG,IAAI,EAAE,CAAC;IACrG;IAEA,aAAa;IACb,oDAAoD;IACpDtC,MAAMwC,IAAI,CAACC,KAAK,GAAG;QACjB,GAAGT,aAAa;QAChB,GAAGhC,MAAMwC,IAAI,CAACC,KAAK;IACrB;IAEA,cAAc;IACd,oDAAoD;IACpDzC,MAAMsB,KAAK,CAACM,KAAK,GAAGT;IACpB,oDAAoD;IACpDnB,MAAMsB,KAAK,CAACd,QAAQ,GAAGe;IAEvB,OAAOvB;AACT,EAAE"}
+{"version":3,"sources":["../../../src/components/AlphaSlider/useAlphaSliderState.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { clamp, getPercentInRange, 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 { adjustToTransparency, getSliderDirection } from './alphaSliderUtils';\nimport { createHsvColor } from '../../utils/createHsvColor';\nimport { createHslColor } from '../../utils/createHslColor';\nimport type { HsvColor } from '../../types/color';\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 [currentColor, setCurrentColor] = useControllableState<HsvColor>({\n    defaultState: props.defaultColor,\n    state: color || colorFromContext,\n    initialState: createHsvColor({}),\n  });\n  const hslColor = createHslColor(currentColor);\n  const currentValue = adjustToTransparency((currentColor.a ?? 1) * 100, transparency);\n\n  const clampedValue = clamp(currentValue, MIN, MAX);\n  const valuePercent = getPercentInRange(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({ ...currentColor, a: newValue / 100 });\n    setCurrentColor(newColor);\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","getPercentInRange","useControllableState","useEventCallback","useFluent_unstable","useFluent","alphaSliderCSSVars","useColorPickerContextValue_unstable","MIN","MAX","adjustToTransparency","getSliderDirection","createHsvColor","createHslColor","useAlphaSliderState_unstable","state","props","currentColor","dir","onChangeFromContext","ctx","requestChange","colorFromContext","color","onChange","transparency","vertical","setCurrentColor","defaultState","defaultColor","initialState","hslColor","currentValue","a","clampedValue","valuePercent","inputOnChange","input","_onChange","event","newValue","Number","target","value","newColor","type","sliderDirection","rootVariables","sliderDirectionVar","sliderProgressVar","thumbColorVar","h","s","l","railColorVar","root","style"],"mappings":"AAAA;;;;;+BAcac;;;;;;gCAXoE,4BAA4B;qCAC7D,kCAAkC;sCAC/C,6BAA0B;6BAET,gCAA6B;2BACxD,2BAAwB;kCACQ,wBAAqB;gCAC/C,gCAA6B;gCAC7B,gCAA6B;AAGrD,qCAAqC,CAACC,OAAyBC;QAWzBC;IAV3C,MAAM,EAAEC,GAAG,EAAE,OAAGb,uCAAAA;IAChB,MAAMc,0BAAsBZ,gDAAAA,EAAoCa,CAAAA,MAAOA,IAAIC,aAAa;IACxF,MAAMC,uBAAmBf,gDAAAA,EAAoCa,CAAAA,MAAOA,IAAIG,KAAK;IAC7E,MAAM,EAAEA,KAAK,EAAEC,WAAWL,mBAAmB,EAAEM,eAAe,KAAK,EAAEC,WAAW,KAAK,EAAE,GAAGV;IAC1F,MAAM,CAACC,cAAcU,gBAAgB,OAAGzB,oCAAAA,EAA+B;QACrE0B,cAAcZ,MAAMa,YAAY;QAChCd,OAAOQ,SAASD;QAChBQ,kBAAclB,8BAAAA,EAAe,CAAC;IAChC;IACA,MAAMmB,eAAWlB,8BAAAA,EAAeI;IAChC,MAAMe,mBAAetB,sCAAAA,EAAqB,CAAA,CAACO,kBAAAA,cAAc,AAADgB,MAAC,QAAdhB,oBAAAA,KAAAA,IAAAA,mBAAkB,IAAK,KAAKQ;IAEvE,MAAMS,mBAAelC,qBAAAA,EAAMgC,cAAcxB,cAAAA,EAAKC,cAAAA;IAC9C,MAAM0B,mBAAelC,iCAAAA,EAAkBiC,cAAc1B,cAAAA,EAAKC,cAAAA;IAE1D,MAAM2B,gBAAgBrB,MAAMsB,KAAK,CAACb,QAAQ;IAE1C,MAAMc,gBAAwDnC,gCAAAA,EAAiBoC,CAAAA;QAC7E,MAAMC,WAAW9B,0CAAAA,EAAqB+B,OAAOF,MAAMG,MAAM,CAACC,KAAK,GAAGlB;QAClE,MAAMmB,eAAWhC,8BAAAA,EAAe;YAAE,GAAGK,YAAY;YAAEgB,GAAGO,WAAW;QAAI;QACrEb,gBAAgBiB;QAChBR,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAgBG;QAChBf,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAWe,OAAO;YAAEM,MAAM;YAAUN;YAAOhB,OAAOqB;QAAS;IAC7D;IAEA,MAAME,sBAAkBnC,oCAAAA,EAAmBO,KAAKQ,UAAUD;IAE1D,MAAMsB,gBAAgB;QACpB,CAACzC,wCAAAA,CAAmB0C,kBAAkB,CAAC,EAAEF;QACzC,CAACxC,wCAAAA,CAAmB2C,iBAAiB,CAAC,EAAE,GAAGd,aAAa,CAAC,CAAC;QAC1D,CAAC7B,wCAAAA,CAAmB4C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAEnB,SAASoB,CAAC,CAAC,EAAE,EAAEpB,SAASqB,CAAC,GAAG,IAAI,GAAG,EAAErB,SAASsB,CAAC,GAAG,IAAI,GAAG,EACnGtB,SAASE,CAAC,CACX,CAAC,CAAC;QACH,CAAC3B,wCAAAA,CAAmBgD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAEvB,SAASoB,CAAC,CAAC,EAAE,EAAEpB,SAASqB,CAAC,GAAG,IAAI,GAAG,EAAErB,SAASsB,CAAC,GAAG,IAAI,EAAE,CAAC;IACrG;IAEA,aAAa;IACb,oDAAoD;IACpDtC,MAAMwC,IAAI,CAACC,KAAK,GAAG;QACjB,GAAGT,aAAa;QAChB,GAAGhC,MAAMwC,IAAI,CAACC,KAAK;IACrB;IAEA,cAAc;IACd,oDAAoD;IACpDzC,MAAMsB,KAAK,CAACM,KAAK,GAAGT;IACpB,oDAAoD;IACpDnB,MAAMsB,KAAK,CAACb,QAAQ,GAAGc;IAEvB,OAAOvB;AACT,EAAE"}

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

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

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

@@ -1 +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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"}
+{"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":"AAAA,YAAY;;;;;;;;;;;;QAMCM,qBAAqB;;;;eAkCjBkC,6BAA6B;;;uBAvCL,gBAAgB;4CAEX,+CAA+C;AAE7F,MAAMnC,qBAAqB,GAAG,sFAAsF;AAC7G,8BAA8B;IACjCE,IAAI,EAAE,iBAAiB;IACvBC,IAAI,EAAE,uBAAuB;IAC7BC,KAAK,EAAE,wBAAwB;IAC/BC,KAAK,EAAE;AACX,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,GAAGX,mBAAA,EAAA;IAAAQ,IAAA,EAAA;QAAAI,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,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA,CAAA,2NAAA,CAAA;KAAA;AAAA,CAKrB,CAAC;AACF;;CAEA,GAAI,MAAMC,cAAc,GAAA,WAAA,OAAGhC,eAAA,EAAA;IAAAS,KAAA,EAAA;QAAAwB,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,UAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,QAAA,EAAA;QAAAF,OAAA,EAAA;QAAAG,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAT,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAe1B,CAAC;AAGS,uCAAuCW,KAAK,IAAG;IACtD,MAAMC,MAAM,GAAG/B,SAAS,CAAC,CAAC;IAC1B,MAAMgC,WAAW,GAAGX,cAAc,CAAC,CAAC;IACpC,oDAAA;IACAS,KAAK,CAAClC,IAAI,CAACqC,SAAS,OAAG3C,mBAAY,EAACK,qBAAqB,CAACC,IAAI,EAAEkC,KAAK,CAAClC,IAAI,CAACqC,SAAS,CAAC;IACrF,oDAAA;IACAH,KAAK,CAAC/B,KAAK,CAACkC,SAAS,OAAG3C,mBAAY,EAACK,qBAAqB,CAACI,KAAK,EAAE+B,KAAK,CAAC/B,KAAK,CAACkC,SAAS,CAAC;IACxF,oDAAA;IACAH,KAAK,CAACjC,IAAI,CAACoC,SAAS,OAAG3C,mBAAY,EAACK,qBAAqB,CAACE,IAAI,EAAEkC,MAAM,CAAClC,IAAI,EAAEiC,KAAK,CAACjC,IAAI,CAACoC,SAAS,CAAC;IAClG,oDAAA;IACAH,KAAK,CAAChC,KAAK,CAACmC,SAAS,OAAG3C,mBAAY,EAACK,qBAAqB,CAACG,KAAK,EAAEkC,WAAW,CAAClC,KAAK,EAAEgC,KAAK,CAACH,QAAQ,GAAGK,WAAW,CAACL,QAAQ,GAAGK,WAAW,CAACR,UAAU,EAAEM,KAAK,CAAChC,KAAK,CAACmC,SAAS,CAAC;IAC3K,oDAAA;IACAH,KAAK,CAAChC,KAAK,CAACmC,SAAS,OAAG3C,mBAAY,EAACK,qBAAqB,CAACG,KAAK,EAAEkC,WAAW,CAAClC,KAAK,EAAEgC,KAAK,CAACH,QAAQ,GAAGK,WAAW,CAACL,QAAQ,GAAGK,WAAW,CAACR,UAAU,EAAEM,KAAK,CAAChC,KAAK,CAACmC,SAAS,CAAC;QAC3KzC,yDAA6B,EAACsC,KAAK,CAAC;IACpC,OAAOA,KAAK;AAChB,CAAC"}

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

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

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

@@ -1 +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"}
+{"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;;;;;;;;;;;;QAWaM;;;;eAwCAqB;;;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,YAAYX,qBAAAA,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.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,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"}
+{"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.map

@@ -1 +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"}
+{"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.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 * 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"}
+{"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.cjs

@@ -5,29 +5,29 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    ColorArea: function() {
+    get ColorArea () {
         return _ColorArea.ColorArea;
     },
-    colorAreaCSSVars: function() {
+    get colorAreaCSSVars () {
         return _ColorAreaconstants.colorAreaCSSVars;
     },
-    colorAreaClassNames: function() {
+    get colorAreaClassNames () {
         return _useColorAreaStylesstyles.colorAreaClassNames;
     },
-    renderColorArea_unstable: function() {
+    get renderColorArea_unstable () {
         return _renderColorArea.renderColorArea_unstable;
     },
-    useColorAreaBase_unstable: function() {
+    get useColorAreaBase_unstable () {
         return _useColorArea.useColorAreaBase_unstable;
     },
-    useColorAreaStyles_unstable: function() {
+    get useColorAreaStyles_unstable () {
         return _useColorAreaStylesstyles.useColorAreaStyles_unstable;
     },
-    useColorArea_unstable: function() {
+    get useColorArea_unstable () {
         return _useColorArea.useColorArea_unstable;
     }
 });

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

@@ -1 +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"}
+{"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":";;;;;;;;;;;;eAASA,oBAAS;;;eAYTM,oCAAgB;;;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

@@ -1 +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"}
+{"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;;;;;;;gCATb,gDAAiD,GAEjD,SAASD,WAAW,QAAQ,4BAA4B;AAOjD,iCAAiC,CAACE;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.cjs

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

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

@@ -1 +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        'aria-orientation': 'vertical',\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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"}
+{"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        'aria-orientation': 'vertical',\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.cjs

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

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

@@ -1 +1 @@
-{"version":3,"sources":["useColorAreaStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from \"@griffel/react\";\nimport { tokens } from \"@fluentui/react-theme\";\nimport { createFocusOutlineStyle } from \"@fluentui/react-tabster\";\nimport { colorAreaCSSVars } from \"./ColorArea.constants.js\";\nexport const colorAreaClassNames = {\n    root: 'fui-ColorArea',\n    thumb: 'fui-ColorArea__thumb',\n    inputX: 'fui-ColorArea__inputX',\n    inputY: 'fui-ColorArea__inputY'\n};\n// Internal CSS variables\nconst thumbSizeVar = `--fui-Slider__thumb--size`;\n/**\n * Styles for the root slot\n */ const useRootStyles = makeResetStyles({\n    position: 'relative',\n    border: `1px solid ${tokens.colorNeutralStroke1}`,\n    background: `linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, transparent), var(${colorAreaCSSVars.mainColorVar})`,\n    forcedColorAdjust: 'none',\n    display: 'inline-grid',\n    touchAction: 'none',\n    alignItems: 'start',\n    justifyItems: 'start',\n    [thumbSizeVar]: '20px',\n    minWidth: '300px',\n    minHeight: '300px',\n    boxSizing: 'border-box',\n    marginBottom: tokens.spacingVerticalSNudge\n});\n/**\n * Styles for the thumb slot\n */ const useThumbStyles = makeStyles({\n    thumb: {\n        position: 'absolute',\n        width: `var(${thumbSizeVar})`,\n        height: `var(${thumbSizeVar})`,\n        pointerEvents: 'none',\n        outlineStyle: 'none',\n        forcedColorAdjust: 'none',\n        borderRadius: tokens.borderRadiusCircular,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,\n        boxShadow: tokens.shadow4,\n        backgroundColor: `var(${colorAreaCSSVars.thumbColorVar})`,\n        transform: 'translate(-50%, 50%)',\n        left: `var(${colorAreaCSSVars.areaXProgressVar})`,\n        bottom: `var(${colorAreaCSSVars.areaYProgressVar})`,\n        '::before': {\n            position: 'absolute',\n            inset: '0px',\n            borderRadius: tokens.borderRadiusCircular,\n            boxSizing: 'border-box',\n            content: \"''\",\n            border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`\n        }\n    },\n    focusIndicator: createFocusOutlineStyle({\n        selector: 'focus-within',\n        style: {\n            outlineWidth: tokens.strokeWidthThick,\n            ...shorthands.borderWidth(tokens.strokeWidthThick),\n            outlineRadius: tokens.borderRadiusCircular\n        }\n    })\n});\n/**\n * Styles for the Input slot\n */ const useInputStyles = makeStyles({\n    input: {\n        overflow: 'hidden',\n        position: 'absolute',\n        pointerEvents: 'none',\n        top: 0,\n        left: 0,\n        opacity: 0,\n        padding: '0',\n        margin: '0',\n        width: '100%',\n        height: '100%'\n    }\n});\nconst useShapeStyles = makeStyles({\n    rounded: {\n        borderRadius: tokens.borderRadiusMedium\n    },\n    square: {\n        borderRadius: tokens.borderRadiusNone\n    }\n});\n/**\n * Apply styling to the ColorArea slots based on the state\n */ export const useColorAreaStyles_unstable = (state)=>{\n    const rootStyles = useRootStyles();\n    const thumbStyles = useThumbStyles();\n    const inputStyles = useInputStyles();\n    const shapeStyles = useShapeStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(colorAreaClassNames.root, rootStyles, shapeStyles[state.shape || 'rounded'], state.root.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.thumb.className = mergeClasses(colorAreaClassNames.thumb, thumbStyles.thumb, thumbStyles.focusIndicator, state.thumb.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.inputX.className = mergeClasses(colorAreaClassNames.inputX, inputStyles.input, state.inputX.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.inputY.className = mergeClasses(colorAreaClassNames.inputY, inputStyles.input, state.inputY.className);\n    return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","createFocusOutlineStyle","colorAreaCSSVars","colorAreaClassNames","root","thumb","inputX","inputY","thumbSizeVar","useRootStyles","useThumbStyles","qhf8xq","a9b677","Bqenvij","Bkecrkj","oeaueh","Bvjb7m6","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","De3pzq","Bz10aip","oyh7mz","B5kzvoi","Brfgrao","lawp4y","Fbdkly","mdwyqc","Bciustq","gc50h5","r59vdv","Budzafs","ck0cow","n07z76","Gng75u","Bcvre1j","Ftih45","Bcgcnre","Bqjgrrk","qa3bma","y0oebl","Biqmznv","Bm6vgfq","Bbv0w2i","uvfttm","eqrjj","Bk5zm6e","m598lv","B4f6apu","ydt019","Bq4z7u6","Bdkvgpv","B0qfbqy","kj8mxx","focusIndicator","Brovlpu","B486eqv","Bssx7fj","uh7if5","clntm0","Dlk2r6","h6p2u","I6qiy5","yzno9d","By0wis0","B2j2mmj","wigs8","pbfy6t","B0v4ure","Byrf0fs","Bsiemmq","Bwckmig","skfxo0","Iidy0u","B98u21t","Bvwlmkc","jo1ztg","Ba1iezr","Blmvk6g","B24cy0v","Bil7v7r","Br3gin4","nr063g","ghq09","Bbgo44z","Bseh09z","az1dzo","Ba3ybja","B6352mv","vppk2z","Biaj6j7","B2pnrqr","B29w5g4","Bhhzhcn","Bec0n69","d","p","f","i","m","useInputStyles","input","B68tc82","Bmxbyg5","Bpg54ce","Bhzewxz","abs64n","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","useShapeStyles","rounded","square","useColorAreaStyles_unstable","state","rootStyles","thumbStyles","inputStyles","shapeStyles","className","shape"],"mappings":"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"}
+{"version":3,"sources":["useColorAreaStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from \"@griffel/react\";\nimport { tokens } from \"@fluentui/react-theme\";\nimport { createFocusOutlineStyle } from \"@fluentui/react-tabster\";\nimport { colorAreaCSSVars } from \"./ColorArea.constants.js\";\nexport const colorAreaClassNames = {\n    root: 'fui-ColorArea',\n    thumb: 'fui-ColorArea__thumb',\n    inputX: 'fui-ColorArea__inputX',\n    inputY: 'fui-ColorArea__inputY'\n};\n// Internal CSS variables\nconst thumbSizeVar = `--fui-Slider__thumb--size`;\n/**\n * Styles for the root slot\n */ const useRootStyles = makeResetStyles({\n    position: 'relative',\n    border: `1px solid ${tokens.colorNeutralStroke1}`,\n    background: `linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, transparent), var(${colorAreaCSSVars.mainColorVar})`,\n    forcedColorAdjust: 'none',\n    display: 'inline-grid',\n    touchAction: 'none',\n    alignItems: 'start',\n    justifyItems: 'start',\n    [thumbSizeVar]: '20px',\n    minWidth: '300px',\n    minHeight: '300px',\n    boxSizing: 'border-box',\n    marginBottom: tokens.spacingVerticalSNudge\n});\n/**\n * Styles for the thumb slot\n */ const useThumbStyles = makeStyles({\n    thumb: {\n        position: 'absolute',\n        width: `var(${thumbSizeVar})`,\n        height: `var(${thumbSizeVar})`,\n        pointerEvents: 'none',\n        outlineStyle: 'none',\n        forcedColorAdjust: 'none',\n        borderRadius: tokens.borderRadiusCircular,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,\n        boxShadow: tokens.shadow4,\n        backgroundColor: `var(${colorAreaCSSVars.thumbColorVar})`,\n        transform: 'translate(-50%, 50%)',\n        left: `var(${colorAreaCSSVars.areaXProgressVar})`,\n        bottom: `var(${colorAreaCSSVars.areaYProgressVar})`,\n        '::before': {\n            position: 'absolute',\n            inset: '0px',\n            borderRadius: tokens.borderRadiusCircular,\n            boxSizing: 'border-box',\n            content: \"''\",\n            border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`\n        }\n    },\n    focusIndicator: createFocusOutlineStyle({\n        selector: 'focus-within',\n        style: {\n            outlineWidth: tokens.strokeWidthThick,\n            ...shorthands.borderWidth(tokens.strokeWidthThick),\n            outlineRadius: tokens.borderRadiusCircular\n        }\n    })\n});\n/**\n * Styles for the Input slot\n */ const useInputStyles = makeStyles({\n    input: {\n        overflow: 'hidden',\n        position: 'absolute',\n        pointerEvents: 'none',\n        top: 0,\n        left: 0,\n        opacity: 0,\n        padding: '0',\n        margin: '0',\n        width: '100%',\n        height: '100%'\n    }\n});\nconst useShapeStyles = makeStyles({\n    rounded: {\n        borderRadius: tokens.borderRadiusMedium\n    },\n    square: {\n        borderRadius: tokens.borderRadiusNone\n    }\n});\n/**\n * Apply styling to the ColorArea slots based on the state\n */ export const useColorAreaStyles_unstable = (state)=>{\n    const rootStyles = useRootStyles();\n    const thumbStyles = useThumbStyles();\n    const inputStyles = useInputStyles();\n    const shapeStyles = useShapeStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(colorAreaClassNames.root, rootStyles, shapeStyles[state.shape || 'rounded'], state.root.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.thumb.className = mergeClasses(colorAreaClassNames.thumb, thumbStyles.thumb, thumbStyles.focusIndicator, state.thumb.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.inputX.className = mergeClasses(colorAreaClassNames.inputX, inputStyles.input, state.inputX.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.inputY.className = mergeClasses(colorAreaClassNames.inputY, inputStyles.input, state.inputY.className);\n    return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","createFocusOutlineStyle","colorAreaCSSVars","colorAreaClassNames","root","thumb","inputX","inputY","thumbSizeVar","useRootStyles","useThumbStyles","qhf8xq","a9b677","Bqenvij","Bkecrkj","oeaueh","Bvjb7m6","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","De3pzq","Bz10aip","oyh7mz","B5kzvoi","Brfgrao","lawp4y","Fbdkly","mdwyqc","Bciustq","gc50h5","r59vdv","Budzafs","ck0cow","n07z76","Gng75u","Bcvre1j","Ftih45","Bcgcnre","Bqjgrrk","qa3bma","y0oebl","Biqmznv","Bm6vgfq","Bbv0w2i","uvfttm","eqrjj","Bk5zm6e","m598lv","B4f6apu","ydt019","Bq4z7u6","Bdkvgpv","B0qfbqy","kj8mxx","focusIndicator","Brovlpu","B486eqv","Bssx7fj","uh7if5","clntm0","Dlk2r6","h6p2u","I6qiy5","yzno9d","By0wis0","B2j2mmj","wigs8","pbfy6t","B0v4ure","Byrf0fs","Bsiemmq","Bwckmig","skfxo0","Iidy0u","B98u21t","Bvwlmkc","jo1ztg","Ba1iezr","Blmvk6g","B24cy0v","Bil7v7r","Br3gin4","nr063g","ghq09","Bbgo44z","Bseh09z","az1dzo","Ba3ybja","B6352mv","vppk2z","Biaj6j7","B2pnrqr","B29w5g4","Bhhzhcn","Bec0n69","d","p","f","i","m","useInputStyles","input","B68tc82","Bmxbyg5","Bpg54ce","Bhzewxz","abs64n","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","useShapeStyles","rounded","square","useColorAreaStyles_unstable","state","rootStyles","thumbStyles","inputStyles","shapeStyles","className","shape"],"mappings":"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"}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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