@d4gger/design-system 2.7.0 → 3.0.0

package/dist/components/phone-input.css

@@ -0,0 +1,230 @@
+
+@import '../../_internal/baseInput.css';
+
+.dsx-phone-input {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--dsx-space-xs);
+  width: 100%;
+}
+
+.dsx-phone-input__label {
+  display: block;
+}
+
+.dsx-phone-input__shell {
+  display: flex;
+  align-items: stretch;
+  gap: var(--dsx-space-xs);
+  border-radius: var(--dsx-rounded-md);
+  border: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
+  background: var(--dsx-color-surface);
+  transition:
+    border-color var(--dsx-motion-duration-fast, 150ms) var(--dsx-motion-easing-standard, ease),
+    box-shadow var(--dsx-motion-duration-fast, 150ms) var(--dsx-motion-easing-standard, ease);
+}
+
+.dsx-phone-input__shell:focus-within {
+  border-color: var(--dsx-color-primary);
+  box-shadow: var(--dsx-shadow-focus-ring);
+}
+
+.dsx-phone-input--invalid .dsx-phone-input__shell {
+  border-color: var(--dsx-color-error);
+}
+
+.dsx-phone-input__country {
+  position: relative;
+  display: flex;
+  flex: none;
+  align-self: stretch;
+}
+
+/* Bleed the divider into the shell padding so it runs edge to edge
+   at every density instead of floating in the content box. */
+.dsx-phone-input--sm .dsx-phone-input__country {
+  margin-block: calc(-1 * var(--dsx-space-xs));
+}
+
+.dsx-phone-input--md .dsx-phone-input__country {
+  margin-block: calc(-1 * var(--dsx-space-sm));
+}
+
+.dsx-phone-input--lg .dsx-phone-input__country {
+  margin-block: calc(-1 * var(--dsx-space-md));
+}
+
+.dsx-phone-input__country-button {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dsx-space-1, 4px);
+  border: 0;
+  border-inline-end: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
+  background: transparent;
+  color: var(--dsx-color-on-surface);
+  font-family: var(--dsx-typography-body-medium-font-family), sans-serif;
+  font-size: var(--dsx-typography-body-small-font-size);
+  outline: none;
+  cursor: pointer;
+  padding-inline: var(--dsx-space-sm);
+}
+
+.dsx-phone-input__country-button:disabled {
+  cursor: var(--dsx-cursor-disabled, not-allowed);
+  color: var(--dsx-color-disabled-text);
+}
+
+.dsx-phone-input__country-code {
+  font-weight: var(--dsx-typography-label-small-font-weight);
+  letter-spacing: var(--dsx-typography-label-small-letter-spacing, normal);
+}
+
+.dsx-phone-input__country-dial {
+  color: var(--dsx-color-on-surface-variant);
+}
+
+.dsx-phone-input__country-chevron {
+  color: var(--dsx-color-on-surface-variant);
+}
+
+.dsx-phone-input__flag {
+  font-size: var(--dsx-typography-body-small-font-size);
+  border-radius: 2px;
+}
+
+.dsx-phone-input__country-listbox {
+  position: absolute;
+  top: calc(100% + var(--dsx-space-xs));
+  left: 0;
+  z-index: var(--dsx-z-index-overlay-local);
+  width: 16rem;
+  max-height: 16rem;
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--dsx-rounded-md);
+  border: var(--dsx-border-width-sm) solid var(--dsx-panel-border-color);
+  background: var(--dsx-color-panel-translucent);
+  backdrop-filter: var(--dsx-effect-panel-glass-backdrop-filter);
+  box-shadow: var(--dsx-shadow-elevation-3);
+  overflow: hidden;
+}
+
+.dsx-phone-input__country-filter {
+  border: 0;
+  border-bottom: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
+  background: transparent;
+  color: var(--dsx-color-on-surface);
+  font-size: var(--dsx-typography-body-small-font-size);
+  padding: var(--dsx-space-sm);
+  outline: none;
+}
+
+.dsx-phone-input__country-options {
+  overflow-y: auto;
+  padding: var(--dsx-space-xs);
+}
+
+.dsx-phone-input__country-option {
+  display: flex;
+  align-items: center;
+  gap: var(--dsx-space-sm);
+  width: 100%;
+  border: 0;
+  border-radius: var(--dsx-rounded-sm);
+  background: transparent;
+  color: var(--dsx-color-on-surface);
+  font-size: var(--dsx-typography-body-small-font-size);
+  text-align: start;
+  padding: var(--dsx-space-xs) var(--dsx-space-sm);
+  cursor: pointer;
+}
+
+.dsx-phone-input__country-option:hover {
+  background: var(--dsx-effect-hover-layer);
+}
+
+.dsx-phone-input__country-option--selected {
+  background: var(--dsx-color-accent-surface);
+  color: var(--dsx-color-accent-indicator);
+}
+
+.dsx-phone-input__country-option-code {
+  flex: none;
+  width: 2rem;
+  font-weight: var(--dsx-typography-label-small-font-weight);
+}
+
+.dsx-phone-input__country-option-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dsx-phone-input__country-empty {
+  display: block;
+  color: var(--dsx-color-on-surface-variant);
+  font-size: var(--dsx-typography-body-small-font-size);
+  padding: var(--dsx-space-sm);
+}
+
+.dsx-phone-input__input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  background: transparent;
+  color: var(--dsx-color-on-surface);
+  font-family: var(--dsx-typography-body-medium-font-family), sans-serif;
+  font-size: var(--dsx-typography-body-medium-font-size);
+  outline: none;
+}
+
+.dsx-phone-input__input::placeholder {
+  color: var(--dsx-color-on-surface-variant);
+}
+
+.dsx-phone-input__input:disabled {
+  cursor: var(--dsx-cursor-disabled, not-allowed);
+  color: var(--dsx-color-disabled-text);
+}
+
+.dsx-phone-input__error {
+  color: var(--dsx-color-error);
+}
+
+.dsx-phone-input__helper {
+  color: var(--dsx-color-on-surface-variant);
+}
+
+.dsx-phone-input--sm .dsx-phone-input__shell {
+  min-height: var(--dsx-density-control-height-sm, var(--dsx-size-lg));
+  padding-block: var(--dsx-space-xs);
+}
+
+.dsx-phone-input--md .dsx-phone-input__shell {
+  min-height: var(--dsx-density-control-height, var(--dsx-size-xl));
+  padding-block: var(--dsx-space-sm);
+}
+
+.dsx-phone-input--lg .dsx-phone-input__shell {
+  min-height: var(--dsx-density-control-height-lg, var(--dsx-size-2xl));
+  padding-block: var(--dsx-space-md);
+}
+
+.dsx-phone-input--lg .dsx-phone-input__input {
+  font-size: var(--dsx-typography-body-large-font-size);
+}
+
+.dsx-phone-input--classic .dsx-phone-input__shell {
+  background: var(--dsx-color-surface-raised);
+  box-shadow: var(--dsx-shadow-elevation-2);
+}
+
+.dsx-phone-input--soft .dsx-phone-input__shell {
+  background: var(--dsx-color-surface-raised);
+  border-color: transparent;
+}
+
+.dsx-phone-input--soft .dsx-phone-input__shell:where(:focus-within) {
+  border-color: var(--dsx-color-primary);
+}

