npm - @salt-ds/lab - Versions diffs - 1.0.0-alpha.3 → 1.0.0-alpha.4 - Mend

@salt-ds/lab 1.0.0-alpha.3 → 1.0.0-alpha.4

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 (78) hide show

package/dist-cjs/packages/lab/src/carousel/Carousel.js CHANGED Viewed

@@ -6,9 +6,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
 var React = require('react');
 var icons = require('@salt-ds/icons');
-require('../radio-button/RadioButton.js');
+var RadioButton = require('../radio-button/RadioButton.js');
 var RadioButtonGroup = require('../radio-button/RadioButtonGroup.js');
-require('../radio-button/RadioButtonBase.js');
 require('../radio-button/RadioButtonIcon.js');
 var DeckLayout = require('../deck-layout/DeckLayout.js');
 var clsx = require('clsx');
@@ -92,13 +91,15 @@ const Carousel = React.forwardRef(
         /* @__PURE__ */ jsxRuntime.jsx("div", {
           className: withBaseName("dots"),
           children: /* @__PURE__ */ jsxRuntime.jsx(RadioButtonGroup.RadioButtonGroup, {
-            row: true,
             "aria-label": "Carousel buttons",
             onChange: handleRadioChange,
-            radios: Array.from({ length: slidesCount }, (_2, index) => ({
+            value: `${selectedSlide}`,
+            direction: "horizontal",
+            children: Array.from({ length: slidesCount }, (_2, index) => ({
               value: `${index}`
-            })),
-            value: `${selectedSlide}`
+            })).map((radio) => /* @__PURE__ */ jsxRuntime.jsx(RadioButton.RadioButton, {
+              ...radio
+            }))
           })
         })
       ]

package/dist-cjs/packages/lab/src/carousel/Carousel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Carousel.js","sources":["../src/carousel/Carousel.tsx"],"sourcesContent":["import { Button, GridLayout, makePrefixer, useId } from \"@salt-ds/core\";\nimport {\n ChangeEventHandler,\n Children,\n forwardRef,\n HTMLAttributes,\n ReactElement,\n useEffect,\n} from \"react\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@salt-ds/icons\";\nimport { RadioButtonGroup } from \"../radio-button\";\nimport { DeckLayout } from \"../deck-layout\";\nimport { clsx } from \"clsx\";\nimport \"./Carousel.css\";\nimport { useSlideSelection } from \"../utils\";\nimport { CarouselSlideProps } from \"./CarouselSlide\";\n\nconst withBaseName = makePrefixer(\"saltCarousel\");\n\nexport interface CarouselProps extends HTMLAttributes<HTMLDivElement> {\n /*\n The initial Index enables you to select the active slide in the carousel.\n * Optional, default 0.\n /\n initialIndex?: number;\n /\n * The animation when the slides are shown.\n * Optional. Defaults to `slide`\n /\n animation?: \"slide\" \| \"fade\";\n /\n * If this props is passed it will set the aria-label with value to the carousel container.\n * Optional. Defaults to undefined\n /\n carouselDescription?: string;\n /\n Collection of slides to render\n * Component must implement CarouselSlideProps. Mandatory.\n /\n children: Array<ReactElement<CarouselSlideProps>>;\n /\n This prop will enable compact / reduced width mode.\n * The navigation buttons would be part of indicators\n * Optional. Defaults to false\n /\n compact?: boolean;\n /\n * It sets the id for the Carousel Container.\n * String. Optional\n */\n id?: string;\n}\n\nexport const Carousel = forwardRef<HTMLDivElement, CarouselProps>(\n function Carousel(\n {\n initialIndex,\n animation = \"slide\",\n carouselDescription,\n children,\n className,\n compact,\n id: idProp,\n ...rest\n },\n ref\n ) {\n const id = useId(idProp);\n const slidesCount = Children.count(children);\n\n const [_, selectedSlide, handleSlideSelection] =\n useSlideSelection(initialIndex);\n\n const moveSlide = (direction: \"left\" \| \"right\") => {\n const moveLeft =\n selectedSlide === 0 ? slidesCount - 1 : selectedSlide - 1;\n const moveRight =\n selectedSlide === slidesCount - 1 ? 0 : selectedSlide + 1;\n const newSelection = direction === \"left\" ? moveLeft : moveRight;\n const newTransition = direction === \"left\" ? \"decrease\" : \"increase\";\n handleSlideSelection(newSelection, newTransition);\n };\n\n const handleRadioChange: ChangeEventHandler<HTMLInputElement> = ({\n target: { value },\n }) => {\n handleSlideSelection(Number(value));\n };\n\n useEffect(() => {\n if (process.env.NODE_ENV !== \"production\") {\n if (slidesCount < 1) {\n console.warn(\n \"Carousel component requires more than one children to render. At least two elements should be provided.\"\n );\n }\n }\n }, [slidesCount]);\n\n return (\n <GridLayout\n aria-label={carouselDescription}\n aria-roledescription=\"carousel\"\n id={id}\n role=\"region\"\n ref={ref}\n gap={0}\n columns={3}\n className={clsx(\n withBaseName(),\n compact && withBaseName(\"compact\"),\n className\n )}\n {...rest}\n >\n <Button\n variant=\"secondary\"\n className={withBaseName(\"prev-button\")}\n onClick={() => moveSlide(\"left\")}\n >\n <ChevronLeftIcon size={2} />\n </Button>\n <DeckLayout\n activeIndex={selectedSlide}\n animation={animation}\n className={withBaseName(\"slider\")}\n >\n {children}\n </DeckLayout>\n <Button\n variant=\"secondary\"\n className={withBaseName(\"next-button\")}\n onClick={() => moveSlide(\"right\")}\n >\n <ChevronRightIcon size={2} />\n </Button>\n <div className={withBaseName(\"dots\")}>\n <RadioButtonGroup\n ~~row\n~~ aria-label=\"Carousel buttons\"\n onChange={handleRadioChange}\n ~~radios~~={Array.from({ length: slidesCount }, (_, index) => ({\n value: `${index}`,\n }))}\n ~~value=~~{~~`${selectedSlide~~}`}\n ~~/>\~~n </div>\n </GridLayout>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","Carousel","useId","Children","useSlideSelection","useEffect","jsxs","GridLayout","clsx","jsx","Button","ChevronLeftIcon","DeckLayout","ChevronRightIcon","RadioButtonGroup","_"],"mappings":"~~;;;;;;;;;;;;;;;;;;~~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~~GAAG~~,EAAA,~~IAAA~~;AAAA,~~YACH~~,~~YAAW~~,EAAA,~~kBAAA~~;AAAA,~~YACX~~,~~QAAU~~,EAAA,~~iBAAA~~;AAAA,YACV,~~MAAA~~,~~EAAQ~~,~~MAAM~~,~~IAAK~~,~~CAAA~~,EAAE,~~QAAQ~~,~~WAAY~~,EAAA,~~EAAG,~~CAACC,~~EAAAA~~,~~EAAG,~~KAAW,MAAA;AAAA,~~cACzD~~,OAAO,CAAG,EAAA,KAAA,CAAA,CAAA;AAAA,aACV,CAAA,CAAA;AAAA,~~YACF~~,~~OAAO~~,~~CAAG~~,~~EAAA~~,~~aAAA~~,CAAA~~,CAAA~~;AAAA,~~WACZ~~,CAAA;AAAA,SACF,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1	+ {"version":3,"file":"Carousel.js","sources":["../src/carousel/Carousel.tsx"],"sourcesContent":["import { Button, GridLayout, makePrefixer, useId } from \"@salt-ds/core\";\nimport {\n ChangeEventHandler,\n Children,\n forwardRef,\n HTMLAttributes,\n ReactElement,\n useEffect,\n} from \"react\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@salt-ds/icons\";\nimport { RadioButtonGroup, RadioButton } from \"../radio-button\";\nimport { DeckLayout } from \"../deck-layout\";\nimport { clsx } from \"clsx\";\nimport \"./Carousel.css\";\nimport { useSlideSelection } from \"../utils\";\nimport { CarouselSlideProps } from \"./CarouselSlide\";\n\nconst withBaseName = makePrefixer(\"saltCarousel\");\n\nexport interface CarouselProps extends HTMLAttributes<HTMLDivElement> {\n /*\n The initial Index enables you to select the active slide in the carousel.\n * Optional, default 0.\n /\n initialIndex?: number;\n /\n * The animation when the slides are shown.\n * Optional. Defaults to `slide`\n /\n animation?: \"slide\" \| \"fade\";\n /\n * If this props is passed it will set the aria-label with value to the carousel container.\n * Optional. Defaults to undefined\n /\n carouselDescription?: string;\n /\n Collection of slides to render\n * Component must implement CarouselSlideProps. Mandatory.\n /\n children: Array<ReactElement<CarouselSlideProps>>;\n /\n This prop will enable compact / reduced width mode.\n * The navigation buttons would be part of indicators\n * Optional. Defaults to false\n /\n compact?: boolean;\n /\n * It sets the id for the Carousel Container.\n * String. Optional\n */\n id?: string;\n}\n\nexport const Carousel = forwardRef<HTMLDivElement, CarouselProps>(\n function Carousel(\n {\n initialIndex,\n animation = \"slide\",\n carouselDescription,\n children,\n className,\n compact,\n id: idProp,\n ...rest\n },\n ref\n ) {\n const id = useId(idProp);\n const slidesCount = Children.count(children);\n\n const [_, selectedSlide, handleSlideSelection] =\n useSlideSelection(initialIndex);\n\n const moveSlide = (direction: \"left\" \| \"right\") => {\n const moveLeft =\n selectedSlide === 0 ? slidesCount - 1 : selectedSlide - 1;\n const moveRight =\n selectedSlide === slidesCount - 1 ? 0 : selectedSlide + 1;\n const newSelection = direction === \"left\" ? moveLeft : moveRight;\n const newTransition = direction === \"left\" ? \"decrease\" : \"increase\";\n handleSlideSelection(newSelection, newTransition);\n };\n\n const handleRadioChange: ChangeEventHandler<HTMLInputElement> = ({\n target: { value },\n }) => {\n handleSlideSelection(Number(value));\n };\n\n useEffect(() => {\n if (process.env.NODE_ENV !== \"production\") {\n if (slidesCount < 1) {\n console.warn(\n \"Carousel component requires more than one children to render. At least two elements should be provided.\"\n );\n }\n }\n }, [slidesCount]);\n\n return (\n <GridLayout\n aria-label={carouselDescription}\n aria-roledescription=\"carousel\"\n id={id}\n role=\"region\"\n ref={ref}\n gap={0}\n columns={3}\n className={clsx(\n withBaseName(),\n compact && withBaseName(\"compact\"),\n className\n )}\n {...rest}\n >\n <Button\n variant=\"secondary\"\n className={withBaseName(\"prev-button\")}\n onClick={() => moveSlide(\"left\")}\n >\n <ChevronLeftIcon size={2} />\n </Button>\n <DeckLayout\n activeIndex={selectedSlide}\n animation={animation}\n className={withBaseName(\"slider\")}\n >\n {children}\n </DeckLayout>\n <Button\n variant=\"secondary\"\n className={withBaseName(\"next-button\")}\n onClick={() => moveSlide(\"right\")}\n >\n <ChevronRightIcon size={2} />\n </Button>\n <div className={withBaseName(\"dots\")}>\n <RadioButtonGroup\n aria-label=\"Carousel buttons\"\n onChange={handleRadioChange}\n value={`${selectedSlide}`}\n direction={\"horizontal\"}\n >\n {Array.from({ length: slidesCount }, (_, index) => ({\n value: `${index}`,\n })).map((radio) => (\n <RadioButton {...radio} />\n ))}\n </RadioButtonGroup>\n </div>\n </GridLayout>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","Carousel","useId","Children","useSlideSelection","useEffect","jsxs","GridLayout","clsx","jsx","Button","ChevronLeftIcon","DeckLayout","ChevronRightIcon","RadioButtonGroup","_","RadioButton"],"mappings":"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"}

