xertica-ui 2.7.0 → 2.9.6

package/dist/Isotype-ChKwN7e-.cjs

@@ -0,0 +1,91 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const button = require('./button-Kd9Fj53S.cjs');
+
+const ISOTYPE_COLORS = {
+  purple: "#5A4A96",
+  blue: "#1899AF",
+  magenta: "#C45BAA",
+  yellow: "#FAF338",
+  green: "#2E8B5A",
+  red: "#DE5B48",
+  brown: "#2A2415"
+};
+const ISOTYPE_PATTERNS = {
+  core: [
+    "purple",
+    "blue",
+    "blue",
+    "blue",
+    "magenta",
+    "blank",
+    "yellow",
+    "green",
+    "magenta",
+    "yellow",
+    "yellow",
+    "green",
+    "magenta",
+    "red",
+    "red",
+    "brown"
+  ]
+};
+const ISOTYPE_PATTERN_IDS = Object.keys(ISOTYPE_PATTERNS);
+function mulberry32(seed) {
+  let a = seed >>> 0;
+  return () => {
+    a |= 0;
+    a = a + 1831565813 | 0;
+    let t = Math.imul(a ^ a >>> 15, 1 | a);
+    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function getIsotypeVariant(patternId, seed) {
+  const base = ISOTYPE_PATTERNS[patternId];
+  const candidateIndices = base.reduce(
+    (acc, cell, i) => cell === "blank" ? acc : [...acc, i],
+    []
+  );
+  const rng = mulberry32(seed);
+  const chosen = candidateIndices[Math.floor(rng() * candidateIndices.length)];
+  return base.map((cell, i) => i === chosen ? "blank" : cell);
+}
+
+function Isotype({
+  pattern = "core",
+  variantSeed,
+  className,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const cells = variantSeed === void 0 ? ISOTYPE_PATTERNS[pattern] : getIsotypeVariant(pattern, variantSeed);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: ariaLabel ? "img" : void 0,
+      "aria-label": ariaLabel,
+      "aria-hidden": ariaLabel ? void 0 : true,
+      className: button.cn(
+        "grid aspect-square grid-cols-4 grid-rows-4 ring-1 ring-foreground/15",
+        className
+      ),
+      ...props,
+      children: cells.map((cell, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: { backgroundColor: cell === "blank" ? void 0 : ISOTYPE_COLORS[cell] }
+        },
+        index
+      ))
+    }
+  );
+}
+
+exports.ISOTYPE_COLORS = ISOTYPE_COLORS;
+exports.ISOTYPE_PATTERNS = ISOTYPE_PATTERNS;
+exports.ISOTYPE_PATTERN_IDS = ISOTYPE_PATTERN_IDS;
+exports.Isotype = Isotype;
+exports.getIsotypeVariant = getIsotypeVariant;

package/dist/IsotypeDiagonal-CuPYPP4f.js

