@bridger-kr/react 0.1.0

package/dist/components/product/BrandLogo.cjs

@@ -0,0 +1,159 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/product/BrandLogo.tsx
+var BRAND_LOGO_LANGUAGE = {
+  Korean: "ko",
+  English: "en"
+};
+var BRAND_LOGO_SIZE = {
+  sm: 20,
+  md: 28,
+  lg: 56,
+  xl: 76
+};
+var BRAND_WORDMARK = "Bridger";
+var BRAND_LOGO_LABEL = {
+  [BRAND_LOGO_LANGUAGE.Korean]: "\uBE0C\uB9BF\uC800",
+  [BRAND_LOGO_LANGUAGE.English]: BRAND_WORDMARK
+};
+function playMark(setArmed) {
+  const scheduleFrame = typeof requestAnimationFrame === "function" ? requestAnimationFrame : (callback) => setTimeout(callback, 0);
+  setArmed(false);
+  scheduleFrame(
+    () => scheduleFrame(() => setArmed(true))
+  );
+}
+var BrandLogo = react.forwardRef(function BrandLogo2({
+  size = "md",
+  autoplay = false,
+  loop = false,
+  lang = BRAND_LOGO_LANGUAGE.Korean,
+  style
+}, ref) {
+  const fontSize = typeof size === "number" ? size : BRAND_LOGO_SIZE[size] ?? BRAND_LOGO_SIZE.md;
+  const [armed, setArmed] = react.useState(false);
+  react.useImperativeHandle(
+    ref,
+    () => ({
+      play() {
+        playMark(setArmed);
+      }
+    }),
+    []
+  );
+  react.useEffect(() => {
+    if (!autoplay) return;
+    const timeout = setTimeout(() => playMark(setArmed), 200);
+    return () => clearTimeout(timeout);
+  }, [autoplay]);
+  react.useEffect(() => {
+    if (!loop) return;
+    let alive = true;
+    const interval = setInterval(() => {
+      if (!alive) return;
+      playMark((value) => {
+        if (alive) setArmed(value);
+      });
+    }, 7e3);
+    return () => {
+      alive = false;
+      clearInterval(interval);
+    };
+  }, [loop]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      "aria-label": BRAND_LOGO_LABEL[lang],
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "0.38em",
+        fontFamily: "var(--dt-font-sans)",
+        fontWeight: 760,
+        fontSize,
+        letterSpacing: 0,
+        lineHeight: 1,
+        color: "var(--dt-ink-strong)",
+        userSelect: "none",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            width: "2.306em",
+            height: "1.24em",
+            viewBox: "0 0 44 24",
+            "aria-hidden": "true",
+            focusable: "false",
+            style: { flex: "0 0 auto", overflow: "visible" },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  d: "M4 8H18C24 8 25 4 31 4H40",
+                  fill: "none",
+                  stroke: "color-mix(in srgb, var(--dt-ink-strong) 24%, transparent)",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "3"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  d: "M4 16H18C24 16 25 20 31 20H40",
+                  fill: "none",
+                  stroke: "color-mix(in srgb, var(--dt-ink-strong) 24%, transparent)",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "3"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  className: "dt-brand-logo-line",
+                  d: "M4 8H18C24 8 25 4 31 4H40",
+                  fill: "none",
+                  stroke: "var(--dt-accent)",
+                  strokeDasharray: "42",
+                  strokeDashoffset: armed ? 0 : 0,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "3.2",
+                  style: armed ? { animation: "dt-brand-logo-line-draw 420ms cubic-bezier(.2, .7, .2, 1) both" } : void 0
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  className: "dt-brand-logo-line",
+                  d: "M4 16H18C24 16 25 20 31 20H40",
+                  fill: "none",
+                  stroke: "var(--dt-accent)",
+                  strokeDasharray: "42",
+                  strokeDashoffset: armed ? 0 : 0,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "3.2",
+                  style: armed ? { animation: "dt-brand-logo-line-draw 420ms cubic-bezier(.2, .7, .2, 1) both" } : void 0
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: BRAND_WORDMARK }),
+        /* @__PURE__ */ jsxRuntime.jsx("style", { children: "@keyframes dt-brand-logo-line-draw{from{opacity:.45;stroke-dashoffset:42}to{opacity:1;stroke-dashoffset:0}}@media (prefers-reduced-motion: reduce){.dt-brand-logo-line{animation:none!important}}" })
+      ]
+    }
+  );
+});
+
+exports.BRAND_LOGO_LANGUAGE = BRAND_LOGO_LANGUAGE;
+exports.BrandLogo = BrandLogo;
+//# sourceMappingURL=BrandLogo.cjs.map
+//# sourceMappingURL=BrandLogo.cjs.map