package/dist-cjs/packages/lab/src/checkbox/CheckboxIcon.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
-var css_248z = "/* Styles applied to root component */\n.salt-density-high {\n  --checkbox-size: 12px;\n  --checkbox-density-bar-y: 5px;\n  --checkbox-density-bar-height: 3px;\n}\n\n.salt-density-medium {\n  --checkbox-size: 14px;\n  --checkbox-density-bar-y: 6px;\n  --checkbox-density-bar-height: 2px;\n}\n\n.salt-density-low {\n  --checkbox-size: 16px;\n  --checkbox-density-bar-y: 6px;\n  --checkbox-density-bar-height: 2px;\n}\n\n.salt-density-touch {\n  --checkbox-size: 18px;\n  --checkbox-density-bar-y: 6px;\n  --checkbox-density-bar-height: 2px;\n}\n\n.saltCheckboxIcon {\n  --checkbox-borderWidth: var(--salt-size-border);\n  --checkbox-box-offset: calc(var(--checkbox-borderWidth) / 2);\n  --checkbox-height: calc(var(--checkbox-viewbox) - var(--checkbox-borderWidth));\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-tick-color, var(--salt-selectable-primary-foreground-selected));\n  --checkbox-viewbox: 14px; /* do not change, matches value in svg viewBox */\n  --checkbox-width: calc(var(--checkbox-viewbox) - var(--checkbox-borderWidth));\n\n  fill: var(--saltCheckbox-icon-fill, var(--salt-selectable-background));\n  height: var(--saltCheckbox-icon-size, var(--checkbox-size));\n  stroke: var(--saltCheckbox-icon-stroke, var(--salt-selectable-borderColor));\n  stroke-width: var(--saltCheckbox-icon-strokeWidth, var(--salt-size-border));\n  width: var(--saltCheckbox-icon-size, var(--checkbox-size));\n}\n\n/* Styles applied to root component on hover */\n.saltCheckbox:hover .saltCheckboxIcon,\n.saltCheckboxIcon:hover {\n  stroke: var(--saltCheckbox-icon-stroke, var(--salt-selectable-borderColor));\n  stroke-width: var(--saltCheckbox-icon-strokeWidth-hover, var(--salt-size-border));\n}\n\n/* Styles applied if `disabled={true}` */\n.saltCheckboxIcon-disabled {\n  stroke: var(--saltCheckbox-icon-stroke-disabled, var(--salt-selectable-borderColor-disabled));\n  stroke-width: var(--saltCheckbox-icon-strokeWidth-disabled, var(--salt-size-border));\n}\n\n/* Styles applied if `disabled={true}` on hover */\n.saltCheckboxIcon.saltCheckboxIcon-disabled:hover,\n.saltCheckbox.saltCheckbox-disabled:hover .saltCheckboxIcon {\n  stroke: var(--saltCheckbox-icon-stroke-disabled, var(--salt-selectable-borderColor-disabled));\n  stroke-width: var(--saltCheckbox-icon-strokeWidth-disabled, var(--salt-size-border));\n}\n\n/* Styles applied if `checked={true}` */\n.saltCheckboxIcon-checked {\n  --checkbox-borderWidth: var(--saltCheckbox-icon-borderWidth-checked, 0px);\n\n  fill: var(--saltCheckbox-icon-fill-checked, var(--salt-selectable-borderColor-selected));\n}\n\n/* Styles applied if `checked={true}` and `disabled={true}` */\n.saltCheckboxIcon-checked.saltCheckboxIcon-disabled {\n  fill: var(--saltCheckbox-icon-fill-disabled, var(--salt-selectable-borderColor-selectedDisabled));\n}\n\n/* Styles applied to box */\n.saltCheckboxIcon-box {\n  height: var(--checkbox-height);\n  stroke-width: var(--checkbox-borderWidth);\n  width: var(--checkbox-width);\n  x: var(--checkbox-box-offset);\n  y: var(--checkbox-box-offset);\n}\n\n/* Styles applied to icon if `indeterminate={true}` */\n.saltCheckboxIcon-indeterminate {\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-indeterminate-bar-color, var(--salt-selectable-foreground-partial));\n}\n\n/* Styles applied if `indeterminate={true}` and `disabled={true}` */\n.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-indeterminate-bar-color-disabled, var(--salt-selectable-foreground-partialDisabled));\n}\n\n/* Styles applied to tick */\n.saltCheckboxIcon-tick {\n  fill: var(--saltCheckbox-icon-tick-fill, var(--checkbox-icon-tick-fill));\n  stroke-width: 0;\n}\n\n/* Styles applied to tick if `indeterminate={true}` */\n.saltCheckboxIcon-indeterminate .saltCheckboxIcon-tick {\n  height: var(--saltCheckbox-icon-indeterminate-bar-height, var(--checkbox-density-bar-height));\n  y: var(--saltCheckbox-icon-indeterminate-bar-y, var(--checkbox-density-bar-y));\n}\n";
+var css_248z = "/* Styles applied to root component */\n.salt-density-high {\n  --checkbox-size: 12px;\n  --checkbox-density-bar-y: 5px;\n  --checkbox-density-bar-height: 3px;\n}\n\n.salt-density-medium {\n  --checkbox-size: 14px;\n  --checkbox-density-bar-y: 6px;\n  --checkbox-density-bar-height: 2px;\n}\n\n.salt-density-low {\n  --checkbox-size: 16px;\n  --checkbox-density-bar-y: 6px;\n  --checkbox-density-bar-height: 2px;\n}\n\n.salt-density-touch {\n  --checkbox-size: 18px;\n  --checkbox-density-bar-y: 6px;\n  --checkbox-density-bar-height: 2px;\n}\n\n.saltCheckboxIcon {\n  --checkbox-borderWidth: var(--salt-size-border);\n  --checkbox-box-offset: calc(var(--checkbox-borderWidth) / 2);\n  --checkbox-height: calc(var(--checkbox-viewbox) - var(--checkbox-borderWidth));\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-tick-color, var(--salt-selectable-primary-foreground-selected));\n  --checkbox-viewbox: 14px; /* do not change, matches value in svg viewBox */\n  --checkbox-width: calc(var(--checkbox-viewbox) - var(--checkbox-borderWidth));\n\n  fill: var(--saltCheckbox-icon-fill, var(--salt-selectable-background));\n  height: var(--saltCheckbox-icon-size, var(--checkbox-size));\n  stroke: var(--saltCheckbox-icon-stroke, var(--salt-selectable-borderColor));\n  stroke-width: var(--saltCheckbox-icon-strokeWidth, var(--salt-size-border));\n  width: var(--saltCheckbox-icon-size, var(--checkbox-size));\n}\n\n/* Styles applied to root component on hover */\n.saltCheckbox:hover .saltCheckboxIcon,\n.saltCheckboxIcon:hover {\n  stroke: var(--saltCheckbox-icon-stroke, var(--salt-selectable-borderColor));\n  stroke-width: var(--saltCheckbox-icon-strokeWidth-hover, var(--salt-size-border));\n}\n\n/* Styles applied if `disabled={true}` */\n.saltCheckboxIcon-disabled {\n  stroke: var(--saltCheckbox-icon-stroke-disabled, var(--salt-selectable-borderColor-disabled));\n  stroke-width: var(--saltCheckbox-icon-strokeWidth-disabled, var(--salt-size-border));\n}\n\n/* Styles applied if `disabled={true}` on hover */\n.saltCheckboxIcon.saltCheckboxIcon-disabled:hover,\n.saltCheckbox.saltCheckbox-disabled:hover .saltCheckboxIcon {\n  stroke: var(--saltCheckbox-icon-stroke-disabled, var(--salt-selectable-borderColor-disabled));\n  stroke-width: var(--saltCheckbox-icon-strokeWidth-disabled, var(--salt-size-border));\n}\n\n/* Styles applied if `checked={true}` */\n.saltCheckboxIcon-checked {\n  --checkbox-borderWidth: var(--saltCheckbox-icon-borderWidth-checked, 0px);\n\n  fill: var(--saltCheckbox-icon-fill-checked, var(--salt-selectable-borderColor-selected));\n}\n\n/* Styles applied if `checked={true}` and `disabled={true}` */\n.saltCheckboxIcon-checked.saltCheckboxIcon-disabled {\n  fill: var(--saltCheckbox-icon-fill-disabled, var(--salt-selectable-borderColor-selectedDisabled));\n}\n\n/* Styles applied to box */\n.saltCheckboxIcon-box {\n  height: var(--checkbox-height);\n  stroke-width: var(--checkbox-borderWidth);\n  width: var(--checkbox-width);\n  x: var(--checkbox-box-offset);\n  y: var(--checkbox-box-offset);\n}\n\n/* Styles applied to icon if `indeterminate={true}` */\n.saltCheckboxIcon-indeterminate {\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-indeterminate-bar-color, var(--salt-selectable-foreground-selected));\n}\n\n/* Styles applied if `indeterminate={true}` and `disabled={true}` */\n.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-indeterminate-bar-color-disabled, var(--salt-selectable-foreground-selectedDisabled));\n}\n\n/* Styles applied to tick */\n.saltCheckboxIcon-tick {\n  fill: var(--saltCheckbox-icon-tick-fill, var(--checkbox-icon-tick-fill));\n  stroke-width: 0;\n}\n\n/* Styles applied to tick if `indeterminate={true}` */\n.saltCheckboxIcon-indeterminate .saltCheckboxIcon-tick {\n  height: var(--saltCheckbox-icon-indeterminate-bar-height, var(--checkbox-density-bar-height));\n  y: var(--saltCheckbox-icon-indeterminate-bar-y, var(--checkbox-density-bar-y));\n}\n";
 styleInject_es(css_248z);
 module.exports = css_248z;

package/dist-cjs/packages/lab/src/color-chooser/Color.js CHANGED Viewed

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 var tinycolor = require('tinycolor2');
+var ColorHelpers = require('./ColorHelpers.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -23,6 +24,14 @@ class Color {
       a: this.color.toRgb().a
     };
   }
