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

// ../src/variables/colors-css-variables.json
var colors_css_variables_default = {
  "surface-foreground": "var(--ds-color-surface-foreground)",
  "surface-primary": "var(--ds-color-surface-primary)",
  "surface-primary-raised-soft": "var(--ds-color-surface-primary-raised-soft)",
  "surface-primary-raised-strong": "var(--ds-color-surface-primary-raised-strong)",
  "surface-primary-elevated": "var(--ds-color-surface-primary-elevated)",
  "surface-primaryinvert": "var(--ds-color-surface-primaryinvert)",
  "surface-primaryinvert-raised-soft": "var(--ds-color-surface-primaryinvert-raised-soft)",
  "surface-primaryinvert-elevated": "var(--ds-color-surface-primaryinvert-elevated)",
  "surface-brand": "var(--ds-color-surface-brand)",
  "surface-success": "var(--ds-color-surface-success)",
  "surface-culture": "var(--ds-color-surface-culture)",
  "surface-breaking": "var(--ds-color-surface-breaking)",
  "surface-overlay": "var(--ds-color-surface-overlay)",
  "surface-ad-yellow": "var(--ds-color-surface-ad-yellow)",
  "surface-native-article": "var(--ds-color-surface-native-article)",
  "surface-quiz": "var(--ds-color-surface-quiz)",
  "surface-media": "var(--ds-color-surface-media)",
  "border-primary": "var(--ds-color-border-primary)",
  "border-primary-strong": "var(--ds-color-border-primary-strong)",
  "border-primary-strongest": "var(--ds-color-border-primary-strongest)",
  "border-primaryinvert": "var(--ds-color-border-primaryinvert)",
  "border-primaryinvert-strong": "var(--ds-color-border-primaryinvert-strong)",
  "border-primaryinvert-strongest": "var(--ds-color-border-primaryinvert-strongest)",
  "border-brand": "var(--ds-color-border-brand)",
  "border-culture": "var(--ds-color-border-culture)",
  "text-primary": "var(--ds-color-text-primary)",
  "text-primary-subtle": "var(--ds-color-text-primary-subtle)",
  "text-primary-disabled": "var(--ds-color-text-primary-disabled)",
  "text-primaryinvert": "var(--ds-color-text-primaryinvert)",
  "text-primaryinvert-subtle": "var(--ds-color-text-primaryinvert-subtle)",
  "text-primaryinvert-disabled": "var(--ds-color-text-primaryinvert-disabled)",
  "text-brand": "var(--ds-color-text-brand)",
  "text-culture": "var(--ds-color-text-culture)",
  "text-critical": "var(--ds-color-text-critical)",
  "text-success": "var(--ds-color-text-success)",
  "text-on-brand": "var(--ds-color-text-on-brand)",
  "text-body-link": "var(--ds-color-text-body-link)",
  "text-body-link-visited": "var(--ds-color-text-body-link-visited)",
  "gradients-primary-start": "var(--ds-color-gradients-primary-start)",
  "gradients-primary-end": "var(--ds-color-gradients-primary-end)",
  "gradients-overlay-start": "var(--ds-color-gradients-overlay-start)",
  "gradients-overlay-end": "var(--ds-color-gradients-overlay-end)",
  "button-primary-default": "var(--ds-color-button-primary-default)",
  "button-primary-hover": "var(--ds-color-button-primary-hover)",
  "button-primary-pressed": "var(--ds-color-button-primary-pressed)",
  "button-primary-disabled": "var(--ds-color-button-primary-disabled)",
  "button-secondary-filled-default": "var(--ds-color-button-secondary-filled-default)",
  "button-secondary-filled-hover": "var(--ds-color-button-secondary-filled-hover)",
  "button-secondary-filled-pressed": "var(--ds-color-button-secondary-filled-pressed)",
  "button-secondary-filled-disabled": "var(--ds-color-button-secondary-filled-disabled)",
  "brand-100": "var(--ds-color-brand-100)",
  "brand-200": "var(--ds-color-brand-200)",
  "brand-300": "var(--ds-color-brand-300)",
  "brand-400": "var(--ds-color-brand-400)",
  "brand-500": "var(--ds-color-brand-500)",
  "brand-600": "var(--ds-color-brand-600)",
  "brand-700": "var(--ds-color-brand-700)",
  "brand-800": "var(--ds-color-brand-800)",
  "brand-900": "var(--ds-color-brand-900)",
  "brand-050": "var(--ds-color-brand-050)",
  "culture-0": "var(--ds-color-culture-0)",
  "culture-100": "var(--ds-color-culture-100)",
  "culture-200": "var(--ds-color-culture-200)",
  "culture-300": "var(--ds-color-culture-300)",
  "culture-400": "var(--ds-color-culture-400)",
  "culture-500": "var(--ds-color-culture-500)",
  "culture-600": "var(--ds-color-culture-600)",
  "culture-700": "var(--ds-color-culture-700)",
  "culture-800": "var(--ds-color-culture-800)",
  "culture-900": "var(--ds-color-culture-900)",
  "culture-1000": "var(--ds-color-culture-1000)",
  "culture-1100": "var(--ds-color-culture-1100)",
  "neutral-100": "var(--ds-color-neutral-100)",
  "neutral-200": "var(--ds-color-neutral-200)",
  "neutral-300": "var(--ds-color-neutral-300)",
  "neutral-400": "var(--ds-color-neutral-400)",
  "neutral-500": "var(--ds-color-neutral-500)",
  "neutral-600": "var(--ds-color-neutral-600)",
  "neutral-700": "var(--ds-color-neutral-700)",
  "neutral-800": "var(--ds-color-neutral-800)",
  "neutral-900": "var(--ds-color-neutral-900)",
  "neutral-1000": "var(--ds-color-neutral-1000)",
  "neutral-1100": "var(--ds-color-neutral-1100)",
  "neutral-white": "var(--ds-color-neutral-white)",
  "neutral-050": "var(--ds-color-neutral-050)",
  "neutral-black": "var(--ds-color-neutral-black)"
};

// ../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/icon-with-wrapper/icon-with-wrapper.tsx
import { jsx as jsx3 } from "preact/jsx-runtime";
var IconWithWrapper = ({
  iconName,
  size = 24,
  color = "text-primary",
  attributes,
  classNames,
  forcePx
}) => {
  const componentClassName = "ds-icon-wrapper";
  const classes = formatClassString([
    componentClassName,
    `${componentClassName}--sprite`,
    `${componentClassName}--${iconName}`,
    forcePx && "ds-force-px",
    classNames
  ]);
  const iconSize = forcePx ? `${size}px` : `${size / 16}rem`;
  const iconColor = colors_css_variables_default[color];
  const styles = {
    width: iconSize,
    height: iconSize,
    color: iconColor
  };
  return /* @__PURE__ */ jsx3("div", { className: classes, style: styles, ...attributes, children: /* @__PURE__ */ jsx3(IconUse, { iconName }) });
};
export {
  IconWithWrapper
};
//# sourceMappingURL=icon-with-wrapper.js.map
