@baseline-ui/icons 0.1.0

package/8/index.js

@@ -0,0 +1,258 @@
+"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);
+
+// src/8/index.ts
+var __exports = {};
+__export(__exports, {
+  CaretRightIcon: () => CaretRightIcon_default,
+  ChevronDownIcon: () => ChevronDownIcon_default,
+  ChevronRightIcon: () => ChevronRightIcon_default,
+  EllipseIcon: () => EllipseIcon_default,
+  MinusIcon: () => MinusIcon_default,
+  PlusIcon: () => PlusIcon_default,
+  XIcon: () => XIcon_default
+});
+module.exports = __toCommonJS(__exports);
+
+// src/8/CaretRightIcon.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var SvgCaretRightIcon = ({
+  title,
+  titleId,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: props.size || "1em",
+    height: props.size || "1em",
+    fill: "none",
+    viewBox: "0 0 8 8",
+    "aria-labelledby": titleId,
+    ...props,
+    children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "path",
+        {
+          fill: "currentColor",
+          fillRule: "evenodd",
+          d: "M2.47 1.47a.75.75 0 0 0 0 1.06L3.94 4 2.47 5.47a.75.75 0 0 0 1.06 1.06l2-2a.75.75 0 0 0 0-1.06l-2-2a.75.75 0 0 0-1.06 0Z",
+          clipRule: "evenodd"
+        }
+      )
+    ]
+  }
+);
+var CaretRightIcon_default = SvgCaretRightIcon;
+
+// src/8/ChevronDownIcon.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var SvgChevronDownIcon = ({
+  title,
+  titleId,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: props.size || "1em",
+    height: props.size || "1em",
+    fill: "none",
+    viewBox: "0 0 8 8",
+    "aria-labelledby": titleId,
+    ...props,
+    children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "path",
+        {
+          fill: "currentColor",
+          fillRule: "evenodd",
+          d: "M6.53 2.47a.75.75 0 0 0-1.06 0L4 3.94 2.53 2.47a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l2-2a.75.75 0 0 0 0-1.06Z",
+          clipRule: "evenodd"
+        }
+      )
+    ]
+  }
+);
+var ChevronDownIcon_default = SvgChevronDownIcon;
+
+// src/8/ChevronRightIcon.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var SvgChevronRightIcon = ({
+  title,
+  titleId,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: props.size || "1em",
+    height: props.size || "1em",
+    fill: "none",
+    viewBox: "0 0 8 8",
+    "aria-labelledby": titleId,
+    ...props,
+    children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { fill: "currentColor", d: "M1 8V0l6 4-6 4Z" })
+    ]
+  }
+);
+var ChevronRightIcon_default = SvgChevronRightIcon;
+
+// src/8/EllipseIcon.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var SvgEllipseIcon = ({
+  title,
+  titleId,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: props.size || "1em",
+    height: props.size || "1em",
+    fill: "none",
+    viewBox: "0 0 8 8",
+    "aria-labelledby": titleId,
+    ...props,
+    children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "path",
+        {
+          fill: "currentColor",
+          fillRule: "evenodd",
+          d: "M4 6.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM4 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z",
+          clipRule: "evenodd"
+        }
+      )
+    ]
+  }
+);
+var EllipseIcon_default = SvgEllipseIcon;
+
+// src/8/MinusIcon.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var SvgMinusIcon = ({
+  title,
+  titleId,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: props.size || "1em",
+    height: props.size || "1em",
+    fill: "none",
+    viewBox: "0 0 8 8",
+    "aria-labelledby": titleId,
+    ...props,
+    children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "path",
+        {
+          fill: "currentColor",
+          fillRule: "evenodd",
+          d: "M7.75 4a.75.75 0 0 1-.75.75H1a.75.75 0 0 1 0-1.5h6a.75.75 0 0 1 .75.75Z",
+          clipRule: "evenodd"
+        }
+      )
+    ]
+  }
+);
+var MinusIcon_default = SvgMinusIcon;
+
+// src/8/PlusIcon.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var SvgPlusIcon = ({
+  title,
+  titleId,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: props.size || "1em",
+    height: props.size || "1em",
+    fill: "none",
+    viewBox: "0 0 8 8",
+    "aria-labelledby": titleId,
+    ...props,
+    children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "path",
+        {
+          fill: "currentColor",
+          fillRule: "evenodd",
+          d: "M4 .25a.75.75 0 0 1 .75.75v2.25H7a.75.75 0 0 1 0 1.5H4.75V7a.75.75 0 0 1-1.5 0V4.75H1a.75.75 0 0 1 0-1.5h2.25V1A.75.75 0 0 1 4 .25Z",
+          clipRule: "evenodd"
+        }
+      )
+    ]
+  }
+);
+var PlusIcon_default = SvgPlusIcon;
+
+// src/8/XIcon.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var SvgXIcon = ({
+  title,
+  titleId,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: props.size || "1em",
+    height: props.size || "1em",
+    fill: "none",
+    viewBox: "0 0 8 8",
+    "aria-labelledby": titleId,
+    ...props,
+    children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("g", { clipPath: "url(#x-icon_svg__a)", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "path",
+        {
+          fill: "currentColor",
+          fillRule: "evenodd",
+          d: "M.288 7.712a.75.75 0 0 1 0-1.06L2.94 4 .288 1.348a.75.75 0 1 1 1.06-1.06L4 2.939 6.652.288a.75.75 0 0 1 1.06 1.06L5.062 4l2.652 2.652a.75.75 0 0 1-1.061 1.06L4 5.061 1.35 7.712a.75.75 0 0 1-1.061 0Z",
+          clipRule: "evenodd"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("clipPath", { id: "x-icon_svg__a", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { fill: "transparent", d: "M0 0h8v8H0z" }) }) })
+    ]
+  }
+);
+var XIcon_default = SvgXIcon;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CaretRightIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  EllipseIcon,
+  MinusIcon,
+  PlusIcon,
+  XIcon
+});