+  get colorName() {
+    return ColorHelpers.getColorNameByHexValue(
+      this.color.toHex8String(),
+      false,
+      void 0,
+      true
+    );
+  }
   static makeColorFromHex(hexValue) {
     const colorObj = new Color();
     colorObj.color = tinycolor__default["default"](hexValue);

package/dist-cjs/packages/lab/src/color-chooser/Color.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Color.js","sources":["../src/color-chooser/Color.ts"],"sourcesContent":["import tinycolor from \"tinycolor2\";\n\nexport type RGBAValue = {\n r: number;\n b: number;\n g: number;\n a: number;\n};\n\nexport class Color {\n private color: tinycolor.Instance = tinycolor();\n\n public get hex(): string {\n return this.color.getAlpha() === 1\n ? this.color.toHexString()\n : this.color.toHex8String();\n }\n\n public get rgba(): RGBAValue {\n return {\n r: this.color.toRgb().r,\n g: this.color.toRgb().g,\n b: this.color.toRgb().b,\n a: this.color.toRgb().a,\n };\n }\n\n static makeColorFromHex(hexValue: string \| undefined): Color \| undefined {\n const colorObj = new Color();\n colorObj.color = tinycolor(hexValue);\n\n if (colorObj.color.isValid()) {\n return colorObj;\n } else {\n return undefined;\n }\n }\n\n static makeColorFromRGB(r: number, g: number, b: number, a?: number): Color {\n const colorObj = new Color();\n colorObj.color = tinycolor({ r: r, g: g, b: b, a: a });\n return colorObj;\n }\n\n setAlpha(alpha: number): Color {\n const colorObj = new Color();\n colorObj.color = this.color.setAlpha(alpha);\n return colorObj;\n }\n}\n"],"names":["tinycolor"],"mappings":"~~;;;;;;;;;;AASO~~,MAAM,KAAM,CAAA;AAAA,EAAZ,WAAA,GAAA;AACL,IAAA,IAAA,CAAQ,QAA4BA,6BAAU,EAAA,CAAA;AAAA,GAAA;AAAA,EAE9C,IAAW,GAAc,GAAA;AACvB,IAAO,OAAA,IAAA,CAAK,KAAM,CAAA,QAAA,EAAe,KAAA,CAAA,GAC7B,IAAK,CAAA,KAAA,CAAM,WAAY,EAAA,GACvB,IAAK,CAAA,KAAA,CAAM,YAAa,EAAA,CAAA;AAAA,GAC9B;AAAA,EAEA,IAAW,IAAkB,GAAA;AAC3B,IAAO,OAAA;AAAA,MACL,CAAG,EAAA,IAAA,CAAK,KAAM,CAAA,KAAA,EAAQ,CAAA,CAAA;AAAA,MACtB,CAAG,EAAA,IAAA,CAAK,KAAM,CAAA,KAAA,EAAQ,CAAA,CAAA;AAAA,MACtB,CAAG,EAAA,IAAA,CAAK,KAAM,CAAA,KAAA,EAAQ,CAAA,CAAA;AAAA,MACtB,CAAG,EAAA,IAAA,CAAK,KAAM,CAAA,KAAA,EAAQ,CAAA,CAAA;AAAA,KACxB,CAAA;AAAA,GACF;AAAA,EAEA,OAAO,iBAAiB,QAAiD,EAAA;AACvE,IAAM,MAAA,QAAA,GAAW,IAAI,KAAM,EAAA,CAAA;AAC3B,IAAS,QAAA,CAAA,KAAA,~~GAAQA~~,8BAAU,QAAQ,CAAA,CAAA;AAEnC,IAAI,IAAA,QAAA,CAAS,KAAM,CAAA,OAAA,EAAW,EAAA;AAC5B,MAAO,OAAA,QAAA,CAAA;AAAA,KACF,MAAA;AACL,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACT;AAAA,GACF;AAAA,EAEA,OAAO,gBAAA,CAAiB,CAAW,EAAA,CAAA,EAAW,GAAW,CAAmB,EAAA;AAC1E,IAAM,MAAA,QAAA,GAAW,IAAI,KAAM,EAAA,CAAA;AAC3B,IAAA,QAAA,CAAS,QAAQA,6BAAU,CAAA,EAAE,GAAM,CAAM,EAAA,CAAA,EAAM,GAAM,CAAA,CAAA;AACrD,IAAO,OAAA,QAAA,CAAA;AAAA,GACT;AAAA,EAEA,SAAS,KAAsB,EAAA;AAC7B,IAAM,MAAA,QAAA,GAAW,IAAI,KAAM,EAAA,CAAA;AAC3B,IAAA,QAAA,CAAS,KAAQ,GAAA,IAAA,CAAK,KAAM,CAAA,QAAA,CAAS,KAAK,CAAA,CAAA;AAC1C,IAAO,OAAA,QAAA,CAAA;AAAA,GACT;AACF;;;;"}
1	+ {"version":3,"file":"Color.js","sources":["../src/color-chooser/Color.ts"],"sourcesContent":["import tinycolor from \"tinycolor2\";\nimport { getColorNameByHexValue } from \"./ColorHelpers\";\n\nexport type RGBAValue = {\n r: number;\n b: number;\n g: number;\n a: number;\n};\n\nexport class Color {\n private color: tinycolor.Instance = tinycolor();\n\n public get hex(): string {\n return this.color.getAlpha() === 1\n ? this.color.toHexString()\n : this.color.toHex8String();\n }\n\n public get rgba(): RGBAValue {\n return {\n r: this.color.toRgb().r,\n g: this.color.toRgb().g,\n b: this.color.toRgb().b,\n a: this.color.toRgb().a,\n };\n }\n\n /** E.g. Orange800 */\n public get colorName(): string \| undefined {\n return getColorNameByHexValue(\n this.color.toHex8String(),\n false,\n undefined,\n true\n );\n }\n\n static makeColorFromHex(hexValue: string \| undefined): Color \| undefined {\n const colorObj = new Color();\n colorObj.color = tinycolor(hexValue);\n\n if (colorObj.color.isValid()) {\n return colorObj;\n } else {\n return undefined;\n }\n }\n\n static makeColorFromRGB(r: number, g: number, b: number, a?: number): Color {\n const colorObj = new Color();\n colorObj.color = tinycolor({ r: r, g: g, b: b, a: a });\n return colorObj;\n }\n\n setAlpha(alpha: number): Color {\n const colorObj = new Color();\n colorObj.color = this.color.setAlpha(alpha);\n return colorObj;\n }\n}\n"],"names":["tinycolor","getColorNameByHexValue"],"mappings":";;;;;;;;;;;AAUO,MAAM,KAAM,CAAA;AAAA,EAAZ,WAAA,GAAA;AACL,IAAA,IAAA,CAAQ,QAA4BA,6BAAU,EAAA,CAAA;AAAA,GAAA;AAAA,EAE9C,IAAW,GAAc,GAAA;AACvB,IAAO,OAAA,IAAA,CAAK,KAAM,CAAA,QAAA,EAAe,KAAA,CAAA,GAC7B,IAAK,CAAA,KAAA,CAAM,WAAY,EAAA,GACvB,IAAK,CAAA,KAAA,CAAM,YAAa,EAAA,CAAA;AAAA,GAC9B;AAAA,EAEA,IAAW,IAAkB,GAAA;AAC3B,IAAO,OAAA;AAAA,MACL,CAAG,EAAA,IAAA,CAAK,KAAM,CAAA,KAAA,EAAQ,CAAA,CAAA;AAAA,MACtB,CAAG,EAAA,IAAA,CAAK,KAAM,CAAA,KAAA,EAAQ,CAAA,CAAA;AAAA,MACtB,CAAG,EAAA,IAAA,CAAK,KAAM,CAAA,KAAA,EAAQ,CAAA,CAAA;AAAA,MACtB,CAAG,EAAA,IAAA,CAAK,KAAM,CAAA,KAAA,EAAQ,CAAA,CAAA;AAAA,KACxB,CAAA;AAAA,GACF;AAAA,EAGA,IAAW,SAAgC,GAAA;AACzC,IAAO,OAAAC,mCAAA;AAAA,MACL,IAAA,CAAK,MAAM,YAAa,EAAA;AAAA,MACxB,KAAA;AAAA,MACA,KAAA,CAAA;AAAA,MACA,IAAA;AAAA,KACF,CAAA;AAAA,GACF;AAAA,EAEA,OAAO,iBAAiB,QAAiD,EAAA;AACvE,IAAM,MAAA,QAAA,GAAW,IAAI,KAAM,EAAA,CAAA;AAC3B,IAAS,QAAA,CAAA,KAAA,GAAQD,8BAAU,QAAQ,CAAA,CAAA;AAEnC,IAAI,IAAA,QAAA,CAAS,KAAM,CAAA,OAAA,EAAW,EAAA;AAC5B,MAAO,OAAA,QAAA,CAAA;AAAA,KACF,MAAA;AACL,MAAO,OAAA,KAAA,CAAA,CAAA;AAAA,KACT;AAAA,GACF;AAAA,EAEA,OAAO,gBAAA,CAAiB,CAAW,EAAA,CAAA,EAAW,GAAW,CAAmB,EAAA;AAC1E,IAAM,MAAA,QAAA,GAAW,IAAI,KAAM,EAAA,CAAA;AAC3B,IAAA,QAAA,CAAS,QAAQA,6BAAU,CAAA,EAAE,GAAM,CAAM,EAAA,CAAA,EAAM,GAAM,CAAA,CAAA;AACrD,IAAO,OAAA,QAAA,CAAA;AAAA,GACT;AAAA,EAEA,SAAS,KAAsB,EAAA;AAC7B,IAAM,MAAA,QAAA,GAAW,IAAI,KAAM,EAAA,CAAA;AAC3B,IAAA,QAAA,CAAS,KAAQ,GAAA,IAAA,CAAK,KAAM,CAAA,QAAA,CAAS,KAAK,CAAA,CAAA;AAC1C,IAAO,OAAA,QAAA,CAAA;AAAA,GACT;AACF;;;;"}

package/dist-cjs/packages/lab/src/color-chooser/ColorHelpers.js CHANGED Viewed

@@ -6,7 +6,7 @@ var colorMap = require('./colorMap.js');
 var Color = require('./Color.js');
 var colorUtils = require('./color-utils.js');
-function getColorNameByHexValue(hexValue, disableAlpha = false, saltColorOverrides) {
+function getColorNameByHexValue(hexValue, disableAlpha = false, saltColorOverrides, disableFallBackToHex = false) {
   const hexNoAlpha = hexValueWithoutAlpha(hexValue);
   const saltColors = saltColorOverrides != null ? saltColorOverrides : colorMap.saltColorMap;
   if (colorUtils.isTransparent(hexValue))
@@ -26,7 +26,7 @@ function getColorNameByHexValue(hexValue, disableAlpha = false, saltColorOverrid
   if (hexValue === "WHITE" || hexValue === "BLACK") {
     return hexValue.charAt(0) + hexValue.slice(1).toLowerCase();
   }
-  return getHexValue(hexValue, disableAlpha);
+  return disableFallBackToHex ? void 0 : getHexValue(hexValue, disableAlpha);
 }
 function hexValueWithoutAlpha(hexValue) {
   if (hexValue === void 0)

package/dist-cjs/packages/lab/src/color-chooser/ColorHelpers.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorHelpers.js","sources":["../src/color-chooser/ColorHelpers.ts"],"sourcesContent":["import { saltColorMap } from \"./colorMap\";\nimport { Color } from \"./Color\";\nimport { isTransparent } from \"./color-utils\";\n\nexport function getColorNameByHexValue(\n hexValue: string \| undefined,\n disableAlpha = false,\n saltColorOverrides?: Record<string, string>\n): string \| undefined {\n const hexNoAlpha = hexValueWithoutAlpha(hexValue);\n const saltColors = saltColorOverrides ?? saltColorMap;\n\n // Special case\n if (isTransparent(hexValue)) return \"Transparent\";\n\n let colorName = Object.keys(saltColors).find((key: string) => {\n if (saltColors[key]) {\n const rgbVals = saltColors[key].startsWith(\"rgba\")\n ? saltColors[key].substring(5, saltColors[key].length - 1)\n : saltColors[key].substring(4, saltColors[key].length - 1);\n const [r, g, b] = [...rgbVals.replace(\" \", \"\").split(\",\")];\n return (\n Color.makeColorFromRGB(Number(r), Number(g), Number(b)).hex ===\n hexNoAlpha?.toLowerCase()\n );\n }\n return 0;\n });\n\n if (colorName) {\n colorName = colorName.slice(4);\n return colorName.charAt(0).toUpperCase() + colorName.slice(1).toLowerCase();\n }\n\n if (hexValue === \"WHITE\" \|\| hexValue === \"BLACK\") {\n return hexValue.charAt(0) + hexValue.slice(1).toLowerCase();\n }\n\n return getHexValue(hexValue, disableAlpha);\n}\n\nexport function hexValueWithoutAlpha(\n hexValue: string \| undefined\n): string \| undefined {\n if (hexValue === undefined) return undefined;\n return isValidHex(hexValue)\n ? hexValue.substring(0, 7).toUpperCase()\n : undefined;\n}\n\nexport function getHexValue(\n hexValue: string \| undefined,\n disableAlpha: boolean\n): string \| undefined {\n if (hexValue === undefined) return undefined;\n return disableAlpha ? hexValueWithoutAlpha(hexValue) : hexValue;\n}\n\nexport const isValidHex = (hex: string \| undefined): boolean => {\n return hex\n ? /^#[0-9a-fA-F]{8}$/.test(hex) \|\| /#[0-9a-fA-F]{6}$/.test(hex)\n : false;\n};\n\nexport const convertColorMapValueToHex = (color: string): string => {\n if (!color.startsWith(\"rgb\")) return color;\n const rgbVals = color.startsWith(\"rgba\")\n ? color.substring(5, color.length - 1)\n : color.substring(4, color.length - 1);\n const [r, g, b, a] = [...rgbVals.replace(\" \", \"\").split(\",\")];\n return Color.makeColorFromRGB(\n Number(r),\n Number(g),\n Number(b),\n a ? Number(a) : 1\n ).hex;\n};\n"],"names":["saltColorMap","isTransparent","Color"],"mappings":";;;;;;;;AAIO,SAAS,~~sBACd~~,~~CAAA~~,~~QAAA~~,~~EACA~~,~~YAAe~~,~~GAAA~~,~~KAAA~~,~~EACf~~,~~kBACoB~~,EAAA;AACpB,EAAM,MAAA,UAAA,GAAa,qBAAqB,QAAQ,CAAA,CAAA;AAChD,EAAA,MAAM,aAAa,kBAAsB,IAAA,IAAA,GAAA,kBAAA,GAAAA,qBAAA,CAAA;AAGzC,EAAA,IAAIC,yBAAc,QAAQ,CAAA;AAAG,IAAO,OAAA,aAAA,CAAA;AAEpC,EAAA,IAAI,YAAY,MAAO,CAAA,IAAA,CAAK,UAAU,CAAE,CAAA,IAAA,CAAK,CAAC,GAAgB,KAAA;AAC5D,IAAA,IAAI,WAAW,GAAM,CAAA,EAAA;AACnB,MAAM,MAAA,OAAA,GAAU,WAAW,GAAK,CAAA,CAAA,UAAA,CAAW,MAAM,CAC7C,GAAA,UAAA,CAAW,GAAK,CAAA,CAAA,SAAA,CAAU,CAAG,EAAA,UAAA,CAAW,KAAK,MAAS,GAAA,CAAC,IACvD,UAAW,CAAA,GAAA,CAAA,CAAK,UAAU,CAAG,EAAA,UAAA,CAAW,GAAK,CAAA,CAAA,MAAA,GAAS,CAAC,CAAA,CAAA;AAC3D,MAAA,MAAM,CAAC,CAAA,EAAG,CAAG,EAAA,CAAC,IAAI,CAAC,GAAG,OAAQ,CAAA,OAAA,CAAQ,GAAK,EAAA,EAAE,CAAE,CAAA,KAAA,CAAM,GAAG,CAAC,CAAA,CAAA;AACzD,MAAA,OACEC,WAAM,CAAA,gBAAA,CAAiB,MAAO,CAAA,CAAC,CAAG,EAAA,MAAA,CAAO,CAAC,CAAA,EAAG,MAAO,CAAA,CAAC,CAAC,CAAA,CAAE,SACxD,UAAY,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,CAAA,WAAA,EAAA,CAAA,CAAA;AAAA,KAEhB;AACA,IAAO,OAAA,CAAA,CAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAA,IAAI,SAAW,EAAA;AACb,IAAY,SAAA,GAAA,SAAA,CAAU,MAAM,CAAC,CAAA,CAAA;AAC7B,IAAO,OAAA,SAAA,CAAU,MAAO,CAAA,CAAC,CAAE,CAAA,WAAA,KAAgB,SAAU,CAAA,KAAA,CAAM,CAAC,CAAA,CAAE,WAAY,EAAA,CAAA;AAAA,GAC5E;AAEA,EAAI,IAAA,QAAA,KAAa,OAAW,IAAA,QAAA,KAAa,OAAS,EAAA;AAChD,IAAO,OAAA,QAAA,CAAS,OAAO,CAAC,CAAA,GAAI,SAAS,KAAM,CAAA,CAAC,EAAE,WAAY,EAAA,CAAA;AAAA,GAC5D;AAEA,~~EAAO~~,~~OAAA~~,~~WAAA~~,~~CAAY~~,~~UAAU~~,YAAY,CAAA,CAAA;~~AAC3C~~,CAAA;AAEO,SAAS,qBACd,QACoB,EAAA;AACpB,EAAA,IAAI,QAAa,KAAA,KAAA,CAAA;AAAW,IAAO,OAAA,KAAA,CAAA,CAAA;AACnC,EAAO,OAAA,UAAA,CAAW,QAAQ,CACtB,GAAA,QAAA,CAAS,UAAU,CAAG,EAAA,CAAC,CAAE,CAAA,WAAA,EACzB,GAAA,KAAA,CAAA,CAAA;AACN,CAAA;AAEgB,SAAA,WAAA,CACd,UACA,YACoB,EAAA;AACpB,EAAA,IAAI,QAAa,KAAA,KAAA,CAAA;AAAW,IAAO,OAAA,KAAA,CAAA,CAAA;AACnC,EAAO,OAAA,YAAA,GAAe,oBAAqB,CAAA,QAAQ,CAAI,GAAA,QAAA,CAAA;AACzD,CAAA;AAEa,MAAA,UAAA,GAAa,CAAC,GAAqC,KAAA;AAC9D,EAAO,OAAA,GAAA,GACH,oBAAoB,IAAK,CAAA,GAAG,KAAK,kBAAmB,CAAA,IAAA,CAAK,GAAG,CAC5D,GAAA,KAAA,CAAA;AACN,EAAA;AAEa,MAAA,yBAAA,GAA4B,CAAC,KAA0B,KAAA;AAClE,EAAI,IAAA,CAAC,KAAM,CAAA,UAAA,CAAW,KAAK,CAAA;AAAG,IAAO,OAAA,KAAA,CAAA;AACrC,EAAA,MAAM,UAAU,KAAM,CAAA,UAAA,CAAW,MAAM,CAAA,GACnC,MAAM,SAAU,CAAA,CAAA,EAAG,KAAM,CAAA,MAAA,GAAS,CAAC,CACnC,GAAA,KAAA,CAAM,UAAU,CAAG,EAAA,KAAA,CAAM,SAAS,CAAC,CAAA,CAAA;AACvC,EAAA,MAAM,CAAC,CAAA,EAAG,CAAG,EAAA,CAAA,EAAG,CAAC,CAAI,GAAA,CAAC,GAAG,OAAA,CAAQ,QAAQ,GAAK,EAAA,EAAE,CAAE,CAAA,KAAA,CAAM,GAAG,CAAC,CAAA,CAAA;AAC5D,EAAA,OAAOA,WAAM,CAAA,gBAAA;AAAA,IACX,OAAO,CAAC,CAAA;AAAA,IACR,OAAO,CAAC,CAAA;AAAA,IACR,OAAO,CAAC,CAAA;AAAA,IACR,CAAA,GAAI,MAAO,CAAA,CAAC,CAAI,GAAA,CAAA;AAAA,GAChB,CAAA,GAAA,CAAA;AACJ;;;;;;;;"}
1	+ {"version":3,"file":"ColorHelpers.js","sources":["../src/color-chooser/ColorHelpers.ts"],"sourcesContent":["import { saltColorMap } from \"./colorMap\";\nimport { Color } from \"./Color\";\nimport { isTransparent } from \"./color-utils\";\n\nexport function getColorNameByHexValue(\n hexValue: string \| undefined,\n disableAlpha = false,\n saltColorOverrides?: Record<string, string>,\n /** When disabled, color names not recognized will be undefined instead of hex values */\n disableFallBackToHex = false\n): string \| undefined {\n const hexNoAlpha = hexValueWithoutAlpha(hexValue);\n const saltColors = saltColorOverrides ?? saltColorMap;\n\n // Special case\n if (isTransparent(hexValue)) return \"Transparent\";\n\n let colorName = Object.keys(saltColors).find((key: string) => {\n if (saltColors[key]) {\n const rgbVals = saltColors[key].startsWith(\"rgba\")\n ? saltColors[key].substring(5, saltColors[key].length - 1)\n : saltColors[key].substring(4, saltColors[key].length - 1);\n const [r, g, b] = [...rgbVals.replace(\" \", \"\").split(\",\")];\n return (\n Color.makeColorFromRGB(Number(r), Number(g), Number(b)).hex ===\n hexNoAlpha?.toLowerCase()\n );\n }\n return 0;\n });\n\n if (colorName) {\n colorName = colorName.slice(4);\n return colorName.charAt(0).toUpperCase() + colorName.slice(1).toLowerCase();\n }\n\n if (hexValue === \"WHITE\" \|\| hexValue === \"BLACK\") {\n return hexValue.charAt(0) + hexValue.slice(1).toLowerCase();\n }\n\n return disableFallBackToHex ? undefined : getHexValue(hexValue, disableAlpha);\n}\n\nexport function hexValueWithoutAlpha(\n hexValue: string \| undefined\n): string \| undefined {\n if (hexValue === undefined) return undefined;\n return isValidHex(hexValue)\n ? hexValue.substring(0, 7).toUpperCase()\n : undefined;\n}\n\nexport function getHexValue(\n hexValue: string \| undefined,\n disableAlpha: boolean\n): string \| undefined {\n if (hexValue === undefined) return undefined;\n return disableAlpha ? hexValueWithoutAlpha(hexValue) : hexValue;\n}\n\nexport const isValidHex = (hex: string \| undefined): boolean => {\n return hex\n ? /^#[0-9a-fA-F]{8}$/.test(hex) \|\| /#[0-9a-fA-F]{6}$/.test(hex)\n : false;\n};\n\nexport const convertColorMapValueToHex = (color: string): string => {\n if (!color.startsWith(\"rgb\")) return color;\n const rgbVals = color.startsWith(\"rgba\")\n ? color.substring(5, color.length - 1)\n : color.substring(4, color.length - 1);\n const [r, g, b, a] = [...rgbVals.replace(\" \", \"\").split(\",\")];\n return Color.makeColorFromRGB(\n Number(r),\n Number(g),\n Number(b),\n a ? Number(a) : 1\n ).hex;\n};\n"],"names":["saltColorMap","isTransparent","Color"],"mappings":"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"}

package/dist-cjs/packages/lab/src/color-chooser/color-utils.js CHANGED Viewed

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const isTransparent = (color) => {
-  return (color == null ? void 0 : color.toLowerCase()) === "#00000000";
+  return color ? /#[\da-f]{6}00/i.test(color) : false;
 };
 exports.isTransparent = isTransparent;

package/dist-cjs/packages/lab/src/color-chooser/color-utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"color-utils.js","sources":["../src/color-chooser/color-utils.ts"],"sourcesContent":["export const isTransparent = (color?: string): boolean => {\n return color~~?.toLowerCase~~() ~~===~~ ~~\"#00000000\"~~;\n};\n"],"names":[],"mappings":";;;;AAAa,MAAA,aAAA,GAAgB,CAAC,KAA4B,KAAA;AACxD,EAAA,~~OAAA~~,~~CAAO,+BAAO~~,~~WAAkB~~,~~EAAA~~,~~MAAA~~,~~WAAA~~,CAAA;~~AAClC~~;;;;"}
1	+ {"version":3,"file":"color-utils.js","sources":["../src/color-chooser/color-utils.ts"],"sourcesContent":["export const isTransparent = (color?: string): boolean => {\n return color ? /#[\\da-f]{6}00/i.test(color) : false;\n};\n"],"names":[],"mappings":";;;;AAAa,MAAA,aAAA,GAAgB,CAAC,KAA4B,KAAA;AACxD,EAAA,OAAO,KAAQ,GAAA,gBAAA,CAAiB,IAAK,CAAA,KAAK,CAAI,GAAA,KAAA,CAAA;AAChD;;;;"}