package/dist/components/product/BrandLogo.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/product/BrandLogo.tsx"],"names":["forwardRef","BrandLogo","useState","useImperativeHandle","useEffect","jsxs","jsx"],"mappings":"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","file":"BrandLogo.cjs","sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useState,\n  type CSSProperties,\n  type Dispatch,\n  type SetStateAction,\n} from 'react';\n\nexport const BRAND_LOGO_LANGUAGE = {\n  Korean: 'ko',\n  English: 'en',\n} as const;\n\nconst BRAND_LOGO_SIZE = {\n  sm: 20,\n  md: 28,\n  lg: 56,\n  xl: 76,\n} as const;\n\nconst BRAND_WORDMARK = 'Bridger';\n\nconst BRAND_LOGO_LABEL: Record<BrandLogoLanguage, string> = {\n  [BRAND_LOGO_LANGUAGE.Korean]: '브릿저',\n  [BRAND_LOGO_LANGUAGE.English]: BRAND_WORDMARK,\n};\n\nexport type BrandLogoLanguage = (typeof BRAND_LOGO_LANGUAGE)[keyof typeof BRAND_LOGO_LANGUAGE];\nexport type BrandLogoSize = keyof typeof BRAND_LOGO_SIZE;\n\nexport interface BrandLogoHandle {\n  readonly play: () => void;\n}\n\nexport interface BrandLogoProps {\n  size?: BrandLogoSize | number;\n  autoplay?: boolean;\n  loop?: boolean;\n  lang?: BrandLogoLanguage;\n  style?: CSSProperties;\n}\n\nfunction playMark(setArmed: Dispatch<SetStateAction<boolean>>) {\n  const scheduleFrame = typeof requestAnimationFrame === 'function'\n    ? requestAnimationFrame\n    : (callback: FrameRequestCallback) => setTimeout(callback, 0);\n  setArmed(false);\n  scheduleFrame(() =>\n    scheduleFrame(() => setArmed(true)),\n  );\n}\n\nexport const BrandLogo = forwardRef<BrandLogoHandle, BrandLogoProps>(function BrandLogo(\n  {\n    size = 'md',\n    autoplay = false,\n    loop = false,\n    lang = BRAND_LOGO_LANGUAGE.Korean,\n    style,\n  },\n  ref,\n) {\n  const fontSize = typeof size === 'number' ? size : (BRAND_LOGO_SIZE[size] ?? BRAND_LOGO_SIZE.md);\n  const [armed, setArmed] = useState(false);\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      play() {\n        playMark(setArmed);\n      },\n    }),\n    [],\n  );\n\n  useEffect(() => {\n    if (!autoplay) return;\n    const timeout = setTimeout(() => playMark(setArmed), 200);\n    return () => clearTimeout(timeout);\n  }, [autoplay]);\n\n  useEffect(() => {\n    if (!loop) return;\n    let alive = true;\n    const interval = setInterval(() => {\n      if (!alive) return;\n      playMark((value) => {\n        if (alive) setArmed(value);\n      });\n    }, 7000);\n\n    return () => {\n      alive = false;\n      clearInterval(interval);\n    };\n  }, [loop]);\n\n  return (\n    <span\n      aria-label={BRAND_LOGO_LABEL[lang]}\n      style={{\n        display: 'inline-flex',\n        alignItems: 'center',\n        gap: '0.38em',\n        fontFamily: 'var(--dt-font-sans)',\n        fontWeight: 760,\n        fontSize,\n        letterSpacing: 0,\n        lineHeight: 1,\n        color: 'var(--dt-ink-strong)',\n        userSelect: 'none',\n        ...style,\n      }}\n    >\n      <svg\n        width=\"2.306em\"\n        height=\"1.24em\"\n        viewBox=\"0 0 44 24\"\n        aria-hidden=\"true\"\n        focusable=\"false\"\n        style={{ flex: '0 0 auto', overflow: 'visible' }}\n      >\n        <path\n          d=\"M4 8H18C24 8 25 4 31 4H40\"\n          fill=\"none\"\n          stroke=\"color-mix(in srgb, var(--dt-ink-strong) 24%, transparent)\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"3\"\n        />\n        <path\n          d=\"M4 16H18C24 16 25 20 31 20H40\"\n          fill=\"none\"\n          stroke=\"color-mix(in srgb, var(--dt-ink-strong) 24%, transparent)\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"3\"\n        />\n        <path\n          className=\"dt-brand-logo-line\"\n          d=\"M4 8H18C24 8 25 4 31 4H40\"\n          fill=\"none\"\n          stroke=\"var(--dt-accent)\"\n          strokeDasharray=\"42\"\n          strokeDashoffset={armed ? 0 : 0}\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"3.2\"\n          style={armed ? { animation: 'dt-brand-logo-line-draw 420ms cubic-bezier(.2, .7, .2, 1) both' } : undefined}\n        />\n        <path\n          className=\"dt-brand-logo-line\"\n          d=\"M4 16H18C24 16 25 20 31 20H40\"\n          fill=\"none\"\n          stroke=\"var(--dt-accent)\"\n          strokeDasharray=\"42\"\n          strokeDashoffset={armed ? 0 : 0}\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"3.2\"\n          style={armed ? { animation: 'dt-brand-logo-line-draw 420ms cubic-bezier(.2, .7, .2, 1) both' } : undefined}\n        />\n      </svg>\n      <span>{BRAND_WORDMARK}</span>\n      <style>\n        {'@keyframes dt-brand-logo-line-draw{from{opacity:.45;stroke-dashoffset:42}to{opacity:1;stroke-dashoffset:0}}@media (prefers-reduced-motion: reduce){.dt-brand-logo-line{animation:none!important}}'}\n      </style>\n    </span>\n  );\n});\n"]}

package/dist/components/product/BrandLogo.d.cts

@@ -0,0 +1,28 @@
+import * as react from 'react';
+import { CSSProperties } from 'react';
+
+declare const BRAND_LOGO_LANGUAGE: {
+    readonly Korean: "ko";
+    readonly English: "en";
+};
+declare const BRAND_LOGO_SIZE: {
+    readonly sm: 20;
+    readonly md: 28;
+    readonly lg: 56;
+    readonly xl: 76;
+};
+type BrandLogoLanguage = (typeof BRAND_LOGO_LANGUAGE)[keyof typeof BRAND_LOGO_LANGUAGE];
+type BrandLogoSize = keyof typeof BRAND_LOGO_SIZE;
+interface BrandLogoHandle {
+    readonly play: () => void;
+}
+interface BrandLogoProps {
+    size?: BrandLogoSize | number;
+    autoplay?: boolean;
+    loop?: boolean;
+    lang?: BrandLogoLanguage;
+    style?: CSSProperties;
+}
+declare const BrandLogo: react.ForwardRefExoticComponent<BrandLogoProps & react.RefAttributes<BrandLogoHandle>>;
+
+export { BRAND_LOGO_LANGUAGE, BrandLogo, type BrandLogoHandle, type BrandLogoLanguage, type BrandLogoProps, type BrandLogoSize };