package/dist/components/phoneInput/PhoneInput.cjs

@@ -0,0 +1,247 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var PhoneInput_exports = {};
+__export(PhoneInput_exports, {
+  PhoneInput: () => PhoneInput
+});
+module.exports = __toCommonJS(PhoneInput_exports);
+var React = __toESM(require("react"), 1);
+var import_classnames = __toESM(require("classnames"), 1);
+var import_react_slot = require("@radix-ui/react-slot");
+var import_lucide_react = require("lucide-react");
+var import_input = __toESM(require("react-phone-number-input/input"), 1);
+var import_extractProps = require("../../_internal/helpers/extractProps");
+var import_phoneInput = require("./phoneInput.props");
+var import_Label = require("../label/Label");
+var import_Text = require("../text/Text");
+var import_jsx_runtime = require("react/jsx-runtime");
+function countryLabel(country) {
+  try {
+    const region = new Intl.DisplayNames(["en"], { type: "region" }).of(country);
+    return `${region} (+${(0, import_input.getCountryCallingCode)(country)})`;
+  } catch {
+    return `${country} (+${(0, import_input.getCountryCallingCode)(country)})`;
+  }
+}
+function detectCountry(value, fallback) {
+  if (!value) return fallback;
+  try {
+    const parsed = (0, import_input.parsePhoneNumber)(value);
+    if (parsed?.country) return parsed.country;
+  } catch {
+  }
+  return fallback;
+}
+const NationalInput = React.forwardRef(
+  ({ className, ...props }, forwardedRef) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "input",
+    {
+      ...props,
+      ref: forwardedRef,
+      type: "tel",
+      autoComplete: "tel",
+      inputMode: "tel",
+      className: (0, import_classnames.default)("dsx-phone-input__input", className)
+    }
+  )
+);
+NationalInput.displayName = "PhoneInputNationalInput";
+const PhoneInput = React.forwardRef((props, forwardedRef) => {
+  const {
+    asChild,
+    className,
+    countries,
+    defaultCountry = "US",
+    defaultValue,
+    density = "md",
+    disabled = false,
+    errorText,
+    helperText,
+    id,
+    invalid = false,
+    label,
+    onChange,
+    placeholder,
+    value: controlledValue,
+    variant = "surface",
+    ...phoneInputProps
+  } = (0, import_extractProps.extractProps)(props, import_phoneInput.phoneInputPropDefs);
+  const countryOptions = React.useMemo(
+    () => [...countries ?? (0, import_input.getCountries)()].sort((a, b) => countryLabel(a).localeCompare(countryLabel(b))),
+    [countries]
+  );
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : uncontrolledValue;
+  const [country, setCountry] = React.useState(() => detectCountry(defaultValue, defaultCountry));
+  const [countryOpen, setCountryOpen] = React.useState(false);
+  const [countryFilter, setCountryFilter] = React.useState("");
+  const countryListRef = React.useRef(null);
+  React.useEffect(() => {
+    if (controlledValue !== void 0) {
+      setCountry(detectCountry(controlledValue, defaultCountry));
+    }
+  }, [controlledValue, defaultCountry]);
+  React.useEffect(() => {
+    if (!countryOpen) return void 0;
+    const onPointerDown = (event) => {
+      if (countryListRef.current && !countryListRef.current.contains(event.target)) {
+        setCountryOpen(false);
+      }
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [countryOpen]);
+  const setValue = React.useCallback((nextValue) => {
+    if (!isControlled) {
+      setUncontrolledValue(nextValue);
+    }
+    if (nextValue) {
+      try {
+        const parsed = (0, import_input.parsePhoneNumber)(nextValue);
+        if (parsed?.country && parsed.country !== country && countryOptions.includes(parsed.country)) {
+          setCountry(parsed.country);
+        }
+      } catch {
+      }
+    }
+    onChange?.(nextValue);
+  }, [country, countryOptions, isControlled, onChange]);
+  const filteredCountries = React.useMemo(() => {
+    const query = countryFilter.trim().toLowerCase();
+    if (!query) return countryOptions;
+    return countryOptions.filter((option) => countryLabel(option).toLowerCase().includes(query));
+  }, [countryFilter, countryOptions]);
+  const handleCountryPick = React.useCallback((nextCountry) => {
+    setCountry(nextCountry);
+    setCountryOpen(false);
+    setCountryFilter("");
+  }, []);
+  const Comp = asChild ? import_react_slot.Slot : "div";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    Comp,
+    {
+      ...phoneInputProps,
+      ref: forwardedRef,
+      className: (0, import_classnames.default)(
+        "dsx-phone-input",
+        `dsx-phone-input--${density}`,
+        `dsx-phone-input--${variant}`,
+        invalid && "dsx-phone-input--invalid",
+        className
+      ),
+      "data-size": density,
+      "data-variant": variant,
+      children: [
+        label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Label.Label, { htmlFor: id, className: "dsx-phone-input__label", children: label }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dsx-phone-input__shell", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dsx-phone-input__country", ref: countryListRef, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "button",
+              {
+                type: "button",
+                className: "dsx-phone-input__country-button",
+                onClick: () => !disabled && setCountryOpen((open) => !open),
+                disabled,
+                "aria-haspopup": "listbox",
+                "aria-expanded": countryOpen,
+                "aria-label": "Country code",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": true, className: `flag:${country} dsx-phone-input__flag` }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dsx-phone-input__country-code", children: country }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "dsx-phone-input__country-dial", children: [
+                    "+",
+                    (0, import_input.getCountryCallingCode)(country)
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronDown, { size: 14, className: "dsx-phone-input__country-chevron" })
+                ]
+              }
+            ),
+            countryOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dsx-phone-input__country-listbox", role: "listbox", "aria-label": "Countries", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "input",
+                {
+                  className: "dsx-phone-input__country-filter",
+                  placeholder: "Search countries",
+                  "aria-label": "Search countries",
+                  value: countryFilter,
+                  onChange: (e) => setCountryFilter(e.target.value),
+                  onKeyDown: (e) => {
+                    if (e.key === "Escape") setCountryOpen(false);
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dsx-phone-input__country-options", children: [
+                filteredCountries.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "button",
+                  {
+                    type: "button",
+                    role: "option",
+                    "aria-selected": option === country,
+                    className: (0, import_classnames.default)(
+                      "dsx-phone-input__country-option",
+                      option === country && "dsx-phone-input__country-option--selected"
+                    ),
+                    onClick: () => handleCountryPick(option),
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": true, className: `flag:${option} dsx-phone-input__flag` }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dsx-phone-input__country-option-code", children: option }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dsx-phone-input__country-option-name", children: countryLabel(option) })
+                    ]
+                  },
+                  option
+                )),
+                filteredCountries.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dsx-phone-input__country-empty", children: "No countries match" }) : null
+              ] })
+            ] }) : null
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_input.default,
+            {
+              id,
+              country: countryOptions.includes(country) ? country : defaultCountry,
+              value,
+              onChange: (nextValue) => setValue(nextValue),
+              inputComponent: NationalInput,
+              placeholder,
+              disabled,
+              "aria-invalid": invalid || void 0,
+              smartCaret: true
+            }
+          )
+        ] }),
+        errorText && invalid ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { variant: "label-small", className: "dsx-phone-input__error", children: errorText }) : null,
+        helperText && !invalid ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { variant: "label-small", tone: "muted", className: "dsx-phone-input__helper", children: helperText }) : null
+      ]
+    }
+  );
+});
+PhoneInput.displayName = "PhoneInput";
+//# sourceMappingURL=PhoneInput.cjs.map