package/dist-cjs/packages/lab/src/contact-details/ContactDetails.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
-var css_248z = ".salt-density-touch {\n  --contactDetails-default-primary-fontSize: 30px;\n  --contactDetails-default-secondary-fontSize: 16px;\n  --contactDetails-compact-primary-fontSize: 16px;\n  --contactDetails-compact-secondary-fontSize: 14px;\n  --contactDetails-icon-size: 18px;\n  --contactDetails-label-width: 80px;\n}\n\n.salt-density-low {\n  --contactDetails-compact-primary-fontSize: 14px;\n  --contactDetails-default-primary-fontSize: 24px;\n  --contactDetails-compact-secondary-fontSize: 14px;\n  --contactDetails-default-secondary-fontSize: 14px;\n  --contactDetails-label-width: 70px;\n  --contactDetails-icon-size: 16px;\n}\n\n.salt-density-medium {\n  --contactDetails-compact-primary-fontSize: 12px;\n  --contactDetails-default-primary-fontSize: 18px;\n  --contactDetails-compact-secondary-fontSize: 12px;\n  --contactDetails-default-secondary-fontSize: 12px;\n  --contactDetails-label-width: 60px;\n  --contactDetails-icon-size: 14px;\n}\n\n.salt-density-high {\n  --contactDetails-compact-primary-fontSize: 11px;\n  --contactDetails-default-primary-fontSize: 14px;\n  --contactDetails-compact-secondary-fontSize: 11px;\n  --contactDetails-default-secondary-fontSize: 11px;\n  --contactDetails-label-width: 60px;\n  --contactDetails-icon-size: 12px;\n}\n\n.saltContactDetails {\n  --contactDetails-color: var(--salt-text-primary-foreground);\n  --contactDetails-label-color: var(--salt-text-secondary-foreground);\n  --contactDetails-noAvatar-color: var(--salt-accent-background);\n  --contactDetails-noAvatar-indicator-width: 4px;\n  --contactDetails-favoriteToggle-fill: var(--contactDetails-deselected-icon-color);\n  --contactDetails-favoriteToggle-marginRight: 0px;\n  --contactDetails-favoriteToggle-marginTop: 0px;\n  --contactDetails-mini-secondaryInfo-marginLeft: var(--salt-size-unit);\n  --contactDetails-mini-stacked-secondaryInfo-marginLeft: calc(var(--salt-size-unit) * 2);\n  --contactDetails-compact-tertiaryInfo-marginLeft: var(--salt-size-unit);\n\n  /* TODO: Check below tokens with design */\n  --contactDetails-separator-color: var(--salt-separable-secondary-borderColor);\n}\n\n.saltContactDetails {\n  display: grid;\n  padding: var(--salt-size-unit);\n}\n\n.saltContactDetails.saltContactDetails-noAvatar {\n  padding-left: 0;\n}\n\n.saltContactDetails.saltContactDetails-embedded {\n  padding: 0;\n}\n\n.saltContactDetails-default,\n.saltContactDetails-default-stacked {\n  --contactDetails-primary-fontSize: var(--contactDetails-default-primary-fontSize);\n  --contactDetails-secondary-fontSize: var(--contactDetails-default-secondary-fontSize);\n}\n\n.saltContactDetails-compact,\n.saltContactDetails-compact-stacked {\n  --contactDetails-primary-fontSize: var(--contactDetails-compact-primary-fontSize);\n  --contactDetails-secondary-fontSize: var(--contactDetails-compact-secondary-fontSize);\n}\n\n.saltContactDetails-mini,\n.saltContactDetails-mini-stacked {\n  --contactDetails-primary-fontSize: var(--contactDetails-compact-primary-fontSize);\n  --contactDetails-secondary-fontSize: var(--contactDetails-compact-secondary-fontSize);\n}\n\n.saltContactDetails-default {\n  color: var(--contactDetails-color);\n  grid-template-columns: auto auto 1fr auto;\n  grid-template-rows: auto auto auto auto auto;\n  grid-template-areas:\n    \"noAvatar avatar primary favorite\"\n    \"noAvatar avatar secondary secondary\"\n    \"noAvatar avatar tertiary tertiary\"\n    \". . actions metadataExpander\"\n    \". . metadata metadata\";\n}\n\n.saltContactDetails-default-stacked {\n  grid-template-columns: auto 1fr auto;\n  grid-template-rows: auto auto auto auto auto auto;\n  grid-template-areas:\n    \"noAvatar avatar avatar\"\n    \"noAvatar primary favorite\"\n    \"noAvatar secondary secondary\"\n    \"noAvatar tertiary tertiary\"\n    \". actions metadataExpander\"\n    \". metadata metadata\";\n}\n\n.saltContactDetails-compact {\n  grid-template-columns: auto auto auto 1fr auto;\n  grid-template-rows: auto auto auto;\n  grid-template-areas:\n    \"noAvatar avatar primary primary favorite\"\n    \"noAvatar avatar secondary tertiary tertiary\"\n    \". . actions actions actions\";\n}\n\n.saltContactDetails-compact-stacked {\n  grid-template-columns: auto auto 1fr auto;\n  grid-template-rows: auto auto auto auto;\n  grid-template-areas:\n    \"noAvatar avatar primary favorite\"\n    \"noAvatar avatar secondary favorite\"\n    \"noAvatar avatar tertiary tertiary\"\n    \". . actions actions\";\n}\n\n.saltContactDetails-mini,\n.saltContactDetails-mini-stacked {\n  grid-template-columns: auto minmax(60px, 1fr) auto;\n  grid-template-rows: auto;\n  grid-template-areas: \"primary secondary favorite\";\n}\n\n.saltContactDetails-noAvatar-indicator {\n  grid-area: noAvatar;\n  width: var(--contactDetails-noAvatar-indicator-width);\n  background: var(--contactDetails-noAvatar-color);\n  margin-right: var(--salt-size-unit);\n}\n\n.saltContactAvatar {\n  grid-area: avatar;\n  margin-right: var(--salt-size-unit);\n}\n\n.saltContactAvatar-stacked {\n  margin-bottom: var(--salt-size-unit);\n}\n\n.saltContactActions {\n  grid-area: actions;\n  display: flex;\n  margin-top: var(--salt-size-unit);\n  margin-left: calc(var(--salt-size-unit) * -1);\n}\n\n.saltContactPrimaryInfo {\n  grid-area: primary;\n}\n\n.saltContactDetails-default .saltContactPrimaryInfo {\n  margin-bottom: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactSecondaryInfo {\n  grid-area: secondary;\n}\n\n.saltContactDetails-mini .saltContactSecondaryInfo {\n  margin-left: var(--contactDetails-mini-secondaryInfo-marginLeft);\n}\n\n/* TODO Mini-stacked does not really look \"stacked\". Is it a bug? */\n.saltContactDetails-mini-stacked .saltContactSecondaryInfo {\n  margin-left: var(--contactDetails-mini-stacked-secondaryInfo-marginLeft);\n}\n\n.saltContactSecondaryInfo-icon {\n  margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactTertiaryInfo {\n  grid-area: tertiary;\n}\n\n.saltContactDetails-compact .saltContactTertiaryInfo {\n  margin-left: var(--contactDetails-compact-tertiaryInfo-marginLeft);\n}\n\n.saltContactTertiaryInfo-icon {\n  margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactMetadata {\n  grid-area: metadata;\n  display: flex;\n  flex-direction: column;\n  padding-top: var(--salt-size-unit);\n  padding-bottom: var(--salt-size-unit);\n}\n\n.saltContactMetadata-expander {\n  grid-area: metadataExpander;\n  margin-top: var(--salt-size-unit);\n}\n\n.saltContactMetadata-separator {\n  width: 100%;\n  height: 1px;\n  background: var(--contactDetails-separator-color);\n  margin-bottom: var(--salt-size-unit);\n}\n\n.saltContactMetadataItem {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactMetadataItem:last-child {\n  margin-bottom: unset;\n}\n\n.saltContactMetadata-stacked .saltContactMetadataItem {\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.saltContactMetadataItem-icon {\n  margin-right: calc(var(--salt-size-unit) * 2);\n  padding-left: 1px;\n}\n\n.saltContactMetadataItem-label {\n  flex-shrink: 0;\n  color: var(--contactDetails-label-color);\n  margin-right: calc(var(--salt-size-unit) * 2);\n  width: var(--contactDetails-label-width);\n}\n\n.saltContactFavoriteToggle {\n  align-self: start;\n  grid-area: favorite;\n  justify-self: center;\n  line-height: var(--contactDetails-primary-fontSize);\n  margin-right: var(--contactDetails-favoriteToggle-marginRight);\n  margin-top: var(--contactDetails-favoriteToggle-marginTop);\n}\n\n.saltContactFavoriteToggle-svg {\n  fill: var(--contactDetails-favoriteToggle-fill);\n}\n\n.saltContactFavoriteToggle-focusVisible {\n  outline: none;\n}\n\n.saltContactFavoriteToggle-focused {\n  outline: var(--salt-focused-outline);\n}\n\n.saltContactFavoriteToggle-deselected {\n  --contactDetails-favoriteToggle-fill: var(--salt-measured-borderColor);\n}\n\n.saltContactFavoriteToggle-selecting {\n  --contactDetails-favoriteToggle-fill: var(--salt-measured-fill);\n}\n\n.saltContactFavoriteToggle-selected {\n  --contactDetails-favoriteToggle-fill: var(--salt-measured-fill);\n}\n\n.saltContactFavoriteToggle-deselecting {\n  --contactDetails-favoriteToggle-fill: var(--salt-measured-borderColor);\n}\n\n.saltContactFavoriteToggle-svg {\n  height: var(--contactDetails-icon-size);\n  width: var(--contactDetails-icon-size);\n}\n";
+var css_248z = ".salt-density-touch {\n  --contactDetails-default-primary-fontSize: 30px;\n  --contactDetails-default-secondary-fontSize: 16px;\n  --contactDetails-compact-primary-fontSize: 16px;\n  --contactDetails-compact-secondary-fontSize: 14px;\n  --contactDetails-icon-size: 18px;\n  --contactDetails-label-width: 80px;\n}\n\n.salt-density-low {\n  --contactDetails-compact-primary-fontSize: 14px;\n  --contactDetails-default-primary-fontSize: 24px;\n  --contactDetails-compact-secondary-fontSize: 14px;\n  --contactDetails-default-secondary-fontSize: 14px;\n  --contactDetails-label-width: 70px;\n  --contactDetails-icon-size: 16px;\n}\n\n.salt-density-medium {\n  --contactDetails-compact-primary-fontSize: 12px;\n  --contactDetails-default-primary-fontSize: 18px;\n  --contactDetails-compact-secondary-fontSize: 12px;\n  --contactDetails-default-secondary-fontSize: 12px;\n  --contactDetails-label-width: 60px;\n  --contactDetails-icon-size: 14px;\n}\n\n.salt-density-high {\n  --contactDetails-compact-primary-fontSize: 11px;\n  --contactDetails-default-primary-fontSize: 14px;\n  --contactDetails-compact-secondary-fontSize: 11px;\n  --contactDetails-default-secondary-fontSize: 11px;\n  --contactDetails-label-width: 60px;\n  --contactDetails-icon-size: 12px;\n}\n\n.saltContactDetails {\n  --contactDetails-color: var(--salt-text-primary-foreground);\n  --contactDetails-label-color: var(--salt-text-secondary-foreground);\n  --contactDetails-noAvatar-color: var(--salt-accent-background);\n  --contactDetails-noAvatar-indicator-width: 4px;\n  --contactDetails-favoriteToggle-fill: var(--contactDetails-deselected-icon-color);\n  --contactDetails-favoriteToggle-marginRight: 0px;\n  --contactDetails-favoriteToggle-marginTop: 0px;\n  --contactDetails-mini-secondaryInfo-marginLeft: var(--salt-size-unit);\n  --contactDetails-mini-stacked-secondaryInfo-marginLeft: calc(var(--salt-size-unit) * 2);\n  --contactDetails-compact-tertiaryInfo-marginLeft: var(--salt-size-unit);\n\n  /* TODO: Check below tokens with design */\n  --contactDetails-separator-color: var(--salt-separable-secondary-borderColor);\n}\n\n.saltContactDetails {\n  display: grid;\n  padding: var(--salt-size-unit);\n}\n\n.saltContactDetails.saltContactDetails-noAvatar {\n  padding-left: 0;\n}\n\n.saltContactDetails.saltContactDetails-embedded {\n  padding: 0;\n}\n\n.saltContactDetails-default,\n.saltContactDetails-default-stacked {\n  --contactDetails-primary-fontSize: var(--contactDetails-default-primary-fontSize);\n  --contactDetails-secondary-fontSize: var(--contactDetails-default-secondary-fontSize);\n}\n\n.saltContactDetails-compact,\n.saltContactDetails-compact-stacked {\n  --contactDetails-primary-fontSize: var(--contactDetails-compact-primary-fontSize);\n  --contactDetails-secondary-fontSize: var(--contactDetails-compact-secondary-fontSize);\n}\n\n.saltContactDetails-mini,\n.saltContactDetails-mini-stacked {\n  --contactDetails-primary-fontSize: var(--contactDetails-compact-primary-fontSize);\n  --contactDetails-secondary-fontSize: var(--contactDetails-compact-secondary-fontSize);\n}\n\n.saltContactDetails-default {\n  color: var(--contactDetails-color);\n  grid-template-columns: auto auto 1fr auto;\n  grid-template-rows: auto auto auto auto auto;\n  grid-template-areas:\n    \"noAvatar avatar primary favorite\"\n    \"noAvatar avatar secondary secondary\"\n    \"noAvatar avatar tertiary tertiary\"\n    \". . actions metadataExpander\"\n    \". . metadata metadata\";\n}\n\n.saltContactDetails-default-stacked {\n  grid-template-columns: auto 1fr auto;\n  grid-template-rows: auto auto auto auto auto auto;\n  grid-template-areas:\n    \"noAvatar avatar avatar\"\n    \"noAvatar primary favorite\"\n    \"noAvatar secondary secondary\"\n    \"noAvatar tertiary tertiary\"\n    \". actions metadataExpander\"\n    \". metadata metadata\";\n}\n\n.saltContactDetails-compact {\n  grid-template-columns: auto auto auto 1fr auto;\n  grid-template-rows: auto auto auto;\n  grid-template-areas:\n    \"noAvatar avatar primary primary favorite\"\n    \"noAvatar avatar secondary tertiary tertiary\"\n    \". . actions actions actions\";\n}\n\n.saltContactDetails-compact-stacked {\n  grid-template-columns: auto auto 1fr auto;\n  grid-template-rows: auto auto auto auto;\n  grid-template-areas:\n    \"noAvatar avatar primary favorite\"\n    \"noAvatar avatar secondary favorite\"\n    \"noAvatar avatar tertiary tertiary\"\n    \". . actions actions\";\n}\n\n.saltContactDetails-mini,\n.saltContactDetails-mini-stacked {\n  grid-template-columns: auto minmax(60px, 1fr) auto;\n  grid-template-rows: auto;\n  grid-template-areas: \"primary secondary favorite\";\n}\n\n.saltContactDetails-noAvatar-indicator {\n  grid-area: noAvatar;\n  width: var(--contactDetails-noAvatar-indicator-width);\n  background: var(--contactDetails-noAvatar-color);\n  margin-right: var(--salt-size-unit);\n}\n\n.saltContactAvatar {\n  grid-area: avatar;\n  margin-right: var(--salt-size-unit);\n}\n\n.saltContactAvatar-stacked {\n  margin-bottom: var(--salt-size-unit);\n}\n\n.saltContactActions {\n  grid-area: actions;\n  display: flex;\n  margin-top: var(--salt-size-unit);\n  margin-left: calc(var(--salt-size-unit) * -1);\n}\n\n.saltContactPrimaryInfo {\n  grid-area: primary;\n}\n\n.saltContactDetails-default .saltContactPrimaryInfo {\n  margin-bottom: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactSecondaryInfo {\n  grid-area: secondary;\n}\n\n.saltContactDetails-mini .saltContactSecondaryInfo {\n  margin-left: var(--contactDetails-mini-secondaryInfo-marginLeft);\n}\n\n/* TODO Mini-stacked does not really look \"stacked\". Is it a bug? */\n.saltContactDetails-mini-stacked .saltContactSecondaryInfo {\n  margin-left: var(--contactDetails-mini-stacked-secondaryInfo-marginLeft);\n}\n\n.saltContactSecondaryInfo-icon {\n  margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactTertiaryInfo {\n  grid-area: tertiary;\n}\n\n.saltContactDetails-compact .saltContactTertiaryInfo {\n  margin-left: var(--contactDetails-compact-tertiaryInfo-marginLeft);\n}\n\n.saltContactTertiaryInfo-icon {\n  margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactMetadata {\n  grid-area: metadata;\n  display: flex;\n  flex-direction: column;\n  padding-top: var(--salt-size-unit);\n  padding-bottom: var(--salt-size-unit);\n}\n\n.saltContactMetadata-expander {\n  grid-area: metadataExpander;\n  margin-top: var(--salt-size-unit);\n}\n\n.saltContactMetadata-separator {\n  width: 100%;\n  height: 1px;\n  background: var(--contactDetails-separator-color);\n  margin-bottom: var(--salt-size-unit);\n}\n\n.saltContactMetadataItem {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactMetadataItem:last-child {\n  margin-bottom: unset;\n}\n\n.saltContactMetadata-stacked .saltContactMetadataItem {\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.saltContactMetadataItem-icon {\n  margin-right: calc(var(--salt-size-unit) * 2);\n  padding-left: 1px;\n}\n\n.saltContactMetadataItem-label {\n  flex-shrink: 0;\n  color: var(--contactDetails-label-color);\n  margin-right: calc(var(--salt-size-unit) * 2);\n  width: var(--contactDetails-label-width);\n}\n\n.saltContactFavoriteToggle {\n  align-self: start;\n  grid-area: favorite;\n  justify-self: center;\n  line-height: var(--contactDetails-primary-fontSize);\n  margin-right: var(--contactDetails-favoriteToggle-marginRight);\n  margin-top: var(--contactDetails-favoriteToggle-marginTop);\n}\n\n.saltContactFavoriteToggle-svg {\n  fill: var(--contactDetails-favoriteToggle-fill);\n}\n\n.saltContactFavoriteToggle-focusVisible {\n  outline: none;\n}\n\n.saltContactFavoriteToggle-focused {\n  outline: var(--salt-focused-outline);\n}\n\n.saltContactFavoriteToggle-deselected {\n  --contactDetails-favoriteToggle-fill: var(--salt-accent-borderColor);\n}\n\n.saltContactFavoriteToggle-selecting {\n  --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-hover);\n}\n\n.saltContactFavoriteToggle-selected {\n  --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-selected);\n}\n\n.saltContactFavoriteToggle-deselecting {\n  --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-hover);\n}\n\n.saltContactFavoriteToggle-svg {\n  height: var(--contactDetails-icon-size);\n  width: var(--contactDetails-icon-size);\n}\n";
 styleInject_es(css_248z);
 module.exports = css_248z;

