@fluentui/react-color-picker 0.0.0-nightly-20250319-0406.1

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

@@ -0,0 +1,288 @@
+import { __styles, __resetStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const colorSliderClassNames = {
+  root: 'fui-ColorSlider',
+  rail: 'fui-ColorSlider__rail',
+  thumb: 'fui-ColorSlider__thumb',
+  input: 'fui-ColorSlider__input'
+};
+export const colorSliderCSSVars = {
+  sliderDirectionVar: `--fui-Slider--direction`,
+  sliderProgressVar: `--fui-Slider--progress`,
+  thumbColorVar: `--fui-Slider__thumb--color`,
+  railColorVar: `--fui-Slider__rail--color`,
+  thumbSizeVar: `--fui-Slider__thumb--size`,
+  railSizeVar: `--fui-Slider__rail--size`
+};
+const hueBackground = `linear-gradient(${/*#__PURE__*/[`var(${colorSliderCSSVars.sliderDirectionVar})`, 'red', 'fuchsia', 'blue', 'aqua', 'lime', 'yellow', 'red'].join(',')})`;
+/**
+ * Styles for the root slot
+ */
+const useRootStyles = /*#__PURE__*/__resetStyles("r1j9hj9j", null, [".r1j9hj9j{position:relative;display:inline-grid;touch-action:none;align-items:center;justify-items:center;--fui-Slider__thumb--size:20px;--fui-Slider__rail--size:20px;min-height:32px;}"]);
+const useStyles = /*#__PURE__*/__styles({
+  horizontal: {
+    Bf4jedk: "f93ek0f",
+    wkccdc: "fgfd48t",
+    Budl1dq: "f11e9psi"
+  },
+  vertical: {
+    sshi5w: "fwwq4i4",
+    wkccdc: "fqcvrs3",
+    Budl1dq: "fiadc6h"
+  }
+}, {
+  d: [".f93ek0f{min-width:200px;}", ".fgfd48t{grid-template-rows:1fr var(--fui-Slider__thumb--size) 1fr;}", ".f11e9psi{grid-template-columns:1fr 100% 1fr;}", ".fwwq4i4{min-height:280px;}", ".fqcvrs3{grid-template-rows:1fr 100% 1fr;}", ".fiadc6h{grid-template-columns:1fr var(--fui-Slider__thumb--size) 1fr;}"]
+});
+const useChannelStyles = /*#__PURE__*/__styles({
+  hue: {
+    Bcmaq0h: "f1curpo1"
+  },
+  saturation: {
+    Bcmaq0h: ["fdhcg5e", "f1onqon0"]
+  },
+  value: {
+    Bcmaq0h: ["f1r1ueul", "fbtriqu"]
+  }
+}, {
+  d: [".f1curpo1{background-image:linear-gradient(var(--fui-Slider--direction),red,fuchsia,blue,aqua,lime,yellow,red);}", ".fdhcg5e{background-image:linear-gradient(to right, #808080, var(--fui-Slider__rail--color));}", ".f1onqon0{background-image:linear-gradient(to left, #808080, var(--fui-Slider__rail--color));}", ".f1r1ueul{background-image:linear-gradient(to right, #000, var(--fui-Slider__rail--color));}", ".fbtriqu{background-image:linear-gradient(to left, #000, var(--fui-Slider__rail--color));}"]
+});
+/**
+ * Styles for the rail slot
+ */
+const useRailStyles = /*#__PURE__*/__styles({
+  rail: {
+    Bkecrkj: "f1aehjj5",
+    Ijaq50: "faunodf",
+    nk6f5a: "f88nxoq",
+    Br312pm: "fd46tj4",
+    Bw0ie65: "f1e2fz10",
+    qhf8xq: "f10pi13n",
+    Bvjb7m6: "fdgv6k0",
+    Bpd4iqm: "fpvhumw",
+    oeaueh: "f1yog68k",
+    Bw0xxkn: "f13sgyd8",
+    Ftih45: "fzhtfnv",
+    Brfgrao: "f1j7ml58"
+  },
+  horizontal: {
+    a9b677: "fly5x3f",
+    Bqenvij: "f1cy86ho",
+    Fbdkly: ["f1heqfse", "fkh49vu"],
+    mdwyqc: ["fkh49vu", "f1heqfse"],
+    Baz25je: "f16tdq4e"
+  },
+  vertical: {
+    a9b677: "fqxfnkd",
+    Bqenvij: "f1l02sjl",
+    Ccq8qp: "f1rik0od",
+    Bciustq: "f14xwovp",
+    lawp4y: "febq2dz"
+  }
+}, {
+  d: [".f1aehjj5{pointer-events:none;}", ".faunodf{grid-row-start:2;}", ".f88nxoq{grid-row-end:2;}", ".fd46tj4{grid-column-start:2;}", ".f1e2fz10{grid-column-end:2;}", ".f10pi13n{position:relative;}", ".fdgv6k0{forced-color-adjust:none;}", ".fpvhumw{outline-width:1px;}", ".f1yog68k{outline-style:solid;}", ".f13sgyd8{outline-color:var(--colorTransparentStroke);}", ".fzhtfnv::before{content:'';}", ".f1j7ml58::before{position:absolute;}", ".fly5x3f{width:100%;}", ".f1cy86ho{height:var(--fui-Slider__rail--size);}", ".f1heqfse::before{left:-1px;}", ".fkh49vu::before{right:-1px;}", ".f16tdq4e::before{height:var(--fui-Slider__rail--size);}", ".fqxfnkd{width:var(--fui-Slider__rail--size);}", ".f1l02sjl{height:100%;}", ".f1rik0od::before{width:var(--fui-Slider__rail--size);}", ".f14xwovp::before{top:-1px;}", ".febq2dz::before{bottom:1px;}"]
+});
+/**
+ * Styles for the thumb slot
+ */
+const useThumbStyles = /*#__PURE__*/__styles({
+  thumb: {
+    Ijaq50: "faunodf",
+    nk6f5a: "f88nxoq",
+    Br312pm: "fd46tj4",
+    Bw0ie65: "f1e2fz10",
+    qhf8xq: "f1euv43f",
+    a9b677: "f174ca62",
+    Bqenvij: "f1yfdkfd",
+    Bkecrkj: "f1aehjj5",
+    oeaueh: "f1s6fcnf",
+    Bvjb7m6: "fdgv6k0",
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "f44lkw9",
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "f1lvq45z",
+    E5pizo: "f1whvlc6",
+    De3pzq: "foksa45",
+    Brfgrao: "f1j7ml58",
+    lawp4y: 0,
+    Fbdkly: 0,
+    mdwyqc: 0,
+    Bciustq: 0,
+    gc50h5: "f1abv9ik",
+    r59vdv: 0,
+    Budzafs: 0,
+    ck0cow: 0,
+    n07z76: 0,
+    Gng75u: "fielpny",
+    Bcvre1j: "fyl8oag",
+    Ftih45: "fzhtfnv",
+    Bcgcnre: 0,
+    Bqjgrrk: 0,
+    qa3bma: 0,
+    y0oebl: 0,
+    Biqmznv: 0,
+    Bm6vgfq: 0,
+    Bbv0w2i: 0,
+    uvfttm: 0,
+    eqrjj: 0,
+    Bk5zm6e: 0,
+    m598lv: 0,
+    B4f6apu: 0,
+    ydt019: 0,
+    Bq4z7u6: 0,
+    Bdkvgpv: 0,
+    B0qfbqy: 0,
+    kj8mxx: "f3i7wkk"
+  },
+  horizontal: {
+    Bz10aip: ["f13gfj74", "f1nfknbn"],
+    oyh7mz: ["f1fj3zth", "fcf9u6w"]
+  },
+  vertical: {
+    Bz10aip: "f5cv5a3",
+    B5kzvoi: "feeniun"
+  }
+}, {
+  d: [".faunodf{grid-row-start:2;}", ".f88nxoq{grid-row-end:2;}", ".fd46tj4{grid-column-start:2;}", ".f1e2fz10{grid-column-end:2;}", ".f1euv43f{position:absolute;}", ".f174ca62{width:var(--fui-Slider__thumb--size);}", ".f1yfdkfd{height:var(--fui-Slider__thumb--size);}", ".f1aehjj5{pointer-events:none;}", ".f1s6fcnf{outline-style:none;}", ".fdgv6k0{forced-color-adjust:none;}", [".f44lkw9{border-radius:var(--borderRadiusCircular);}", {
+    p: -1
+  }], [".f1lvq45z{border:var(--strokeWidthThin) solid var(--colorNeutralForeground4);}", {
+    p: -2
+  }], ".f1whvlc6{box-shadow:var(--shadow4);}", ".foksa45{background-color:var(--fui-Slider__thumb--color);}", ".f1j7ml58::before{position:absolute;}", [".f1abv9ik::before{inset:0px;}", {
+    p: -1
+  }], [".fielpny::before{border-radius:var(--borderRadiusCircular);}", {
+    p: -1
+  }], ".fyl8oag::before{box-sizing:border-box;}", ".fzhtfnv::before{content:'';}", [".f3i7wkk::before{border:var(--strokeWidthThick) solid var(--colorNeutralBackground1);}", {
+    p: -2
+  }], ".f13gfj74{transform:translateX(-50%);}", ".f1nfknbn{transform:translateX(50%);}", ".f1fj3zth{left:var(--fui-Slider--progress);}", ".fcf9u6w{right:var(--fui-Slider--progress);}", ".f5cv5a3{transform:translateY(50%);}", ".feeniun{bottom:var(--fui-Slider--progress);}"]
+});
+const useShapeStyles = /*#__PURE__*/__styles({
+  rounded: {
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "ft85np5"
+  },
+  square: {
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "f1fabniw"
+  }
+}, {
+  d: [[".ft85np5{border-radius:var(--borderRadiusMedium);}", {
+    p: -1
+  }], [".f1fabniw{border-radius:var(--borderRadiusNone);}", {
+    p: -1
+  }]]
+});
+/**
+ * Styles for the Input slot
+ */
+const useInputStyles = /*#__PURE__*/__styles({
+  input: {
+    Bceei9c: "f1k6fduh",
+    abs64n: "fk73vx1",
+    Ijaq50: "f16hsg94",
+    nk6f5a: "f1nzqi2z",
+    Br312pm: "fwpfdsa",
+    Bw0ie65: "fuur7zz",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1mk8lai",
+    jrapky: 0,
+    Frg6f3: 0,
+    t21cq0: 0,
+    B6of3ja: 0,
+    B74szlk: "f1s184ao",
+    jo39rj: 0,
+    C5zqim: 0,
+    Bdlbwnu: 0,
+    B8rk77i: 0,
+    Bbzx7hc: 0,
+    Hwkvcz: 0,
+    B0nnt1c: 0,
+    Brwsv5j: 0,
+    B2b7vog: 0,
+    B4hmq5e: 0,
+    B8jxwem: 0,
+    B18nadz: 0,
+    Ddg5ig: 0,
+    Byj09el: 0,
+    Dac2s3: 0,
+    Dd2y6r: 0,
+    Bk0t58e: "f1nq8t98",
+    Ewenww: 0,
+    Brqi8qb: 0,
+    zz3kca: 0,
+    low6xx: "fjt56wq",
+    d0s10n: 0,
+    wea7l5: 0,
+    olu5tv: 0,
+    g5nsvh: 0,
+    Bqvnfwh: "f1n9m442"
+  },
+  horizontal: {
+    Bqenvij: "f1yfdkfd",
+    a9b677: "fly5x3f"
+  },
+  vertical: {
+    Bqenvij: "f1l02sjl",
+    a9b677: "f174ca62",
+    Biqzhck: "f1r7j8g6",
+    kgocjf: ["f1va4sj6", "f1r2v9sp"]
+  }
+}, {
+  d: [".f1k6fduh{cursor:pointer;}", ".fk73vx1{opacity:0;}", ".f16hsg94{grid-row-start:1;}", ".f1nzqi2z{grid-row-end:-1;}", ".fwpfdsa{grid-column-start:1;}", ".fuur7zz{grid-column-end:-1;}", [".f1mk8lai{padding:0;}", {
+    p: -1
+  }], [".f1s184ao{margin:0;}", {
+    p: -1
+  }], ".f1yfdkfd{height:var(--fui-Slider__thumb--size);}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f174ca62{width:var(--fui-Slider__thumb--size);}", ".f1r7j8g6{writing-mode:vertical-lr;}", ".f1va4sj6{direction:rtl;}", ".f1r2v9sp{direction:ltr;}"],
+  i: [[".f1nq8t98:focus-visible~.fui-ColorSlider__thumb{border:2px solid var(--colorStrokeFocus2);}", {
+    p: -2
+  }], [".fjt56wq:focus-visible~.fui-ColorSlider__thumb{outline:var(--strokeWidthThick) solid var(--colorTransparentStroke);}", {
+    p: -1
+  }], [".f1n9m442:focus-visible~.fui-ColorSlider__thumb{border-radius:var(--borderRadiusCircular);}", {
+    p: -1
+  }]]
+});
+/**
+ * Apply styling to the ColorSlider slots based on the state
+ */
+export const useColorSliderStyles_unstable = state => {
+  'use no memo';
+
+  const rootStyles = useRootStyles();
+  const styles = useStyles();
+  const railStyles = useRailStyles();
+  const thumbStyles = useThumbStyles();
+  const inputStyles = useInputStyles();
+  const shapeStyles = useShapeStyles();
+  const channelStyles = useChannelStyles();
+  const isVertical = state.vertical;
+  state.root.className = mergeClasses(colorSliderClassNames.root, rootStyles, isVertical ? styles.vertical : styles.horizontal, state.root.className);
+  state.rail.className = mergeClasses(colorSliderClassNames.rail, railStyles.rail, channelStyles[state.channel || 'hue'], shapeStyles[state.shape || 'rounded'], isVertical ? railStyles.vertical : railStyles.horizontal, state.rail.className);
+  state.thumb.className = mergeClasses(colorSliderClassNames.thumb, thumbStyles.thumb, isVertical ? thumbStyles.vertical : thumbStyles.horizontal, state.thumb.className);
+  state.input.className = mergeClasses(colorSliderClassNames.input, inputStyles.input, isVertical ? inputStyles.vertical : inputStyles.horizontal, state.input.className);
+  return state;
+};

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

@@ -0,0 +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":[]}

package/lib/contexts/colorPicker.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { createContext, useContextSelector } from '@fluentui/react-context-selector';
+export const useColorPickerContextValues = (state)=>{
+    const { color, shape, requestChange } = state;
+    // This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
+    const colorPicker = {
+        requestChange,
+        color,
+        shape
+    };
+    return {
+        colorPicker
+    };
+};
+export const colorPickerContextDefaultValue = {
+    requestChange: ()=>{
+    /*noop*/ },
+    color: undefined,
+    shape: 'rounded'
+};
+const colorPickerContext = createContext(undefined);
+export const ColorPickerProvider = colorPickerContext.Provider;
+export const useColorPickerContextValue_unstable = (selector)=>useContextSelector(colorPickerContext, (ctx = colorPickerContextDefaultValue)=>selector(ctx));

package/lib/contexts/colorPicker.js.map

@@ -0,0 +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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","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"}

package/lib/index.js

@@ -0,0 +1,4 @@
+export { ColorSlider, colorSliderClassNames, renderColorSlider_unstable, useColorSliderStyles_unstable, useColorSlider_unstable } from './ColorSlider';
+export { ColorPicker, colorPickerClassNames, renderColorPicker_unstable, useColorPickerStyles_unstable, useColorPicker_unstable } from './ColorPicker';
+export { ColorArea, colorAreaClassNames, renderColorArea_unstable, useColorAreaStyles_unstable, useColorArea_unstable } from './ColorArea';
+export { AlphaSlider, alphaSliderClassNames, renderAlphaSlider_unstable, useAlphaSliderStyles_unstable, useAlphaSlider_unstable } from './AlphaSlider';

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export type { ColorSliderProps, ColorSliderSlots, ColorSliderState } from './ColorSlider';\nexport {\n  ColorSlider,\n  colorSliderClassNames,\n  renderColorSlider_unstable,\n  useColorSliderStyles_unstable,\n  useColorSlider_unstable,\n} from './ColorSlider';\nexport type { ColorPickerProps, ColorPickerSlots, ColorPickerState } from './ColorPicker';\nexport {\n  ColorPicker,\n  colorPickerClassNames,\n  renderColorPicker_unstable,\n  useColorPickerStyles_unstable,\n  useColorPicker_unstable,\n} from './ColorPicker';\nexport type { ColorAreaProps, ColorAreaSlots, ColorAreaState } from './ColorArea';\nexport {\n  ColorArea,\n  colorAreaClassNames,\n  renderColorArea_unstable,\n  useColorAreaStyles_unstable,\n  useColorArea_unstable,\n} from './ColorArea';\nexport type { AlphaSliderProps, AlphaSliderSlots, AlphaSliderState } from './AlphaSlider';\nexport {\n  AlphaSlider,\n  alphaSliderClassNames,\n  renderAlphaSlider_unstable,\n  useAlphaSliderStyles_unstable,\n  useAlphaSlider_unstable,\n} from './AlphaSlider';\n"],"names":["ColorSlider","colorSliderClassNames","renderColorSlider_unstable","useColorSliderStyles_unstable","useColorSlider_unstable","ColorPicker","colorPickerClassNames","renderColorPicker_unstable","useColorPickerStyles_unstable","useColorPicker_unstable","ColorArea","colorAreaClassNames","renderColorArea_unstable","useColorAreaStyles_unstable","useColorArea_unstable","AlphaSlider","alphaSliderClassNames","renderAlphaSlider_unstable","useAlphaSliderStyles_unstable","useAlphaSlider_unstable"],"rangeMappings":";;;","mappings":"AACA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,gBAAgB;AAEvB,SACEC,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,gBAAgB;AAEvB,SACEC,SAAS,EACTC,mBAAmB,EACnBC,wBAAwB,EACxBC,2BAA2B,EAC3BC,qBAAqB,QAChB,cAAc;AAErB,SACEC,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,gBAAgB"}

package/lib/types/color.js

@@ -0,0 +1 @@
+export { };

package/lib/types/color.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/types/color.ts"],"sourcesContent":["export type HsvColor = {\n  h: number;\n  s: number;\n  v: number;\n  a?: number;\n};\n"],"names":[],"rangeMappings":"","mappings":"AAAA,WAKE"}

package/lib/utils/adjustChannel.js

@@ -0,0 +1,22 @@
+import { MIN, HUE_MAX, MAX as COLOR_MAX } from './constants';
+import { clamp } from '@fluentui/react-utilities';
+/**
+ * Clamps a given value to the valid range for a specified color channel.
+ *
+ * @param value - The numeric value to be clamped.
+ * @param channel - The color channel to use for clamping. Defaults to 'hue'.
+ * @returns The clamped value within the range defined by the color channel.
+ */ export function clampValue(value, channel = 'hue') {
+    const MAX = channel === 'hue' ? HUE_MAX : COLOR_MAX;
+    return clamp(value, MIN, MAX);
+}
+/**
+ * Adjusts the specified color channel using the provided actions.
+ *
+ * @template T - The type of the result returned by the actions.
+ * @param {ColorChannel} channel - The color channel to adjust.
+ * @param {ChannelActions<T>} actions - An object containing actions for each color channel.
+ * @returns {T} - The result of the action corresponding to the specified channel, or the hue action if the channel is not found.
+ */ export function adjustChannel(channel, actions) {
+    return actions[channel] || actions.hue;
+}

package/lib/utils/adjustChannel.js.map

@@ -0,0 +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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","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/constants.js

@@ -0,0 +1,6 @@
+import { tinycolor } from '@ctrl/tinycolor';
+export const MIN = 0;
+export const MAX = 100;
+export const HUE_MAX = 360;
+export const INITIAL_COLOR = '#FFF';
+export const INITIAL_COLOR_HSV = tinycolor(INITIAL_COLOR).toHsv();

package/lib/utils/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/constants.ts"],"sourcesContent":["import { tinycolor } from '@ctrl/tinycolor';\n\nexport const MIN = 0;\nexport const MAX = 100;\nexport const HUE_MAX = 360;\nexport const INITIAL_COLOR = '#FFF';\nexport const INITIAL_COLOR_HSV = tinycolor(INITIAL_COLOR).toHsv();\n"],"names":["tinycolor","MIN","MAX","HUE_MAX","INITIAL_COLOR","INITIAL_COLOR_HSV","toHsv"],"rangeMappings":";;;;;","mappings":"AAAA,SAASA,SAAS,QAAQ,kBAAkB;AAE5C,OAAO,MAAMC,MAAM,EAAE;AACrB,OAAO,MAAMC,MAAM,IAAI;AACvB,OAAO,MAAMC,UAAU,IAAI;AAC3B,OAAO,MAAMC,gBAAgB,OAAO;AACpC,OAAO,MAAMC,oBAAoBL,UAAUI,eAAeE,KAAK,GAAG"}

package/lib/utils/createHsvColor.js

@@ -0,0 +1,17 @@
+/**
+ * Creates an HSV color object with optional hue, saturation, value, and alpha components.
+ *
+ * @param {Partial<HsvColor>} param0 - An object containing optional HSV color components:
+ *  - `h` (number): The hue component, default is 0.
+ *  - `s` (number): The saturation component, default is 0.
+ *  - `v` (number): The value component, default is 0.
+ *  - `a` (number): The alpha component, default is 1.
+ * @returns {HsvColor} The resulting HSV color object.
+ */ export function createHsvColor({ h = 0, s = 0, v = 0, a = 1 }) {
+    return {
+        h,
+        s,
+        v,
+        a
+    };
+}

package/lib/utils/createHsvColor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/createHsvColor.ts"],"sourcesContent":["import { HsvColor } from '../types/color';\n\n/**\n * Creates an HSV color object with optional hue, saturation, value, and alpha components.\n *\n * @param {Partial<HsvColor>} param0 - An object containing optional HSV color components:\n *  - `h` (number): The hue component, default is 0.\n *  - `s` (number): The saturation component, default is 0.\n *  - `v` (number): The value component, default is 0.\n *  - `a` (number): The alpha component, default is 1.\n * @returns {HsvColor} The resulting HSV color object.\n */\nexport function createHsvColor({ h = 0, s = 0, v = 0, a = 1 }: Partial<HsvColor>): HsvColor {\n  return { h, s, v, a };\n}\n"],"names":["createHsvColor","h","s","v","a"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":"AAEA;;;;;;;;;CASC,GACD,OAAO,SAASA,eAAe,EAAEC,IAAI,CAAC,EAAEC,IAAI,CAAC,EAAEC,IAAI,CAAC,EAAEC,IAAI,CAAC,EAAqB;IAC9E,OAAO;QAAEH;QAAGC;QAAGC;QAAGC;IAAE;AACtB"}