@@ -0,0 +1,84 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { c as cn } from './button-B3SE1liJ.js';
+
+const ISOTYPE_COLORS = {
+  purple: "#5A4A96",
+  blue: "#1899AF",
+  magenta: "#C45BAA",
+  yellow: "#FAF338",
+  green: "#2E8B5A",
+  red: "#DE5B48",
+  brown: "#2A2415"
+};
+const ISOTYPE_PATTERNS = {
+  core: [
+    "purple",
+    "blue",
+    "blue",
+    "blue",
+    "magenta",
+    "blank",
+    "yellow",
+    "green",
+    "magenta",
+    "yellow",
+    "yellow",
+    "green",
+    "magenta",
+    "red",
+    "red",
+    "brown"
+  ]
+};
+const ISOTYPE_PATTERN_IDS = Object.keys(ISOTYPE_PATTERNS);
+function mulberry32(seed) {
+  let a = seed >>> 0;
+  return () => {
+    a |= 0;
+    a = a + 1831565813 | 0;
+    let t = Math.imul(a ^ a >>> 15, 1 | a);
+    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function getIsotypeVariant(patternId, seed) {
+  const base = ISOTYPE_PATTERNS[patternId];
+  const candidateIndices = base.reduce(
+    (acc, cell, i) => cell === "blank" ? acc : [...acc, i],
+    []
+  );
+  const rng = mulberry32(seed);
+  const chosen = candidateIndices[Math.floor(rng() * candidateIndices.length)];
+  return base.map((cell, i) => i === chosen ? "blank" : cell);
+}
+
+const CELL = 25;
+const SIZE = 100;
+function IsotypeDiagonal({
+  className,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: ariaLabel ? "img" : void 0,
+      "aria-label": ariaLabel,
+      "aria-hidden": ariaLabel ? void 0 : true,
+      className: cn("aspect-square", className),
+      ...props,
+      children: /* @__PURE__ */ jsxs("svg", { viewBox: `0 0 ${SIZE} ${SIZE}`, className: "h-full w-full", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx("rect", { x: 0, y: 0, width: SIZE, height: CELL, fill: ISOTYPE_COLORS.blue }),
+        /* @__PURE__ */ jsx("rect", { x: 0, y: 0, width: CELL, height: CELL, fill: ISOTYPE_COLORS.purple }),
+        /* @__PURE__ */ jsx("polygon", { points: "100,0 75,25 75,75 100,75", fill: ISOTYPE_COLORS.green }),
+        /* @__PURE__ */ jsx("rect", { x: 0, y: SIZE - CELL, width: SIZE, height: CELL, fill: ISOTYPE_COLORS.red }),
+        /* @__PURE__ */ jsx("polygon", { points: "0,25 25,25 25,75 0,100", fill: ISOTYPE_COLORS.magenta }),
+        /* @__PURE__ */ jsx("rect", { x: SIZE - CELL, y: SIZE - CELL, width: CELL, height: CELL, fill: ISOTYPE_COLORS.brown }),
+        /* @__PURE__ */ jsx("polygon", { points: "75,25 75,75 25,75", fill: ISOTYPE_COLORS.yellow }),
+        /* @__PURE__ */ jsx("polygon", { points: "25,25 75,25 25,75", fill: "none" })
+      ] })
+    }
+  );
+}
+
+export { ISOTYPE_COLORS as I, ISOTYPE_PATTERNS as a, ISOTYPE_PATTERN_IDS as b, IsotypeDiagonal as c, getIsotypeVariant as g, mulberry32 as m };

package/dist/IsotypeDiagonal-eNcOXRAc.cjs

