// ../src/helpers/formatClassString.ts
var formatClassString = (classesArray) => {
  return classesArray.filter((x) => !!x).join(" ");
};

// ../src/foundations/icons/sprite.svg
import { h } from "preact";
import { jsx, jsxs } from "preact/jsx-runtime";

// ../src/components/icon-sprite/icon-sprite.tsx
import { jsx as jsx2 } from "preact/jsx-runtime";
var IconUse = ({ iconName, classNames, attributes }) => {
  const componentClassName = "ds-icon";
  const classes = formatClassString([
    componentClassName,
    `${componentClassName}--sprite`,
    `${componentClassName}--${iconName}`,
    classNames
  ]);
  return /* @__PURE__ */ jsx2("i", { className: classes, ...attributes, children: /* @__PURE__ */ jsx2("svg", { children: /* @__PURE__ */ jsx2("use", { xlinkHref: `#ds-${iconName}` }) }) });
};

// ../src/components/spinner/spinner.tsx
import { jsx as jsx3 } from "preact/jsx-runtime";
var Spinner = ({ variant = "primary", size = "large", forcePx, classNames, attributes }) => {
  const componentClassName = "ds-spinner";
  const classes = formatClassString([
    `${componentClassName}`,
    `${componentClassName}--${variant}`,
    `${componentClassName}--${size}`,
    forcePx && "ds-force-px",
    classNames
  ]);
  return /* @__PURE__ */ jsx3("span", { className: classes, ...attributes, children: /* @__PURE__ */ jsx3("span", { className: `${componentClassName}__inner` }) });
};

// ../src/components/button/button-base.tsx
import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "preact/jsx-runtime";
var InnerButton = ({ text, isIconButton = false, attributes, icon, loadingHtml }) => {
  let optionalHtml;
  if (!isIconButton && attributes["aria-label"]) {
    optionalHtml = /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", children: text });
  } else if (!isIconButton) {
    optionalHtml = /* @__PURE__ */ jsx4("span", { children: text });
  }
  return /* @__PURE__ */ jsxs2(Fragment, { children: [
    optionalHtml,
    icon,
    loadingHtml
  ] });
};
var ToggleWrapper = ({
  selected = false,
  disabled = false,
  attributes,
  classes,
  onChild,
  offChild,
  loadingHtml
}) => {
  return /* @__PURE__ */ jsxs2("button", { type: "button", role: "switch", "aria-checked": selected, className: classes, ...attributes, disabled, children: [
    /* @__PURE__ */ jsx4("span", { className: "ds-btn__off", "aria-hidden": "true", children: onChild }),
    /* @__PURE__ */ jsx4("span", { className: "ds-btn__on", "aria-hidden": "true", children: offChild }),
    loadingHtml
  ] });
};
var ButtonBase = ({
  text,
  disabled = false,
  variant = "primary",
  size = "md",
  fullWidth = false,
  mobileFullWidth = false,
  iconPosition = "none",
  iconName,
  loading = false,
  type = "button",
  href,
  classNames,
  attributes = {},
  forcePx = false,
  isIconButton = false,
  selected = false,
  isToggle = false,
  selectedIconName,
  selectedText
}) => {
  if (isIconButton && text && !attributes["aria-label"]) {
    attributes["aria-label"] = text;
  } else if (isToggle && text && selectedText && !attributes["aria-label"]) {
    attributes["aria-label"] = selected ? selectedText : text;
  }
  let spinnerVariant = "secondary";
  if (variant === "staticWhite" || variant === "transparent") {
    spinnerVariant = "staticBlack";
  } else if (variant === "secondaryFilled" || variant === "secondaryOutline") {
    spinnerVariant = "primary";
  }
  const loadingHtml = /* @__PURE__ */ jsx4(Spinner, { ...{ size: "small", variant: spinnerVariant, forcePx, attributes: { "aria-hidden": "true" } } });
  let icon;
  if (iconName && (iconPosition != "none" || isIconButton == true)) {
    icon = /* @__PURE__ */ jsx4(IconUse, { ...{ iconName, attributes: { "aria-hidden": "true" } } });
  }
  const classNamePrefix = "ds-btn--";
  const classes = formatClassString([
    "ds-btn",
    `${classNamePrefix}${variant}`,
    `${classNamePrefix}${size}`,
    isToggle && selected && `${classNamePrefix}selected`,
    fullWidth && `${classNamePrefix}full-width`,
    mobileFullWidth && `${classNamePrefix}mobile-full-width`,
    icon && !isIconButton && `${classNamePrefix}icon-${iconPosition}`,
    isIconButton && `${classNamePrefix}icon-only`,
    isToggle && `${classNamePrefix}toggle`,
    loading && "ds-loading",
    forcePx && "ds-force-px",
    classNames
  ]);
  let buttonToRender;
  if (isToggle) {
    let onChild, offChild;
    if (isIconButton && iconName && selectedIconName) {
      onChild = /* @__PURE__ */ jsx4(IconUse, { iconName });
      offChild = /* @__PURE__ */ jsx4(IconUse, { iconName: selectedIconName });
    } else {
      onChild = /* @__PURE__ */ jsx4("span", { children: text });
      offChild = /* @__PURE__ */ jsxs2(Fragment, { children: [
        /* @__PURE__ */ jsx4(IconUse, { iconName: "check" }),
        /* @__PURE__ */ jsx4("span", { children: selectedText })
      ] });
    }
    buttonToRender = /* @__PURE__ */ jsx4(ToggleWrapper, { ...{ selected, classes, attributes, disabled, onChild, offChild, loadingHtml } });
  } else {
    const buttonParams = { isIconButton, text, icon, loadingHtml, attributes };
    if (href) {
      const params = { ...buttonParams, loadingHtml: null };
      buttonToRender = /* @__PURE__ */ jsx4("a", { href, className: classes, ...attributes, children: /* @__PURE__ */ jsx4(InnerButton, { ...params }) });
    } else {
      buttonToRender = /* @__PURE__ */ jsx4("button", { type, className: classes, ...attributes, disabled, children: /* @__PURE__ */ jsx4(InnerButton, { ...buttonParams }) });
    }
  }
  return /* @__PURE__ */ jsx4(Fragment, { children: buttonToRender });
};