package/dist/components/product/BrandLogo.d.ts

@@ -0,0 +1,28 @@
+import * as react from 'react';
+import { CSSProperties } from 'react';
+
+declare const BRAND_LOGO_LANGUAGE: {
+    readonly Korean: "ko";
+    readonly English: "en";
+};
+declare const BRAND_LOGO_SIZE: {
+    readonly sm: 20;
+    readonly md: 28;
+    readonly lg: 56;
+    readonly xl: 76;
+};
+type BrandLogoLanguage = (typeof BRAND_LOGO_LANGUAGE)[keyof typeof BRAND_LOGO_LANGUAGE];
+type BrandLogoSize = keyof typeof BRAND_LOGO_SIZE;
+interface BrandLogoHandle {
+    readonly play: () => void;
+}
+interface BrandLogoProps {
+    size?: BrandLogoSize | number;
+    autoplay?: boolean;
+    loop?: boolean;
+    lang?: BrandLogoLanguage;
+    style?: CSSProperties;
+}
+declare const BrandLogo: react.ForwardRefExoticComponent<BrandLogoProps & react.RefAttributes<BrandLogoHandle>>;
+
+export { BRAND_LOGO_LANGUAGE, BrandLogo, type BrandLogoHandle, type BrandLogoLanguage, type BrandLogoProps, type BrandLogoSize };

package/dist/components/product/BrandLogo.mjs

@@ -0,0 +1,156 @@
+import { forwardRef, useState, useImperativeHandle, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/product/BrandLogo.tsx
+var BRAND_LOGO_LANGUAGE = {
+  Korean: "ko",
+  English: "en"
+};
+var BRAND_LOGO_SIZE = {
+  sm: 20,
+  md: 28,
+  lg: 56,
+  xl: 76
+};
+var BRAND_WORDMARK = "Bridger";
+var BRAND_LOGO_LABEL = {
+  [BRAND_LOGO_LANGUAGE.Korean]: "\uBE0C\uB9BF\uC800",
+  [BRAND_LOGO_LANGUAGE.English]: BRAND_WORDMARK
+};
+function playMark(setArmed) {
+  const scheduleFrame = typeof requestAnimationFrame === "function" ? requestAnimationFrame : (callback) => setTimeout(callback, 0);
+  setArmed(false);
+  scheduleFrame(
+    () => scheduleFrame(() => setArmed(true))
+  );
+}
+var BrandLogo = forwardRef(function BrandLogo2({
+  size = "md",
+  autoplay = false,
+  loop = false,
+  lang = BRAND_LOGO_LANGUAGE.Korean,
+  style
+}, ref) {
+  const fontSize = typeof size === "number" ? size : BRAND_LOGO_SIZE[size] ?? BRAND_LOGO_SIZE.md;
+  const [armed, setArmed] = useState(false);
+  useImperativeHandle(
+    ref,
+    () => ({
+      play() {
+        playMark(setArmed);
+      }
+    }),
+    []
+  );
+  useEffect(() => {
+    if (!autoplay) return;
+    const timeout = setTimeout(() => playMark(setArmed), 200);
+    return () => clearTimeout(timeout);
+  }, [autoplay]);
+  useEffect(() => {
+    if (!loop) return;
+    let alive = true;
+    const interval = setInterval(() => {
+      if (!alive) return;
+      playMark((value) => {
+        if (alive) setArmed(value);
+      });
+    }, 7e3);
+    return () => {
+      alive = false;
+      clearInterval(interval);
+    };
+  }, [loop]);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "aria-label": BRAND_LOGO_LABEL[lang],
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "0.38em",
+        fontFamily: "var(--dt-font-sans)",
+        fontWeight: 760,
+        fontSize,
+        letterSpacing: 0,
+        lineHeight: 1,
+        color: "var(--dt-ink-strong)",
+        userSelect: "none",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            width: "2.306em",
+            height: "1.24em",
+            viewBox: "0 0 44 24",
+            "aria-hidden": "true",
+            focusable: "false",
+            style: { flex: "0 0 auto", overflow: "visible" },
+            children: [
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M4 8H18C24 8 25 4 31 4H40",
+                  fill: "none",
+                  stroke: "color-mix(in srgb, var(--dt-ink-strong) 24%, transparent)",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "3"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M4 16H18C24 16 25 20 31 20H40",
+                  fill: "none",
+                  stroke: "color-mix(in srgb, var(--dt-ink-strong) 24%, transparent)",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "3"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  className: "dt-brand-logo-line",
+                  d: "M4 8H18C24 8 25 4 31 4H40",
+                  fill: "none",
+                  stroke: "var(--dt-accent)",
+                  strokeDasharray: "42",
+                  strokeDashoffset: armed ? 0 : 0,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "3.2",
+                  style: armed ? { animation: "dt-brand-logo-line-draw 420ms cubic-bezier(.2, .7, .2, 1) both" } : void 0
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  className: "dt-brand-logo-line",
+                  d: "M4 16H18C24 16 25 20 31 20H40",
+                  fill: "none",
+                  stroke: "var(--dt-accent)",
+                  strokeDasharray: "42",
+                  strokeDashoffset: armed ? 0 : 0,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "3.2",
+                  style: armed ? { animation: "dt-brand-logo-line-draw 420ms cubic-bezier(.2, .7, .2, 1) both" } : void 0
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { children: BRAND_WORDMARK }),
+        /* @__PURE__ */ jsx("style", { children: "@keyframes dt-brand-logo-line-draw{from{opacity:.45;stroke-dashoffset:42}to{opacity:1;stroke-dashoffset:0}}@media (prefers-reduced-motion: reduce){.dt-brand-logo-line{animation:none!important}}" })
+      ]
+    }
+  );
+});
+
+export { BRAND_LOGO_LANGUAGE, BrandLogo };
+//# sourceMappingURL=BrandLogo.mjs.map
+//# sourceMappingURL=BrandLogo.mjs.map