package/dist-cjs/packages/lab/src/index.js CHANGED Viewed

@@ -126,7 +126,6 @@ var QueryInput = require('./query-input/QueryInput.js');
 var useQueryInput = require('./query-input/useQueryInput.js');
 var RadioButton = require('./radio-button/RadioButton.js');
 var RadioButtonGroup = require('./radio-button/RadioButtonGroup.js');
-var RadioButtonBase = require('./radio-button/RadioButtonBase.js');
 var RadioButtonIcon = require('./radio-button/RadioButtonIcon.js');
 var useInstantCollapse = require('./responsive/useInstantCollapse.js');
 var useDynamicCollapse = require('./responsive/useDynamicCollapse.js');
@@ -301,9 +300,7 @@ exports.QueryInput = QueryInput.QueryInput;
 exports.useQueryInput = useQueryInput.useQueryInput;
 exports.RadioButton = RadioButton.RadioButton;
 exports.RadioButtonGroup = RadioButtonGroup.RadioButtonGroup;
-exports.RadioButtonBase = RadioButtonBase.RadioButtonBase;
 exports.RadioButtonIcon = RadioButtonIcon.RadioButtonIcon;
-exports.makeRadioIcon = RadioButtonIcon.makeRadioIcon;
 exports.useInstantCollapse = useInstantCollapse.useInstantCollapse;
 exports.useDynamicCollapse = useDynamicCollapse.useDynamicCollapse;
 exports.addAllVisible = useReclaimSpace.addAllVisible;