// ../src/components/button-toggle/button-toggle.tsx
import { jsx as jsx5 } from "preact/jsx-runtime";
var ButtonToggle = ({
  selected = false,
  text,
  selectedText,
  disabled = false,
  variant = "primary",
  size = "md",
  fullWidth = false,
  mobileFullWidth = false,
  isIconButton = false,
  iconName,
  selectedIconName,
  loading = false,
  attributes = {},
  classNames,
  forcePx = false
}) => {
  return /* @__PURE__ */ jsx5(
    ButtonBase,
    {
      ...{
        selected,
        text,
        disabled,
        variant,
        size,
        fullWidth,
        mobileFullWidth,
        isIconButton,
        iconName,
        selectedIconName,
        loading,
        classNames,
        attributes,
        forcePx,
        isToggle: true,
        selectedText,
        type: "button"
      }
    }
  );
};
var button_toggle_default = ButtonToggle;

// ../src/assets/form-field/form-field.tsx
import { jsx as jsx6, jsxs as jsxs3 } from "preact/jsx-runtime";
var FormField = ({
  error,
  errorMessage,
  wrapperClasses,
  helpHtml,
  helpText,
  type,
  children
}) => {
  const classes = formatClassString([
    "ds-form-field",
    wrapperClasses,
    error && `ds-form-field__error`,
    type === "hidden" && "hidden"
  ]);
  const showHelp = helpHtml || helpText;
  return /* @__PURE__ */ jsxs3("div", { className: classes, children: [
    children,
    errorMessage && /* @__PURE__ */ jsxs3("div", { className: "ds-form-field__error-message js-field-error", children: [
      /* @__PURE__ */ jsx6(IconUse, { iconName: "info-filled" }),
      /* @__PURE__ */ jsx6("span", { children: errorMessage })
    ] }),
    showHelp && /* @__PURE__ */ jsx6("p", { className: "ds-form-field__help-text", children: helpHtml ? helpHtml : helpText })
  ] });
};
var form_field_default = FormField;