package/8/index.mjs

@@ -0,0 +1,225 @@
+// src/8/CaretRightIcon.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var SvgCaretRightIcon = ({
+  title,
+  titleId,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: props.size || "1em",
+    height: props.size || "1em",
+    fill: "none",
+    viewBox: "0 0 8 8",
+    "aria-labelledby": titleId,
+    ...props,
+    children: [
+      title ? /* @__PURE__ */ jsx("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          fill: "currentColor",
+          fillRule: "evenodd",
+          d: "M2.47 1.47a.75.75 0 0 0 0 1.06L3.94 4 2.47 5.47a.75.75 0 0 0 1.06 1.06l2-2a.75.75 0 0 0 0-1.06l-2-2a.75.75 0 0 0-1.06 0Z",
+          clipRule: "evenodd"
+        }
+      )
+    ]
+  }
+);
+var CaretRightIcon_default = SvgCaretRightIcon;
+
+// src/8/ChevronDownIcon.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var SvgChevronDownIcon = ({
+  title,
+  titleId,
+  ...props
+}) => /* @__PURE__ */ jsxs2(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: props.size || "1em",
+    height: props.size || "1em",
+    fill: "none",
+    viewBox: "0 0 8 8",
+    "aria-labelledby": titleId,
+    ...props,
+    children: [
+      title ? /* @__PURE__ */ jsx2("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ jsx2(
+        "path",
+        {
+          fill: "currentColor",
+          fillRule: "evenodd",
+          d: "M6.53 2.47a.75.75 0 0 0-1.06 0L4 3.94 2.53 2.47a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l2-2a.75.75 0 0 0 0-1.06Z",
+          clipRule: "evenodd"
+        }
+      )
+    ]
+  }
+);
+var ChevronDownIcon_default = SvgChevronDownIcon;
+
+// src/8/ChevronRightIcon.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var SvgChevronRightIcon = ({
+  title,
+  titleId,
+  ...props
+}) => /* @__PURE__ */ jsxs3(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: props.size || "1em",
+    height: props.size || "1em",
+    fill: "none",
+    viewBox: "0 0 8 8",
+    "aria-labelledby": titleId,
+    ...props,
+    children: [
+      title ? /* @__PURE__ */ jsx3("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ jsx3("path", { fill: "currentColor", d: "M1 8V0l6 4-6 4Z" })
+    ]
+  }
+);
+var ChevronRightIcon_default = SvgChevronRightIcon;
+
+// src/8/EllipseIcon.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var SvgEllipseIcon = ({
+  title,
+  titleId,
+  ...props
+}) => /* @__PURE__ */ jsxs4(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: props.size || "1em",
+    height: props.size || "1em",
+    fill: "none",
+    viewBox: "0 0 8 8",
+    "aria-labelledby": titleId,
+    ...props,
+    children: [
+      title ? /* @__PURE__ */ jsx4("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ jsx4(
+        "path",
+        {
+          fill: "currentColor",
+          fillRule: "evenodd",
+          d: "M4 6.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM4 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z",
+          clipRule: "evenodd"
+        }
+      )
+    ]
+  }
+);
+var EllipseIcon_default = SvgEllipseIcon;
+
+// src/8/MinusIcon.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var SvgMinusIcon = ({
+  title,
+  titleId,
+  ...props
+}) => /* @__PURE__ */ jsxs5(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: props.size || "1em",
+    height: props.size || "1em",
+    fill: "none",
+    viewBox: "0 0 8 8",
+    "aria-labelledby": titleId,
+    ...props,
+    children: [
+      title ? /* @__PURE__ */ jsx5("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ jsx5(
+        "path",
+        {
+          fill: "currentColor",
+          fillRule: "evenodd",
+          d: "M7.75 4a.75.75 0 0 1-.75.75H1a.75.75 0 0 1 0-1.5h6a.75.75 0 0 1 .75.75Z",
+          clipRule: "evenodd"
+        }
+      )
+    ]
+  }
+);
+var MinusIcon_default = SvgMinusIcon;
+
+// src/8/PlusIcon.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var SvgPlusIcon = ({
+  title,
+  titleId,
+  ...props
+}) => /* @__PURE__ */ jsxs6(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: props.size || "1em",
+    height: props.size || "1em",
+    fill: "none",
+    viewBox: "0 0 8 8",
+    "aria-labelledby": titleId,
+    ...props,
+    children: [
+      title ? /* @__PURE__ */ jsx6("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ jsx6(
+        "path",
+        {
+          fill: "currentColor",
+          fillRule: "evenodd",
+          d: "M4 .25a.75.75 0 0 1 .75.75v2.25H7a.75.75 0 0 1 0 1.5H4.75V7a.75.75 0 0 1-1.5 0V4.75H1a.75.75 0 0 1 0-1.5h2.25V1A.75.75 0 0 1 4 .25Z",
+          clipRule: "evenodd"
+        }
+      )
+    ]
+  }
+);
+var PlusIcon_default = SvgPlusIcon;
+
+// src/8/XIcon.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var SvgXIcon = ({
+  title,
+  titleId,
+  ...props
+}) => /* @__PURE__ */ jsxs7(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: props.size || "1em",
+    height: props.size || "1em",
+    fill: "none",
+    viewBox: "0 0 8 8",
+    "aria-labelledby": titleId,
+    ...props,
+    children: [
+      title ? /* @__PURE__ */ jsx7("title", { id: titleId, children: title }) : null,
+      /* @__PURE__ */ jsx7("g", { clipPath: "url(#x-icon_svg__a)", children: /* @__PURE__ */ jsx7(
+        "path",
+        {
+          fill: "currentColor",
+          fillRule: "evenodd",
+          d: "M.288 7.712a.75.75 0 0 1 0-1.06L2.94 4 .288 1.348a.75.75 0 1 1 1.06-1.06L4 2.939 6.652.288a.75.75 0 0 1 1.06 1.06L5.062 4l2.652 2.652a.75.75 0 0 1-1.061 1.06L4 5.061 1.35 7.712a.75.75 0 0 1-1.061 0Z",
+          clipRule: "evenodd"
+        }
+      ) }),
+      /* @__PURE__ */ jsx7("defs", { children: /* @__PURE__ */ jsx7("clipPath", { id: "x-icon_svg__a", children: /* @__PURE__ */ jsx7("path", { fill: "transparent", d: "M0 0h8v8H0z" }) }) })
+    ]
+  }
+);
+var XIcon_default = SvgXIcon;
+export {
+  CaretRightIcon_default as CaretRightIcon,
+  ChevronDownIcon_default as ChevronDownIcon,
+  ChevronRightIcon_default as ChevronRightIcon,
+  EllipseIcon_default as EllipseIcon,
+  MinusIcon_default as MinusIcon,
+  PlusIcon_default as PlusIcon,
+  XIcon_default as XIcon
+};

