@hashicorp/mds-react 0.9.3 → 0.9.4

package/components/form/super-select/index.js

@@ -0,0 +1,170 @@
+import { jsx as e, jsxs as m, Fragment as B } from "react/jsx-runtime";
+import { useId as F } from "react";
+import s from "classnames";
+import { Field as L } from "../field/index.js";
+import { FlightIcon as d } from "../../flight-icon/index.js";
+import { ComboBox as l } from "../../combo-box-primitive/index.js";
+import r from "./form-super-select.module.css.js";
+const O = ({
+  children: i,
+  onChangeSelectedOption: t,
+  onChangeVFocusedOption: n
+}) => /* @__PURE__ */ e(
+  l.Root,
+  {
+    onChangeSelectedOption: t,
+    onChangeVFocusedOption: n,
+    children: /* @__PURE__ */ e("div", { className: r.root, children: i })
+  }
+), R = ({ className: i }) => /* @__PURE__ */ e(l.Trigger, { className: s(r.trigger, i), children: /* @__PURE__ */ e(l.Value, {}) }), T = ({ children: i }) => /* @__PURE__ */ e(l.Popover, { className: r.popover, children: i }), j = ({
+  placeholder: i = "Search",
+  value: t,
+  onChange: n,
+  onBlur: c
+}) => /* @__PURE__ */ e("div", { className: r["search-input-wrapper"], children: /* @__PURE__ */ e(
+  l.SearchInput,
+  {
+    placeholder: i,
+    value: t,
+    onChange: n,
+    onBlur: c
+  }
+) }), k = ({
+  label: i,
+  children: t,
+  className: n,
+  maxHeight: c,
+  onScroll: o
+}) => /* @__PURE__ */ e(
+  l.List,
+  {
+    label: i,
+    className: s(r.list, n),
+    maxHeight: c,
+    onScroll: o,
+    children: t
+  }
+), C = ({
+  value: i,
+  label: t,
+  isLoading: n,
+  icon: c,
+  className: o,
+  trailingIcon: p
+}) => /* @__PURE__ */ e(
+  l.Item,
+  {
+    value: i,
+    label: t,
+    className: s(r.option, o),
+    children: n ? /* @__PURE__ */ m("div", { className: r["interactive-loading-wrapper"], children: [
+      /* @__PURE__ */ e(
+        "div",
+        {
+          className: s(
+            r["interactive-icon"],
+            r["interactive-icon-leading"]
+          ),
+          children: /* @__PURE__ */ e(d, { name: "loading", isInlineBlock: !1 })
+        }
+      ),
+      /* @__PURE__ */ e("span", { className: r["option-text"], children: t })
+    ] }) : /* @__PURE__ */ m(B, { children: [
+      c && /* @__PURE__ */ e(
+        "span",
+        {
+          className: s(
+            r["interactive-icon"],
+            r["interactive-icon-leading"]
+          ),
+          children: /* @__PURE__ */ e(d, { name: c, isInlineBlock: !1 })
+        }
+      ),
+      /* @__PURE__ */ e("span", { className: r["option-text"], children: t }),
+      p && /* @__PURE__ */ e(
+        "span",
+        {
+          className: s(
+            r["interactive-icon"],
+            r["interactive-icon-trailing"]
+          ),
+          children: /* @__PURE__ */ e(d, { name: p, isInlineBlock: !1 })
+        }
+      )
+    ] })
+  }
+), a = Object.freeze({
+  Root: O,
+  Trigger: R,
+  Popover: T,
+  /**
+   * Note that this only acts as a view layer,
+   * it does not participate in the search logic.
+   * This is left for the consumer to implement.
+   */
+  SearchInput: j,
+  List: k,
+  Option: C
+}), w = ({
+  label: i,
+  helperText: t,
+  error: n,
+  id: c,
+  searchProps: o,
+  options: p,
+  listLabel: h,
+  listHeight: S = "240px",
+  onScroll: g,
+  onChangeSelectedOption: v,
+  onChangeVFocusedOption: N,
+  onSearchBlur: f,
+  ...I
+}) => {
+  const x = F();
+  return /* @__PURE__ */ e(
+    L,
+    {
+      label: i,
+      helperText: t,
+      error: n,
+      id: c ?? x,
+      layout: "vertical",
+      ...I,
+      children: /* @__PURE__ */ m(
+        a.Root,
+        {
+          onChangeSelectedOption: v,
+          onChangeVFocusedOption: N,
+          children: [
+            /* @__PURE__ */ e(a.Trigger, {}),
+            /* @__PURE__ */ m(a.Popover, { children: [
+              o && /* @__PURE__ */ e(
+                a.SearchInput,
+                {
+                  placeholder: o.placeholder,
+                  value: o.value,
+                  onChange: o.onChange,
+                  onBlur: f
+                }
+              ),
+              /* @__PURE__ */ e(
+                a.List,
+                {
+                  label: h,
+                  maxHeight: S,
+                  onScroll: g,
+                  children: p.map((u) => /* @__PURE__ */ e(a.Option, { ...u }, u.value))
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+w.displayName = "SuperSelectField";
+export {
+  w as SuperSelectField
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/form/super-select/index.tsx"],"sourcesContent":["import { useId } from 'react'\nimport classNames from 'classnames'\nimport { Field } from '../field'\nimport { FlightIcon } from '../../flight-icon'\nimport { ComboBox } from '../../combo-box-primitive'\nimport type {\n\tTComboBoxItem,\n\tComboBoxSearchInputProps,\n\tComboBoxListProps,\n} from '../../combo-box-primitive'\nimport type { FieldProps } from '../field'\nimport s from './form-super-select.module.css'\n\ntype SuperSelectRootProps = {\n\tchildren: React.ReactNode\n\tonChangeSelectedOption?: (option: TComboBoxItem) => void\n\tonChangeVFocusedOption?: (option: TComboBoxItem) => void\n}\n\nconst SuperSelectRoot = ({\n\tchildren,\n\tonChangeSelectedOption,\n\tonChangeVFocusedOption,\n}: SuperSelectRootProps) => {\n\treturn (\n\t\t<ComboBox.Root\n\t\t\tonChangeSelectedOption={onChangeSelectedOption}\n\t\t\tonChangeVFocusedOption={onChangeVFocusedOption}\n\t\t>\n\t\t\t<div className={s.root}>{children}</div>\n\t\t</ComboBox.Root>\n\t)\n}\n\ninterface SuperSelectTriggerProps {\n\tclassName?: string\n}\n\nconst SuperSelectTrigger = ({ className }: SuperSelectTriggerProps) => {\n\treturn (\n\t\t<ComboBox.Trigger className={classNames(s.trigger, className)}>\n\t\t\t<ComboBox.Value />\n\t\t</ComboBox.Trigger>\n\t)\n}\n\ntype SuperSelectPopoverProps = {\n\tchildren: React.ReactNode\n}\n\nconst SuperSelectPopover = ({ children }: SuperSelectPopoverProps) => {\n\treturn <ComboBox.Popover className={s.popover}>{children}</ComboBox.Popover>\n}\n\ntype SuperSelectSearchInputProps = ComboBoxSearchInputProps\n\nconst SuperSelectSearchInput = ({\n\tplaceholder = 'Search',\n\tvalue,\n\tonChange,\n\tonBlur,\n}: SuperSelectSearchInputProps) => {\n\treturn (\n\t\t<div className={s['search-input-wrapper']}>\n\t\t\t<ComboBox.SearchInput\n\t\t\t\tplaceholder={placeholder}\n\t\t\t\tvalue={value}\n\t\t\t\tonChange={onChange}\n\t\t\t\tonBlur={onBlur}\n\t\t\t/>\n\t\t</div>\n\t)\n}\n\ntype SuperSelectListProps = ComboBoxListProps\n\nconst SuperSelectList = ({\n\tlabel,\n\tchildren,\n\tclassName,\n\tmaxHeight,\n\tonScroll,\n}: SuperSelectListProps) => {\n\treturn (\n\t\t<ComboBox.List\n\t\t\tlabel={label}\n\t\t\tclassName={classNames(s.list, className)}\n\t\t\tmaxHeight={maxHeight}\n\t\t\tonScroll={onScroll}\n\t\t>\n\t\t\t{children}\n\t\t</ComboBox.List>\n\t)\n}\n\ninterface SuperSelectOptionProps extends TComboBoxItem {\n\tisLoading?: boolean\n\t/**\n\t * Leading icon. Acceptable value: any [icon](https://helios.hashicorp.design/icons/library) name.\n\t */\n\ticon?: string\n\t/**\n\t * Trailing icon. Acceptable value: any [icon](https://helios.hashicorp.design/icons/library) name.\n\t */\n\ttrailingIcon?: string\n\tclassName?: string\n}\n\nconst SuperSelectOption = ({\n\tvalue,\n\tlabel,\n\tisLoading,\n\ticon,\n\tclassName,\n\ttrailingIcon,\n}: SuperSelectOptionProps) => {\n\treturn (\n\t\t<ComboBox.Item\n\t\t\tvalue={value}\n\t\t\tlabel={label}\n\t\t\tclassName={classNames(s.option, className)}\n\t\t>\n\t\t\t{isLoading ? (\n\t\t\t\t<div className={s['interactive-loading-wrapper']}>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={classNames(\n\t\t\t\t\t\t\ts['interactive-icon'],\n\t\t\t\t\t\t\ts['interactive-icon-leading']\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<FlightIcon name=\"loading\" isInlineBlock={false} />\n\t\t\t\t\t</div>\n\t\t\t\t\t<span className={s['option-text']}>{label}</span>\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t{icon && (\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclassName={classNames(\n\t\t\t\t\t\t\t\ts['interactive-icon'],\n\t\t\t\t\t\t\t\ts['interactive-icon-leading']\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<FlightIcon name={icon} isInlineBlock={false} />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\t\t\t\t\t<span className={s['option-text']}>{label}</span>\n\t\t\t\t\t{trailingIcon && (\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclassName={classNames(\n\t\t\t\t\t\t\t\ts['interactive-icon'],\n\t\t\t\t\t\t\t\ts['interactive-icon-trailing']\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<FlightIcon name={trailingIcon} isInlineBlock={false} />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t)}\n\t\t</ComboBox.Item>\n\t)\n}\n\ntype TSuperSelectOption = TComboBoxItem\n\nconst SuperSelect = Object.freeze({\n\tRoot: SuperSelectRoot,\n\tTrigger: SuperSelectTrigger,\n\tPopover: SuperSelectPopover,\n\t/**\n\t * Note that this only acts as a view layer,\n\t * it does not participate in the search logic.\n\t * This is left for the consumer to implement.\n\t */\n\tSearchInput: SuperSelectSearchInput,\n\tList: SuperSelectList,\n\tOption: SuperSelectOption,\n})\n\ninterface SuperSelectFieldProps\n\textends Omit<FieldProps, 'children' | 'id' | 'layout'> {\n\tid?: string\n\toptions: SuperSelectOptionProps[]\n\t/**\n\t * @default false\n\t */\n\tsearchProps?: SuperSelectSearchInputProps\n\t/**\n\t * Used for assistive technologies,\n\t * indicate the category of options you are presenting\n\t * eg. Schools | Languages | Countries\n\t */\n\tlistLabel: string\n\t/**\n\t * Is actually a `max-height` for the list.\n\t * Pass this when you have a lot of options and want to limit the height of the list.\n\t * @default `240px`\n\t */\n\tlistHeight?: `${number}em` | `${number}px` | `${number}%`\n\t/**\n\t * Callback for when the list is scrolled.\n\t * This is useful for implementing pagination, recommended for large lists.\n\t */\n\tonScroll?: (e: React.UIEvent<HTMLUListElement>) => void\n\tonChangeSelectedOption?: (option: SuperSelectOptionProps) => void\n\tonChangeVFocusedOption?: (option: SuperSelectOptionProps) => void\n\tonSearchBlur?: () => void\n}\n\n/**\n * Convenience component for using {@link SuperSelect}\n * with a {@link Field} component. This should cover most use cases\n * unless you need advanced patterns like pagination, async options, etc. outside of a form context.\n */\nconst SuperSelectField = ({\n\tlabel,\n\thelperText,\n\terror,\n\tid,\n\tsearchProps,\n\toptions,\n\tlistLabel,\n\tlistHeight = '240px',\n\tonScroll,\n\tonChangeSelectedOption,\n\tonChangeVFocusedOption,\n\tonSearchBlur,\n\t...rest\n}: SuperSelectFieldProps) => {\n\tconst genID = useId()\n\tconst fieldId = id ?? genID\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\tid={fieldId}\n\t\t\tlayout={'vertical'}\n\t\t\t{...rest}\n\t\t>\n\t\t\t<SuperSelect.Root\n\t\t\t\tonChangeSelectedOption={onChangeSelectedOption}\n\t\t\t\tonChangeVFocusedOption={onChangeVFocusedOption}\n\t\t\t>\n\t\t\t\t<SuperSelect.Trigger />\n\t\t\t\t<SuperSelect.Popover>\n\t\t\t\t\t{searchProps && (\n\t\t\t\t\t\t<SuperSelect.SearchInput\n\t\t\t\t\t\t\tplaceholder={searchProps.placeholder}\n\t\t\t\t\t\t\tvalue={searchProps.value}\n\t\t\t\t\t\t\tonChange={searchProps.onChange}\n\t\t\t\t\t\t\tonBlur={onSearchBlur}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t<SuperSelect.List\n\t\t\t\t\t\tlabel={listLabel}\n\t\t\t\t\t\tmaxHeight={listHeight}\n\t\t\t\t\t\tonScroll={onScroll}\n\t\t\t\t\t>\n\t\t\t\t\t\t{options.map((option) => (\n\t\t\t\t\t\t\t<SuperSelect.Option key={option.value} {...option} />\n\t\t\t\t\t\t))}\n\t\t\t\t\t</SuperSelect.List>\n\t\t\t\t</SuperSelect.Popover>\n\t\t\t</SuperSelect.Root>\n\t\t</Field>\n\t)\n}\n\nSuperSelectField.displayName = 'SuperSelectField'\n\nexport type {\n\tTSuperSelectOption,\n\tSuperSelectOptionProps,\n\tSuperSelectSearchInputProps,\n}\n\nexport { SuperSelectField }\n"],"names":["SuperSelectRoot","children","onChangeSelectedOption","onChangeVFocusedOption","jsx","ComboBox","s","SuperSelectTrigger","className","classNames","SuperSelectPopover","SuperSelectSearchInput","placeholder","value","onChange","onBlur","SuperSelectList","label","maxHeight","onScroll","SuperSelectOption","isLoading","icon","trailingIcon","jsxs","FlightIcon","Fragment","SuperSelect","SuperSelectField","helperText","error","id","searchProps","options","listLabel","listHeight","onSearchBlur","rest","genID","useId","Field","option"],"mappings":"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"}

package/components/form/text-input/index.js

@@ -0,0 +1,91 @@
+import { jsx as c } from "react/jsx-runtime";
+import g from "classnames";
+import { useId as x } from "react";
+import { Field as $ } from "../field/index.js";
+import r from "./styles.module.css.js";
+const f = ({
+  type: i,
+  isInvalid: n,
+  isLoading: d,
+  isRequired: o,
+  className: t,
+  id: e,
+  field: s,
+  size: a = "medium",
+  error: m,
+  ...p
+}) => {
+  const u = x();
+  return /* @__PURE__ */ c(
+    "input",
+    {
+      id: e ?? u,
+      type: i,
+      className: g(
+        r["text-input"],
+        r[`size-${a}`],
+        {
+          [r.invalid]: n,
+          [r.loading]: d
+        },
+        t
+      ),
+      required: o,
+      "aria-describedby": `${m ? "error" : "helper-text"}-${e}`,
+      ...s,
+      ...p
+    }
+  );
+};
+f.displayName = "TextInputBase";
+const b = ({
+  badgeText: i,
+  type: n = "text",
+  isInvalid: d,
+  isLoading: o,
+  isRequired: t,
+  isOptional: e,
+  id: s,
+  label: a,
+  helperText: m,
+  error: p,
+  field: u,
+  className: l,
+  size: y = "medium",
+  ...N
+}) => {
+  const T = x(), I = s ?? T;
+  return /* @__PURE__ */ c(
+    $,
+    {
+      label: a,
+      badgeText: i,
+      helperText: m,
+      error: p,
+      isRequired: t,
+      isOptional: e,
+      id: I,
+      layout: "vertical",
+      className: l,
+      children: /* @__PURE__ */ c(
+        f,
+        {
+          id: I,
+          type: n,
+          isInvalid: d,
+          isLoading: o,
+          isRequired: t,
+          field: u,
+          size: y,
+          ...N
+        }
+      )
+    }
+  );
+};
+b.displayName = "TextInput";
+export {
+  b as TextInput,
+  f as TextInputBase
+};
+//# sourceMappingURL=index.js.map

package/components/form/text-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/form/text-input/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport type { HTMLInputTypeAttribute, HTMLProps, ReactNode } from 'react'\nimport { useId } from 'react'\nimport { Field } from '../field'\nimport s from './styles.module.css'\n\ninterface TextInputBaseProps {\n\t/**\n\t * Sets the native HTML `type` of the `<input>`.\n\t */\n\ttype?: HTMLInputTypeAttribute\n\n\t/**\n\t * Applies an “invalid” appearance to the control but doesn’t modify its logical validity.\n\t */\n\tisInvalid?: boolean\n\n\t/**\n\t * When true, it shows a loading indicator instead of a magnifying glass; only applicable when `type=\"search\"`.\n\t */\n\tisLoading?: boolean\n\tisRequired?: boolean\n\tclassName?: string\n\tid?: string\n\n\t/**\n\t * Can be used to supply any props that the native `<input>` element supports (such as `value`, `placeholder`, in addition to events like `onChange` and `onBlur`)\n\t */\n\tfield: HTMLProps<HTMLInputElement>\n\n\t/**\n\t * Sets the size of the input to match either medium Buttons or large Buttons.\n\t */\n\tsize?: 'medium' | 'large'\n\terror?: ReactNode\n\tdisabled?: boolean\n}\n\nconst TextInputBase = ({\n\ttype,\n\tisInvalid,\n\tisLoading,\n\tisRequired,\n\tclassName,\n\tid,\n\tfield,\n\tsize = 'medium',\n\terror,\n\t...rest\n}: TextInputBaseProps) => {\n\tconst generatedId = useId()\n\tconst inputId = id ?? generatedId\n\n\treturn (\n\t\t<input\n\t\t\tid={inputId}\n\t\t\ttype={type}\n\t\t\tclassName={classNames(\n\t\t\t\ts['text-input'],\n\t\t\t\ts[`size-${size}`],\n\t\t\t\t{\n\t\t\t\t\t[s['invalid']]: isInvalid,\n\t\t\t\t\t[s['loading']]: isLoading,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\trequired={isRequired}\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)\n}\n\nTextInputBase.displayName = 'TextInputBase'\n\ninterface TextInputProps {\n\t/**\n\t * When provided, appends a badge next to the label text.\n\t */\n\tbadgeText?: string\n\n\t/**\n\t * Sets the native HTML `type` of the `<input>`.\n\t */\n\ttype?: HTMLInputTypeAttribute\n\n\t/**\n\t * Applies an “invalid” appearance to the control but doesn’t modify its logical validity.\n\t */\n\tisInvalid?: boolean\n\n\t/**\n\t * When true, it shows a loading indicator instead of a magnifying glass; only applicable when `type=\"search\"`.\n\t */\n\tisLoading?: boolean\n\n\t/**\n\t * Appends a `Required` indicator next to the label text and sets the `required` attribute on the control when user input is required.\n\t */\n\tisRequired?: boolean\n\n\t/**\n\t * Appends an `Optional` indicator next to the label text when user input is optional.\n\t */\n\tisOptional?: boolean\n\n\t/**\n\t * Input control’s ID attribute.\n\t *\n\t * By default, the ID is automatically generated by the component. Use this argument to pass a custom ID.\n\t */\n\tid?: string\n\n\t/**\n\t * Container that renders its content inside the `<label>` element. The content can be a simple string or a `ReactNode`, in which case it inherits the text style.\n\t *\n\t * The `for` attribute of the label is automatically generated using the `controlId` value of the control.\n\t */\n\tlabel?: ReactNode\n\n\t/**\n\t * Container that renders its content inside the \"helper text\" block. The content can be a simple string or a `ReactNode`, in which case it inherits the text style.\n\t *\n\t * The `id` attribute of the message is automatically generated using the `controlId` value of the control.\n\t */\n\thelperText?: ReactNode\n\n\t/**\n\t * Container that renders its content inside the \"error\" block. The content can be a simple string or a `ReactNode`, in which case it inherits the text style.\n\t *\n\t * The `id` attribute of the error message is automatically generated using the `controlId` value of the control.\n\t */\n\terror?: ReactNode\n\n\t/**\n\t * Can be used to supply any props that the native `<input>` element supports (such as `value`, `placeholder`, in addition to events like `onChange` and `onBlur`)\n\t */\n\tfield: HTMLProps<HTMLInputElement>\n\tclassName?: string\n\n\t/**\n\t * Sets the size of the input to match either medium Buttons or large Buttons.\n\t */\n\tsize?: 'medium' | 'large'\n\tdisabled?: boolean\n}\n\nconst TextInput = ({\n\tbadgeText,\n\ttype = 'text',\n\tisInvalid,\n\tisLoading,\n\tisRequired,\n\tisOptional,\n\tid,\n\tlabel,\n\thelperText,\n\terror,\n\tfield,\n\tclassName,\n\tsize = 'medium',\n\t...rest\n}: TextInputProps) => {\n\tconst generatedId = useId()\n\tconst inputId = id ?? generatedId\n\n\treturn (\n\t\t<Field\n\t\t\tlabel={label}\n\t\t\tbadgeText={badgeText}\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<TextInputBase\n\t\t\t\tid={inputId}\n\t\t\t\ttype={type}\n\t\t\t\tisInvalid={isInvalid}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\tisRequired={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</Field>\n\t)\n}\n\nTextInput.displayName = 'TextInput'\n\nexport type { TextInputBaseProps, TextInputProps }\nexport { TextInputBase, TextInput }\n"],"names":["TextInputBase","type","isInvalid","isLoading","isRequired","className","id","field","size","error","rest","generatedId","useId","jsx","classNames","s","TextInput","badgeText","isOptional","label","helperText","inputId","Field"],"mappings":";;;;;AAsCA,MAAMA,IAAgB,CAAC;AAAA,EACtB,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,GAAGC;AACJ,MAA0B;AACzB,QAAMC,IAAcC,EAAA;AAGpB,SACC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,IAJcP,KAAMK;AAAA,MAKpB,MAAAV;AAAA,MACA,WAAWa;AAAA,QACVC,EAAE,YAAY;AAAA,QACdA,EAAE,QAAQP,CAAI,EAAE;AAAA,QAChB;AAAA,UACC,CAACO,EAAE,OAAU,GAAGb;AAAA,UAChB,CAACa,EAAE,OAAU,GAAGZ;AAAA,QAAA;AAAA,QAEjBE;AAAA,MAAA;AAAA,MAED,UAAUD;AAAA,MACV,oBAAkB,GAAGK,IAAQ,UAAU,aAAa,IAAIH,CAAE;AAAA,MACzD,GAAGC;AAAA,MACH,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAV,EAAc,cAAc;AA0E5B,MAAMgB,IAAY,CAAC;AAAA,EAClB,WAAAC;AAAA,EACA,MAAAhB,IAAO;AAAA,EACP,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAc;AAAA,EACA,IAAAZ;AAAA,EACA,OAAAa;AAAA,EACA,YAAAC;AAAA,EACA,OAAAX;AAAA,EACA,OAAAF;AAAA,EACA,WAAAF;AAAA,EACA,MAAAG,IAAO;AAAA,EACP,GAAGE;AACJ,MAAsB;AACrB,QAAMC,IAAcC,EAAA,GACdS,IAAUf,KAAMK;AAEtB,SACC,gBAAAE;AAAA,IAACS;AAAA,IAAA;AAAA,MACA,OAAAH;AAAA,MACA,WAAAF;AAAA,MACA,YAAAG;AAAA,MACA,OAAAX;AAAA,MACA,YAAAL;AAAA,MACA,YAAAc;AAAA,MACA,IAAIG;AAAA,MACJ,QAAO;AAAA,MACP,WAAAhB;AAAA,MAEA,UAAA,gBAAAQ;AAAA,QAACb;AAAA,QAAA;AAAA,UACA,IAAIqB;AAAA,UACJ,MAAApB;AAAA,UACA,WAAAC;AAAA,UACA,WAAAC;AAAA,UACA,YAAAC;AAAA,UACA,OAAAG;AAAA,UACA,MAAAC;AAAA,UACC,GAAGE;AAAA,QAAA;AAAA,MAAA;AAAA,IACL;AAAA,EAAA;AAGH;AAEAM,EAAU,cAAc;"}

package/components/form/text-input/styles.module.css.js

@@ -0,0 +1,15 @@
+const o = "invalid__rrYph", e = "loading__O7Vv0", i = {
+  "text-input": "text-input__Xudum mds-typography-font-weight-regular",
+  "mock-hover": "mock-hover__-ItMX",
+  "mock-focus": "mock-focus__S6jof",
+  invalid: o,
+  loading: e,
+  "size-medium": "size-medium__-UzIQ mds-typography-legacy-body-200",
+  "size-large": "size-large__Hceu2 mds-typography-legacy-body-300"
+};
+export {
+  i as default,
+  o as invalid,
+  e as loading
+};
+//# sourceMappingURL=styles.module.css.js.map

package/components/form/text-input/styles.module.css.js.map

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

package/components/form/textarea/form-textarea.module.css.js

@@ -0,0 +1,14 @@
+const a = "textarea__3MZYV mds-typography-font-weight-regular", e = "invalid__Q80EM", t = "medium__G2gPs mds-typography-legacy-body-200", d = "large__0Y-7C mds-typography-legacy-body-300", o = {
+  textarea: a,
+  invalid: e,
+  medium: t,
+  large: d
+};
+export {
+  o as default,
+  e as invalid,
+  d as large,
+  t as medium,
+  a as textarea
+};
+//# sourceMappingURL=form-textarea.module.css.js.map

package/components/form/textarea/form-textarea.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-textarea.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/components/form/textarea/index.js

@@ -0,0 +1,74 @@
+import { jsx as s } from "react/jsx-runtime";
+import f from "classnames";
+import { useId as y } from "react";
+import { Field as A } from "../field/index.js";
+import m from "./form-textarea.module.css.js";
+const F = ({
+  isInvalid: t,
+  isLoading: l,
+  className: e,
+  id: r,
+  field: a,
+  size: i,
+  error: o,
+  ...d
+}) => /* @__PURE__ */ s(
+  "textarea",
+  {
+    id: r,
+    className: f(
+      m.textarea,
+      m[i],
+      {
+        [m.invalid]: t
+      },
+      e
+    ),
+    "aria-describedby": `${o ? "error" : "helper-text"}-${r}`,
+    ...a,
+    ...d
+  }
+), I = ({
+  isInvalid: t,
+  isLoading: l,
+  isRequired: e,
+  isOptional: r,
+  id: a,
+  label: i,
+  helperText: o,
+  error: d,
+  field: c,
+  size: p = "medium",
+  ...x
+}) => {
+  const u = y(), n = a ?? u;
+  return /* @__PURE__ */ s(
+    A,
+    {
+      label: i,
+      helperText: o,
+      error: d,
+      isRequired: e,
+      isOptional: r,
+      id: n,
+      layout: "vertical",
+      children: /* @__PURE__ */ s(
+        F,
+        {
+          id: n,
+          isInvalid: t,
+          isLoading: l,
+          required: e,
+          field: c,
+          size: p,
+          ...x
+        }
+      )
+    }
+  );
+};
+I.displayName = "TextAreaField";
+export {
+  I as TextAreaField
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/form/textarea/index.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { useId } from 'react'\nimport { Field } from '../field'\nimport type { HTMLProps, ReactNode } from 'react'\nimport s from './form-textarea.module.css'\n\ninterface TextAreaBaseProps {\n\tisInvalid?: boolean\n\tisLoading?: boolean\n\trequired?: boolean\n\tclassName?: string\n\tid: string\n\tfield: HTMLProps<HTMLTextAreaElement>\n\tsize: 'medium' | 'large'\n\terror?: ReactNode\n\tdisabled?: boolean\n}\n\nconst TextAreaBase = ({\n\tisInvalid,\n\tisLoading,\n\tclassName,\n\tid,\n\tfield,\n\tsize,\n\terror,\n\t...rest\n}: TextAreaBaseProps) => {\n\treturn (\n\t\t<textarea\n\t\t\tid={id}\n\t\t\tclassName={classNames(\n\t\t\t\ts.textarea,\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)\n}\n\ninterface TextAreaFieldProps {\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<HTMLTextAreaElement>\n\tsize?: 'medium' | 'large'\n\tdisabled?: boolean\n}\n\nconst TextAreaField = ({\n\tisInvalid,\n\tisLoading,\n\tisRequired,\n\tisOptional,\n\tid,\n\tlabel,\n\thelperText,\n\terror,\n\tfield,\n\tsize = 'medium',\n\t...rest\n}: TextAreaFieldProps) => {\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>\n\t\t\t<TextAreaBase\n\t\t\t\tid={inputId}\n\t\t\t\tisInvalid={isInvalid}\n\t\t\t\tisLoading={isLoading}\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</Field>\n\t)\n}\n\nTextAreaField.displayName = 'TextAreaField'\n\nexport { TextAreaField }\n"],"names":["TextAreaBase","isInvalid","isLoading","className","id","field","size","error","rest","jsx","classNames","s","TextAreaField","isRequired","isOptional","label","helperText","generatedId","useId","inputId","Field"],"mappings":";;;;;AAkBA,MAAMA,IAAe,CAAC;AAAA,EACrB,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACJ,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,IAAAL;AAAA,IACA,WAAWM;AAAA,MACVC,EAAE;AAAA,MACFA,EAAEL,CAAI;AAAA,MACN;AAAA,QACC,CAACK,EAAE,OAAO,GAAGV;AAAA,MAAA;AAAA,MAEdE;AAAA,IAAA;AAAA,IAED,oBAAkB,GAAGI,IAAQ,UAAU,aAAa,IAAIH,CAAE;AAAA,IACzD,GAAGC;AAAA,IACH,GAAGG;AAAA,EAAA;AAAA,GAmBDI,IAAgB,CAAC;AAAA,EACtB,WAAAX;AAAA,EACA,WAAAC;AAAA,EACA,YAAAW;AAAA,EACA,YAAAC;AAAA,EACA,IAAAV;AAAA,EACA,OAAAW;AAAA,EACA,YAAAC;AAAA,EACA,OAAAT;AAAA,EACA,OAAAF;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGE;AACJ,MAA0B;AACzB,QAAMS,IAAcC,EAAA,GACdC,IAAUf,KAAMa;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,MAEP,UAAA,gBAAAV;AAAA,QAACT;AAAA,QAAA;AAAA,UACA,IAAImB;AAAA,UACJ,WAAAlB;AAAA,UACA,WAAAC;AAAA,UACA,UAAUW;AAAA,UACV,OAAAR;AAAA,UACA,MAAAC;AAAA,UACC,GAAGE;AAAA,QAAA;AAAA,MAAA;AAAA,IACL;AAAA,EAAA;AAGH;AAEAI,EAAc,cAAc;"}

package/components/form/toggle/form-toggle.module.scss.js

@@ -0,0 +1,12 @@
+const o = "toggle__PmDvt", t = "control__GLB77", c = "facade__-n7d2", a = {
+  toggle: o,
+  control: t,
+  facade: c
+};
+export {
+  t as control,
+  a as default,
+  c as facade,
+  o as toggle
+};
+//# sourceMappingURL=form-toggle.module.scss.js.map

package/components/form/toggle/form-toggle.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-toggle.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/components/form/toggle/index.js

@@ -0,0 +1,102 @@
+import { jsx as o, jsxs as F } from "react/jsx-runtime";
+import { useId as p } from "react";
+import { Field as I } from "../field/index.js";
+import { Fieldset as x } from "../fieldset/index.js";
+import g from "./form-toggle.module.scss.js";
+const u = ({
+  id: e,
+  field: r,
+  toggleOnEnter: t,
+  testingKey: l,
+  error: a,
+  ...d
+}) => {
+  const i = p(), c = e ?? i, n = (s) => {
+    s.key === "Enter" && (s.currentTarget.checked = !s.currentTarget.checked);
+  };
+  return /* @__PURE__ */ F("div", { className: g.toggle, children: [
+    /* @__PURE__ */ o(
+      "input",
+      {
+        id: c,
+        className: g.control,
+        type: "checkbox",
+        ...r,
+        ...d,
+        role: "switch",
+        "aria-describedby": `${a ? "error" : "helper-text"}-${e}`,
+        onKeyDown: t ? n : void 0,
+        "data-testid": l
+      }
+    ),
+    /* @__PURE__ */ o("div", { className: g.facade })
+  ] });
+};
+u.displayName = "ToggleBase";
+const T = ({
+  isInvalid: e,
+  isRequired: r,
+  isOptional: t,
+  id: l,
+  label: a,
+  helperText: d,
+  error: i,
+  field: c,
+  className: n,
+  testingKey: s,
+  ...f
+}) => {
+  const h = p(), m = l ?? h;
+  return /* @__PURE__ */ o(
+    I,
+    {
+      label: a,
+      helperText: d,
+      error: i,
+      isRequired: r,
+      isOptional: t,
+      id: m,
+      layout: "flag",
+      className: n,
+      children: /* @__PURE__ */ o(
+        u,
+        {
+          id: m,
+          field: c,
+          testingKey: s,
+          ...f
+        }
+      )
+    }
+  );
+};
+T.displayName = "ToggleField";
+const y = ({
+  layout: e = "vertical",
+  legend: r,
+  isOptional: t,
+  isRequired: l,
+  children: a
+}) => /* @__PURE__ */ o(
+  x,
+  {
+    layout: e,
+    legend: r,
+    isOptional: t,
+    isRequired: l,
+    children: a
+  }
+);
+y.displayName = "ToggleGroupRoot";
+const N = (e) => /* @__PURE__ */ o(T, { ...e, className: e.className });
+N.displayName = "ToggleGroupField";
+const j = {
+  Root: y,
+  Field: N
+};
+export {
+  u as ToggleBase,
+  T as ToggleField,
+  j as ToggleGroup
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/form/toggle/index.tsx"],"sourcesContent":["import { useId } from 'react'\nimport type { ReactNode, HTMLProps, ComponentProps } from 'react'\nimport { Field } from '../field'\nimport { Fieldset } from '../fieldset'\nimport s from './form-toggle.module.scss'\n\ninterface ToggleBaseProps {\n\tid?: string\n\n\t/**\n\t * Can be used to supply any props that the native `<input>` element supports (such as `value`, `placeholder`, in addition to events like `onChange` and `onBlur`)\n\t */\n\tfield: HTMLProps<HTMLInputElement>\n\ttoggleOnEnter?: boolean\n\ttestingKey?: string\n\terror?: ReactNode\n}\n\nconst ToggleBase = ({\n\tid,\n\tfield,\n\ttoggleOnEnter,\n\ttestingKey,\n\terror,\n\t...rest\n}: ToggleBaseProps) => {\n\tconst generatedId = useId()\n\tconst inputId = id ?? generatedId\n\n\tconst handleEnterKey = (event: React.KeyboardEvent<HTMLInputElement>) => {\n\t\tif (event.key === 'Enter') {\n\t\t\tevent.currentTarget.checked = !event.currentTarget.checked\n\t\t}\n\t}\n\n\treturn (\n\t\t<div className={s.toggle}>\n\t\t\t<input\n\t\t\t\tid={inputId}\n\t\t\t\tclassName={s.control}\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\t{...field}\n\t\t\t\t{...rest}\n\t\t\t\trole=\"switch\"\n\t\t\t\taria-describedby={`${error ? 'error' : 'helper-text'}-${id}`}\n\t\t\t\tonKeyDown={toggleOnEnter ? handleEnterKey : undefined}\n\t\t\t\tdata-testid={testingKey}\n\t\t\t/>\n\t\t\t<div className={s.facade}></div>\n\t\t</div>\n\t)\n}\n\nToggleBase.displayName = 'ToggleBase'\n\ninterface ToggleFieldProps {\n\t/**\n\t * Applies an “invalid” appearance to the control but doesn’t modify its logical validity.\n\t */\n\tisInvalid?: boolean\n\n\t/**\n\t * Appends a `Required` indicator next to the label text and sets the `required` attribute on the control when user input is required.\n\t */\n\tisRequired?: boolean\n\n\t/**\n\t * Appends an `Optional` indicator next to the label text when user input is optional.\n\t */\n\tisOptional?: boolean\n\n\t/**\n\t * Input control’s ID attribute.\n\t *\n\t * By default, the ID is automatically generated by the component. Use this argument to pass a custom ID.\n\t */\n\tid?: string\n\n\t/**\n\t * Container that renders its content inside the `<label>` element. The content can be a simple string or a `ReactNode`, in which case it inherits the text style.\n\t *\n\t * The `for` attribute of the label is automatically generated using the `controlId` value of the control.\n\t */\n\tlabel?: ReactNode\n\n\t/**\n\t * Container that renders its content inside the \"helper text\" block. The content can be a simple string or a `ReactNode`, in which case it inherits the text style.\n\t *\n\t * The `id` attribute of the message is automatically generated using the `controlId` value of the control.\n\t */\n\thelperText?: ReactNode\n\n\t/**\n\t * Container that renders its content inside the \"error\" block. The content can be a simple string or a `ReactNode`, in which case it inherits the text style.\n\t *\n\t * The `id` attribute of the error message is automatically generated using the `controlId` value of the control.\n\t */\n\terror?: ReactNode\n\n\t/**\n\t * Can be used to supply any props that the native `<input>` element supports (such as `value`, `placeholder`, in addition to events like `onChange` and `onBlur`)\n\t */\n\tfield: HTMLProps<HTMLInputElement>\n\tclassName?: string\n\ttestingKey?: string\n}\n\nconst ToggleField = ({\n\tisInvalid,\n\tisRequired,\n\tisOptional,\n\tid,\n\tlabel,\n\thelperText,\n\terror,\n\tfield,\n\tclassName,\n\ttestingKey,\n\t...rest\n}: ToggleFieldProps) => {\n\tconst generatedId = useId()\n\tconst inputId = id ?? generatedId\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<ToggleBase\n\t\t\t\tid={inputId}\n\t\t\t\tfield={field}\n\t\t\t\ttestingKey={testingKey}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t</Field>\n\t)\n}\n\nToggleField.displayName = 'ToggleField'\n\ninterface ToggleGroupProps extends ComponentProps<typeof Fieldset> {\n\tchildren: ReactNode\n}\n\nconst ToggleGroupRoot = ({\n\tlayout = 'vertical',\n\tlegend,\n\tisOptional,\n\tisRequired,\n\tchildren,\n}: ToggleGroupProps) => {\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\nToggleGroupRoot.displayName = 'ToggleGroupRoot'\n\nconst ToggleGroupField = (props: ToggleFieldProps) => {\n\treturn <ToggleField {...props} className={props.className} />\n}\n\nToggleGroupField.displayName = 'ToggleGroupField'\n\nconst ToggleGroup = {\n\tRoot: ToggleGroupRoot,\n\tField: ToggleGroupField,\n}\n\nexport { ToggleBase, ToggleField, ToggleGroup }\n"],"names":["ToggleBase","id","field","toggleOnEnter","testingKey","error","rest","generatedId","useId","inputId","handleEnterKey","event","jsxs","s","jsx","ToggleField","isInvalid","isRequired","isOptional","label","helperText","className","Field","ToggleGroupRoot","layout","legend","children","Fieldset","ToggleGroupField","props","ToggleGroup"],"mappings":";;;;;AAkBA,MAAMA,IAAa,CAAC;AAAA,EACnB,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACJ,MAAuB;AACtB,QAAMC,IAAcC,EAAA,GACdC,IAAUR,KAAMM,GAEhBG,IAAiB,CAACC,MAAiD;AACxE,IAAIA,EAAM,QAAQ,YACjBA,EAAM,cAAc,UAAU,CAACA,EAAM,cAAc;AAAA,EAErD;AAEA,SACC,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAE,QACjB,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,IAAIL;AAAA,QACJ,WAAWI,EAAE;AAAA,QACb,MAAK;AAAA,QACJ,GAAGX;AAAA,QACH,GAAGI;AAAA,QACJ,MAAK;AAAA,QACL,oBAAkB,GAAGD,IAAQ,UAAU,aAAa,IAAIJ,CAAE;AAAA,QAC1D,WAAWE,IAAgBO,IAAiB;AAAA,QAC5C,eAAaN;AAAA,MAAA;AAAA,IAAA;AAAA,IAEd,gBAAAU,EAAC,OAAA,EAAI,WAAWD,EAAE,OAAA,CAAQ;AAAA,EAAA,GAC3B;AAEF;AAEAb,EAAW,cAAc;AAsDzB,MAAMe,IAAc,CAAC;AAAA,EACpB,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,IAAAjB;AAAA,EACA,OAAAkB;AAAA,EACA,YAAAC;AAAA,EACA,OAAAf;AAAA,EACA,OAAAH;AAAA,EACA,WAAAmB;AAAA,EACA,YAAAjB;AAAA,EACA,GAAGE;AACJ,MAAwB;AACvB,QAAMC,IAAcC,EAAA,GACdC,IAAUR,KAAMM;AACtB,SACC,gBAAAO;AAAA,IAACQ;AAAA,IAAA;AAAA,MACA,OAAAH;AAAA,MACA,YAAAC;AAAA,MACA,OAAAf;AAAA,MACA,YAAAY;AAAA,MACA,YAAAC;AAAA,MACA,IAAIT;AAAA,MACJ,QAAO;AAAA,MACP,WAAAY;AAAA,MAEA,UAAA,gBAAAP;AAAA,QAACd;AAAA,QAAA;AAAA,UACA,IAAIS;AAAA,UACJ,OAAAP;AAAA,UACA,YAAAE;AAAA,UACC,GAAGE;AAAA,QAAA;AAAA,MAAA;AAAA,IACL;AAAA,EAAA;AAGH;AAEAS,EAAY,cAAc;AAM1B,MAAMQ,IAAkB,CAAC;AAAA,EACxB,QAAAC,IAAS;AAAA,EACT,QAAAC;AAAA,EACA,YAAAP;AAAA,EACA,YAAAD;AAAA,EACA,UAAAS;AACD,MAEE,gBAAAZ;AAAA,EAACa;AAAA,EAAA;AAAA,IACA,QAAAH;AAAA,IACA,QAAAC;AAAA,IACA,YAAAP;AAAA,IACA,YAAAD;AAAA,IAEC,UAAAS;AAAA,EAAA;AAAA;AAKJH,EAAgB,cAAc;AAE9B,MAAMK,IAAmB,CAACC,wBACjBd,GAAA,EAAa,GAAGc,GAAO,WAAWA,EAAM,WAAW;AAG5DD,EAAiB,cAAc;AAE/B,MAAME,IAAc;AAAA,EACnB,MAAMP;AAAA,EACN,OAAOK;AACR;"}

package/components/hds/wrappers/tooltip.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as i } from "react/jsx-runtime";
+import s from "@tippyjs/react";
+import { followCursor as d } from "tippy.js";
+import "tippy.js/dist/svg-arrow.css";
+const n = {
+  name: "hideOnEsc",
+  defaultValue: !0,
+  fn(e) {
+    function o(t) {
+      t.key === "Escape" && e.hide();
+    }
+    return {
+      onShow() {
+        document.addEventListener("keydown", o);
+      },
+      onHide() {
+        document.removeEventListener("keydown", o);
+      }
+    };
+  }
+}, w = ({ options: e = {}, children: o, text: t }) => {
+  const r = e.followCursor !== void 0 ? [n, d] : [n];
+  return /* @__PURE__ */ i(
+    s,
+    {
+      theme: "hds",
+      arrow: `<svg
+					className="hds-tooltip-pointer"
+					width="16"
+					height="7"
+					viewBox="0 0 16 7"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path d="M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z" />
+				</svg>`,
+      interactive: !0,
+      aria: {
+        content: "describedby"
+      },
+      plugins: r,
+      content: t,
+      ...e,
+      children: o
+    }
+  );
+};
+export {
+  w as Tooltip
+};
+//# sourceMappingURL=tooltip.js.map

package/components/hds/wrappers/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sources":["../../../../src/components/hds/wrappers/tooltip.tsx"],"sourcesContent":["'use client'\n\nimport Tippy, { type TippyProps } from '@tippyjs/react'\nimport { followCursor, type Plugin } from 'tippy.js'\nimport type { ReactElement } from 'react'\nimport 'tippy.js/dist/svg-arrow.css'\n\nexport interface TooltipProps {\n\toptions?: TippyProps\n\tchildren: TippyProps['children']\n\ttext: string | ReactElement\n}\n\nexport interface HideOnEsc extends Plugin {\n\tname: 'hideOnEsc'\n\tdefaultValue: true\n}\n\nconst hideOnEsc = {\n\tname: 'hideOnEsc',\n\tdefaultValue: true,\n\tfn(instance: { hide: () => void }) {\n\t\tfunction onKeyDown(event: KeyboardEvent): void {\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\tinstance.hide()\n\t\t\t}\n\t\t}\n\n\t\treturn {\n\t\t\tonShow() {\n\t\t\t\tdocument.addEventListener('keydown', onKeyDown)\n\t\t\t},\n\t\t\tonHide() {\n\t\t\t\tdocument.removeEventListener('keydown', onKeyDown)\n\t\t\t},\n\t\t}\n\t},\n}\n\nexport const Tooltip = ({ options = {}, children, text }: TooltipProps) => {\n\tconst plugins =\n\t\toptions.followCursor !== undefined ? [hideOnEsc, followCursor] : [hideOnEsc]\n\n\treturn (\n\t\t<Tippy\n\t\t\ttheme=\"hds\"\n\t\t\tarrow={`<svg\n\t\t\t\t\tclassName=\"hds-tooltip-pointer\"\n\t\t\t\t\twidth=\"16\"\n\t\t\t\t\theight=\"7\"\n\t\t\t\t\tviewBox=\"0 0 16 7\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z\" />\n\t\t\t\t</svg>`}\n\t\t\tinteractive\n\t\t\taria={{\n\t\t\t\tcontent: 'describedby',\n\t\t\t}}\n\t\t\tplugins={plugins}\n\t\t\tcontent={text}\n\t\t\t{...options}\n\t\t>\n\t\t\t{children}\n\t\t</Tippy>\n\t)\n}\n"],"names":["hideOnEsc","instance","onKeyDown","event","options","text","followCursor","jsx","Tippy","plugins","children"],"mappings":";;;;;AAkBkB,MACjBA,IAAM;AAAA,EACN,MAAA;AAAA,EACA,cAAmC;AAAA,EAClC,GAAAC,GAAS;AACR,aAAIC;AACH,MAAAC,EAAA,QAAc,YACfF,EAAA,KAAA;AAAA,IAGD;AAAO;MAEL;AACD,iBAAA,iBAAA,WAAAC,CAAA;AAAA,MACA;AAAA,MACC;AACD,iBAAA,oBAAA,WAAAA,CAAA;AAAA,MACD;AAAA,IACD;AAAA,EACD;AAEO,OACA,CAAA,EACL,SAAAE,qBAAyB,MAAAC,EAAA;AAE1B,cACC,iBAAA,SAAA,CAAAL,GAAAM,CAAA,IAAA,CAAAN,CAAA;AAAA,SAAC,gBAAAO;AAAA,IAAAC;AAAA,IAAA;AAAA,MAEA,OAAO;AAAA,MAAA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUP,aAAM;AAAA,MAAA;QAEN,SAAA;AAAA,MACA;AAAA,MACA,SAAAC;AAAA,MACC,SAAGJ;AAAA,MAEH,GAAAD;AAAA,MAAA,UAAAM;AAAA,IACF;AAAA,EAEF;;"}

package/components/icon-tile/index.js

@@ -0,0 +1,50 @@
+import { jsxs as u, jsx as o } from "react/jsx-runtime";
+import N from "classnames";
+import { FlightIcon as t } from "../flight-icon/index.js";
+import e from "./style.module.scss.js";
+const f = {
+  small: 12,
+  medium: 16,
+  large: 16
+}, h = ({
+  size: i = "medium",
+  logo: r,
+  icon: m,
+  iconSecondary: s,
+  color: n = "neutral",
+  ...a
+}) => {
+  const c = r ? `${r}-color` : m;
+  if (c) {
+    const l = i === "small" ? 16 : 24, d = r ? "logo" : "icon", p = r || n;
+    return /* @__PURE__ */ u(
+      "div",
+      {
+        className: N(
+          e["icon-tile"],
+          e[`type-${d}`],
+          e[`size-${i}`],
+          e[`color-${p}`]
+        ),
+        "aria-hidden": "true",
+        ...a,
+        children: [
+          /* @__PURE__ */ o("div", { className: r ? e.logo : e.icon, children: /* @__PURE__ */ o(t, { name: c, size: l, stretched: !0 }) }),
+          s && /* @__PURE__ */ o("div", { className: e.extra, children: /* @__PURE__ */ o(
+            t,
+            {
+              name: s,
+              size: f[i],
+              color: "var(--mds-color-foreground-strong)"
+            }
+          ) })
+        ]
+      }
+    );
+  }
+};
+h.displayName = "IconTile";
+export {
+  h as IconTile
+};
+//# sourceMappingURL=index.js.map