@telegraph/tag 0.0.12 → 0.0.13

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @telegraph/tag
 
+## 0.0.13
+
+### Patch Changes
+
+- [`9d9d7d3`](https://github.com/knocklabs/telegraph/commit/9d9d7d36c2aa5ec887262fcef6be4c379b83d423) Thanks [@kylemcd](https://github.com/kylemcd)! - fix incorrect icons on tag actions
+
 ## 0.0.12
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),j=require("@telegraph/button"),u=require("@telegraph/icon"),R=require("@telegraph/typography"),s=require("clsx"),n=require("react"),m={Root:{1:"h-6",2:"h-8"}},i={Root:{solid:{default:"bg-gray-9",accent:"bg-accent-9",gray:"bg-gray-9",red:"bg-red-9",blue:"bg-blue-9",green:"bg-green-9",yellow:"bg-yellow-9",purple:"bg-purple-9"},soft:{default:"bg-gray-3",accent:"bg-accent-3",gray:"bg-gray-3",red:"bg-red-3",blue:"bg-blue-3",green:"bg-green-3",yellow:"bg-yellow-3",purple:"bg-purple-3"}},Icon:{solid:{default:"white",gray:"white",red:"white",accent:"white",blue:"white",green:"white",yellow:"white",purple:"white"},soft:{default:"default",gray:"gray",accent:"accent",red:"red",blue:"blue",green:"green",yellow:"yellow",purple:"purple"}},Text:{solid:{default:"white",gray:"white",accent:"white",red:"white",blue:"white",green:"white",yellow:"white",purple:"white"},soft:{default:"default",gray:"gray",accent:"accent",red:"red",blue:"blue",green:"green",yellow:"yellow",purple:"purple"}},Button:{solid:{default:"gray",gray:"gray",accent:"accent",red:"red",blue:"blue",green:"green",yellow:"yellow",purple:"purple"},soft:{default:"gray",gray:"gray",accent:"accent",red:"red",blue:"blue",green:"green",yellow:"yellow",purple:"purple"}}},d=n.createContext({size:"1",color:"default",variant:"soft"}),b=n.forwardRef(({size:t="1",color:r="default",variant:l="soft",className:e,...a},c)=>o.jsx(d.Provider,{value:{size:t,color:r,variant:l},children:o.jsx("span",{className:s.clsx("inline-flex items-center rounded-3 pl-2",m.Root[t],i.Root[l][r],e),...a,ref:c,"data-tag":!0})})),f=n.forwardRef(({as:t="span",className:r,...l},e)=>{const a=n.useContext(d);return o.jsx(R.Text,{as:t,size:a.size,color:i.Text[a.variant][a.color],className:s.clsx("rounded-tl-0 rounded-bl-0 mr-2",r),...l,ref:e})}),g=n.forwardRef(({className:t,...r},l)=>{const e=n.useContext(d);return o.jsx(j.Button,{size:e.size,color:i.Button[e.variant][e.color],variant:e.variant,icon:{icon:u.Lucide.X,alt:"close"},className:s.clsx("rounded-tl-0 rounded-bl-0",t),...r,ref:l})}),y=n.forwardRef(({className:t,...r},l)=>{const e=n.useContext(d);return o.jsx(u.Icon,{size:e.size,color:i.Icon[e.variant][e.color],className:s.clsx("rounded-tl-0 rounded-bl-0 mr-1",t),...r,ref:l})}),p=n.forwardRef(({color:t="default",size:r="1",variant:l="soft",icon:e,onRemove:a,onCopy:c,children:w,...x},h)=>o.jsxs(b,{color:t,size:r,variant:l,...x,ref:h,children:[e&&o.jsx(y,{...e}),o.jsx(f,{as:"span",children:w}),a&&o.jsx(g,{onClick:a,icon:{icon:u.Lucide.Copy,alt:"Copy Text"}}),c&&o.jsx(g,{onClick:c,icon:{icon:u.Lucide.X,alt:"Remove"}})]}));Object.assign(p,{Root:b,Button:g,Text:f,Icon:y});const C=p;exports.Tag=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),j=require("@telegraph/button"),u=require("@telegraph/icon"),R=require("@telegraph/typography"),s=require("clsx"),n=require("react"),m={Root:{1:"h-6",2:"h-8"}},i={Root:{solid:{default:"bg-gray-9",accent:"bg-accent-9",gray:"bg-gray-9",red:"bg-red-9",blue:"bg-blue-9",green:"bg-green-9",yellow:"bg-yellow-9",purple:"bg-purple-9"},soft:{default:"bg-gray-3",accent:"bg-accent-3",gray:"bg-gray-3",red:"bg-red-3",blue:"bg-blue-3",green:"bg-green-3",yellow:"bg-yellow-3",purple:"bg-purple-3"}},Icon:{solid:{default:"white",gray:"white",red:"white",accent:"white",blue:"white",green:"white",yellow:"white",purple:"white"},soft:{default:"default",gray:"gray",accent:"accent",red:"red",blue:"blue",green:"green",yellow:"yellow",purple:"purple"}},Text:{solid:{default:"white",gray:"white",accent:"white",red:"white",blue:"white",green:"white",yellow:"white",purple:"white"},soft:{default:"default",gray:"gray",accent:"accent",red:"red",blue:"blue",green:"green",yellow:"yellow",purple:"purple"}},Button:{solid:{default:"gray",gray:"gray",accent:"accent",red:"red",blue:"blue",green:"green",yellow:"yellow",purple:"purple"},soft:{default:"gray",gray:"gray",accent:"accent",red:"red",blue:"blue",green:"green",yellow:"yellow",purple:"purple"}}},d=n.createContext({size:"1",color:"default",variant:"soft"}),b=n.forwardRef(({size:t="1",color:r="default",variant:l="soft",className:e,...a},c)=>o.jsx(d.Provider,{value:{size:t,color:r,variant:l},children:o.jsx("span",{className:s.clsx("inline-flex items-center rounded-3 pl-2",m.Root[t],i.Root[l][r],e),...a,ref:c,"data-tag":!0})})),f=n.forwardRef(({as:t="span",className:r,...l},e)=>{const a=n.useContext(d);return o.jsx(R.Text,{as:t,size:a.size,color:i.Text[a.variant][a.color],className:s.clsx("rounded-tl-0 rounded-bl-0 mr-2",r),...l,ref:e})}),g=n.forwardRef(({className:t,...r},l)=>{const e=n.useContext(d);return o.jsx(j.Button,{size:e.size,color:i.Button[e.variant][e.color],variant:e.variant,icon:{icon:u.Lucide.X,alt:"close"},className:s.clsx("rounded-tl-0 rounded-bl-0",t),...r,ref:l})}),y=n.forwardRef(({className:t,...r},l)=>{const e=n.useContext(d);return o.jsx(u.Icon,{size:e.size,color:i.Icon[e.variant][e.color],className:s.clsx("rounded-tl-0 rounded-bl-0 mr-1",t),...r,ref:l})}),p=n.forwardRef(({color:t="default",size:r="1",variant:l="soft",icon:e,onRemove:a,onCopy:c,children:w,...x},h)=>o.jsxs(b,{color:t,size:r,variant:l,...x,ref:h,children:[e&&o.jsx(y,{...e}),o.jsx(f,{as:"span",children:w}),a&&o.jsx(g,{onClick:a,icon:{icon:u.Lucide.X,alt:"Remove"}}),c&&o.jsx(g,{onClick:c,icon:{icon:u.Lucide.Copy,alt:"Copy text"}})]}));Object.assign(p,{Root:b,Button:g,Text:f,Icon:y});const C=p;exports.Tag=C;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Tag/Tag.constants.ts","../../src/Tag/Tag.tsx"],"sourcesContent":["export const SIZE = {\n  Root: {\n    \"1\": \"h-6\",\n    \"2\": \"h-8\",\n  },\n} as const;\n\nexport const COLOR = {\n  Root: {\n    solid: {\n      default: \"bg-gray-9\",\n      accent: \"bg-accent-9\",\n      gray: \"bg-gray-9\",\n      red: \"bg-red-9\",\n      blue: \"bg-blue-9\",\n      green: \"bg-green-9\",\n      yellow: \"bg-yellow-9\",\n      purple: \"bg-purple-9\",\n    },\n    soft: {\n      default: \"bg-gray-3\",\n      accent: \"bg-accent-3\",\n      gray: \"bg-gray-3\",\n      red: \"bg-red-3\",\n      blue: \"bg-blue-3\",\n      green: \"bg-green-3\",\n      yellow: \"bg-yellow-3\",\n      purple: \"bg-purple-3\",\n    },\n  },\n  Icon: {\n    solid: {\n      default: \"white\",\n      gray: \"white\",\n      red: \"white\",\n      accent: \"white\",\n      blue: \"white\",\n      green: \"white\",\n      yellow: \"white\",\n      purple: \"white\",\n    },\n    soft: {\n      default: \"default\",\n      gray: \"gray\",\n      accent: \"accent\",\n      red: \"red\",\n      blue: \"blue\",\n      green: \"green\",\n      yellow: \"yellow\",\n      purple: \"purple\",\n    },\n  },\n  Text: {\n    solid: {\n      default: \"white\",\n      gray: \"white\",\n      accent: \"white\",\n      red: \"white\",\n      blue: \"white\",\n      green: \"white\",\n      yellow: \"white\",\n      purple: \"white\",\n    },\n    soft: {\n      default: \"default\",\n      gray: \"gray\",\n      accent: \"accent\",\n      red: \"red\",\n      blue: \"blue\",\n      green: \"green\",\n      yellow: \"yellow\",\n      purple: \"purple\",\n    },\n  },\n  Button: {\n    solid: {\n      default: \"gray\",\n      gray: \"gray\",\n      accent: \"accent\",\n      red: \"red\",\n      blue: \"blue\",\n      green: \"green\",\n      yellow: \"yellow\",\n      purple: \"purple\",\n    },\n    soft: {\n      default: \"gray\",\n      gray: \"gray\",\n      accent: \"accent\",\n      red: \"red\",\n      blue: \"blue\",\n      green: \"green\",\n      yellow: \"yellow\",\n      purple: \"purple\",\n    },\n  },\n} as const;\n","import { Button as TelegraphButton } from \"@telegraph/button\";\nimport type { Optional, Required } from \"@telegraph/helpers\";\nimport { Lucide, Icon as TelegraphIcon } from \"@telegraph/icon\";\nimport { Text as TelegraphText } from \"@telegraph/typography\";\nimport { clsx } from \"clsx\";\nimport React from \"react\";\n\nimport { COLOR, SIZE } from \"./Tag.constants\";\n\ntype RootBaseProps = {\n  size?: \"1\" | \"2\";\n  color?: keyof (typeof COLOR.Root)[\"soft\"];\n  variant?: keyof typeof COLOR.Root;\n};\n\ntype RootProps = React.HTMLAttributes<RootRef> & RootBaseProps;\n\ntype RootRef = HTMLSpanElement;\n\nconst TagContext = React.createContext<Required<RootBaseProps>>({\n  size: \"1\",\n  color: \"default\",\n  variant: \"soft\",\n});\n\nconst Root = React.forwardRef<RootRef, RootProps>(\n  (\n    { size = \"1\", color = \"default\", variant = \"soft\", className, ...props },\n    forwardedRef,\n  ) => {\n    return (\n      <TagContext.Provider value={{ size, color, variant }}>\n        <span\n          className={clsx(\n            \"inline-flex items-center rounded-3 pl-2\",\n            SIZE.Root[size],\n            COLOR.Root[variant][color],\n            className,\n          )}\n          {...props}\n          ref={forwardedRef}\n          data-tag\n        />\n      </TagContext.Provider>\n    );\n  },\n);\n\ntype TextProps = Optional<React.ComponentProps<typeof TelegraphText>, \"as\">;\n\ntype TextRef = React.ElementRef<typeof TelegraphText>;\n\nconst Text = React.forwardRef<TextRef, TextProps>(\n  ({ as = \"span\", className, ...props }, forwardedRef) => {\n    const context = React.useContext(TagContext);\n    return (\n      <TelegraphText\n        as={as}\n        size={context.size}\n        color={COLOR.Text[context.variant][context.color]}\n        className={clsx(\"rounded-tl-0 rounded-bl-0 mr-2\", className)}\n        {...props}\n        ref={forwardedRef}\n      />\n    );\n  },\n);\n\ntype ButtonProps = React.ComponentProps<typeof TelegraphButton.Root>;\ntype ButtonRef = React.ElementRef<typeof TelegraphButton.Root>;\n\nconst Button = React.forwardRef<ButtonRef, ButtonProps>(\n  ({ className, ...props }, forwardedRef) => {\n    const context = React.useContext(TagContext);\n    return (\n      <TelegraphButton\n        size={context.size}\n        color={COLOR.Button[context.variant][context.color]}\n        variant={context.variant}\n        icon={{ icon: Lucide.X, alt: \"close\" }}\n        className={clsx(\"rounded-tl-0 rounded-bl-0\", className)}\n        {...props}\n        ref={forwardedRef}\n      />\n    );\n  },\n);\n\ntype IconProps = React.ComponentProps<typeof TelegraphIcon>;\ntype IconRef = React.ElementRef<typeof TelegraphIcon>;\n\nconst Icon = React.forwardRef<IconRef, IconProps>(\n  ({ className, ...props }, forwardedRef) => {\n    const context = React.useContext(TagContext);\n    return (\n      <TelegraphIcon\n        size={context.size}\n        color={COLOR.Icon[context.variant][context.color]}\n        className={clsx(\"rounded-tl-0 rounded-bl-0 mr-1\", className)}\n        {...props}\n        ref={forwardedRef}\n      />\n    );\n  },\n);\n\ntype DefaultProps = React.ComponentProps<typeof Root> & {\n  icon?: React.ComponentProps<typeof TelegraphIcon>;\n  onCopy?: () => void;\n  onRemove?: () => void;\n};\ntype DefaultRef = React.ElementRef<typeof Root>;\n\nconst Default = React.forwardRef<DefaultRef, DefaultProps>(\n  (\n    {\n      color = \"default\",\n      size = \"1\",\n      variant = \"soft\",\n      icon,\n      onRemove,\n      onCopy,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <Root color={color} size={size} variant={variant} {...props} ref={ref}>\n        {icon && <Icon {...icon} />}\n        <Text as=\"span\">{children}</Text>\n        {onRemove && (\n          <Button\n            onClick={onRemove}\n            icon={{ icon: Lucide.Copy, alt: \"Copy Text\" }}\n          />\n        )}\n        {onCopy && (\n          <Button onClick={onCopy} icon={{ icon: Lucide.X, alt: \"Remove\" }} />\n        )}\n      </Root>\n    );\n  },\n);\n\nObject.assign(Default, {\n  Root,\n  Button,\n  Text,\n  Icon,\n});\n\nconst Tag = Default as typeof Default & {\n  Root: typeof Root;\n  Button: typeof Button;\n  Text: typeof Text;\n  Icon: typeof Icon;\n};\n\nexport { Tag };\n"],"names":["SIZE","COLOR","TagContext","React","Root","size","color","variant","className","props","forwardedRef","jsx","clsx","Text","as","context","TelegraphText","Button","TelegraphButton","Lucide","Icon","TelegraphIcon","Default","icon","onRemove","onCopy","children","ref","Tag"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/Tag/Tag.constants.ts","../../src/Tag/Tag.tsx"],"sourcesContent":["export const SIZE = {\n  Root: {\n    \"1\": \"h-6\",\n    \"2\": \"h-8\",\n  },\n} as const;\n\nexport const COLOR = {\n  Root: {\n    solid: {\n      default: \"bg-gray-9\",\n      accent: \"bg-accent-9\",\n      gray: \"bg-gray-9\",\n      red: \"bg-red-9\",\n      blue: \"bg-blue-9\",\n      green: \"bg-green-9\",\n      yellow: \"bg-yellow-9\",\n      purple: \"bg-purple-9\",\n    },\n    soft: {\n      default: \"bg-gray-3\",\n      accent: \"bg-accent-3\",\n      gray: \"bg-gray-3\",\n      red: \"bg-red-3\",\n      blue: \"bg-blue-3\",\n      green: \"bg-green-3\",\n      yellow: \"bg-yellow-3\",\n      purple: \"bg-purple-3\",\n    },\n  },\n  Icon: {\n    solid: {\n      default: \"white\",\n      gray: \"white\",\n      red: \"white\",\n      accent: \"white\",\n      blue: \"white\",\n      green: \"white\",\n      yellow: \"white\",\n      purple: \"white\",\n    },\n    soft: {\n      default: \"default\",\n      gray: \"gray\",\n      accent: \"accent\",\n      red: \"red\",\n      blue: \"blue\",\n      green: \"green\",\n      yellow: \"yellow\",\n      purple: \"purple\",\n    },\n  },\n  Text: {\n    solid: {\n      default: \"white\",\n      gray: \"white\",\n      accent: \"white\",\n      red: \"white\",\n      blue: \"white\",\n      green: \"white\",\n      yellow: \"white\",\n      purple: \"white\",\n    },\n    soft: {\n      default: \"default\",\n      gray: \"gray\",\n      accent: \"accent\",\n      red: \"red\",\n      blue: \"blue\",\n      green: \"green\",\n      yellow: \"yellow\",\n      purple: \"purple\",\n    },\n  },\n  Button: {\n    solid: {\n      default: \"gray\",\n      gray: \"gray\",\n      accent: \"accent\",\n      red: \"red\",\n      blue: \"blue\",\n      green: \"green\",\n      yellow: \"yellow\",\n      purple: \"purple\",\n    },\n    soft: {\n      default: \"gray\",\n      gray: \"gray\",\n      accent: \"accent\",\n      red: \"red\",\n      blue: \"blue\",\n      green: \"green\",\n      yellow: \"yellow\",\n      purple: \"purple\",\n    },\n  },\n} as const;\n","import { Button as TelegraphButton } from \"@telegraph/button\";\nimport type { Optional, Required } from \"@telegraph/helpers\";\nimport { Lucide, Icon as TelegraphIcon } from \"@telegraph/icon\";\nimport { Text as TelegraphText } from \"@telegraph/typography\";\nimport { clsx } from \"clsx\";\nimport React from \"react\";\n\nimport { COLOR, SIZE } from \"./Tag.constants\";\n\ntype RootBaseProps = {\n  size?: \"1\" | \"2\";\n  color?: keyof (typeof COLOR.Root)[\"soft\"];\n  variant?: keyof typeof COLOR.Root;\n};\n\ntype RootProps = React.HTMLAttributes<RootRef> & RootBaseProps;\n\ntype RootRef = HTMLSpanElement;\n\nconst TagContext = React.createContext<Required<RootBaseProps>>({\n  size: \"1\",\n  color: \"default\",\n  variant: \"soft\",\n});\n\nconst Root = React.forwardRef<RootRef, RootProps>(\n  (\n    { size = \"1\", color = \"default\", variant = \"soft\", className, ...props },\n    forwardedRef,\n  ) => {\n    return (\n      <TagContext.Provider value={{ size, color, variant }}>\n        <span\n          className={clsx(\n            \"inline-flex items-center rounded-3 pl-2\",\n            SIZE.Root[size],\n            COLOR.Root[variant][color],\n            className,\n          )}\n          {...props}\n          ref={forwardedRef}\n          data-tag\n        />\n      </TagContext.Provider>\n    );\n  },\n);\n\ntype TextProps = Optional<React.ComponentProps<typeof TelegraphText>, \"as\">;\n\ntype TextRef = React.ElementRef<typeof TelegraphText>;\n\nconst Text = React.forwardRef<TextRef, TextProps>(\n  ({ as = \"span\", className, ...props }, forwardedRef) => {\n    const context = React.useContext(TagContext);\n    return (\n      <TelegraphText\n        as={as}\n        size={context.size}\n        color={COLOR.Text[context.variant][context.color]}\n        className={clsx(\"rounded-tl-0 rounded-bl-0 mr-2\", className)}\n        {...props}\n        ref={forwardedRef}\n      />\n    );\n  },\n);\n\ntype ButtonProps = React.ComponentProps<typeof TelegraphButton.Root>;\ntype ButtonRef = React.ElementRef<typeof TelegraphButton.Root>;\n\nconst Button = React.forwardRef<ButtonRef, ButtonProps>(\n  ({ className, ...props }, forwardedRef) => {\n    const context = React.useContext(TagContext);\n    return (\n      <TelegraphButton\n        size={context.size}\n        color={COLOR.Button[context.variant][context.color]}\n        variant={context.variant}\n        icon={{ icon: Lucide.X, alt: \"close\" }}\n        className={clsx(\"rounded-tl-0 rounded-bl-0\", className)}\n        {...props}\n        ref={forwardedRef}\n      />\n    );\n  },\n);\n\ntype IconProps = React.ComponentProps<typeof TelegraphIcon>;\ntype IconRef = React.ElementRef<typeof TelegraphIcon>;\n\nconst Icon = React.forwardRef<IconRef, IconProps>(\n  ({ className, ...props }, forwardedRef) => {\n    const context = React.useContext(TagContext);\n    return (\n      <TelegraphIcon\n        size={context.size}\n        color={COLOR.Icon[context.variant][context.color]}\n        className={clsx(\"rounded-tl-0 rounded-bl-0 mr-1\", className)}\n        {...props}\n        ref={forwardedRef}\n      />\n    );\n  },\n);\n\ntype DefaultProps = React.ComponentProps<typeof Root> & {\n  icon?: React.ComponentProps<typeof TelegraphIcon>;\n  onCopy?: () => void;\n  onRemove?: () => void;\n};\ntype DefaultRef = React.ElementRef<typeof Root>;\n\nconst Default = React.forwardRef<DefaultRef, DefaultProps>(\n  (\n    {\n      color = \"default\",\n      size = \"1\",\n      variant = \"soft\",\n      icon,\n      onRemove,\n      onCopy,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <Root color={color} size={size} variant={variant} {...props} ref={ref}>\n        {icon && <Icon {...icon} />}\n        <Text as=\"span\">{children}</Text>\n        {onRemove && (\n          <Button onClick={onRemove} icon={{ icon: Lucide.X, alt: \"Remove\" }} />\n        )}\n        {onCopy && (\n          <Button\n            onClick={onCopy}\n            icon={{ icon: Lucide.Copy, alt: \"Copy text\" }}\n          />\n        )}\n      </Root>\n    );\n  },\n);\n\nObject.assign(Default, {\n  Root,\n  Button,\n  Text,\n  Icon,\n});\n\nconst Tag = Default as typeof Default & {\n  Root: typeof Root;\n  Button: typeof Button;\n  Text: typeof Text;\n  Icon: typeof Icon;\n};\n\nexport { Tag };\n"],"names":["SIZE","COLOR","TagContext","React","Root","size","color","variant","className","props","forwardedRef","jsx","clsx","Text","as","context","TelegraphText","Button","TelegraphButton","Lucide","Icon","TelegraphIcon","Default","icon","onRemove","onCopy","children","ref","Tag"],"mappings":"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"}

package/dist/esm/index.mjs

@@ -1,10 +1,10 @@
 import { jsx as l, jsxs as x } from "react/jsx-runtime";
 import { Button as R } from "@telegraph/button";
 import { Lucide as g, Icon as C } from "@telegraph/icon";
-import { Text as T } from "@telegraph/typography";
+import { Text as v } from "@telegraph/typography";
 import { clsx as u } from "clsx";
 import n from "react";
-const v = {
+const T = {
   Root: {
     1: "h-6",
     2: "h-8"
@@ -108,7 +108,7 @@ const v = {
     {
       className: u(
         "inline-flex items-center rounded-3 pl-2",
-        v.Root[t],
+        T.Root[t],
         d.Root[o][r],
         e
       ),
@@ -121,7 +121,7 @@ const v = {
   ({ as: t = "span", className: r, ...o }, e) => {
     const a = n.useContext(s);
     return /* @__PURE__ */ l(
-      T,
+      v,
       {
         as: t,
         size: a.size,
@@ -175,14 +175,14 @@ const v = {
   }, m) => /* @__PURE__ */ x(f, { color: t, size: r, variant: o, ...h, ref: m, children: [
     e && /* @__PURE__ */ l(w, { ...e }),
     /* @__PURE__ */ l(p, { as: "span", children: y }),
-    a && /* @__PURE__ */ l(
+    a && /* @__PURE__ */ l(i, { onClick: a, icon: { icon: g.X, alt: "Remove" } }),
+    c && /* @__PURE__ */ l(
       i,
       {
-        onClick: a,
-        icon: { icon: g.Copy, alt: "Copy Text" }
+        onClick: c,
+        icon: { icon: g.Copy, alt: "Copy text" }
       }
-    ),
-    c && /* @__PURE__ */ l(i, { onClick: c, icon: { icon: g.X, alt: "Remove" } })
+    )
   ] })
 );
 Object.assign(b, {

package/dist/esm/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Tag/Tag.constants.ts","../../src/Tag/Tag.tsx"],"sourcesContent":["export const SIZE = {\n  Root: {\n    \"1\": \"h-6\",\n    \"2\": \"h-8\",\n  },\n} as const;\n\nexport const COLOR = {\n  Root: {\n    solid: {\n      default: \"bg-gray-9\",\n      accent: \"bg-accent-9\",\n      gray: \"bg-gray-9\",\n      red: \"bg-red-9\",\n      blue: \"bg-blue-9\",\n      green: \"bg-green-9\",\n      yellow: \"bg-yellow-9\",\n      purple: \"bg-purple-9\",\n    },\n    soft: {\n      default: \"bg-gray-3\",\n      accent: \"bg-accent-3\",\n      gray: \"bg-gray-3\",\n      red: \"bg-red-3\",\n      blue: \"bg-blue-3\",\n      green: \"bg-green-3\",\n      yellow: \"bg-yellow-3\",\n      purple: \"bg-purple-3\",\n    },\n  },\n  Icon: {\n    solid: {\n      default: \"white\",\n      gray: \"white\",\n      red: \"white\",\n      accent: \"white\",\n      blue: \"white\",\n      green: \"white\",\n      yellow: \"white\",\n      purple: \"white\",\n    },\n    soft: {\n      default: \"default\",\n      gray: \"gray\",\n      accent: \"accent\",\n      red: \"red\",\n      blue: \"blue\",\n      green: \"green\",\n      yellow: \"yellow\",\n      purple: \"purple\",\n    },\n  },\n  Text: {\n    solid: {\n      default: \"white\",\n      gray: \"white\",\n      accent: \"white\",\n      red: \"white\",\n      blue: \"white\",\n      green: \"white\",\n      yellow: \"white\",\n      purple: \"white\",\n    },\n    soft: {\n      default: \"default\",\n      gray: \"gray\",\n      accent: \"accent\",\n      red: \"red\",\n      blue: \"blue\",\n      green: \"green\",\n      yellow: \"yellow\",\n      purple: \"purple\",\n    },\n  },\n  Button: {\n    solid: {\n      default: \"gray\",\n      gray: \"gray\",\n      accent: \"accent\",\n      red: \"red\",\n      blue: \"blue\",\n      green: \"green\",\n      yellow: \"yellow\",\n      purple: \"purple\",\n    },\n    soft: {\n      default: \"gray\",\n      gray: \"gray\",\n      accent: \"accent\",\n      red: \"red\",\n      blue: \"blue\",\n      green: \"green\",\n      yellow: \"yellow\",\n      purple: \"purple\",\n    },\n  },\n} as const;\n","import { Button as TelegraphButton } from \"@telegraph/button\";\nimport type { Optional, Required } from \"@telegraph/helpers\";\nimport { Lucide, Icon as TelegraphIcon } from \"@telegraph/icon\";\nimport { Text as TelegraphText } from \"@telegraph/typography\";\nimport { clsx } from \"clsx\";\nimport React from \"react\";\n\nimport { COLOR, SIZE } from \"./Tag.constants\";\n\ntype RootBaseProps = {\n  size?: \"1\" | \"2\";\n  color?: keyof (typeof COLOR.Root)[\"soft\"];\n  variant?: keyof typeof COLOR.Root;\n};\n\ntype RootProps = React.HTMLAttributes<RootRef> & RootBaseProps;\n\ntype RootRef = HTMLSpanElement;\n\nconst TagContext = React.createContext<Required<RootBaseProps>>({\n  size: \"1\",\n  color: \"default\",\n  variant: \"soft\",\n});\n\nconst Root = React.forwardRef<RootRef, RootProps>(\n  (\n    { size = \"1\", color = \"default\", variant = \"soft\", className, ...props },\n    forwardedRef,\n  ) => {\n    return (\n      <TagContext.Provider value={{ size, color, variant }}>\n        <span\n          className={clsx(\n            \"inline-flex items-center rounded-3 pl-2\",\n            SIZE.Root[size],\n            COLOR.Root[variant][color],\n            className,\n          )}\n          {...props}\n          ref={forwardedRef}\n          data-tag\n        />\n      </TagContext.Provider>\n    );\n  },\n);\n\ntype TextProps = Optional<React.ComponentProps<typeof TelegraphText>, \"as\">;\n\ntype TextRef = React.ElementRef<typeof TelegraphText>;\n\nconst Text = React.forwardRef<TextRef, TextProps>(\n  ({ as = \"span\", className, ...props }, forwardedRef) => {\n    const context = React.useContext(TagContext);\n    return (\n      <TelegraphText\n        as={as}\n        size={context.size}\n        color={COLOR.Text[context.variant][context.color]}\n        className={clsx(\"rounded-tl-0 rounded-bl-0 mr-2\", className)}\n        {...props}\n        ref={forwardedRef}\n      />\n    );\n  },\n);\n\ntype ButtonProps = React.ComponentProps<typeof TelegraphButton.Root>;\ntype ButtonRef = React.ElementRef<typeof TelegraphButton.Root>;\n\nconst Button = React.forwardRef<ButtonRef, ButtonProps>(\n  ({ className, ...props }, forwardedRef) => {\n    const context = React.useContext(TagContext);\n    return (\n      <TelegraphButton\n        size={context.size}\n        color={COLOR.Button[context.variant][context.color]}\n        variant={context.variant}\n        icon={{ icon: Lucide.X, alt: \"close\" }}\n        className={clsx(\"rounded-tl-0 rounded-bl-0\", className)}\n        {...props}\n        ref={forwardedRef}\n      />\n    );\n  },\n);\n\ntype IconProps = React.ComponentProps<typeof TelegraphIcon>;\ntype IconRef = React.ElementRef<typeof TelegraphIcon>;\n\nconst Icon = React.forwardRef<IconRef, IconProps>(\n  ({ className, ...props }, forwardedRef) => {\n    const context = React.useContext(TagContext);\n    return (\n      <TelegraphIcon\n        size={context.size}\n        color={COLOR.Icon[context.variant][context.color]}\n        className={clsx(\"rounded-tl-0 rounded-bl-0 mr-1\", className)}\n        {...props}\n        ref={forwardedRef}\n      />\n    );\n  },\n);\n\ntype DefaultProps = React.ComponentProps<typeof Root> & {\n  icon?: React.ComponentProps<typeof TelegraphIcon>;\n  onCopy?: () => void;\n  onRemove?: () => void;\n};\ntype DefaultRef = React.ElementRef<typeof Root>;\n\nconst Default = React.forwardRef<DefaultRef, DefaultProps>(\n  (\n    {\n      color = \"default\",\n      size = \"1\",\n      variant = \"soft\",\n      icon,\n      onRemove,\n      onCopy,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <Root color={color} size={size} variant={variant} {...props} ref={ref}>\n        {icon && <Icon {...icon} />}\n        <Text as=\"span\">{children}</Text>\n        {onRemove && (\n          <Button\n            onClick={onRemove}\n            icon={{ icon: Lucide.Copy, alt: \"Copy Text\" }}\n          />\n        )}\n        {onCopy && (\n          <Button onClick={onCopy} icon={{ icon: Lucide.X, alt: \"Remove\" }} />\n        )}\n      </Root>\n    );\n  },\n);\n\nObject.assign(Default, {\n  Root,\n  Button,\n  Text,\n  Icon,\n});\n\nconst Tag = Default as typeof Default & {\n  Root: typeof Root;\n  Button: typeof Button;\n  Text: typeof Text;\n  Icon: typeof Icon;\n};\n\nexport { Tag };\n"],"names":["SIZE","COLOR","TagContext","React","Root","size","color","variant","className","props","forwardedRef","jsx","clsx","Text","as","context","TelegraphText","Button","TelegraphButton","Lucide","Icon","TelegraphIcon","Default","icon","onRemove","onCopy","children","ref","Tag"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/Tag/Tag.constants.ts","../../src/Tag/Tag.tsx"],"sourcesContent":["export const SIZE = {\n  Root: {\n    \"1\": \"h-6\",\n    \"2\": \"h-8\",\n  },\n} as const;\n\nexport const COLOR = {\n  Root: {\n    solid: {\n      default: \"bg-gray-9\",\n      accent: \"bg-accent-9\",\n      gray: \"bg-gray-9\",\n      red: \"bg-red-9\",\n      blue: \"bg-blue-9\",\n      green: \"bg-green-9\",\n      yellow: \"bg-yellow-9\",\n      purple: \"bg-purple-9\",\n    },\n    soft: {\n      default: \"bg-gray-3\",\n      accent: \"bg-accent-3\",\n      gray: \"bg-gray-3\",\n      red: \"bg-red-3\",\n      blue: \"bg-blue-3\",\n      green: \"bg-green-3\",\n      yellow: \"bg-yellow-3\",\n      purple: \"bg-purple-3\",\n    },\n  },\n  Icon: {\n    solid: {\n      default: \"white\",\n      gray: \"white\",\n      red: \"white\",\n      accent: \"white\",\n      blue: \"white\",\n      green: \"white\",\n      yellow: \"white\",\n      purple: \"white\",\n    },\n    soft: {\n      default: \"default\",\n      gray: \"gray\",\n      accent: \"accent\",\n      red: \"red\",\n      blue: \"blue\",\n      green: \"green\",\n      yellow: \"yellow\",\n      purple: \"purple\",\n    },\n  },\n  Text: {\n    solid: {\n      default: \"white\",\n      gray: \"white\",\n      accent: \"white\",\n      red: \"white\",\n      blue: \"white\",\n      green: \"white\",\n      yellow: \"white\",\n      purple: \"white\",\n    },\n    soft: {\n      default: \"default\",\n      gray: \"gray\",\n      accent: \"accent\",\n      red: \"red\",\n      blue: \"blue\",\n      green: \"green\",\n      yellow: \"yellow\",\n      purple: \"purple\",\n    },\n  },\n  Button: {\n    solid: {\n      default: \"gray\",\n      gray: \"gray\",\n      accent: \"accent\",\n      red: \"red\",\n      blue: \"blue\",\n      green: \"green\",\n      yellow: \"yellow\",\n      purple: \"purple\",\n    },\n    soft: {\n      default: \"gray\",\n      gray: \"gray\",\n      accent: \"accent\",\n      red: \"red\",\n      blue: \"blue\",\n      green: \"green\",\n      yellow: \"yellow\",\n      purple: \"purple\",\n    },\n  },\n} as const;\n","import { Button as TelegraphButton } from \"@telegraph/button\";\nimport type { Optional, Required } from \"@telegraph/helpers\";\nimport { Lucide, Icon as TelegraphIcon } from \"@telegraph/icon\";\nimport { Text as TelegraphText } from \"@telegraph/typography\";\nimport { clsx } from \"clsx\";\nimport React from \"react\";\n\nimport { COLOR, SIZE } from \"./Tag.constants\";\n\ntype RootBaseProps = {\n  size?: \"1\" | \"2\";\n  color?: keyof (typeof COLOR.Root)[\"soft\"];\n  variant?: keyof typeof COLOR.Root;\n};\n\ntype RootProps = React.HTMLAttributes<RootRef> & RootBaseProps;\n\ntype RootRef = HTMLSpanElement;\n\nconst TagContext = React.createContext<Required<RootBaseProps>>({\n  size: \"1\",\n  color: \"default\",\n  variant: \"soft\",\n});\n\nconst Root = React.forwardRef<RootRef, RootProps>(\n  (\n    { size = \"1\", color = \"default\", variant = \"soft\", className, ...props },\n    forwardedRef,\n  ) => {\n    return (\n      <TagContext.Provider value={{ size, color, variant }}>\n        <span\n          className={clsx(\n            \"inline-flex items-center rounded-3 pl-2\",\n            SIZE.Root[size],\n            COLOR.Root[variant][color],\n            className,\n          )}\n          {...props}\n          ref={forwardedRef}\n          data-tag\n        />\n      </TagContext.Provider>\n    );\n  },\n);\n\ntype TextProps = Optional<React.ComponentProps<typeof TelegraphText>, \"as\">;\n\ntype TextRef = React.ElementRef<typeof TelegraphText>;\n\nconst Text = React.forwardRef<TextRef, TextProps>(\n  ({ as = \"span\", className, ...props }, forwardedRef) => {\n    const context = React.useContext(TagContext);\n    return (\n      <TelegraphText\n        as={as}\n        size={context.size}\n        color={COLOR.Text[context.variant][context.color]}\n        className={clsx(\"rounded-tl-0 rounded-bl-0 mr-2\", className)}\n        {...props}\n        ref={forwardedRef}\n      />\n    );\n  },\n);\n\ntype ButtonProps = React.ComponentProps<typeof TelegraphButton.Root>;\ntype ButtonRef = React.ElementRef<typeof TelegraphButton.Root>;\n\nconst Button = React.forwardRef<ButtonRef, ButtonProps>(\n  ({ className, ...props }, forwardedRef) => {\n    const context = React.useContext(TagContext);\n    return (\n      <TelegraphButton\n        size={context.size}\n        color={COLOR.Button[context.variant][context.color]}\n        variant={context.variant}\n        icon={{ icon: Lucide.X, alt: \"close\" }}\n        className={clsx(\"rounded-tl-0 rounded-bl-0\", className)}\n        {...props}\n        ref={forwardedRef}\n      />\n    );\n  },\n);\n\ntype IconProps = React.ComponentProps<typeof TelegraphIcon>;\ntype IconRef = React.ElementRef<typeof TelegraphIcon>;\n\nconst Icon = React.forwardRef<IconRef, IconProps>(\n  ({ className, ...props }, forwardedRef) => {\n    const context = React.useContext(TagContext);\n    return (\n      <TelegraphIcon\n        size={context.size}\n        color={COLOR.Icon[context.variant][context.color]}\n        className={clsx(\"rounded-tl-0 rounded-bl-0 mr-1\", className)}\n        {...props}\n        ref={forwardedRef}\n      />\n    );\n  },\n);\n\ntype DefaultProps = React.ComponentProps<typeof Root> & {\n  icon?: React.ComponentProps<typeof TelegraphIcon>;\n  onCopy?: () => void;\n  onRemove?: () => void;\n};\ntype DefaultRef = React.ElementRef<typeof Root>;\n\nconst Default = React.forwardRef<DefaultRef, DefaultProps>(\n  (\n    {\n      color = \"default\",\n      size = \"1\",\n      variant = \"soft\",\n      icon,\n      onRemove,\n      onCopy,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <Root color={color} size={size} variant={variant} {...props} ref={ref}>\n        {icon && <Icon {...icon} />}\n        <Text as=\"span\">{children}</Text>\n        {onRemove && (\n          <Button onClick={onRemove} icon={{ icon: Lucide.X, alt: \"Remove\" }} />\n        )}\n        {onCopy && (\n          <Button\n            onClick={onCopy}\n            icon={{ icon: Lucide.Copy, alt: \"Copy text\" }}\n          />\n        )}\n      </Root>\n    );\n  },\n);\n\nObject.assign(Default, {\n  Root,\n  Button,\n  Text,\n  Icon,\n});\n\nconst Tag = Default as typeof Default & {\n  Root: typeof Root;\n  Button: typeof Button;\n  Text: typeof Text;\n  Icon: typeof Icon;\n};\n\nexport { Tag };\n"],"names":["SIZE","COLOR","TagContext","React","Root","size","color","variant","className","props","forwardedRef","jsx","clsx","Text","as","context","TelegraphText","Button","TelegraphButton","Lucide","Icon","TelegraphIcon","Default","icon","onRemove","onCopy","children","ref","Tag"],"mappings":";;;;;;AAAO,MAAMA,IAAO;AAAA,EAClB,MAAM;AAAA,IACJ,GAAK;AAAA,IACL,GAAK;AAAA,EACP;AACF,GAEaC,IAAQ;AAAA,EACnB,MAAM;AAAA,IACJ,OAAO;AAAA,MACL,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,IACV;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,MACL,SAAS;AAAA,MACT,MAAM;AAAA,MACN,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,IACV;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,MACL,SAAS;AAAA,MACT,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,IACV;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,QAAQ;AAAA,IACN,OAAO;AAAA,MACL,SAAS;AAAA,MACT,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,IACV;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,IACV;AAAA,EACF;AACF,GC7EMC,IAAaC,EAAM,cAAuC;AAAA,EAC9D,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AACX,CAAC,GAEKC,IAAOD,EAAM;AAAA,EACjB,CACE,EAAE,MAAAE,IAAO,KAAK,OAAAC,IAAQ,WAAW,SAAAC,IAAU,QAAQ,WAAAC,GAAW,GAAGC,EAAM,GACvEC,MAGE,gBAAAC,EAACT,EAAW,UAAX,EAAoB,OAAO,EAAE,MAAAG,GAAM,OAAAC,GAAO,SAAAC,KACzC,UAAA,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAZ,EAAK,KAAKK,CAAI;AAAA,QACdJ,EAAM,KAAKM,CAAO,EAAED,CAAK;AAAA,QACzBE;AAAA,MACF;AAAA,MACC,GAAGC;AAAA,MACJ,KAAKC;AAAA,MACL,YAAQ;AAAA,IAAA;AAAA,EAEZ,EAAA,CAAA;AAGN,GAMMG,IAAOV,EAAM;AAAA,EACjB,CAAC,EAAE,IAAAW,IAAK,QAAQ,WAAAN,GAAW,GAAGC,KAASC,MAAiB;AAChD,UAAAK,IAAUZ,EAAM,WAAWD,CAAU;AAEzC,WAAA,gBAAAS;AAAA,MAACK;AAAAA,MAAA;AAAA,QACC,IAAAF;AAAA,QACA,MAAMC,EAAQ;AAAA,QACd,OAAOd,EAAM,KAAKc,EAAQ,OAAO,EAAEA,EAAQ,KAAK;AAAA,QAChD,WAAWH,EAAK,kCAAkCJ,CAAS;AAAA,QAC1D,GAAGC;AAAA,QACJ,KAAKC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGX;AACF,GAKMO,IAASd,EAAM;AAAA,EACnB,CAAC,EAAE,WAAAK,GAAW,GAAGC,EAAA,GAASC,MAAiB;AACnC,UAAAK,IAAUZ,EAAM,WAAWD,CAAU;AAEzC,WAAA,gBAAAS;AAAA,MAACO;AAAAA,MAAA;AAAA,QACC,MAAMH,EAAQ;AAAA,QACd,OAAOd,EAAM,OAAOc,EAAQ,OAAO,EAAEA,EAAQ,KAAK;AAAA,QAClD,SAASA,EAAQ;AAAA,QACjB,MAAM,EAAE,MAAMI,EAAO,GAAG,KAAK,QAAQ;AAAA,QACrC,WAAWP,EAAK,6BAA6BJ,CAAS;AAAA,QACrD,GAAGC;AAAA,QACJ,KAAKC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGX;AACF,GAKMU,IAAOjB,EAAM;AAAA,EACjB,CAAC,EAAE,WAAAK,GAAW,GAAGC,EAAA,GAASC,MAAiB;AACnC,UAAAK,IAAUZ,EAAM,WAAWD,CAAU;AAEzC,WAAA,gBAAAS;AAAA,MAACU;AAAAA,MAAA;AAAA,QACC,MAAMN,EAAQ;AAAA,QACd,OAAOd,EAAM,KAAKc,EAAQ,OAAO,EAAEA,EAAQ,KAAK;AAAA,QAChD,WAAWH,EAAK,kCAAkCJ,CAAS;AAAA,QAC1D,GAAGC;AAAA,QACJ,KAAKC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGX;AACF,GASMY,IAAUnB,EAAM;AAAA,EACpB,CACE;AAAA,IACE,OAAAG,IAAQ;AAAA,IACR,MAAAD,IAAO;AAAA,IACP,SAAAE,IAAU;AAAA,IACV,MAAAgB;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGjB;AAAA,KAELkB,wBAGGvB,GAAK,EAAA,OAAAE,GAAc,MAAAD,GAAY,SAAAE,GAAmB,GAAGE,GAAO,KAAAkB,GAC1D,UAAA;AAAA,IAAQJ,KAAA,gBAAAZ,EAACS,GAAM,EAAA,GAAGG,EAAM,CAAA;AAAA,IACxB,gBAAAZ,EAAAE,GAAA,EAAK,IAAG,QAAQ,UAAAa,EAAS,CAAA;AAAA,IACzBF,KACC,gBAAAb,EAACM,GAAO,EAAA,SAASO,GAAU,MAAM,EAAE,MAAML,EAAO,GAAG,KAAK,SAAY,EAAA,CAAA;AAAA,IAErEM,KACC,gBAAAd;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,SAASQ;AAAA,QACT,MAAM,EAAE,MAAMN,EAAO,MAAM,KAAK,YAAY;AAAA,MAAA;AAAA,IAC9C;AAAA,EAEJ,EAAA,CAAA;AAGN;AAEA,OAAO,OAAOG,GAAS;AAAA,EACrB,MAAAlB;AAAA,EACA,QAAAa;AAAA,EACA,MAAAJ;AAAA,EACA,MAAAO;AACF,CAAC;AAED,MAAMQ,IAAMN;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telegraph/tag",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/tag",
   "author": "@knocklabs",
   "license": "MIT",