package/dist/index.css

@@ -0,0 +1,4 @@
+/* vanilla-extract-css-ns:src/Icon.css.ts.vanilla.css?source=Lkljb25faWNvbldyYXBwZXJfXzFybDhvcGUwIHsKICBkaXNwbGF5OiBjb250ZW50czsKfQ== */
+.Icon_iconWrapper__1rl8ope0 {
+  display: contents;
+}

package/dist/index.d.mts

@@ -0,0 +1,44 @@
+import React, { CSSProperties, SVGProps } from 'react';
+
+declare const Icon: React.ForwardRefExoticComponent<{
+    svg: string;
+} & {
+    className?: string | undefined;
+    size?: string | number | undefined;
+    style?: React.CSSProperties | undefined;
+    title?: string | undefined;
+} & React.RefAttributes<HTMLSpanElement>>;
+
+type SharedProps = {
+    /** The `className` property assigned to the SVG element of the component. */
+    className?: string;
+    /**
+     * The `width` and `height` of the icon. This can be a string or a number. If
+     * you want to set the width and height to different values, you can pass
+     * `width` and `height` as separate props.
+     *
+     * @default "1em"
+     */
+    size?: string | number;
+    /** The style applicable to the SVG element of the component. */
+    style?: React.CSSProperties;
+    title?: string;
+};
+type IconComponentProps = {
+    /**
+     * The SVG string of the icon to render. This is useful if you want to render
+     * an icon that is not in the catalog of icons provided in the list above. You
+     * can use the `createIcon` function to create an icon from an SVG string.
+     *
+     * @default undefined
+     */
+    svg: string;
+} & SharedProps;
+type SVGRProps = {
+    title?: string;
+    titleId?: string;
+    size?: CSSProperties["width"];
+};
+type IconProps = SVGRProps & SVGProps<SVGSVGElement>;
+
+export { Icon, IconComponentProps, IconProps, SVGRProps };