package/dist/components/phoneInput/PhoneInput.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/phoneInput/PhoneInput.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\nimport { ChevronDown } from 'lucide-react'\nimport PhoneInputInput, { getCountries, getCountryCallingCode, parsePhoneNumber } from 'react-phone-number-input/input'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { phoneInputPropDefs } from './phoneInput.props'\nimport { Label } from '../label/Label'\nimport { Text } from '../text/Text'\n\nimport type { Country as CountryCode, Value } from 'react-phone-number-input/input'\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype PhoneInputElement = React.ComponentRef<'div'>\ntype PhoneInputOwnProps = GetPropDefTypes<typeof phoneInputPropDefs> & {\n  id?: string\n  label?: string\n  helperText?: string\n  errorText?: string\n  value?: string\n  defaultValue?: string\n  defaultCountry?: CountryCode\n  countries?: readonly CountryCode[]\n  placeholder?: string\n  disabled?: boolean\n  onChange?: (value: string | undefined) => void\n  invalid?: boolean\n}\n\ninterface PhoneInputProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'defaultValue' | 'onChange'>, PhoneInputOwnProps {}\n\nfunction countryLabel(country: CountryCode) {\n  try {\n    const region = new Intl.DisplayNames(['en'], { type: 'region' }).of(country)\n    return `${region} (+${getCountryCallingCode(country)})`\n  } catch {\n    return `${country} (+${getCountryCallingCode(country)})`\n  }\n}\n\nfunction detectCountry(value: string | undefined, fallback: CountryCode): CountryCode {\n  if (!value) return fallback\n  try {\n    const parsed = parsePhoneNumber(value)\n    if (parsed?.country) return parsed.country\n  } catch {\n  }\n  return fallback\n}\n\ntype NationalInputProps = React.ComponentPropsWithoutRef<'input'>\n\nconst NationalInput = React.forwardRef<HTMLInputElement, NationalInputProps>(\n  ({ className, ...props }, forwardedRef) => (\n    <input\n      {...props}\n      ref={forwardedRef}\n      type=\"tel\"\n      autoComplete=\"tel\"\n      inputMode=\"tel\"\n      className={classNames('dsx-phone-input__input', className)}\n    />\n  ),\n)\nNationalInput.displayName = 'PhoneInputNationalInput'\n\nconst PhoneInput = React.forwardRef<PhoneInputElement, PhoneInputProps>((props, forwardedRef) => {\n  const {\n    asChild,\n    className,\n    countries,\n    defaultCountry = 'US',\n    defaultValue,\n    density = 'md',\n    disabled = false,\n    errorText,\n    helperText,\n    id,\n    invalid = false,\n    label,\n    onChange,\n    placeholder,\n    value: controlledValue,\n    variant = 'surface',\n    ...phoneInputProps\n  } = extractProps(props, phoneInputPropDefs)\n\n  const countryOptions = React.useMemo(\n    () => [...(countries ?? getCountries())].sort((a, b) => countryLabel(a).localeCompare(countryLabel(b))),\n    [countries],\n  )\n\n  const [uncontrolledValue, setUncontrolledValue] = React.useState<string | undefined>(defaultValue)\n  const isControlled = controlledValue !== undefined\n  const value = (isControlled ? controlledValue : uncontrolledValue) as Value\n\n  const [country, setCountry] = React.useState<CountryCode>(() => detectCountry(defaultValue, defaultCountry))\n  const [countryOpen, setCountryOpen] = React.useState(false)\n  const [countryFilter, setCountryFilter] = React.useState('')\n  const countryListRef = React.useRef<HTMLDivElement>(null)\n\n  React.useEffect(() => {\n    if (controlledValue !== undefined) {\n      setCountry(detectCountry(controlledValue, defaultCountry))\n    }\n  }, [controlledValue, defaultCountry])\n\n  React.useEffect(() => {\n    if (!countryOpen) return undefined\n    const onPointerDown = (event: PointerEvent) => {\n      if (countryListRef.current && !countryListRef.current.contains(event.target as Node)) {\n        setCountryOpen(false)\n      }\n    }\n    document.addEventListener('pointerdown', onPointerDown)\n    return () => document.removeEventListener('pointerdown', onPointerDown)\n  }, [countryOpen])\n\n  const setValue = React.useCallback((nextValue: string | undefined) => {\n    if (!isControlled) {\n      setUncontrolledValue(nextValue)\n    }\n    if (nextValue) {\n      try {\n        const parsed = parsePhoneNumber(nextValue)\n        if (parsed?.country && parsed.country !== country && countryOptions.includes(parsed.country)) {\n          setCountry(parsed.country)\n        }\n      } catch {\n      }\n    }\n    onChange?.(nextValue)\n  }, [country, countryOptions, isControlled, onChange])\n\n  const filteredCountries = React.useMemo(() => {\n    const query = countryFilter.trim().toLowerCase()\n    if (!query) return countryOptions\n    return countryOptions.filter((option) => countryLabel(option).toLowerCase().includes(query))\n  }, [countryFilter, countryOptions])\n\n  const handleCountryPick = React.useCallback((nextCountry: CountryCode) => {\n    setCountry(nextCountry)\n    setCountryOpen(false)\n    setCountryFilter('')\n  }, [])\n\n  const Comp = asChild ? Slot : 'div'\n\n  return (\n    <Comp\n      {...phoneInputProps}\n      ref={forwardedRef}\n      className={classNames(\n        'dsx-phone-input',\n        `dsx-phone-input--${density}`,\n        `dsx-phone-input--${variant}`,\n        invalid && 'dsx-phone-input--invalid',\n        className,\n      )}\n      data-size={density}\n      data-variant={variant}\n    >\n      {label ? (\n        <Label htmlFor={id} className=\"dsx-phone-input__label\">\n          {label}\n        </Label>\n      ) : null}\n      <div className=\"dsx-phone-input__shell\">\n        <div className=\"dsx-phone-input__country\" ref={countryListRef}>\n          <button\n            type=\"button\"\n            className=\"dsx-phone-input__country-button\"\n            onClick={() => !disabled && setCountryOpen((open) => !open)}\n            disabled={disabled}\n            aria-haspopup=\"listbox\"\n            aria-expanded={countryOpen}\n            aria-label=\"Country code\"\n          >\n            <span aria-hidden className={`flag:${country} dsx-phone-input__flag`} />\n            <span className=\"dsx-phone-input__country-code\">{country}</span>\n            <span className=\"dsx-phone-input__country-dial\">+{getCountryCallingCode(country)}</span>\n            <ChevronDown size={14} className=\"dsx-phone-input__country-chevron\" />\n          </button>\n          {countryOpen ? (\n            <div className=\"dsx-phone-input__country-listbox\" role=\"listbox\" aria-label=\"Countries\">\n              <input\n                className=\"dsx-phone-input__country-filter\"\n                placeholder=\"Search countries\"\n                aria-label=\"Search countries\"\n                value={countryFilter}\n                onChange={(e) => setCountryFilter(e.target.value)}\n                onKeyDown={(e) => {\n                  if (e.key === 'Escape') setCountryOpen(false)\n                }}\n              />\n              <div className=\"dsx-phone-input__country-options\">\n                {filteredCountries.map((option) => (\n                  <button\n                    key={option}\n                    type=\"button\"\n                    role=\"option\"\n                    aria-selected={option === country}\n                    className={classNames(\n                      'dsx-phone-input__country-option',\n                      option === country && 'dsx-phone-input__country-option--selected',\n                    )}\n                    onClick={() => handleCountryPick(option)}\n                  >\n                    <span aria-hidden className={`flag:${option} dsx-phone-input__flag`} />\n                    <span className=\"dsx-phone-input__country-option-code\">{option}</span>\n                    <span className=\"dsx-phone-input__country-option-name\">{countryLabel(option)}</span>\n                  </button>\n                ))}\n                {filteredCountries.length === 0 ? (\n                  <span className=\"dsx-phone-input__country-empty\">No countries match</span>\n                ) : null}\n              </div>\n            </div>\n          ) : null}\n        </div>\n        <PhoneInputInput\n          id={id}\n          country={countryOptions.includes(country) ? country : defaultCountry}\n          value={value}\n          onChange={(nextValue) => setValue(nextValue as string | undefined)}\n          inputComponent={NationalInput}\n          placeholder={placeholder}\n          disabled={disabled}\n          aria-invalid={invalid || undefined}\n          smartCaret\n        />\n      </div>\n      {errorText && invalid ? (\n        <Text variant=\"label-small\" className=\"dsx-phone-input__error\">\n          {errorText}\n        </Text>\n      ) : null}\n      {helperText && !invalid ? (\n        <Text variant=\"label-small\" tone=\"muted\" className=\"dsx-phone-input__helper\">\n          {helperText}\n        </Text>\n      ) : null}\n    </Comp>\n  )\n})\nPhoneInput.displayName = 'PhoneInput'\n\nexport { PhoneInput }\nexport type { PhoneInputProps }\n"],
+  "mappings": "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",
+  "names": ["classNames", "PhoneInputInput"]
+}