// ../src/components/checkbox/checkbox.tsx
import { jsx as jsx7, jsxs as jsxs4 } from "preact/jsx-runtime";
var Checkbox = ({
  error,
  errorMessage,
  label,
  stripLabel,
  name = "ds-checkbox",
  validation,
  checked,
  required,
  disabled,
  forcePx,
  classNames,
  attributes
}) => {
  const componentClassName = "ds-checkbox";
  const wrapperClasses = formatClassString([componentClassName, forcePx && "ds-force-px", classNames]);
  return /* @__PURE__ */ jsxs4(form_field_default, { error, errorMessage: label && errorMessage, wrapperClasses, children: [
    /* @__PURE__ */ jsx7(
      "input",
      {
        type: "checkbox",
        id: name,
        name,
        className: `${componentClassName}__input js-field-error`,
        "data-validation": validation,
        ...attributes,
        defaultChecked: checked,
        disabled,
        required
      }
    ),
    stripLabel ? /* @__PURE__ */ jsx7("div", { className: `${componentClassName}__inner`, children: /* @__PURE__ */ jsx7(CheckboxIcons, { componentClassName }) }) : /* @__PURE__ */ jsxs4("label", { className: `${componentClassName}__inner`, htmlFor: name, children: [
      /* @__PURE__ */ jsx7(CheckboxIcons, { componentClassName }),
      label && /* @__PURE__ */ jsx7("span", { className: `${componentClassName}__text`, children: label })
    ] })
  ] });
};
var CheckboxIcons = ({ componentClassName }) => {
  return /* @__PURE__ */ jsxs4("span", { className: `${componentClassName}__icon`, children: [
    /* @__PURE__ */ jsx7(IconUse, { iconName: "check_box_outline_blank" }),
    /* @__PURE__ */ jsx7(IconUse, { iconName: "check_box-filled" })
  ] });
};
var checkbox_default = Checkbox;

// ../src/components/radio-button/radio-button.tsx
import { Fragment as Fragment2 } from "preact";
import { jsx as jsx8, jsxs as jsxs5 } from "preact/jsx-runtime";
var RadioButton = ({
  buttons,
  error,
  name,
  errorMessage,
  required,
  stripLabel,
  disabled,
  forcePx,
  classNames
}) => {
  const componentClassName = "ds-radio-btn";
  const wrapperClasses = formatClassString([componentClassName, forcePx && "ds-force-px", classNames]);
  return /* @__PURE__ */ jsx8(form_field_default, { error, errorMessage, wrapperClasses, children: buttons?.map((button) => {
    const { id, selected, value, label, attributes } = button;
    return /* @__PURE__ */ jsxs5(Fragment2, { children: [
      /* @__PURE__ */ jsx8(
        "input",
        {
          type: "radio",
          id,
          name,
          defaultChecked: selected,
          disabled,
          required,
          value,
          ...attributes
        }
      ),
      stripLabel ? /* @__PURE__ */ jsx8("div", { className: `${componentClassName}__inner`, children: /* @__PURE__ */ jsx8(RadioButtonIcons, { componentClassName }) }) : /* @__PURE__ */ jsxs5("label", { className: `${componentClassName}__inner`, htmlFor: id, children: [
        /* @__PURE__ */ jsx8(RadioButtonIcons, { componentClassName }),
        label && /* @__PURE__ */ jsx8("span", { className: `${componentClassName}__text`, children: label })
      ] })
    ] }, id);
  }) });
};
var RadioButtonIcons = ({ componentClassName }) => {
  return /* @__PURE__ */ jsxs5("span", { className: `${componentClassName}__icon`, children: [
    /* @__PURE__ */ jsx8(IconUse, { iconName: "radio_button_unchecked" }),
    /* @__PURE__ */ jsx8(IconUse, { iconName: "radio_button_checked" })
  ] });
};

