@solostylist/ui-kit 1.0.0

package/dist/styles/theme/components/chip.js

@@ -0,0 +1,106 @@
+import { j as c } from "../../../jsx-runtime-B6kdoens.js";
+import r, { forwardRef as s } from "react";
+import { E as d } from "../../../SSRBase-B9xq2wUG.js";
+import { g as m } from "../../../generateUtilityClasses-CuEy5gtx.js";
+const p = m("MuiChip", ["root", "sizeSmall", "sizeMedium", "colorDefault", "colorError", "colorInfo", "colorPrimary", "colorSecondary", "colorSuccess", "colorWarning", "disabled", "clickable", "clickableColorPrimary", "clickableColorSecondary", "deletable", "deletableColorPrimary", "deletableColorSecondary", "outlined", "filled", "outlinedPrimary", "outlinedSecondary", "filledPrimary", "filledSecondary", "avatar", "avatarSmall", "avatarMedium", "avatarColorPrimary", "avatarColorSecondary", "icon", "iconSmall", "iconMedium", "iconColorPrimary", "iconColorSecondary", "label", "labelSmall", "labelMedium", "deleteIcon", "deleteIconSmall", "deleteIconMedium", "deleteIconColorPrimary", "deleteIconColorSecondary", "deleteIconOutlinedColorPrimary", "deleteIconOutlinedColorSecondary", "deleteIconFilledColorPrimary", "deleteIconFilledColorSecondary", "focusVisible"]), u = /* @__PURE__ */ new Map([
+  [
+    "bold",
+    /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement("path", { d: "M168.49,104.49,145,128l23.52,23.51a12,12,0,0,1-17,17L128,145l-23.51,23.52a12,12,0,0,1-17-17L111,128,87.51,104.49a12,12,0,0,1,17-17L128,111l23.51-23.52a12,12,0,0,1,17,17ZM236,128A108,108,0,1,1,128,20,108.12,108.12,0,0,1,236,128Zm-24,0a84,84,0,1,0-84,84A84.09,84.09,0,0,0,212,128Z" }))
+  ],
+  [
+    "duotone",
+    /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement("path", { d: "M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z", opacity: "0.2" }), /* @__PURE__ */ r.createElement("path", { d: "M165.66,101.66,139.31,128l26.35,26.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z" }))
+  ],
+  [
+    "fill",
+    /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement("path", { d: "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm37.66,130.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32L139.31,128Z" }))
+  ],
+  [
+    "light",
+    /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement("path", { d: "M164.24,100.24,136.48,128l27.76,27.76a6,6,0,1,1-8.48,8.48L128,136.48l-27.76,27.76a6,6,0,0,1-8.48-8.48L119.52,128,91.76,100.24a6,6,0,0,1,8.48-8.48L128,119.52l27.76-27.76a6,6,0,0,1,8.48,8.48ZM230,128A102,102,0,1,1,128,26,102.12,102.12,0,0,1,230,128Zm-12,0a90,90,0,1,0-90,90A90.1,90.1,0,0,0,218,128Z" }))
+  ],
+  [
+    "regular",
+    /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement("path", { d: "M165.66,101.66,139.31,128l26.35,26.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z" }))
+  ],
+  [
+    "thin",
+    /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement("path", { d: "M162.83,98.83,133.66,128l29.17,29.17a4,4,0,0,1-5.66,5.66L128,133.66,98.83,162.83a4,4,0,0,1-5.66-5.66L122.34,128,93.17,98.83a4,4,0,0,1,5.66-5.66L128,122.34l29.17-29.17a4,4,0,1,1,5.66,5.66ZM228,128A100,100,0,1,1,128,28,100.11,100.11,0,0,1,228,128Zm-8,0a92,92,0,1,0-92,92A92.1,92.1,0,0,0,220,128Z" }))
+  ]
+]);
+var f = Object.defineProperty, C = Object.defineProperties, v = Object.getOwnPropertyDescriptors, l = Object.getOwnPropertySymbols, y = Object.prototype.hasOwnProperty, b = Object.prototype.propertyIsEnumerable, i = (e, a, o) => a in e ? f(e, a, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[a] = o, h = (e, a) => {
+  for (var o in a || (a = {}))
+    y.call(a, o) && i(e, o, a[o]);
+  if (l)
+    for (var o of l(a))
+      b.call(a, o) && i(e, o, a[o]);
+  return e;
+}, g = (e, a) => C(e, v(a));
+const n = s((e, a) => /* @__PURE__ */ r.createElement(d, g(h({ ref: a }, e), { weights: u })));
+n.displayName = "XCircle";
+function t(e, a) {
+  return {
+    "--Chip-softBg": `var(--mui-palette-${e}-50)`,
+    "--Chip-softColor": `var(--mui-palette-${e}-500)`,
+    "--Chip-softDisabledBg": `var(--mui-palette-${e}-50)`,
+    "--Chip-softDisabledColor": `var(--mui-palette-${e}-400)`,
+    "--Chip-softHoverBg": `var(--mui-palette-${e}-200)`,
+    "--Chip-softDeleteIconColor": `var(--mui-palette-${e}-700)`,
+    "--Chip-softDeleteIconHoverColor": `var(--mui-palette-${e}-800)`,
+    ...a.applyStyles("dark", {
+      "--Chip-softBg": `var(--mui-palette-${e}-800)`,
+      "--Chip-softColor": `var(--mui-palette-${e}-200)`,
+      "--Chip-softDisabledBg": `var(--mui-palette-${e}-800)`,
+      "--Chip-softDisabledColor": `var(--mui-palette-${e}-500)`,
+      "--Chip-softHoverBg": `var(--mui-palette-${e}-700)`,
+      "--Chip-softDeleteIconColor": `var(--mui-palette-${e}-200)`,
+      "--Chip-softDeleteIconHoverColor": `var(--mui-palette-${e}-50)`
+    })
+  };
+}
+const L = {
+  defaultProps: {
+    color: "secondary",
+    // default will be removed in material v6
+    deleteIcon: /* @__PURE__ */ c.jsx(n, {})
+  },
+  styleOverrides: {
+    root: { borderRadius: "8px", fontWeight: 400 },
+    outlinedSecondary: ({ theme: e }) => ({
+      borderColor: "var(--mui-palette-secondary-200)",
+      color: "var(--mui-palette-secondary-900)",
+      ...e.applyStyles("dark", {
+        borderColor: "var(--mui-palette-secondary-700)",
+        color: "var(--mui-palette-secondary-50)"
+      })
+    }),
+    soft: ({ ownerState: e }) => ({
+      backgroundColor: "var(--Chip-softBg)",
+      color: "var(--Chip-softColor)",
+      ...e.disabled && {
+        backgroundColor: "var(--Chip-softDisabledBg)",
+        color: "var(--Chip-softDisabledColor)"
+      },
+      border: "1px solid var(--mui-palette-secondary-100)",
+      ...e.clickable && {
+        "&:hover": { backgroundColor: "var(--Chip-softHoverBg)" }
+      },
+      [`& .${p.deleteIcon}`]: {
+        color: "var(--Chip-softDeleteIconColor)",
+        "&:hover": { color: "var(--Chip-softDeleteIconHoverColor)" }
+      },
+      "&.Mui-focusVisible": { backgroundColor: "var(--Chip-softHoverBg)" }
+    }),
+    softPrimary: ({ theme: e }) => t("primary", e),
+    softSecondary: ({ theme: e }) => t("secondary", e),
+    softSuccess: ({ theme: e }) => t("success", e),
+    softInfo: ({ theme: e }) => t("info", e),
+    softWarning: ({ theme: e }) => t("warning", e),
+    softError: ({ theme: e }) => t("error", e),
+    iconSmall: { fontSize: "var(--icon-fontSize-sm)" },
+    iconMedium: { fontSize: "var(--icon-fontSize-md)" }
+  }
+};
+export {
+  L as MuiChip
+};