package/dist-cjs/packages/lab/src/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist-cjs/packages/lab/src/progress/CircularProgress/CircularProgress.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 var styleInject_es = require('../../../../../node_modules/style-inject/dist/style-inject.es.js');
-var css_248z = ".saltCircularProgress {\n  --circularProgress-gradient-color: var(--salt-measured-fill);\n\n  color: var(--salt-text-primary-foreground);\n  display: inline-flex;\n  position: relative;\n}\n\n.saltCircularProgress-disabled .saltCircularProgress-progressValue,\n.saltCircularProgress-disabled circle {\n  color: var(--salt-text-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltCircularProgress-circle {\n  stroke: url(\"#salt-circular-progress-gradient\");\n  stroke-width: 2px;\n}\n\n.saltCircularProgress-small {\n  font-size: 11px;\n}\n\n.saltCircularProgress-medium {\n  font-size: 14px;\n}\n\n.saltCircularProgress-large {\n  font-size: 16px;\n}\n\n.saltCircularProgress-progressValue {\n  align-items: center;\n  color: var(--salt-text-primary-foreground);\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  left: 0;\n  position: absolute;\n  width: 100%;\n}\n\n.saltCircularProgress-disabled {\n}\n\n.saltCircularProgress-completed {\n}\n\n.saltCircularProgress-railCircle {\n  stroke: var(--salt-measured-background);\n  stroke-width: 1px;\n}\n\n.saltCircularProgress-gradientStart,\n.saltCircularProgress-gradientStop {\n  stop-color: var(--saltCircularProgress-gradient-color, var(--circularProgress-gradient-color));\n}\n\n.saltCircularProgress-container {\n  display: inline-block;\n}\n\n.saltCircularProgress-static {\n  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s;\n}\n\n.saltCircularProgress-indeterminate {\n  animation: circular-rotate 1.4s linear infinite;\n}\n\n.saltCircularProgress-svg {\n  fill: var(--salt-measured-background);\n  display: block;\n}\n\n.saltCircularProgress-circle {\n  stroke: url(\"#salt-circular-progress-gradient\");\n}\n\n.saltCircularProgress-circleStatic {\n  transition: stroke-dashoffset 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s;\n}\n\n.saltCircularProgress-circleIndeterminate {\n  animation: circular-dash 1.4s ease-in-out infinite;\n}\n\n@keyframes circular-rotate {\n  0% {\n    transform-origin: 50% 50%;\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes circular-dash {\n  0% {\n    stroke-dasharray: 1px, 200px;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -15px;\n  }\n  100% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -125px;\n  }\n}\n";
+var css_248z = ".saltCircularProgress {\n  --circularProgress-gradient-color: var(--salt-accent-background);\n\n  color: var(--salt-text-primary-foreground);\n  display: inline-flex;\n  position: relative;\n}\n\n.saltCircularProgress-disabled .saltCircularProgress-progressValue,\n.saltCircularProgress-disabled circle {\n  color: var(--salt-text-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltCircularProgress-circle {\n  stroke: url(\"#salt-circular-progress-gradient\");\n  stroke-width: 2px;\n}\n\n.saltCircularProgress-small {\n  font-size: 11px;\n}\n\n.saltCircularProgress-medium {\n  font-size: 14px;\n}\n\n.saltCircularProgress-large {\n  font-size: 16px;\n}\n\n.saltCircularProgress-progressValue {\n  align-items: center;\n  color: var(--salt-text-primary-foreground);\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  left: 0;\n  position: absolute;\n  width: 100%;\n}\n\n.saltCircularProgress-disabled {\n}\n\n.saltCircularProgress-completed {\n}\n\n.saltCircularProgress-railCircle {\n  stroke: var(--salt-track-borderColor);\n  stroke-width: var(--salt-size-border);\n}\n\n.saltCircularProgress-gradientStart,\n.saltCircularProgress-gradientStop {\n  stop-color: var(--saltCircularProgress-gradient-color, var(--circularProgress-gradient-color));\n}\n\n.saltCircularProgress-container {\n  display: inline-block;\n}\n\n.saltCircularProgress-static {\n  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s;\n}\n\n.saltCircularProgress-indeterminate {\n  animation: circular-rotate 1.4s linear infinite;\n}\n\n.saltCircularProgress-svg {\n  fill: var(--salt-accent-background);\n  display: block;\n}\n\n.saltCircularProgress-circle {\n  stroke: url(\"#salt-circular-progress-gradient\");\n}\n\n.saltCircularProgress-circleStatic {\n  transition: stroke-dashoffset 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s;\n}\n\n.saltCircularProgress-circleIndeterminate {\n  animation: circular-dash 1.4s ease-in-out infinite;\n}\n\n@keyframes circular-rotate {\n  0% {\n    transform-origin: 50% 50%;\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes circular-dash {\n  0% {\n    stroke-dasharray: 1px, 200px;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -15px;\n  }\n  100% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -125px;\n  }\n}\n";
 styleInject_es(css_248z);
 module.exports = css_248z;

package/dist-cjs/packages/lab/src/progress/LinearProgress/LinearProgress.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 var styleInject_es = require('../../../../../node_modules/style-inject/dist/style-inject.es.js');
-var css_248z = ".saltLinearProgress {\n  align-items: center;\n  color: var(--salt-text-primary-foreground);\n  display: flex;\n  min-width: 200px;\n  font-size: var(--linearProgress-fontSize);\n}\n\n/* TODO: Odyssey now has only 2 sizes */\n.saltLinearProgress-large {\n  --linearProgress-after-top: 3px;\n  --linearProgress-value-paddingLeft: 12px;\n  --linearProgress-height: 7px;\n  --linearProgress-fontSize: 16px;\n}\n\n.saltLinearProgress-medium {\n  --linearProgress-after-top: 2px;\n  --linearProgress-value-paddingLeft: 8px;\n  --linearProgress-height: 5px;\n  --linearProgress-fontSize: 14px;\n}\n\n.saltLinearProgress-small {\n  --linearProgress-after-top: 1px;\n  --linearProgress-value-paddingLeft: 4px;\n  --linearProgress-height: 3px;\n  --linearProgress-fontSize: 11px;\n}\n\n.saltLinearProgress-disabled .saltLinearProgress-bar {\n  background: var(--salt-measured-fill-disabled);\n}\n\n.saltLinearProgress-disabled .saltLinearProgress-barContainer :after {\n  background: var(--salt-measured-fill-disabled);\n}\n\n.saltLinearProgress-disabled .saltLinearProgress-progressValue {\n  color: var(--salt-text-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltLinearProgress-barContainer {\n  background: none;\n  position: relative;\n  width: calc(100% - 10px);\n  overflow: hidden;\n  height: var(--linearProgress-height);\n}\n\n/* Horizontal line under the progress indicator bar */\n.saltLinearProgress-barContainer:after {\n  top: var(--linearProgress-after-top);\n  background: var(--salt-measured-background);\n  content: \"\";\n  display: block;\n  height: 1px;\n  left: 0;\n  position: absolute;\n  right: 0;\n}\n\n.saltLinearProgress-determinate {\n}\n\n.saltLinearProgress-indeterminate {\n}\n\n.saltLinearProgress-query {\n  transform: rotate(180deg);\n}\n\n.saltLinearProgress-bar {\n  width: 100%;\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  top: 0;\n  transition: transform 0.2s linear;\n  transform-origin: left;\n  background: var(--salt-measured-fill);\n  z-index: 2;\n}\n\n.saltLinearProgress-determinate .saltLinearProgress-bar1 {\n  transition: transform 0.4s linear;\n}\n\n.saltLinearProgress-indeterminate .saltLinearProgress-bar1 {\n  width: auto;\n  animation: Indeterminate1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n}\n\n.saltLinearProgress-query .saltLinearProgress-bar1 {\n  width: auto;\n  animation: Indeterminate1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n}\n\n.saltLinearProgress-bar2 {\n  width: auto;\n  animation: Indeterminate2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;\n}\n\n.saltLinearProgress-progressValue {\n  color: inherit;\n  margin: 0;\n  white-space: nowrap;\n  padding-left: var(--linearProgress-value-paddingLeft);\n}\n\n@keyframes Indeterminate1 {\n  0% {\n    left: -35%;\n    right: 100%;\n  }\n  60% {\n    left: 100%;\n    right: -90%;\n  }\n  100% {\n    left: 100%;\n    right: -90%;\n  }\n}\n\n@keyframes Indeterminate2 {\n  0% {\n    left: -200%;\n    right: 100%;\n  }\n  60% {\n    left: 107%;\n    right: -8%;\n  }\n  100% {\n    left: 107%;\n    right: -8%;\n  }\n}\n";
+var css_248z = ".saltLinearProgress {\n  align-items: center;\n  color: var(--salt-text-primary-foreground);\n  display: flex;\n  min-width: 200px;\n  font-size: var(--linearProgress-fontSize);\n}\n\n/* TODO: Odyssey now has only 2 sizes */\n.saltLinearProgress-large {\n  --linearProgress-after-top: 3px;\n  --linearProgress-value-paddingLeft: 12px;\n  --linearProgress-height: 7px;\n  --linearProgress-fontSize: 16px;\n}\n\n.saltLinearProgress-medium {\n  --linearProgress-after-top: 2px;\n  --linearProgress-value-paddingLeft: 8px;\n  --linearProgress-height: 5px;\n  --linearProgress-fontSize: 14px;\n}\n\n.saltLinearProgress-small {\n  --linearProgress-after-top: 1px;\n  --linearProgress-value-paddingLeft: 4px;\n  --linearProgress-height: 3px;\n  --linearProgress-fontSize: 11px;\n}\n\n.saltLinearProgress-disabled .saltLinearProgress-bar {\n  background: var(--salt-accent-background-disabled);\n}\n\n.saltLinearProgress-disabled .saltLinearProgress-barContainer :after {\n  background: var(--salt-accent-background-disabled);\n}\n\n.saltLinearProgress-disabled .saltLinearProgress-progressValue {\n  color: var(--salt-text-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltLinearProgress-barContainer {\n  background: none;\n  position: relative;\n  width: calc(100% - 10px);\n  overflow: hidden;\n  height: var(--linearProgress-height);\n}\n\n/* Horizontal line under the progress indicator bar */\n.saltLinearProgress-barContainer:after {\n  top: var(--linearProgress-after-top);\n  background: var(--salt-track-borderColor);\n  content: \"\";\n  display: block;\n  height: 1px;\n  left: 0;\n  position: absolute;\n  right: 0;\n}\n\n.saltLinearProgress-determinate {\n}\n\n.saltLinearProgress-indeterminate {\n}\n\n.saltLinearProgress-query {\n  transform: rotate(180deg);\n}\n\n.saltLinearProgress-bar {\n  width: 100%;\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  top: 0;\n  transition: transform 0.2s linear;\n  transform-origin: left;\n  background: var(--salt-accent-background);\n  z-index: 2;\n}\n\n.saltLinearProgress-determinate .saltLinearProgress-bar1 {\n  transition: transform 0.4s linear;\n}\n\n.saltLinearProgress-indeterminate .saltLinearProgress-bar1 {\n  width: auto;\n  animation: Indeterminate1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n}\n\n.saltLinearProgress-query .saltLinearProgress-bar1 {\n  width: auto;\n  animation: Indeterminate1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n}\n\n.saltLinearProgress-bar2 {\n  width: auto;\n  animation: Indeterminate2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;\n}\n\n.saltLinearProgress-progressValue {\n  color: inherit;\n  margin: 0;\n  white-space: nowrap;\n  padding-left: var(--linearProgress-value-paddingLeft);\n}\n\n@keyframes Indeterminate1 {\n  0% {\n    left: -35%;\n    right: 100%;\n  }\n  60% {\n    left: 100%;\n    right: -90%;\n  }\n  100% {\n    left: 100%;\n    right: -90%;\n  }\n}\n\n@keyframes Indeterminate2 {\n  0% {\n    left: -200%;\n    right: 100%;\n  }\n  60% {\n    left: 107%;\n    right: -8%;\n  }\n  100% {\n    left: 107%;\n    right: -8%;\n  }\n}\n";
 styleInject_es(css_248z);
 module.exports = css_248z;