package/dist/index.d.ts

@@ -0,0 +1,44 @@
+import React, { CSSProperties, SVGProps } from 'react';
+
+declare const Icon: React.ForwardRefExoticComponent<{
+    svg: string;
+} & {
+    className?: string | undefined;
+    size?: string | number | undefined;
+    style?: React.CSSProperties | undefined;
+    title?: string | undefined;
+} & React.RefAttributes<HTMLSpanElement>>;
+
+type SharedProps = {
+    /** The `className` property assigned to the SVG element of the component. */
+    className?: string;
+    /**
+     * The `width` and `height` of the icon. This can be a string or a number. If
+     * you want to set the width and height to different values, you can pass
+     * `width` and `height` as separate props.
+     *
+     * @default "1em"
+     */
+    size?: string | number;
+    /** The style applicable to the SVG element of the component. */
+    style?: React.CSSProperties;
+    title?: string;
+};
+type IconComponentProps = {
+    /**
+     * The SVG string of the icon to render. This is useful if you want to render
+     * an icon that is not in the catalog of icons provided in the list above. You
+     * can use the `createIcon` function to create an icon from an SVG string.
+     *
+     * @default undefined
+     */
+    svg: string;
+} & SharedProps;
+type SVGRProps = {
+    title?: string;
+    titleId?: string;
+    size?: CSSProperties["width"];
+};
+type IconProps = SVGRProps & SVGProps<SVGSVGElement>;
+
+export { Icon, IconComponentProps, IconProps, SVGRProps };

package/dist/index.js

@@ -0,0 +1,114 @@
+"use strict";
+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);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Icon: () => Icon
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/Icon.tsx
+var Dompurify = __toESM(require("dompurify"));
+var import_react = __toESM(require("react"));
+var import_react_aria = require("react-aria");
+var import_utils = require("@baseline-ui/utils");
+
+// src/Icon.css.ts
+var iconWrapper = "Icon_iconWrapper__1rl8ope0";
+
+// src/Icon.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var setSizeAttributes = (svgElement, size) => {
+  svgElement.setAttribute(
+    "height",
+    typeof size === "number" ? `${size}px` : size
+  );
+  svgElement.setAttribute(
+    "width",
+    typeof size === "number" ? `${size}px` : size
+  );
+};
+var updateSvgTitle = (svgElement, title, id) => {
+  const titleElement = svgElement.querySelector("title");
+  if (titleElement) {
+    titleElement.textContent = title;
+    titleElement.setAttribute("id", id);
+  } else {
+    const newTitleElement = document.createElement("title");
+    newTitleElement.textContent = title;
+    newTitleElement.setAttribute("id", id);
+    svgElement.prepend(newTitleElement);
+  }
+};
+var setClassName = (svgElement, className) => {
+  if (className) {
+    svgElement.classList.add(className);
+  }
+};
+var getSanitizedSvgElement = (_svg) => {
+  const span = document.createElement("span");
+  span.innerHTML = Dompurify.default.sanitize(_svg);
+  const svgElement = span.querySelector("svg");
+  (0, import_utils.invariant)(svgElement, "Icon: svg prop must be a valid svg string");
+  return svgElement;
+};
+var Icon = import_react.default.forwardRef(
+  ({ size, title, className, style, ...rest }, ref) => {
+    const id = (0, import_react_aria.useId)();
+    const _svg = "svg" in rest ? rest.svg : void 0;
+    const svgString = import_react.default.useMemo(() => {
+      if (_svg) {
+        const svgElement = getSanitizedSvgElement(_svg);
+        if (size) {
+          setSizeAttributes(svgElement, size);
+        }
+        if (title) {
+          updateSvgTitle(svgElement, title, id);
+        }
+        setClassName(svgElement, className);
+        return svgElement.outerHTML;
+      }
+    }, [_svg, size, title, className, id]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "span",
+      {
+        className: (0, import_utils.classNames)(iconWrapper, className),
+        ref,
+        style,
+        dangerouslySetInnerHTML: svgString ? { __html: svgString } : void 0
+      }
+    );
+  }
+);
+Icon.displayName = "Icon";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Icon
+});