// ../src/components/switch/switch.tsx
import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs6 } from "preact/jsx-runtime";
var Switch = ({
  name = "ds-switch",
  checked,
  showMeta = false,
  metaOn = "P\xE5",
  metaOff = "Av",
  disabled,
  stripLabel,
  forcePx,
  classNames,
  attributes
}) => {
  const componentClassName = "ds-switch";
  const classes = formatClassString([componentClassName, forcePx && "ds-force-px", classNames]);
  return /* @__PURE__ */ jsxs6("div", { className: classes, children: [
    /* @__PURE__ */ jsx9(
      "input",
      {
        type: "checkbox",
        id: name,
        name,
        defaultChecked: checked,
        disabled,
        "aria-label": name,
        ...attributes
      }
    ),
    stripLabel ? /* @__PURE__ */ jsx9("div", { className: `${componentClassName}__inner`, children: /* @__PURE__ */ jsx9(
      SwitchInner,
      {
        ...{
          showMeta,
          metaOn,
          metaOff,
          componentClassName
        }
      }
    ) }) : /* @__PURE__ */ jsx9("label", { className: `${componentClassName}__inner`, tabIndex: 0, htmlFor: name, children: /* @__PURE__ */ jsx9(
      SwitchInner,
      {
        ...{
          showMeta,
          metaOn,
          metaOff,
          componentClassName
        }
      }
    ) })
  ] });
};
var SwitchInner = ({ showMeta, metaOn, metaOff, componentClassName }) => {
  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
    showMeta && /* @__PURE__ */ jsxs6("div", { className: `${componentClassName}__meta`, children: [
      /* @__PURE__ */ jsx9("span", { className: `${componentClassName}__meta-on`, children: metaOn }),
      /* @__PURE__ */ jsx9("span", { className: `${componentClassName}__meta-off`, children: metaOff })
    ] }),
    /* @__PURE__ */ jsx9("span", { className: `${componentClassName}__box`, children: /* @__PURE__ */ jsx9("span", { className: `${componentClassName}__knob` }) })
  ] });
};