@@ -0,0 +1,91 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const button = require('./button-DVhloDtr.cjs');
+
+const ISOTYPE_COLORS = {
+  purple: "#5A4A96",
+  blue: "#1899AF",
+  magenta: "#C45BAA",
+  yellow: "#FAF338",
+  green: "#2E8B5A",
+  red: "#DE5B48",
+  brown: "#2A2415"
+};
+const ISOTYPE_PATTERNS = {
+  core: [
+    "purple",
+    "blue",
+    "blue",
+    "blue",
+    "magenta",
+    "blank",
+    "yellow",
+    "green",
+    "magenta",
+    "yellow",
+    "yellow",
+    "green",
+    "magenta",
+    "red",
+    "red",
+    "brown"
+  ]
+};
+const ISOTYPE_PATTERN_IDS = Object.keys(ISOTYPE_PATTERNS);
+function mulberry32(seed) {
+  let a = seed >>> 0;
+  return () => {
+    a |= 0;
+    a = a + 1831565813 | 0;
+    let t = Math.imul(a ^ a >>> 15, 1 | a);
+    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function getIsotypeVariant(patternId, seed) {
+  const base = ISOTYPE_PATTERNS[patternId];
+  const candidateIndices = base.reduce(
+    (acc, cell, i) => cell === "blank" ? acc : [...acc, i],
+    []
+  );
+  const rng = mulberry32(seed);
+  const chosen = candidateIndices[Math.floor(rng() * candidateIndices.length)];
+  return base.map((cell, i) => i === chosen ? "blank" : cell);
+}
+
+const CELL = 25;
+const SIZE = 100;
+function IsotypeDiagonal({
+  className,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: ariaLabel ? "img" : void 0,
+      "aria-label": ariaLabel,
+      "aria-hidden": ariaLabel ? void 0 : true,
+      className: button.cn("aspect-square", className),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: `0 0 ${SIZE} ${SIZE}`, className: "h-full w-full", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 0, y: 0, width: SIZE, height: CELL, fill: ISOTYPE_COLORS.blue }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 0, y: 0, width: CELL, height: CELL, fill: ISOTYPE_COLORS.purple }),
+        /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "100,0 75,25 75,75 100,75", fill: ISOTYPE_COLORS.green }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 0, y: SIZE - CELL, width: SIZE, height: CELL, fill: ISOTYPE_COLORS.red }),
+        /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "0,25 25,25 25,75 0,100", fill: ISOTYPE_COLORS.magenta }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: SIZE - CELL, y: SIZE - CELL, width: CELL, height: CELL, fill: ISOTYPE_COLORS.brown }),
+        /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "75,25 75,75 25,75", fill: ISOTYPE_COLORS.yellow }),
+        /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "25,25 75,25 25,75", fill: "none" })
+      ] })
+    }
+  );
+}
+
+exports.ISOTYPE_COLORS = ISOTYPE_COLORS;
+exports.ISOTYPE_PATTERNS = ISOTYPE_PATTERNS;
+exports.ISOTYPE_PATTERN_IDS = ISOTYPE_PATTERN_IDS;
+exports.IsotypeDiagonal = IsotypeDiagonal;
+exports.getIsotypeVariant = getIsotypeVariant;
+exports.mulberry32 = mulberry32;

package/dist/IsotypeDiagonal-oiwpXZhE.js