package/lib/utils/getCoordinates.js

@@ -0,0 +1,24 @@
+import { clamp } from '@fluentui/react-utilities';
+/**
+ * Calculates the normalized coordinates of a mouse event relative to a given HTML element.
+ *
+ * @param element - The HTML element to calculate the coordinates relative to.
+ * @param event - The mouse event containing the clientX and clientY properties.
+ * @returns An object containing the normalized x and y coordinates, clamped between 0 and 1.
+ */ export function getCoordinates(element, event) {
+    const rect = element.getBoundingClientRect();
+    const newX = roundTwoDecimal((event.clientX - rect.left) / rect.width);
+    const newY = roundTwoDecimal(1 - (event.clientY - rect.top) / rect.height);
+    return {
+        x: clamp(newX, 0, 1),
+        y: clamp(newY, 0, 1)
+    };
+}
+/**
+ * Rounds a given number to two decimal places.
+ *
+ * @param num - The number to be rounded.
+ * @returns The number rounded to two decimal places.
+ */ export function roundTwoDecimal(num) {
+    return Math.round(num * 100) / 100;
+}

package/lib/utils/getCoordinates.js.map

@@ -0,0 +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: MouseEvent) {\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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,KAAK,QAAQ,4BAA4B;AAElD;;;;;;CAMC,GACD,OAAO,SAASC,eAAeC,OAAoB,EAAEC,KAAiB;IACpE,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

@@ -0,0 +1,11 @@
+/**
+ * Calculates the percentage of a value within a given range.
+ *
+ * @param value - The value to be converted to a percentage.
+ * @param min - The minimum value of the range.
+ * @param max - The maximum value of the range.
+ * @returns The percentage representation of the value within the range [min, max].
+ *          Returns 0 if `min` is equal to `max`.
+ */ export const getPercent = (value, min, max)=>{
+    return max === min ? 0 : (value - min) / (max - min) * 100;
+};

package/lib/utils/getPercent.js.map

@@ -0,0 +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"],"rangeMappings":";;;;;;;;;;","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/AlphaSlider.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    AlphaSlider: function() {
+        return _index.AlphaSlider;
+    },
+    alphaSliderCSSVars: function() {
+        return _index.alphaSliderCSSVars;
+    },
+    alphaSliderClassNames: function() {
+        return _index.alphaSliderClassNames;
+    },
+    renderAlphaSlider_unstable: function() {
+        return _index.renderAlphaSlider_unstable;
+    },
+    useAlphaSliderStyles_unstable: function() {
+        return _index.useAlphaSliderStyles_unstable;
+    },
+    useAlphaSlider_unstable: function() {
+        return _index.useAlphaSlider_unstable;
+    }
+});
+const _index = require("./components/AlphaSlider/index");