// ../src/components/list-item/list-item.tsx
import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs7 } from "preact/jsx-runtime";
var ListItem = (props) => {
  const {
    listItemType,
    title,
    subtitle,
    meta,
    border = false,
    fontWeight = "regular",
    attributes,
    forcePx,
    classNames
  } = props;
  const componentClassName = "ds-list-item";
  const classes = formatClassString([
    componentClassName,
    border && `${componentClassName}--border`,
    forcePx && "ds-force-px",
    classNames
  ]);
  let iconLeftSvg;
  if (listItemType === "accordion" || listItemType === "switch" || listItemType === "standard") {
    const { leadingIcon } = props;
    if (leadingIcon) {
      iconLeftSvg = IconUse({ iconName: leadingIcon });
    }
  }
  let iconRightSvg;
  if (listItemType === "standard" || listItemType === "image") {
    const { trailingIcon } = props;
    if (trailingIcon) {
      iconRightSvg = IconUse({ iconName: trailingIcon });
    }
  }
  const mediaHtml = listItemType === "image" && props.mediaHtml;
  return /* @__PURE__ */ jsx10("li", { className: classes, children: /* @__PURE__ */ jsxs7(ListItemInner, { ...{ ...props, componentClassName }, children: [
    iconLeftSvg && /* @__PURE__ */ jsx10("span", { className: `${componentClassName}__icon-left`, children: iconLeftSvg }),
    mediaHtml && /* @__PURE__ */ jsx10("div", { className: `${componentClassName}__image`, dangerouslySetInnerHTML: { __html: mediaHtml } }),
    title && /* @__PURE__ */ jsx10(
      Title,
      {
        title,
        subtitle,
        fontWeight,
        componentClassName,
        attributes
      }
    ),
    meta && /* @__PURE__ */ jsx10("span", { className: `${componentClassName}__meta`, children: meta }),
    iconRightSvg && /* @__PURE__ */ jsx10("span", { className: `${componentClassName}__icon-right`, children: iconRightSvg })
  ] }) });
};
var ListItemInner = ({
  listItemType,
  href,
  disabled,
  attributes,
  checked,
  selected,
  value,
  variant,
  toggleText,
  toggleSelectedText,
  name = "ds-list-item",
  id = "ds-list-item",
  forcePx,
  componentClassName,
  accordionContent,
  children
}) => {
  const classes = formatClassString([
    `${componentClassName}__content`,
    `${componentClassName}--${listItemType}`,
    disabled && `${componentClassName}--disabled`
  ]);
  switch (listItemType) {
    case "standard":
    case "image":
      const hasLink = href && !disabled;
      return /* @__PURE__ */ jsx10(Fragment4, { children: hasLink ? /* @__PURE__ */ jsx10("a", { className: classes, href, ...attributes, children }) : /* @__PURE__ */ jsx10("button", { className: classes, disabled, ...attributes, children }) });
    case "checkbox":
      return /* @__PURE__ */ jsxs7("label", { className: classes, htmlFor: name, ...attributes, children: [
        /* @__PURE__ */ jsx10(ListItemIconWrapper, { placement: "left", componentClassName, children: /* @__PURE__ */ jsx10(
          checkbox_default,
          {
            ...{
              name,
              checked,
              stripLabel: true,
              disabled,
              forcePx,
              attributes
            }
          }
        ) }),
        children
      ] });
    case "radio":
      return /* @__PURE__ */ jsxs7("label", { className: classes, htmlFor: id, ...attributes, children: [
        /* @__PURE__ */ jsx10(ListItemIconWrapper, { placement: "left", componentClassName, children: /* @__PURE__ */ jsx10(
          RadioButton,
          {
            ...{
              id,
              name,
              disabled,
              selected,
              forcePx,
              buttons: [{ id, selected, value: value || "" }],
              attributes
            }
          }
        ) }),
        children
      ] });
    case "switch":
      return /* @__PURE__ */ jsxs7("label", { className: classes, htmlFor: name, ...attributes, children: [
        children,
        /* @__PURE__ */ jsx10(ListItemIconWrapper, { placement: "right", componentClassName, children: /* @__PURE__ */ jsx10(
          Switch,
          {
            ...{
              name,
              showMeta: true,
              checked,
              disabled,
              forcePx,
              stripLabel: true,
              attributes
            }
          }
        ) })
      ] });
    case "accordion":
      return /* @__PURE__ */ jsxs7(Fragment4, { children: [
        /* @__PURE__ */ jsxs7("button", { className: classes, disabled, ...attributes, children: [
          children,
          /* @__PURE__ */ jsxs7(ListItemIconWrapper, { placement: "right", componentClassName, children: [
            /* @__PURE__ */ jsx10(IconUse, { iconName: "expand_less" }),
            /* @__PURE__ */ jsx10(IconUse, { iconName: "expand_more" })
          ] })
        ] }),
        accordionContent && /* @__PURE__ */ jsx10("div", { className: `${componentClassName}__accordion-inner`, children: accordionContent })
      ] });
    case "toggle":
      const buttonComponent = /* @__PURE__ */ jsx10(
        button_toggle_default,
        {
          ...{
            text: toggleText,
            selectedText: toggleSelectedText || "",
            variant: variant || "secondaryFilled",
            size: "sm",
            selected,
            disabled,
            forcePx,
            attributes
          }
        }
      );
      return /* @__PURE__ */ jsxs7("div", { className: classes, ...attributes, children: [
        children,
        buttonComponent
      ] });
    default:
      return /* @__PURE__ */ jsx10("div", { className: classes, ...attributes, children });
  }
};
var Title = ({ title, subtitle, fontWeight, attributes }) => {
  const componentClassName = "ds-list-item";
  const titleClasses = formatClassString([
    `${componentClassName}__title`,
    `${componentClassName}__title--${fontWeight}`
  ]);
  return /* @__PURE__ */ jsxs7("div", { className: `${componentClassName}__titles`, children: [
    /* @__PURE__ */ jsx10("span", { className: titleClasses, ...attributes, children: title }),
    subtitle && /* @__PURE__ */ jsx10("span", { className: `${componentClassName}__subtitle`, children: subtitle })
  ] });
};
var ListItemIconWrapper = ({
  placement,
  componentClassName,
  children
}) => {
  return /* @__PURE__ */ jsx10("div", { className: `${componentClassName}__icon-${placement}`, children });
};
export {
  ListItem
};
//# sourceMappingURL=list-item.js.map