@@ -0,0 +1,104 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { c as cn } from './button-B05czY_8.js';
+import { a as ISOTYPE_COLORS } from './IsotypeTwist-BTdNL4iV.js';
+
+const ISOTYPE_FRAME_VARIANTS = {
+  "blue-magenta": ["blue", "magenta"],
+  "blue-yellow": ["blue", "yellow"]
+};
+const ISOTYPE_FRAME_VARIANT_IDS = Object.keys(
+  ISOTYPE_FRAME_VARIANTS
+);
+
+const FRAME_SIZE = 78;
+const FRAME_THICKNESS = 27;
+const FRAME_BLEND_MODE = "multiply";
+const FRAME_OFFSET = FRAME_SIZE / 6;
+const BACK_FRAME = { x: 0, y: 0 };
+const FRONT_FRAME = { x: FRAME_OFFSET, y: FRAME_OFFSET };
+const VIEWBOX_MIN = -FRAME_THICKNESS / 2;
+const VIEWBOX_SIZE = FRAME_SIZE + FRAME_OFFSET + FRAME_THICKNESS;
+function IsotypeFrames({
+  variant = "blue-magenta",
+  className,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const [backKey, frontKey] = ISOTYPE_FRAME_VARIANTS[variant];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: ariaLabel ? "img" : void 0,
+      "aria-label": ariaLabel,
+      "aria-hidden": ariaLabel ? void 0 : true,
+      className: cn("isolate aspect-square", className),
+      ...props,
+      children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          viewBox: `${VIEWBOX_MIN} ${VIEWBOX_MIN} ${VIEWBOX_SIZE} ${VIEWBOX_SIZE}`,
+          className: "h-full w-full",
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: BACK_FRAME.x,
+                y: BACK_FRAME.y,
+                width: FRAME_SIZE,
+                height: FRAME_SIZE,
+                fill: "none",
+                stroke: ISOTYPE_COLORS[backKey],
+                strokeWidth: FRAME_THICKNESS
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: FRONT_FRAME.x,
+                y: FRONT_FRAME.y,
+                width: FRAME_SIZE,
+                height: FRAME_SIZE,
+                fill: "none",
+                stroke: ISOTYPE_COLORS[frontKey],
+                strokeWidth: FRAME_THICKNESS,
+                style: { mixBlendMode: FRAME_BLEND_MODE }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+const CELL = 25;
+const SIZE = 100;
+function IsotypeDiagonal({
+  className,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: ariaLabel ? "img" : void 0,
+      "aria-label": ariaLabel,
+      "aria-hidden": ariaLabel ? void 0 : true,
+      className: cn("aspect-square", className),
+      ...props,
+      children: /* @__PURE__ */ jsxs("svg", { viewBox: `0 0 ${SIZE} ${SIZE}`, className: "h-full w-full", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx("rect", { x: 0, y: 0, width: SIZE, height: CELL, fill: ISOTYPE_COLORS.blue }),
+        /* @__PURE__ */ jsx("rect", { x: 0, y: 0, width: CELL, height: CELL, fill: ISOTYPE_COLORS.purple }),
+        /* @__PURE__ */ jsx("polygon", { points: "100,0 75,25 75,75 100,75", fill: ISOTYPE_COLORS.green }),
+        /* @__PURE__ */ jsx("rect", { x: 0, y: SIZE - CELL, width: SIZE, height: CELL, fill: ISOTYPE_COLORS.red }),
+        /* @__PURE__ */ jsx("polygon", { points: "0,25 25,25 25,75 0,100", fill: ISOTYPE_COLORS.magenta }),
+        /* @__PURE__ */ jsx("rect", { x: SIZE - CELL, y: SIZE - CELL, width: CELL, height: CELL, fill: ISOTYPE_COLORS.brown }),
+        /* @__PURE__ */ jsx("polygon", { points: "75,25 75,75 25,75", fill: ISOTYPE_COLORS.yellow }),
+        /* @__PURE__ */ jsx("polygon", { points: "25,25 75,25 25,75", fill: "none" })
+      ] })
+    }
+  );
+}
+
+export { ISOTYPE_FRAME_VARIANTS as I, ISOTYPE_FRAME_VARIANT_IDS as a, IsotypeDiagonal as b, IsotypeFrames as c };

package/dist/IsotypeDiagonal-xMFoFXkb.cjs