package/lib-commonjs/AlphaSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/AlphaSlider.ts"],"sourcesContent":["export type { AlphaSliderProps, AlphaSliderSlots, AlphaSliderState } from './components/AlphaSlider/index';\nexport {\n  AlphaSlider,\n  alphaSliderCSSVars,\n  alphaSliderClassNames,\n  renderAlphaSlider_unstable,\n  useAlphaSliderStyles_unstable,\n  useAlphaSlider_unstable,\n} from './components/AlphaSlider/index';\n"],"names":["AlphaSlider","alphaSliderCSSVars","alphaSliderClassNames","renderAlphaSlider_unstable","useAlphaSliderStyles_unstable","useAlphaSlider_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEEA,WAAW;eAAXA,kBAAW;;IACXC,kBAAkB;eAAlBA,yBAAkB;;IAClBC,qBAAqB;eAArBA,4BAAqB;;IACrBC,0BAA0B;eAA1BA,iCAA0B;;IAC1BC,6BAA6B;eAA7BA,oCAA6B;;IAC7BC,uBAAuB;eAAvBA,8BAAuB;;;uBAClB"}

package/lib-commonjs/ColorArea.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ColorArea: function() {
+        return _index.ColorArea;
+    },
+    colorAreaCSSVars: function() {
+        return _index.colorAreaCSSVars;
+    },
+    colorAreaClassNames: function() {
+        return _index.colorAreaClassNames;
+    },
+    renderColorArea_unstable: function() {
+        return _index.renderColorArea_unstable;
+    },
+    useColorAreaStyles_unstable: function() {
+        return _index.useColorAreaStyles_unstable;
+    },
+    useColorArea_unstable: function() {
+        return _index.useColorArea_unstable;
+    }
+});
+const _index = require("./components/ColorArea/index");