package/dist/components/product/BrandLogo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/product/BrandLogo.tsx"],"names":["BrandLogo"],"mappings":"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","file":"BrandLogo.mjs","sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useState,\n  type CSSProperties,\n  type Dispatch,\n  type SetStateAction,\n} from 'react';\n\nexport const BRAND_LOGO_LANGUAGE = {\n  Korean: 'ko',\n  English: 'en',\n} as const;\n\nconst BRAND_LOGO_SIZE = {\n  sm: 20,\n  md: 28,\n  lg: 56,\n  xl: 76,\n} as const;\n\nconst BRAND_WORDMARK = 'Bridger';\n\nconst BRAND_LOGO_LABEL: Record<BrandLogoLanguage, string> = {\n  [BRAND_LOGO_LANGUAGE.Korean]: '브릿저',\n  [BRAND_LOGO_LANGUAGE.English]: BRAND_WORDMARK,\n};\n\nexport type BrandLogoLanguage = (typeof BRAND_LOGO_LANGUAGE)[keyof typeof BRAND_LOGO_LANGUAGE];\nexport type BrandLogoSize = keyof typeof BRAND_LOGO_SIZE;\n\nexport interface BrandLogoHandle {\n  readonly play: () => void;\n}\n\nexport interface BrandLogoProps {\n  size?: BrandLogoSize | number;\n  autoplay?: boolean;\n  loop?: boolean;\n  lang?: BrandLogoLanguage;\n  style?: CSSProperties;\n}\n\nfunction playMark(setArmed: Dispatch<SetStateAction<boolean>>) {\n  const scheduleFrame = typeof requestAnimationFrame === 'function'\n    ? requestAnimationFrame\n    : (callback: FrameRequestCallback) => setTimeout(callback, 0);\n  setArmed(false);\n  scheduleFrame(() =>\n    scheduleFrame(() => setArmed(true)),\n  );\n}\n\nexport const BrandLogo = forwardRef<BrandLogoHandle, BrandLogoProps>(function BrandLogo(\n  {\n    size = 'md',\n    autoplay = false,\n    loop = false,\n    lang = BRAND_LOGO_LANGUAGE.Korean,\n    style,\n  },\n  ref,\n) {\n  const fontSize = typeof size === 'number' ? size : (BRAND_LOGO_SIZE[size] ?? BRAND_LOGO_SIZE.md);\n  const [armed, setArmed] = useState(false);\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      play() {\n        playMark(setArmed);\n      },\n    }),\n    [],\n  );\n\n  useEffect(() => {\n    if (!autoplay) return;\n    const timeout = setTimeout(() => playMark(setArmed), 200);\n    return () => clearTimeout(timeout);\n  }, [autoplay]);\n\n  useEffect(() => {\n    if (!loop) return;\n    let alive = true;\n    const interval = setInterval(() => {\n      if (!alive) return;\n      playMark((value) => {\n        if (alive) setArmed(value);\n      });\n    }, 7000);\n\n    return () => {\n      alive = false;\n      clearInterval(interval);\n    };\n  }, [loop]);\n\n  return (\n    <span\n      aria-label={BRAND_LOGO_LABEL[lang]}\n      style={{\n        display: 'inline-flex',\n        alignItems: 'center',\n        gap: '0.38em',\n        fontFamily: 'var(--dt-font-sans)',\n        fontWeight: 760,\n        fontSize,\n        letterSpacing: 0,\n        lineHeight: 1,\n        color: 'var(--dt-ink-strong)',\n        userSelect: 'none',\n        ...style,\n      }}\n    >\n      <svg\n        width=\"2.306em\"\n        height=\"1.24em\"\n        viewBox=\"0 0 44 24\"\n        aria-hidden=\"true\"\n        focusable=\"false\"\n        style={{ flex: '0 0 auto', overflow: 'visible' }}\n      >\n        <path\n          d=\"M4 8H18C24 8 25 4 31 4H40\"\n          fill=\"none\"\n          stroke=\"color-mix(in srgb, var(--dt-ink-strong) 24%, transparent)\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"3\"\n        />\n        <path\n          d=\"M4 16H18C24 16 25 20 31 20H40\"\n          fill=\"none\"\n          stroke=\"color-mix(in srgb, var(--dt-ink-strong) 24%, transparent)\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"3\"\n        />\n        <path\n          className=\"dt-brand-logo-line\"\n          d=\"M4 8H18C24 8 25 4 31 4H40\"\n          fill=\"none\"\n          stroke=\"var(--dt-accent)\"\n          strokeDasharray=\"42\"\n          strokeDashoffset={armed ? 0 : 0}\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"3.2\"\n          style={armed ? { animation: 'dt-brand-logo-line-draw 420ms cubic-bezier(.2, .7, .2, 1) both' } : undefined}\n        />\n        <path\n          className=\"dt-brand-logo-line\"\n          d=\"M4 16H18C24 16 25 20 31 20H40\"\n          fill=\"none\"\n          stroke=\"var(--dt-accent)\"\n          strokeDasharray=\"42\"\n          strokeDashoffset={armed ? 0 : 0}\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"3.2\"\n          style={armed ? { animation: 'dt-brand-logo-line-draw 420ms cubic-bezier(.2, .7, .2, 1) both' } : undefined}\n        />\n      </svg>\n      <span>{BRAND_WORDMARK}</span>\n      <style>\n        {'@keyframes dt-brand-logo-line-draw{from{opacity:.45;stroke-dashoffset:42}to{opacity:1;stroke-dashoffset:0}}@media (prefers-reduced-motion: reduce){.dt-brand-logo-line{animation:none!important}}'}\n      </style>\n    </span>\n  );\n});\n"]}

