@d4gger/design-system 2.7.0 → 3.0.0

package/dist/components/phoneInput/PhoneInput.js

@@ -0,0 +1,217 @@
+"use client";
+import * as React from "react";
+import classNames from "classnames";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronDown } from "lucide-react";
+import PhoneInputInput, { getCountries, getCountryCallingCode, parsePhoneNumber } from "react-phone-number-input/input";
+import { extractProps } from "../../_internal/helpers/extractProps.js";
+import { phoneInputPropDefs } from "./phoneInput.props.js";
+import { Label } from "../label/Label.js";
+import { Text } from "../text/Text.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function countryLabel(country) {
+  try {
+    const region = new Intl.DisplayNames(["en"], { type: "region" }).of(country);
+    return `${region} (+${getCountryCallingCode(country)})`;
+  } catch {
+    return `${country} (+${getCountryCallingCode(country)})`;
+  }
+}
+function detectCountry(value, fallback) {
+  if (!value) return fallback;
+  try {
+    const parsed = parsePhoneNumber(value);
+    if (parsed?.country) return parsed.country;
+  } catch {
+  }
+  return fallback;
+}
+const NationalInput = React.forwardRef(
+  ({ className, ...props }, forwardedRef) => /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...props,
+      ref: forwardedRef,
+      type: "tel",
+      autoComplete: "tel",
+      inputMode: "tel",
+      className: classNames("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
+  } = extractProps(props, phoneInputPropDefs);
+  const countryOptions = React.useMemo(
+    () => [...countries ?? 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 = 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 ? Slot : "div";
+  return /* @__PURE__ */ jsxs(
+    Comp,
+    {
+      ...phoneInputProps,
+      ref: forwardedRef,
+      className: classNames(
+        "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__ */ jsx(Label, { htmlFor: id, className: "dsx-phone-input__label", children: label }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "dsx-phone-input__shell", children: [
+          /* @__PURE__ */ jsxs("div", { className: "dsx-phone-input__country", ref: countryListRef, children: [
+            /* @__PURE__ */ 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__ */ jsx("span", { "aria-hidden": true, className: `flag:${country} dsx-phone-input__flag` }),
+                  /* @__PURE__ */ jsx("span", { className: "dsx-phone-input__country-code", children: country }),
+                  /* @__PURE__ */ jsxs("span", { className: "dsx-phone-input__country-dial", children: [
+                    "+",
+                    getCountryCallingCode(country)
+                  ] }),
+                  /* @__PURE__ */ jsx(ChevronDown, { size: 14, className: "dsx-phone-input__country-chevron" })
+                ]
+              }
+            ),
+            countryOpen ? /* @__PURE__ */ jsxs("div", { className: "dsx-phone-input__country-listbox", role: "listbox", "aria-label": "Countries", children: [
+              /* @__PURE__ */ 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__ */ jsxs("div", { className: "dsx-phone-input__country-options", children: [
+                filteredCountries.map((option) => /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    role: "option",
+                    "aria-selected": option === country,
+                    className: classNames(
+                      "dsx-phone-input__country-option",
+                      option === country && "dsx-phone-input__country-option--selected"
+                    ),
+                    onClick: () => handleCountryPick(option),
+                    children: [
+                      /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: `flag:${option} dsx-phone-input__flag` }),
+                      /* @__PURE__ */ jsx("span", { className: "dsx-phone-input__country-option-code", children: option }),
+                      /* @__PURE__ */ jsx("span", { className: "dsx-phone-input__country-option-name", children: countryLabel(option) })
+                    ]
+                  },
+                  option
+                )),
+                filteredCountries.length === 0 ? /* @__PURE__ */ jsx("span", { className: "dsx-phone-input__country-empty", children: "No countries match" }) : null
+              ] })
+            ] }) : null
+          ] }),
+          /* @__PURE__ */ jsx(
+            PhoneInputInput,
+            {
+              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__ */ jsx(Text, { variant: "label-small", className: "dsx-phone-input__error", children: errorText }) : null,
+        helperText && !invalid ? /* @__PURE__ */ jsx(Text, { variant: "label-small", tone: "muted", className: "dsx-phone-input__helper", children: helperText }) : null
+      ]
+    }
+  );
+});
+PhoneInput.displayName = "PhoneInput";
+export {
+  PhoneInput
+};
+//# sourceMappingURL=PhoneInput.js.map

package/dist/components/phoneInput/PhoneInput.js.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": []
+}

package/dist/components/phoneInput/phoneInput.props.cjs

@@ -0,0 +1,40 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var phoneInput_props_exports = {};
+__export(phoneInput_props_exports, {
+  phoneInputPropDefs: () => phoneInputPropDefs
+});
+module.exports = __toCommonJS(phoneInput_props_exports);
+var import_asChild = require("../../_internal/props/asChild.prop");
+const phoneInputDensities = ["sm", "md", "lg"];
+const phoneInputVariants = ["surface", "classic", "soft"];
+const phoneInputPropDefs = {
+  ...import_asChild.asChildPropDef,
+  density: {
+    type: "enum",
+    values: phoneInputDensities,
+    default: "md"
+  },
+  variant: {
+    type: "enum",
+    values: phoneInputVariants,
+    default: "surface"
+  }
+};
+//# sourceMappingURL=phoneInput.props.cjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/phoneInput/phoneInput.props.ts"],
+  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst phoneInputDensities = ['sm', 'md', 'lg'] as const\nconst phoneInputVariants = ['surface', 'classic', 'soft'] as const\n\nconst phoneInputPropDefs = {\n  ...asChildPropDef,\n  density: {\n    type: 'enum',\n    values: phoneInputDensities,\n    default: 'md',\n  },\n  variant: {\n    type: 'enum',\n    values: phoneInputVariants,\n    default: 'surface',\n  },\n} satisfies {\n  asChild: PropDef\n  density: PropDef<(typeof phoneInputDensities)[number]>\n  variant: PropDef<(typeof phoneInputVariants)[number]>\n}\n\nexport { phoneInputPropDefs }\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA+B;AAI/B,MAAM,sBAAsB,CAAC,MAAM,MAAM,IAAI;AAC7C,MAAM,qBAAqB,CAAC,WAAW,WAAW,MAAM;AAExD,MAAM,qBAAqB;AAAA,EACzB,GAAG;AAAA,EACH,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;",
+  "names": []
+}

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

