@fluentui/react-color-picker 9.3.1 → 9.3.3

package/lib-commonjs/ColorSlider.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, {
-    ColorSlider: function() {
+    get ColorSlider () {
         return _index.ColorSlider;
     },
-    colorSliderCSSVars: function() {
+    get colorSliderCSSVars () {
         return _index.colorSliderCSSVars;
     },
-    colorSliderClassNames: function() {
+    get colorSliderClassNames () {
         return _index.colorSliderClassNames;
     },
-    renderColorSlider_unstable: function() {
+    get renderColorSlider_unstable () {
         return _index.renderColorSlider_unstable;
     },
-    useColorSliderBase_unstable: function() {
+    get useColorSliderBase_unstable () {
         return _index.useColorSliderBase_unstable;
     },
-    useColorSliderStyles_unstable: function() {
+    get useColorSliderStyles_unstable () {
         return _index.useColorSliderStyles_unstable;
     },
-    useColorSlider_unstable: function() {
+    get useColorSlider_unstable () {
         return _index.useColorSlider_unstable;
     }
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AlphaSlider/AlphaSlider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useAlphaSlider_unstable } from './useAlphaSlider';\nimport { renderAlphaSlider_unstable } from './renderAlphaSlider';\nimport { useAlphaSliderStyles_unstable } from './useAlphaSliderStyles.styles';\nimport type { AlphaSliderProps } from './AlphaSlider.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * AlphaSlider component\n */\nexport const AlphaSlider: ForwardRefComponent<AlphaSliderProps> = React.forwardRef((props, ref) => {\n  const state = useAlphaSlider_unstable(props, ref);\n\n  useAlphaSliderStyles_unstable(state);\n  useCustomStyleHook_unstable('useAlphaSliderStyles_unstable')(state);\n\n  return renderAlphaSlider_unstable(state);\n});\n\nAlphaSlider.displayName = 'AlphaSlider';\n"],"names":["React","useAlphaSlider_unstable","renderAlphaSlider_unstable","useAlphaSliderStyles_unstable","useCustomStyleHook_unstable","AlphaSlider","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCAES,sBAAmB;mCAChB,yBAAsB;4CACnB,mCAAgC;qCAElC,kCAAkC;AAKvE,MAAMK,cAAAA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQR,uCAAAA,EAAwBM,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAC9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOP,6CAAAA,EAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}
+{"version":3,"sources":["../../../src/components/AlphaSlider/AlphaSlider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useAlphaSlider_unstable } from './useAlphaSlider';\nimport { renderAlphaSlider_unstable } from './renderAlphaSlider';\nimport { useAlphaSliderStyles_unstable } from './useAlphaSliderStyles.styles';\nimport type { AlphaSliderProps } from './AlphaSlider.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * AlphaSlider component\n */\nexport const AlphaSlider: ForwardRefComponent<AlphaSliderProps> = React.forwardRef((props, ref) => {\n  const state = useAlphaSlider_unstable(props, ref);\n\n  useAlphaSliderStyles_unstable(state);\n  useCustomStyleHook_unstable('useAlphaSliderStyles_unstable')(state);\n\n  return renderAlphaSlider_unstable(state);\n});\n\nAlphaSlider.displayName = 'AlphaSlider';\n"],"names":["React","useAlphaSlider_unstable","renderAlphaSlider_unstable","useAlphaSliderStyles_unstable","useCustomStyleHook_unstable","AlphaSlider","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCAES,sBAAmB;mCAChB,yBAAsB;4CACnB,mCAAgC;qCAElC,kCAAkC;AAKvE,MAAMK,cAAAA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQR,uCAAAA,EAAwBM,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAC9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOP,6CAAAA,EAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AlphaSlider/AlphaSlider.constants.ts"],"sourcesContent":["export const alphaSliderCSSVars = {\n  sliderDirectionVar: `--fui-AlphaSlider--direction`,\n  sliderProgressVar: `--fui-AlphaSlider--progress`,\n  thumbColorVar: `--fui-AlphaSlider__thumb--color`,\n  railColorVar: `--fui-AlphaSlider__rail--color`,\n};\n"],"names":["alphaSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar"],"mappings":";;;;;;;;;;AAAO,MAAMA,qBAAqB;IAChCC,oBAAoB,CAAC,4BAA4B,CAAC;IAClDC,mBAAmB,CAAC,2BAA2B,CAAC;IAChDC,eAAe,CAAC,+BAA+B,CAAC;IAChDC,cAAc,CAAC,8BAA8B,CAAC;AAChD,EAAE"}
+{"version":3,"sources":["../../../src/components/AlphaSlider/AlphaSlider.constants.ts"],"sourcesContent":["export const alphaSliderCSSVars = {\n  sliderDirectionVar: `--fui-AlphaSlider--direction`,\n  sliderProgressVar: `--fui-AlphaSlider--progress`,\n  thumbColorVar: `--fui-AlphaSlider__thumb--color`,\n  railColorVar: `--fui-AlphaSlider__rail--color`,\n};\n"],"names":["alphaSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar"],"mappings":";;;;;;;;;;AAAO,MAAMA,qBAAqB;IAChCC,oBAAoB,CAAC,4BAA4B,CAAC;IAClDC,mBAAmB,CAAC,2BAA2B,CAAC;IAChDC,eAAe,CAAC,+BAA+B,CAAC;IAChDC,cAAc,CAAC,8BAA8B,CAAC;AAChD,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AlphaSlider/AlphaSlider.types.ts"],"sourcesContent":["import type { ComponentState } from '@fluentui/react-utilities';\nimport type { ColorSliderSlots, ColorSliderProps, ColorSliderState } from '../ColorSlider/ColorSlider.types';\n\nexport type AlphaSliderSlots = ColorSliderSlots;\n\n/**\n * AlphaSlider Props\n */\nexport type AlphaSliderProps = Omit<ColorSliderProps, 'channel'> & {\n  /**\n   * The `transparency` property determines how the alpha channel is interpreted.\n   * - When `false`, the alpha channel represents the opacity of the color.\n   * - When `true`, the alpha channel represents the transparency of the color.\n   * For example, a 30% transparent color has 70% opacity.\n   *\n   * @defaultvalue false\n   */\n  transparency?: boolean;\n};\n\n/**\n * AlphaSlider Base Props\n */\nexport type AlphaSliderBaseProps = Omit<AlphaSliderProps, 'shape'>;\n\n/**\n * State used in rendering AlphaSlider\n */\nexport type AlphaSliderState = ComponentState<AlphaSliderSlots> &\n  Pick<AlphaSliderProps, 'vertical'> &\n  Omit<ColorSliderState, keyof ColorSliderSlots | 'components'>;\n\n/**\n * State used in rendering unstyled AlphaSlider\n */\nexport type AlphaSliderBaseState = Omit<AlphaSliderState, 'shape'>;\n"],"names":[],"mappings":"AAgCA;;CAEC,GACD,WAAmE"}
+{"version":3,"sources":["../../../src/components/AlphaSlider/AlphaSlider.types.ts"],"sourcesContent":["import type { ComponentState } from '@fluentui/react-utilities';\nimport type { ColorSliderSlots, ColorSliderProps, ColorSliderState } from '../ColorSlider/ColorSlider.types';\n\nexport type AlphaSliderSlots = ColorSliderSlots;\n\n/**\n * AlphaSlider Props\n */\nexport type AlphaSliderProps = Omit<ColorSliderProps, 'channel'> & {\n  /**\n   * The `transparency` property determines how the alpha channel is interpreted.\n   * - When `false`, the alpha channel represents the opacity of the color.\n   * - When `true`, the alpha channel represents the transparency of the color.\n   * For example, a 30% transparent color has 70% opacity.\n   *\n   * @defaultvalue false\n   */\n  transparency?: boolean;\n};\n\n/**\n * AlphaSlider Base Props\n */\nexport type AlphaSliderBaseProps = Omit<AlphaSliderProps, 'shape'>;\n\n/**\n * State used in rendering AlphaSlider\n */\nexport type AlphaSliderState = ComponentState<AlphaSliderSlots> &\n  Pick<AlphaSliderProps, 'vertical'> &\n  Omit<ColorSliderState, keyof ColorSliderSlots | 'components'>;\n\n/**\n * State used in rendering unstyled AlphaSlider\n */\nexport type AlphaSliderBaseState = Omit<AlphaSliderState, 'shape'>;\n"],"names":[],"mappings":"AAgCA;;CAEC,GACD,WAAmE"}

package/lib-commonjs/components/AlphaSlider/alphaSliderUtils.cjs

@@ -11,17 +11,17 @@ 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, {
-    adjustToTransparency: function() {
+    get adjustToTransparency () {
         return adjustToTransparency;
     },
-    calculateTransparencyValue: function() {
+    get calculateTransparencyValue () {
         return calculateTransparencyValue;
     },
-    getSliderDirection: function() {
+    get getSliderDirection () {
         return getSliderDirection;
     }
 });
@@ -35,5 +35,5 @@ function getSliderDirection(dir, vertical, transparency) {
     if (vertical) {
         return transparency ? '180deg' : '0deg';
     }
-    return dir === 'ltr' && !transparency ? '90deg' : '-90deg';
+    return dir === 'ltr' !== transparency ? '90deg' : '-90deg';
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AlphaSlider/alphaSliderUtils.ts"],"sourcesContent":["/**\n * Adjusts the given value based on the transparency flag.\n *\n * @param value - The numeric value to adjust.\n * @param transparency - A boolean flag indicating whether to adjust for transparency.\n * @returns The adjusted value.\n */\nexport function adjustToTransparency(value: number, transparency: boolean): number {\n  return transparency ? 100 - value : value;\n}\n\n/**\n * Calculates the transparency value based on the given parameters.\n *\n * @param transparency - A boolean flag indicating whether to adjust for transparency.\n * @param value - An optional numeric value to adjust.\n * @returns The calculated transparency value or undefined if the value is not provided.\n */\nexport function calculateTransparencyValue(transparency: boolean, value?: number): number | undefined {\n  return value !== undefined ? adjustToTransparency(value * 100, transparency) : undefined;\n}\n\n/**\n * Determines the direction of the slider based on the given parameters.\n *\n * @param dir - The text direction, either 'ltr' (left-to-right) or 'rtl' (right-to-left).\n * @param vertical - A boolean indicating if the slider is vertical.\n * @param transparency - A boolean indicating if the slider is for transparency.\n * @returns The direction of the slider as a string representing degrees (e.g., '90deg').\n */\nexport function getSliderDirection(dir: 'ltr' | 'rtl', vertical: boolean, transparency: boolean): string {\n  if (vertical) {\n    return transparency ? '180deg' : '0deg';\n  }\n  return dir === 'ltr' && !transparency ? '90deg' : '-90deg';\n}\n"],"names":["adjustToTransparency","value","transparency","calculateTransparencyValue","undefined","getSliderDirection","dir","vertical"],"mappings":"AAAA;;;;;;CAMC,GACD;;;;;;;;;;;wBAAgBA;;;8BAWAG;;;IAYAE,kBAAAA;;;;AAvBT,SAASL,qBAAqBC,KAAa,EAAEC,YAAqB;IACvE,OAAOA,eAAe,MAAMD,QAAQA;AACtC;AASO,SAASE,2BAA2BD,YAAqB,EAAED,KAAc;IAC9E,OAAOA,UAAUG,YAAYJ,qBAAqBC,QAAQ,KAAKC,gBAAgBE;AACjF;AAUO,4BAA4BE,GAAkB,EAAEC,QAAiB,EAAEL,YAAqB;IAC7F,IAAIK,UAAU;QACZ,OAAOL,eAAe,WAAW;IACnC;IACA,OAAOI,QAAQ,SAAS,CAACJ,eAAe,UAAU;AACpD"}
+{"version":3,"sources":["../../../src/components/AlphaSlider/alphaSliderUtils.ts"],"sourcesContent":["/**\n * Adjusts the given value based on the transparency flag.\n *\n * @param value - The numeric value to adjust.\n * @param transparency - A boolean flag indicating whether to adjust for transparency.\n * @returns The adjusted value.\n */\nexport function adjustToTransparency(value: number, transparency: boolean): number {\n  return transparency ? 100 - value : value;\n}\n\n/**\n * Calculates the transparency value based on the given parameters.\n *\n * @param transparency - A boolean flag indicating whether to adjust for transparency.\n * @param value - An optional numeric value to adjust.\n * @returns The calculated transparency value or undefined if the value is not provided.\n */\nexport function calculateTransparencyValue(transparency: boolean, value?: number): number | undefined {\n  return value !== undefined ? adjustToTransparency(value * 100, transparency) : undefined;\n}\n\n/**\n * Determines the direction of the slider based on the given parameters.\n *\n * @param dir - The text direction, either 'ltr' (left-to-right) or 'rtl' (right-to-left).\n * @param vertical - A boolean indicating if the slider is vertical.\n * @param transparency - A boolean indicating if the slider is for transparency.\n * @returns The direction of the slider as a string representing degrees (e.g., '90deg').\n */\nexport function getSliderDirection(dir: 'ltr' | 'rtl', vertical: boolean, transparency: boolean): string {\n  if (vertical) {\n    return transparency ? '180deg' : '0deg';\n  }\n  return (dir === 'ltr') !== transparency ? '90deg' : '-90deg';\n}\n"],"names":["adjustToTransparency","value","transparency","calculateTransparencyValue","undefined","getSliderDirection","dir","vertical"],"mappings":"AAAA;;;;;;CAMC,GACD;;;;;;;;;;;;;;;;;;;;;AAAO,SAASA,qBAAqBC,KAAa,EAAEC,YAAqB;IACvE,OAAOA,eAAe,MAAMD,QAAQA;AACtC;AASO,SAASE,2BAA2BD,YAAqB,EAAED,KAAc;IAC9E,OAAOA,UAAUG,YAAYJ,qBAAqBC,QAAQ,KAAKC,gBAAgBE;AACjF;AAUO,SAASC,mBAAmBC,GAAkB,EAAEC,QAAiB,EAAEL,YAAqB;IAC7F,IAAIK,UAAU;QACZ,OAAOL,eAAe,WAAW;IACnC;IACA,OAAQI,QAAQ,UAAWJ,eAAe,UAAU;AACtD"}

package/lib-commonjs/components/AlphaSlider/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, {
-    AlphaSlider: function() {
+    get AlphaSlider () {
         return _AlphaSlider.AlphaSlider;
     },
-    alphaSliderCSSVars: function() {
+    get alphaSliderCSSVars () {
         return _AlphaSliderconstants.alphaSliderCSSVars;
     },
-    alphaSliderClassNames: function() {
+    get alphaSliderClassNames () {
         return _useAlphaSliderStylesstyles.alphaSliderClassNames;
     },
-    renderAlphaSlider_unstable: function() {
+    get renderAlphaSlider_unstable () {
         return _renderAlphaSlider.renderAlphaSlider_unstable;
     },
-    useAlphaSliderBase_unstable: function() {
+    get useAlphaSliderBase_unstable () {
         return _useAlphaSlider.useAlphaSliderBase_unstable;
     },
-    useAlphaSliderStyles_unstable: function() {
+    get useAlphaSliderStyles_unstable () {
         return _useAlphaSliderStylesstyles.useAlphaSliderStyles_unstable;
     },
-    useAlphaSlider_unstable: function() {
+    get useAlphaSlider_unstable () {
         return _useAlphaSlider.useAlphaSlider_unstable;
     }
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AlphaSlider/index.ts"],"sourcesContent":["export { AlphaSlider } from './AlphaSlider';\nexport type {\n  AlphaSliderBaseProps,\n  AlphaSliderBaseState,\n  AlphaSliderProps,\n  AlphaSliderSlots,\n  AlphaSliderState,\n} from './AlphaSlider.types';\nexport { renderAlphaSlider_unstable } from './renderAlphaSlider';\nexport { useAlphaSliderBase_unstable, useAlphaSlider_unstable } from './useAlphaSlider';\nexport { alphaSliderClassNames, useAlphaSliderStyles_unstable } from './useAlphaSliderStyles.styles';\nexport { alphaSliderCSSVars } from './AlphaSlider.constants';\n"],"names":["AlphaSlider","renderAlphaSlider_unstable","useAlphaSliderBase_unstable","useAlphaSlider_unstable","alphaSliderClassNames","useAlphaSliderStyles_unstable","alphaSliderCSSVars"],"mappings":";;;;;;;;;;;IAASA;uCAAW;;IAWXM;uDAAkB;;;eADlBF,iDAAqB;;;eAFrBH,6CAA0B;;;eAC1BC,2CAA2B;;;eACJG,yDAA6B;;;eADvBF,uCAAuB;;;6BATjC,mBAAgB;mCAQD,yBAAsB;gCACI,sBAAmB;4CACnB,mCAAgC;sCAClE,6BAA0B"}
+{"version":3,"sources":["../../../src/components/AlphaSlider/index.ts"],"sourcesContent":["export { AlphaSlider } from './AlphaSlider';\nexport type {\n  AlphaSliderBaseProps,\n  AlphaSliderBaseState,\n  AlphaSliderProps,\n  AlphaSliderSlots,\n  AlphaSliderState,\n} from './AlphaSlider.types';\nexport { renderAlphaSlider_unstable } from './renderAlphaSlider';\nexport { useAlphaSliderBase_unstable, useAlphaSlider_unstable } from './useAlphaSlider';\nexport { alphaSliderClassNames, useAlphaSliderStyles_unstable } from './useAlphaSliderStyles.styles';\nexport { alphaSliderCSSVars } from './AlphaSlider.constants';\n"],"names":["AlphaSlider","renderAlphaSlider_unstable","useAlphaSliderBase_unstable","useAlphaSlider_unstable","alphaSliderClassNames","useAlphaSliderStyles_unstable","alphaSliderCSSVars"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eAWXM,wCAAkB;;;eADlBF,iDAAqB;;;eAFrBH,6CAA0B;;;eAC1BC,2CAA2B;;;eACJG,yDAA6B;;;eADvBF,uCAAuB;;;6BATjC,mBAAgB;mCAQD,yBAAsB;gCACI,sBAAmB;4CACnB,mCAAgC;sCAClE,6BAA0B"}

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

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

package/lib-commonjs/components/AlphaSlider/useAlphaSlider.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, {
-    useAlphaSliderBase_unstable: function() {
+    get useAlphaSliderBase_unstable () {
         return useAlphaSliderBase_unstable;
     },
-    useAlphaSlider_unstable: function() {
+    get useAlphaSlider_unstable () {
         return useAlphaSlider_unstable;
     }
 });
@@ -54,6 +54,7 @@ const useAlphaSliderBase_unstable = (props, ref)=>{
             defaultProps: {
                 id: (0, _reactutilities.useId)('slider-', props.id),
                 ref,
+                'aria-orientation': vertical ? 'vertical' : 'horizontal',
                 ...nativeProps.primary,
                 type: 'range'
             },

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AlphaSlider/useAlphaSlider.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getPartitionedNativeProps, useId, slot } from '@fluentui/react-utilities';\nimport type {\n  AlphaSliderBaseProps,\n  AlphaSliderBaseState,\n  AlphaSliderProps,\n  AlphaSliderState,\n} from './AlphaSlider.types';\nimport { useAlphaSliderState_unstable } from './useAlphaSliderState';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\n\n/**\n * Create the state required to render AlphaSlider.\n *\n * The returned state can be modified with hooks such as useAlphaSliderStyles_unstable,\n * before being passed to renderAlphaSlider_unstable.\n *\n * @param props - props from this instance of AlphaSlider\n * @param ref - reference to root HTMLInputElement of AlphaSlider\n */\nexport const useAlphaSlider_unstable = (\n  props: AlphaSliderProps,\n  ref: React.Ref<HTMLInputElement>,\n): AlphaSliderState => {\n  const shapeFromContext = useColorPickerContextValue_unstable(ctx => ctx.shape);\n  const { shape = shapeFromContext, ...baseProps } = props;\n\n  return {\n    ...useAlphaSliderBase_unstable(baseProps, ref),\n    shape,\n  };\n};\n\nexport const useAlphaSliderBase_unstable = (\n  props: AlphaSliderBaseProps,\n  ref: React.Ref<HTMLInputElement>,\n): AlphaSliderBaseState => {\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['onChange', 'color'],\n  });\n\n  const {\n    vertical,\n    // Slots\n    root,\n    input,\n    rail,\n    thumb,\n  } = props;\n\n  const state: AlphaSliderBaseState = {\n    vertical,\n    components: {\n      input: 'input',\n      rail: 'div',\n      root: 'div',\n      thumb: 'div',\n    },\n    root: slot.always(root, {\n      defaultProps: nativeProps.root,\n      elementType: 'div',\n    }),\n    input: slot.always(input, {\n      defaultProps: {\n        id: useId('slider-', props.id),\n        ref,\n        ...nativeProps.primary,\n        type: 'range',\n      },\n      elementType: 'input',\n    }),\n    rail: slot.always(rail, { elementType: 'div' }),\n    thumb: slot.always(thumb, { elementType: 'div' }),\n  };\n\n  useAlphaSliderState_unstable(state, props);\n\n  return state;\n};\n"],"names":["getPartitionedNativeProps","useId","slot","useAlphaSliderState_unstable","useColorPickerContextValue_unstable","useAlphaSlider_unstable","props","ref","shapeFromContext","ctx","shape","baseProps","useAlphaSliderBase_unstable","nativeProps","primarySlotTagName","excludedPropNames","vertical","root","input","rail","thumb","state","components","always","defaultProps","elementType","id","primary","type"],"mappings":"AAAA;;;;;;;;;;;;IAmCaY,2BAAAA;;;2BAbAP;;;;gCAnB0C,4BAA4B;qCAOtC,2BAAwB;6BACjB,gCAA6B;AAW1E,MAAMA,0BAA0B,CACrCC,OACAC;IAEA,MAAMC,uBAAmBJ,gDAAAA,EAAoCK,CAAAA,MAAOA,IAAIC,KAAK;IAC7E,MAAM,EAAEA,QAAQF,gBAAgB,EAAE,GAAGG,WAAW,GAAGL;IAEnD,OAAO;QACL,GAAGM,4BAA4BD,WAAWJ,IAAI;QAC9CG;IACF;AACF,EAAE;AAEK,oCAAoC,CACzCJ,OACAC;IAEA,MAAMM,cAAcb,6CAAAA,EAA0B;QAC5CM;QACAQ,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;SAAQ;IAC1C;IAEA,MAAM,EACJC,QAAQ,EACR,AACAC,IAAI,EACJC,EAFQ,GAEH,EACLC,IAAI,EACJC,KAAK,EACN,GAAGd;IAEJ,MAAMe,QAA8B;QAClCL;QACAM,YAAY;YACVJ,OAAO;YACPC,MAAM;YACNF,MAAM;YACNG,OAAO;QACT;QACAH,MAAMf,oBAAAA,CAAKqB,MAAM,CAACN,MAAM;YACtBO,cAAcX,YAAYI,IAAI;YAC9BQ,aAAa;QACf;QACAP,OAAOhB,oBAAAA,CAAKqB,MAAM,CAACL,OAAO;YACxBM,cAAc;gBACZE,QAAIzB,qBAAAA,EAAM,WAAWK,MAAMoB,EAAE;gBAC7BnB;gBACA,GAAGM,YAAYc,OAAO;gBACtBC,MAAM;YACR;YACAH,aAAa;QACf;QACAN,MAAMjB,oBAAAA,CAAKqB,MAAM,CAACJ,MAAM;YAAEM,aAAa;QAAM;QAC7CL,OAAOlB,oBAAAA,CAAKqB,MAAM,CAACH,OAAO;YAAEK,aAAa;QAAM;IACjD;QAEAtB,iDAAAA,EAA6BkB,OAAOf;IAEpC,OAAOe;AACT,EAAE"}
+{"version":3,"sources":["../../../src/components/AlphaSlider/useAlphaSlider.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getPartitionedNativeProps, useId, slot } from '@fluentui/react-utilities';\nimport type {\n  AlphaSliderBaseProps,\n  AlphaSliderBaseState,\n  AlphaSliderProps,\n  AlphaSliderState,\n} from './AlphaSlider.types';\nimport { useAlphaSliderState_unstable } from './useAlphaSliderState';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\n\n/**\n * Create the state required to render AlphaSlider.\n *\n * The returned state can be modified with hooks such as useAlphaSliderStyles_unstable,\n * before being passed to renderAlphaSlider_unstable.\n *\n * @param props - props from this instance of AlphaSlider\n * @param ref - reference to root HTMLInputElement of AlphaSlider\n */\nexport const useAlphaSlider_unstable = (\n  props: AlphaSliderProps,\n  ref: React.Ref<HTMLInputElement>,\n): AlphaSliderState => {\n  const shapeFromContext = useColorPickerContextValue_unstable(ctx => ctx.shape);\n  const { shape = shapeFromContext, ...baseProps } = props;\n\n  return {\n    ...useAlphaSliderBase_unstable(baseProps, ref),\n    shape,\n  };\n};\n\nexport const useAlphaSliderBase_unstable = (\n  props: AlphaSliderBaseProps,\n  ref: React.Ref<HTMLInputElement>,\n): AlphaSliderBaseState => {\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['onChange', 'color'],\n  });\n\n  const {\n    vertical,\n    // Slots\n    root,\n    input,\n    rail,\n    thumb,\n  } = props;\n\n  const state: AlphaSliderBaseState = {\n    vertical,\n    components: {\n      input: 'input',\n      rail: 'div',\n      root: 'div',\n      thumb: 'div',\n    },\n    root: slot.always(root, {\n      defaultProps: nativeProps.root,\n      elementType: 'div',\n    }),\n    input: slot.always(input, {\n      defaultProps: {\n        id: useId('slider-', props.id),\n        ref,\n        'aria-orientation': vertical ? 'vertical' : 'horizontal',\n        ...nativeProps.primary,\n        type: 'range',\n      },\n      elementType: 'input',\n    }),\n    rail: slot.always(rail, { elementType: 'div' }),\n    thumb: slot.always(thumb, { elementType: 'div' }),\n  };\n\n  useAlphaSliderState_unstable(state, props);\n\n  return state;\n};\n"],"names":["getPartitionedNativeProps","useId","slot","useAlphaSliderState_unstable","useColorPickerContextValue_unstable","useAlphaSlider_unstable","props","ref","shapeFromContext","ctx","shape","baseProps","useAlphaSliderBase_unstable","nativeProps","primarySlotTagName","excludedPropNames","vertical","root","input","rail","thumb","state","components","always","defaultProps","elementType","id","primary","type"],"mappings":"AAAA;;;;;;;;;;;;;;;QAsBaK;;;;gCAnB0C,4BAA4B;qCAOtC,2BAAwB;6BACjB,gCAA6B;AAW1E,gCAAgC,CACrCC,OACAC;IAEA,MAAMC,uBAAmBJ,gDAAAA,EAAoCK,CAAAA,MAAOA,IAAIC,KAAK;IAC7E,MAAM,EAAEA,QAAQF,gBAAgB,EAAE,GAAGG,WAAW,GAAGL;IAEnD,OAAO;QACL,GAAGM,4BAA4BD,WAAWJ,IAAI;QAC9CG;IACF;AACF,EAAE;AAEK,MAAME,8BAA8B,CACzCN,OACAC;IAEA,MAAMM,kBAAcb,yCAAAA,EAA0B;QAC5CM;QACAQ,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;SAAQ;IAC1C;IAEA,MAAM,EACJC,QAAQ,EACR,AACAC,IAAI,EACJC,EAFQ,GAEH,EACLC,IAAI,EACJC,KAAK,EACN,GAAGd;IAEJ,MAAMe,QAA8B;QAClCL;QACAM,YAAY;YACVJ,OAAO;YACPC,MAAM;YACNF,MAAM;YACNG,OAAO;QACT;QACAH,MAAMf,oBAAAA,CAAKqB,MAAM,CAACN,MAAM;YACtBO,cAAcX,YAAYI,IAAI;YAC9BQ,aAAa;QACf;QACAP,OAAOhB,oBAAAA,CAAKqB,MAAM,CAACL,OAAO;YACxBM,cAAc;gBACZE,QAAIzB,qBAAAA,EAAM,WAAWK,MAAMoB,EAAE;gBAC7BnB;gBACA,oBAAoBS,WAAW,aAAa;gBAC5C,GAAGH,YAAYc,OAAO;gBACtBC,MAAM;YACR;YACAH,aAAa;QACf;QACAN,MAAMjB,oBAAAA,CAAKqB,MAAM,CAACJ,MAAM;YAAEM,aAAa;QAAM;QAC7CL,OAAOlB,oBAAAA,CAAKqB,MAAM,CAACH,OAAO;YAAEK,aAAa;QAAM;IACjD;QAEAtB,iDAAAA,EAA6BkB,OAAOf;IAEpC,OAAOe;AACT,EAAE"}

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

@@ -14,33 +14,32 @@ const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const _AlphaSliderconstants = require("./AlphaSlider.constants.cjs");
 const _colorPicker = require("../../contexts/colorPicker.cjs");
 const _constants = require("../../utils/constants.cjs");
-const _getPercent = require("../../utils/getPercent.cjs");
 const _alphaSliderUtils = require("./alphaSliderUtils.cjs");
 const _createHsvColor = require("../../utils/createHsvColor.cjs");
 const _createHslColor = require("../../utils/createHslColor.cjs");
 const useAlphaSliderState_unstable = (state, props)=>{
-    var _props_defaultColor;
+    var _currentColor_a;
     const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
     const onChangeFromContext = (0, _colorPicker.useColorPickerContextValue_unstable)((ctx)=>ctx.requestChange);
     const colorFromContext = (0, _colorPicker.useColorPickerContextValue_unstable)((ctx)=>ctx.color);
     const { color, onChange = onChangeFromContext, transparency = false, vertical = false } = props;
-    const hsvColor = color || colorFromContext;
-    const hslColor = (0, _createHslColor.createHslColor)(hsvColor);
-    const [currentValue, setCurrentValue] = (0, _reactutilities.useControllableState)({
-        defaultState: (0, _alphaSliderUtils.calculateTransparencyValue)(transparency, (_props_defaultColor = props.defaultColor) === null || _props_defaultColor === void 0 ? void 0 : _props_defaultColor.a),
-        state: (0, _alphaSliderUtils.calculateTransparencyValue)(transparency, hsvColor === null || hsvColor === void 0 ? void 0 : hsvColor.a),
-        initialState: (0, _alphaSliderUtils.adjustToTransparency)(100, transparency)
+    const [currentColor, setCurrentColor] = (0, _reactutilities.useControllableState)({
+        defaultState: props.defaultColor,
+        state: color || colorFromContext,
+        initialState: (0, _createHsvColor.createHsvColor)({})
     });
+    const hslColor = (0, _createHslColor.createHslColor)(currentColor);
+    const currentValue = (0, _alphaSliderUtils.adjustToTransparency)(((_currentColor_a = currentColor.a) !== null && _currentColor_a !== void 0 ? _currentColor_a : 1) * 100, transparency);
     const clampedValue = (0, _reactutilities.clamp)(currentValue, _constants.MIN, _constants.MAX);
-    const valuePercent = (0, _getPercent.getPercent)(clampedValue, _constants.MIN, _constants.MAX);
+    const valuePercent = (0, _reactutilities.getPercentInRange)(clampedValue, _constants.MIN, _constants.MAX);
     const inputOnChange = state.input.onChange;
     const _onChange = (0, _reactutilities.useEventCallback)((event)=>{
         const newValue = (0, _alphaSliderUtils.adjustToTransparency)(Number(event.target.value), transparency);
         const newColor = (0, _createHsvColor.createHsvColor)({
-            ...hsvColor,
+            ...currentColor,
             a: newValue / 100
         });
-        setCurrentValue(newValue);
+        setCurrentColor(newColor);
         inputOnChange === null || inputOnChange === void 0 ? void 0 : inputOnChange(event);
         onChange === null || onChange === void 0 ? void 0 : onChange(event, {
             type: 'change',

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

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;
     }
 });
@@ -171,6 +171,7 @@ const useColorAreaBase_unstable = (props, ref)=>{
             defaultProps: {
                 id: (0, _reactutilities.useId)('sliderY-'),
                 type: 'range',
+                'aria-orientation': 'vertical',
                 tabIndex: activeAxis && activeAxis === 'y' ? 0 : -1
             },
             elementType: 'input'

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        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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"}