package/lib-commonjs/ColorArea.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ColorArea.ts"],"sourcesContent":["export type {\n  ColorAreaOnColorChangeData,\n  ColorAreaProps,\n  ColorAreaSlots,\n  ColorAreaState,\n} from './components/ColorArea/index';\nexport {\n  ColorArea,\n  colorAreaCSSVars,\n  colorAreaClassNames,\n  renderColorArea_unstable,\n  useColorAreaStyles_unstable,\n  useColorArea_unstable,\n} from './components/ColorArea/index';\n"],"names":["ColorArea","colorAreaCSSVars","colorAreaClassNames","renderColorArea_unstable","useColorAreaStyles_unstable","useColorArea_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAOEA,SAAS;eAATA,gBAAS;;IACTC,gBAAgB;eAAhBA,uBAAgB;;IAChBC,mBAAmB;eAAnBA,0BAAmB;;IACnBC,wBAAwB;eAAxBA,+BAAwB;;IACxBC,2BAA2B;eAA3BA,kCAA2B;;IAC3BC,qBAAqB;eAArBA,4BAAqB;;;uBAChB"}

package/lib-commonjs/ColorPicker.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ColorPicker: function() {
+        return _index.ColorPicker;
+    },
+    colorPickerClassNames: function() {
+        return _index.colorPickerClassNames;
+    },
+    renderColorPicker_unstable: function() {
+        return _index.renderColorPicker_unstable;
+    },
+    useColorPickerStyles_unstable: function() {
+        return _index.useColorPickerStyles_unstable;
+    },
+    useColorPicker_unstable: function() {
+        return _index.useColorPicker_unstable;
+    }
+});
+const _index = require("./components/ColorPicker/index");