@@ -0,0 +1,18 @@
+declare const phoneInputPropDefs: {
+    density: {
+        type: "enum";
+        values: readonly ["sm", "md", "lg"];
+        default: "md";
+    };
+    variant: {
+        type: "enum";
+        values: readonly ["surface", "classic", "soft"];
+        default: "surface";
+    };
+    asChild: {
+        type: "boolean";
+        default: false;
+    };
+};
+export { phoneInputPropDefs };
+//# sourceMappingURL=phoneInput.props.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"phoneInput.props.d.cts","sourceRoot":"","sources":["../../../src/components/phoneInput/phoneInput.props.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,kBAAkB;;;;;;;;;;;;;;;CAgBvB,CAAA;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAA"}

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

@@ -0,0 +1,18 @@
+declare const phoneInputPropDefs: {
+    density: {
+        type: "enum";
+        values: readonly ["sm", "md", "lg"];
+        default: "md";
+    };
+    variant: {
+        type: "enum";
+        values: readonly ["surface", "classic", "soft"];
+        default: "surface";
+    };
+    asChild: {
+        type: "boolean";
+        default: false;
+    };
+};
+export { phoneInputPropDefs };
+//# sourceMappingURL=phoneInput.props.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"phoneInput.props.d.mts","sourceRoot":"","sources":["../../../src/components/phoneInput/phoneInput.props.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,kBAAkB;;;;;;;;;;;;;;;CAgBvB,CAAA;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAA"}

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

@@ -0,0 +1,18 @@
+declare const phoneInputPropDefs: {
+    density: {
+        type: "enum";
+        values: readonly ["sm", "md", "lg"];
+        default: "md";
+    };
+    variant: {
+        type: "enum";
+        values: readonly ["surface", "classic", "soft"];
+        default: "surface";
+    };
+    asChild: {
+        type: "boolean";
+        default: false;
+    };
+};
+export { phoneInputPropDefs };
+//# sourceMappingURL=phoneInput.props.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"phoneInput.props.d.ts","sourceRoot":"","sources":["../../../src/components/phoneInput/phoneInput.props.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,kBAAkB;;;;;;;;;;;;;;;CAgBvB,CAAA;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAA"}

package/dist/components/phoneInput/phoneInput.props.js

@@ -0,0 +1,20 @@
+import { asChildPropDef } from "../../_internal/props/asChild.prop.js";
+const phoneInputDensities = ["sm", "md", "lg"];
+const phoneInputVariants = ["surface", "classic", "soft"];
+const phoneInputPropDefs = {
+  ...asChildPropDef,
+  density: {
+    type: "enum",
+    values: phoneInputDensities,
+    default: "md"
+  },
+  variant: {
+    type: "enum",
+    values: phoneInputVariants,
+    default: "surface"
+  }
+};
+export {
+  phoneInputPropDefs
+};
+//# sourceMappingURL=phoneInput.props.js.map

package/dist/components/phoneInput/phoneInput.props.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/phoneInput/phoneInput.props.ts"],
+  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst phoneInputDensities = ['sm', 'md', 'lg'] as const\nconst phoneInputVariants = ['surface', 'classic', 'soft'] as const\n\nconst phoneInputPropDefs = {\n  ...asChildPropDef,\n  density: {\n    type: 'enum',\n    values: phoneInputDensities,\n    default: 'md',\n  },\n  variant: {\n    type: 'enum',\n    values: phoneInputVariants,\n    default: 'surface',\n  },\n} satisfies {\n  asChild: PropDef\n  density: PropDef<(typeof phoneInputDensities)[number]>\n  variant: PropDef<(typeof phoneInputVariants)[number]>\n}\n\nexport { phoneInputPropDefs }\n"],
+  "mappings": "AAAA,SAAS,sBAAsB;AAI/B,MAAM,sBAAsB,CAAC,MAAM,MAAM,IAAI;AAC7C,MAAM,qBAAqB,CAAC,WAAW,WAAW,MAAM;AAExD,MAAM,qBAAqB;AAAA,EACzB,GAAG;AAAA,EACH,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;",
+  "names": []
+}

package/dist/components/pills/Pills.cjs

@@ -40,10 +40,15 @@ var import_Icon = require("../icon/Icon");
 var import_pills = require("./pills.props");
 var import_jsx_runtime = require("react/jsx-runtime");
 const PillsContext = React.createContext({});