@@ -0,0 +1,109 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const button = require('./button-BMDlWZR8.cjs');
+const IsotypeTwist = require('./IsotypeTwist-DvsUgZs_.cjs');
+
+const ISOTYPE_FRAME_VARIANTS = {
+  "blue-magenta": ["blue", "magenta"],
+  "blue-yellow": ["blue", "yellow"]
+};
+const ISOTYPE_FRAME_VARIANT_IDS = Object.keys(
+  ISOTYPE_FRAME_VARIANTS
+);
+
+const FRAME_SIZE = 78;
+const FRAME_THICKNESS = 27;
+const FRAME_BLEND_MODE = "multiply";
+const FRAME_OFFSET = FRAME_SIZE / 6;
+const BACK_FRAME = { x: 0, y: 0 };
+const FRONT_FRAME = { x: FRAME_OFFSET, y: FRAME_OFFSET };
+const VIEWBOX_MIN = -FRAME_THICKNESS / 2;
+const VIEWBOX_SIZE = FRAME_SIZE + FRAME_OFFSET + FRAME_THICKNESS;
+function IsotypeFrames({
+  variant = "blue-magenta",
+  className,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const [backKey, frontKey] = ISOTYPE_FRAME_VARIANTS[variant];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: ariaLabel ? "img" : void 0,
+      "aria-label": ariaLabel,
+      "aria-hidden": ariaLabel ? void 0 : true,
+      className: button.cn("isolate aspect-square", className),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          viewBox: `${VIEWBOX_MIN} ${VIEWBOX_MIN} ${VIEWBOX_SIZE} ${VIEWBOX_SIZE}`,
+          className: "h-full w-full",
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "rect",
+              {
+                x: BACK_FRAME.x,
+                y: BACK_FRAME.y,
+                width: FRAME_SIZE,
+                height: FRAME_SIZE,
+                fill: "none",
+                stroke: IsotypeTwist.ISOTYPE_COLORS[backKey],
+                strokeWidth: FRAME_THICKNESS
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "rect",
+              {
+                x: FRONT_FRAME.x,
+                y: FRONT_FRAME.y,
+                width: FRAME_SIZE,
+                height: FRAME_SIZE,
+                fill: "none",
+                stroke: IsotypeTwist.ISOTYPE_COLORS[frontKey],
+                strokeWidth: FRAME_THICKNESS,
+                style: { mixBlendMode: FRAME_BLEND_MODE }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+const CELL = 25;
+const SIZE = 100;
+function IsotypeDiagonal({
+  className,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: ariaLabel ? "img" : void 0,
+      "aria-label": ariaLabel,
+      "aria-hidden": ariaLabel ? void 0 : true,
+      className: button.cn("aspect-square", className),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: `0 0 ${SIZE} ${SIZE}`, className: "h-full w-full", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 0, y: 0, width: SIZE, height: CELL, fill: IsotypeTwist.ISOTYPE_COLORS.blue }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 0, y: 0, width: CELL, height: CELL, fill: IsotypeTwist.ISOTYPE_COLORS.purple }),
+        /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "100,0 75,25 75,75 100,75", fill: IsotypeTwist.ISOTYPE_COLORS.green }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 0, y: SIZE - CELL, width: SIZE, height: CELL, fill: IsotypeTwist.ISOTYPE_COLORS.red }),
+        /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "0,25 25,25 25,75 0,100", fill: IsotypeTwist.ISOTYPE_COLORS.magenta }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: SIZE - CELL, y: SIZE - CELL, width: CELL, height: CELL, fill: IsotypeTwist.ISOTYPE_COLORS.brown }),
+        /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "75,25 75,75 25,75", fill: IsotypeTwist.ISOTYPE_COLORS.yellow }),
+        /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "25,25 75,25 25,75", fill: "none" })
+      ] })
+    }
+  );
+}
+
+exports.ISOTYPE_FRAME_VARIANTS = ISOTYPE_FRAME_VARIANTS;
+exports.ISOTYPE_FRAME_VARIANT_IDS = ISOTYPE_FRAME_VARIANT_IDS;
+exports.IsotypeDiagonal = IsotypeDiagonal;
+exports.IsotypeFrames = IsotypeFrames;

package/dist/IsotypeFrames-BcWtyAWp.cjs