package/dist/components/phoneInput/PhoneInput.d.cts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { phoneInputPropDefs } from './phoneInput.props.cjs';
+import type { Country as CountryCode } from 'react-phone-number-input/input';
+import type { GetPropDefTypes } from '../../_internal/props/propDef.cjs';
+type PhoneInputOwnProps = GetPropDefTypes<typeof phoneInputPropDefs> & {
+    id?: string;
+    label?: string;
+    helperText?: string;
+    errorText?: string;
+    value?: string;
+    defaultValue?: string;
+    defaultCountry?: CountryCode;
+    countries?: readonly CountryCode[];
+    placeholder?: string;
+    disabled?: boolean;
+    onChange?: (value: string | undefined) => void;
+    invalid?: boolean;
+};
+interface PhoneInputProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'defaultValue' | 'onChange'>, PhoneInputOwnProps {
+}
+declare const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps & React.RefAttributes<HTMLDivElement>>;
+export { PhoneInput };
+export type { PhoneInputProps };
+//# sourceMappingURL=PhoneInput.d.cts.map

package/dist/components/phoneInput/PhoneInput.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneInput.d.cts","sourceRoot":"","sources":["../../../src/components/phoneInput/PhoneInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAIvD,OAAO,KAAK,EAAE,OAAO,IAAI,WAAW,EAAS,MAAM,gCAAgC,CAAA;AACnF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAGpE,KAAK,kBAAkB,GAAG,eAAe,CAAC,OAAO,kBAAkB,CAAC,GAAG;IACrE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,cAAc,CAAC,EAAE,WAAW,CAAA;IAC5B,SAAS,CAAC,EAAE,SAAS,WAAW,EAAE,CAAA;IAClC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAA;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,UAAU,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,UAAU,CAAC,EAAE,kBAAkB;CAAG;AAqCjI,QAAA,MAAM,UAAU,wFAkLd,CAAA;AAGF,OAAO,EAAE,UAAU,EAAE,CAAA;AACrB,YAAY,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/phoneInput/PhoneInput.d.mts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { phoneInputPropDefs } from './phoneInput.props.js';
+import type { Country as CountryCode } from 'react-phone-number-input/input';
+import type { GetPropDefTypes } from '../../_internal/props/propDef.js';
+type PhoneInputOwnProps = GetPropDefTypes<typeof phoneInputPropDefs> & {
+    id?: string;
+    label?: string;
+    helperText?: string;
+    errorText?: string;
+    value?: string;
+    defaultValue?: string;
+    defaultCountry?: CountryCode;
+    countries?: readonly CountryCode[];
+    placeholder?: string;
+    disabled?: boolean;
+    onChange?: (value: string | undefined) => void;
+    invalid?: boolean;
+};
+interface PhoneInputProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'defaultValue' | 'onChange'>, PhoneInputOwnProps {
+}
+declare const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps & React.RefAttributes<HTMLDivElement>>;
+export { PhoneInput };
+export type { PhoneInputProps };
+//# sourceMappingURL=PhoneInput.d.mts.map

