@hashicorp/mds-react 0.9.4 → 0.9.6

package/components/form/radio/index.d.ts

@@ -1,5 +1,5 @@
-import { ComponentProps, HTMLProps, ReactNode } from 'react';
-import { Fieldset } from '../fieldset';
+import { HTMLProps, ReactNode } from 'react';
+import { FieldsetProps } from '../fieldset';
 interface RadioBaseProps {
     id: string;
     required?: boolean;
@@ -28,9 +28,7 @@ declare const RadioField: {
     ({ isInvalid, isLoading, isRequired, isOptional, id, label, helperText, error, field, className, testingKey, ...rest }: RadioFieldProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-interface RadioGroupProps extends ComponentProps<typeof Fieldset> {
-    children: ReactNode;
-}
+type RadioGroupProps = FieldsetProps;
 declare const RadioGroup: {
     Root: {
         ({ layout, legend, isOptional, isRequired, children, }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;

package/components/form/radio/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/form/radio/index.tsx"],"sourcesContent":["import {\n\tuseId,\n\ttype ComponentProps,\n\ttype HTMLProps,\n\ttype ReactNode,\n} from 'react'\nimport { Field } from '../field'\nimport { Fieldset } from '../fieldset'\nimport classNames from 'classnames'\nimport s from './form-radio.module.scss'\n\ninterface RadioBaseProps {\n\tid: string\n\trequired?: boolean\n\tfield: HTMLProps<HTMLInputElement>\n\tclassName?: string\n\ttestingKey?: string\n}\n\nconst RadioBase = ({\n\tid,\n\trequired,\n\tfield,\n\tclassName,\n\ttestingKey,\n}: RadioBaseProps) => {\n\treturn (\n\t\t<input\n\t\t\tid={id}\n\t\t\ttype=\"radio\"\n\t\t\tclassName={classNames(s.radio, className)}\n\t\t\trequired={required}\n\t\t\tdata-testid={testingKey}\n\t\t\t{...field}\n\t\t/>\n\t)\n}\n\nRadioBase.displayName = 'RadioBase'\n\ninterface RadioFieldProps {\n\tisInvalid?: boolean\n\tisLoading?: boolean\n\tisRequired?: boolean\n\tisOptional?: boolean\n\tid?: string\n\tlabel?: ReactNode\n\thelperText?: ReactNode\n\terror?: ReactNode\n\tfield: HTMLProps<HTMLInputElement>\n\tclassName?: string\n\ttestingKey?: string\n}\n\nconst RadioField = ({\n\tisInvalid,\n\tisLoading,\n\tisRequired,\n\tisOptional,\n\tid,\n\tlabel,\n\thelperText,\n\terror,\n\tfield,\n\tclassName,\n\ttestingKey,\n\t...rest\n}: RadioFieldProps) => {\n\tconst generatedId = useId()\n\tconst inputId = id ?? generatedId\n\n\treturn (\n\t\t<Field\n\t\t\tlabel={label}\n\t\t\thelperText={helperText}\n\t\t\terror={error}\n\t\t\tisRequired={isRequired}\n\t\t\tisOptional={isOptional}\n\t\t\tid={inputId}\n\t\t\tlayout=\"flag\"\n\t\t\tclassName={className}\n\t\t>\n\t\t\t<RadioBase\n\t\t\t\tid={inputId}\n\t\t\t\trequired={isRequired}\n\t\t\t\tfield={{ ...field, 'aria-describedby': `error-${id}` }}\n\t\t\t\ttestingKey={testingKey}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t</Field>\n\t)\n}\n\nRadioField.displayName = 'RadioField'\n\ninterface RadioGroupProps extends ComponentProps<typeof Fieldset> {\n\tchildren: ReactNode\n}\n\nconst RadioGroupRoot = ({\n\tlayout = 'vertical',\n\tlegend,\n\tisOptional,\n\tisRequired,\n\tchildren,\n}: RadioGroupProps) => {\n\treturn (\n\t\t<Fieldset\n\t\t\tlayout={layout}\n\t\t\tlegend={legend}\n\t\t\tisOptional={isOptional}\n\t\t\tisRequired={isRequired}\n\t\t>\n\t\t\t{children}\n\t\t</Fieldset>\n\t)\n}\n\nRadioGroupRoot.displayName = 'RadioGroupRoot'\n\nconst RadioGroupField = (props: RadioFieldProps) => {\n\treturn (\n\t\t<RadioField\n\t\t\t{...props}\n\t\t\ttestingKey={props.testingKey}\n\t\t\tclassName={props.className}\n\t\t/>\n\t)\n}\n\nRadioGroupField.displayName = 'RadioGroupField'\n\nconst RadioGroup = {\n\tRoot: RadioGroupRoot,\n\tField: RadioGroupField,\n}\n\nexport { RadioGroup, RadioBase, RadioField }\n"],"names":["RadioBase","id","required","field","className","testingKey","jsx","classNames","s","RadioField","isInvalid","isLoading","isRequired","isOptional","label","helperText","error","rest","generatedId","useId","inputId","Field","RadioGroupRoot","layout","legend","children","Fieldset","RadioGroupField","props","RadioGroup"],"mappings":";;;;;;AAmBA,MAAMA,IAAY,CAAC;AAAA,EAClB,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AACD,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,IAAAL;AAAA,IACA,MAAK;AAAA,IACL,WAAWM,EAAWC,EAAE,OAAOJ,CAAS;AAAA,IACxC,UAAAF;AAAA,IACA,eAAaG;AAAA,IACZ,GAAGF;AAAA,EAAA;AAAA;AAKPH,EAAU,cAAc;AAgBxB,MAAMS,IAAa,CAAC;AAAA,EACnB,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,IAAAZ;AAAA,EACA,OAAAa;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAb;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,GAAGY;AACJ,MAAuB;AACtB,QAAMC,IAAcC,EAAA,GACdC,IAAUnB,KAAMiB;AAEtB,SACC,gBAAAZ;AAAA,IAACe;AAAA,IAAA;AAAA,MACA,OAAAP;AAAA,MACA,YAAAC;AAAA,MACA,OAAAC;AAAA,MACA,YAAAJ;AAAA,MACA,YAAAC;AAAA,MACA,IAAIO;AAAA,MACJ,QAAO;AAAA,MACP,WAAAhB;AAAA,MAEA,UAAA,gBAAAE;AAAA,QAACN;AAAA,QAAA;AAAA,UACA,IAAIoB;AAAA,UACJ,UAAUR;AAAA,UACV,OAAO,EAAE,GAAGT,GAAO,oBAAoB,SAASF,CAAE,GAAA;AAAA,UAClD,YAAAI;AAAA,UACC,GAAGY;AAAA,QAAA;AAAA,MAAA;AAAA,IACL;AAAA,EAAA;AAGH;AAEAR,EAAW,cAAc;AAMzB,MAAMa,IAAiB,CAAC;AAAA,EACvB,QAAAC,IAAS;AAAA,EACT,QAAAC;AAAA,EACA,YAAAX;AAAA,EACA,YAAAD;AAAA,EACA,UAAAa;AACD,MAEE,gBAAAnB;AAAA,EAACoB;AAAA,EAAA;AAAA,IACA,QAAAH;AAAA,IACA,QAAAC;AAAA,IACA,YAAAX;AAAA,IACA,YAAAD;AAAA,IAEC,UAAAa;AAAA,EAAA;AAAA;AAKJH,EAAe,cAAc;AAE7B,MAAMK,IAAkB,CAACC,MAEvB,gBAAAtB;AAAA,EAACG;AAAA,EAAA;AAAA,IACC,GAAGmB;AAAA,IACJ,YAAYA,EAAM;AAAA,IAClB,WAAWA,EAAM;AAAA,EAAA;AAAA;AAKpBD,EAAgB,cAAc;AAE9B,MAAME,IAAa;AAAA,EAClB,MAAMP;AAAA,EACN,OAAOK;AACR;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/form/radio/index.tsx"],"sourcesContent":["import { useId, type HTMLProps, type ReactNode } from 'react'\nimport { Field } from '../field'\nimport { Fieldset, type FieldsetProps } from '../fieldset'\nimport classNames from 'classnames'\nimport s from './form-radio.module.scss'\n\ninterface RadioBaseProps {\n\tid: string\n\trequired?: boolean\n\tfield: HTMLProps<HTMLInputElement>\n\tclassName?: string\n\ttestingKey?: string\n}\n\nconst RadioBase = ({\n\tid,\n\trequired,\n\tfield,\n\tclassName,\n\ttestingKey,\n}: RadioBaseProps) => {\n\treturn (\n\t\t<input\n\t\t\tid={id}\n\t\t\ttype=\"radio\"\n\t\t\tclassName={classNames(s.radio, className)}\n\t\t\trequired={required}\n\t\t\tdata-testid={testingKey}\n\t\t\t{...field}\n\t\t/>\n\t)\n}\n\nRadioBase.displayName = 'RadioBase'\n\ninterface RadioFieldProps {\n\tisInvalid?: boolean\n\tisLoading?: boolean\n\tisRequired?: boolean\n\tisOptional?: boolean\n\tid?: string\n\tlabel?: ReactNode\n\thelperText?: ReactNode\n\terror?: ReactNode\n\tfield: HTMLProps<HTMLInputElement>\n\tclassName?: string\n\ttestingKey?: string\n}\n\nconst RadioField = ({\n\tisInvalid,\n\tisLoading,\n\tisRequired,\n\tisOptional,\n\tid,\n\tlabel,\n\thelperText,\n\terror,\n\tfield,\n\tclassName,\n\ttestingKey,\n\t...rest\n}: RadioFieldProps) => {\n\tconst generatedId = useId()\n\tconst inputId = id ?? generatedId\n\n\treturn (\n\t\t<Field\n\t\t\tlabel={label}\n\t\t\thelperText={helperText}\n\t\t\terror={error}\n\t\t\tisRequired={isRequired}\n\t\t\tisOptional={isOptional}\n\t\t\tid={inputId}\n\t\t\tlayout=\"flag\"\n\t\t\tclassName={className}\n\t\t>\n\t\t\t<RadioBase\n\t\t\t\tid={inputId}\n\t\t\t\trequired={isRequired}\n\t\t\t\tfield={{ ...field, 'aria-describedby': `error-${id}` }}\n\t\t\t\ttestingKey={testingKey}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t</Field>\n\t)\n}\n\nRadioField.displayName = 'RadioField'\n\ntype RadioGroupProps = FieldsetProps\n\nconst RadioGroupRoot = ({\n\tlayout = 'vertical',\n\tlegend,\n\tisOptional,\n\tisRequired,\n\tchildren,\n}: RadioGroupProps) => {\n\treturn (\n\t\t<Fieldset\n\t\t\tlayout={layout}\n\t\t\tlegend={legend}\n\t\t\tisOptional={isOptional}\n\t\t\tisRequired={isRequired}\n\t\t>\n\t\t\t{children}\n\t\t</Fieldset>\n\t)\n}\n\nRadioGroupRoot.displayName = 'RadioGroupRoot'\n\nconst RadioGroupField = (props: RadioFieldProps) => {\n\treturn (\n\t\t<RadioField\n\t\t\t{...props}\n\t\t\ttestingKey={props.testingKey}\n\t\t\tclassName={props.className}\n\t\t/>\n\t)\n}\n\nRadioGroupField.displayName = 'RadioGroupField'\n\nconst RadioGroup = {\n\tRoot: RadioGroupRoot,\n\tField: RadioGroupField,\n}\n\nexport { RadioGroup, RadioBase, RadioField }\n"],"names":["RadioBase","id","required","field","className","testingKey","jsx","classNames","s","RadioField","isInvalid","isLoading","isRequired","isOptional","label","helperText","error","rest","generatedId","useId","inputId","Field","RadioGroupRoot","layout","legend","children","Fieldset","RadioGroupField","props","RadioGroup"],"mappings":";;;;;;AAcA,MAAMA,IAAY,CAAC;AAAA,EAClB,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AACD,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,IAAAL;AAAA,IACA,MAAK;AAAA,IACL,WAAWM,EAAWC,EAAE,OAAOJ,CAAS;AAAA,IACxC,UAAAF;AAAA,IACA,eAAaG;AAAA,IACZ,GAAGF;AAAA,EAAA;AAAA;AAKPH,EAAU,cAAc;AAgBxB,MAAMS,IAAa,CAAC;AAAA,EACnB,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,IAAAZ;AAAA,EACA,OAAAa;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAb;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,GAAGY;AACJ,MAAuB;AACtB,QAAMC,IAAcC,EAAA,GACdC,IAAUnB,KAAMiB;AAEtB,SACC,gBAAAZ;AAAA,IAACe;AAAA,IAAA;AAAA,MACA,OAAAP;AAAA,MACA,YAAAC;AAAA,MACA,OAAAC;AAAA,MACA,YAAAJ;AAAA,MACA,YAAAC;AAAA,MACA,IAAIO;AAAA,MACJ,QAAO;AAAA,MACP,WAAAhB;AAAA,MAEA,UAAA,gBAAAE;AAAA,QAACN;AAAA,QAAA;AAAA,UACA,IAAIoB;AAAA,UACJ,UAAUR;AAAA,UACV,OAAO,EAAE,GAAGT,GAAO,oBAAoB,SAASF,CAAE,GAAA;AAAA,UAClD,YAAAI;AAAA,UACC,GAAGY;AAAA,QAAA;AAAA,MAAA;AAAA,IACL;AAAA,EAAA;AAGH;AAEAR,EAAW,cAAc;AAIzB,MAAMa,IAAiB,CAAC;AAAA,EACvB,QAAAC,IAAS;AAAA,EACT,QAAAC;AAAA,EACA,YAAAX;AAAA,EACA,YAAAD;AAAA,EACA,UAAAa;AACD,MAEE,gBAAAnB;AAAA,EAACoB;AAAA,EAAA;AAAA,IACA,QAAAH;AAAA,IACA,QAAAC;AAAA,IACA,YAAAX;AAAA,IACA,YAAAD;AAAA,IAEC,UAAAa;AAAA,EAAA;AAAA;AAKJH,EAAe,cAAc;AAE7B,MAAMK,IAAkB,CAACC,MAEvB,gBAAAtB;AAAA,EAACG;AAAA,EAAA;AAAA,IACC,GAAGmB;AAAA,IACJ,YAAYA,EAAM;AAAA,IAClB,WAAWA,EAAM;AAAA,EAAA;AAAA;AAKpBD,EAAgB,cAAc;AAE9B,MAAME,IAAa;AAAA,EAClB,MAAMP;AAAA,EACN,OAAOK;AACR;"}

package/components/form/radio-card/RadioCardStory.css

@@ -0,0 +1,21 @@
+.doc-radio-card-list-demo {
+	margin: 0;
+	padding: 0;
+	color: #3b3d45;
+
+	& li {
+		margin: 0;
+		padding: 8px 0 8px 24px;
+		list-style: none;
+		background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.78 5.22a.75.75 0 010 1.06l-4.5 4.5a.75.75 0 01-1.06 0l-2-2a.75.75 0 011.06-1.06l1.47 1.47 3.97-3.97a.75.75 0 011.06 0z' fill='%233b3d45'/%3E%3Cpath d='M0 8a8 8 0 1116 0A8 8 0 010 8zm8-6.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13z' fill='%233b3d45'/%3E%3C/svg%3E");
+		background-repeat: no-repeat;
+		background-position: left 9px;
+		background-size: 16px;
+		border-bottom: 1px solid #ddd;
+		font-family: var(--mds-typography-font-stack-text);
+
+		&:last-child {
+			border-bottom: none;
+		}
+	}
+}

package/components/form/select/index.d.ts

@@ -13,6 +13,7 @@ interface SelectFieldProps {
     className?: string;
     size?: 'medium' | 'large';
     disabled?: boolean;
+    multiple?: boolean;
 }
 declare const SelectField: {
     ({ isInvalid, isLoading, isRequired, isOptional, id, label, helperText, error, field, children, className, size, ...rest }: SelectFieldProps): import("react/jsx-runtime").JSX.Element;

package/components/form/select/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/form/select/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport type { HTMLProps, ReactNode } from 'react'\nimport { useId } from 'react'\nimport { Field } from '../field'\nimport s from './form-select.module.css'\n\ninterface SelectBaseProps {\n\tisInvalid?: boolean\n\tisLoading?: boolean\n\trequired?: boolean\n\tclassName?: string\n\tid: string\n\tfield: HTMLProps<HTMLSelectElement>\n\tchildren: ReactNode\n\tsize: 'medium' | 'large'\n\terror?: ReactNode\n\tdisabled?: boolean\n}\n\nconst SelectBase = ({\n\tisInvalid,\n\tisLoading,\n\tclassName,\n\tid,\n\tfield,\n\tchildren,\n\tsize,\n\terror,\n\t...rest\n}: SelectBaseProps) => {\n\treturn (\n\t\t<select\n\t\t\tid={id}\n\t\t\tclassName={classNames(\n\t\t\t\ts.select,\n\t\t\t\ts[size],\n\t\t\t\t{\n\t\t\t\t\t[s.invalid]: isInvalid,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\taria-describedby={`${error ? 'error' : 'helper-text'}-${id}`}\n\t\t\t{...field}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{children}\n\t\t</select>\n\t)\n}\n\ninterface SelectFieldProps {\n\tisInvalid?: boolean\n\tisLoading?: boolean\n\tisRequired?: boolean\n\tisOptional?: boolean\n\tid?: string\n\tlabel?: ReactNode\n\thelperText?: ReactNode\n\terror?: ReactNode\n\tfield: HTMLProps<HTMLSelectElement>\n\tchildren: ReactNode\n\tclassName?: string\n\tsize?: 'medium' | 'large'\n\tdisabled?: boolean\n}\n\nconst SelectField = ({\n\tisInvalid,\n\tisLoading,\n\tisRequired,\n\tisOptional,\n\tid,\n\tlabel,\n\thelperText,\n\terror,\n\tfield,\n\tchildren,\n\tclassName,\n\tsize = 'medium',\n\t...rest\n}: SelectFieldProps) => {\n\tconst generatedId = useId()\n\tconst inputId = id ?? generatedId\n\n\treturn (\n\t\t<Field\n\t\t\tlabel={label}\n\t\t\thelperText={helperText}\n\t\t\terror={error}\n\t\t\tisRequired={isRequired}\n\t\t\tisOptional={isOptional}\n\t\t\tid={inputId}\n\t\t\tlayout=\"vertical\"\n\t\t\tclassName={className}\n\t\t>\n\t\t\t<SelectBase\n\t\t\t\tid={inputId}\n\t\t\t\tisInvalid={isInvalid}\n\t\t\t\trequired={isRequired}\n\t\t\t\tfield={field}\n\t\t\t\tsize={size}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</SelectBase>\n\t\t</Field>\n\t)\n}\n\nSelectField.displayName = 'SelectField'\n\nexport { SelectField }\n"],"names":["SelectBase","isInvalid","isLoading","className","id","field","children","size","error","rest","jsx","classNames","s","SelectField","isRequired","isOptional","label","helperText","generatedId","useId","inputId","Field"],"mappings":";;;;;AAmBA,MAAMA,IAAa,CAAC;AAAA,EACnB,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACJ,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,IAAAN;AAAA,IACA,WAAWO;AAAA,MACVC,EAAE;AAAA,MACFA,EAAEL,CAAI;AAAA,MACN;AAAA,QACC,CAACK,EAAE,OAAO,GAAGX;AAAA,MAAA;AAAA,MAEdE;AAAA,IAAA;AAAA,IAED,oBAAkB,GAAGK,IAAQ,UAAU,aAAa,IAAIJ,CAAE;AAAA,IACzD,GAAGC;AAAA,IACH,GAAGI;AAAA,IAEH,UAAAH;AAAA,EAAA;AAAA,GAqBEO,IAAc,CAAC;AAAA,EACpB,WAAAZ;AAAA,EACA,WAAAC;AAAA,EACA,YAAAY;AAAA,EACA,YAAAC;AAAA,EACA,IAAAX;AAAA,EACA,OAAAY;AAAA,EACA,YAAAC;AAAA,EACA,OAAAT;AAAA,EACA,OAAAH;AAAA,EACA,UAAAC;AAAA,EACA,WAAAH;AAAA,EACA,MAAAI,IAAO;AAAA,EACP,GAAGE;AACJ,MAAwB;AACvB,QAAMS,IAAcC,EAAA,GACdC,IAAUhB,KAAMc;AAEtB,SACC,gBAAAR;AAAA,IAACW;AAAA,IAAA;AAAA,MACA,OAAAL;AAAA,MACA,YAAAC;AAAA,MACA,OAAAT;AAAA,MACA,YAAAM;AAAA,MACA,YAAAC;AAAA,MACA,IAAIK;AAAA,MACJ,QAAO;AAAA,MACP,WAAAjB;AAAA,MAEA,UAAA,gBAAAO;AAAA,QAACV;AAAA,QAAA;AAAA,UACA,IAAIoB;AAAA,UACJ,WAAAnB;AAAA,UACA,UAAUa;AAAA,UACV,OAAAT;AAAA,UACA,MAAAE;AAAA,UACC,GAAGE;AAAA,UAEH,UAAAH;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGH;AAEAO,EAAY,cAAc;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/form/select/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport type { HTMLProps, ReactNode } from 'react'\nimport { useId } from 'react'\nimport { Field } from '../field'\nimport s from './form-select.module.css'\n\ninterface SelectBaseProps {\n\tisInvalid?: boolean\n\tisLoading?: boolean\n\trequired?: boolean\n\tclassName?: string\n\tid: string\n\tfield: HTMLProps<HTMLSelectElement>\n\tchildren: ReactNode\n\tsize: 'medium' | 'large'\n\terror?: ReactNode\n\tdisabled?: boolean\n}\n\nconst SelectBase = ({\n\tisInvalid,\n\tisLoading,\n\tclassName,\n\tid,\n\tfield,\n\tchildren,\n\tsize,\n\terror,\n\t...rest\n}: SelectBaseProps) => {\n\treturn (\n\t\t<select\n\t\t\tid={id}\n\t\t\tclassName={classNames(\n\t\t\t\ts.select,\n\t\t\t\ts[size],\n\t\t\t\t{\n\t\t\t\t\t[s.invalid]: isInvalid,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\taria-describedby={`${error ? 'error' : 'helper-text'}-${id}`}\n\t\t\t{...field}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{children}\n\t\t</select>\n\t)\n}\n\ninterface SelectFieldProps {\n\tisInvalid?: boolean\n\tisLoading?: boolean\n\tisRequired?: boolean\n\tisOptional?: boolean\n\tid?: string\n\tlabel?: ReactNode\n\thelperText?: ReactNode\n\terror?: ReactNode\n\tfield: HTMLProps<HTMLSelectElement>\n\tchildren: ReactNode\n\tclassName?: string\n\tsize?: 'medium' | 'large'\n\tdisabled?: boolean\n\tmultiple?: boolean\n}\n\nconst SelectField = ({\n\tisInvalid,\n\tisLoading,\n\tisRequired,\n\tisOptional,\n\tid,\n\tlabel,\n\thelperText,\n\terror,\n\tfield,\n\tchildren,\n\tclassName,\n\tsize = 'medium',\n\t...rest\n}: SelectFieldProps) => {\n\tconst generatedId = useId()\n\tconst inputId = id ?? generatedId\n\n\treturn (\n\t\t<Field\n\t\t\tlabel={label}\n\t\t\thelperText={helperText}\n\t\t\terror={error}\n\t\t\tisRequired={isRequired}\n\t\t\tisOptional={isOptional}\n\t\t\tid={inputId}\n\t\t\tlayout=\"vertical\"\n\t\t\tclassName={className}\n\t\t>\n\t\t\t<SelectBase\n\t\t\t\tid={inputId}\n\t\t\t\tisInvalid={isInvalid}\n\t\t\t\trequired={isRequired}\n\t\t\t\tfield={field}\n\t\t\t\tsize={size}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</SelectBase>\n\t\t</Field>\n\t)\n}\n\nSelectField.displayName = 'SelectField'\n\nexport { SelectField }\n"],"names":["SelectBase","isInvalid","isLoading","className","id","field","children","size","error","rest","jsx","classNames","s","SelectField","isRequired","isOptional","label","helperText","generatedId","useId","inputId","Field"],"mappings":";;;;;AAmBA,MAAMA,IAAa,CAAC;AAAA,EACnB,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACJ,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,IAAAN;AAAA,IACA,WAAWO;AAAA,MACVC,EAAE;AAAA,MACFA,EAAEL,CAAI;AAAA,MACN;AAAA,QACC,CAACK,EAAE,OAAO,GAAGX;AAAA,MAAA;AAAA,MAEdE;AAAA,IAAA;AAAA,IAED,oBAAkB,GAAGK,IAAQ,UAAU,aAAa,IAAIJ,CAAE;AAAA,IACzD,GAAGC;AAAA,IACH,GAAGI;AAAA,IAEH,UAAAH;AAAA,EAAA;AAAA,GAsBEO,IAAc,CAAC;AAAA,EACpB,WAAAZ;AAAA,EACA,WAAAC;AAAA,EACA,YAAAY;AAAA,EACA,YAAAC;AAAA,EACA,IAAAX;AAAA,EACA,OAAAY;AAAA,EACA,YAAAC;AAAA,EACA,OAAAT;AAAA,EACA,OAAAH;AAAA,EACA,UAAAC;AAAA,EACA,WAAAH;AAAA,EACA,MAAAI,IAAO;AAAA,EACP,GAAGE;AACJ,MAAwB;AACvB,QAAMS,IAAcC,EAAA,GACdC,IAAUhB,KAAMc;AAEtB,SACC,gBAAAR;AAAA,IAACW;AAAA,IAAA;AAAA,MACA,OAAAL;AAAA,MACA,YAAAC;AAAA,MACA,OAAAT;AAAA,MACA,YAAAM;AAAA,MACA,YAAAC;AAAA,MACA,IAAIK;AAAA,MACJ,QAAO;AAAA,MACP,WAAAjB;AAAA,MAEA,UAAA,gBAAAO;AAAA,QAACV;AAAA,QAAA;AAAA,UACA,IAAIoB;AAAA,UACJ,WAAAnB;AAAA,UACA,UAAUa;AAAA,UACV,OAAAT;AAAA,UACA,MAAAE;AAAA,UACC,GAAGE;AAAA,UAEH,UAAAH;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGH;AAEAO,EAAY,cAAc;"}

package/components/icon-tile/style.module.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 $hds-icon-tile-sizes: ('small', 'medium', 'large');
 $hds-icon-tile-colors-products: (
 	'boundary',
@@ -78,24 +80,24 @@ $size-props: (
 
 @each $size in $hds-icon-tile-sizes {
 	.size-#{$size} {
-		width: map-get($size-props, $size, 'size');
-		height: map-get($size-props, $size, 'size');
-		border-radius: map-get($size-props, $size, 'border-radius');
+		width: map.get($size-props, $size, 'size');
+		height: map.get($size-props, $size, 'size');
+		border-radius: map.get($size-props, $size, 'border-radius');
 
 		.icon {
-			width: map-get($size-props, $size, 'icon-size');
-			height: map-get($size-props, $size, 'icon-size');
+			width: map.get($size-props, $size, 'icon-size');
+			height: map.get($size-props, $size, 'icon-size');
 		}
 
 		.logo {
-			width: map-get($size-props, $size, 'logo-size');
-			height: map-get($size-props, $size, 'logo-size');
+			width: map.get($size-props, $size, 'logo-size');
+			height: map.get($size-props, $size, 'logo-size');
 		}
 
 		.extra {
-			width: map-get($size-props, $size, 'extra-size');
-			height: map-get($size-props, $size, 'extra-size');
-			border-radius: map-get($size-props, $size, 'extra-border-radius');
+			width: map.get($size-props, $size, 'extra-size');
+			height: map.get($size-props, $size, 'extra-size');
+			border-radius: map.get($size-props, $size, 'extra-border-radius');
 		}
 	}
 }

package/components/inline-link/index.js

@@ -1,26 +1,27 @@
 import { jsxs as c, jsx as p } from "react/jsx-runtime";
-import f from "classnames";
-import { Interactive as I } from "../interactive/index.js";
+import I from "classnames";
+import { Interactive as d } from "../interactive/index.js";
 import i from "./inline-link.module.css.js";
-import { FlightIcon as d } from "../flight-icon/index.js";
+import { FlightIcon as f } from "../flight-icon/index.js";
 const g = ({
-  text: m,
-  color: o = "primary",
+  text: o,
+  color: s = "primary",
   icon: r,
   iconPosition: e = "trailing",
-  className: s,
-  isHrefExternal: t,
+  className: t,
+  isHrefExternal: l,
   ...a
 }) => {
-  const l = r || !t ? r : "external-link", n = l && /* @__PURE__ */ p(d, { name: l, size: 16, className: i.icon });
+  const m = r || !l ? r : "external-link", n = m && /* @__PURE__ */ p(f, { name: m, size: 16, className: i.icon });
   return /* @__PURE__ */ c(
-    I,
+    d,
     {
-      className: f(i["link-inline"], i[`color-${o}`], s),
+      className: I(i["link-inline"], i[`color-${s}`], t),
+      isHrefExternal: l,
       ...a,
       children: [
         n && e === "leading" && n,
-        m,
+        o,
         n && e === "trailing" && n
       ]
     }

package/components/inline-link/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/inline-link/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { Interactive } from '../interactive'\nimport s from './inline-link.module.css'\nimport type { FlightIconName } from '../flight-icon'\nimport { FlightIcon } from '../flight-icon'\n\ninterface InlineLinkProps {\n\t/**\n\t * There are two available colors for an `<InlineLink />`: primary and secondary.\n\t */\n\tcolor?: 'primary' | 'secondary'\n\t/**\n\t * Use this parameter to show an icon.\n\t */\n\ticon?: FlightIconName\n\t/**\n\t * Positions the icon before or after the text.\n\t */\n\ticonPosition?: 'leading' | 'trailing'\n\t/**\n\t * URL parameter that’s passed down to the `<a>` element.\n\t */\n\thref: string\n\t/**\n\t * Controls if the <a> link is external. For security reasons, we add the target=\"_blank\" and rel=\"noopener noreferrer\" attributes to it by default.\n\t * default: `false`\n\t */\n\tisHrefExternal?: boolean\n\t/**\n\t * The content of the <a> HTML element.\n\t */\n\ttext: string\n\t/**\n\t * Optional class name to add to the component.\n\t */\n\tclassName?: string\n\tprefetch?: boolean\n\tlocale?: string\n}\n\nconst InlineLink = ({\n\ttext,\n\tcolor = 'primary',\n\ticon,\n\ticonPosition = 'trailing',\n\tclassName,\n\tisHrefExternal,\n\t...props\n}: InlineLinkProps) => {\n\tconst resolvedIcon = icon || !isHrefExternal ? icon : 'external-link'\n\tconst iconElement = resolvedIcon && (\n\t\t<FlightIcon name={resolvedIcon} size={16} className={s.icon} />\n\t)\n\n\treturn (\n\t\t<Interactive\n\t\t\tclassName={classNames(s['link-inline'], s[`color-${color}`], className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{iconElement && iconPosition === 'leading' && iconElement}\n\t\t\t{text}\n\t\t\t{iconElement && iconPosition === 'trailing' && iconElement}\n\t\t</Interactive>\n\t)\n}\n\nInlineLink.displayName = 'InlineLink'\n\nexport type { InlineLinkProps }\nexport { InlineLink }\n"],"names":["InlineLink","text","color","icon","iconPosition","className","isHrefExternal","props","resolvedIcon","iconElement","jsx","FlightIcon","s","jsxs","Interactive","classNames"],"mappings":";;;;;AAwCA,MAAMA,IAAa,CAAC;AAAA,EACnB,MAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,MAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,GAAGC;AACJ,MAAuB;AACtB,QAAMC,IAAeL,KAAQ,CAACG,IAAiBH,IAAO,iBAChDM,IAAcD,KACnB,gBAAAE,EAACC,GAAA,EAAW,MAAMH,GAAc,MAAM,IAAI,WAAWI,EAAE,KAAA,CAAM;AAG9D,SACC,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,WAAWC,EAAWH,EAAE,aAAa,GAAGA,EAAE,SAASV,CAAK,EAAE,GAAGG,CAAS;AAAA,MACrE,GAAGE;AAAA,MAEH,UAAA;AAAA,QAAAE,KAAeL,MAAiB,aAAaK;AAAA,QAC7CR;AAAA,QACAQ,KAAeL,MAAiB,cAAcK;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlD;AAEAT,EAAW,cAAc;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/inline-link/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { Interactive } from '../interactive'\nimport s from './inline-link.module.css'\nimport type { FlightIconName } from '../flight-icon'\nimport { FlightIcon } from '../flight-icon'\n\ninterface InlineLinkProps {\n\t/**\n\t * There are two available colors for an `<InlineLink />`: primary and secondary.\n\t */\n\tcolor?: 'primary' | 'secondary'\n\t/**\n\t * Use this parameter to show an icon.\n\t */\n\ticon?: FlightIconName\n\t/**\n\t * Positions the icon before or after the text.\n\t */\n\ticonPosition?: 'leading' | 'trailing'\n\t/**\n\t * URL parameter that’s passed down to the `<a>` element.\n\t */\n\thref: string\n\t/**\n\t * Controls if the <a> link is external. For security reasons, we add the target=\"_blank\" and rel=\"noopener noreferrer\" attributes to it by default.\n\t * default: `false`\n\t */\n\tisHrefExternal?: boolean\n\t/**\n\t * The content of the <a> HTML element.\n\t */\n\ttext: string\n\t/**\n\t * Optional class name to add to the component.\n\t */\n\tclassName?: string\n\tprefetch?: boolean\n\tlocale?: string\n}\n\nconst InlineLink = ({\n\ttext,\n\tcolor = 'primary',\n\ticon,\n\ticonPosition = 'trailing',\n\tclassName,\n\tisHrefExternal,\n\t...props\n}: InlineLinkProps) => {\n\tconst resolvedIcon = icon || !isHrefExternal ? icon : 'external-link'\n\tconst iconElement = resolvedIcon && (\n\t\t<FlightIcon name={resolvedIcon} size={16} className={s.icon} />\n\t)\n\n\treturn (\n\t\t<Interactive\n\t\t\tclassName={classNames(s['link-inline'], s[`color-${color}`], className)}\n\t\t\tisHrefExternal={isHrefExternal}\n\t\t\t{...props}\n\t\t>\n\t\t\t{iconElement && iconPosition === 'leading' && iconElement}\n\t\t\t{text}\n\t\t\t{iconElement && iconPosition === 'trailing' && iconElement}\n\t\t</Interactive>\n\t)\n}\n\nInlineLink.displayName = 'InlineLink'\n\nexport type { InlineLinkProps }\nexport { InlineLink }\n"],"names":["InlineLink","text","color","icon","iconPosition","className","isHrefExternal","props","resolvedIcon","iconElement","jsx","FlightIcon","s","jsxs","Interactive","classNames"],"mappings":";;;;;AAwCA,MAAMA,IAAa,CAAC;AAAA,EACnB,MAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,MAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,GAAGC;AACJ,MAAuB;AACtB,QAAMC,IAAeL,KAAQ,CAACG,IAAiBH,IAAO,iBAChDM,IAAcD,KACnB,gBAAAE,EAACC,GAAA,EAAW,MAAMH,GAAc,MAAM,IAAI,WAAWI,EAAE,KAAA,CAAM;AAG9D,SACC,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,WAAWC,EAAWH,EAAE,aAAa,GAAGA,EAAE,SAASV,CAAK,EAAE,GAAGG,CAAS;AAAA,MACtE,gBAAAC;AAAA,MACC,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAAE,KAAeL,MAAiB,aAAaK;AAAA,QAC7CR;AAAA,QACAQ,KAAeL,MAAiB,cAAcK;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlD;AAEAT,EAAW,cAAc;"}

package/components/modal/modal.module.css

@@ -1,4 +1,9 @@
 .modal {
+	display: flex;
+	overflow: scroll;
+	border-radius: 8px;
+	padding: 0;
+	border: 0;
 	position: fixed;
 	z-index: 50;
 	height: fit-content;

package/components/tabs/index.js

@@ -1,22 +1,22 @@
 "use client";
-import { jsx as b, jsxs as M } from "react/jsx-runtime";
-import I from "classnames";
-import { useState as i, useRef as N, useCallback as m, useEffect as u, useMemo as O } from "react";
+import { jsx as u, jsxs as M } from "react/jsx-runtime";
+import x from "classnames";
+import { useState as a, useRef as T, useCallback as f, useEffect as d, useMemo as O } from "react";
 import { TabPanel as S } from "./tab-panel.js";
 import { Tab as U } from "./tab.js";
 import { useTabsContext as q, TabsContext as B } from "./use-tabs-context.js";
-import p from "./tabs.module.scss.js";
+import m from "./tabs.module.scss.js";
 const F = ({
-  children: h,
-  onClickTab: n,
-  initialSelectedTabIndex: c = 0,
-  size: x = "medium",
-  className: E,
+  children: p,
+  onClickTab: r,
+  initialSelectedTabIndex: n = 0,
+  size: w = "medium",
+  className: I,
   ...k
 }) => {
-  const [l, f] = i(
-    c
-  ), s = N([]), d = N([]), [r, A] = i([]), [L, R] = i([]), [W, C] = i(0), [K, V] = i(0), a = N(null), y = m((t) => {
+  const [i, b] = a(
+    n
+  ), s = T([]), l = T([]), [o, A] = a([]), [L, E] = a([]), [R, W] = a(0), [C, K] = a(0), c = T(null), h = f((t) => {
     const e = s.current[t]?.parentNode;
     e && e.scrollIntoView({
       behavior: "smooth",
@@ -24,91 +24,89 @@ const F = ({
       inline: "nearest"
     });
   }, []);
-  u(() => {
-    f(c);
-  }, [c]), u(() => {
-    const t = s.current[l]?.parentElement;
-    if (t && a.current) {
-      const e = t.offsetLeft, o = t.offsetWidth;
-      V(e), C(o), a.current.scrollTo({
+  d(() => {
+    b(n);
+  }, [n]), d(() => {
+    const t = s.current[i]?.parentElement;
+    if (t && c.current) {
+      const e = t.offsetLeft, v = t.offsetWidth;
+      K(e), W(v), c.current.scrollTo({
         left: e,
         behavior: "smooth"
       });
     }
-  }, [s, l, y, a]), u(() => {
-    A(s.current.map((o) => o.id));
-    let t = 0, e = 0;
-    if (s.current.forEach((o, T) => {
-      o.hasAttribute("data-is-selected") && (t = T, e++);
-    }), e > 1)
-      throw new Error("Only one tab may use isSelected argument");
-    f(t);
-  }, [s]), u(() => {
-    R(d.current.map((t) => t.id));
-  }, [d]);
-  const P = m(
+  }, [s, i, h, c]), d(() => {
+    A(s.current.map((e) => e.id));
+    let t = 0;
+    s.current.forEach((e) => {
+      e.hasAttribute("data-is-selected") && t++;
+    }), t > 1 && console.error("Only one tab may use isSelected argument");
+  }, [s]), d(() => {
+    E(l.current.map((t) => t.id));
+  }, [l]);
+  const P = f(
     (t, e) => {
-      f(t), y(t), typeof n == "function" && n(e, t);
+      b(t), h(t), typeof r == "function" && r(e, t);
     },
-    [n, y]
-  ), w = m(
+    [r, h]
+  ), y = f(
     (t, e) => {
       e.preventDefault(), s.current[t].focus();
     },
     []
-  ), g = m(
+  ), g = f(
     (t, e) => {
-      const o = "ArrowLeft", T = "ArrowRight", $ = "Enter", D = " ";
-      if (e.key === T) {
-        const v = (t + 1) % r.length;
-        w(v, e);
-      } else if (e.key === o) {
-        const v = (t + r.length - 1) % r.length;
-        w(v, e);
-      } else (e.key === $ || e.key === D) && f(t);
+      const v = "ArrowLeft", j = "ArrowRight", $ = "Enter", D = " ";
+      if (e.key === j) {
+        const N = (t + 1) % o.length;
+        y(N, e);
+      } else if (e.key === v) {
+        const N = (t + o.length - 1) % o.length;
+        y(N, e);
+      } else (e.key === $ || e.key === D) && b(t);
     },
-    [w, r.length]
-  ), j = O(
+    [y, o.length]
+  ), V = O(
     () => ({
       tabNodes: s,
-      tabIds: r,
-      panelNodes: d,
+      tabIds: o,
+      panelNodes: l,
       panelIds: L,
-      selectedTabIndex: l,
+      selectedTabIndex: i,
       onClick: P,
       onKeyUp: g,
-      size: x,
-      tabsListRef: a
+      size: w,
+      tabsListRef: c
     }),
     [
       s,
-      r,
-      d,
-      L,
+      o,
       l,
+      L,
+      i,
       P,
       g,
-      x,
-      a
+      w,
+      c
     ]
   );
-  return /* @__PURE__ */ b(B.Provider, { value: j, children: /* @__PURE__ */ b(
+  return /* @__PURE__ */ u(B.Provider, { value: V, children: /* @__PURE__ */ u(
     "div",
     {
-      className: I(p.tabs, E),
+      className: x(m.tabs, I),
       ...k,
       style: {
-        "--indicator-left-pos": `${K}px`,
-        "--indicator-width": `${W}px`
+        "--indicator-left-pos": `${C}px`,
+        "--indicator-width": `${R}px`
       },
-      children: h
+      children: p
     }
   ) });
-}, G = ({ children: h, className: n }) => {
-  const { tabsListRef: c } = q();
-  return /* @__PURE__ */ b("div", { className: I(p["tablist-wrapper"], n), children: /* @__PURE__ */ M("ul", { className: p.tablist, role: "tablist", ref: c, children: [
-    h,
-    /* @__PURE__ */ b("li", { className: p.indicator, role: "presentation" })
+}, G = ({ children: p, className: r }) => {
+  const { tabsListRef: n } = q();
+  return /* @__PURE__ */ u("div", { className: x(m["tablist-wrapper"], r), children: /* @__PURE__ */ M("ul", { className: m.tablist, role: "tablist", ref: n, children: [
+    p,
+    /* @__PURE__ */ u("li", { className: m.indicator, role: "presentation" })
   ] }) });
 }, z = { Provider: F, TabList: G, Panel: S, Tab: U };
 export {

package/components/tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/tabs/index.tsx"],"sourcesContent":["'use client'\n\nimport classNames from 'classnames'\nimport {\n\ttype ReactNode,\n\ttype HTMLAttributes,\n\ttype KeyboardEvent,\n\ttype MouseEvent,\n\tuseState,\n\tuseMemo,\n\tuseRef,\n\tuseEffect,\n\tuseCallback,\n} from 'react'\nimport { TabPanel } from './tab-panel'\nimport { Tab } from './tab'\nimport { TabsContext, useTabsContext } from './use-tabs-context'\nimport s from './tabs.module.scss'\n\nexport interface TabsProps extends HTMLAttributes<HTMLDivElement> {\n\tonClickTab?: (event: MouseEvent<HTMLButtonElement>, tabIndex: number) => void\n\tinitialSelectedTabIndex?: number\n\tsize?: 'medium' | 'large'\n}\n\nconst Provider = ({\n\tchildren,\n\tonClickTab,\n\tinitialSelectedTabIndex = 0,\n\tsize = 'medium',\n\tclassName,\n\t...rest\n}: TabsProps) => {\n\tconst [selectedTabIndex, setSelectedTabIndex] = useState(\n\t\tinitialSelectedTabIndex\n\t)\n\tconst tabNodes = useRef<Array<HTMLButtonElement>>([])\n\tconst panelNodes = useRef<Array<HTMLDivElement>>([])\n\tconst [tabIds, setTabIds] = useState<Array<string>>([])\n\tconst [panelIds, setPanelIds] = useState<Array<string>>([])\n\tconst [indicatorWidth, setIndicatorWidth] = useState(0)\n\tconst [indicatorLeftPosition, setIndicatorLeftPosition] = useState(0)\n\tconst tabsListRef = useRef<HTMLUListElement | null>(null)\n\n\tconst scrollIntoView = useCallback((tabIndex: number) => {\n\t\t// Scroll Tab into view if it's out of view\n\t\tconst parentNode = tabNodes.current[tabIndex]\n\t\t\t?.parentNode as HTMLElement | null\n\t\tif (parentNode) {\n\t\t\tparentNode.scrollIntoView({\n\t\t\t\tbehavior: 'smooth',\n\t\t\t\tblock: 'nearest',\n\t\t\t\tinline: 'nearest',\n\t\t\t})\n\t\t}\n\t}, [])\n\n\tuseEffect(() => {\n\t\tsetSelectedTabIndex(initialSelectedTabIndex)\n\t}, [initialSelectedTabIndex])\n\n\tuseEffect(() => {\n\t\tconst tabElem = tabNodes.current[selectedTabIndex]?.parentElement\n\t\tif (tabElem && tabsListRef.current) {\n\t\t\tconst tabLeftPos = tabElem.offsetLeft\n\t\t\tconst tabWidth = tabElem.offsetWidth\n\t\t\tsetIndicatorLeftPosition(tabLeftPos)\n\t\t\tsetIndicatorWidth(tabWidth)\n\t\t\ttabsListRef.current.scrollTo({\n\t\t\t\tleft: tabLeftPos,\n\t\t\t\tbehavior: 'smooth',\n\t\t\t})\n\t\t}\n\t}, [tabNodes, selectedTabIndex, scrollIntoView, tabsListRef])\n\n\tuseEffect(() => {\n\t\tsetTabIds(tabNodes.current.map((tab) => tab.id))\n\t\tlet initialTabIndex = 0\n\t\tlet selectedCount = 0\n\n\t\ttabNodes.current.forEach((tabElement, index) => {\n\t\t\tif (tabElement.hasAttribute('data-is-selected')) {\n\t\t\t\tinitialTabIndex = index\n\t\t\t\tselectedCount++\n\t\t\t}\n\t\t})\n\n\t\tif (selectedCount > 1) {\n\t\t\tthrow new Error('Only one tab may use isSelected argument')\n\t\t}\n\n\t\tsetSelectedTabIndex(initialTabIndex)\n\t}, [tabNodes])\n\n\tuseEffect(() => {\n\t\tsetPanelIds(panelNodes.current.map((tab) => tab.id))\n\t}, [panelNodes])\n\n\tconst onClick = useCallback(\n\t\t(tabIndex: number, event: MouseEvent<HTMLButtonElement>) => {\n\t\t\tsetSelectedTabIndex(tabIndex)\n\n\t\t\tscrollIntoView(tabIndex)\n\n\t\t\t// invoke the callback function if it's provided as argument\n\t\t\tif (typeof onClickTab === 'function') {\n\t\t\t\tonClickTab(event, tabIndex)\n\t\t\t}\n\t\t},\n\t\t[onClickTab, scrollIntoView]\n\t)\n\n\t// Focus tab for keyboard & mouse navigation:\n\tconst focusTab = useCallback(\n\t\t(tabIndex: number, e: KeyboardEvent<HTMLButtonElement>) => {\n\t\t\te.preventDefault()\n\t\t\ttabNodes.current[tabIndex].focus()\n\t\t},\n\t\t[]\n\t)\n\n\tconst onKeyUp = useCallback(\n\t\t(tabIndex: number, e: KeyboardEvent<HTMLButtonElement>) => {\n\t\t\tconst leftArrow = 'ArrowLeft'\n\t\t\tconst rightArrow = 'ArrowRight'\n\t\t\tconst enterKey = 'Enter'\n\t\t\tconst spaceKey = ' '\n\n\t\t\tif (e.key === rightArrow) {\n\t\t\t\tconst nextTabIndex = (tabIndex + 1) % tabIds.length\n\t\t\t\tfocusTab(nextTabIndex, e)\n\t\t\t} else if (e.key === leftArrow) {\n\t\t\t\tconst prevTabIndex = (tabIndex + tabIds.length - 1) % tabIds.length\n\t\t\t\tfocusTab(prevTabIndex, e)\n\t\t\t} else if (e.key === enterKey || e.key === spaceKey) {\n\t\t\t\tsetSelectedTabIndex(tabIndex)\n\t\t\t}\n\t\t},\n\t\t[focusTab, tabIds.length]\n\t)\n\n\tconst contextValue = useMemo(\n\t\t() => ({\n\t\t\ttabNodes,\n\t\t\ttabIds,\n\t\t\tpanelNodes,\n\t\t\tpanelIds,\n\t\t\tselectedTabIndex,\n\t\t\tonClick,\n\t\t\tonKeyUp,\n\t\t\tsize,\n\t\t\ttabsListRef,\n\t\t}),\n\t\t[\n\t\t\ttabNodes,\n\t\t\ttabIds,\n\t\t\tpanelNodes,\n\t\t\tpanelIds,\n\t\t\tselectedTabIndex,\n\t\t\tonClick,\n\t\t\tonKeyUp,\n\t\t\tsize,\n\t\t\ttabsListRef,\n\t\t]\n\t)\n\n\treturn (\n\t\t<TabsContext.Provider value={contextValue}>\n\t\t\t<div\n\t\t\t\tclassName={classNames(s.tabs, className)}\n\t\t\t\t{...rest}\n\t\t\t\tstyle={{\n\t\t\t\t\t['--indicator-left-pos' as string]: `${indicatorLeftPosition}px`,\n\t\t\t\t\t['--indicator-width' as string]: `${indicatorWidth}px`,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</TabsContext.Provider>\n\t)\n}\n\ninterface TabsListProps {\n\t/**\n\t * `<Tabs.Tab />` as children\n\t */\n\tchildren: ReactNode\n\tclassName?: string\n}\n\nconst TabList = ({ children, className }: TabsListProps) => {\n\tconst { tabsListRef } = useTabsContext()\n\treturn (\n\t\t<div className={classNames(s['tablist-wrapper'], className)}>\n\t\t\t<ul className={s.tablist} role=\"tablist\" ref={tabsListRef}>\n\t\t\t\t{children}\n\t\t\t\t<li className={s.indicator} role=\"presentation\"></li>\n\t\t\t</ul>\n\t\t</div>\n\t)\n}\n\nconst Tabs = { Provider, TabList, Panel: TabPanel, Tab }\n\nexport type { TabsListProps }\nexport { Tabs }\n"],"names":["Provider","children","onClickTab","initialSelectedTabIndex","size","className","rest","selectedTabIndex","setSelectedTabIndex","useState","tabNodes","useRef","panelNodes","tabIds","setTabIds","panelIds","setPanelIds","indicatorWidth","setIndicatorWidth","indicatorLeftPosition","tabsListRef","scrollIntoView","useCallback","tabIndex","parentNode","useEffect","tabElem","tabLeftPos","tabWidth","setIndicatorLeftPosition","tab","initialTabIndex","selectedCount","index","tabElement","onClick","event","focusTab","onKeyUp","leftArrow","rightArrow","enterKey","spaceKey","nextTabIndex","prevTabIndex","contextValue","useMemo","jsx","TabsContext","classNames","s","jsxs"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/tabs/index.tsx"],"sourcesContent":["'use client'\n\nimport classNames from 'classnames'\nimport {\n\ttype ReactNode,\n\ttype HTMLAttributes,\n\ttype KeyboardEvent,\n\ttype MouseEvent,\n\tuseState,\n\tuseMemo,\n\tuseRef,\n\tuseEffect,\n\tuseCallback,\n} from 'react'\nimport { TabPanel } from './tab-panel'\nimport { Tab } from './tab'\nimport { TabsContext, useTabsContext } from './use-tabs-context'\nimport s from './tabs.module.scss'\n\nexport interface TabsProps extends HTMLAttributes<HTMLDivElement> {\n\tonClickTab?: (event: MouseEvent<HTMLButtonElement>, tabIndex: number) => void\n\tinitialSelectedTabIndex?: number\n\tsize?: 'medium' | 'large'\n}\n\nconst Provider = ({\n\tchildren,\n\tonClickTab,\n\tinitialSelectedTabIndex = 0,\n\tsize = 'medium',\n\tclassName,\n\t...rest\n}: TabsProps) => {\n\tconst [selectedTabIndex, setSelectedTabIndex] = useState(\n\t\tinitialSelectedTabIndex\n\t)\n\tconst tabNodes = useRef<Array<HTMLButtonElement>>([])\n\tconst panelNodes = useRef<Array<HTMLDivElement>>([])\n\tconst [tabIds, setTabIds] = useState<Array<string>>([])\n\tconst [panelIds, setPanelIds] = useState<Array<string>>([])\n\tconst [indicatorWidth, setIndicatorWidth] = useState(0)\n\tconst [indicatorLeftPosition, setIndicatorLeftPosition] = useState(0)\n\tconst tabsListRef = useRef<HTMLUListElement | null>(null)\n\n\tconst scrollIntoView = useCallback((tabIndex: number) => {\n\t\t// Scroll Tab into view if it's out of view\n\t\tconst parentNode = tabNodes.current[tabIndex]\n\t\t\t?.parentNode as HTMLElement | null\n\t\tif (parentNode) {\n\t\t\tparentNode.scrollIntoView({\n\t\t\t\tbehavior: 'smooth',\n\t\t\t\tblock: 'nearest',\n\t\t\t\tinline: 'nearest',\n\t\t\t})\n\t\t}\n\t}, [])\n\n\tuseEffect(() => {\n\t\tsetSelectedTabIndex(initialSelectedTabIndex)\n\t}, [initialSelectedTabIndex])\n\n\tuseEffect(() => {\n\t\tconst tabElem = tabNodes.current[selectedTabIndex]?.parentElement\n\t\tif (tabElem && tabsListRef.current) {\n\t\t\tconst tabLeftPos = tabElem.offsetLeft\n\t\t\tconst tabWidth = tabElem.offsetWidth\n\t\t\tsetIndicatorLeftPosition(tabLeftPos)\n\t\t\tsetIndicatorWidth(tabWidth)\n\t\t\ttabsListRef.current.scrollTo({\n\t\t\t\tleft: tabLeftPos,\n\t\t\t\tbehavior: 'smooth',\n\t\t\t})\n\t\t}\n\t}, [tabNodes, selectedTabIndex, scrollIntoView, tabsListRef])\n\n\tuseEffect(() => {\n\t\tsetTabIds(tabNodes.current.map((tab) => tab.id))\n\n\t\tlet selectedCount = 0\n\n\t\ttabNodes.current.forEach((tabElement) => {\n\t\t\tif (tabElement.hasAttribute('data-is-selected')) {\n\t\t\t\tselectedCount++\n\t\t\t}\n\t\t})\n\n\t\tif (selectedCount > 1) {\n\t\t\tconsole.error('Only one tab may use isSelected argument')\n\t\t}\n\t}, [tabNodes])\n\n\tuseEffect(() => {\n\t\tsetPanelIds(panelNodes.current.map((tab) => tab.id))\n\t}, [panelNodes])\n\n\tconst onClick = useCallback(\n\t\t(tabIndex: number, event: MouseEvent<HTMLButtonElement>) => {\n\t\t\tsetSelectedTabIndex(tabIndex)\n\n\t\t\tscrollIntoView(tabIndex)\n\n\t\t\t// invoke the callback function if it's provided as argument\n\t\t\tif (typeof onClickTab === 'function') {\n\t\t\t\tonClickTab(event, tabIndex)\n\t\t\t}\n\t\t},\n\t\t[onClickTab, scrollIntoView]\n\t)\n\n\t// Focus tab for keyboard & mouse navigation:\n\tconst focusTab = useCallback(\n\t\t(tabIndex: number, e: KeyboardEvent<HTMLButtonElement>) => {\n\t\t\te.preventDefault()\n\t\t\ttabNodes.current[tabIndex].focus()\n\t\t},\n\t\t[]\n\t)\n\n\tconst onKeyUp = useCallback(\n\t\t(tabIndex: number, e: KeyboardEvent<HTMLButtonElement>) => {\n\t\t\tconst leftArrow = 'ArrowLeft'\n\t\t\tconst rightArrow = 'ArrowRight'\n\t\t\tconst enterKey = 'Enter'\n\t\t\tconst spaceKey = ' '\n\n\t\t\tif (e.key === rightArrow) {\n\t\t\t\tconst nextTabIndex = (tabIndex + 1) % tabIds.length\n\t\t\t\tfocusTab(nextTabIndex, e)\n\t\t\t} else if (e.key === leftArrow) {\n\t\t\t\tconst prevTabIndex = (tabIndex + tabIds.length - 1) % tabIds.length\n\t\t\t\tfocusTab(prevTabIndex, e)\n\t\t\t} else if (e.key === enterKey || e.key === spaceKey) {\n\t\t\t\tsetSelectedTabIndex(tabIndex)\n\t\t\t}\n\t\t},\n\t\t[focusTab, tabIds.length]\n\t)\n\n\tconst contextValue = useMemo(\n\t\t() => ({\n\t\t\ttabNodes,\n\t\t\ttabIds,\n\t\t\tpanelNodes,\n\t\t\tpanelIds,\n\t\t\tselectedTabIndex,\n\t\t\tonClick,\n\t\t\tonKeyUp,\n\t\t\tsize,\n\t\t\ttabsListRef,\n\t\t}),\n\t\t[\n\t\t\ttabNodes,\n\t\t\ttabIds,\n\t\t\tpanelNodes,\n\t\t\tpanelIds,\n\t\t\tselectedTabIndex,\n\t\t\tonClick,\n\t\t\tonKeyUp,\n\t\t\tsize,\n\t\t\ttabsListRef,\n\t\t]\n\t)\n\n\treturn (\n\t\t<TabsContext.Provider value={contextValue}>\n\t\t\t<div\n\t\t\t\tclassName={classNames(s.tabs, className)}\n\t\t\t\t{...rest}\n\t\t\t\tstyle={{\n\t\t\t\t\t['--indicator-left-pos' as string]: `${indicatorLeftPosition}px`,\n\t\t\t\t\t['--indicator-width' as string]: `${indicatorWidth}px`,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</TabsContext.Provider>\n\t)\n}\n\ninterface TabsListProps {\n\t/**\n\t * `<Tabs.Tab />` as children\n\t */\n\tchildren: ReactNode\n\tclassName?: string\n}\n\nconst TabList = ({ children, className }: TabsListProps) => {\n\tconst { tabsListRef } = useTabsContext()\n\treturn (\n\t\t<div className={classNames(s['tablist-wrapper'], className)}>\n\t\t\t<ul className={s.tablist} role=\"tablist\" ref={tabsListRef}>\n\t\t\t\t{children}\n\t\t\t\t<li className={s.indicator} role=\"presentation\"></li>\n\t\t\t</ul>\n\t\t</div>\n\t)\n}\n\nconst Tabs = { Provider, TabList, Panel: TabPanel, Tab }\n\nexport type { TabsListProps }\nexport { Tabs }\n"],"names":["Provider","children","onClickTab","initialSelectedTabIndex","size","className","rest","selectedTabIndex","setSelectedTabIndex","useState","tabNodes","useRef","panelNodes","tabIds","setTabIds","panelIds","setPanelIds","indicatorWidth","setIndicatorWidth","indicatorLeftPosition","tabsListRef","scrollIntoView","useCallback","tabIndex","parentNode","useEffect","tabElem","tabLeftPos","tabWidth","setIndicatorLeftPosition","tab","selectedCount","onClick","event","focusTab","onKeyUp","leftArrow","rightArrow","enterKey","spaceKey","nextTabIndex","prevTabIndex","contextValue","useMemo","jsx","TabsContext","classNames","s","jsxs"],"mappings":"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"}

package/index.js

@@ -3,14 +3,14 @@ import { BADGE_COLORS as p, BADGE_SIZES as m, BADGE_TYPES as x, Badge as f } fro
 import { BadgeCount as i } from "./components/badge-count/index.js";
 import { Alert as n, AlertActions as l, AlertButton as T, AlertStandaloneLink as C } from "./components/alert/index.js";
 import { Breadcrumbs as S } from "./components/breadcrumbs/index.js";
-import { BUTTON_COLORS as A, BUTTON_ICON_POSITIONS as s, BUTTON_SIZES as L, Button as c } from "./components/button/index.js";
+import { BUTTON_COLORS as L, BUTTON_ICON_POSITIONS as c, BUTTON_SIZES as s, Button as A } from "./components/button/index.js";
 import { Card as _, CardContent as P } from "./components/card/index.js";
 import { CodeBlock as B } from "./components/code-block/index.js";
 import { DisclosurePrimitive as D } from "./components/disclosure-primitive/index.js";
 import { useDisclosurePrimitive as R } from "./components/disclosure-primitive/use-disclosure-primitive.js";
 import { Dropdown as F } from "./components/dropdown/index.js";
 import { FLIGHT_ICON_SIZES as b, FlightIcon as k } from "./components/flight-icon/index.js";
-import { CheckboxBase as M, CheckboxField as v, CheckboxGroup as Z } from "./components/form/checkbox/index.js";
+import { CheckboxBase as v, CheckboxField as M, CheckboxGroup as Z } from "./components/form/checkbox/index.js";
 import { Error as H } from "./components/form/error/index.js";
 import { Field as Y } from "./components/form/field/index.js";
 import { Fieldset as w } from "./components/form/fieldset/index.js";
@@ -24,14 +24,14 @@ import { RadioCard as ao } from "./components/form/radio-card/index.js";
 import { SelectField as no } from "./components/form/select/index.js";
 import { SuperSelectField as To } from "./components/form/super-select/index.js";
 import { TextInput as Oo, TextInputBase as So } from "./components/form/text-input/index.js";
-import { TextAreaField as Ao } from "./components/form/textarea/index.js";
-import { ToggleBase as Lo, ToggleField as co, ToggleGroup as Io } from "./components/form/toggle/index.js";
+import { TextAreaField as Lo } from "./components/form/textarea/index.js";
+import { ToggleBase as so, ToggleField as Ao, ToggleGroup as Io } from "./components/form/toggle/index.js";
 import { IconTile as Po } from "./components/icon-tile/index.js";
 import { InlineLink as Bo } from "./components/inline-link/index.js";
 import { MDSButton as Do } from "./components/legacy-button/index.js";
 import { ModalProvider as Ro } from "./components/modal/index.js";
 import { Separator as Fo } from "./components/separator/index.js";
-import { STANDALONE_LINK_COLORS as bo, STANDALONE_LINK_ICON_POSITIONS as ko, STANDALONE_LINK_SIZES as ho, StandaloneLink as Mo } from "./components/standalone-link/index.js";
+import { STANDALONE_LINK_COLORS as bo, STANDALONE_LINK_ICON_POSITIONS as ko, STANDALONE_LINK_SIZES as ho, StandaloneLink as vo } from "./components/standalone-link/index.js";
 import { Table as Zo } from "./components/table/index.js";
 import { getDensity as Ho, getHorizontalAlignment as Ko, getScope as Yo, getVerticalAlignment as zo } from "./components/table/utils.js";
 import { Tabs as Xo } from "./components/tabs/index.js";
@@ -44,18 +44,20 @@ import { CardPrimitives as xr } from "./patterns/card/primitives.js";
 import { CopyButton as ar } from "./patterns/copy-button/index.js";
 import { LAYOUT_APPEARANCES as dr, LAYOUT_BACKGROUNDS as nr, LAYOUT_PADDING as lr, Layout as Tr, normalizeLayoutProps as Cr } from "./patterns/layout/index.js";
 import { ProductBadge as Sr } from "./patterns/product-badge/index.js";
-import { PRODUCT_LOGO_COLORS as Ar, PRODUCT_LOGO_PRODUCTS as sr, PRODUCT_LOGO_SIZES as Lr, ProductLogo as cr, normalizeProductLogoProps as Ir } from "./patterns/product-logo/index.js";
+import { PRODUCT_LOGO_COLORS as Lr, PRODUCT_LOGO_PRODUCTS as cr, PRODUCT_LOGO_SIZES as sr, ProductLogo as Ar, normalizeProductLogoProps as Ir } from "./patterns/product-logo/index.js";
 import { RelatedContent as Pr } from "./patterns/related-content/index.js";
 import { useLarge as Br, useMedium as Nr, useMediumUp as Dr, useSmall as Er } from "./utils/hooks/use-screen-size.js";
 import { MDSProvider as Gr } from "./utils/mds-context/index.js";
 import { AccordionContent as Ur, AccordionItem as br, AccordionToggle as kr } from "./components/accordion/item/index.js";
-import { RadioCardGroup as Mr } from "./components/form/radio-card/group.js";
+import { RadioCardGroup as vr } from "./components/form/radio-card/group.js";
 import { useModal as Zr } from "./components/modal/use-modal.js";
 import { NewsroomCard as Hr } from "./patterns/card/newsroom-card/index.js";
 import { PersonCard as Yr } from "./patterns/card/person-card/index.js";
 import { PromoCard as wr } from "./patterns/card/promo-card/index.js";
 import { ResourceCard as Vr } from "./patterns/card/resource-card/index.js";
 import { UnifiedCard as jr } from "./patterns/card/unified-card/index.js";
+import { LocaleProvider as Jr } from "./utils/i18n/helpers/locale-provider.js";
+import { useLocale as $r } from "./utils/i18n/helpers/use-locale.js";
 export {
   e as Accordion,
   Ur as AccordionContent,
@@ -68,19 +70,19 @@ export {
   p as BADGE_COLORS,
   m as BADGE_SIZES,
   x as BADGE_TYPES,
-  A as BUTTON_COLORS,
-  s as BUTTON_ICON_POSITIONS,
-  L as BUTTON_SIZES,
+  L as BUTTON_COLORS,
+  c as BUTTON_ICON_POSITIONS,
+  s as BUTTON_SIZES,
   f as Badge,
   i as BadgeCount,
   or as BarChart,
   S as Breadcrumbs,
-  c as Button,
+  A as Button,
   _ as Card,
   P as CardContent,
   xr as CardPrimitives,
-  M as CheckboxBase,
-  v as CheckboxField,
+  v as CheckboxBase,
+  M as CheckboxField,
   Z as CheckboxGroup,
   B as CodeBlock,
   ar as CopyButton,
@@ -104,21 +106,22 @@ export {
   oo as Label,
   Tr as Layout,
   eo as Legend,
+  Jr as LocaleProvider,
   Do as MDSButton,
   Gr as MDSProvider,
   Ro as ModalProvider,
   Hr as NewsroomCard,
-  Ar as PRODUCT_LOGO_COLORS,
-  sr as PRODUCT_LOGO_PRODUCTS,
-  Lr as PRODUCT_LOGO_SIZES,
+  Lr as PRODUCT_LOGO_COLORS,
+  cr as PRODUCT_LOGO_PRODUCTS,
+  sr as PRODUCT_LOGO_SIZES,
   pr as PartnerCard,
   Yr as PersonCard,
   Sr as ProductBadge,
-  cr as ProductLogo,
+  Ar as ProductLogo,
   wr as PromoCard,
   po as RadioBase,
   ao as RadioCard,
-  Mr as RadioCardGroup,
+  vr as RadioCardGroup,
   mo as RadioField,
   xo as RadioGroup,
   Pr as RelatedContent,
@@ -128,18 +131,18 @@ export {
   ho as STANDALONE_LINK_SIZES,
   no as SelectField,
   Fo as Separator,
-  Mo as StandaloneLink,
+  vo as StandaloneLink,
   To as SuperSelectField,
   qo as TEXT_COLORS,
   Jo as TEXT_WEIGHTS,
   Zo as Table,
   Xo as Tabs,
   Qo as Text,
-  Ao as TextAreaField,
+  Lo as TextAreaField,
   Oo as TextInput,
   So as TextInputBase,
-  Lo as ToggleBase,
-  co as ToggleField,
+  so as ToggleBase,
+  Ao as ToggleField,
   Io as ToggleGroup,
   jr as UnifiedCard,
   Ho as getDensity,
@@ -150,6 +153,7 @@ export {
   Ir as normalizeProductLogoProps,
   R as useDisclosurePrimitive,
   Br as useLarge,
+  $r as useLocale,
   Nr as useMedium,
   Dr as useMediumUp,
   Zr as useModal,

package/index.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/mds-react",
-  "version": "0.9.4",
+  "version": "0.9.6",
   "description": "Materia Design System React components",
   "author": "HashiCorp",
   "license": "MPL-2.0",