package/lib-commonjs/ColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ColorPicker.ts"],"sourcesContent":["export type {\n  ColorPickerOnChangeData,\n  ColorPickerProps,\n  ColorPickerSlots,\n  ColorPickerState,\n} from './components/ColorPicker/index';\nexport {\n  ColorPicker,\n  colorPickerClassNames,\n  renderColorPicker_unstable,\n  useColorPickerStyles_unstable,\n  useColorPicker_unstable,\n} from './components/ColorPicker/index';\n"],"names":["ColorPicker","colorPickerClassNames","renderColorPicker_unstable","useColorPickerStyles_unstable","useColorPicker_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAOEA,WAAW;eAAXA,kBAAW;;IACXC,qBAAqB;eAArBA,4BAAqB;;IACrBC,0BAA0B;eAA1BA,iCAA0B;;IAC1BC,6BAA6B;eAA7BA,oCAA6B;;IAC7BC,uBAAuB;eAAvBA,8BAAuB;;;uBAClB"}

package/lib-commonjs/ColorSlider.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ColorSlider: function() {
+        return _index.ColorSlider;
+    },
+    colorSliderCSSVars: function() {
+        return _index.colorSliderCSSVars;
+    },
+    colorSliderClassNames: function() {
+        return _index.colorSliderClassNames;
+    },
+    renderColorSlider_unstable: function() {
+        return _index.renderColorSlider_unstable;
+    },
+    useColorSliderStyles_unstable: function() {
+        return _index.useColorSliderStyles_unstable;
+    },
+    useColorSlider_unstable: function() {
+        return _index.useColorSlider_unstable;
+    }
+});
+const _index = require("./components/ColorSlider/index");

package/lib-commonjs/ColorSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ColorSlider.ts"],"sourcesContent":["export type {\n  ColorSliderProps,\n  ColorSliderSlots,\n  ColorSliderState,\n  SliderOnChangeData,\n} from './components/ColorSlider/index';\nexport {\n  ColorSlider,\n  colorSliderCSSVars,\n  colorSliderClassNames,\n  renderColorSlider_unstable,\n  useColorSliderStyles_unstable,\n  useColorSlider_unstable,\n} from './components/ColorSlider/index';\n"],"names":["ColorSlider","colorSliderCSSVars","colorSliderClassNames","renderColorSlider_unstable","useColorSliderStyles_unstable","useColorSlider_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAOEA,WAAW;eAAXA,kBAAW;;IACXC,kBAAkB;eAAlBA,yBAAkB;;IAClBC,qBAAqB;eAArBA,4BAAqB;;IACrBC,0BAA0B;eAA1BA,iCAA0B;;IAC1BC,6BAA6B;eAA7BA,oCAA6B;;IAC7BC,uBAAuB;eAAvBA,8BAAuB;;;uBAClB"}