package/dist/components/product/ProductActionPill.cjs

@@ -0,0 +1,57 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/lib/cx.ts
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+var PRODUCT_ACTION_PILL_VARIANT = {
+  Default: "default",
+  Accent: "accent",
+  Outline: "outline"
+};
+var PRODUCT_ACTION_PILL_SIZE = {
+  Compact: "compact",
+  Figma: "figma"
+};
+var VARIANT_CLASS = {
+  [PRODUCT_ACTION_PILL_VARIANT.Default]: "dt-product-action-pill-default",
+  [PRODUCT_ACTION_PILL_VARIANT.Accent]: "dt-product-action-pill-accent",
+  [PRODUCT_ACTION_PILL_VARIANT.Outline]: "dt-product-action-pill-outline"
+};
+var SIZE_CLASS = {
+  [PRODUCT_ACTION_PILL_SIZE.Compact]: "dt-product-action-pill-compact",
+  [PRODUCT_ACTION_PILL_SIZE.Figma]: "dt-product-action-pill-figma"
+};
+function productActionPillClassName({
+  variant = PRODUCT_ACTION_PILL_VARIANT.Default,
+  size = PRODUCT_ACTION_PILL_SIZE.Compact,
+  className
+} = {}) {
+  return cx("dt-product-action-pill", VARIANT_CLASS[variant], SIZE_CLASS[size], className);
+}
+function ProductActionPill({
+  as,
+  variant = PRODUCT_ACTION_PILL_VARIANT.Default,
+  size = PRODUCT_ACTION_PILL_SIZE.Compact,
+  leadingIcon,
+  trailingIcon,
+  children,
+  className,
+  ...rest
+}) {
+  const Component = as ?? "a";
+  return /* @__PURE__ */ jsxRuntime.jsxs(Component, { className: productActionPillClassName({ variant, size, className }), ...rest, children: [
+    leadingIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dt-product-action-pill-icon", children: leadingIcon }) : null,
+    children ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dt-product-action-pill-label", children }) : null,
+    trailingIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dt-product-action-pill-icon", children: trailingIcon }) : null
+  ] });
+}
+
+exports.PRODUCT_ACTION_PILL_SIZE = PRODUCT_ACTION_PILL_SIZE;
+exports.PRODUCT_ACTION_PILL_VARIANT = PRODUCT_ACTION_PILL_VARIANT;
+exports.ProductActionPill = ProductActionPill;
+exports.productActionPillClassName = productActionPillClassName;
+//# sourceMappingURL=ProductActionPill.cjs.map
+//# sourceMappingURL=ProductActionPill.cjs.map