package/dist-cjs/packages/lab/src/radio-button/RadioButton.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
-var css_248z = "/* Styles applied to root component  */\n.salt-density-medium {\n  --radioButton-label-marginTop: 6px;\n  --radioButton-row-marginRight: 24px;\n}\n\n.salt-density-high {\n  --radioButton-label-marginTop: 3px;\n  --radioButton-row-marginRight: 12px;\n}\n\n.salt-density-low {\n  --radioButton-label-marginTop: 9px;\n  --radioButton-row-marginRight: 36px;\n}\n\n.salt-density-touch {\n  --radioButton-label-marginTop: 12px;\n  --radioButton-row-marginRight: 48px;\n}\n\n.saltRadioButton {\n  cursor: pointer;\n  display: block;\n}\n\n/* Styles applied to root component on hover if `disabled={true}` or FormField disabled */\n.saltRadioButton-disabled,\n.saltFormField-disabled .saltRadioButton {\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltRadioButton-disabled {\n  --saltControlLabel-color: var(--salt-text-primary-foreground-disabled);\n\n  pointer-events: visible;\n}\n\n/* Styles applied to container of label and Radio component */\n.saltRadioButton-labelContainer {\n  display: inline-flex;\n  align-items: flex-start;\n  margin-left: 0;\n  margin-right: 0;\n  margin-top: var(--saltRadioButton-label-marginTop, var(--radioButton-label-marginTop));\n  vertical-align: baseline;\n}\n\n.saltRadioButton-labelContainer .saltRadioButton {\n  display: inline-flex;\n  align-content: flex-start;\n  vertical-align: baseline;\n}\n\n.saltFormGroup-row > .saltRadioButton {\n  margin-right: var(--saltFormGroup-row-marginRight, var(--radioButton-row-marginRight));\n}\n";
+var css_248z = "/* Styles applied to RadioButton container */\n.saltRadioButton {\n  display: flex;\n  gap: calc(var(--salt-size-unit) * 0.75);\n  position: relative;\n  user-select: none;\n  cursor: pointer;\n}\n\n/* Styles applied when RadioButton is disabled */\n.saltRadioButton-disabled {\n  color: var(--salt-text-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n  pointer-events: visible;\n}\n\n/* Styles applied to input component */\n.saltRadioButton-input {\n  cursor: inherit;\n  position: absolute;\n  opacity: 0;\n  top: 0;\n  left: 0;\n  margin: 0;\n  padding: 0;\n  z-index: var(--salt-zIndex-default);\n}\n\n/* Styles applied to icon when :focus-visible */\n.saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\n  outline: var(--salt-focused-outline);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n";
 styleInject_es(css_248z);
 module.exports = css_248z;

package/dist-cjs/packages/lab/src/radio-button/RadioButton.js CHANGED Viewed

@@ -6,25 +6,44 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var React = require('react');
 var core = require('@salt-ds/core');
-var ControlLabel = require('../control-label/ControlLabel.js');
-var RadioButtonBase = require('./RadioButtonBase.js');
+var useRadioGroup = require('./internal/useRadioGroup.js');
+var RadioButtonIcon = require('./RadioButtonIcon.js');
 require('./RadioButton.css.js');
 const withBaseName = core.makePrefixer("saltRadioButton");
 const RadioButton = React.forwardRef(
   function RadioButton2(props, ref) {
     const {
-      checked,
+      checked: checkedProp,
       className,
-      icon,
       disabled,
+      error,
+      inputProps,
       label,
-      LabelProps,
-      value,
+      name: nameProp,
+      onFocus,
+      onBlur,
       onChange,
+      value,
       ...rest
     } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    const radioGroup = useRadioGroup.useRadioGroup();
+    const radioGroupChecked = radioGroup.value != null && value != null ? radioGroup.value === value : checkedProp;
+    const name = nameProp != null ? nameProp : radioGroup.name;
+    const [checked, setCheckedState] = core.useControlled({
+      controlled: radioGroupChecked,
+      default: Boolean(checkedProp),
+      name: "RadioBase",
+      state: "checked"
+    });
+    const handleChange = (event) => {
+      var _a;
+      const newChecked = event.target.checked;
+      setCheckedState(newChecked);
+      onChange == null ? void 0 : onChange(event);
+      (_a = radioGroup.onChange) == null ? void 0 : _a.call(radioGroup, event);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("label", {
       className: clsx.clsx(
         withBaseName(),
         {
@@ -32,28 +51,28 @@ const RadioButton = React.forwardRef(
         },
         className
       ),
+      ref,
       ...rest,
-      children: /* @__PURE__ */ jsxRuntime.jsx(ControlLabel.ControlLabel, {
-        ...LabelProps,
-        className: clsx.clsx(
-          withBaseName("labelContainer"),
-          {
-            [withBaseName("disabled")]: disabled
-          },
-          className
-        ),
-        disabled,
-        label,
-        labelPlacement: "right",
-        ref,
-        children: /* @__PURE__ */ jsxRuntime.jsx(RadioButtonBase.RadioButtonBase, {
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("input", {
+          className: withBaseName("input"),
+          ...inputProps,
           checked,
           disabled,
+          name,
           value,
-          onChange,
-          icon
-        })
-      })
+          onBlur,
+          onChange: handleChange,
+          onFocus,
+          type: "radio"
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx(RadioButtonIcon.RadioButtonIcon, {
+          checked,
+          error,
+          disabled
+        }),
+        label
+      ]
     });
   }
 );

package/dist-cjs/packages/lab/src/radio-button/RadioButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButton.js","sources":["../src/radio-button/RadioButton.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n forwardRef,\n HTMLAttributes,\n ~~ComponentType~~,\n} from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { ~~ControlLabel,~~ ~~ControlLabelProps~~ } from \"~~../control-label\";\nimport { RadioButtonBase as Radio } from \"~~./~~RadioButtonBase~~\";\nimport { ~~RadioButtonIconProps~~ } from \"./RadioButtonIcon\";\n\nimport \"./RadioButton.css\";\n\nconst withBaseName = makePrefixer(\"saltRadioButton\");\n\nexport interface RadioButtonProps\n extends Omit<HTMLAttributes<~~HTMLDivElement>,~~ \"onChange\"> {\n checked?: boolean;\n ~~className~~?: ~~string~~;\n ~~disabled~~?: boolean;\n /*\n ~~Custom~~ ~~icon~~ ~~component~~\n /\n ~~icon~~?: ~~ComponentType~~<~~RadioButtonIconProps>;\~~n /\n The label to be shown next to the radio\n */\n label?: ~~ControlLabelProps[\"label\"]~~;\n ~~LabelProps?:~~ ~~Partial<ControlLabelProps>;\~~n name?: string;\n onChange?: ChangeEventHandler<HTMLInputElement>;\n value?: string;\n}\n\nexport const RadioButton = forwardRef<HTMLLabelElement, RadioButtonProps>(\n function RadioButton(props, ref) {\n const {\n checked,\n className,\n ~~icon~~,\n ~~disabled~~,\n label,\n ~~LabelProps~~,\n ~~value~~,\n onChange,\n ...rest\n } = props;\n\n ~~return~~ (\n ~~<div~~\n ~~className~~={~~clsx(~~\n ~~withBaseName~~(),\n {\n ~~[withBaseName(~~\"~~disabled~~\")]: ~~disabled,\~~n ~~},\~~n ~~className~~\n )}\n ~~{...rest}~~\n ~~>\n~~ <~~ControlLabel~~\n ~~{...LabelProps}\n~~ className={clsx(\n withBaseName(~~\"labelContainer\"~~),\n {\n [withBaseName(\"disabled\")]: disabled,\n },\n className\n )}\n ~~disabled~~={~~disabled~~}\n ~~label=~~{~~label~~}\n ~~labelPlacement=\~~"~~right~~\"\n ~~ref=~~{~~ref~~}\n ~~>\n~~ ~~<Radio\n~~ checked={checked}\n disabled={disabled}\n value={value}\n onChange={~~onChange~~}\n ~~icon~~={~~icon~~}\n />\n ~~</ControlLabel>\~~n </~~div~~>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","RadioButton","~~jsx~~","clsx","~~ControlLabel~~","~~Radio~~"],"mappings":";;;;;;;;;;;;~~AAcA~~,MAAM,YAAA,GAAeA,kBAAa,iBAAiB,CAAA,CAAA;~~AAqB5C~~,MAAM,WAAc,GAAAC,gBAAA;AAAA,EACzB,SAASC,YAAY,CAAA,KAAA,EAAO,GAAK,EAAA;AAC/B,IAAM,MAAA;AAAA,MACJ,~~OAAA~~;AAAA,~~MACA~~,SAAA;AAAA,MACA,~~IAAA~~;AAAA,MACA,~~QAAA~~;AAAA,MACA,KAAA;AAAA,MACA,~~UAAA~~;AAAA,MACA,~~KAAA~~;AAAA,MACA,QAAA;AAAA,MACG,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,~~uBACGC~~,~~cAAA~~,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,SAC9B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,~~QAAC~~,~~kBAAAD~~,cAAA,~~CAAAE~~,~~yBAAA~~,EAAA;AAAA,~~QACE~~,~~GAAG~~,~~UAAA;AAAA~~,~~QACJ~~,~~SAAW~~,~~EAAAD,SAAA~~;AAAA,~~UACT~~,~~aAAa~~,~~gBAAgB,CAAA~~;AAAA,~~UAC7B~~;AAAA,~~YACE~~,~~CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,~~QAAA;AAAA,~~WAC9B~~;AAAA,UACA,~~SAAA~~;AAAA,~~SACF~~;AAAA,~~QACA~~,~~QAAA~~;AAAA,~~QACA~~,~~KAAA~~;AAAA,~~QACA~~,~~cAAe~~,EAAA,OAAA;AAAA,~~QACf~~,~~GAAA~~;AAAA,~~QAEA~~,~~QAAC,kBAAAD,~~cAAA,~~CAAAG~~,+BAAA,EAAA;AAAA,~~UACC~~,OAAA;AAAA,~~UACA~~,~~QAAA;AAAA,UACA,~~KAAA;AAAA,~~UACA~~,QAAA;AAAA,~~UACA~~,~~IAAA~~;AAAA,~~SACF~~,~~CAAA~~;AAAA,~~OACF,CAAA~~;AAAA,~~KACF~~,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1	+ {"version":3,"file":"RadioButton.js","sources":["../src/radio-button/RadioButton.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n FocusEventHandler,\n forwardRef,\n HTMLAttributes,\n InputHTMLAttributes,\n ReactNode,\n} from \"react\";\nimport { makePrefixer, useControlled } from \"@salt-ds/core\";\nimport { useRadioGroup } from \"./internal/useRadioGroup\";\nimport { RadioButtonIcon } from \"./RadioButtonIcon\";\n\nimport \"./RadioButton.css\";\n\nconst withBaseName = makePrefixer(\"saltRadioButton\");\n\nexport interface RadioButtonProps\n extends Omit<\n HTMLAttributes<HTMLLabelElement>,\n \"onChange\" \| \"onBlur\" \| \"onFocus\"\n > {\n /*\n Set the default selected radio button in the group\n /\n checked?: boolean;\n /\n Set the disabled state\n /\n disabled?: boolean;\n /\n Set the error state\n /\n error?: boolean;\n /\n Props to be passed to the radio input\n /\n inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>>;\n /\n The label to be shown next to the radio icon\n /\n label?: ReactNode;\n /\n Name of the radio group\n /\n name?: string;\n /\n Callback for blur event\n /\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /\n Callback for change event\n /\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /\n Callback for focus event\n /\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /\n Value of radio button\n */\n value?: string;\n}\n\nexport const RadioButton = forwardRef<HTMLLabelElement, RadioButtonProps>(\n function RadioButton(props, ref) {\n const {\n checked: checkedProp,\n className,\n disabled,\n error,\n inputProps,\n label,\n name: nameProp,\n onFocus,\n onBlur,\n onChange,\n value,\n ...rest\n } = props;\n\n const radioGroup = useRadioGroup();\n\n const radioGroupChecked =\n radioGroup.value != null && value != null\n ? radioGroup.value === value\n : checkedProp;\n const name = nameProp ?? radioGroup.name;\n\n const [checked, setCheckedState] = useControlled({\n controlled: radioGroupChecked,\n default: Boolean(checkedProp),\n name: \"RadioBase\",\n state: \"checked\",\n });\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const newChecked = event.target.checked;\n setCheckedState(newChecked);\n\n onChange?.(event);\n radioGroup.onChange?.(event);\n };\n\n return (\n <label\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n },\n className\n )}\n ref={ref}\n {...rest}\n >\n <input\n className={withBaseName(\"input\")}\n {...inputProps}\n checked={checked}\n disabled={disabled}\n name={name}\n value={value}\n onBlur={onBlur}\n onChange={handleChange}\n onFocus={onFocus}\n type=\"radio\"\n />\n <RadioButtonIcon checked={checked} error={error} disabled={disabled} />\n {label}\n </label>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","RadioButton","useRadioGroup","useControlled","jsxs","clsx","jsx","RadioButtonIcon"],"mappings":";;;;;;;;;;;;AAeA,MAAM,YAAA,GAAeA,kBAAa,iBAAiB,CAAA,CAAA;AAiD5C,MAAM,WAAc,GAAAC,gBAAA;AAAA,EACzB,SAASC,YAAY,CAAA,KAAA,EAAO,GAAK,EAAA;AAC/B,IAAM,MAAA;AAAA,MACJ,OAAS,EAAA,WAAA;AAAA,MACT,SAAA;AAAA,MACA,QAAA;AAAA,MACA,KAAA;AAAA,MACA,UAAA;AAAA,MACA,KAAA;AAAA,MACA,IAAM,EAAA,QAAA;AAAA,MACN,OAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,MACA,KAAA;AAAA,MACG,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,aAAaC,2BAAc,EAAA,CAAA;AAEjC,IAAM,MAAA,iBAAA,GACJ,WAAW,KAAS,IAAA,IAAA,IAAQ,SAAS,IACjC,GAAA,UAAA,CAAW,UAAU,KACrB,GAAA,WAAA,CAAA;AACN,IAAM,MAAA,IAAA,GAAO,8BAAY,UAAW,CAAA,IAAA,CAAA;AAEpC,IAAA,MAAM,CAAC,OAAA,EAAS,eAAe,CAAA,GAAIC,kBAAc,CAAA;AAAA,MAC/C,UAAY,EAAA,iBAAA;AAAA,MACZ,OAAA,EAAS,QAAQ,WAAW,CAAA;AAAA,MAC5B,IAAM,EAAA,WAAA;AAAA,MACN,KAAO,EAAA,SAAA;AAAA,KACR,CAAA,CAAA;AAED,IAAM,MAAA,YAAA,GAAqD,CAAC,KAAU,KAAA;AAhG1E,MAAA,IAAA,EAAA,CAAA;AAiGM,MAAM,MAAA,UAAA,GAAa,MAAM,MAAO,CAAA,OAAA,CAAA;AAChC,MAAA,eAAA,CAAgB,UAAU,CAAA,CAAA;AAE1B,MAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AACX,MAAA,CAAA,EAAA,GAAA,UAAA,CAAW,aAAX,IAAsB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,UAAA,EAAA,KAAA,CAAA,CAAA;AAAA,KACxB,CAAA;AAEA,IAAA,uBACGC,eAAA,CAAA,OAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,SAC9B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAACC,cAAA,CAAA,OAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAC9B,GAAG,UAAA;AAAA,UACJ,OAAA;AAAA,UACA,QAAA;AAAA,UACA,IAAA;AAAA,UACA,KAAA;AAAA,UACA,MAAA;AAAA,UACA,QAAU,EAAA,YAAA;AAAA,UACV,OAAA;AAAA,UACA,IAAK,EAAA,OAAA;AAAA,SACP,CAAA;AAAA,wBACCA,cAAA,CAAAC,+BAAA,EAAA;AAAA,UAAgB,OAAA;AAAA,UAAkB,KAAA;AAAA,UAAc,QAAA;AAAA,SAAoB,CAAA;AAAA,QACpE,KAAA;AAAA,OAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/packages/lab/src/radio-button/RadioButtonGroup.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
-var css_248z = "/* Styles applied to root component (RadioButton) */\n.salt-density-high {\n  --radioButton-group-vertical-label-marginBottom: 4px;\n  --radioButton-group-legend-minHeight: 14px;\n  --radioButton-group-legend-paddingRight: 16px;\n  --radioButton-group-horizontal-legend-marginTop: 2px;\n  --radioButton-group-horizontal-legend-marginRight: 12px;\n  --radioButton-group-horizontal-legend-paddingRight: 4px;\n  --radioButton-group-horizontal-legend-marginBottom: 0px;\n  --radioButton-group-vertical-formLabel-paddingRight: 4px;\n  --radioButton-group-vertical-formLabel-marginBottom: 4px;\n  --radioButton-group-vertical-formLabel-transform: translate(0px, 3px);\n  --radioButton-group-formLabel-transform: translate(0px, 3px);\n}\n\n.salt-density-medium {\n  --radioButton-group-vertical-label-marginBottom: 6px;\n  --radioButton-group-legend-minHeight: 14px;\n  --radioButton-group-legend-paddingRight: 16px;\n  --radioButton-group-horizontal-legend-marginTop: 1px;\n  --radioButton-group-horizontal-legend-marginRight: 24px;\n  --radioButton-group-horizontal-legend-paddingRight: 8px;\n  --radioButton-group-horizontal-legend-marginBottom: 0px;\n  --radioButton-group-vertical-formLabel-paddingRight: 8px;\n  --radioButton-group-vertical-formLabel-marginBottom: 6px;\n  --radioButton-group-vertical-formLabel-transform: translate(0px, 5px);\n  --radioButton-group-formLabel-transform: translate(0px, 5px);\n}\n\n.salt-density-low {\n  --radioButton-group-vertical-label-marginBottom: 9px;\n  --radioButton-group-legend-minHeight: 14px;\n  --radioButton-group-legend-paddingRight: 16px;\n  --radioButton-group-horizontal-legend-marginTop: 4px;\n  --radioButton-group-horizontal-legend-marginRight: 36px;\n  --radioButton-group-horizontal-legend-paddingRight: 12px;\n  --radioButton-group-horizontal-legend-marginBottom: 0px;\n  --radioButton-group-vertical-formLabel-paddingRight: 12px;\n  --radioButton-group-vertical-formLabel-marginBottom: 9px;\n  --radioButton-group-vertical-formLabel-transform: translate(0px, 7px);\n  --radioButton-group-formLabel-transform: translate(0px, 7px);\n}\n\n.salt-density-touch {\n  --radioButton-group-vertical-label-marginBottom: 12px;\n  --radioButton-group-legend-minHeight: 16px;\n  --radioButton-group-legend-paddingRight: 16px;\n  --radioButton-group-horizontal-legend-marginTop: 4px;\n  --radioButton-group-horizontal-legend-marginRight: 48px;\n  --radioButton-group-horizontal-legend-paddingRight: 16px;\n  --radioButton-group-horizontal-legend-marginBottom: 0px;\n  --radioButton-group-vertical-formLabel-paddingRight: 16px;\n  --radioButton-group-vertical-formLabel-marginBottom: 12px;\n  --radioButton-group-vertical-formLabel-transform: translate(0px, 11px);\n  --radioButton-group-formLabel-transform: translate(0px, 11px);\n}\n\n/* Styles applied to root element */\n.saltRadioButtonGroup {\n  border: 0;\n  margin: 0;\n  padding: 0;\n  display: inline-flex;\n  flex-direction: column;\n  vertical-align: top;\n}\n\n/* Styles applied when `row=false OR undefined` */\n.saltRadioButtonGroup-vertical .saltRadioButtonGroup-legend.saltFormLabel {\n  margin-bottom: var(--saltRadioButton-group-vertical-label-marginBottom, var(--radioButton-group-vertical-label-marginBottom));\n  margin-top: var(--saltRadioButton-group-vertical-label-marginTop, 0px);\n\n  --saltFormField-label-paddingRight: var(--radioButton-group-vertical-formLabel-paddingRight);\n  --saltFormField-label-marginBottom: var(--radioButton-group-vertical-formLabel-marginBottom);\n  --saltFormField-label-transform: var(--radioButton-group-vertical-formLabel-transform);\n}\n\n/* Styles applied to the FormField FormLabel component */\n.saltRadioButtonGroup-legend.saltFormLabel {\n  --saltFormField-label-transform: var(--radioButton-group-formLabel-transform);\n}\n\n/* Styles applied to the Form Field FormLabel component if `row={true}` */\n.saltRadioButtonGroup-horizontal .saltRadioButtonGroup-legend.saltFormLabel {\n  --formField-label-width: auto;\n  float: left;\n}\n\n/* Styles applied to the Form Field FormLabel component */\n.saltRadioButtonGroup-legend.saltFormLabel {\n  padding-left: var(--saltRadioButton-group-formLabel-paddingLeft, 0px);\n}\n\n/* Styles applied  to legend if `row={true}` */\n.saltRadioButtonGroup-horizontal .saltRadioButtonGroup-legend {\n  margin-bottom: var(--saltRadioButton-group-horizontal-legend-marginBottom, var(--radioButton-group-horizontal-legend-marginBottom));\n  margin-right: var(--saltRadioButton-group-horizontal-legend-marginRight, var(--radioButton-group-horizontal-legend-marginRight));\n  margin-top: var(--saltRadioButton-group-horizontal-legend-marginTop, var(--radioButton-group-horizontal-legend-marginTop));\n  padding-right: var(--saltRadioButton-group-horizontal-legend-paddingRight, var(--radioButton-group-horizontal-legend-paddingRight));\n}\n\n/* Styles applied to legend */\n.saltRadioButtonGroup-legend {\n  margin-bottom: var(--saltRadioButton-group-legend-marginBottom, 4px);\n  min-height: var(--saltRadioButton-group-legend-minHeight, var(--radioButton-group-legend-minHeight));\n  padding-right: var(--saltRadioButton-group-legend-paddingRight, var(--radioButton-group-legend-paddingRight));\n  transition: none;\n  width: auto;\n}\n\n/* fieldset specific styles */\nfieldset.saltRadioButtonGroup.saltRadioButtonGroup-vertical {\n  line-height: 1;\n}\n\nfieldset.saltRadioButtonGroup.saltRadioButtonGroup-horizontal {\n  display: block;\n  padding-left: 0px;\n  min-inline-size: max-content;\n}\n";
+var css_248z = "/* Styles applied to root element */\n.saltRadioButtonGroup {\n  border: none;\n  margin: 0;\n  padding: 0;\n}\n\n/* Styles applied when direction is vertical */\n.saltRadioButtonGroup-vertical {\n  display: flex;\n  gap: var(--salt-size-unit);\n  flex-direction: column;\n}\n\n/* Styles applied when direction is horizontal */\n.saltRadioButtonGroup-horizontal {\n  display: flex;\n  gap: var(--salt-size-unit);\n  flex-direction: row;\n  flex-wrap: wrap;\n}\n\n.saltRadioButtonGroup-noWrap {\n  flex-wrap: nowrap;\n}\n.saltRadioButtonGroup-noWrap .saltRadioButton {\n  white-space: break-spaces;\n}\n\n/* Styles applied to radio group's legend */\n.saltRadioButtonGroup-legend {\n  display: inline-block;\n  font-size: var(--formField-label-fontSize);\n  color: var(--salt-text-primary-foreground);\n  margin-bottom: calc(var(--salt-size-unit) * 2);\n}\n";
 styleInject_es(css_248z);
 module.exports = css_248z;