+const rootVariantMap = {
+  solid: "default",
+  soft: "soft",
+  outline: "outline"
+};
 const Pills = React.forwardRef(({ children, ...props }, forwardedRef) => {
   const { asChild, className, color, radius, size = "md", variant = "solid", ...pillsProps } = (0, import_extractProps.extractProps)(props, import_pills.pillsPropDefs);
   const Comp = asChild ? import_react_slot.Slot : "ul";
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PillsContext.Provider, { value: { size, color, radius }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PillsContext.Provider, { value: { size, variant: rootVariantMap[variant] ?? "default", color, radius }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     Comp,
     {
       ...pillsProps,
@@ -59,7 +64,7 @@ const Pills = React.forwardRef(({ children, ...props }, forwardedRef) => {
 });
 Pills.displayName = "Pills";
 const Pill = React.forwardRef(
-  ({ children, onRemove, size: sizeProp, color: colorProp, radius: radiusProp, ...props }, forwardedRef) => {
+  ({ children, onRemove, size: sizeProp, color: colorProp, radius: radiusProp, variant: variantProp, ...props }, forwardedRef) => {
     const context = React.useContext(PillsContext);
     const {
       asChild,
@@ -68,11 +73,13 @@ const Pill = React.forwardRef(
       size = "md",
       color,
       radius,
+      tone,
       removable = false,
       ...pillProps
     } = (0, import_extractProps.extractProps)(
       {
         ...props,
+        variant: variantProp ?? context.variant,
         size: sizeProp ?? context.size,
         color: colorProp ?? context.color,
         radius: radiusProp ?? context.radius
@@ -89,6 +96,7 @@ const Pill = React.forwardRef(
           "dsx-pill",
           variant === "default" && "dsx-pill--default",
           variant === "secondary" && "dsx-pill--secondary",
+          variant === "soft" && "dsx-pill--soft",
           variant === "destructive" && "dsx-pill--destructive",
           variant === "outline" && "dsx-pill--outline",
           variant === "ghost" && "dsx-pill--ghost",
@@ -100,6 +108,7 @@ const Pill = React.forwardRef(
         ),
         "data-accent-color": color,
         "data-radius": radius,
+        "data-tone": tone,
         children: [
           children,
           removable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/components/pills/Pills.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/pills/Pills.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { Icon } from '../icon/Icon'\nimport {\n  pillsPropDefs,\n  pillPropDefs,\n} from './pills.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype PillsOwnProps = GetPropDefTypes<typeof pillsPropDefs>\ntype PillOwnProps = GetPropDefTypes<typeof pillPropDefs>\n\ninterface PillsProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'color'>, PillsOwnProps {}\ninterface PillProps extends Omit<React.HTMLAttributes<HTMLLIElement>, 'color'>, PillOwnProps {\n  onRemove?: () => void\n}\n\ninterface PillsContextValue {\n  size?: PillOwnProps['size']\n  color?: PillOwnProps['color']\n  radius?: PillOwnProps['radius']\n}\n\nconst PillsContext = React.createContext<PillsContextValue>({})\n\nconst Pills = React.forwardRef<HTMLUListElement, PillsProps>(({ children, ...props }, forwardedRef) => {\n  const { asChild, className, color, radius, size = 'md', variant = 'solid', ...pillsProps } = extractProps(props, pillsPropDefs)\n  const Comp = asChild ? Slot : 'ul'\n\n  return (\n    <PillsContext.Provider value={{ size, color, radius }}>\n      <Comp\n        {...pillsProps}\n        ref={forwardedRef}\n        className={classNames('dsx-pills', className)}\n        data-accent-color={color}\n        data-radius={radius}\n        data-size={size}\n        data-variant={variant}\n      >\n        {children}\n      </Comp>\n    </PillsContext.Provider>\n  )\n})\nPills.displayName = 'Pills'\n\nconst Pill = React.forwardRef<HTMLLIElement, PillProps>(\n  ({ children, onRemove, size: sizeProp, color: colorProp, radius: radiusProp, ...props }, forwardedRef) => {\n    const context = React.useContext(PillsContext)\n    const {\n      asChild,\n      className,\n      variant = 'default',\n      size = 'md',\n      color,\n      radius,\n      removable = false,\n      ...pillProps\n    } = extractProps(\n      {\n        ...props,\n        size: sizeProp ?? context.size,\n        color: colorProp ?? context.color,\n        radius: radiusProp ?? context.radius,\n      },\n      pillPropDefs,\n    )\n    const Comp = asChild ? Slot : 'li'\n\n    return (\n      <Comp\n        {...pillProps}\n        ref={forwardedRef}\n        className={classNames(\n          'dsx-pill',\n          variant === 'default' && 'dsx-pill--default',\n          variant === 'secondary' && 'dsx-pill--secondary',\n          variant === 'destructive' && 'dsx-pill--destructive',\n          variant === 'outline' && 'dsx-pill--outline',\n          variant === 'ghost' && 'dsx-pill--ghost',\n          variant === 'link' && 'dsx-pill--link',\n          size === 'sm' && 'dsx-pill--sm',\n          size === 'md' && 'dsx-pill--md',\n          size === 'lg' && 'dsx-pill--lg',\n          className,\n        )}\n        data-accent-color={color}\n        data-radius={radius}\n      >\n        {children}\n        {removable ? (\n          <button\n            type=\"button\"\n            className=\"dsx-pill__remove\"\n            aria-label=\"Remove\"\n            onClick={onRemove}\n          >\n            <Icon name=\"x\" size=\"sm\" />\n          </button>\n        ) : null}\n      </Comp>\n    )\n  },\n)\nPill.displayName = 'Pill'\n\nconst PillsRoot: typeof Pills & {\n  Pill: typeof Pill\n} = Object.assign(Pills, {\n  Pill,\n})\n\nexport {\n  PillsRoot as Pills,\n  Pill,\n}\nexport type {\n  PillsProps,\n  PillProps,\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,wBAAuB;AACvB,wBAAqB;AAErB,0BAA6B;AAC7B,kBAAqB;AACrB,mBAGO;AA0BD;AARN,MAAM,eAAe,MAAM,cAAiC,CAAC,CAAC;AAE9D,MAAM,QAAQ,MAAM,WAAyC,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACrG,QAAM,EAAE,SAAS,WAAW,OAAO,QAAQ,OAAO,MAAM,UAAU,SAAS,GAAG,WAAW,QAAI,kCAAa,OAAO,0BAAa;AAC9H,QAAM,OAAO,UAAU,yBAAO;AAE9B,SACE,4CAAC,aAAa,UAAb,EAAsB,OAAO,EAAE,MAAM,OAAO,OAAO,GAClD;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,eAAW,kBAAAA,SAAW,aAAa,SAAS;AAAA,MAC5C,qBAAmB;AAAA,MACnB,eAAa;AAAA,MACb,aAAW;AAAA,MACX,gBAAc;AAAA,MAEb;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AACD,MAAM,cAAc;AAEpB,MAAM,OAAO,MAAM;AAAA,EACjB,CAAC,EAAE,UAAU,UAAU,MAAM,UAAU,OAAO,WAAW,QAAQ,YAAY,GAAG,MAAM,GAAG,iBAAiB;AACxG,UAAM,UAAU,MAAM,WAAW,YAAY;AAC7C,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,GAAG;AAAA,IACL,QAAI;AAAA,MACF;AAAA,QACE,GAAG;AAAA,QACH,MAAM,YAAY,QAAQ;AAAA,QAC1B,OAAO,aAAa,QAAQ;AAAA,QAC5B,QAAQ,cAAc,QAAQ;AAAA,MAChC;AAAA,MACA;AAAA,IACF;AACA,UAAM,OAAO,UAAU,yBAAO;AAE9B,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,eAAW,kBAAAA;AAAA,UACT;AAAA,UACA,YAAY,aAAa;AAAA,UACzB,YAAY,eAAe;AAAA,UAC3B,YAAY,iBAAiB;AAAA,UAC7B,YAAY,aAAa;AAAA,UACzB,YAAY,WAAW;AAAA,UACvB,YAAY,UAAU;AAAA,UACtB,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA,UACjB;AAAA,QACF;AAAA,QACA,qBAAmB;AAAA,QACnB,eAAa;AAAA,QAEZ;AAAA;AAAA,UACA,YACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAU;AAAA,cACV,cAAW;AAAA,cACX,SAAS;AAAA,cAET,sDAAC,oBAAK,MAAK,KAAI,MAAK,MAAK;AAAA;AAAA,UAC3B,IACE;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;AAEnB,MAAM,YAEF,OAAO,OAAO,OAAO;AAAA,EACvB;AACF,CAAC;",
+  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { Icon } from '../icon/Icon'\nimport {\n  pillsPropDefs,\n  pillPropDefs,\n} from './pills.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype PillsOwnProps = GetPropDefTypes<typeof pillsPropDefs>\ntype PillOwnProps = GetPropDefTypes<typeof pillPropDefs>\n\ninterface PillsProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'color'>, PillsOwnProps {}\ninterface PillProps extends Omit<React.HTMLAttributes<HTMLLIElement>, 'color'>, PillOwnProps {\n  onRemove?: () => void\n}\n\ninterface PillsContextValue {\n  size?: PillOwnProps['size']\n  variant?: PillOwnProps['variant']\n  color?: PillOwnProps['color']\n  radius?: PillOwnProps['radius']\n}\n\nconst PillsContext = React.createContext<PillsContextValue>({})\n\n// Root variant vocabulary (solid/soft/outline) mapped onto the item vocabulary\n// so the root prop cascades instead of writing a data attribute no CSS reads.\nconst rootVariantMap = {\n  solid: 'default',\n  soft: 'soft',\n  outline: 'outline',\n} as const\n\nconst Pills = React.forwardRef<HTMLUListElement, PillsProps>(({ children, ...props }, forwardedRef) => {\n  const { asChild, className, color, radius, size = 'md', variant = 'solid', ...pillsProps } = extractProps(props, pillsPropDefs)\n  const Comp = asChild ? Slot : 'ul'\n\n  return (\n    <PillsContext.Provider value={{ size, variant: rootVariantMap[variant] ?? 'default', color, radius }}>\n      <Comp\n        {...pillsProps}\n        ref={forwardedRef}\n        className={classNames('dsx-pills', className)}\n        data-accent-color={color}\n        data-radius={radius}\n        data-size={size}\n        data-variant={variant}\n      >\n        {children}\n      </Comp>\n    </PillsContext.Provider>\n  )\n})\nPills.displayName = 'Pills'\n\nconst Pill = React.forwardRef<HTMLLIElement, PillProps>(\n  ({ children, onRemove, size: sizeProp, color: colorProp, radius: radiusProp, variant: variantProp, ...props }, forwardedRef) => {\n    const context = React.useContext(PillsContext)\n    const {\n      asChild,\n      className,\n      variant = 'default',\n      size = 'md',\n      color,\n      radius,\n      tone,\n      removable = false,\n      ...pillProps\n    } = extractProps(\n      {\n        ...props,\n        variant: variantProp ?? context.variant,\n        size: sizeProp ?? context.size,\n        color: colorProp ?? context.color,\n        radius: radiusProp ?? context.radius,\n      },\n      pillPropDefs,\n    )\n    const Comp = asChild ? Slot : 'li'\n\n    return (\n      <Comp\n        {...pillProps}\n        ref={forwardedRef}\n        className={classNames(\n          'dsx-pill',\n          variant === 'default' && 'dsx-pill--default',\n          variant === 'secondary' && 'dsx-pill--secondary',\n          variant === 'soft' && 'dsx-pill--soft',\n          variant === 'destructive' && 'dsx-pill--destructive',\n          variant === 'outline' && 'dsx-pill--outline',\n          variant === 'ghost' && 'dsx-pill--ghost',\n          variant === 'link' && 'dsx-pill--link',\n          size === 'sm' && 'dsx-pill--sm',\n          size === 'md' && 'dsx-pill--md',\n          size === 'lg' && 'dsx-pill--lg',\n          className,\n        )}\n        data-accent-color={color}\n        data-radius={radius}\n        data-tone={tone}\n      >\n        {children}\n        {removable ? (\n          <button\n            type=\"button\"\n            className=\"dsx-pill__remove\"\n            aria-label=\"Remove\"\n            onClick={onRemove}\n          >\n            <Icon name=\"x\" size=\"sm\" />\n          </button>\n        ) : null}\n      </Comp>\n    )\n  },\n)\nPill.displayName = 'Pill'\n\nconst PillsRoot: typeof Pills & {\n  Pill: typeof Pill\n} = Object.assign(Pills, {\n  Pill,\n})\n\nexport {\n  PillsRoot as Pills,\n  Pill,\n}\nexport type {\n  PillsProps,\n  PillProps,\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,wBAAuB;AACvB,wBAAqB;AAErB,0BAA6B;AAC7B,kBAAqB;AACrB,mBAGO;AAmCD;AAhBN,MAAM,eAAe,MAAM,cAAiC,CAAC,CAAC;AAI9D,MAAM,iBAAiB;AAAA,EACrB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,SAAS;AACX;AAEA,MAAM,QAAQ,MAAM,WAAyC,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACrG,QAAM,EAAE,SAAS,WAAW,OAAO,QAAQ,OAAO,MAAM,UAAU,SAAS,GAAG,WAAW,QAAI,kCAAa,OAAO,0BAAa;AAC9H,QAAM,OAAO,UAAU,yBAAO;AAE9B,SACE,4CAAC,aAAa,UAAb,EAAsB,OAAO,EAAE,MAAM,SAAS,eAAe,OAAO,KAAK,WAAW,OAAO,OAAO,GACjG;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,eAAW,kBAAAA,SAAW,aAAa,SAAS;AAAA,MAC5C,qBAAmB;AAAA,MACnB,eAAa;AAAA,MACb,aAAW;AAAA,MACX,gBAAc;AAAA,MAEb;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AACD,MAAM,cAAc;AAEpB,MAAM,OAAO,MAAM;AAAA,EACjB,CAAC,EAAE,UAAU,UAAU,MAAM,UAAU,OAAO,WAAW,QAAQ,YAAY,SAAS,aAAa,GAAG,MAAM,GAAG,iBAAiB;AAC9H,UAAM,UAAU,MAAM,WAAW,YAAY;AAC7C,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,GAAG;AAAA,IACL,QAAI;AAAA,MACF;AAAA,QACE,GAAG;AAAA,QACH,SAAS,eAAe,QAAQ;AAAA,QAChC,MAAM,YAAY,QAAQ;AAAA,QAC1B,OAAO,aAAa,QAAQ;AAAA,QAC5B,QAAQ,cAAc,QAAQ;AAAA,MAChC;AAAA,MACA;AAAA,IACF;AACA,UAAM,OAAO,UAAU,yBAAO;AAE9B,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,eAAW,kBAAAA;AAAA,UACT;AAAA,UACA,YAAY,aAAa;AAAA,UACzB,YAAY,eAAe;AAAA,UAC3B,YAAY,UAAU;AAAA,UACtB,YAAY,iBAAiB;AAAA,UAC7B,YAAY,aAAa;AAAA,UACzB,YAAY,WAAW;AAAA,UACvB,YAAY,UAAU;AAAA,UACtB,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA,UACjB;AAAA,QACF;AAAA,QACA,qBAAmB;AAAA,QACnB,eAAa;AAAA,QACb,aAAW;AAAA,QAEV;AAAA;AAAA,UACA,YACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAU;AAAA,cACV,cAAW;AAAA,cACX,SAAS;AAAA,cAET,sDAAC,oBAAK,MAAK,KAAI,MAAK,MAAK;AAAA;AAAA,UAC3B,IACE;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;AAEnB,MAAM,YAEF,OAAO,OAAO,OAAO;AAAA,EACvB;AACF,CAAC;",
   "names": ["classNames"]
 }

package/dist/components/pills/Pills.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"Pills.d.cts","sourceRoot":"","sources":["../../../src/components/pills/Pills.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EACL,aAAa,EACb,YAAY,EACb,MAAM,eAAe,CAAA;AAEtB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,aAAa,GAAG,eAAe,CAAC,OAAO,aAAa,CAAC,CAAA;AAC1D,KAAK,YAAY,GAAG,eAAe,CAAC,OAAO,YAAY,CAAC,CAAA;AAExD,UAAU,UAAW,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,EAAE,aAAa;CAAG;AACpG,UAAU,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC,EAAE,YAAY;IAC1F,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAUD,QAAA,MAAM,KAAK,qFAmBT,CAAA;AAGF,QAAA,MAAM,IAAI,iFAyDT,CAAA;AAGD,QAAA,MAAM,SAAS,EAAE,OAAO,KAAK,GAAG;IAC9B,IAAI,EAAE,OAAO,IAAI,CAAA;CAGjB,CAAA;AAEF,OAAO,EACL,SAAS,IAAI,KAAK,EAClB,IAAI,GACL,CAAA;AACD,YAAY,EACV,UAAU,EACV,SAAS,GACV,CAAA"}
+{"version":3,"file":"Pills.d.cts","sourceRoot":"","sources":["../../../src/components/pills/Pills.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EACL,aAAa,EACb,YAAY,EACb,MAAM,eAAe,CAAA;AAEtB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,aAAa,GAAG,eAAe,CAAC,OAAO,aAAa,CAAC,CAAA;AAC1D,KAAK,YAAY,GAAG,eAAe,CAAC,OAAO,YAAY,CAAC,CAAA;AAExD,UAAU,UAAW,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,EAAE,aAAa;CAAG;AACpG,UAAU,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC,EAAE,YAAY;IAC1F,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAmBD,QAAA,MAAM,KAAK,qFAmBT,CAAA;AAGF,QAAA,MAAM,IAAI,iFA6DT,CAAA;AAGD,QAAA,MAAM,SAAS,EAAE,OAAO,KAAK,GAAG;IAC9B,IAAI,EAAE,OAAO,IAAI,CAAA;CAGjB,CAAA;AAEF,OAAO,EACL,SAAS,IAAI,KAAK,EAClB,IAAI,GACL,CAAA;AACD,YAAY,EACV,UAAU,EACV,SAAS,GACV,CAAA"}

package/dist/components/pills/Pills.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Pills.d.mts","sourceRoot":"","sources":["../../../src/components/pills/Pills.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EACL,aAAa,EACb,YAAY,EACb,MAAM,eAAe,CAAA;AAEtB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,aAAa,GAAG,eAAe,CAAC,OAAO,aAAa,CAAC,CAAA;AAC1D,KAAK,YAAY,GAAG,eAAe,CAAC,OAAO,YAAY,CAAC,CAAA;AAExD,UAAU,UAAW,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,EAAE,aAAa;CAAG;AACpG,UAAU,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC,EAAE,YAAY;IAC1F,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAUD,QAAA,MAAM,KAAK,qFAmBT,CAAA;AAGF,QAAA,MAAM,IAAI,iFAyDT,CAAA;AAGD,QAAA,MAAM,SAAS,EAAE,OAAO,KAAK,GAAG;IAC9B,IAAI,EAAE,OAAO,IAAI,CAAA;CAGjB,CAAA;AAEF,OAAO,EACL,SAAS,IAAI,KAAK,EAClB,IAAI,GACL,CAAA;AACD,YAAY,EACV,UAAU,EACV,SAAS,GACV,CAAA"}
+{"version":3,"file":"Pills.d.mts","sourceRoot":"","sources":["../../../src/components/pills/Pills.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EACL,aAAa,EACb,YAAY,EACb,MAAM,eAAe,CAAA;AAEtB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,aAAa,GAAG,eAAe,CAAC,OAAO,aAAa,CAAC,CAAA;AAC1D,KAAK,YAAY,GAAG,eAAe,CAAC,OAAO,YAAY,CAAC,CAAA;AAExD,UAAU,UAAW,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,EAAE,aAAa;CAAG;AACpG,UAAU,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC,EAAE,YAAY;IAC1F,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAmBD,QAAA,MAAM,KAAK,qFAmBT,CAAA;AAGF,QAAA,MAAM,IAAI,iFA6DT,CAAA;AAGD,QAAA,MAAM,SAAS,EAAE,OAAO,KAAK,GAAG;IAC9B,IAAI,EAAE,OAAO,IAAI,CAAA;CAGjB,CAAA;AAEF,OAAO,EACL,SAAS,IAAI,KAAK,EAClB,IAAI,GACL,CAAA;AACD,YAAY,EACV,UAAU,EACV,SAAS,GACV,CAAA"}

package/dist/components/pills/Pills.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pills.d.ts","sourceRoot":"","sources":["../../../src/components/pills/Pills.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EACL,aAAa,EACb,YAAY,EACb,MAAM,eAAe,CAAA;AAEtB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,aAAa,GAAG,eAAe,CAAC,OAAO,aAAa,CAAC,CAAA;AAC1D,KAAK,YAAY,GAAG,eAAe,CAAC,OAAO,YAAY,CAAC,CAAA;AAExD,UAAU,UAAW,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,EAAE,aAAa;CAAG;AACpG,UAAU,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC,EAAE,YAAY;IAC1F,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAUD,QAAA,MAAM,KAAK,qFAmBT,CAAA;AAGF,QAAA,MAAM,IAAI,iFAyDT,CAAA;AAGD,QAAA,MAAM,SAAS,EAAE,OAAO,KAAK,GAAG;IAC9B,IAAI,EAAE,OAAO,IAAI,CAAA;CAGjB,CAAA;AAEF,OAAO,EACL,SAAS,IAAI,KAAK,EAClB,IAAI,GACL,CAAA;AACD,YAAY,EACV,UAAU,EACV,SAAS,GACV,CAAA"}
+{"version":3,"file":"Pills.d.ts","sourceRoot":"","sources":["../../../src/components/pills/Pills.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EACL,aAAa,EACb,YAAY,EACb,MAAM,eAAe,CAAA;AAEtB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,aAAa,GAAG,eAAe,CAAC,OAAO,aAAa,CAAC,CAAA;AAC1D,KAAK,YAAY,GAAG,eAAe,CAAC,OAAO,YAAY,CAAC,CAAA;AAExD,UAAU,UAAW,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC,EAAE,aAAa;CAAG;AACpG,UAAU,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC,EAAE,YAAY;IAC1F,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAmBD,QAAA,MAAM,KAAK,qFAmBT,CAAA;AAGF,QAAA,MAAM,IAAI,iFA6DT,CAAA;AAGD,QAAA,MAAM,SAAS,EAAE,OAAO,KAAK,GAAG;IAC9B,IAAI,EAAE,OAAO,IAAI,CAAA;CAGjB,CAAA;AAEF,OAAO,EACL,SAAS,IAAI,KAAK,EAClB,IAAI,GACL,CAAA;AACD,YAAY,EACV,UAAU,EACV,SAAS,GACV,CAAA"}

package/dist/components/pills/Pills.js

@@ -9,10 +9,15 @@ import {
 } from "./pills.props.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 const PillsContext = React.createContext({});
+const rootVariantMap = {
+  solid: "default",
+  soft: "soft",
+  outline: "outline"
+};
 const Pills = React.forwardRef(({ children, ...props }, forwardedRef) => {
   const { asChild, className, color, radius, size = "md", variant = "solid", ...pillsProps } = extractProps(props, pillsPropDefs);
   const Comp = asChild ? Slot : "ul";
-  return /* @__PURE__ */ jsx(PillsContext.Provider, { value: { size, color, radius }, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(PillsContext.Provider, { value: { size, variant: rootVariantMap[variant] ?? "default", color, radius }, children: /* @__PURE__ */ jsx(
     Comp,
     {
       ...pillsProps,
@@ -28,7 +33,7 @@ const Pills = React.forwardRef(({ children, ...props }, forwardedRef) => {
 });
 Pills.displayName = "Pills";
 const Pill = React.forwardRef(
-  ({ children, onRemove, size: sizeProp, color: colorProp, radius: radiusProp, ...props }, forwardedRef) => {
+  ({ children, onRemove, size: sizeProp, color: colorProp, radius: radiusProp, variant: variantProp, ...props }, forwardedRef) => {
     const context = React.useContext(PillsContext);
     const {
       asChild,
@@ -37,11 +42,13 @@ const Pill = React.forwardRef(
       size = "md",
       color,
       radius,
+      tone,
       removable = false,
       ...pillProps
     } = extractProps(
       {
         ...props,
+        variant: variantProp ?? context.variant,
         size: sizeProp ?? context.size,
         color: colorProp ?? context.color,
         radius: radiusProp ?? context.radius
@@ -58,6 +65,7 @@ const Pill = React.forwardRef(
           "dsx-pill",
           variant === "default" && "dsx-pill--default",
           variant === "secondary" && "dsx-pill--secondary",
+          variant === "soft" && "dsx-pill--soft",
           variant === "destructive" && "dsx-pill--destructive",
           variant === "outline" && "dsx-pill--outline",
           variant === "ghost" && "dsx-pill--ghost",
@@ -69,6 +77,7 @@ const Pill = React.forwardRef(
         ),
         "data-accent-color": color,
         "data-radius": radius,
+        "data-tone": tone,
         children: [
           children,
           removable ? /* @__PURE__ */ jsx(

package/dist/components/pills/Pills.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/pills/Pills.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { Icon } from '../icon/Icon'\nimport {\n  pillsPropDefs,\n  pillPropDefs,\n} from './pills.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype PillsOwnProps = GetPropDefTypes<typeof pillsPropDefs>\ntype PillOwnProps = GetPropDefTypes<typeof pillPropDefs>\n\ninterface PillsProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'color'>, PillsOwnProps {}\ninterface PillProps extends Omit<React.HTMLAttributes<HTMLLIElement>, 'color'>, PillOwnProps {\n  onRemove?: () => void\n}\n\ninterface PillsContextValue {\n  size?: PillOwnProps['size']\n  color?: PillOwnProps['color']\n  radius?: PillOwnProps['radius']\n}\n\nconst PillsContext = React.createContext<PillsContextValue>({})\n\nconst Pills = React.forwardRef<HTMLUListElement, PillsProps>(({ children, ...props }, forwardedRef) => {\n  const { asChild, className, color, radius, size = 'md', variant = 'solid', ...pillsProps } = extractProps(props, pillsPropDefs)\n  const Comp = asChild ? Slot : 'ul'\n\n  return (\n    <PillsContext.Provider value={{ size, color, radius }}>\n      <Comp\n        {...pillsProps}\n        ref={forwardedRef}\n        className={classNames('dsx-pills', className)}\n        data-accent-color={color}\n        data-radius={radius}\n        data-size={size}\n        data-variant={variant}\n      >\n        {children}\n      </Comp>\n    </PillsContext.Provider>\n  )\n})\nPills.displayName = 'Pills'\n\nconst Pill = React.forwardRef<HTMLLIElement, PillProps>(\n  ({ children, onRemove, size: sizeProp, color: colorProp, radius: radiusProp, ...props }, forwardedRef) => {\n    const context = React.useContext(PillsContext)\n    const {\n      asChild,\n      className,\n      variant = 'default',\n      size = 'md',\n      color,\n      radius,\n      removable = false,\n      ...pillProps\n    } = extractProps(\n      {\n        ...props,\n        size: sizeProp ?? context.size,\n        color: colorProp ?? context.color,\n        radius: radiusProp ?? context.radius,\n      },\n      pillPropDefs,\n    )\n    const Comp = asChild ? Slot : 'li'\n\n    return (\n      <Comp\n        {...pillProps}\n        ref={forwardedRef}\n        className={classNames(\n          'dsx-pill',\n          variant === 'default' && 'dsx-pill--default',\n          variant === 'secondary' && 'dsx-pill--secondary',\n          variant === 'destructive' && 'dsx-pill--destructive',\n          variant === 'outline' && 'dsx-pill--outline',\n          variant === 'ghost' && 'dsx-pill--ghost',\n          variant === 'link' && 'dsx-pill--link',\n          size === 'sm' && 'dsx-pill--sm',\n          size === 'md' && 'dsx-pill--md',\n          size === 'lg' && 'dsx-pill--lg',\n          className,\n        )}\n        data-accent-color={color}\n        data-radius={radius}\n      >\n        {children}\n        {removable ? (\n          <button\n            type=\"button\"\n            className=\"dsx-pill__remove\"\n            aria-label=\"Remove\"\n            onClick={onRemove}\n          >\n            <Icon name=\"x\" size=\"sm\" />\n          </button>\n        ) : null}\n      </Comp>\n    )\n  },\n)\nPill.displayName = 'Pill'\n\nconst PillsRoot: typeof Pills & {\n  Pill: typeof Pill\n} = Object.assign(Pills, {\n  Pill,\n})\n\nexport {\n  PillsRoot as Pills,\n  Pill,\n}\nexport type {\n  PillsProps,\n  PillProps,\n}\n"],
-  "mappings": "AAAA,YAAY,WAAW;AACvB,OAAO,gBAAgB;AACvB,SAAS,YAAY;AAErB,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AA0BD,cAwCA,YAxCA;AARN,MAAM,eAAe,MAAM,cAAiC,CAAC,CAAC;AAE9D,MAAM,QAAQ,MAAM,WAAyC,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACrG,QAAM,EAAE,SAAS,WAAW,OAAO,QAAQ,OAAO,MAAM,UAAU,SAAS,GAAG,WAAW,IAAI,aAAa,OAAO,aAAa;AAC9H,QAAM,OAAO,UAAU,OAAO;AAE9B,SACE,oBAAC,aAAa,UAAb,EAAsB,OAAO,EAAE,MAAM,OAAO,OAAO,GAClD;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,WAAW,WAAW,aAAa,SAAS;AAAA,MAC5C,qBAAmB;AAAA,MACnB,eAAa;AAAA,MACb,aAAW;AAAA,MACX,gBAAc;AAAA,MAEb;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AACD,MAAM,cAAc;AAEpB,MAAM,OAAO,MAAM;AAAA,EACjB,CAAC,EAAE,UAAU,UAAU,MAAM,UAAU,OAAO,WAAW,QAAQ,YAAY,GAAG,MAAM,GAAG,iBAAiB;AACxG,UAAM,UAAU,MAAM,WAAW,YAAY;AAC7C,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,GAAG;AAAA,IACL,IAAI;AAAA,MACF;AAAA,QACE,GAAG;AAAA,QACH,MAAM,YAAY,QAAQ;AAAA,QAC1B,OAAO,aAAa,QAAQ;AAAA,QAC5B,QAAQ,cAAc,QAAQ;AAAA,MAChC;AAAA,MACA;AAAA,IACF;AACA,UAAM,OAAO,UAAU,OAAO;AAE9B,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,WAAW;AAAA,UACT;AAAA,UACA,YAAY,aAAa;AAAA,UACzB,YAAY,eAAe;AAAA,UAC3B,YAAY,iBAAiB;AAAA,UAC7B,YAAY,aAAa;AAAA,UACzB,YAAY,WAAW;AAAA,UACvB,YAAY,UAAU;AAAA,UACtB,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA,UACjB;AAAA,QACF;AAAA,QACA,qBAAmB;AAAA,QACnB,eAAa;AAAA,QAEZ;AAAA;AAAA,UACA,YACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAU;AAAA,cACV,cAAW;AAAA,cACX,SAAS;AAAA,cAET,8BAAC,QAAK,MAAK,KAAI,MAAK,MAAK;AAAA;AAAA,UAC3B,IACE;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;AAEnB,MAAM,YAEF,OAAO,OAAO,OAAO;AAAA,EACvB;AACF,CAAC;",
+  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { Icon } from '../icon/Icon'\nimport {\n  pillsPropDefs,\n  pillPropDefs,\n} from './pills.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype PillsOwnProps = GetPropDefTypes<typeof pillsPropDefs>\ntype PillOwnProps = GetPropDefTypes<typeof pillPropDefs>\n\ninterface PillsProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'color'>, PillsOwnProps {}\ninterface PillProps extends Omit<React.HTMLAttributes<HTMLLIElement>, 'color'>, PillOwnProps {\n  onRemove?: () => void\n}\n\ninterface PillsContextValue {\n  size?: PillOwnProps['size']\n  variant?: PillOwnProps['variant']\n  color?: PillOwnProps['color']\n  radius?: PillOwnProps['radius']\n}\n\nconst PillsContext = React.createContext<PillsContextValue>({})\n\n// Root variant vocabulary (solid/soft/outline) mapped onto the item vocabulary\n// so the root prop cascades instead of writing a data attribute no CSS reads.\nconst rootVariantMap = {\n  solid: 'default',\n  soft: 'soft',\n  outline: 'outline',\n} as const\n\nconst Pills = React.forwardRef<HTMLUListElement, PillsProps>(({ children, ...props }, forwardedRef) => {\n  const { asChild, className, color, radius, size = 'md', variant = 'solid', ...pillsProps } = extractProps(props, pillsPropDefs)\n  const Comp = asChild ? Slot : 'ul'\n\n  return (\n    <PillsContext.Provider value={{ size, variant: rootVariantMap[variant] ?? 'default', color, radius }}>\n      <Comp\n        {...pillsProps}\n        ref={forwardedRef}\n        className={classNames('dsx-pills', className)}\n        data-accent-color={color}\n        data-radius={radius}\n        data-size={size}\n        data-variant={variant}\n      >\n        {children}\n      </Comp>\n    </PillsContext.Provider>\n  )\n})\nPills.displayName = 'Pills'\n\nconst Pill = React.forwardRef<HTMLLIElement, PillProps>(\n  ({ children, onRemove, size: sizeProp, color: colorProp, radius: radiusProp, variant: variantProp, ...props }, forwardedRef) => {\n    const context = React.useContext(PillsContext)\n    const {\n      asChild,\n      className,\n      variant = 'default',\n      size = 'md',\n      color,\n      radius,\n      tone,\n      removable = false,\n      ...pillProps\n    } = extractProps(\n      {\n        ...props,\n        variant: variantProp ?? context.variant,\n        size: sizeProp ?? context.size,\n        color: colorProp ?? context.color,\n        radius: radiusProp ?? context.radius,\n      },\n      pillPropDefs,\n    )\n    const Comp = asChild ? Slot : 'li'\n\n    return (\n      <Comp\n        {...pillProps}\n        ref={forwardedRef}\n        className={classNames(\n          'dsx-pill',\n          variant === 'default' && 'dsx-pill--default',\n          variant === 'secondary' && 'dsx-pill--secondary',\n          variant === 'soft' && 'dsx-pill--soft',\n          variant === 'destructive' && 'dsx-pill--destructive',\n          variant === 'outline' && 'dsx-pill--outline',\n          variant === 'ghost' && 'dsx-pill--ghost',\n          variant === 'link' && 'dsx-pill--link',\n          size === 'sm' && 'dsx-pill--sm',\n          size === 'md' && 'dsx-pill--md',\n          size === 'lg' && 'dsx-pill--lg',\n          className,\n        )}\n        data-accent-color={color}\n        data-radius={radius}\n        data-tone={tone}\n      >\n        {children}\n        {removable ? (\n          <button\n            type=\"button\"\n            className=\"dsx-pill__remove\"\n            aria-label=\"Remove\"\n            onClick={onRemove}\n          >\n            <Icon name=\"x\" size=\"sm\" />\n          </button>\n        ) : null}\n      </Comp>\n    )\n  },\n)\nPill.displayName = 'Pill'\n\nconst PillsRoot: typeof Pills & {\n  Pill: typeof Pill\n} = Object.assign(Pills, {\n  Pill,\n})\n\nexport {\n  PillsRoot as Pills,\n  Pill,\n}\nexport type {\n  PillsProps,\n  PillProps,\n}\n"],
+  "mappings": "AAAA,YAAY,WAAW;AACvB,OAAO,gBAAgB;AACvB,SAAS,YAAY;AAErB,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAmCD,cA0CA,YA1CA;AAhBN,MAAM,eAAe,MAAM,cAAiC,CAAC,CAAC;AAI9D,MAAM,iBAAiB;AAAA,EACrB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,SAAS;AACX;AAEA,MAAM,QAAQ,MAAM,WAAyC,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACrG,QAAM,EAAE,SAAS,WAAW,OAAO,QAAQ,OAAO,MAAM,UAAU,SAAS,GAAG,WAAW,IAAI,aAAa,OAAO,aAAa;AAC9H,QAAM,OAAO,UAAU,OAAO;AAE9B,SACE,oBAAC,aAAa,UAAb,EAAsB,OAAO,EAAE,MAAM,SAAS,eAAe,OAAO,KAAK,WAAW,OAAO,OAAO,GACjG;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,WAAW,WAAW,aAAa,SAAS;AAAA,MAC5C,qBAAmB;AAAA,MACnB,eAAa;AAAA,MACb,aAAW;AAAA,MACX,gBAAc;AAAA,MAEb;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AACD,MAAM,cAAc;AAEpB,MAAM,OAAO,MAAM;AAAA,EACjB,CAAC,EAAE,UAAU,UAAU,MAAM,UAAU,OAAO,WAAW,QAAQ,YAAY,SAAS,aAAa,GAAG,MAAM,GAAG,iBAAiB;AAC9H,UAAM,UAAU,MAAM,WAAW,YAAY;AAC7C,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,GAAG;AAAA,IACL,IAAI;AAAA,MACF;AAAA,QACE,GAAG;AAAA,QACH,SAAS,eAAe,QAAQ;AAAA,QAChC,MAAM,YAAY,QAAQ;AAAA,QAC1B,OAAO,aAAa,QAAQ;AAAA,QAC5B,QAAQ,cAAc,QAAQ;AAAA,MAChC;AAAA,MACA;AAAA,IACF;AACA,UAAM,OAAO,UAAU,OAAO;AAE9B,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,WAAW;AAAA,UACT;AAAA,UACA,YAAY,aAAa;AAAA,UACzB,YAAY,eAAe;AAAA,UAC3B,YAAY,UAAU;AAAA,UACtB,YAAY,iBAAiB;AAAA,UAC7B,YAAY,aAAa;AAAA,UACzB,YAAY,WAAW;AAAA,UACvB,YAAY,UAAU;AAAA,UACtB,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA,UACjB;AAAA,QACF;AAAA,QACA,qBAAmB;AAAA,QACnB,eAAa;AAAA,QACb,aAAW;AAAA,QAEV;AAAA;AAAA,UACA,YACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAU;AAAA,cACV,cAAW;AAAA,cACX,SAAS;AAAA,cAET,8BAAC,QAAK,MAAK,KAAI,MAAK,MAAK;AAAA;AAAA,UAC3B,IACE;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;AAEnB,MAAM,YAEF,OAAO,OAAO,OAAO;AAAA,EACvB;AACF,CAAC;",
   "names": []
 }

package/dist/components/pills/pills.props.cjs

@@ -53,7 +53,7 @@ const pillPropDefs = {
   ...import_asChild.asChildPropDef,
   variant: {
     type: "enum",
-    values: ["default", "secondary", "destructive", "outline", "ghost", "link"],
+    values: ["default", "secondary", "soft", "destructive", "outline", "ghost", "link"],
     default: "default"
   },
   size: {
@@ -74,6 +74,11 @@ const pillPropDefs = {
   removable: {
     type: "boolean",
     default: false
+  },
+  tone: {
+    type: "enum",
+    values: ["success", "warning", "error", "info"],
+    default: void 0
   }
 };
 //# sourceMappingURL=pills.props.cjs.map