@fluentui/react-color-picker 9.2.4 → 9.2.6

package/lib/components/ColorPicker/useColorPickerStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorPicker/useColorPickerStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ColorPickerSlots, ColorPickerState } from './ColorPicker.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const colorPickerClassNames: SlotClassNames<ColorPickerSlots> = {\n  root: 'fui-ColorPicker',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: tokens.spacingVerticalXS,\n  },\n});\n\n/**\n * Apply styling to the ColorPicker slots based on the state\n */\nexport const useColorPickerStyles_unstable = (state: ColorPickerState): ColorPickerState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(colorPickerClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","colorPickerClassNames","root","useStyles","display","flexDirection","gap","spacingVerticalXS","useColorPickerStyles_unstable","state","styles","className"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,KAAKN,OAAOO,iBAAiB;IAC/B;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,SAASP;IACfM,MAAMP,IAAI,CAACS,SAAS,GAAGZ,aAAaE,sBAAsBC,IAAI,EAAEQ,OAAOR,IAAI,EAAEO,MAAMP,IAAI,CAACS,SAAS;IAEjG,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/ColorPicker/useColorPickerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ColorPickerSlots, ColorPickerState } from './ColorPicker.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const colorPickerClassNames: SlotClassNames<ColorPickerSlots> = {\n  root: 'fui-ColorPicker',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: tokens.spacingVerticalXS,\n  },\n});\n\n/**\n * Apply styling to the ColorPicker slots based on the state\n */\nexport const useColorPickerStyles_unstable = (state: ColorPickerState): ColorPickerState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(colorPickerClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","colorPickerClassNames","root","useStyles","display","flexDirection","gap","spacingVerticalXS","useColorPickerStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,KAAKN,OAAOO,iBAAiB;IAC/B;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,SAASP;IACfM,MAAMP,IAAI,CAACS,SAAS,GAAGZ,aAAaE,sBAAsBC,IAAI,EAAEQ,OAAOR,IAAI,EAAEO,MAAMP,IAAI,CAACS,SAAS;IAEjG,OAAOF;AACT,EAAE"}

package/lib/components/ColorSlider/ColorSlider.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useColorSlider_unstable } from './useColorSlider';
 import { renderColorSlider_unstable } from './renderColorSlider';

package/lib/components/ColorSlider/ColorSlider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorSlider/ColorSlider.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useColorSlider_unstable } from './useColorSlider';\nimport { renderColorSlider_unstable } from './renderColorSlider';\nimport { useColorSliderStyles_unstable } from './useColorSliderStyles.styles';\nimport type { ColorSliderProps } from './ColorSlider.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ColorSlider component\n */\nexport const ColorSlider: ForwardRefComponent<ColorSliderProps> = React.forwardRef((props, ref) => {\n  const state = useColorSlider_unstable(props, ref);\n\n  useColorSliderStyles_unstable(state);\n  useCustomStyleHook_unstable('useColorSliderStyles_unstable')(state);\n\n  return renderColorSlider_unstable(state);\n});\n\nColorSlider.displayName = 'ColorSlider';\n"],"names":["React","useColorSlider_unstable","renderColorSlider_unstable","useColorSliderStyles_unstable","useCustomStyleHook_unstable","ColorSlider","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,gCAAgC;AAE9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CL,8BAA8BM;IAC9BL,4BAA4B,iCAAiCK;IAE7D,OAAOP,2BAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/ColorSlider/ColorSlider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useColorSlider_unstable } from './useColorSlider';\nimport { renderColorSlider_unstable } from './renderColorSlider';\nimport { useColorSliderStyles_unstable } from './useColorSliderStyles.styles';\nimport type { ColorSliderProps } from './ColorSlider.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ColorSlider component\n */\nexport const ColorSlider: ForwardRefComponent<ColorSliderProps> = React.forwardRef((props, ref) => {\n  const state = useColorSlider_unstable(props, ref);\n\n  useColorSliderStyles_unstable(state);\n  useCustomStyleHook_unstable('useColorSliderStyles_unstable')(state);\n\n  return renderColorSlider_unstable(state);\n});\n\nColorSlider.displayName = 'ColorSlider';\n"],"names":["React","useColorSlider_unstable","renderColorSlider_unstable","useColorSliderStyles_unstable","useCustomStyleHook_unstable","ColorSlider","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,gCAAgC;AAE9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CL,8BAA8BM;IAC9BL,4BAA4B,iCAAiCK;IAE7D,OAAOP,2BAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

