@salt-ds/lab 1.0.0-alpha.23 → 1.0.0-alpha.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/css/salt-lab.css +12 -10
  2. package/dist-cjs/color-chooser/ColorPicker.css.js +1 -1
  3. package/dist-cjs/color-chooser/ColorPicker.js +2 -2
  4. package/dist-cjs/color-chooser/ColorPicker.js.map +1 -1
  5. package/dist-cjs/tabs-next/TabstripNext.css.js +1 -1
  6. package/dist-es/color-chooser/ColorPicker.css.js +1 -1
  7. package/dist-es/color-chooser/ColorPicker.js +2 -2
  8. package/dist-es/color-chooser/ColorPicker.js.map +1 -1
  9. package/dist-es/tabs-next/TabstripNext.css.js +1 -1
  10. package/package.json +3 -3
package/css/salt-lab.css CHANGED
@@ -345,19 +345,19 @@
345
345
  align-content: stretch;
346
346
  padding: var(--salt-size-unit) 0px 0px var(--salt-size-unit);
347
347
  }
348
- .root,
349
- .rootDisabledAlpha {
348
+ .saltColorChooserPicker-root,
349
+ .saltColorChooserPicker-rootDisabledAlpha {
350
350
  box-shadow: none !important;
351
351
  padding: 8px 8px 0px 0px !important;
352
352
  background: transparent !important;
353
353
  width: calc(9 * var(--salt-size-stackable)) !important;
354
354
  }
355
- .root .flexbox-fix,
356
- .rootDisabledAlpha .flexbox-fix {
355
+ .saltColorChooserPicker-root .flexbox-fix,
356
+ .saltColorChooserPicker-rootDisabledAlpha .flexbox-fix {
357
357
  padding-top: 8px !important;
358
358
  }
359
- .rootDisabledAlpha .flexbox-fix ~ .flexbox-fix,
360
- .root .flexbox-fix ~ .flexbox-fix {
359
+ .saltColorChooserPicker-rootDisabledAlpha .flexbox-fix ~ .flexbox-fix,
360
+ .saltColorChooserPicker-root .flexbox-fix ~ .flexbox-fix {
361
361
  display: none !important;
362
362
  }
363
363
  .saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div {
@@ -382,7 +382,7 @@
382
382
  width: calc(var(--salt-size-base) / 4) !important;
383
383
  height: calc(var(--salt-size-base) / 4) !important;
384
384
  }
385
- .rootDisabledAlpha .hue-horizontal > div > div {
385
+ .saltColorChooserPicker-rootDisabledAlpha .hue-horizontal > div > div {
386
386
  position: relative;
387
387
  margin-top: 0px !important;
388
388
  width: 4px !important;
@@ -3830,13 +3830,15 @@
3830
3830
  position: relative;
3831
3831
  background: transparent;
3832
3832
  width: 100%;
3833
- padding-left: var(--salt-spacing-300);
3834
- padding-right: var(--salt-spacing-300);
3835
3833
  font-family: var(--salt-text-fontFamily);
3836
3834
  font-size: var(--salt-text-fontSize);
3837
3835
  font-weight: var(--salt-text-fontWeight);
3838
3836
  line-height: var(--salt-text-lineHeight);
3839
3837
  }
3838
+ .saltTabstripNext-main {
3839
+ padding-left: var(--salt-spacing-300);
3840
+ padding-right: var(--salt-spacing-300);
3841
+ }
3840
3842
  .saltTabstripNext-main::before {
3841
3843
  content: "";
3842
3844
  position: absolute;
@@ -4840,4 +4842,4 @@
4840
4842
  margin: calc(var(--salt-size-unit) / 2) 0;
4841
4843
  }
4842
4844
 
4843
- /* src/f1691297-5c93-439c-b260-ae415a5da7cd.css */
4845
+ /* src/54bcdacf-3525-4b80-99dd-6c38ba20e381.css */
package/dist-cjs/color-chooser/ColorPicker.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = ".saltColorChooserPicker {\n display: flex;\n flex-direction: row;\n}\n\n.saltColorChooserPicker-inputContainer {\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n border-left: 1px solid var(--salt-separable-secondary-borderColor);\n}\n\n.saltColorChooserPicker-applyButtonDiv {\n padding: var(--salt-size-unit) calc(2 * var(--salt-size-unit)) 0px calc(1.5 * var(--salt-size-unit));\n align-self: center;\n}\n\n.saltColorChooserPicker-textDivOverrides {\n font-size: var(--salt-text-label-fontSize);\n font-weight: var(--salt-text-fontWeight-strong);\n color: var(--salt-content-primary-foreground);\n padding: 0px !important;\n}\n\n.saltColorChooserPicker-inputDivs {\n display: flex;\n flex-direction: column;\n align-content: stretch;\n padding: var(--salt-size-unit) 0px 0px var(--salt-size-unit);\n}\n\n/**\n Warning: Below are a lot of overridden styles from react-color\n **/\n\n/* Entire container for react-color component */\n.root,\n.rootDisabledAlpha {\n box-shadow: none !important;\n padding: 8px 8px 0px 0px !important;\n background: transparent !important;\n width: calc(9 * var(--salt-size-stackable)) !important;\n}\n/* Color sliders container */\n.root .flexbox-fix,\n.rootDisabledAlpha .flexbox-fix {\n padding-top: 8px !important;\n}\n/* RGB Inputs provided by react-color */\n.rootDisabledAlpha .flexbox-fix ~ .flexbox-fix,\n.root .flexbox-fix ~ .flexbox-fix {\n display: none !important;\n}\n/* Height of hue and saturation boxes */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div {\n height: calc(var(--salt-size-stackable) / 2) !important;\n}\n/* Height of saturation slider container */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Height of saturation slider */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Width of color preview box */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div {\n width: calc(var(--salt-size-stackable) / 2) !important;\n}\n/* Height of hue slider container */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Height of hue slider */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n\n.saltColorChooserPicker-swatchPickerStyles .saturation-white > div > div {\n width: calc(var(--salt-size-base) / 4) !important;\n height: calc(var(--salt-size-base) / 4) !important;\n}\n/* Cursor on hue slider */\n.rootDisabledAlpha .hue-horizontal > div > div {\n position: relative;\n margin-top: 0px !important;\n width: 4px !important;\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n background: var(--salt-container-primary-background) !important;\n border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n";
3
+ var css_248z = ".saltColorChooserPicker {\n display: flex;\n flex-direction: row;\n}\n\n.saltColorChooserPicker-inputContainer {\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n border-left: 1px solid var(--salt-separable-secondary-borderColor);\n}\n\n.saltColorChooserPicker-applyButtonDiv {\n padding: var(--salt-size-unit) calc(2 * var(--salt-size-unit)) 0px calc(1.5 * var(--salt-size-unit));\n align-self: center;\n}\n\n.saltColorChooserPicker-textDivOverrides {\n font-size: var(--salt-text-label-fontSize);\n font-weight: var(--salt-text-fontWeight-strong);\n color: var(--salt-content-primary-foreground);\n padding: 0px !important;\n}\n\n.saltColorChooserPicker-inputDivs {\n display: flex;\n flex-direction: column;\n align-content: stretch;\n padding: var(--salt-size-unit) 0px 0px var(--salt-size-unit);\n}\n\n/**\n Warning: Below are a lot of overridden styles from react-color\n **/\n\n/* Entire container for react-color component */\n.saltColorChooserPicker-root,\n.saltColorChooserPicker-rootDisabledAlpha {\n box-shadow: none !important;\n padding: 8px 8px 0px 0px !important;\n background: transparent !important;\n width: calc(9 * var(--salt-size-stackable)) !important;\n}\n/* Color sliders container */\n.saltColorChooserPicker-root .flexbox-fix,\n.saltColorChooserPicker-rootDisabledAlpha .flexbox-fix {\n padding-top: 8px !important;\n}\n/* RGB Inputs provided by react-color */\n.saltColorChooserPicker-rootDisabledAlpha .flexbox-fix ~ .flexbox-fix,\n.saltColorChooserPicker-root .flexbox-fix ~ .flexbox-fix {\n display: none !important;\n}\n/* Height of hue and saturation boxes */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div {\n height: calc(var(--salt-size-stackable) / 2) !important;\n}\n/* Height of saturation slider container */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Height of saturation slider */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Width of color preview box */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div {\n width: calc(var(--salt-size-stackable) / 2) !important;\n}\n/* Height of hue slider container */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Height of hue slider */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n\n.saltColorChooserPicker-swatchPickerStyles .saturation-white > div > div {\n width: calc(var(--salt-size-base) / 4) !important;\n height: calc(var(--salt-size-base) / 4) !important;\n}\n/* Cursor on hue slider */\n.saltColorChooserPicker-rootDisabledAlpha .hue-horizontal > div > div {\n position: relative;\n margin-top: 0px !important;\n width: 4px !important;\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n background: var(--salt-container-primary-background) !important;\n border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=ColorPicker.css.js.map
package/dist-cjs/color-chooser/ColorPicker.js CHANGED
@@ -68,8 +68,8 @@ const ColorPicker = ({
68
68
  children: [
69
69
  /* @__PURE__ */ jsxRuntime.jsx(reactColor.SketchPicker, {
70
70
  className: clsx.clsx(withBaseName("swatchPickerStyles"), {
71
- ["rootDisabledAlpha"]: disableAlphaChooser,
72
- ["root"]: !disableAlphaChooser
71
+ [withBaseName("rootDisabledAlpha")]: disableAlphaChooser,
72
+ [withBaseName("root")]: !disableAlphaChooser
73
73
  }),
74
74
  color: rgbaValue,
75
75
  onChange: onSketchPickerChange,
package/dist-cjs/color-chooser/ColorPicker.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ColorPicker.js","sources":["../src/color-chooser/ColorPicker.tsx"],"sourcesContent":["import { ChangeEvent } from \"react\";\nimport { ColorResult, SketchPicker } from \"react-color\";\nimport { clsx } from \"clsx\";\nimport { Button, makePrefixer } from \"@salt-ds/core\";\nimport { Color, RGBAValue } from \"./Color\";\nimport { hexValueWithoutAlpha } from \"./ColorHelpers\";\nimport { HexInput } from \"./HexInput\";\nimport { RGBAInput } from \"./RGBAInput\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport colorPickerCss from \"./ColorPicker.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserPicker\");\n\nexport interface ColorPickerProps {\n disableAlphaChooser: boolean;\n color?: Color;\n alpha?: number;\n onChange: (\n color: Color | undefined,\n finalSelection: boolean,\n e?: ChangeEvent\n ) => void;\n onDialogClosed: () => void;\n}\n\nexport const ColorPicker = ({\n alpha = 1,\n disableAlphaChooser,\n color,\n onChange,\n onDialogClosed,\n}: ColorPickerProps): JSX.Element => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-color-picker\",\n css: colorPickerCss,\n window: targetWindow,\n });\n\n const rgbaValue: RGBAValue =\n color?.rgba ?? Color.makeColorFromRGB(0, 0, 0, alpha).rgba;\n const rgbaText = disableAlphaChooser ? \"RGB\" : \"RGBA\";\n\n const onSubmitHex = (hexValue?: string, e?: ChangeEvent): void => {\n const newColor = Color.makeColorFromHex(hexValue);\n onChange(newColor, false, e);\n };\n\n const onSubmitRgb = (rgba: RGBAValue, e?: ChangeEvent): void => {\n const newColor = Color.makeColorFromRGB(rgba.r, rgba.g, rgba.b, rgba.a);\n onChange(newColor, false, e);\n };\n\n const onSubmitAlpha = (alpha: number, e?: ChangeEvent): void => {\n const newColor = Color.makeColorFromRGB(\n rgbaValue.r,\n rgbaValue.g,\n rgbaValue.b,\n Math.max(0, Math.min(alpha, 1))\n );\n onChange(newColor, false, e);\n };\n\n const onSketchPickerChange = (\n colorResult: ColorResult,\n e: ChangeEvent\n ): void => {\n const newColor = Color.makeColorFromRGB(\n colorResult.rgb.r,\n colorResult.rgb.g,\n colorResult.rgb.b,\n colorResult.rgb.a ?? alpha\n );\n onChange(newColor, false, e);\n };\n\n const onApply = (): void => {\n onChange(color, true);\n onDialogClosed();\n };\n\n return (\n <div data-testid=\"color-picker\" className={clsx(withBaseName())}>\n {/** @ts-ignore react-color has incorrect types **/}\n <SketchPicker\n className={clsx(withBaseName(\"swatchPickerStyles\"), {\n [\"rootDisabledAlpha\"]: disableAlphaChooser,\n [\"root\"]: !disableAlphaChooser,\n })}\n color={rgbaValue}\n onChange={onSketchPickerChange}\n presetColors={[]}\n disableAlpha={disableAlphaChooser}\n />\n <div className={clsx(withBaseName(\"inputContainer\"))}>\n <div className={clsx(withBaseName(\"inputDivs\"))}>\n <span className={clsx(withBaseName(\"textDivOverrides\"))}>HEX</span>\n <HexInput\n hexValue={\n disableAlphaChooser\n ? hexValueWithoutAlpha(color?.hex)\n : color?.hex\n }\n disableAlphaChooser={disableAlphaChooser}\n onSubmit={onSubmitHex}\n />\n <RGBAInput\n disableAlphaChooser={disableAlphaChooser}\n rgbaText={rgbaText}\n rgbaValue={rgbaValue}\n onSubmitAlpha={onSubmitAlpha}\n onSubmitRgb={onSubmitRgb}\n />\n </div>\n <div className={clsx(withBaseName(\"applyButtonDiv\"))}>\n <Button data-testid=\"apply-button\" variant=\"cta\" onClick={onApply}>\n Apply\n </Button>\n </div>\n </div>\n </div>\n );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","colorPickerCss","Color","alpha","_a","jsxs","clsx","jsx","SketchPicker","HexInput","hexValueWithoutAlpha","RGBAInput","Button"],"mappings":"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"}
1
+ {"version":3,"file":"ColorPicker.js","sources":["../src/color-chooser/ColorPicker.tsx"],"sourcesContent":["import { ChangeEvent } from \"react\";\nimport { ColorResult, SketchPicker } from \"react-color\";\nimport { clsx } from \"clsx\";\nimport { Button, makePrefixer } from \"@salt-ds/core\";\nimport { Color, RGBAValue } from \"./Color\";\nimport { hexValueWithoutAlpha } from \"./ColorHelpers\";\nimport { HexInput } from \"./HexInput\";\nimport { RGBAInput } from \"./RGBAInput\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport colorPickerCss from \"./ColorPicker.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserPicker\");\n\nexport interface ColorPickerProps {\n disableAlphaChooser: boolean;\n color?: Color;\n alpha?: number;\n onChange: (\n color: Color | undefined,\n finalSelection: boolean,\n e?: ChangeEvent\n ) => void;\n onDialogClosed: () => void;\n}\n\nexport const ColorPicker = ({\n alpha = 1,\n disableAlphaChooser,\n color,\n onChange,\n onDialogClosed,\n}: ColorPickerProps): JSX.Element => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-color-picker\",\n css: colorPickerCss,\n window: targetWindow,\n });\n\n const rgbaValue: RGBAValue =\n color?.rgba ?? Color.makeColorFromRGB(0, 0, 0, alpha).rgba;\n const rgbaText = disableAlphaChooser ? \"RGB\" : \"RGBA\";\n\n const onSubmitHex = (hexValue?: string, e?: ChangeEvent): void => {\n const newColor = Color.makeColorFromHex(hexValue);\n onChange(newColor, false, e);\n };\n\n const onSubmitRgb = (rgba: RGBAValue, e?: ChangeEvent): void => {\n const newColor = Color.makeColorFromRGB(rgba.r, rgba.g, rgba.b, rgba.a);\n onChange(newColor, false, e);\n };\n\n const onSubmitAlpha = (alpha: number, e?: ChangeEvent): void => {\n const newColor = Color.makeColorFromRGB(\n rgbaValue.r,\n rgbaValue.g,\n rgbaValue.b,\n Math.max(0, Math.min(alpha, 1))\n );\n onChange(newColor, false, e);\n };\n\n const onSketchPickerChange = (\n colorResult: ColorResult,\n e: ChangeEvent\n ): void => {\n const newColor = Color.makeColorFromRGB(\n colorResult.rgb.r,\n colorResult.rgb.g,\n colorResult.rgb.b,\n colorResult.rgb.a ?? alpha\n );\n onChange(newColor, false, e);\n };\n\n const onApply = (): void => {\n onChange(color, true);\n onDialogClosed();\n };\n\n return (\n <div data-testid=\"color-picker\" className={clsx(withBaseName())}>\n {/** @ts-ignore react-color has incorrect types **/}\n <SketchPicker\n className={clsx(withBaseName(\"swatchPickerStyles\"), {\n [withBaseName(\"rootDisabledAlpha\")]: disableAlphaChooser,\n [withBaseName(\"root\")]: !disableAlphaChooser,\n })}\n color={rgbaValue}\n onChange={onSketchPickerChange}\n presetColors={[]}\n disableAlpha={disableAlphaChooser}\n />\n <div className={clsx(withBaseName(\"inputContainer\"))}>\n <div className={clsx(withBaseName(\"inputDivs\"))}>\n <span className={clsx(withBaseName(\"textDivOverrides\"))}>HEX</span>\n <HexInput\n hexValue={\n disableAlphaChooser\n ? hexValueWithoutAlpha(color?.hex)\n : color?.hex\n }\n disableAlphaChooser={disableAlphaChooser}\n onSubmit={onSubmitHex}\n />\n <RGBAInput\n disableAlphaChooser={disableAlphaChooser}\n rgbaText={rgbaText}\n rgbaValue={rgbaValue}\n onSubmitAlpha={onSubmitAlpha}\n onSubmitRgb={onSubmitRgb}\n />\n </div>\n <div className={clsx(withBaseName(\"applyButtonDiv\"))}>\n <Button data-testid=\"apply-button\" variant=\"cta\" onClick={onApply}>\n Apply\n </Button>\n </div>\n </div>\n </div>\n );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","colorPickerCss","Color","alpha","_a","jsxs","clsx","jsx","SketchPicker","HexInput","hexValueWithoutAlpha","RGBAInput","Button"],"mappings":"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"}
package/dist-cjs/tabs-next/TabstripNext.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = "/* Component class applied to the root element */\n.saltTabstripNext {\n display: flex;\n flex-wrap: nowrap;\n justify-content: var(--tabstripNext-justifyContent);\n align-items: center;\n position: relative;\n background: transparent;\n width: 100%;\n padding-left: var(--salt-spacing-300);\n padding-right: var(--salt-spacing-300);\n\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n}\n\n.saltTabstripNext-main::before {\n content: \"\";\n position: absolute;\n inset: auto 0 0 0;\n height: var(--salt-size-border);\n border-bottom: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n}\n\n.saltTabstripNext .saltTabNext-wrapper:not(:last-child) {\n padding-right: var(--salt-spacing-100);\n}\n";
3
+ var css_248z = "/* Component class applied to the root element */\n.saltTabstripNext {\n display: flex;\n flex-wrap: nowrap;\n justify-content: var(--tabstripNext-justifyContent);\n align-items: center;\n position: relative;\n background: transparent;\n width: 100%;\n\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n}\n\n.saltTabstripNext-main {\n padding-left: var(--salt-spacing-300);\n padding-right: var(--salt-spacing-300);\n}\n\n.saltTabstripNext-main::before {\n content: \"\";\n position: absolute;\n inset: auto 0 0 0;\n height: var(--salt-size-border);\n border-bottom: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n}\n\n.saltTabstripNext .saltTabNext-wrapper:not(:last-child) {\n padding-right: var(--salt-spacing-100);\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=TabstripNext.css.js.map
package/dist-es/color-chooser/ColorPicker.css.js CHANGED
@@ -1,4 +1,4 @@
1
- var css_248z = ".saltColorChooserPicker {\n display: flex;\n flex-direction: row;\n}\n\n.saltColorChooserPicker-inputContainer {\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n border-left: 1px solid var(--salt-separable-secondary-borderColor);\n}\n\n.saltColorChooserPicker-applyButtonDiv {\n padding: var(--salt-size-unit) calc(2 * var(--salt-size-unit)) 0px calc(1.5 * var(--salt-size-unit));\n align-self: center;\n}\n\n.saltColorChooserPicker-textDivOverrides {\n font-size: var(--salt-text-label-fontSize);\n font-weight: var(--salt-text-fontWeight-strong);\n color: var(--salt-content-primary-foreground);\n padding: 0px !important;\n}\n\n.saltColorChooserPicker-inputDivs {\n display: flex;\n flex-direction: column;\n align-content: stretch;\n padding: var(--salt-size-unit) 0px 0px var(--salt-size-unit);\n}\n\n/**\n Warning: Below are a lot of overridden styles from react-color\n **/\n\n/* Entire container for react-color component */\n.root,\n.rootDisabledAlpha {\n box-shadow: none !important;\n padding: 8px 8px 0px 0px !important;\n background: transparent !important;\n width: calc(9 * var(--salt-size-stackable)) !important;\n}\n/* Color sliders container */\n.root .flexbox-fix,\n.rootDisabledAlpha .flexbox-fix {\n padding-top: 8px !important;\n}\n/* RGB Inputs provided by react-color */\n.rootDisabledAlpha .flexbox-fix ~ .flexbox-fix,\n.root .flexbox-fix ~ .flexbox-fix {\n display: none !important;\n}\n/* Height of hue and saturation boxes */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div {\n height: calc(var(--salt-size-stackable) / 2) !important;\n}\n/* Height of saturation slider container */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Height of saturation slider */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Width of color preview box */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div {\n width: calc(var(--salt-size-stackable) / 2) !important;\n}\n/* Height of hue slider container */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Height of hue slider */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n\n.saltColorChooserPicker-swatchPickerStyles .saturation-white > div > div {\n width: calc(var(--salt-size-base) / 4) !important;\n height: calc(var(--salt-size-base) / 4) !important;\n}\n/* Cursor on hue slider */\n.rootDisabledAlpha .hue-horizontal > div > div {\n position: relative;\n margin-top: 0px !important;\n width: 4px !important;\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n background: var(--salt-container-primary-background) !important;\n border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n";
1
+ var css_248z = ".saltColorChooserPicker {\n display: flex;\n flex-direction: row;\n}\n\n.saltColorChooserPicker-inputContainer {\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n border-left: 1px solid var(--salt-separable-secondary-borderColor);\n}\n\n.saltColorChooserPicker-applyButtonDiv {\n padding: var(--salt-size-unit) calc(2 * var(--salt-size-unit)) 0px calc(1.5 * var(--salt-size-unit));\n align-self: center;\n}\n\n.saltColorChooserPicker-textDivOverrides {\n font-size: var(--salt-text-label-fontSize);\n font-weight: var(--salt-text-fontWeight-strong);\n color: var(--salt-content-primary-foreground);\n padding: 0px !important;\n}\n\n.saltColorChooserPicker-inputDivs {\n display: flex;\n flex-direction: column;\n align-content: stretch;\n padding: var(--salt-size-unit) 0px 0px var(--salt-size-unit);\n}\n\n/**\n Warning: Below are a lot of overridden styles from react-color\n **/\n\n/* Entire container for react-color component */\n.saltColorChooserPicker-root,\n.saltColorChooserPicker-rootDisabledAlpha {\n box-shadow: none !important;\n padding: 8px 8px 0px 0px !important;\n background: transparent !important;\n width: calc(9 * var(--salt-size-stackable)) !important;\n}\n/* Color sliders container */\n.saltColorChooserPicker-root .flexbox-fix,\n.saltColorChooserPicker-rootDisabledAlpha .flexbox-fix {\n padding-top: 8px !important;\n}\n/* RGB Inputs provided by react-color */\n.saltColorChooserPicker-rootDisabledAlpha .flexbox-fix ~ .flexbox-fix,\n.saltColorChooserPicker-root .flexbox-fix ~ .flexbox-fix {\n display: none !important;\n}\n/* Height of hue and saturation boxes */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div {\n height: calc(var(--salt-size-stackable) / 2) !important;\n}\n/* Height of saturation slider container */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Height of saturation slider */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Width of color preview box */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div {\n width: calc(var(--salt-size-stackable) / 2) !important;\n}\n/* Height of hue slider container */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Height of hue slider */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n\n.saltColorChooserPicker-swatchPickerStyles .saturation-white > div > div {\n width: calc(var(--salt-size-base) / 4) !important;\n height: calc(var(--salt-size-base) / 4) !important;\n}\n/* Cursor on hue slider */\n.saltColorChooserPicker-rootDisabledAlpha .hue-horizontal > div > div {\n position: relative;\n margin-top: 0px !important;\n width: 4px !important;\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n background: var(--salt-container-primary-background) !important;\n border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n";
2
2
 
3
3
  export { css_248z as default };
4
4
  //# sourceMappingURL=ColorPicker.css.js.map
package/dist-es/color-chooser/ColorPicker.js CHANGED
@@ -64,8 +64,8 @@ const ColorPicker = ({
64
64
  children: [
65
65
  /* @__PURE__ */ jsx(SketchPicker, {
66
66
  className: clsx(withBaseName("swatchPickerStyles"), {
67
- ["rootDisabledAlpha"]: disableAlphaChooser,
68
- ["root"]: !disableAlphaChooser
67
+ [withBaseName("rootDisabledAlpha")]: disableAlphaChooser,
68
+ [withBaseName("root")]: !disableAlphaChooser
69
69
  }),
70
70
  color: rgbaValue,
71
71
  onChange: onSketchPickerChange,
package/dist-es/color-chooser/ColorPicker.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ColorPicker.js","sources":["../src/color-chooser/ColorPicker.tsx"],"sourcesContent":["import { ChangeEvent } from \"react\";\nimport { ColorResult, SketchPicker } from \"react-color\";\nimport { clsx } from \"clsx\";\nimport { Button, makePrefixer } from \"@salt-ds/core\";\nimport { Color, RGBAValue } from \"./Color\";\nimport { hexValueWithoutAlpha } from \"./ColorHelpers\";\nimport { HexInput } from \"./HexInput\";\nimport { RGBAInput } from \"./RGBAInput\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport colorPickerCss from \"./ColorPicker.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserPicker\");\n\nexport interface ColorPickerProps {\n disableAlphaChooser: boolean;\n color?: Color;\n alpha?: number;\n onChange: (\n color: Color | undefined,\n finalSelection: boolean,\n e?: ChangeEvent\n ) => void;\n onDialogClosed: () => void;\n}\n\nexport const ColorPicker = ({\n alpha = 1,\n disableAlphaChooser,\n color,\n onChange,\n onDialogClosed,\n}: ColorPickerProps): JSX.Element => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-color-picker\",\n css: colorPickerCss,\n window: targetWindow,\n });\n\n const rgbaValue: RGBAValue =\n color?.rgba ?? Color.makeColorFromRGB(0, 0, 0, alpha).rgba;\n const rgbaText = disableAlphaChooser ? \"RGB\" : \"RGBA\";\n\n const onSubmitHex = (hexValue?: string, e?: ChangeEvent): void => {\n const newColor = Color.makeColorFromHex(hexValue);\n onChange(newColor, false, e);\n };\n\n const onSubmitRgb = (rgba: RGBAValue, e?: ChangeEvent): void => {\n const newColor = Color.makeColorFromRGB(rgba.r, rgba.g, rgba.b, rgba.a);\n onChange(newColor, false, e);\n };\n\n const onSubmitAlpha = (alpha: number, e?: ChangeEvent): void => {\n const newColor = Color.makeColorFromRGB(\n rgbaValue.r,\n rgbaValue.g,\n rgbaValue.b,\n Math.max(0, Math.min(alpha, 1))\n );\n onChange(newColor, false, e);\n };\n\n const onSketchPickerChange = (\n colorResult: ColorResult,\n e: ChangeEvent\n ): void => {\n const newColor = Color.makeColorFromRGB(\n colorResult.rgb.r,\n colorResult.rgb.g,\n colorResult.rgb.b,\n colorResult.rgb.a ?? alpha\n );\n onChange(newColor, false, e);\n };\n\n const onApply = (): void => {\n onChange(color, true);\n onDialogClosed();\n };\n\n return (\n <div data-testid=\"color-picker\" className={clsx(withBaseName())}>\n {/** @ts-ignore react-color has incorrect types **/}\n <SketchPicker\n className={clsx(withBaseName(\"swatchPickerStyles\"), {\n [\"rootDisabledAlpha\"]: disableAlphaChooser,\n [\"root\"]: !disableAlphaChooser,\n })}\n color={rgbaValue}\n onChange={onSketchPickerChange}\n presetColors={[]}\n disableAlpha={disableAlphaChooser}\n />\n <div className={clsx(withBaseName(\"inputContainer\"))}>\n <div className={clsx(withBaseName(\"inputDivs\"))}>\n <span className={clsx(withBaseName(\"textDivOverrides\"))}>HEX</span>\n <HexInput\n hexValue={\n disableAlphaChooser\n ? hexValueWithoutAlpha(color?.hex)\n : color?.hex\n }\n disableAlphaChooser={disableAlphaChooser}\n onSubmit={onSubmitHex}\n />\n <RGBAInput\n disableAlphaChooser={disableAlphaChooser}\n rgbaText={rgbaText}\n rgbaValue={rgbaValue}\n onSubmitAlpha={onSubmitAlpha}\n onSubmitRgb={onSubmitRgb}\n />\n </div>\n <div className={clsx(withBaseName(\"applyButtonDiv\"))}>\n <Button data-testid=\"apply-button\" variant=\"cta\" onClick={onApply}>\n Apply\n </Button>\n </div>\n </div>\n </div>\n );\n};\n"],"names":["colorPickerCss","alpha","_a"],"mappings":"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"}
1
+ {"version":3,"file":"ColorPicker.js","sources":["../src/color-chooser/ColorPicker.tsx"],"sourcesContent":["import { ChangeEvent } from \"react\";\nimport { ColorResult, SketchPicker } from \"react-color\";\nimport { clsx } from \"clsx\";\nimport { Button, makePrefixer } from \"@salt-ds/core\";\nimport { Color, RGBAValue } from \"./Color\";\nimport { hexValueWithoutAlpha } from \"./ColorHelpers\";\nimport { HexInput } from \"./HexInput\";\nimport { RGBAInput } from \"./RGBAInput\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport colorPickerCss from \"./ColorPicker.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserPicker\");\n\nexport interface ColorPickerProps {\n disableAlphaChooser: boolean;\n color?: Color;\n alpha?: number;\n onChange: (\n color: Color | undefined,\n finalSelection: boolean,\n e?: ChangeEvent\n ) => void;\n onDialogClosed: () => void;\n}\n\nexport const ColorPicker = ({\n alpha = 1,\n disableAlphaChooser,\n color,\n onChange,\n onDialogClosed,\n}: ColorPickerProps): JSX.Element => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-color-picker\",\n css: colorPickerCss,\n window: targetWindow,\n });\n\n const rgbaValue: RGBAValue =\n color?.rgba ?? Color.makeColorFromRGB(0, 0, 0, alpha).rgba;\n const rgbaText = disableAlphaChooser ? \"RGB\" : \"RGBA\";\n\n const onSubmitHex = (hexValue?: string, e?: ChangeEvent): void => {\n const newColor = Color.makeColorFromHex(hexValue);\n onChange(newColor, false, e);\n };\n\n const onSubmitRgb = (rgba: RGBAValue, e?: ChangeEvent): void => {\n const newColor = Color.makeColorFromRGB(rgba.r, rgba.g, rgba.b, rgba.a);\n onChange(newColor, false, e);\n };\n\n const onSubmitAlpha = (alpha: number, e?: ChangeEvent): void => {\n const newColor = Color.makeColorFromRGB(\n rgbaValue.r,\n rgbaValue.g,\n rgbaValue.b,\n Math.max(0, Math.min(alpha, 1))\n );\n onChange(newColor, false, e);\n };\n\n const onSketchPickerChange = (\n colorResult: ColorResult,\n e: ChangeEvent\n ): void => {\n const newColor = Color.makeColorFromRGB(\n colorResult.rgb.r,\n colorResult.rgb.g,\n colorResult.rgb.b,\n colorResult.rgb.a ?? alpha\n );\n onChange(newColor, false, e);\n };\n\n const onApply = (): void => {\n onChange(color, true);\n onDialogClosed();\n };\n\n return (\n <div data-testid=\"color-picker\" className={clsx(withBaseName())}>\n {/** @ts-ignore react-color has incorrect types **/}\n <SketchPicker\n className={clsx(withBaseName(\"swatchPickerStyles\"), {\n [withBaseName(\"rootDisabledAlpha\")]: disableAlphaChooser,\n [withBaseName(\"root\")]: !disableAlphaChooser,\n })}\n color={rgbaValue}\n onChange={onSketchPickerChange}\n presetColors={[]}\n disableAlpha={disableAlphaChooser}\n />\n <div className={clsx(withBaseName(\"inputContainer\"))}>\n <div className={clsx(withBaseName(\"inputDivs\"))}>\n <span className={clsx(withBaseName(\"textDivOverrides\"))}>HEX</span>\n <HexInput\n hexValue={\n disableAlphaChooser\n ? hexValueWithoutAlpha(color?.hex)\n : color?.hex\n }\n disableAlphaChooser={disableAlphaChooser}\n onSubmit={onSubmitHex}\n />\n <RGBAInput\n disableAlphaChooser={disableAlphaChooser}\n rgbaText={rgbaText}\n rgbaValue={rgbaValue}\n onSubmitAlpha={onSubmitAlpha}\n onSubmitRgb={onSubmitRgb}\n />\n </div>\n <div className={clsx(withBaseName(\"applyButtonDiv\"))}>\n <Button data-testid=\"apply-button\" variant=\"cta\" onClick={onApply}>\n Apply\n </Button>\n </div>\n </div>\n </div>\n );\n};\n"],"names":["colorPickerCss","alpha","_a"],"mappings":";;;;;;;;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,wBAAwB,CAAA,CAAA;AAcnD,MAAM,cAAc,CAAC;AAAA,EAC1B,KAAQ,GAAA,CAAA;AAAA,EACR,mBAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,cAAA;AACF,CAAqC,KAAA;AAlCrC,EAAA,IAAA,EAAA,CAAA;AAmCE,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,SAAA,GAAA,CACJ,EAAO,GAAA,KAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAA,IAAA,KAAP,IAAe,GAAA,EAAA,GAAA,KAAA,CAAM,iBAAiB,CAAG,EAAA,CAAA,EAAG,CAAG,EAAA,KAAK,CAAE,CAAA,IAAA,CAAA;AACxD,EAAM,MAAA,QAAA,GAAW,sBAAsB,KAAQ,GAAA,MAAA,CAAA;AAE/C,EAAM,MAAA,WAAA,GAAc,CAAC,QAAA,EAAmB,CAA0B,KAAA;AAChE,IAAM,MAAA,QAAA,GAAW,KAAM,CAAA,gBAAA,CAAiB,QAAQ,CAAA,CAAA;AAChD,IAAS,QAAA,CAAA,QAAA,EAAU,OAAO,CAAC,CAAA,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,IAAA,EAAiB,CAA0B,KAAA;AAC9D,IAAM,MAAA,QAAA,GAAW,KAAM,CAAA,gBAAA,CAAiB,IAAK,CAAA,CAAA,EAAG,KAAK,CAAG,EAAA,IAAA,CAAK,CAAG,EAAA,IAAA,CAAK,CAAC,CAAA,CAAA;AACtE,IAAS,QAAA,CAAA,QAAA,EAAU,OAAO,CAAC,CAAA,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAM,MAAA,aAAA,GAAgB,CAACC,MAAAA,EAAe,CAA0B,KAAA;AAC9D,IAAA,MAAM,WAAW,KAAM,CAAA,gBAAA;AAAA,MACrB,SAAU,CAAA,CAAA;AAAA,MACV,SAAU,CAAA,CAAA;AAAA,MACV,SAAU,CAAA,CAAA;AAAA,MACV,KAAK,GAAI,CAAA,CAAA,EAAG,KAAK,GAAIA,CAAAA,MAAAA,EAAO,CAAC,CAAC,CAAA;AAAA,KAChC,CAAA;AACA,IAAS,QAAA,CAAA,QAAA,EAAU,OAAO,CAAC,CAAA,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAM,MAAA,oBAAA,GAAuB,CAC3B,WAAA,EACA,CACS,KAAA;AArEb,IAAAC,IAAAA,GAAAA,CAAAA;AAsEI,IAAA,MAAM,WAAW,KAAM,CAAA,gBAAA;AAAA,MACrB,YAAY,GAAI,CAAA,CAAA;AAAA,MAChB,YAAY,GAAI,CAAA,CAAA;AAAA,MAChB,YAAY,GAAI,CAAA,CAAA;AAAA,MAAA,CAChBA,GAAA,GAAA,WAAA,CAAY,GAAI,CAAA,CAAA,KAAhB,OAAAA,GAAqB,GAAA,KAAA;AAAA,KACvB,CAAA;AACA,IAAS,QAAA,CAAA,QAAA,EAAU,OAAO,CAAC,CAAA,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAA,MAAM,UAAU,MAAY;AAC1B,IAAA,QAAA,CAAS,OAAO,IAAI,CAAA,CAAA;AACpB,IAAe,cAAA,EAAA,CAAA;AAAA,GACjB,CAAA;AAEA,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IAAI,aAAY,EAAA,cAAA;AAAA,IAAe,SAAA,EAAW,IAAK,CAAA,YAAA,EAAc,CAAA;AAAA,IAE5D,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,YAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,oBAAoB,CAAG,EAAA;AAAA,UAClD,CAAC,YAAa,CAAA,mBAAmB,CAAI,GAAA,mBAAA;AAAA,UACrC,CAAC,YAAA,CAAa,MAAM,CAAA,GAAI,CAAC,mBAAA;AAAA,SAC1B,CAAA;AAAA,QACD,KAAO,EAAA,SAAA;AAAA,QACP,QAAU,EAAA,oBAAA;AAAA,QACV,cAAc,EAAC;AAAA,QACf,YAAc,EAAA,mBAAA;AAAA,OAChB,CAAA;AAAA,sBACC,IAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,gBAAgB,CAAC,CAAA;AAAA,QACjD,QAAA,EAAA;AAAA,0BAAC,IAAA,CAAA,KAAA,EAAA;AAAA,YAAI,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,WAAW,CAAC,CAAA;AAAA,YAC5C,QAAA,EAAA;AAAA,8BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,gBAAK,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,kBAAkB,CAAC,CAAA;AAAA,gBAAG,QAAA,EAAA,KAAA;AAAA,eAAG,CAAA;AAAA,8BAC3D,GAAA,CAAA,QAAA,EAAA;AAAA,gBACC,UACE,mBACI,GAAA,oBAAA,CAAqB,KAAO,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAG,IAC/B,KAAO,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA;AAAA,gBAEb,mBAAA;AAAA,gBACA,QAAU,EAAA,WAAA;AAAA,eACZ,CAAA;AAAA,8BACC,GAAA,CAAA,SAAA,EAAA;AAAA,gBACC,mBAAA;AAAA,gBACA,QAAA;AAAA,gBACA,SAAA;AAAA,gBACA,aAAA;AAAA,gBACA,WAAA;AAAA,eACF,CAAA;AAAA,aAAA;AAAA,WACF,CAAA;AAAA,0BACC,GAAA,CAAA,KAAA,EAAA;AAAA,YAAI,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,gBAAgB,CAAC,CAAA;AAAA,YACjD,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,cAAO,aAAY,EAAA,cAAA;AAAA,cAAe,OAAQ,EAAA,KAAA;AAAA,cAAM,OAAS,EAAA,OAAA;AAAA,cAAS,QAAA,EAAA,OAAA;AAAA,aAEnE,CAAA;AAAA,WACF,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
package/dist-es/tabs-next/TabstripNext.css.js CHANGED
@@ -1,4 +1,4 @@
1
- var css_248z = "/* Component class applied to the root element */\n.saltTabstripNext {\n display: flex;\n flex-wrap: nowrap;\n justify-content: var(--tabstripNext-justifyContent);\n align-items: center;\n position: relative;\n background: transparent;\n width: 100%;\n padding-left: var(--salt-spacing-300);\n padding-right: var(--salt-spacing-300);\n\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n}\n\n.saltTabstripNext-main::before {\n content: \"\";\n position: absolute;\n inset: auto 0 0 0;\n height: var(--salt-size-border);\n border-bottom: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n}\n\n.saltTabstripNext .saltTabNext-wrapper:not(:last-child) {\n padding-right: var(--salt-spacing-100);\n}\n";
1
+ var css_248z = "/* Component class applied to the root element */\n.saltTabstripNext {\n display: flex;\n flex-wrap: nowrap;\n justify-content: var(--tabstripNext-justifyContent);\n align-items: center;\n position: relative;\n background: transparent;\n width: 100%;\n\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n}\n\n.saltTabstripNext-main {\n padding-left: var(--salt-spacing-300);\n padding-right: var(--salt-spacing-300);\n}\n\n.saltTabstripNext-main::before {\n content: \"\";\n position: absolute;\n inset: auto 0 0 0;\n height: var(--salt-size-border);\n border-bottom: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n}\n\n.saltTabstripNext .saltTabNext-wrapper:not(:last-child) {\n padding-right: var(--salt-spacing-100);\n}\n";
2
2
 
3
3
  export { css_248z as default };
4
4
  //# sourceMappingURL=TabstripNext.css.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salt-ds/lab",
3
- "version": "1.0.0-alpha.23",
3
+ "version": "1.0.0-alpha.24",
4
4
  "license": "Apache-2.0",
5
5
  "repository": {
6
6
  "type": "git",
@@ -26,10 +26,10 @@
26
26
  "react-window": "^1.8.6",
27
27
  "rifm": "^0.12.0",
28
28
  "tinycolor2": "^1.4.2",
29
- "@salt-ds/core": "^1.13.1",
29
+ "@salt-ds/core": "^1.13.2",
30
30
  "@salt-ds/window": "^0.1.1",
31
31
  "@salt-ds/styles": "^0.2.0",
32
- "@salt-ds/icons": "^1.8.0"
32
+ "@salt-ds/icons": "^1.9.0"
33
33
  },
34
34
  "peerDependencies": {
35
35
  "@types/react": ">=16.14.0",