@telegraph/tag 0.0.10 → 0.0.12

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @telegraph/tag
 
+## 0.0.12
+
+### Patch Changes
+
+- Updated dependencies [[`492be94`](https://github.com/knocklabs/telegraph/commit/492be943f4b403e9d590449a3af60f3d495d1f46)]:
+  - @telegraph/button@0.0.15
+
+## 0.0.11
+
+### Patch Changes
+
+- [#92](https://github.com/knocklabs/telegraph/pull/92) [`efbea6a`](https://github.com/knocklabs/telegraph/commit/efbea6a62e1f783a6dc3d2799a0aaab1a34d5e90) Thanks [@kylemcd](https://github.com/kylemcd)! - Updates to support lucide icon
+
+- Updated dependencies [[`efbea6a`](https://github.com/knocklabs/telegraph/commit/efbea6a62e1f783a6dc3d2799a0aaab1a34d5e90)]:
+  - @telegraph/button@0.0.14
+  - @telegraph/icon@0.0.8
+  - @telegraph/helpers@0.0.1
+  - @telegraph/typography@0.0.10
+
 ## 0.0.10
 
 ### Patch Changes

package/README.md

@@ -147,11 +147,11 @@ import { Tag } from '@telegraph/tag'
 
 ```
 import { Tag } from "@telegraph/tag"
-import { addSharp, closeSharp } from '@telegraph/icon'
+import { Lucide  } from '@telegraph/icon'
 
 <Tag.Root color="blue" variant="solid" size="2">
-    <Tag.Icon icon={addSharp} alt="Create"/>
+    <Tag.Icon icon={Lucide.Add} alt="Create"/>
     <Tag.Text>Text</Tag.Text>
-    <Tag.Button icon={{ icon: removeSharp, alt: "remove"}} onClick={() => {}}/>
+    <Tag.Button icon={{ icon: Lucide.X, alt: "remove"}} onClick={() => {}}/>
 </Tag.Root>
 ```

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"),s=require("@telegraph/icon"),R=require("@telegraph/typography"),u=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"}),p=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:u.clsx("inline-flex items-center rounded-3 pl-2",m.Root[t],i.Root[l][r],e),...a,ref:c,"data-tag":!0})})),b=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:u.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:s.closeSharp,alt:"close"},className:u.clsx("rounded-tl-0 rounded-bl-0",t),...r,ref:l})}),f=n.forwardRef(({className:t,...r},l)=>{const e=n.useContext(d);return o.jsx(s.Icon,{size:e.size,color:i.Icon[e.variant][e.color],className:u.clsx("rounded-tl-0 rounded-bl-0 mr-1",t),...r,ref:l})}),y=n.forwardRef(({color:t="default",size:r="1",variant:l="soft",icon:e,onRemove:a,onCopy:c,children:w,...x},h)=>o.jsxs(p,{color:t,size:r,variant:l,...x,ref:h,children:[e&&o.jsx(f,{...e}),o.jsx(b,{as:"span",children:w}),a&&o.jsx(g,{onClick:a,icon:{icon:s.closeSharp,alt:"Copy Text"}}),c&&o.jsx(g,{onClick:c,icon:{icon:s.copyOutline,alt:"Remove"}})]}));Object.assign(y,{Root:p,Button:g,Text:b,Icon:f});const T=y;exports.Tag=T;
+"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;
 //# 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 {\n  Icon as TelegraphIcon,\n  closeSharp,\n  copyOutline,\n} 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: closeSharp, 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: closeSharp, alt: \"Copy Text\" }}\n          />\n        )}\n        {onCopy && (\n          <Button\n            onClick={onCopy}\n            icon={{ icon: copyOutline, alt: \"Remove\" }}\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","closeSharp","Icon","TelegraphIcon","Default","icon","onRemove","onCopy","children","ref","copyOutline","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\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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"}

package/dist/esm/index.mjs

@@ -1,15 +1,15 @@
 import { jsx as l, jsxs as x } from "react/jsx-runtime";
 import { Button as R } from "@telegraph/button";
-import { closeSharp as i, Icon as C, copyOutline as T } from "@telegraph/icon";
-import { Text as v } from "@telegraph/typography";
+import { Lucide as g, Icon as C } from "@telegraph/icon";
+import { Text as T } from "@telegraph/typography";
 import { clsx as u } from "clsx";
 import n from "react";