package/dist-cjs/packages/lab/src/radio-button/RadioButtonGroup.js CHANGED Viewed

@@ -6,13 +6,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var React = require('react');
 var core = require('@salt-ds/core');
-require('../form-field-context/FormFieldContext.js');
-var useFormFieldProps = require('../form-field-context/useFormFieldProps.js');
-var FormGroup = require('../form-group/FormGroup.js');
-require('../form-field/FormField.js');
-var FormLabel = require('../form-field/FormLabel.js');
 var RadioGroupContext = require('./internal/RadioGroupContext.js');
-var RadioButton = require('./RadioButton.js');
 require('./RadioButtonGroup.css.js');
 const withBaseName = core.makePrefixer("saltRadioButtonGroup");
@@ -21,81 +15,41 @@ const RadioButtonGroup = React.forwardRef(function RadioButtonGroup2(props, ref)
     children,
     className,
     defaultValue,
-    legend,
-    icon,
-    radios,
+    direction = "vertical",
+    wrap = true,
+    name: nameProp,
     onChange,
     value: valueProp,
-    row,
-    name: nameProp,
     ...rest
   } = props;
-  const { inFormField, a11yProps } = useFormFieldProps.useFormFieldProps({
-    focusVisible: false
+  const [value, setStateValue] = core.useControlled({
+    controlled: valueProp,
+    default: defaultValue,
+    state: "value",
+    name: "RadioButtonGroup"
   });
-  const [stateValue, setStateValue] = React.useState(props.defaultValue);
-  const getValue = () => isControlled() ? props.value : stateValue;
-  const isControlled = () => props.value !== void 0;
   const handleChange = (event) => {
-    if (!isControlled()) {
-      setStateValue(event.target.value);
-    }
-    if (props.onChange) {
-      props.onChange(event);
-    }
+    setStateValue(event.target.value);
+    onChange == null ? void 0 : onChange(event);
   };
-  const rootRef = React.useRef(null);
-  React.useImperativeHandle(
-    void 0,
-    () => ({
-      focus: () => {
-        const current = rootRef.current;
-        if (current) {
-          let input = current.querySelector(
-            "input:not(:disabled):checked"
-          );
-          if (!input) {
-            input = current.querySelector("input:not(:disabled)");
-          }
-          if (input) {
-            input.focus();
-          }
-        }
-      }
-    }),
-    []
-  );
   const name = core.useId(nameProp);
-  return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", {
+  return /* @__PURE__ */ jsxRuntime.jsx("fieldset", {
     className: clsx.clsx(
       withBaseName(),
-      row ? withBaseName("horizontal") : withBaseName("vertical"),
+      withBaseName(direction),
+      {
+        [withBaseName("noWrap")]: !wrap
+      },
       className
     ),
     "data-testid": "radio-button-group",
     ref,
     role: "radiogroup",
-    ...a11yProps,
-    children: [
-      !inFormField && /* @__PURE__ */ jsxRuntime.jsx(FormLabel.FormLabel, {
-        className: clsx.clsx(withBaseName("legend")),
-        label: legend
-      }),
-      /* @__PURE__ */ jsxRuntime.jsx(RadioGroupContext.RadioGroupContext.Provider, {
-        value: { name, onChange: handleChange, value: getValue() },
-        children: /* @__PURE__ */ jsxRuntime.jsx(FormGroup.FormGroup, {
-          role: "radiogroup",
-          ...rest,
-          row,
-          children: radios && radios.map((radio) => /* @__PURE__ */ jsxRuntime.jsx(RadioButton.RadioButton, {
-            disabled: radio.disabled,
-            icon,
-            label: radio.label,
-            value: radio.value
-          }, radio.label)) || children
-        })
-      })
-    ]
+    ...rest,
+    children: /* @__PURE__ */ jsxRuntime.jsx(RadioGroupContext.RadioGroupContext.Provider, {
+      value: { name, onChange: handleChange, value },
+      children
+    })
   });
 });