package/lib/components/ColorSlider/renderColorSlider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorSlider/renderColorSlider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ColorSliderState, ColorSliderSlots } from './ColorSlider.types';\n\n/**\n * Render the final JSX of ColorSlider\n */\nexport const renderColorSlider_unstable = (state: ColorSliderState) => {\n  assertSlots<ColorSliderSlots>(state);\n\n  return (\n    <state.root>\n      <state.input />\n      <state.rail />\n      <state.thumb />\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderColorSlider_unstable","state","root","input","rail","thumb"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCF,YAA8BE;IAE9B,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,KAAK;0BACZ,KAACF,MAAMG,IAAI;0BACX,KAACH,MAAMI,KAAK;;;AAGlB,EAAE"}
+{"version":3,"sources":["../src/components/ColorSlider/renderColorSlider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ColorSliderState, ColorSliderSlots } from './ColorSlider.types';\n\n/**\n * Render the final JSX of ColorSlider\n */\nexport const renderColorSlider_unstable = (state: ColorSliderState): JSXElement => {\n  assertSlots<ColorSliderSlots>(state);\n\n  return (\n    <state.root>\n      <state.input />\n      <state.rail />\n      <state.thumb />\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderColorSlider_unstable","state","root","input","rail","thumb"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCF,YAA8BE;IAE9B,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,KAAK;0BACZ,KAACF,MAAMG,IAAI;0BACX,KAACH,MAAMI,KAAK;;;AAGlB,EAAE"}

package/lib/components/ColorSlider/useColorSlider.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { tinycolor } from '@ctrl/tinycolor';
 import { getPartitionedNativeProps, useId, slot, useControllableState, useEventCallback } from '@fluentui/react-utilities';

package/lib/components/ColorSlider/useColorSlider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorSlider/useColorSlider.ts"],"sourcesContent":["import * as React from 'react';\nimport { tinycolor } from '@ctrl/tinycolor';\nimport {\n  getPartitionedNativeProps,\n  useId,\n  slot,\n  useControllableState,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport { colorSliderCSSVars } from './useColorSliderStyles.styles';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { ColorSliderProps, ColorSliderState } from './ColorSlider.types';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\nimport { MIN, HUE_MAX, MAX as COLOR_MAX } from '../../utils/constants';\nimport { getPercent } from '../../utils/getPercent';\nimport { createHsvColor } from '../../utils/createHsvColor';\nimport { clampValue, type ChannelActions, adjustChannel } from '../../utils/adjustChannel';\nimport { HsvColor } from '../../types/color';\nimport { INITIAL_COLOR_HSV } from '../../utils/constants';\n\n/**\n * Create the state required to render ColorSlider.\n *\n * The returned state can be modified with hooks such as useColorSliderStyles_unstable,\n * before being passed to renderColorSlider_unstable.\n *\n * @param props - props from this instance of ColorSlider\n * @param ref - reference to root HTMLInputElement of ColorSlider\n */\nexport const useColorSlider_unstable = (\n  props: ColorSliderProps,\n  ref: React.Ref<HTMLInputElement>,\n): ColorSliderState => {\n  'use no memo';\n\n  const { dir } = useFluent();\n  const onChangeFromContext = useColorPickerContextValue_unstable(ctx => ctx.requestChange);\n  const colorFromContext = useColorPickerContextValue_unstable(ctx => ctx.color);\n  const shapeFromContext = useColorPickerContextValue_unstable(ctx => ctx.shape);\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['onChange', 'color'],\n  });\n\n  const {\n    color,\n    channel = 'hue',\n    onChange = onChangeFromContext,\n    shape = shapeFromContext,\n    vertical,\n    // Slots\n    root,\n    input,\n    rail,\n    thumb,\n  } = props;\n\n  const hsvColor = color || colorFromContext;\n  const hslColor = tinycolor(hsvColor).toHsl();\n\n  const [currentColor, setCurrentColor] = useControllableState<HsvColor>({\n    defaultState: props.defaultColor,\n    state: hsvColor,\n    initialState: INITIAL_COLOR_HSV,\n  });\n\n  const MAX = channel === 'hue' ? HUE_MAX : COLOR_MAX;\n\n  const valueChannelActions: ChannelActions<number> = {\n    hue: clampValue(currentColor.h),\n    saturation: clampValue(currentColor.s * 100),\n    value: clampValue(currentColor.v * 100),\n  };\n\n  const clampedValue = adjustChannel(channel, valueChannelActions);\n  const valuePercent = getPercent(clampedValue, MIN, MAX);\n\n  const inputOnChange = input?.onChange;\n\n  const _onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(event => {\n    const newValue = Number(event.target.value);\n    const colorActions: ChannelActions<() => HsvColor> = {\n      hue: () => createHsvColor({ ...hsvColor, h: newValue }),\n      saturation: () => createHsvColor({ ...hsvColor, s: newValue / 100 }),\n      value: () => createHsvColor({ ...hsvColor, v: newValue / 100 }),\n    };\n    const newColor = adjustChannel(channel, colorActions)();\n\n    setCurrentColor(newColor);\n\n    inputOnChange?.(event);\n    onChange?.(event, {\n      type: 'change',\n      event,\n      color: newColor,\n    });\n  });\n\n  const rootVariables = {\n    [colorSliderCSSVars.sliderDirectionVar]: vertical ? '180deg' : dir === 'ltr' ? '-90deg' : '90deg',\n    [colorSliderCSSVars.sliderProgressVar]: `${valuePercent}%`,\n    [colorSliderCSSVars.thumbColorVar]:\n      channel === 'hue' ? `hsl(${clampedValue}, 100%, 50%)` : tinycolor(hsvColor).toRgbString(),\n    [colorSliderCSSVars.railColorVar]:\n      channel === 'hue'\n        ? `hsl(${hslColor.h} ${hslColor.s * 100}%, ${hslColor.l * 100}%)`\n        : `hsl(${hslColor.h} 100%, 50%)`,\n  };\n\n  const state: ColorSliderState = {\n    shape,\n    vertical,\n    channel,\n    components: {\n      input: 'input',\n      rail: 'div',\n      root: 'div',\n      thumb: 'div',\n    },\n    root: slot.always(root, {\n      defaultProps: {\n        role: 'group',\n        ...nativeProps.root,\n      },\n      elementType: 'div',\n    }),\n    input: slot.always(input, {\n      defaultProps: {\n        id: useId('slider-', props.id),\n        ref,\n        min: MIN,\n        max: MAX,\n        tabIndex: 0,\n        ['aria-orientation']: vertical ? 'vertical' : 'horizontal',\n        ...nativeProps.primary,\n        type: 'range',\n      },\n      elementType: 'input',\n    }),\n    rail: slot.always(rail, { elementType: 'div' }),\n    thumb: slot.always(thumb, { elementType: 'div' }),\n  };\n\n  // Root props\n  state.root.style = {\n    ...rootVariables,\n    ...state.root.style,\n  };\n\n  // Input Props\n  state.input.value = clampedValue;\n  state.input.onChange = _onChange;\n  return state;\n};\n"],"names":["React","tinycolor","getPartitionedNativeProps","useId","slot","useControllableState","useEventCallback","colorSliderCSSVars","useFluent_unstable","useFluent","useColorPickerContextValue_unstable","MIN","HUE_MAX","MAX","COLOR_MAX","getPercent","createHsvColor","clampValue","adjustChannel","INITIAL_COLOR_HSV","useColorSlider_unstable","props","ref","dir","onChangeFromContext","ctx","requestChange","colorFromContext","color","shapeFromContext","shape","nativeProps","primarySlotTagName","excludedPropNames","channel","onChange","vertical","root","input","rail","thumb","hsvColor","hslColor","toHsl","currentColor","setCurrentColor","defaultState","defaultColor","state","initialState","valueChannelActions","hue","h","saturation","s","value","v","clampedValue","valuePercent","inputOnChange","_onChange","event","newValue","Number","target","colorActions","newColor","type","rootVariables","sliderDirectionVar","sliderProgressVar","thumbColorVar","toRgbString","railColorVar","l","components","always","defaultProps","role","elementType","id","min","max","tabIndex","primary","style"],"mappings":"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"}
+{"version":3,"sources":["../src/components/ColorSlider/useColorSlider.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { tinycolor } from '@ctrl/tinycolor';\nimport {\n  getPartitionedNativeProps,\n  useId,\n  slot,\n  useControllableState,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport { colorSliderCSSVars } from './useColorSliderStyles.styles';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { ColorSliderProps, ColorSliderState } from './ColorSlider.types';\nimport { useColorPickerContextValue_unstable } from '../../contexts/colorPicker';\nimport { MIN, HUE_MAX, MAX as COLOR_MAX } from '../../utils/constants';\nimport { getPercent } from '../../utils/getPercent';\nimport { createHsvColor } from '../../utils/createHsvColor';\nimport { clampValue, type ChannelActions, adjustChannel } from '../../utils/adjustChannel';\nimport { HsvColor } from '../../types/color';\nimport { INITIAL_COLOR_HSV } from '../../utils/constants';\n\n/**\n * Create the state required to render ColorSlider.\n *\n * The returned state can be modified with hooks such as useColorSliderStyles_unstable,\n * before being passed to renderColorSlider_unstable.\n *\n * @param props - props from this instance of ColorSlider\n * @param ref - reference to root HTMLInputElement of ColorSlider\n */\nexport const useColorSlider_unstable = (\n  props: ColorSliderProps,\n  ref: React.Ref<HTMLInputElement>,\n): ColorSliderState => {\n  'use no memo';\n\n  const { dir } = useFluent();\n  const onChangeFromContext = useColorPickerContextValue_unstable(ctx => ctx.requestChange);\n  const colorFromContext = useColorPickerContextValue_unstable(ctx => ctx.color);\n  const shapeFromContext = useColorPickerContextValue_unstable(ctx => ctx.shape);\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['onChange', 'color'],\n  });\n\n  const {\n    color,\n    channel = 'hue',\n    onChange = onChangeFromContext,\n    shape = shapeFromContext,\n    vertical,\n    // Slots\n    root,\n    input,\n    rail,\n    thumb,\n  } = props;\n\n  const hsvColor = color || colorFromContext;\n  const hslColor = tinycolor(hsvColor).toHsl();\n\n  const [currentColor, setCurrentColor] = useControllableState<HsvColor>({\n    defaultState: props.defaultColor,\n    state: hsvColor,\n    initialState: INITIAL_COLOR_HSV,\n  });\n\n  const MAX = channel === 'hue' ? HUE_MAX : COLOR_MAX;\n\n  const valueChannelActions: ChannelActions<number> = {\n    hue: clampValue(currentColor.h),\n    saturation: clampValue(currentColor.s * 100),\n    value: clampValue(currentColor.v * 100),\n  };\n\n  const clampedValue = adjustChannel(channel, valueChannelActions);\n  const valuePercent = getPercent(clampedValue, MIN, MAX);\n\n  const inputOnChange = input?.onChange;\n\n  const _onChange: React.ChangeEventHandler<HTMLInputElement> = useEventCallback(event => {\n    const newValue = Number(event.target.value);\n    const colorActions: ChannelActions<() => HsvColor> = {\n      hue: () => createHsvColor({ ...hsvColor, h: newValue }),\n      saturation: () => createHsvColor({ ...hsvColor, s: newValue / 100 }),\n      value: () => createHsvColor({ ...hsvColor, v: newValue / 100 }),\n    };\n    const newColor = adjustChannel(channel, colorActions)();\n\n    setCurrentColor(newColor);\n\n    inputOnChange?.(event);\n    onChange?.(event, {\n      type: 'change',\n      event,\n      color: newColor,\n    });\n  });\n\n  const rootVariables = {\n    [colorSliderCSSVars.sliderDirectionVar]: vertical ? '180deg' : dir === 'ltr' ? '-90deg' : '90deg',\n    [colorSliderCSSVars.sliderProgressVar]: `${valuePercent}%`,\n    [colorSliderCSSVars.thumbColorVar]:\n      channel === 'hue' ? `hsl(${clampedValue}, 100%, 50%)` : tinycolor(hsvColor).toRgbString(),\n    [colorSliderCSSVars.railColorVar]:\n      channel === 'hue'\n        ? `hsl(${hslColor.h} ${hslColor.s * 100}%, ${hslColor.l * 100}%)`\n        : `hsl(${hslColor.h} 100%, 50%)`,\n  };\n\n  const state: ColorSliderState = {\n    shape,\n    vertical,\n    channel,\n    components: {\n      input: 'input',\n      rail: 'div',\n      root: 'div',\n      thumb: 'div',\n    },\n    root: slot.always(root, {\n      defaultProps: {\n        role: 'group',\n        ...nativeProps.root,\n      },\n      elementType: 'div',\n    }),\n    input: slot.always(input, {\n      defaultProps: {\n        id: useId('slider-', props.id),\n        ref,\n        min: MIN,\n        max: MAX,\n        tabIndex: 0,\n        ['aria-orientation']: vertical ? 'vertical' : 'horizontal',\n        ...nativeProps.primary,\n        type: 'range',\n      },\n      elementType: 'input',\n    }),\n    rail: slot.always(rail, { elementType: 'div' }),\n    thumb: slot.always(thumb, { elementType: 'div' }),\n  };\n\n  // Root props\n  state.root.style = {\n    ...rootVariables,\n    ...state.root.style,\n  };\n\n  // Input Props\n  state.input.value = clampedValue;\n  state.input.onChange = _onChange;\n  return state;\n};\n"],"names":["React","tinycolor","getPartitionedNativeProps","useId","slot","useControllableState","useEventCallback","colorSliderCSSVars","useFluent_unstable","useFluent","useColorPickerContextValue_unstable","MIN","HUE_MAX","MAX","COLOR_MAX","getPercent","createHsvColor","clampValue","adjustChannel","INITIAL_COLOR_HSV","useColorSlider_unstable","props","ref","dir","onChangeFromContext","ctx","requestChange","colorFromContext","color","shapeFromContext","shape","nativeProps","primarySlotTagName","excludedPropNames","channel","onChange","vertical","root","input","rail","thumb","hsvColor","hslColor","toHsl","currentColor","setCurrentColor","defaultState","defaultColor","state","initialState","valueChannelActions","hue","h","saturation","s","value","v","clampedValue","valuePercent","inputOnChange","_onChange","event","newValue","Number","target","colorActions","newColor","type","rootVariables","sliderDirectionVar","sliderProgressVar","thumbColorVar","toRgbString","railColorVar","l","components","always","defaultProps","role","elementType","id","min","max","tabIndex","primary","style"],"mappings":"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"}

package/lib/components/ColorSlider/useColorSliderStyles.styles.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { __styles, __resetStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 export const colorSliderClassNames = {

package/lib/components/ColorSlider/useColorSliderStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","__resetStyles","mergeClasses","tokens","colorSliderClassNames","root","rail","thumb","input","colorSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","thumbSizeVar","railSizeVar","hueBackground","join","useRootStyles","useStyles","horizontal","Bf4jedk","wkccdc","Budl1dq","vertical","sshi5w","d","useChannelStyles","hue","Bcmaq0h","saturation","value","useRailStyles","Bkecrkj","Ijaq50","nk6f5a","Br312pm","Bw0ie65","qhf8xq","Bvjb7m6","Bpd4iqm","oeaueh","Bw0xxkn","Ftih45","Brfgrao","a9b677","Bqenvij","Fbdkly","mdwyqc","Baz25je","Ccq8qp","Bciustq","lawp4y","useThumbStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","De3pzq","gc50h5","r59vdv","Budzafs","ck0cow","n07z76","Gng75u","Bcvre1j","Bcgcnre","Bqjgrrk","qa3bma","y0oebl","Biqmznv","Bm6vgfq","Bbv0w2i","uvfttm","eqrjj","Bk5zm6e","m598lv","B4f6apu","ydt019","Bq4z7u6","Bdkvgpv","B0qfbqy","kj8mxx","Bz10aip","oyh7mz","B5kzvoi","p","useShapeStyles","rounded","square","useInputStyles","Bceei9c","abs64n","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","jo39rj","C5zqim","Bdlbwnu","B8rk77i","Bbzx7hc","Hwkvcz","B0nnt1c","Brwsv5j","B2b7vog","B4hmq5e","B8jxwem","B18nadz","Ddg5ig","Byj09el","Dac2s3","Dd2y6r","Bk0t58e","Ewenww","Brqi8qb","zz3kca","low6xx","d0s10n","wea7l5","olu5tv","g5nsvh","Bqvnfwh","Biqzhck","kgocjf","i","useColorSliderStyles_unstable","state","rootStyles","styles","railStyles","thumbStyles","inputStyles","shapeStyles","channelStyles","isVertical","className","channel","shape"],"sources":["useColorSliderStyles.styles.js"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const colorSliderClassNames = {\n    root: 'fui-ColorSlider',\n    rail: 'fui-ColorSlider__rail',\n    thumb: 'fui-ColorSlider__thumb',\n    input: 'fui-ColorSlider__input'\n};\nexport const colorSliderCSSVars = {\n    sliderDirectionVar: `--fui-Slider--direction`,\n    sliderProgressVar: `--fui-Slider--progress`,\n    thumbColorVar: `--fui-Slider__thumb--color`,\n    railColorVar: `--fui-Slider__rail--color`,\n    thumbSizeVar: `--fui-Slider__thumb--size`,\n    railSizeVar: `--fui-Slider__rail--size`\n};\nconst hueBackground = `linear-gradient(${[\n    `var(${colorSliderCSSVars.sliderDirectionVar})`,\n    'red',\n    'fuchsia',\n    'blue',\n    'aqua',\n    'lime',\n    'yellow',\n    'red'\n].join(',')})`;\n/**\n * Styles for the root slot\n */ const useRootStyles = makeResetStyles({\n    position: 'relative',\n    display: 'inline-grid',\n    touchAction: 'none',\n    alignItems: 'center',\n    justifyItems: 'center',\n    [colorSliderCSSVars.thumbSizeVar]: '20px',\n    [colorSliderCSSVars.railSizeVar]: '20px',\n    minHeight: '32px'\n});\nconst useStyles = makeStyles({\n    horizontal: {\n        minWidth: '200px',\n        // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n        gridTemplateRows: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`,\n        gridTemplateColumns: `1fr 100% 1fr`\n    },\n    vertical: {\n        minHeight: '280px',\n        // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n        gridTemplateRows: `1fr 100% 1fr`,\n        gridTemplateColumns: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`\n    }\n});\nconst useChannelStyles = makeStyles({\n    hue: {\n        backgroundImage: hueBackground\n    },\n    saturation: {\n        backgroundImage: `linear-gradient(to right, #808080, var(${colorSliderCSSVars.railColorVar}))`\n    },\n    value: {\n        backgroundImage: `linear-gradient(to right, #000, var(${colorSliderCSSVars.railColorVar}))`\n    }\n});\n/**\n * Styles for the rail slot\n */ const useRailStyles = makeStyles({\n    rail: {\n        pointerEvents: 'none',\n        gridRowStart: '2',\n        gridRowEnd: '2',\n        gridColumnStart: '2',\n        gridColumnEnd: '2',\n        position: 'relative',\n        forcedColorAdjust: 'none',\n        outlineWidth: '1px',\n        outlineStyle: 'solid',\n        outlineColor: tokens.colorTransparentStroke,\n        '::before': {\n            content: \"''\",\n            position: 'absolute'\n        }\n    },\n    horizontal: {\n        width: '100%',\n        height: `var(${colorSliderCSSVars.railSizeVar})`,\n        '::before': {\n            left: '-1px',\n            right: '-1px',\n            height: `var(${colorSliderCSSVars.railSizeVar})`\n        }\n    },\n    vertical: {\n        width: `var(${colorSliderCSSVars.railSizeVar})`,\n        height: '100%',\n        '::before': {\n            width: `var(${colorSliderCSSVars.railSizeVar})`,\n            top: '-1px',\n            bottom: '1px'\n        }\n    }\n});\n/**\n * Styles for the thumb slot\n */ const useThumbStyles = makeStyles({\n    thumb: {\n        gridRowStart: '2',\n        gridRowEnd: '2',\n        gridColumnStart: '2',\n        gridColumnEnd: '2',\n        position: 'absolute',\n        width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n        height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n        pointerEvents: 'none',\n        outlineStyle: 'none',\n        forcedColorAdjust: 'none',\n        borderRadius: tokens.borderRadiusCircular,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,\n        boxShadow: tokens.shadow4,\n        backgroundColor: `var(${colorSliderCSSVars.thumbColorVar})`,\n        '::before': {\n            position: 'absolute',\n            inset: '0px',\n            borderRadius: tokens.borderRadiusCircular,\n            boxSizing: 'border-box',\n            content: \"''\",\n            border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`\n        }\n    },\n    horizontal: {\n        transform: 'translateX(-50%)',\n        left: `var(${colorSliderCSSVars.sliderProgressVar})`\n    },\n    vertical: {\n        transform: 'translateY(50%)',\n        bottom: `var(${colorSliderCSSVars.sliderProgressVar})`\n    }\n});\nconst useShapeStyles = makeStyles({\n    rounded: {\n        borderRadius: tokens.borderRadiusMedium\n    },\n    square: {\n        borderRadius: tokens.borderRadiusNone\n    }\n});\n/**\n * Styles for the Input slot\n */ const useInputStyles = makeStyles({\n    input: {\n        cursor: 'pointer',\n        opacity: 0,\n        gridRowStart: '1',\n        gridRowEnd: '-1',\n        gridColumnStart: '1',\n        gridColumnEnd: '-1',\n        padding: '0',\n        margin: '0',\n        [`:focus-visible ~ .${colorSliderClassNames.thumb}`]: {\n            border: `2px solid ${tokens.colorStrokeFocus2}`,\n            outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n            borderRadius: tokens.borderRadiusCircular\n        }\n    },\n    horizontal: {\n        height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n        width: '100%'\n    },\n    vertical: {\n        height: '100%',\n        width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n        'writing-mode': 'vertical-lr',\n        direction: 'rtl'\n    }\n});\n/**\n * Apply styling to the ColorSlider slots based on the state\n */ export const useColorSliderStyles_unstable = (state)=>{\n    'use no memo';\n    const rootStyles = useRootStyles();\n    const styles = useStyles();\n    const railStyles = useRailStyles();\n    const thumbStyles = useThumbStyles();\n    const inputStyles = useInputStyles();\n    const shapeStyles = useShapeStyles();\n    const channelStyles = useChannelStyles();\n    const isVertical = state.vertical;\n    state.root.className = mergeClasses(colorSliderClassNames.root, rootStyles, isVertical ? styles.vertical : styles.horizontal, state.root.className);\n    state.rail.className = mergeClasses(colorSliderClassNames.rail, railStyles.rail, channelStyles[state.channel || 'hue'], shapeStyles[state.shape || 'rounded'], isVertical ? railStyles.vertical : railStyles.horizontal, state.rail.className);\n    state.thumb.className = mergeClasses(colorSliderClassNames.thumb, thumbStyles.thumb, isVertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);\n    state.input.className = mergeClasses(colorSliderClassNames.input, inputStyles.input, isVertical ? inputStyles.vertical : inputStyles.horizontal, state.input.className);\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__styles","__resetStyles","mergeClasses","tokens","colorSliderClassNames","root","rail","thumb","input","colorSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","thumbSizeVar","railSizeVar","hueBackground","join","useRootStyles","useStyles","horizontal","Bf4jedk","wkccdc","Budl1dq","vertical","sshi5w","d","useChannelStyles","hue","Bcmaq0h","saturation","value","useRailStyles","Bkecrkj","Ijaq50","nk6f5a","Br312pm","Bw0ie65","qhf8xq","Bvjb7m6","Bpd4iqm","oeaueh","Bw0xxkn","Ftih45","Brfgrao","a9b677","Bqenvij","Fbdkly","mdwyqc","Baz25je","Ccq8qp","Bciustq","lawp4y","useThumbStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","De3pzq","gc50h5","r59vdv","Budzafs","ck0cow","n07z76","Gng75u","Bcvre1j","Bcgcnre","Bqjgrrk","qa3bma","y0oebl","Biqmznv","Bm6vgfq","Bbv0w2i","uvfttm","eqrjj","Bk5zm6e","m598lv","B4f6apu","ydt019","Bq4z7u6","Bdkvgpv","B0qfbqy","kj8mxx","Bz10aip","oyh7mz","B5kzvoi","p","useShapeStyles","rounded","square","useInputStyles","Bceei9c","abs64n","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","jo39rj","C5zqim","Bdlbwnu","B8rk77i","Bbzx7hc","Hwkvcz","B0nnt1c","Brwsv5j","B2b7vog","B4hmq5e","B8jxwem","B18nadz","Ddg5ig","Byj09el","Dac2s3","Dd2y6r","Bk0t58e","Ewenww","Brqi8qb","zz3kca","low6xx","d0s10n","wea7l5","olu5tv","g5nsvh","Bqvnfwh","Biqzhck","kgocjf","i","useColorSliderStyles_unstable","state","rootStyles","styles","railStyles","thumbStyles","inputStyles","shapeStyles","channelStyles","isVertical","className","channel","shape"],"sources":["useColorSliderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const colorSliderClassNames = {\n    root: 'fui-ColorSlider',\n    rail: 'fui-ColorSlider__rail',\n    thumb: 'fui-ColorSlider__thumb',\n    input: 'fui-ColorSlider__input'\n};\nexport const colorSliderCSSVars = {\n    sliderDirectionVar: `--fui-Slider--direction`,\n    sliderProgressVar: `--fui-Slider--progress`,\n    thumbColorVar: `--fui-Slider__thumb--color`,\n    railColorVar: `--fui-Slider__rail--color`,\n    thumbSizeVar: `--fui-Slider__thumb--size`,\n    railSizeVar: `--fui-Slider__rail--size`\n};\nconst hueBackground = `linear-gradient(${[\n    `var(${colorSliderCSSVars.sliderDirectionVar})`,\n    'red',\n    'fuchsia',\n    'blue',\n    'aqua',\n    'lime',\n    'yellow',\n    'red'\n].join(',')})`;\n/**\n * Styles for the root slot\n */ const useRootStyles = makeResetStyles({\n    position: 'relative',\n    display: 'inline-grid',\n    touchAction: 'none',\n    alignItems: 'center',\n    justifyItems: 'center',\n    [colorSliderCSSVars.thumbSizeVar]: '20px',\n    [colorSliderCSSVars.railSizeVar]: '20px',\n    minHeight: '32px'\n});\nconst useStyles = makeStyles({\n    horizontal: {\n        minWidth: '200px',\n        // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n        gridTemplateRows: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`,\n        gridTemplateColumns: `1fr 100% 1fr`\n    },\n    vertical: {\n        minHeight: '280px',\n        // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n        gridTemplateRows: `1fr 100% 1fr`,\n        gridTemplateColumns: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`\n    }\n});\nconst useChannelStyles = makeStyles({\n    hue: {\n        backgroundImage: hueBackground\n    },\n    saturation: {\n        backgroundImage: `linear-gradient(to right, #808080, var(${colorSliderCSSVars.railColorVar}))`\n    },\n    value: {\n        backgroundImage: `linear-gradient(to right, #000, var(${colorSliderCSSVars.railColorVar}))`\n    }\n});\n/**\n * Styles for the rail slot\n */ const useRailStyles = makeStyles({\n    rail: {\n        pointerEvents: 'none',\n        gridRowStart: '2',\n        gridRowEnd: '2',\n        gridColumnStart: '2',\n        gridColumnEnd: '2',\n        position: 'relative',\n        forcedColorAdjust: 'none',\n        outlineWidth: '1px',\n        outlineStyle: 'solid',\n        outlineColor: tokens.colorTransparentStroke,\n        '::before': {\n            content: \"''\",\n            position: 'absolute'\n        }\n    },\n    horizontal: {\n        width: '100%',\n        height: `var(${colorSliderCSSVars.railSizeVar})`,\n        '::before': {\n            left: '-1px',\n            right: '-1px',\n            height: `var(${colorSliderCSSVars.railSizeVar})`\n        }\n    },\n    vertical: {\n        width: `var(${colorSliderCSSVars.railSizeVar})`,\n        height: '100%',\n        '::before': {\n            width: `var(${colorSliderCSSVars.railSizeVar})`,\n            top: '-1px',\n            bottom: '1px'\n        }\n    }\n});\n/**\n * Styles for the thumb slot\n */ const useThumbStyles = makeStyles({\n    thumb: {\n        gridRowStart: '2',\n        gridRowEnd: '2',\n        gridColumnStart: '2',\n        gridColumnEnd: '2',\n        position: 'absolute',\n        width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n        height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n        pointerEvents: 'none',\n        outlineStyle: 'none',\n        forcedColorAdjust: 'none',\n        borderRadius: tokens.borderRadiusCircular,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,\n        boxShadow: tokens.shadow4,\n        backgroundColor: `var(${colorSliderCSSVars.thumbColorVar})`,\n        '::before': {\n            position: 'absolute',\n            inset: '0px',\n            borderRadius: tokens.borderRadiusCircular,\n            boxSizing: 'border-box',\n            content: \"''\",\n            border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`\n        }\n    },\n    horizontal: {\n        transform: 'translateX(-50%)',\n        left: `var(${colorSliderCSSVars.sliderProgressVar})`\n    },\n    vertical: {\n        transform: 'translateY(50%)',\n        bottom: `var(${colorSliderCSSVars.sliderProgressVar})`\n    }\n});\nconst useShapeStyles = makeStyles({\n    rounded: {\n        borderRadius: tokens.borderRadiusMedium\n    },\n    square: {\n        borderRadius: tokens.borderRadiusNone\n    }\n});\n/**\n * Styles for the Input slot\n */ const useInputStyles = makeStyles({\n    input: {\n        cursor: 'pointer',\n        opacity: 0,\n        gridRowStart: '1',\n        gridRowEnd: '-1',\n        gridColumnStart: '1',\n        gridColumnEnd: '-1',\n        padding: '0',\n        margin: '0',\n        [`:focus-visible ~ .${colorSliderClassNames.thumb}`]: {\n            border: `2px solid ${tokens.colorStrokeFocus2}`,\n            outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n            borderRadius: tokens.borderRadiusCircular\n        }\n    },\n    horizontal: {\n        height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n        width: '100%'\n    },\n    vertical: {\n        height: '100%',\n        width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n        'writing-mode': 'vertical-lr',\n        direction: 'rtl'\n    }\n});\n/**\n * Apply styling to the ColorSlider slots based on the state\n */ export const useColorSliderStyles_unstable = (state)=>{\n    'use no memo';\n    const rootStyles = useRootStyles();\n    const styles = useStyles();\n    const railStyles = useRailStyles();\n    const thumbStyles = useThumbStyles();\n    const inputStyles = useInputStyles();\n    const shapeStyles = useShapeStyles();\n    const channelStyles = useChannelStyles();\n    const isVertical = state.vertical;\n    state.root.className = mergeClasses(colorSliderClassNames.root, rootStyles, isVertical ? styles.vertical : styles.horizontal, state.root.className);\n    state.rail.className = mergeClasses(colorSliderClassNames.rail, railStyles.rail, channelStyles[state.channel || 'hue'], shapeStyles[state.shape || 'rounded'], isVertical ? railStyles.vertical : railStyles.horizontal, state.rail.className);\n    state.thumb.className = mergeClasses(colorSliderClassNames.thumb, thumbStyles.thumb, isVertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);\n    state.input.className = mergeClasses(colorSliderClassNames.input, inputStyles.input, isVertical ? inputStyles.vertical : inputStyles.horizontal, state.input.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAAC,aAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE,iBAAiB;EACvBC,IAAI,EAAE,uBAAuB;EAC7BC,KAAK,EAAE,wBAAwB;EAC/BC,KAAK,EAAE;AACX,CAAC;AACD,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,kBAAkB,EAAE,yBAAyB;EAC7CC,iBAAiB,EAAE,wBAAwB;EAC3CC,aAAa,EAAE,4BAA4B;EAC3CC,YAAY,EAAE,2BAA2B;EACzCC,YAAY,EAAE,2BAA2B;EACzCC,WAAW,EAAE;AACjB,CAAC;AACD,MAAMC,aAAa,GAAG,gCAAmB,CACrC,OAAOP,kBAAkB,CAACC,kBAAkB,GAAG,EAC/C,KAAK,EACL,SAAS,EACT,MAAM,EACN,MAAM,EACN,MAAM,EACN,QAAQ,EACR,KAAK,CACR,CAACO,IAAI,CAAC,GAAG,CAAC,GAAG;AACd;AACA;AACA;AAAI,MAAMC,aAAa,gBAAGjB,aAAA,+MASzB,CAAC;AACF,MAAMkB,SAAS,gBAAGnB,QAAA;EAAAoB,UAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAC,MAAA;IAAAH,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAG,CAAA;AAAA,CAajB,CAAC;AACF,MAAMC,gBAAgB,gBAAG3B,QAAA;EAAA4B,GAAA;IAAAC,OAAA;EAAA;EAAAC,UAAA;IAAAD,OAAA;EAAA;EAAAE,KAAA;IAAAF,OAAA;EAAA;AAAA;EAAAH,CAAA;AAAA,CAUxB,CAAC;AACF;AACA;AACA;AAAI,MAAMM,aAAa,gBAAGhC,QAAA;EAAAM,IAAA;IAAA2B,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAxB,UAAA;IAAAyB,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAzB,QAAA;IAAAqB,MAAA;IAAAC,OAAA;IAAAI,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAA1B,CAAA;AAAA,CAmCzB,CAAC;AACF;AACA;AACA;AAAI,MAAM2B,cAAc,gBAAGrD,QAAA;EAAAO,KAAA;IAAA2B,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAO,MAAA;IAAAC,OAAA;IAAAb,OAAA;IAAAQ,MAAA;IAAAF,OAAA;IAAAe,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAjC,OAAA;IAAAQ,MAAA;IAAAL,MAAA;IAAAC,MAAA;IAAAG,OAAA;IAAA2B,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAzC,MAAA;IAAA0C,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,KAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAjF,UAAA;IAAAkF,OAAA;IAAAC,MAAA;EAAA;EAAA/E,QAAA;IAAA8E,OAAA;IAAAE,OAAA;EAAA;AAAA;EAAA9E,CAAA;IAAA+E,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAiC1B,CAAC;AACF,MAAMC,cAAc,gBAAG1G,QAAA;EAAA2G,OAAA;IAAArD,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAkD,MAAA;IAAAtD,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAhC,CAAA;IAAA+E,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAOtB,CAAC;AACF;AACA;AACA;AAAI,MAAMI,cAAc,gBAAG7G,QAAA;EAAAQ,KAAA;IAAAsG,OAAA;IAAAC,MAAA;IAAA7E,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAA2E,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAA/H,UAAA;IAAA0B,OAAA;IAAAD,MAAA;EAAA;EAAArB,QAAA;IAAAsB,OAAA;IAAAD,MAAA;IAAAuG,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAA3H,CAAA;IAAA+E,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAA6C,CAAA;IAAA7C,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CA0B1B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAM8C,6BAA6B,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACb,MAAMC,UAAU,GAAGvI,aAAa,CAAC,CAAC;EAClC,MAAMwI,MAAM,GAAGvI,SAAS,CAAC,CAAC;EAC1B,MAAMwI,UAAU,GAAG3H,aAAa,CAAC,CAAC;EAClC,MAAM4H,WAAW,GAAGvG,cAAc,CAAC,CAAC;EACpC,MAAMwG,WAAW,GAAGhD,cAAc,CAAC,CAAC;EACpC,MAAMiD,WAAW,GAAGpD,cAAc,CAAC,CAAC;EACpC,MAAMqD,aAAa,GAAGpI,gBAAgB,CAAC,CAAC;EACxC,MAAMqI,UAAU,GAAGR,KAAK,CAAChI,QAAQ;EACjCgI,KAAK,CAACnJ,IAAI,CAAC4J,SAAS,GAAG/J,YAAY,CAACE,qBAAqB,CAACC,IAAI,EAAEoJ,UAAU,EAAEO,UAAU,GAAGN,MAAM,CAAClI,QAAQ,GAAGkI,MAAM,CAACtI,UAAU,EAAEoI,KAAK,CAACnJ,IAAI,CAAC4J,SAAS,CAAC;EACnJT,KAAK,CAAClJ,IAAI,CAAC2J,SAAS,GAAG/J,YAAY,CAACE,qBAAqB,CAACE,IAAI,EAAEqJ,UAAU,CAACrJ,IAAI,EAAEyJ,aAAa,CAACP,KAAK,CAACU,OAAO,IAAI,KAAK,CAAC,EAAEJ,WAAW,CAACN,KAAK,CAACW,KAAK,IAAI,SAAS,CAAC,EAAEH,UAAU,GAAGL,UAAU,CAACnI,QAAQ,GAAGmI,UAAU,CAACvI,UAAU,EAAEoI,KAAK,CAAClJ,IAAI,CAAC2J,SAAS,CAAC;EAC9OT,KAAK,CAACjJ,KAAK,CAAC0J,SAAS,GAAG/J,YAAY,CAACE,qBAAqB,CAACG,KAAK,EAAEqJ,WAAW,CAACrJ,KAAK,EAAEyJ,UAAU,GAAGJ,WAAW,CAACpI,QAAQ,GAAGoI,WAAW,CAACxI,UAAU,EAAEoI,KAAK,CAACjJ,KAAK,CAAC0J,SAAS,CAAC;EACvKT,KAAK,CAAChJ,KAAK,CAACyJ,SAAS,GAAG/J,YAAY,CAACE,qBAAqB,CAACI,KAAK,EAAEqJ,WAAW,CAACrJ,KAAK,EAAEwJ,UAAU,GAAGH,WAAW,CAACrI,QAAQ,GAAGqI,WAAW,CAACzI,UAAU,EAAEoI,KAAK,CAAChJ,KAAK,CAACyJ,SAAS,CAAC;EACvK,OAAOT,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/ColorSlider/useColorSliderStyles.styles.raw.js

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 export const colorSliderClassNames = {

package/lib/components/ColorSlider/useColorSliderStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorSlider/useColorSliderStyles.styles.ts"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ColorSliderSlots, ColorSliderState } from './ColorSlider.types';\n\nexport const colorSliderClassNames: SlotClassNames<ColorSliderSlots> = {\n  root: 'fui-ColorSlider',\n  rail: 'fui-ColorSlider__rail',\n  thumb: 'fui-ColorSlider__thumb',\n  input: 'fui-ColorSlider__input',\n};\n\nexport const colorSliderCSSVars = {\n  sliderDirectionVar: `--fui-Slider--direction`,\n  sliderProgressVar: `--fui-Slider--progress`,\n  thumbColorVar: `--fui-Slider__thumb--color`,\n  railColorVar: `--fui-Slider__rail--color`,\n  thumbSizeVar: `--fui-Slider__thumb--size`,\n  railSizeVar: `--fui-Slider__rail--size`,\n};\n\nconst hueBackground = `linear-gradient(${[\n  `var(${colorSliderCSSVars.sliderDirectionVar})`,\n  'red',\n  'fuchsia',\n  'blue',\n  'aqua',\n  'lime',\n  'yellow',\n  'red',\n].join(',')})`;\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeResetStyles({\n  position: 'relative',\n  display: 'inline-grid',\n  touchAction: 'none',\n  alignItems: 'center',\n  justifyItems: 'center',\n  [colorSliderCSSVars.thumbSizeVar]: '20px',\n  [colorSliderCSSVars.railSizeVar]: '20px',\n  minHeight: '32px',\n});\n\nconst useStyles = makeStyles({\n  horizontal: {\n    minWidth: '200px',\n    // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n    gridTemplateRows: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`,\n    gridTemplateColumns: `1fr 100% 1fr`,\n  },\n\n  vertical: {\n    minHeight: '280px',\n    // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n    gridTemplateRows: `1fr 100% 1fr`,\n    gridTemplateColumns: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`,\n  },\n});\n\nconst useChannelStyles = makeStyles({\n  hue: {\n    backgroundImage: hueBackground,\n  },\n  saturation: {\n    backgroundImage: `linear-gradient(to right, #808080, var(${colorSliderCSSVars.railColorVar}))`,\n  },\n  value: {\n    backgroundImage: `linear-gradient(to right, #000, var(${colorSliderCSSVars.railColorVar}))`,\n  },\n});\n\n/**\n * Styles for the rail slot\n */\nconst useRailStyles = makeStyles({\n  rail: {\n    pointerEvents: 'none',\n    gridRowStart: '2',\n    gridRowEnd: '2',\n    gridColumnStart: '2',\n    gridColumnEnd: '2',\n    position: 'relative',\n    forcedColorAdjust: 'none',\n    outlineWidth: '1px',\n    outlineStyle: 'solid',\n    outlineColor: tokens.colorTransparentStroke,\n    '::before': {\n      content: \"''\",\n      position: 'absolute',\n    },\n  },\n\n  horizontal: {\n    width: '100%',\n    height: `var(${colorSliderCSSVars.railSizeVar})`,\n    '::before': {\n      left: '-1px',\n      right: '-1px',\n      height: `var(${colorSliderCSSVars.railSizeVar})`,\n    },\n  },\n\n  vertical: {\n    width: `var(${colorSliderCSSVars.railSizeVar})`,\n    height: '100%',\n    '::before': {\n      width: `var(${colorSliderCSSVars.railSizeVar})`,\n      top: '-1px',\n      bottom: '1px',\n    },\n  },\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n  thumb: {\n    gridRowStart: '2',\n    gridRowEnd: '2',\n    gridColumnStart: '2',\n    gridColumnEnd: '2',\n    position: 'absolute',\n    width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n    height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n    pointerEvents: 'none',\n    outlineStyle: 'none',\n    forcedColorAdjust: 'none',\n    borderRadius: tokens.borderRadiusCircular,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,\n    boxShadow: tokens.shadow4,\n    backgroundColor: `var(${colorSliderCSSVars.thumbColorVar})`,\n    '::before': {\n      position: 'absolute',\n      inset: '0px',\n      borderRadius: tokens.borderRadiusCircular,\n      boxSizing: 'border-box',\n      content: \"''\",\n      border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`,\n    },\n  },\n  horizontal: {\n    transform: 'translateX(-50%)',\n    left: `var(${colorSliderCSSVars.sliderProgressVar})`,\n  },\n  vertical: {\n    transform: 'translateY(50%)',\n    bottom: `var(${colorSliderCSSVars.sliderProgressVar})`,\n  },\n});\n\nconst useShapeStyles = makeStyles({\n  rounded: {\n    borderRadius: tokens.borderRadiusMedium,\n  },\n  square: {\n    borderRadius: tokens.borderRadiusNone,\n  },\n});\n\n/**\n * Styles for the Input slot\n */\nconst useInputStyles = makeStyles({\n  input: {\n    cursor: 'pointer',\n    opacity: 0,\n    gridRowStart: '1',\n    gridRowEnd: '-1',\n    gridColumnStart: '1',\n    gridColumnEnd: '-1',\n    padding: '0',\n    margin: '0',\n    [`:focus-visible ~ .${colorSliderClassNames.thumb}`]: {\n      border: `2px solid ${tokens.colorStrokeFocus2}`,\n      outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n      borderRadius: tokens.borderRadiusCircular,\n    },\n  },\n  horizontal: {\n    height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n    width: '100%',\n  },\n  vertical: {\n    height: '100%',\n    width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n    'writing-mode': 'vertical-lr',\n    direction: 'rtl',\n  },\n});\n\n/**\n * Apply styling to the ColorSlider slots based on the state\n */\nexport const useColorSliderStyles_unstable = (state: ColorSliderState): ColorSliderState => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n  const styles = useStyles();\n  const railStyles = useRailStyles();\n  const thumbStyles = useThumbStyles();\n  const inputStyles = useInputStyles();\n  const shapeStyles = useShapeStyles();\n  const channelStyles = useChannelStyles();\n  const isVertical = state.vertical;\n\n  state.root.className = mergeClasses(\n    colorSliderClassNames.root,\n    rootStyles,\n    isVertical ? styles.vertical : styles.horizontal,\n    state.root.className,\n  );\n\n  state.rail.className = mergeClasses(\n    colorSliderClassNames.rail,\n    railStyles.rail,\n    channelStyles[state.channel || 'hue'],\n    shapeStyles[state.shape || 'rounded'],\n    isVertical ? railStyles.vertical : railStyles.horizontal,\n    state.rail.className,\n  );\n\n  state.thumb.className = mergeClasses(\n    colorSliderClassNames.thumb,\n    thumbStyles.thumb,\n    isVertical ? thumbStyles.vertical : thumbStyles.horizontal,\n    state.thumb.className,\n  );\n\n  state.input.className = mergeClasses(\n    colorSliderClassNames.input,\n    inputStyles.input,\n    isVertical ? inputStyles.vertical : inputStyles.horizontal,\n    state.input.className,\n  );\n  return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","tokens","colorSliderClassNames","root","rail","thumb","input","colorSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","thumbSizeVar","railSizeVar","hueBackground","join","useRootStyles","position","display","touchAction","alignItems","justifyItems","minHeight","useStyles","horizontal","minWidth","gridTemplateRows","gridTemplateColumns","vertical","useChannelStyles","hue","backgroundImage","saturation","value","useRailStyles","pointerEvents","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","forcedColorAdjust","outlineWidth","outlineStyle","outlineColor","colorTransparentStroke","content","width","height","left","right","top","bottom","useThumbStyles","borderRadius","borderRadiusCircular","border","strokeWidthThin","colorNeutralForeground4","boxShadow","shadow4","backgroundColor","inset","boxSizing","strokeWidthThick","colorNeutralBackground1","transform","useShapeStyles","rounded","borderRadiusMedium","square","borderRadiusNone","useInputStyles","cursor","opacity","padding","margin","colorStrokeFocus2","outline","direction","useColorSliderStyles_unstable","state","rootStyles","styles","railStyles","thumbStyles","inputStyles","shapeStyles","channelStyles","isVertical","className","channel","shape"],"mappings":"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"}
+{"version":3,"sources":["../src/components/ColorSlider/useColorSliderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport type { ColorSliderSlots, ColorSliderState } from './ColorSlider.types';\n\nexport const colorSliderClassNames: SlotClassNames<ColorSliderSlots> = {\n  root: 'fui-ColorSlider',\n  rail: 'fui-ColorSlider__rail',\n  thumb: 'fui-ColorSlider__thumb',\n  input: 'fui-ColorSlider__input',\n};\n\nexport const colorSliderCSSVars = {\n  sliderDirectionVar: `--fui-Slider--direction`,\n  sliderProgressVar: `--fui-Slider--progress`,\n  thumbColorVar: `--fui-Slider__thumb--color`,\n  railColorVar: `--fui-Slider__rail--color`,\n  thumbSizeVar: `--fui-Slider__thumb--size`,\n  railSizeVar: `--fui-Slider__rail--size`,\n};\n\nconst hueBackground = `linear-gradient(${[\n  `var(${colorSliderCSSVars.sliderDirectionVar})`,\n  'red',\n  'fuchsia',\n  'blue',\n  'aqua',\n  'lime',\n  'yellow',\n  'red',\n].join(',')})`;\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeResetStyles({\n  position: 'relative',\n  display: 'inline-grid',\n  touchAction: 'none',\n  alignItems: 'center',\n  justifyItems: 'center',\n  [colorSliderCSSVars.thumbSizeVar]: '20px',\n  [colorSliderCSSVars.railSizeVar]: '20px',\n  minHeight: '32px',\n});\n\nconst useStyles = makeStyles({\n  horizontal: {\n    minWidth: '200px',\n    // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n    gridTemplateRows: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`,\n    gridTemplateColumns: `1fr 100% 1fr`,\n  },\n\n  vertical: {\n    minHeight: '280px',\n    // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells\n    gridTemplateRows: `1fr 100% 1fr`,\n    gridTemplateColumns: `1fr var(${colorSliderCSSVars.thumbSizeVar}) 1fr`,\n  },\n});\n\nconst useChannelStyles = makeStyles({\n  hue: {\n    backgroundImage: hueBackground,\n  },\n  saturation: {\n    backgroundImage: `linear-gradient(to right, #808080, var(${colorSliderCSSVars.railColorVar}))`,\n  },\n  value: {\n    backgroundImage: `linear-gradient(to right, #000, var(${colorSliderCSSVars.railColorVar}))`,\n  },\n});\n\n/**\n * Styles for the rail slot\n */\nconst useRailStyles = makeStyles({\n  rail: {\n    pointerEvents: 'none',\n    gridRowStart: '2',\n    gridRowEnd: '2',\n    gridColumnStart: '2',\n    gridColumnEnd: '2',\n    position: 'relative',\n    forcedColorAdjust: 'none',\n    outlineWidth: '1px',\n    outlineStyle: 'solid',\n    outlineColor: tokens.colorTransparentStroke,\n    '::before': {\n      content: \"''\",\n      position: 'absolute',\n    },\n  },\n\n  horizontal: {\n    width: '100%',\n    height: `var(${colorSliderCSSVars.railSizeVar})`,\n    '::before': {\n      left: '-1px',\n      right: '-1px',\n      height: `var(${colorSliderCSSVars.railSizeVar})`,\n    },\n  },\n\n  vertical: {\n    width: `var(${colorSliderCSSVars.railSizeVar})`,\n    height: '100%',\n    '::before': {\n      width: `var(${colorSliderCSSVars.railSizeVar})`,\n      top: '-1px',\n      bottom: '1px',\n    },\n  },\n});\n\n/**\n * Styles for the thumb slot\n */\nconst useThumbStyles = makeStyles({\n  thumb: {\n    gridRowStart: '2',\n    gridRowEnd: '2',\n    gridColumnStart: '2',\n    gridColumnEnd: '2',\n    position: 'absolute',\n    width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n    height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n    pointerEvents: 'none',\n    outlineStyle: 'none',\n    forcedColorAdjust: 'none',\n    borderRadius: tokens.borderRadiusCircular,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForeground4}`,\n    boxShadow: tokens.shadow4,\n    backgroundColor: `var(${colorSliderCSSVars.thumbColorVar})`,\n    '::before': {\n      position: 'absolute',\n      inset: '0px',\n      borderRadius: tokens.borderRadiusCircular,\n      boxSizing: 'border-box',\n      content: \"''\",\n      border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralBackground1}`,\n    },\n  },\n  horizontal: {\n    transform: 'translateX(-50%)',\n    left: `var(${colorSliderCSSVars.sliderProgressVar})`,\n  },\n  vertical: {\n    transform: 'translateY(50%)',\n    bottom: `var(${colorSliderCSSVars.sliderProgressVar})`,\n  },\n});\n\nconst useShapeStyles = makeStyles({\n  rounded: {\n    borderRadius: tokens.borderRadiusMedium,\n  },\n  square: {\n    borderRadius: tokens.borderRadiusNone,\n  },\n});\n\n/**\n * Styles for the Input slot\n */\nconst useInputStyles = makeStyles({\n  input: {\n    cursor: 'pointer',\n    opacity: 0,\n    gridRowStart: '1',\n    gridRowEnd: '-1',\n    gridColumnStart: '1',\n    gridColumnEnd: '-1',\n    padding: '0',\n    margin: '0',\n    [`:focus-visible ~ .${colorSliderClassNames.thumb}`]: {\n      border: `2px solid ${tokens.colorStrokeFocus2}`,\n      outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n      borderRadius: tokens.borderRadiusCircular,\n    },\n  },\n  horizontal: {\n    height: `var(${colorSliderCSSVars.thumbSizeVar})`,\n    width: '100%',\n  },\n  vertical: {\n    height: '100%',\n    width: `var(${colorSliderCSSVars.thumbSizeVar})`,\n    'writing-mode': 'vertical-lr',\n    direction: 'rtl',\n  },\n});\n\n/**\n * Apply styling to the ColorSlider slots based on the state\n */\nexport const useColorSliderStyles_unstable = (state: ColorSliderState): ColorSliderState => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n  const styles = useStyles();\n  const railStyles = useRailStyles();\n  const thumbStyles = useThumbStyles();\n  const inputStyles = useInputStyles();\n  const shapeStyles = useShapeStyles();\n  const channelStyles = useChannelStyles();\n  const isVertical = state.vertical;\n\n  state.root.className = mergeClasses(\n    colorSliderClassNames.root,\n    rootStyles,\n    isVertical ? styles.vertical : styles.horizontal,\n    state.root.className,\n  );\n\n  state.rail.className = mergeClasses(\n    colorSliderClassNames.rail,\n    railStyles.rail,\n    channelStyles[state.channel || 'hue'],\n    shapeStyles[state.shape || 'rounded'],\n    isVertical ? railStyles.vertical : railStyles.horizontal,\n    state.rail.className,\n  );\n\n  state.thumb.className = mergeClasses(\n    colorSliderClassNames.thumb,\n    thumbStyles.thumb,\n    isVertical ? thumbStyles.vertical : thumbStyles.horizontal,\n    state.thumb.className,\n  );\n\n  state.input.className = mergeClasses(\n    colorSliderClassNames.input,\n    inputStyles.input,\n    isVertical ? inputStyles.vertical : inputStyles.horizontal,\n    state.input.className,\n  );\n  return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","tokens","colorSliderClassNames","root","rail","thumb","input","colorSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","thumbSizeVar","railSizeVar","hueBackground","join","useRootStyles","position","display","touchAction","alignItems","justifyItems","minHeight","useStyles","horizontal","minWidth","gridTemplateRows","gridTemplateColumns","vertical","useChannelStyles","hue","backgroundImage","saturation","value","useRailStyles","pointerEvents","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","forcedColorAdjust","outlineWidth","outlineStyle","outlineColor","colorTransparentStroke","content","width","height","left","right","top","bottom","useThumbStyles","borderRadius","borderRadiusCircular","border","strokeWidthThin","colorNeutralForeground4","boxShadow","shadow4","backgroundColor","inset","boxSizing","strokeWidthThick","colorNeutralBackground1","transform","useShapeStyles","rounded","borderRadiusMedium","square","borderRadiusNone","useInputStyles","cursor","opacity","padding","margin","colorStrokeFocus2","outline","direction","useColorSliderStyles_unstable","state","rootStyles","styles","railStyles","thumbStyles","inputStyles","shapeStyles","channelStyles","isVertical","className","channel","shape"],"mappings":"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"}

package/lib/contexts/colorPicker.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
 export const useColorPickerContextValues = (state)=>{

package/lib/contexts/colorPicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/colorPicker.ts"],"sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { ColorPickerState, ColorPickerProps } from '../components/ColorPicker/ColorPicker.types';\nimport type { HsvColor } from '../types/color';\n\n/**\n * The context through which individual color controls communicate with the picker.\n */\nexport type ColorPickerContextValue = Pick<ColorPickerProps, 'shape' | 'color'> & {\n  /**\n   * @internal\n   * Callback used by Sliders to request a change on it's selected value\n   * Should be used to get value of color channel\n   */\n  requestChange: (event: React.ChangeEvent<HTMLInputElement>, data: { color: HsvColor }) => void;\n};\n\nexport const useColorPickerContextValues = (state: ColorPickerState): ColorPickerContextValues => {\n  const { color, shape, requestChange } = state;\n\n  // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n  const colorPicker: ColorPickerContextValue = {\n    requestChange,\n    color,\n    shape,\n  };\n\n  return { colorPicker };\n};\n\nexport const colorPickerContextDefaultValue: ColorPickerContextValue = {\n  requestChange: () => {\n    /*noop*/\n  },\n  color: undefined,\n  shape: 'rounded',\n};\n\nexport type ColorPickerContextValues = {\n  colorPicker: ColorPickerContextValue;\n};\n\nconst colorPickerContext = createContext<ColorPickerContextValue | undefined>(\n  undefined,\n) as Context<ColorPickerContextValue>;\n\nexport const ColorPickerProvider = colorPickerContext.Provider;\n\nexport const useColorPickerContextValue_unstable = <T>(selector: ContextSelector<ColorPickerContextValue, T>): T =>\n  useContextSelector(colorPickerContext, (ctx = colorPickerContextDefaultValue) => selector(ctx));\n"],"names":["React","createContext","useContextSelector","useColorPickerContextValues","state","color","shape","requestChange","colorPicker","colorPickerContextDefaultValue","undefined","colorPickerContext","ColorPickerProvider","Provider","useColorPickerContextValue_unstable","selector","ctx"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAiBrF,OAAO,MAAMC,8BAA8B,CAACC;IAC1C,MAAM,EAAEC,KAAK,EAAEC,KAAK,EAAEC,aAAa,EAAE,GAAGH;IAExC,mGAAmG;IACnG,MAAMI,cAAuC;QAC3CD;QACAF;QACAC;IACF;IAEA,OAAO;QAAEE;IAAY;AACvB,EAAE;AAEF,OAAO,MAAMC,iCAA0D;IACrEF,eAAe;IACb,MAAM,GACR;IACAF,OAAOK;IACPJ,OAAO;AACT,EAAE;AAMF,MAAMK,qBAAqBV,cACzBS;AAGF,OAAO,MAAME,sBAAsBD,mBAAmBE,QAAQ,CAAC;AAE/D,OAAO,MAAMC,sCAAsC,CAAIC,WACrDb,mBAAmBS,oBAAoB,CAACK,MAAMP,8BAA8B,GAAKM,SAASC,MAAM"}
+{"version":3,"sources":["../src/contexts/colorPicker.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { ColorPickerState, ColorPickerProps } from '../components/ColorPicker/ColorPicker.types';\nimport type { HsvColor } from '../types/color';\n\n/**\n * The context through which individual color controls communicate with the picker.\n */\nexport type ColorPickerContextValue = Pick<ColorPickerProps, 'shape' | 'color'> & {\n  /**\n   * @internal\n   * Callback used by Sliders to request a change on it's selected value\n   * Should be used to get value of color channel\n   */\n  requestChange: (event: React.ChangeEvent<HTMLInputElement>, data: { color: HsvColor }) => void;\n};\n\nexport const useColorPickerContextValues = (state: ColorPickerState): ColorPickerContextValues => {\n  const { color, shape, requestChange } = state;\n\n  // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n  const colorPicker: ColorPickerContextValue = {\n    requestChange,\n    color,\n    shape,\n  };\n\n  return { colorPicker };\n};\n\nexport const colorPickerContextDefaultValue: ColorPickerContextValue = {\n  requestChange: () => {\n    /*noop*/\n  },\n  color: undefined,\n  shape: 'rounded',\n};\n\nexport type ColorPickerContextValues = {\n  colorPicker: ColorPickerContextValue;\n};\n\nconst colorPickerContext = createContext<ColorPickerContextValue | undefined>(\n  undefined,\n) as Context<ColorPickerContextValue>;\n\nexport const ColorPickerProvider = colorPickerContext.Provider;\n\nexport const useColorPickerContextValue_unstable = <T>(selector: ContextSelector<ColorPickerContextValue, T>): T =>\n  useContextSelector(colorPickerContext, (ctx = colorPickerContextDefaultValue) => selector(ctx));\n"],"names":["React","createContext","useContextSelector","useColorPickerContextValues","state","color","shape","requestChange","colorPicker","colorPickerContextDefaultValue","undefined","colorPickerContext","ColorPickerProvider","Provider","useColorPickerContextValue_unstable","selector","ctx"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAiBrF,OAAO,MAAMC,8BAA8B,CAACC;IAC1C,MAAM,EAAEC,KAAK,EAAEC,KAAK,EAAEC,aAAa,EAAE,GAAGH;IAExC,mGAAmG;IACnG,MAAMI,cAAuC;QAC3CD;QACAF;QACAC;IACF;IAEA,OAAO;QAAEE;IAAY;AACvB,EAAE;AAEF,OAAO,MAAMC,iCAA0D;IACrEF,eAAe;IACb,MAAM,GACR;IACAF,OAAOK;IACPJ,OAAO;AACT,EAAE;AAMF,MAAMK,qBAAqBV,cACzBS;AAGF,OAAO,MAAME,sBAAsBD,mBAAmBE,QAAQ,CAAC;AAE/D,OAAO,MAAMC,sCAAsC,CAAIC,WACrDb,mBAAmBS,oBAAoB,CAACK,MAAMP,8BAA8B,GAAKM,SAASC,MAAM"}

package/lib/utils/adjustChannel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/adjustChannel.ts"],"sourcesContent":["import type { ColorChannel } from '../components/ColorSlider/ColorSlider.types';\nimport { MIN, HUE_MAX, MAX as COLOR_MAX } from './constants';\nimport { clamp } from '@fluentui/react-utilities';\n\n/**\n * Clamps a given value to the valid range for a specified color channel.\n *\n * @param value - The numeric value to be clamped.\n * @param channel - The color channel to use for clamping. Defaults to 'hue'.\n * @returns The clamped value within the range defined by the color channel.\n */\nexport function clampValue(value: number, channel: ColorChannel = 'hue') {\n  const MAX = channel === 'hue' ? HUE_MAX : COLOR_MAX;\n  return clamp(value, MIN, MAX);\n}\n\nexport type ChannelActions<T> = {\n  hue: T;\n  saturation: T;\n  value: T;\n};\n\n/**\n * Adjusts the specified color channel using the provided actions.\n *\n * @template T - The type of the result returned by the actions.\n * @param {ColorChannel} channel - The color channel to adjust.\n * @param {ChannelActions<T>} actions - An object containing actions for each color channel.\n * @returns {T} - The result of the action corresponding to the specified channel, or the hue action if the channel is not found.\n */\nexport function adjustChannel<T>(channel: ColorChannel, actions: ChannelActions<T>): T {\n  return actions[channel] || actions.hue;\n}\n"],"names":["MIN","HUE_MAX","MAX","COLOR_MAX","clamp","clampValue","value","channel","adjustChannel","actions","hue"],"mappings":"AACA,SAASA,GAAG,EAAEC,OAAO,EAAEC,OAAOC,SAAS,QAAQ,cAAc;AAC7D,SAASC,KAAK,QAAQ,4BAA4B;AAElD;;;;;;CAMC,GACD,OAAO,SAASC,WAAWC,KAAa,EAAEC,UAAwB,KAAK;IACrE,MAAML,MAAMK,YAAY,QAAQN,UAAUE;IAC1C,OAAOC,MAAME,OAAON,KAAKE;AAC3B;AAQA;;;;;;;CAOC,GACD,OAAO,SAASM,cAAiBD,OAAqB,EAAEE,OAA0B;IAChF,OAAOA,OAAO,CAACF,QAAQ,IAAIE,QAAQC,GAAG;AACxC"}
+{"version":3,"sources":["../src/utils/adjustChannel.ts"],"sourcesContent":["import type { ColorChannel } from '../components/ColorSlider/ColorSlider.types';\nimport { MIN, HUE_MAX, MAX as COLOR_MAX } from './constants';\nimport { clamp } from '@fluentui/react-utilities';\n\n/**\n * Clamps a given value to the valid range for a specified color channel.\n *\n * @param value - The numeric value to be clamped.\n * @param channel - The color channel to use for clamping. Defaults to 'hue'.\n * @returns The clamped value within the range defined by the color channel.\n */\nexport function clampValue(value: number, channel: ColorChannel = 'hue'): number {\n  const MAX = channel === 'hue' ? HUE_MAX : COLOR_MAX;\n  return clamp(value, MIN, MAX);\n}\n\nexport type ChannelActions<T> = {\n  hue: T;\n  saturation: T;\n  value: T;\n};\n\n/**\n * Adjusts the specified color channel using the provided actions.\n *\n * @template T - The type of the result returned by the actions.\n * @param {ColorChannel} channel - The color channel to adjust.\n * @param {ChannelActions<T>} actions - An object containing actions for each color channel.\n * @returns {T} - The result of the action corresponding to the specified channel, or the hue action if the channel is not found.\n */\nexport function adjustChannel<T>(channel: ColorChannel, actions: ChannelActions<T>): T {\n  return actions[channel] || actions.hue;\n}\n"],"names":["MIN","HUE_MAX","MAX","COLOR_MAX","clamp","clampValue","value","channel","adjustChannel","actions","hue"],"mappings":"AACA,SAASA,GAAG,EAAEC,OAAO,EAAEC,OAAOC,SAAS,QAAQ,cAAc;AAC7D,SAASC,KAAK,QAAQ,4BAA4B;AAElD;;;;;;CAMC,GACD,OAAO,SAASC,WAAWC,KAAa,EAAEC,UAAwB,KAAK;IACrE,MAAML,MAAMK,YAAY,QAAQN,UAAUE;IAC1C,OAAOC,MAAME,OAAON,KAAKE;AAC3B;AAQA;;;;;;;CAOC,GACD,OAAO,SAASM,cAAiBD,OAAqB,EAAEE,OAA0B;IAChF,OAAOA,OAAO,CAACF,QAAQ,IAAIE,QAAQC,GAAG;AACxC"}

package/lib/utils/getCoordinates.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/getCoordinates.ts"],"sourcesContent":["import { clamp } from '@fluentui/react-utilities';\n\n/**\n * Calculates the normalized coordinates of a mouse event relative to a given HTML element.\n *\n * @param element - The HTML element to calculate the coordinates relative to.\n * @param event - The mouse event containing the clientX and clientY properties.\n * @returns An object containing the normalized x and y coordinates, clamped between 0 and 1.\n */\nexport function getCoordinates(element: HTMLElement, event: PointerEvent) {\n  const rect = element.getBoundingClientRect();\n\n  const newX = roundTwoDecimal((event.clientX - rect.left) / rect.width);\n  const newY = roundTwoDecimal(1 - (event.clientY - rect.top) / rect.height);\n\n  return {\n    x: clamp(newX, 0, 1),\n    y: clamp(newY, 0, 1),\n  };\n}\n\n/**\n * Rounds a given number to two decimal places.\n *\n * @param num - The number to be rounded.\n * @returns The number rounded to two decimal places.\n */\nexport function roundTwoDecimal(num: number) {\n  return Math.round(num * 100) / 100;\n}\n"],"names":["clamp","getCoordinates","element","event","rect","getBoundingClientRect","newX","roundTwoDecimal","clientX","left","width","newY","clientY","top","height","x","y","num","Math","round"],"mappings":"AAAA,SAASA,KAAK,QAAQ,4BAA4B;AAElD;;;;;;CAMC,GACD,OAAO,SAASC,eAAeC,OAAoB,EAAEC,KAAmB;IACtE,MAAMC,OAAOF,QAAQG,qBAAqB;IAE1C,MAAMC,OAAOC,gBAAgB,AAACJ,CAAAA,MAAMK,OAAO,GAAGJ,KAAKK,IAAI,AAAD,IAAKL,KAAKM,KAAK;IACrE,MAAMC,OAAOJ,gBAAgB,IAAI,AAACJ,CAAAA,MAAMS,OAAO,GAAGR,KAAKS,GAAG,AAAD,IAAKT,KAAKU,MAAM;IAEzE,OAAO;QACLC,GAAGf,MAAMM,MAAM,GAAG;QAClBU,GAAGhB,MAAMW,MAAM,GAAG;IACpB;AACF;AAEA;;;;;CAKC,GACD,OAAO,SAASJ,gBAAgBU,GAAW;IACzC,OAAOC,KAAKC,KAAK,CAACF,MAAM,OAAO;AACjC"}
+{"version":3,"sources":["../src/utils/getCoordinates.ts"],"sourcesContent":["import { clamp } from '@fluentui/react-utilities';\n\n/**\n * Calculates the normalized coordinates of a mouse event relative to a given HTML element.\n *\n * @param element - The HTML element to calculate the coordinates relative to.\n * @param event - The mouse event containing the clientX and clientY properties.\n * @returns An object containing the normalized x and y coordinates, clamped between 0 and 1.\n */\nexport function getCoordinates(element: HTMLElement, event: PointerEvent): { x: number; y: number } {\n  const rect = element.getBoundingClientRect();\n\n  const newX = roundTwoDecimal((event.clientX - rect.left) / rect.width);\n  const newY = roundTwoDecimal(1 - (event.clientY - rect.top) / rect.height);\n\n  return {\n    x: clamp(newX, 0, 1),\n    y: clamp(newY, 0, 1),\n  };\n}\n\n/**\n * Rounds a given number to two decimal places.\n *\n * @param num - The number to be rounded.\n * @returns The number rounded to two decimal places.\n */\nexport function roundTwoDecimal(num: number): number {\n  return Math.round(num * 100) / 100;\n}\n"],"names":["clamp","getCoordinates","element","event","rect","getBoundingClientRect","newX","roundTwoDecimal","clientX","left","width","newY","clientY","top","height","x","y","num","Math","round"],"mappings":"AAAA,SAASA,KAAK,QAAQ,4BAA4B;AAElD;;;;;;CAMC,GACD,OAAO,SAASC,eAAeC,OAAoB,EAAEC,KAAmB;IACtE,MAAMC,OAAOF,QAAQG,qBAAqB;IAE1C,MAAMC,OAAOC,gBAAgB,AAACJ,CAAAA,MAAMK,OAAO,GAAGJ,KAAKK,IAAI,AAAD,IAAKL,KAAKM,KAAK;IACrE,MAAMC,OAAOJ,gBAAgB,IAAI,AAACJ,CAAAA,MAAMS,OAAO,GAAGR,KAAKS,GAAG,AAAD,IAAKT,KAAKU,MAAM;IAEzE,OAAO;QACLC,GAAGf,MAAMM,MAAM,GAAG;QAClBU,GAAGhB,MAAMW,MAAM,GAAG;IACpB;AACF;AAEA;;;;;CAKC,GACD,OAAO,SAASJ,gBAAgBU,GAAW;IACzC,OAAOC,KAAKC,KAAK,CAACF,MAAM,OAAO;AACjC"}

package/lib/utils/getPercent.js.map

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

package/lib-commonjs/components/AlphaSlider/AlphaSlider.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AlphaSlider/AlphaSlider.tsx"],"sourcesContent":["import * 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":";;;;+BAWaK;;;;;;;iEAXU,QAAQ;gCAES,mBAAmB;mCAChB,sBAAsB;4CACnB,gCAAgC;qCAElC,kCAAkC;AAKvE,oBAAMA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,2CAAAA,EAAwBM,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAC9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOP,6CAAAA,EAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}
+{"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,mBAAmB;mCAChB,sBAAsB;4CACnB,gCAAgC;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/alphaSliderUtils.js.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) {\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) {\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) {\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;;;;;;;;;;;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"}

package/lib-commonjs/components/AlphaSlider/renderAlphaSlider.js.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 { AlphaSliderState, AlphaSliderSlots } from './AlphaSlider.types';\n\n/**\n * Render the final JSX of AlphaSlider\n */\nexport const renderAlphaSlider_unstable = (state: AlphaSliderState) => {\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":";;;;+BASaC;;;;;;4BARb,iCAAiD;gCAErB,4BAA4B;AAMjD,mCAAmC,CAACC;QACzCF,2BAAAA,EAA8BE;IAE9B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;8BACT,eAAA,EAACD,MAAME,KAAK,EAAA,CAAA;8BACZ,eAAA,EAACF,MAAMG,IAAI,EAAA,CAAA;8BACX,eAAA,EAACH,MAAMI,KAAK,EAAA,CAAA;;;AAGlB,EAAE"}
+{"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 { AlphaSliderState, AlphaSliderSlots } from './AlphaSlider.types';\n\n/**\n * Render the final JSX of AlphaSlider\n */\nexport const renderAlphaSlider_unstable = (state: AlphaSliderState): 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"}

package/lib-commonjs/components/AlphaSlider/useAlphaSlider.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AlphaSlider/useAlphaSlider.ts"],"sourcesContent":["import * as React from 'react';\nimport { getPartitionedNativeProps, useId, slot } from '@fluentui/react-utilities';\nimport type { AlphaSliderProps, AlphaSliderState } 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 nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['onChange', 'color'],\n  });\n\n  const {\n    shape = shapeFromContext,\n    vertical,\n    // Slots\n    root,\n    input,\n    rail,\n    thumb,\n  } = props;\n\n  const state: AlphaSliderState = {\n    shape,\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":["React","getPartitionedNativeProps","useId","slot","useAlphaSliderState_unstable","useColorPickerContextValue_unstable","useAlphaSlider_unstable","props","ref","shapeFromContext","ctx","shape","nativeProps","primarySlotTagName","excludedPropNames","vertical","root","input","rail","thumb","state","components","always","defaultProps","elementType","id","primary","type"],"mappings":";;;;+BAeaM;;;;;;;iEAfU,QAAQ;gCACwB,4BAA4B;qCAEtC,wBAAwB;6BACjB,6BAA6B;AAW1E,gCAAgC,CACrCC,OACAC;IAEA,MAAMC,uBAAmBJ,gDAAAA,EAAoCK,CAAAA,MAAOA,IAAIC,KAAK;IAC7E,MAAMC,kBAAcX,yCAAAA,EAA0B;QAC5CM;QACAM,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;SAAQ;IAC1C;IAEA,MAAM,EACJH,QAAQF,gBAAgB,EACxBM,QAAQ,EAERC,AADA,IACI,EACJC,EAFQ,GAEH,EACLC,IAAI,EACJC,KAAK,EACN,GAAGZ;IAEJ,MAAMa,QAA0B;QAC9BT;QACAI;QACAM,YAAY;YACVJ,OAAO;YACPC,MAAM;YACNF,MAAM;YACNG,OAAO;QACT;QACAH,MAAMb,oBAAAA,CAAKmB,MAAM,CAACN,MAAM;YACtBO,cAAcX,YAAYI,IAAI;YAC9BQ,aAAa;QACf;QACAP,OAAOd,oBAAAA,CAAKmB,MAAM,CAACL,OAAO;YACxBM,cAAc;gBACZE,QAAIvB,qBAAAA,EAAM,WAAWK,MAAMkB,EAAE;gBAC7BjB;gBACA,GAAGI,YAAYc,OAAO;gBACtBC,MAAM;YACR;YACAH,aAAa;QACf;QACAN,MAAMf,oBAAAA,CAAKmB,MAAM,CAACJ,MAAM;YAAEM,aAAa;QAAM;QAC7CL,OAAOhB,oBAAAA,CAAKmB,MAAM,CAACH,OAAO;YAAEK,aAAa;QAAM;IACjD;QAEApB,iDAAAA,EAA6BgB,OAAOb;IAEpC,OAAOa;AACT,EAAE"}
+{"version":3,"sources":["../src/components/AlphaSlider/useAlphaSlider.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getPartitionedNativeProps, useId, slot } from '@fluentui/react-utilities';\nimport type { AlphaSliderProps, AlphaSliderState } 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 nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['onChange', 'color'],\n  });\n\n  const {\n    shape = shapeFromContext,\n    vertical,\n    // Slots\n    root,\n    input,\n    rail,\n    thumb,\n  } = props;\n\n  const state: AlphaSliderState = {\n    shape,\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":["React","getPartitionedNativeProps","useId","slot","useAlphaSliderState_unstable","useColorPickerContextValue_unstable","useAlphaSlider_unstable","props","ref","shapeFromContext","ctx","shape","nativeProps","primarySlotTagName","excludedPropNames","vertical","root","input","rail","thumb","state","components","always","defaultProps","elementType","id","primary","type"],"mappings":"AAAA;;;;;+BAiBaM;;;;;;;iEAfU,QAAQ;gCACwB,4BAA4B;qCAEtC,wBAAwB;6BACjB,6BAA6B;AAW1E,gCAAgC,CACrCC,OACAC;IAEA,MAAMC,uBAAmBJ,gDAAAA,EAAoCK,CAAAA,MAAOA,IAAIC,KAAK;IAC7E,MAAMC,cAAcX,6CAAAA,EAA0B;QAC5CM;QACAM,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;SAAQ;IAC1C;IAEA,MAAM,EACJH,QAAQF,gBAAgB,EACxBM,QAAQ,EACR,AACAC,IAAI,EACJC,EAFQ,GAEH,EACLC,IAAI,EACJC,KAAK,EACN,GAAGZ;IAEJ,MAAMa,QAA0B;QAC9BT;QACAI;QACAM,YAAY;YACVJ,OAAO;YACPC,MAAM;YACNF,MAAM;YACNG,OAAO;QACT;QACAH,MAAMb,oBAAAA,CAAKmB,MAAM,CAACN,MAAM;YACtBO,cAAcX,YAAYI,IAAI;YAC9BQ,aAAa;QACf;QACAP,OAAOd,oBAAAA,CAAKmB,MAAM,CAACL,OAAO;YACxBM,cAAc;gBACZE,QAAIvB,qBAAAA,EAAM,WAAWK,MAAMkB,EAAE;gBAC7BjB;gBACA,GAAGI,YAAYc,OAAO;gBACtBC,MAAM;YACR;YACAH,aAAa;QACf;QACAN,MAAMf,oBAAAA,CAAKmB,MAAM,CAACJ,MAAM;YAAEM,aAAa;QAAM;QAC7CL,OAAOhB,oBAAAA,CAAKmB,MAAM,CAACH,OAAO;YAAEK,aAAa;QAAM;IACjD;QAEApB,iDAAAA,EAA6BgB,OAAOb;IAEpC,OAAOa;AACT,EAAE"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

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

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["useAlphaSliderStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useColorSliderStyles_unstable } from '../ColorSlider/useColorSliderStyles.styles';\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};\nexport 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/**\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    'use no memo';\n    const styles = useStyles();\n    const thumbStyles = useThumbStyles();\n    state.root.className = mergeClasses(alphaSliderClassNames.root, state.root.className);\n    state.input.className = mergeClasses(alphaSliderClassNames.input, state.input.className);\n    state.rail.className = mergeClasses(alphaSliderClassNames.rail, styles.rail, state.rail.className);\n    state.thumb.className = mergeClasses(alphaSliderClassNames.thumb, thumbStyles.thumb, state.vertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);\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","TRANSPARENT_IMAGE_URL","alphaSliderClassNames","root","rail","thumb","input","alphaSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","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';\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};\nexport 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/**\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    'use no memo';\n    const styles = useStyles();\n    const thumbStyles = useThumbStyles();\n    state.root.className = mergeClasses(alphaSliderClassNames.root, state.root.className);\n    state.input.className = mergeClasses(alphaSliderClassNames.input, state.input.className);\n    state.rail.className = mergeClasses(alphaSliderClassNames.rail, styles.rail, state.rail.className);\n    state.thumb.className = mergeClasses(alphaSliderClassNames.thumb, thumbStyles.thumb, state.vertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);\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","TRANSPARENT_IMAGE_URL","alphaSliderClassNames","root","rail","thumb","input","alphaSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","useStyles","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bcmaq0h","d","p","useThumbStyles","De3pzq","cmx5o7","horizontal","Bz10aip","oyh7mz","vertical","B5kzvoi","useAlphaSliderStyles_unstable","state","styles","thumbStyles","className"],"mappings":"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"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AlphaSlider/useAlphaSliderStyles.styles.ts"],"sourcesContent":["import { 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';\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\nexport 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\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  'use no memo';\n\n  const styles = useStyles();\n  const thumbStyles = useThumbStyles();\n  state.root.className = mergeClasses(alphaSliderClassNames.root, state.root.className);\n  state.input.className = mergeClasses(alphaSliderClassNames.input, state.input.className);\n  state.rail.className = mergeClasses(alphaSliderClassNames.rail, styles.rail, state.rail.className);\n\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  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","TRANSPARENT_IMAGE_URL","alphaSliderClassNames","root","rail","thumb","input","alphaSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","useStyles","border","colorNeutralStroke1","backgroundImage","useThumbStyles","backgroundColor","colorNeutralBackground1","horizontal","transform","left","vertical","bottom","useAlphaSliderStyles_unstable","state","styles","thumbStyles","className"],"mappings":";;;;;;;;;;;IAeaU,kBAAAA;;;IAPAL,qBAAAA;;;iCA+CAsB;eAAAA;;;uBAvD4B,iBAAiB;4BACnC,wBAAwB;4CAED,6CAA6C;AAG3F,MAAMvB,wBAAwB;AAEvB,8BAAgE;IACrEE,MAAM;IACNC,MAAM;IACNC,OAAO;IACPC,OAAO;AACT,EAAE;AAEK,2BAA2B;IAChCE,oBAAoB,CAAC,4BAA4B,CAAC;IAClDC,mBAAmB,CAAC,2BAA2B,CAAC;IAChDC,eAAe,CAAC,+BAA+B,CAAC;IAChDC,cAAc,CAAC,8BAA8B,CAAC;AAChD,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYf,iBAAAA,EAAW;IAC3BO,MAAM;QACJS,QAAQ,CAAC,UAAU,EAAEd,kBAAAA,CAAOe,mBAAmB,EAAE;QACjDC,iBAAiB,CAAC,oBAAoB,EAAER,mBAAmBC,kBAAkB,CAAC,oBAAoB,EAAED,mBAAmBI,YAAY,CAAC,QAAQ,EAAEV,sBAAsB,CAAC,CAAC;IACxK;AACF;AAEA;;CAEC,GACD,MAAMe,qBAAiBnB,iBAAAA,EAAW;IAChCQ,OAAO;QACLY,iBAAiBlB,kBAAAA,CAAOmB,uBAAuB;QAC/C,YAAY;YACVD,iBAAiB,CAAC,IAAI,EAAEV,mBAAmBG,aAAa,CAAC,CAAC,CAAC;QAC7D;IACF;IACAS,YAAY;QACVC,WAAW;QACXC,MAAM,CAAC,IAAI,EAAEd,mBAAmBE,iBAAiB,CAAC,CAAC,CAAC;IACtD;IACAa,UAAU;QACRF,WAAW;QACXG,QAAQ,CAAC,IAAI,EAAEhB,mBAAmBE,iBAAiB,CAAC,CAAC,CAAC;IACxD;AACF;AAKO,sCAAsC,CAACgB;IAC5C;IAEA,MAAMC,SAASd;IACf,MAAMe,cAAcX;IACpBS,MAAMtB,IAAI,CAACyB,SAAS,OAAG9B,mBAAAA,EAAaI,sBAAsBC,IAAI,EAAEsB,MAAMtB,IAAI,CAACyB,SAAS;IACpFH,MAAMnB,KAAK,CAACsB,SAAS,OAAG9B,mBAAAA,EAAaI,sBAAsBI,KAAK,EAAEmB,MAAMnB,KAAK,CAACsB,SAAS;IACvFH,MAAMrB,IAAI,CAACwB,SAAS,OAAG9B,mBAAAA,EAAaI,sBAAsBE,IAAI,EAAEsB,OAAOtB,IAAI,EAAEqB,MAAMrB,IAAI,CAACwB,SAAS;IAEjGH,MAAMpB,KAAK,CAACuB,SAAS,OAAG9B,mBAAAA,EACtBI,sBAAsBG,KAAK,EAC3BsB,YAAYtB,KAAK,EACjBoB,MAAMH,QAAQ,GAAGK,YAAYL,QAAQ,GAAGK,YAAYR,UAAU,EAC9DM,MAAMpB,KAAK,CAACuB,SAAS;IAGvBH,MAAMpB,KAAK,CAACuB,SAAS,GAAG9B,uBAAAA,EACtBI,sBAAsBG,KAAK,EAC3BsB,YAAYtB,KAAK,EACjBoB,MAAMH,QAAQ,GAAGK,YAAYL,QAAQ,GAAGK,YAAYR,UAAU,EAC9DM,MAAMpB,KAAK,CAACuB,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';\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\nexport 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\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  'use no memo';\n\n  const styles = useStyles();\n  const thumbStyles = useThumbStyles();\n  state.root.className = mergeClasses(alphaSliderClassNames.root, state.root.className);\n  state.input.className = mergeClasses(alphaSliderClassNames.input, state.input.className);\n  state.rail.className = mergeClasses(alphaSliderClassNames.rail, styles.rail, state.rail.className);\n\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  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","TRANSPARENT_IMAGE_URL","alphaSliderClassNames","root","rail","thumb","input","alphaSliderCSSVars","sliderDirectionVar","sliderProgressVar","thumbColorVar","railColorVar","useStyles","border","colorNeutralStroke1","backgroundImage","useThumbStyles","backgroundColor","colorNeutralBackground1","horizontal","transform","left","vertical","bottom","useAlphaSliderStyles_unstable","state","styles","thumbStyles","className"],"mappings":"AAAA;;;;;;;;;;;;sBAiBaU;;;yBAPAL;;;iCA+CAsB;eAAAA;;;uBAvD4B,iBAAiB;4BACnC,wBAAwB;4CAED,6CAA6C;AAG3F,MAAMvB,wBAAwB;AAEvB,MAAMC,wBAA0D;IACrEC,MAAM;IACNC,MAAM;IACNC,OAAO;IACPC,OAAO;AACT,EAAE;AAEK,MAAMC,qBAAqB;IAChCC,oBAAoB,CAAC,4BAA4B,CAAC;IAClDC,mBAAmB,CAAC,2BAA2B,CAAC;IAChDC,eAAe,CAAC,+BAA+B,CAAC;IAChDC,cAAc,CAAC,8BAA8B,CAAC;AAChD,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYf,iBAAAA,EAAW;IAC3BO,MAAM;QACJS,QAAQ,CAAC,UAAU,EAAEd,kBAAAA,CAAOe,mBAAmB,EAAE;QACjDC,iBAAiB,CAAC,oBAAoB,EAAER,mBAAmBC,kBAAkB,CAAC,oBAAoB,EAAED,mBAAmBI,YAAY,CAAC,QAAQ,EAAEV,sBAAsB,CAAC,CAAC;IACxK;AACF;AAEA;;CAEC,GACD,MAAMe,qBAAiBnB,iBAAAA,EAAW;IAChCQ,OAAO;QACLY,iBAAiBlB,kBAAAA,CAAOmB,uBAAuB;QAC/C,YAAY;YACVD,iBAAiB,CAAC,IAAI,EAAEV,mBAAmBG,aAAa,CAAC,CAAC,CAAC;QAC7D;IACF;IACAS,YAAY;QACVC,WAAW;QACXC,MAAM,CAAC,IAAI,EAAEd,mBAAmBE,iBAAiB,CAAC,CAAC,CAAC;IACtD;IACAa,UAAU;QACRF,WAAW;QACXG,QAAQ,CAAC,IAAI,EAAEhB,mBAAmBE,iBAAiB,CAAC,CAAC,CAAC;IACxD;AACF;AAKO,sCAAsC,CAACgB;IAC5C;IAEA,MAAMC,SAASd;IACf,MAAMe,cAAcX;IACpBS,MAAMtB,IAAI,CAACyB,SAAS,GAAG9B,uBAAAA,EAAaI,sBAAsBC,IAAI,EAAEsB,MAAMtB,IAAI,CAACyB,SAAS;IACpFH,MAAMnB,KAAK,CAACsB,SAAS,OAAG9B,mBAAAA,EAAaI,sBAAsBI,KAAK,EAAEmB,MAAMnB,KAAK,CAACsB,SAAS;IACvFH,MAAMrB,IAAI,CAACwB,SAAS,OAAG9B,mBAAAA,EAAaI,sBAAsBE,IAAI,EAAEsB,OAAOtB,IAAI,EAAEqB,MAAMrB,IAAI,CAACwB,SAAS;IAEjGH,MAAMpB,KAAK,CAACuB,SAAS,OAAG9B,mBAAAA,EACtBI,sBAAsBG,KAAK,EAC3BsB,YAAYtB,KAAK,EACjBoB,MAAMH,QAAQ,GAAGK,YAAYL,QAAQ,GAAGK,YAAYR,UAAU,EAC9DM,MAAMpB,KAAK,CAACuB,SAAS;IAGvBH,MAAMpB,KAAK,CAACuB,SAAS,OAAG9B,mBAAAA,EACtBI,sBAAsBG,KAAK,EAC3BsB,YAAYtB,KAAK,EACjBoB,MAAMH,QAAQ,GAAGK,YAAYL,QAAQ,GAAGK,YAAYR,UAAU,EAC9DM,MAAMpB,KAAK,CAACuB,SAAS;QAGvB5B,yDAAAA,EAA8ByB;IAC9B,OAAOA;AACT,EAAE"}

package/lib-commonjs/components/ColorArea/ColorArea.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/ColorArea/ColorArea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ColorArea/ColorArea.tsx"],"sourcesContent":["import * 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":";;;;+BAWaK;;;;;;;iEAXU,QAAQ;8BAEO,iBAAiB;iCACd,oBAAoB;0CACjB,8BAA8B;qCAE9B,kCAAkC;AAKvE,kBAAMA,WAAAA,GAAiDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQR,uCAAAA,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,iBAAiB;iCACd,oBAAoB;0CACjB,8BAA8B;qCAE9B,kCAAkC;AAKvE,MAAMK,YAAAA,WAAAA,GAAiDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,YAAQR,mCAAAA,EAAsBM,OAAOC;QAE3CL,qDAAAA,EAA4BM;QAC5BL,gDAAAA,EAA4B,+BAA+BK;IAE3D,WAAOP,yCAAAA,EAAyBO;AAClC,GAAG;AAEHJ,UAAUK,WAAW,GAAG"}

package/lib-commonjs/components/ColorArea/renderColorArea.js.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 { ColorAreaState, ColorAreaSlots } from './ColorArea.types';\n\n/**\n * Render the final JSX of ColorArea\n */\nexport const renderColorArea_unstable = (state: ColorAreaState) => {\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":";;;;+BASaC;;;;;;4BARb,iCAAiD;gCAErB,4BAA4B;AAMjD,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 { ColorAreaState, ColorAreaSlots } from './ColorArea.types';\n\n/**\n * Render the final JSX of ColorArea\n */\nexport const renderColorArea_unstable = (state: ColorAreaState): JSXElement => {\n  assertSlots<ColorAreaSlots>(state);\n\n  return (\n    <state.root>\n      <state.thumb>\n        <state.inputX />\n        <state.inputY />\n      </state.thumb>\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderColorArea_unstable","state","root","thumb","inputX","inputY"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,iCAAiC,CAACC;QACvCF,2BAAAA,EAA4BE;IAE5B,OAAA,WAAA,OACE,eAAA,EAACA,MAAMC,IAAI,EAAA;kBACT,WAAA,OAAA,gBAAA,EAACD,MAAME,KAAK,EAAA;;kCACV,eAAA,EAACF,MAAMG,MAAM,EAAA,CAAA;kCACb,eAAA,EAACH,MAAMI,MAAM,EAAA,CAAA;;;;AAIrB,EAAE"}

package/lib-commonjs/components/ColorArea/useColorArea.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -49,7 +50,7 @@ const useColorArea_unstable = (props, ref)=>{
         setColor(newColor);
         onChange === null || onChange === void 0 ? void 0 : onChange(event, {
             type: 'change',
-            event: event,
+            event,
             color: newColor
         });
     });