-const z = {
+const v = {
   Root: {
     1: "h-6",
     2: "h-8"
   }
-}, s = {
+}, d = {
   Root: {
     solid: {
       default: "bg-gray-9",
@@ -98,18 +98,18 @@ const z = {
       purple: "purple"
     }
   }
-}, d = n.createContext({
+}, s = n.createContext({
   size: "1",
   color: "default",
   variant: "soft"
 }), f = n.forwardRef(
-  ({ size: t = "1", color: r = "default", variant: o = "soft", className: e, ...a }, c) => /* @__PURE__ */ l(d.Provider, { value: { size: t, color: r, variant: o }, children: /* @__PURE__ */ l(
+  ({ size: t = "1", color: r = "default", variant: o = "soft", className: e, ...a }, c) => /* @__PURE__ */ l(s.Provider, { value: { size: t, color: r, variant: o }, children: /* @__PURE__ */ l(
     "span",
     {
       className: u(
         "inline-flex items-center rounded-3 pl-2",
-        z.Root[t],
-        s.Root[o][r],
+        v.Root[t],
+        d.Root[o][r],
         e
       ),
       ...a,
@@ -119,29 +119,29 @@ const z = {
   ) })
 ), p = n.forwardRef(
   ({ as: t = "span", className: r, ...o }, e) => {
-    const a = n.useContext(d);
+    const a = n.useContext(s);
     return /* @__PURE__ */ l(
-      v,
+      T,
       {
         as: t,
         size: a.size,
-        color: s.Text[a.variant][a.color],
+        color: d.Text[a.variant][a.color],
         className: u("rounded-tl-0 rounded-bl-0 mr-2", r),
         ...o,
         ref: e
       }
     );
   }
-), g = n.forwardRef(
+), i = n.forwardRef(
   ({ className: t, ...r }, o) => {
-    const e = n.useContext(d);
+    const e = n.useContext(s);
     return /* @__PURE__ */ l(
       R,
       {
         size: e.size,
-        color: s.Button[e.variant][e.color],
+        color: d.Button[e.variant][e.color],
         variant: e.variant,
-        icon: { icon: i, alt: "close" },
+        icon: { icon: g.X, alt: "close" },
         className: u("rounded-tl-0 rounded-bl-0", t),
         ...r,
         ref: o
@@ -150,12 +150,12 @@ const z = {
   }
 ), w = n.forwardRef(
   ({ className: t, ...r }, o) => {
-    const e = n.useContext(d);
+    const e = n.useContext(s);
     return /* @__PURE__ */ l(
       C,
       {
         size: e.size,
-        color: s.Icon[e.variant][e.color],
+        color: d.Icon[e.variant][e.color],
         className: u("rounded-tl-0 rounded-bl-0 mr-1", t),
         ...r,
         ref: o
@@ -176,29 +176,23 @@ const z = {
     e && /* @__PURE__ */ l(w, { ...e }),
     /* @__PURE__ */ l(p, { as: "span", children: y }),
     a && /* @__PURE__ */ l(
-      g,
+      i,
       {
         onClick: a,
-        icon: { icon: i, alt: "Copy Text" }
+        icon: { icon: g.Copy, alt: "Copy Text" }
       }
     ),
-    c && /* @__PURE__ */ l(
-      g,
-      {
-        onClick: c,
-        icon: { icon: T, alt: "Remove" }
-      }
-    )
+    c && /* @__PURE__ */ l(i, { onClick: c, icon: { icon: g.X, alt: "Remove" } })
   ] })
 );
 Object.assign(b, {
   Root: f,
-  Button: g,
+  Button: i,
   Text: p,
   Icon: w
 });
-const k = b;
+const $ = b;
 export {
-  k as Tag
+  $ as Tag
 };
 //# sourceMappingURL=index.mjs.map

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 {\n  Icon as TelegraphIcon,\n  closeSharp,\n  copyOutline,\n} 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: closeSharp, 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: closeSharp, alt: \"Copy Text\" }}\n          />\n        )}\n        {onCopy && (\n          <Button\n            onClick={onCopy}\n            icon={{ icon: copyOutline, alt: \"Remove\" }}\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","closeSharp","Icon","TelegraphIcon","Default","icon","onRemove","onCopy","children","ref","copyOutline","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\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":";;;;;;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;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,SAASO;AAAA,QACT,MAAM,EAAE,MAAML,EAAO,MAAM,KAAK,YAAY;AAAA,MAAA;AAAA,IAC9C;AAAA,IAEDM,KACC,gBAAAd,EAACM,GAAO,EAAA,SAASQ,GAAQ,MAAM,EAAE,MAAMN,EAAO,GAAG,KAAK,SAAY,EAAA,CAAA;AAAA,EAEtE,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/dist/types/Tag/Tag.d.ts

@@ -1,4 +1,4 @@
-import { Icon as TelegraphIcon } from "@telegraph/icon";
+import { Lucide, Icon as TelegraphIcon } from "@telegraph/icon";
 import React from "react";
 import { COLOR } from "./Tag.constants";
 type RootBaseProps = {
@@ -29,13 +29,13 @@ declare const Button: React.ForwardRefExoticComponent<Omit<import("@telegraph/he
 } & {
     ref?: (string | React.Ref<HTMLButtonElement>) | undefined;
 }, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare const Icon: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLSpanElement> & {
-    icon: string;
+declare const Icon: React.ForwardRefExoticComponent<Omit<{
+    icon: React.ForwardRefExoticComponent<Omit<Lucide.LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
     alt: string;
     size?: "1" | "2" | "0" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | undefined;
     variant?: "primary" | "secondary" | undefined;
     color?: "white" | "default" | "gray" | "accent" | "red" | "blue" | "green" | "yellow" | "purple" | "beige" | "disabled" | undefined;
-} & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
 type DefaultProps = React.ComponentProps<typeof Root> & {
     icon?: React.ComponentProps<typeof TelegraphIcon>;
     onCopy?: () => void;

package/dist/types/Tag/Tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/Tag/Tag.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,IAAI,IAAI,aAAa,EAGtB,MAAM,iBAAiB,CAAC;AAGzB,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAQ,MAAM,iBAAiB,CAAC;AAE9C,KAAK,aAAa,GAAG;IACnB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;IAC1C,OAAO,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC,IAAI,CAAC;CACnC,CAAC;AAYF,QAAA,MAAM,IAAI,+HAqBT,CAAC;AAMF,QAAA,MAAM,IAAI;;;;;;;;;;;;wPAcT,CAAC;AAKF,QAAA,MAAM,MAAM;;;;;;;;mDAeX,CAAC;AAKF,QAAA,MAAM,IAAI;;;;;;wFAaT,CAAC;AAEF,KAAK,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,GAAG;IACtD,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC;IAClD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AA6CF,QAAA,MAAM,GAAG;UACD,WAAW;YACT,aAAa;UACf,WAAW;UACX,WAAW;CAClB,CAAC;AAEF,OAAO,EAAE,GAAG,EAAE,CAAC"}
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/Tag/Tag.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAQ,MAAM,iBAAiB,CAAC;AAE9C,KAAK,aAAa,GAAG;IACnB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;IAC1C,OAAO,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC,IAAI,CAAC;CACnC,CAAC;AAYF,QAAA,MAAM,IAAI,+HAqBT,CAAC;AAMF,QAAA,MAAM,IAAI;;;;;;;;;;;;wPAcT,CAAC;AAKF,QAAA,MAAM,MAAM;;;;;;;;mDAeX,CAAC;AAKF,QAAA,MAAM,IAAI;;;;;;2HAaT,CAAC;AAEF,KAAK,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,GAAG;IACtD,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC;IAClD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AA0CF,QAAA,MAAM,GAAG;UACD,WAAW;YACT,aAAa;UACf,WAAW;UACX,WAAW;CAClB,CAAC;AAEF,OAAO,EAAE,GAAG,EAAE,CAAC"}

package/dist/types/Tag/Tag.stories.d.ts

@@ -1,7 +1,11 @@
+/// <reference types="react" />
 import type { Meta, StoryObj } from "@storybook/react";
 import { Tag as TelegraphTag } from "./Tag";
 declare const meta: Meta<typeof TelegraphTag>;
 export default meta;
-type Story = StoryObj<typeof TelegraphTag>;
+type StorybookTagType = Omit<React.ComponentProps<typeof TelegraphTag>, "icon"> & {
+    icon?: string;
+};
+type Story = StoryObj<StorybookTagType>;
 export declare const Tag: Story;
 //# sourceMappingURL=Tag.stories.d.ts.map

package/dist/types/Tag/Tag.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../src/Tag/Tag.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,GAAG,IAAI,YAAY,EAAE,MAAM,OAAO,CAAC;AAG5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAwCnC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAC;AAE3C,eAAO,MAAM,GAAG,EAAE,KAgBjB,CAAC"}
+{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../src/Tag/Tag.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,GAAG,IAAI,YAAY,EAAE,MAAM,OAAO,CAAC;AAK5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAwCnC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,gBAAgB,GAAG,IAAI,CAC1B,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,EACzC,MAAM,CACP,GAAG;IACF,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC;AAExC,eAAO,MAAM,GAAG,EAAE,KAoBjB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telegraph/tag",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/tag",
   "author": "@knocklabs",
   "license": "MIT",
@@ -34,9 +34,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@telegraph/button": "^0.0.13",
+    "@telegraph/button": "^0.0.15",
     "@telegraph/helpers": "^0.0.1",
-    "@telegraph/icon": "^0.0.7",
+    "@telegraph/icon": "^0.0.8",
     "@telegraph/typography": "^0.0.10",
     "clsx": "^2.1.0"
   },
@@ -44,16 +44,16 @@
     "@knocklabs/eslint-config": "^0.0.3",
     "@knocklabs/prettier-config": "^0.0.1",
     "@knocklabs/typescript-config": "^0.0.2",
-    "@telegraph/postcss-config": "^0.0.12",
-    "@telegraph/tailwind-config": "^0.0.10",
-    "@telegraph/vite-config": "^0.0.8",
+    "@telegraph/postcss-config": "^0.0.13",
+    "@telegraph/tailwind-config": "^0.0.11",
+    "@telegraph/vite-config": "^0.0.9",
     "@telegraph/vitest-config": "^0.0.6",
     "@types/react": "^18.2.48",
     "eslint": "^8.56.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.3.3",
-    "vite": "^5.0.12",
+    "vite": "^5.1.7",
     "vitest": "^1.2.2"
   },
   "peerDependencies": {