package/dist/components/product/ProductActionPill.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cx.ts","../../../src/components/product/ProductActionPill.tsx"],"names":["jsxs","jsx"],"mappings":";;;;;AAAO,SAAS,MAAM,OAAA,EAA2D;AAC/E,EAAA,OAAO,OAAA,CAAQ,MAAA,CAAO,OAAO,CAAA,CAAE,KAAK,GAAG,CAAA;AACzC;ACCO,IAAM,2BAAA,GAA8B;AAAA,EACzC,OAAA,EAAS,SAAA;AAAA,EACT,MAAA,EAAQ,QAAA;AAAA,EACR,OAAA,EAAS;AACX;AAEO,IAAM,wBAAA,GAA2B;AAAA,EACtC,OAAA,EAAS,SAAA;AAAA,EACT,KAAA,EAAO;AACT;AAKA,IAAM,aAAA,GAA0D;AAAA,EAC9D,CAAC,2BAAA,CAA4B,OAAO,GAAG,gCAAA;AAAA,EACvC,CAAC,2BAAA,CAA4B,MAAM,GAAG,+BAAA;AAAA,EACtC,CAAC,2BAAA,CAA4B,OAAO,GAAG;AACzC,CAAA;AAEA,IAAM,UAAA,GAAoD;AAAA,EACxD,CAAC,wBAAA,CAAyB,OAAO,GAAG,gCAAA;AAAA,EACpC,CAAC,wBAAA,CAAyB,KAAK,GAAG;AACpC,CAAA;AAYO,SAAS,0BAAA,CAA2B;AAAA,EACzC,UAAU,2BAAA,CAA4B,OAAA;AAAA,EACtC,OAAO,wBAAA,CAAyB,OAAA;AAAA,EAChC;AACF,CAAA,GAII,EAAC,EAAG;AACN,EAAA,OAAO,EAAA,CAAG,0BAA0B,aAAA,CAAc,OAAO,GAAG,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AACzF;AAEO,SAAS,iBAAA,CAA+C;AAAA,EAC7D,EAAA;AAAA,EACA,UAAU,2BAAA,CAA4B,OAAA;AAAA,EACtC,OAAO,wBAAA,CAAyB,OAAA;AAAA,EAChC,WAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA8B;AAC5B,EAAA,MAAM,YAAY,EAAA,IAAM,GAAA;AAExB,EAAA,uBACEA,eAAA,CAAC,SAAA,EAAA,EAAU,SAAA,EAAW,0BAAA,CAA2B,EAAE,OAAA,EAAS,IAAA,EAAM,SAAA,EAAW,CAAA,EAAI,GAAG,IAAA,EACjF,QAAA,EAAA;AAAA,IAAA,WAAA,mBAAcC,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,6BAAA,EAA+B,uBAAY,CAAA,GAAU,IAAA;AAAA,IACnF,2BAAWA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,8BAAA,EAAgC,UAAS,CAAA,GAAU,IAAA;AAAA,IAC9E,+BAAeA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,6BAAA,EAA+B,wBAAa,CAAA,GAAU;AAAA,GAAA,EACxF,CAAA;AAEJ","file":"ProductActionPill.cjs","sourcesContent":["export function cx(...classes: Array<string | false | null | undefined>): string {\n  return classes.filter(Boolean).join(' ');\n}\n","import type { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\nimport { cx } from '../../lib/cx';\n\nexport const PRODUCT_ACTION_PILL_VARIANT = {\n  Default: 'default',\n  Accent: 'accent',\n  Outline: 'outline',\n} as const;\n\nexport const PRODUCT_ACTION_PILL_SIZE = {\n  Compact: 'compact',\n  Figma: 'figma',\n} as const;\n\nexport type ProductActionPillVariant = (typeof PRODUCT_ACTION_PILL_VARIANT)[keyof typeof PRODUCT_ACTION_PILL_VARIANT];\nexport type ProductActionPillSize = (typeof PRODUCT_ACTION_PILL_SIZE)[keyof typeof PRODUCT_ACTION_PILL_SIZE];\n\nconst VARIANT_CLASS: Record<ProductActionPillVariant, string> = {\n  [PRODUCT_ACTION_PILL_VARIANT.Default]: 'dt-product-action-pill-default',\n  [PRODUCT_ACTION_PILL_VARIANT.Accent]: 'dt-product-action-pill-accent',\n  [PRODUCT_ACTION_PILL_VARIANT.Outline]: 'dt-product-action-pill-outline',\n};\n\nconst SIZE_CLASS: Record<ProductActionPillSize, string> = {\n  [PRODUCT_ACTION_PILL_SIZE.Compact]: 'dt-product-action-pill-compact',\n  [PRODUCT_ACTION_PILL_SIZE.Figma]: 'dt-product-action-pill-figma',\n};\n\nexport type ProductActionPillProps<T extends ElementType = 'a'> = {\n  as?: T;\n  variant?: ProductActionPillVariant;\n  size?: ProductActionPillSize;\n  leadingIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n  children?: ReactNode;\n  className?: string;\n} & Omit<ComponentPropsWithoutRef<T>, 'as' | 'children' | 'className'>;\n\nexport function productActionPillClassName({\n  variant = PRODUCT_ACTION_PILL_VARIANT.Default,\n  size = PRODUCT_ACTION_PILL_SIZE.Compact,\n  className,\n}: {\n  variant?: ProductActionPillVariant;\n  size?: ProductActionPillSize;\n  className?: string;\n} = {}) {\n  return cx('dt-product-action-pill', VARIANT_CLASS[variant], SIZE_CLASS[size], className);\n}\n\nexport function ProductActionPill<T extends ElementType = 'a'>({\n  as,\n  variant = PRODUCT_ACTION_PILL_VARIANT.Default,\n  size = PRODUCT_ACTION_PILL_SIZE.Compact,\n  leadingIcon,\n  trailingIcon,\n  children,\n  className,\n  ...rest\n}: ProductActionPillProps<T>) {\n  const Component = as ?? 'a';\n\n  return (\n    <Component className={productActionPillClassName({ variant, size, className })} {...rest}>\n      {leadingIcon ? <span className=\"dt-product-action-pill-icon\">{leadingIcon}</span> : null}\n      {children ? <span className=\"dt-product-action-pill-label\">{children}</span> : null}\n      {trailingIcon ? <span className=\"dt-product-action-pill-icon\">{trailingIcon}</span> : null}\n    </Component>\n  );\n}\n"]}

package/dist/components/product/ProductActionPill.d.cts

@@ -0,0 +1,31 @@
+import * as react from 'react';
+import { ElementType, ReactNode, ComponentPropsWithoutRef } from 'react';
+
+declare const PRODUCT_ACTION_PILL_VARIANT: {
+    readonly Default: "default";
+    readonly Accent: "accent";
+    readonly Outline: "outline";
+};
+declare const PRODUCT_ACTION_PILL_SIZE: {
+    readonly Compact: "compact";
+    readonly Figma: "figma";
+};
+type ProductActionPillVariant = (typeof PRODUCT_ACTION_PILL_VARIANT)[keyof typeof PRODUCT_ACTION_PILL_VARIANT];
+type ProductActionPillSize = (typeof PRODUCT_ACTION_PILL_SIZE)[keyof typeof PRODUCT_ACTION_PILL_SIZE];
+type ProductActionPillProps<T extends ElementType = 'a'> = {
+    as?: T;
+    variant?: ProductActionPillVariant;
+    size?: ProductActionPillSize;
+    leadingIcon?: ReactNode;
+    trailingIcon?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+} & Omit<ComponentPropsWithoutRef<T>, 'as' | 'children' | 'className'>;
+declare function productActionPillClassName({ variant, size, className, }?: {
+    variant?: ProductActionPillVariant;
+    size?: ProductActionPillSize;
+    className?: string;
+}): string;
+declare function ProductActionPill<T extends ElementType = 'a'>({ as, variant, size, leadingIcon, trailingIcon, children, className, ...rest }: ProductActionPillProps<T>): react.JSX.Element;
+
+export { PRODUCT_ACTION_PILL_SIZE, PRODUCT_ACTION_PILL_VARIANT, ProductActionPill, type ProductActionPillProps, type ProductActionPillSize, type ProductActionPillVariant, productActionPillClassName };

package/dist/components/product/ProductActionPill.d.ts

@@ -0,0 +1,31 @@
+import * as react from 'react';
+import { ElementType, ReactNode, ComponentPropsWithoutRef } from 'react';
+
+declare const PRODUCT_ACTION_PILL_VARIANT: {
+    readonly Default: "default";
+    readonly Accent: "accent";
+    readonly Outline: "outline";
+};
+declare const PRODUCT_ACTION_PILL_SIZE: {
+    readonly Compact: "compact";
+    readonly Figma: "figma";
+};
+type ProductActionPillVariant = (typeof PRODUCT_ACTION_PILL_VARIANT)[keyof typeof PRODUCT_ACTION_PILL_VARIANT];
+type ProductActionPillSize = (typeof PRODUCT_ACTION_PILL_SIZE)[keyof typeof PRODUCT_ACTION_PILL_SIZE];
+type ProductActionPillProps<T extends ElementType = 'a'> = {
+    as?: T;
+    variant?: ProductActionPillVariant;
+    size?: ProductActionPillSize;
+    leadingIcon?: ReactNode;
+    trailingIcon?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+} & Omit<ComponentPropsWithoutRef<T>, 'as' | 'children' | 'className'>;
+declare function productActionPillClassName({ variant, size, className, }?: {
+    variant?: ProductActionPillVariant;
+    size?: ProductActionPillSize;
+    className?: string;
+}): string;
+declare function ProductActionPill<T extends ElementType = 'a'>({ as, variant, size, leadingIcon, trailingIcon, children, className, ...rest }: ProductActionPillProps<T>): react.JSX.Element;
+
+export { PRODUCT_ACTION_PILL_SIZE, PRODUCT_ACTION_PILL_VARIANT, ProductActionPill, type ProductActionPillProps, type ProductActionPillSize, type ProductActionPillVariant, productActionPillClassName };

package/dist/components/product/ProductActionPill.mjs

@@ -0,0 +1,52 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/lib/cx.ts
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+var PRODUCT_ACTION_PILL_VARIANT = {
+  Default: "default",
+  Accent: "accent",
+  Outline: "outline"
+};
+var PRODUCT_ACTION_PILL_SIZE = {
+  Compact: "compact",
+  Figma: "figma"
+};
+var VARIANT_CLASS = {
+  [PRODUCT_ACTION_PILL_VARIANT.Default]: "dt-product-action-pill-default",
+  [PRODUCT_ACTION_PILL_VARIANT.Accent]: "dt-product-action-pill-accent",
+  [PRODUCT_ACTION_PILL_VARIANT.Outline]: "dt-product-action-pill-outline"
+};
+var SIZE_CLASS = {
+  [PRODUCT_ACTION_PILL_SIZE.Compact]: "dt-product-action-pill-compact",
+  [PRODUCT_ACTION_PILL_SIZE.Figma]: "dt-product-action-pill-figma"
+};
+function productActionPillClassName({
+  variant = PRODUCT_ACTION_PILL_VARIANT.Default,
+  size = PRODUCT_ACTION_PILL_SIZE.Compact,
+  className
+} = {}) {
+  return cx("dt-product-action-pill", VARIANT_CLASS[variant], SIZE_CLASS[size], className);
+}
+function ProductActionPill({
+  as,
+  variant = PRODUCT_ACTION_PILL_VARIANT.Default,
+  size = PRODUCT_ACTION_PILL_SIZE.Compact,
+  leadingIcon,
+  trailingIcon,
+  children,
+  className,
+  ...rest
+}) {
+  const Component = as ?? "a";
+  return /* @__PURE__ */ jsxs(Component, { className: productActionPillClassName({ variant, size, className }), ...rest, children: [
+    leadingIcon ? /* @__PURE__ */ jsx("span", { className: "dt-product-action-pill-icon", children: leadingIcon }) : null,
+    children ? /* @__PURE__ */ jsx("span", { className: "dt-product-action-pill-label", children }) : null,
+    trailingIcon ? /* @__PURE__ */ jsx("span", { className: "dt-product-action-pill-icon", children: trailingIcon }) : null
+  ] });
+}
+
+export { PRODUCT_ACTION_PILL_SIZE, PRODUCT_ACTION_PILL_VARIANT, ProductActionPill, productActionPillClassName };
+//# sourceMappingURL=ProductActionPill.mjs.map
+//# sourceMappingURL=ProductActionPill.mjs.map

package/dist/components/product/ProductActionPill.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cx.ts","../../../src/components/product/ProductActionPill.tsx"],"names":[],"mappings":";;;AAAO,SAAS,MAAM,OAAA,EAA2D;AAC/E,EAAA,OAAO,OAAA,CAAQ,MAAA,CAAO,OAAO,CAAA,CAAE,KAAK,GAAG,CAAA;AACzC;ACCO,IAAM,2BAAA,GAA8B;AAAA,EACzC,OAAA,EAAS,SAAA;AAAA,EACT,MAAA,EAAQ,QAAA;AAAA,EACR,OAAA,EAAS;AACX;AAEO,IAAM,wBAAA,GAA2B;AAAA,EACtC,OAAA,EAAS,SAAA;AAAA,EACT,KAAA,EAAO;AACT;AAKA,IAAM,aAAA,GAA0D;AAAA,EAC9D,CAAC,2BAAA,CAA4B,OAAO,GAAG,gCAAA;AAAA,EACvC,CAAC,2BAAA,CAA4B,MAAM,GAAG,+BAAA;AAAA,EACtC,CAAC,2BAAA,CAA4B,OAAO,GAAG;AACzC,CAAA;AAEA,IAAM,UAAA,GAAoD;AAAA,EACxD,CAAC,wBAAA,CAAyB,OAAO,GAAG,gCAAA;AAAA,EACpC,CAAC,wBAAA,CAAyB,KAAK,GAAG;AACpC,CAAA;AAYO,SAAS,0BAAA,CAA2B;AAAA,EACzC,UAAU,2BAAA,CAA4B,OAAA;AAAA,EACtC,OAAO,wBAAA,CAAyB,OAAA;AAAA,EAChC;AACF,CAAA,GAII,EAAC,EAAG;AACN,EAAA,OAAO,EAAA,CAAG,0BAA0B,aAAA,CAAc,OAAO,GAAG,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AACzF;AAEO,SAAS,iBAAA,CAA+C;AAAA,EAC7D,EAAA;AAAA,EACA,UAAU,2BAAA,CAA4B,OAAA;AAAA,EACtC,OAAO,wBAAA,CAAyB,OAAA;AAAA,EAChC,WAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA8B;AAC5B,EAAA,MAAM,YAAY,EAAA,IAAM,GAAA;AAExB,EAAA,uBACE,IAAA,CAAC,SAAA,EAAA,EAAU,SAAA,EAAW,0BAAA,CAA2B,EAAE,OAAA,EAAS,IAAA,EAAM,SAAA,EAAW,CAAA,EAAI,GAAG,IAAA,EACjF,QAAA,EAAA;AAAA,IAAA,WAAA,mBAAc,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,6BAAA,EAA+B,uBAAY,CAAA,GAAU,IAAA;AAAA,IACnF,2BAAW,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,8BAAA,EAAgC,UAAS,CAAA,GAAU,IAAA;AAAA,IAC9E,+BAAe,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,6BAAA,EAA+B,wBAAa,CAAA,GAAU;AAAA,GAAA,EACxF,CAAA;AAEJ","file":"ProductActionPill.mjs","sourcesContent":["export function cx(...classes: Array<string | false | null | undefined>): string {\n  return classes.filter(Boolean).join(' ');\n}\n","import type { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';\nimport { cx } from '../../lib/cx';\n\nexport const PRODUCT_ACTION_PILL_VARIANT = {\n  Default: 'default',\n  Accent: 'accent',\n  Outline: 'outline',\n} as const;\n\nexport const PRODUCT_ACTION_PILL_SIZE = {\n  Compact: 'compact',\n  Figma: 'figma',\n} as const;\n\nexport type ProductActionPillVariant = (typeof PRODUCT_ACTION_PILL_VARIANT)[keyof typeof PRODUCT_ACTION_PILL_VARIANT];\nexport type ProductActionPillSize = (typeof PRODUCT_ACTION_PILL_SIZE)[keyof typeof PRODUCT_ACTION_PILL_SIZE];\n\nconst VARIANT_CLASS: Record<ProductActionPillVariant, string> = {\n  [PRODUCT_ACTION_PILL_VARIANT.Default]: 'dt-product-action-pill-default',\n  [PRODUCT_ACTION_PILL_VARIANT.Accent]: 'dt-product-action-pill-accent',\n  [PRODUCT_ACTION_PILL_VARIANT.Outline]: 'dt-product-action-pill-outline',\n};\n\nconst SIZE_CLASS: Record<ProductActionPillSize, string> = {\n  [PRODUCT_ACTION_PILL_SIZE.Compact]: 'dt-product-action-pill-compact',\n  [PRODUCT_ACTION_PILL_SIZE.Figma]: 'dt-product-action-pill-figma',\n};\n\nexport type ProductActionPillProps<T extends ElementType = 'a'> = {\n  as?: T;\n  variant?: ProductActionPillVariant;\n  size?: ProductActionPillSize;\n  leadingIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n  children?: ReactNode;\n  className?: string;\n} & Omit<ComponentPropsWithoutRef<T>, 'as' | 'children' | 'className'>;\n\nexport function productActionPillClassName({\n  variant = PRODUCT_ACTION_PILL_VARIANT.Default,\n  size = PRODUCT_ACTION_PILL_SIZE.Compact,\n  className,\n}: {\n  variant?: ProductActionPillVariant;\n  size?: ProductActionPillSize;\n  className?: string;\n} = {}) {\n  return cx('dt-product-action-pill', VARIANT_CLASS[variant], SIZE_CLASS[size], className);\n}\n\nexport function ProductActionPill<T extends ElementType = 'a'>({\n  as,\n  variant = PRODUCT_ACTION_PILL_VARIANT.Default,\n  size = PRODUCT_ACTION_PILL_SIZE.Compact,\n  leadingIcon,\n  trailingIcon,\n  children,\n  className,\n  ...rest\n}: ProductActionPillProps<T>) {\n  const Component = as ?? 'a';\n\n  return (\n    <Component className={productActionPillClassName({ variant, size, className })} {...rest}>\n      {leadingIcon ? <span className=\"dt-product-action-pill-icon\">{leadingIcon}</span> : null}\n      {children ? <span className=\"dt-product-action-pill-label\">{children}</span> : null}\n      {trailingIcon ? <span className=\"dt-product-action-pill-icon\">{trailingIcon}</span> : null}\n    </Component>\n  );\n}\n"]}