package/dist/components/phoneInput/PhoneInput.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneInput.d.mts","sourceRoot":"","sources":["../../../src/components/phoneInput/PhoneInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAIvD,OAAO,KAAK,EAAE,OAAO,IAAI,WAAW,EAAS,MAAM,gCAAgC,CAAA;AACnF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAGpE,KAAK,kBAAkB,GAAG,eAAe,CAAC,OAAO,kBAAkB,CAAC,GAAG;IACrE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,cAAc,CAAC,EAAE,WAAW,CAAA;IAC5B,SAAS,CAAC,EAAE,SAAS,WAAW,EAAE,CAAA;IAClC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAA;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,UAAU,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,UAAU,CAAC,EAAE,kBAAkB;CAAG;AAqCjI,QAAA,MAAM,UAAU,wFAkLd,CAAA;AAGF,OAAO,EAAE,UAAU,EAAE,CAAA;AACrB,YAAY,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/phoneInput/PhoneInput.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { phoneInputPropDefs } from './phoneInput.props.js';
+import type { Country as CountryCode } from 'react-phone-number-input/input';
+import type { GetPropDefTypes } from '../../_internal/props/propDef.js';
+type PhoneInputOwnProps = GetPropDefTypes<typeof phoneInputPropDefs> & {
+    id?: string;
+    label?: string;
+    helperText?: string;
+    errorText?: string;
+    value?: string;
+    defaultValue?: string;
+    defaultCountry?: CountryCode;
+    countries?: readonly CountryCode[];
+    placeholder?: string;
+    disabled?: boolean;
+    onChange?: (value: string | undefined) => void;
+    invalid?: boolean;
+};
+interface PhoneInputProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'defaultValue' | 'onChange'>, PhoneInputOwnProps {
+}
+declare const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps & React.RefAttributes<HTMLDivElement>>;
+export { PhoneInput };
+export type { PhoneInputProps };
+//# sourceMappingURL=PhoneInput.d.ts.map

package/dist/components/phoneInput/PhoneInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/components/phoneInput/PhoneInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAIvD,OAAO,KAAK,EAAE,OAAO,IAAI,WAAW,EAAS,MAAM,gCAAgC,CAAA;AACnF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAGpE,KAAK,kBAAkB,GAAG,eAAe,CAAC,OAAO,kBAAkB,CAAC,GAAG;IACrE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,cAAc,CAAC,EAAE,WAAW,CAAA;IAC5B,SAAS,CAAC,EAAE,SAAS,WAAW,EAAE,CAAA;IAClC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAA;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,UAAU,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,UAAU,CAAC,EAAE,kBAAkB;CAAG;AAqCjI,QAAA,MAAM,UAAU,wFAkLd,CAAA;AAGF,OAAO,EAAE,UAAU,EAAE,CAAA;AACrB,YAAY,EAAE,eAAe,EAAE,CAAA"}