@@ -0,0 +1,83 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const button = require('./button-DVhloDtr.cjs');
+const IsotypeDiagonal = require('./IsotypeDiagonal-eNcOXRAc.cjs');
+
+const ISOTYPE_FRAME_VARIANTS = {
+  "blue-magenta": ["blue", "magenta"],
+  "blue-yellow": ["yellow", "blue"],
+  "green-red": ["green", "red"],
+  "green-blue": ["green", "blue"],
+  "magenta-yellow": ["yellow", "magenta"],
+  "magenta-purple": ["purple", "magenta"]
+};
+const ISOTYPE_FRAME_VARIANT_IDS = Object.keys(
+  ISOTYPE_FRAME_VARIANTS
+);
+
+const FRAME_SIZE = 78;
+const FRAME_THICKNESS = 27;
+const FRAME_BLEND_MODE = "multiply";
+const FRAME_OFFSET = FRAME_SIZE / 6;
+const BACK_FRAME = { x: 0, y: 0 };
+const FRONT_FRAME = { x: FRAME_OFFSET, y: FRAME_OFFSET };
+const VIEWBOX_MIN = -FRAME_THICKNESS / 2;
+const VIEWBOX_SIZE = FRAME_SIZE + FRAME_OFFSET + FRAME_THICKNESS;
+function IsotypeFrames({
+  variant = "blue-magenta",
+  className,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const [backKey, frontKey] = ISOTYPE_FRAME_VARIANTS[variant];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: ariaLabel ? "img" : void 0,
+      "aria-label": ariaLabel,
+      "aria-hidden": ariaLabel ? void 0 : true,
+      className: button.cn("isolate aspect-square", className),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          viewBox: `${VIEWBOX_MIN} ${VIEWBOX_MIN} ${VIEWBOX_SIZE} ${VIEWBOX_SIZE}`,
+          className: "h-full w-full",
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "rect",
+              {
+                x: BACK_FRAME.x,
+                y: BACK_FRAME.y,
+                width: FRAME_SIZE,
+                height: FRAME_SIZE,
+                fill: "none",
+                stroke: IsotypeDiagonal.ISOTYPE_COLORS[backKey],
+                strokeWidth: FRAME_THICKNESS
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "rect",
+              {
+                x: FRONT_FRAME.x,
+                y: FRONT_FRAME.y,
+                width: FRAME_SIZE,
+                height: FRAME_SIZE,
+                fill: "none",
+                stroke: IsotypeDiagonal.ISOTYPE_COLORS[frontKey],
+                strokeWidth: FRAME_THICKNESS,
+                style: { mixBlendMode: FRAME_BLEND_MODE }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+exports.ISOTYPE_FRAME_VARIANTS = ISOTYPE_FRAME_VARIANTS;
+exports.ISOTYPE_FRAME_VARIANT_IDS = ISOTYPE_FRAME_VARIANT_IDS;
+exports.IsotypeFrames = IsotypeFrames;

package/dist/IsotypeFrames-BnvSJKiH.cjs

@@ -0,0 +1,73 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const button = require('./button-Kd9Fj53S.cjs');
+const Isotype = require('./Isotype-ChKwN7e-.cjs');
+
+const ISOTYPE_FRAME_VARIANTS = {
+  "blue-magenta": ["blue", "magenta"],
+  "blue-yellow": ["yellow", "blue"],
+  "green-red": ["green", "red"],
+  "green-blue": ["green", "blue"],
+  "magenta-yellow": ["yellow", "magenta"],
+  "magenta-purple": ["purple", "magenta"]
+};
+const ISOTYPE_FRAME_VARIANT_IDS = Object.keys(
+  ISOTYPE_FRAME_VARIANTS
+);
+
+const FRAME_SIZE = 78;
+const FRAME_THICKNESS = 27;
+const FRAME_OPACITY = 0.85;
+const BACK_FRAME = { x: 22, y: 0 };
+const FRONT_FRAME = { x: 0, y: 22 };
+function IsotypeFrames({
+  variant = "blue-magenta",
+  className,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const [backKey, frontKey] = ISOTYPE_FRAME_VARIANTS[variant];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: ariaLabel ? "img" : void 0,
+      "aria-label": ariaLabel,
+      "aria-hidden": ariaLabel ? void 0 : true,
+      className: button.cn("aspect-square", className),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 100 100", className: "h-full w-full", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            x: BACK_FRAME.x,
+            y: BACK_FRAME.y,
+            width: FRAME_SIZE,
+            height: FRAME_SIZE,
+            fill: "none",
+            stroke: Isotype.ISOTYPE_COLORS[backKey],
+            strokeWidth: FRAME_THICKNESS,
+            opacity: FRAME_OPACITY
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            x: FRONT_FRAME.x,
+            y: FRONT_FRAME.y,
+            width: FRAME_SIZE,
+            height: FRAME_SIZE,
+            fill: "none",
+            stroke: Isotype.ISOTYPE_COLORS[frontKey],
+            strokeWidth: FRAME_THICKNESS,
+            opacity: FRAME_OPACITY
+          }
+        )
+      ] })
+    }
+  );
+}
+
+exports.ISOTYPE_FRAME_VARIANTS = ISOTYPE_FRAME_VARIANTS;
+exports.ISOTYPE_FRAME_VARIANT_IDS = ISOTYPE_FRAME_VARIANT_IDS;
+exports.IsotypeFrames = IsotypeFrames;