@telegraph/tag 0.0.50 → 0.0.52

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @telegraph/tag
 
+## 0.0.52
+
+### Patch Changes
+
+- [`c93a4fe`](https://github.com/knocklabs/telegraph/commit/c93a4fe4db7969cf239f8d37fa6aa1ba59a5e151) Thanks [@kylemcd](https://github.com/kylemcd)! - Change tag default solid color to gray-12 to align with design system
+
+## 0.0.51
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @telegraph/button@0.0.50
+  - @telegraph/layout@0.0.30
+  - @telegraph/icon@0.0.32
+  - @telegraph/tooltip@0.0.24
+  - @telegraph/typography@0.0.30
+
 ## 0.0.50
 
 ### 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"),y=require("@telegraph/button"),u=require("@telegraph/icon"),v=require("@telegraph/layout"),C=require("@telegraph/tooltip"),B=require("@telegraph/typography"),x=require("clsx"),b=require("framer-motion"),c=require("react"),q={Root:{0:"h-5",1:"h-6",2:"h-8"}},w={Root:{0:"1",1:"2",2:"2"},Text:{0:"1",1:"2",2:"2"}},d={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"}}},g=c.createContext({size:"1",color:"default",variant:"soft"}),f=({as:r="span",size:t="1",color:e="default",variant:l="soft",className:a,...n})=>o.jsx(g.Provider,{value:{size:t,color:e,variant:l},children:o.jsx(v.Stack,{as:r,display:"inline-flex",align:"center",rounded:"2",pl:w.Root[t],className:x.clsx(q.Root[t],d.Root[l][e],a),...n,"data-tag":!0})}),h=({as:r="span",...t})=>{const e=c.useContext(g);return o.jsx(B.Text,{as:r,size:e.size,color:d.Text[e.variant][e.color],weight:"medium",mr:w.Text[e.size],...t})},m=({onClick:r,textToCopy:t,className:e,...l})=>{const a=c.useContext(g),[n,i]=c.useState(!1);return c.useEffect(()=>{if(n){const s=setTimeout(()=>i(!1),2e3);return()=>clearTimeout(s)}},[n]),o.jsx(b.AnimatePresence,{mode:"wait",initial:!1,children:o.jsx(C.Tooltip,{label:"Copy text",children:o.jsx(y.Button.Root,{onClick:s=>{var p;r==null||r(s),i(!0),t&&navigator.clipboard.writeText(t),(p=s.currentTarget)==null||p.blur()},size:a.size,color:d.Button[a.variant][a.color],variant:a.variant,className:x.clsx("overflow-hidden",e),roundedTopRight:"3",roundedBottomRight:"3",roundedTopLeft:"0",roundedBottomLeft:"0",...l,children:n?o.jsx(y.Button.Icon,{as:b.motion.span,initial:{y:"100%"},animate:{y:0},exit:{y:"100%"},transition:{duration:.2,type:"spring",bounce:0},icon:u.Lucide.Check,alt:"Copied text"},"check icon"):o.jsx(y.Button.Icon,{as:b.motion.span,initial:{y:"-100%"},animate:{y:0},exit:{y:"-100%"},transition:{duration:.2,type:"spring",bounce:0},icon:u.Lucide.Copy,alt:"Copy text"},"copy icon")})})})},j=({className:r,...t})=>{const e=c.useContext(g);return o.jsx(y.Button,{size:e.size,color:d.Button[e.variant][e.color],variant:e.variant,icon:{icon:u.Lucide.X,alt:"close"},className:x.clsx("rounded-tl-0 rounded-bl-0",r),...t})},T=({icon:r,alt:t,"aria-hidden":e,className:l,...a})=>{const n=c.useContext(g),i=t?{alt:t}:{"aria-hidden":e};return o.jsx(u.Icon,{icon:r,size:n.size,color:d.Icon[n.variant][n.color],className:x.clsx("rounded-tl-0 rounded-bl-0 mr-1",l),...i,...a})},R=({color:r="default",size:t="1",variant:e="soft",icon:l,onRemove:a,onCopy:n,textToCopy:i,children:s,...p})=>o.jsxs(f,{color:r,size:t,variant:e,...p,children:[l&&o.jsx(T,{...l}),o.jsx(h,{as:"span",children:s}),a&&o.jsx(j,{onClick:a,icon:{icon:u.Lucide.X,alt:"Remove"}}),n&&o.jsx(m,{onClick:n,textToCopy:i})]});Object.assign(R,{Root:f,Button:j,Text:h,Icon:T,CopyButton:m});const z=R;exports.Tag=z;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),y=require("@telegraph/button"),u=require("@telegraph/icon"),v=require("@telegraph/layout"),C=require("@telegraph/tooltip"),B=require("@telegraph/typography"),x=require("clsx"),b=require("framer-motion"),c=require("react"),q={Root:{0:"h-5",1:"h-6",2:"h-8"}},w={Root:{0:"1",1:"2",2:"2"},Text:{0:"1",1:"2",2:"2"}},d={Root:{solid:{default:"bg-gray-12",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"}}},g=c.createContext({size:"1",color:"default",variant:"soft"}),f=({as:r="span",size:t="1",color:e="default",variant:l="soft",className:a,...n})=>o.jsx(g.Provider,{value:{size:t,color:e,variant:l},children:o.jsx(v.Stack,{as:r,display:"inline-flex",align:"center",rounded:"2",pl:w.Root[t],className:x.clsx(q.Root[t],d.Root[l][e],a),...n,"data-tag":!0})}),h=({as:r="span",...t})=>{const e=c.useContext(g);return o.jsx(B.Text,{as:r,size:e.size,color:d.Text[e.variant][e.color],weight:"medium",mr:w.Text[e.size],...t})},m=({onClick:r,textToCopy:t,className:e,...l})=>{const a=c.useContext(g),[n,i]=c.useState(!1);return c.useEffect(()=>{if(n){const s=setTimeout(()=>i(!1),2e3);return()=>clearTimeout(s)}},[n]),o.jsx(b.AnimatePresence,{mode:"wait",initial:!1,children:o.jsx(C.Tooltip,{label:"Copy text",children:o.jsx(y.Button.Root,{onClick:s=>{var p;r==null||r(s),i(!0),t&&navigator.clipboard.writeText(t),(p=s.currentTarget)==null||p.blur()},size:a.size,color:d.Button[a.variant][a.color],variant:a.variant,className:x.clsx("overflow-hidden",e),roundedTopRight:"3",roundedBottomRight:"3",roundedTopLeft:"0",roundedBottomLeft:"0",...l,children:n?o.jsx(y.Button.Icon,{as:b.motion.span,initial:{y:"100%"},animate:{y:0},exit:{y:"100%"},transition:{duration:.2,type:"spring",bounce:0},icon:u.Lucide.Check,alt:"Copied text"},"check icon"):o.jsx(y.Button.Icon,{as:b.motion.span,initial:{y:"-100%"},animate:{y:0},exit:{y:"-100%"},transition:{duration:.2,type:"spring",bounce:0},icon:u.Lucide.Copy,alt:"Copy text"},"copy icon")})})})},j=({className:r,...t})=>{const e=c.useContext(g);return o.jsx(y.Button,{size:e.size,color:d.Button[e.variant][e.color],variant:e.variant,icon:{icon:u.Lucide.X,alt:"close"},className:x.clsx("rounded-tl-0 rounded-bl-0",r),...t})},T=({icon:r,alt:t,"aria-hidden":e,className:l,...a})=>{const n=c.useContext(g),i=t?{alt:t}:{"aria-hidden":e};return o.jsx(u.Icon,{icon:r,size:n.size,color:d.Icon[n.variant][n.color],className:x.clsx("rounded-tl-0 rounded-bl-0 mr-1",l),...i,...a})},R=({color:r="default",size:t="1",variant:e="soft",icon:l,onRemove:a,onCopy:n,textToCopy:i,children:s,...p})=>o.jsxs(f,{color:r,size:t,variant:e,...p,children:[l&&o.jsx(T,{...l}),o.jsx(h,{as:"span",children:s}),a&&o.jsx(j,{onClick:a,icon:{icon:u.Lucide.X,alt:"Remove"}}),n&&o.jsx(m,{onClick:n,textToCopy:i})]});Object.assign(R,{Root:f,Button:j,Text:h,Icon:T,CopyButton:m});const z=R;exports.Tag=z;
 //# 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    \"0\": \"h-5\",\n    \"1\": \"h-6\",\n    \"2\": \"h-8\",\n  },\n} as const;\n\nexport const SPACING = {\n  Root: {\n    \"0\": \"1\",\n    \"1\": \"2\",\n    \"2\": \"2\",\n  },\n  Text: {\n    \"0\": \"1\",\n    \"1\": \"2\",\n    \"2\": \"2\",\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 {\n  PolymorphicProps,\n  PolymorphicPropsWithTgphRef,\n  Required,\n  TgphComponentProps,\n  TgphElement,\n} from \"@telegraph/helpers\";\nimport { Lucide, Icon as TelegraphIcon } from \"@telegraph/icon\";\nimport { Stack } from \"@telegraph/layout\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text as TelegraphText } from \"@telegraph/typography\";\nimport { clsx } from \"clsx\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport React from \"react\";\n\nimport { COLOR, SIZE, SPACING } from \"./Tag.constants\";\n\ntype RootBaseProps = {\n  size?: \"0\" | \"1\" | \"2\";\n  color?: keyof (typeof COLOR.Root)[\"soft\"];\n  variant?: keyof typeof COLOR.Root;\n};\n\ntype RootProps<T extends TgphElement> = PolymorphicPropsWithTgphRef<\n  T,\n  HTMLSpanElement\n> &\n  TgphComponentProps<typeof Stack> &\n  RootBaseProps;\n\nconst TagContext = React.createContext<Required<RootBaseProps>>({\n  size: \"1\",\n  color: \"default\",\n  variant: \"soft\",\n});\n\nconst Root = <T extends TgphElement>({\n  as = \"span\" as T,\n  size = \"1\",\n  color = \"default\",\n  variant = \"soft\",\n  className,\n  ...props\n}: RootProps<T>) => {\n  return (\n    <TagContext.Provider value={{ size, color, variant }}>\n      <Stack\n        as={as}\n        display=\"inline-flex\"\n        align=\"center\"\n        rounded=\"2\"\n        pl={SPACING.Root[size]}\n        className={clsx(SIZE.Root[size], COLOR.Root[variant][color], className)}\n        {...props}\n        data-tag\n      />\n    </TagContext.Provider>\n  );\n};\n\ntype TextProps<T extends TgphElement> = Omit<\n  TgphComponentProps<typeof TelegraphText<T>>,\n  \"as\"\n> & {\n  as?: T;\n};\n\nconst Text = <T extends TgphElement>({\n  as = \"span\" as T,\n  ...props\n}: TextProps<T>) => {\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      weight=\"medium\"\n      mr={SPACING.Text[context.size]}\n      {...props}\n    />\n  );\n};\ntype ButtonProps<T extends TgphElement> = TgphComponentProps<\n  typeof TelegraphButton<T>\n>;\n\ntype CopyButtonProps = TgphComponentProps<typeof TelegraphButton.Root> & {\n  textToCopy?: string;\n};\n\nconst CopyButton = ({\n  onClick,\n  textToCopy,\n  className,\n  ...props\n}: CopyButtonProps) => {\n  const context = React.useContext(TagContext);\n\n  const [copied, setCopied] = React.useState(false);\n\n  React.useEffect(() => {\n    if (copied) {\n      const timeout = setTimeout(() => setCopied(false), 2000);\n      return () => clearTimeout(timeout);\n    }\n  }, [copied]);\n\n  return (\n    <AnimatePresence mode=\"wait\" initial={false}>\n      <Tooltip label=\"Copy text\">\n        <TelegraphButton.Root\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n            // Still run onClick incase the consumer wants to do something else\n            onClick?.(event);\n            setCopied(true);\n            textToCopy && navigator.clipboard.writeText(textToCopy);\n            event.currentTarget?.blur();\n          }}\n          size={context.size}\n          color={COLOR.Button[context.variant][context.color]}\n          variant={context.variant}\n          className={clsx(\"overflow-hidden\", className)}\n          roundedTopRight=\"3\"\n          roundedBottomRight=\"3\"\n          roundedTopLeft=\"0\"\n          roundedBottomLeft=\"0\"\n          {...props}\n        >\n          {copied ? (\n            <TelegraphButton.Icon\n              as={motion.span}\n              initial={{ y: \"100%\" }}\n              animate={{ y: 0 }}\n              exit={{ y: \"100%\" }}\n              transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n              icon={Lucide.Check}\n              alt=\"Copied text\"\n              key={\"check icon\"}\n            />\n          ) : (\n            <TelegraphButton.Icon\n              as={motion.span}\n              initial={{ y: \"-100%\" }}\n              animate={{ y: 0 }}\n              exit={{ y: \"-100%\" }}\n              transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n              icon={Lucide.Copy}\n              alt=\"Copy text\"\n              key={\"copy icon\"}\n            />\n          )}\n        </TelegraphButton.Root>\n      </Tooltip>\n    </AnimatePresence>\n  );\n};\n\nconst Button = <T extends TgphElement>({\n  className,\n  ...props\n}: ButtonProps<T>) => {\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    />\n  );\n};\ntype IconProps<T extends TgphElement> = TgphComponentProps<\n  typeof TelegraphIcon<T>\n>;\n\nconst Icon = <T extends TgphElement>({\n  icon,\n  alt,\n  \"aria-hidden\": ariaHidden,\n  className,\n  ...props\n}: IconProps<T>) => {\n  const context = React.useContext(TagContext);\n  const a11yProps = !alt ? { \"aria-hidden\": ariaHidden } : { alt };\n  return (\n    <TelegraphIcon\n      icon={icon}\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      {...a11yProps}\n      {...props}\n    />\n  );\n};\n\ntype DefaultProps<T extends TgphElement> = PolymorphicProps<T> &\n  TgphComponentProps<typeof Root<T>> & {\n    icon?: React.ComponentProps<typeof TelegraphIcon>;\n    onRemove?: () => void;\n  } & ( // Optionally allow textToCopy only when onCopy is defined\n    | {\n        onCopy: () => void;\n        textToCopy?: string;\n      }\n    | {\n        onCopy?: never;\n        textToCopy?: never;\n      }\n  );\n\nconst Default = <T extends TgphElement>({\n  color = \"default\",\n  size = \"1\",\n  variant = \"soft\",\n  icon,\n  onRemove,\n  onCopy,\n  textToCopy,\n  children,\n  ...props\n}: DefaultProps<T>) => {\n  return (\n    <Root color={color} size={size} variant={variant} {...props}>\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 && <CopyButton onClick={onCopy} textToCopy={textToCopy} />}\n    </Root>\n  );\n};\n\nObject.assign(Default, {\n  Root,\n  Button,\n  Text,\n  Icon,\n  CopyButton,\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  CopyButton: typeof CopyButton;\n};\n\nexport { Tag };\n"],"names":["SIZE","SPACING","COLOR","TagContext","React","Root","as","size","color","variant","className","props","jsx","Stack","clsx","Text","context","TelegraphText","CopyButton","onClick","textToCopy","copied","setCopied","timeout","AnimatePresence","Tooltip","TelegraphButton","event","_a","motion","Lucide","Button","Icon","icon","alt","ariaHidden","a11yProps","TelegraphIcon","Default","onRemove","onCopy","children","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    \"0\": \"h-5\",\n    \"1\": \"h-6\",\n    \"2\": \"h-8\",\n  },\n} as const;\n\nexport const SPACING = {\n  Root: {\n    \"0\": \"1\",\n    \"1\": \"2\",\n    \"2\": \"2\",\n  },\n  Text: {\n    \"0\": \"1\",\n    \"1\": \"2\",\n    \"2\": \"2\",\n  },\n} as const;\n\nexport const COLOR = {\n  Root: {\n    solid: {\n      default: \"bg-gray-12\",\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 {\n  PolymorphicProps,\n  PolymorphicPropsWithTgphRef,\n  Required,\n  TgphComponentProps,\n  TgphElement,\n} from \"@telegraph/helpers\";\nimport { Lucide, Icon as TelegraphIcon } from \"@telegraph/icon\";\nimport { Stack } from \"@telegraph/layout\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text as TelegraphText } from \"@telegraph/typography\";\nimport { clsx } from \"clsx\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport React from \"react\";\n\nimport { COLOR, SIZE, SPACING } from \"./Tag.constants\";\n\ntype RootBaseProps = {\n  size?: \"0\" | \"1\" | \"2\";\n  color?: keyof (typeof COLOR.Root)[\"soft\"];\n  variant?: keyof typeof COLOR.Root;\n};\n\ntype RootProps<T extends TgphElement> = PolymorphicPropsWithTgphRef<\n  T,\n  HTMLSpanElement\n> &\n  TgphComponentProps<typeof Stack> &\n  RootBaseProps;\n\nconst TagContext = React.createContext<Required<RootBaseProps>>({\n  size: \"1\",\n  color: \"default\",\n  variant: \"soft\",\n});\n\nconst Root = <T extends TgphElement>({\n  as = \"span\" as T,\n  size = \"1\",\n  color = \"default\",\n  variant = \"soft\",\n  className,\n  ...props\n}: RootProps<T>) => {\n  return (\n    <TagContext.Provider value={{ size, color, variant }}>\n      <Stack\n        as={as}\n        display=\"inline-flex\"\n        align=\"center\"\n        rounded=\"2\"\n        pl={SPACING.Root[size]}\n        className={clsx(SIZE.Root[size], COLOR.Root[variant][color], className)}\n        {...props}\n        data-tag\n      />\n    </TagContext.Provider>\n  );\n};\n\ntype TextProps<T extends TgphElement> = Omit<\n  TgphComponentProps<typeof TelegraphText<T>>,\n  \"as\"\n> & {\n  as?: T;\n};\n\nconst Text = <T extends TgphElement>({\n  as = \"span\" as T,\n  ...props\n}: TextProps<T>) => {\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      weight=\"medium\"\n      mr={SPACING.Text[context.size]}\n      {...props}\n    />\n  );\n};\ntype ButtonProps<T extends TgphElement> = TgphComponentProps<\n  typeof TelegraphButton<T>\n>;\n\ntype CopyButtonProps = TgphComponentProps<typeof TelegraphButton.Root> & {\n  textToCopy?: string;\n};\n\nconst CopyButton = ({\n  onClick,\n  textToCopy,\n  className,\n  ...props\n}: CopyButtonProps) => {\n  const context = React.useContext(TagContext);\n\n  const [copied, setCopied] = React.useState(false);\n\n  React.useEffect(() => {\n    if (copied) {\n      const timeout = setTimeout(() => setCopied(false), 2000);\n      return () => clearTimeout(timeout);\n    }\n  }, [copied]);\n\n  return (\n    <AnimatePresence mode=\"wait\" initial={false}>\n      <Tooltip label=\"Copy text\">\n        <TelegraphButton.Root\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n            // Still run onClick incase the consumer wants to do something else\n            onClick?.(event);\n            setCopied(true);\n            textToCopy && navigator.clipboard.writeText(textToCopy);\n            event.currentTarget?.blur();\n          }}\n          size={context.size}\n          color={COLOR.Button[context.variant][context.color]}\n          variant={context.variant}\n          className={clsx(\"overflow-hidden\", className)}\n          roundedTopRight=\"3\"\n          roundedBottomRight=\"3\"\n          roundedTopLeft=\"0\"\n          roundedBottomLeft=\"0\"\n          {...props}\n        >\n          {copied ? (\n            <TelegraphButton.Icon\n              as={motion.span}\n              initial={{ y: \"100%\" }}\n              animate={{ y: 0 }}\n              exit={{ y: \"100%\" }}\n              transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n              icon={Lucide.Check}\n              alt=\"Copied text\"\n              key={\"check icon\"}\n            />\n          ) : (\n            <TelegraphButton.Icon\n              as={motion.span}\n              initial={{ y: \"-100%\" }}\n              animate={{ y: 0 }}\n              exit={{ y: \"-100%\" }}\n              transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n              icon={Lucide.Copy}\n              alt=\"Copy text\"\n              key={\"copy icon\"}\n            />\n          )}\n        </TelegraphButton.Root>\n      </Tooltip>\n    </AnimatePresence>\n  );\n};\n\nconst Button = <T extends TgphElement>({\n  className,\n  ...props\n}: ButtonProps<T>) => {\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    />\n  );\n};\ntype IconProps<T extends TgphElement> = TgphComponentProps<\n  typeof TelegraphIcon<T>\n>;\n\nconst Icon = <T extends TgphElement>({\n  icon,\n  alt,\n  \"aria-hidden\": ariaHidden,\n  className,\n  ...props\n}: IconProps<T>) => {\n  const context = React.useContext(TagContext);\n  const a11yProps = !alt ? { \"aria-hidden\": ariaHidden } : { alt };\n  return (\n    <TelegraphIcon\n      icon={icon}\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      {...a11yProps}\n      {...props}\n    />\n  );\n};\n\ntype DefaultProps<T extends TgphElement> = PolymorphicProps<T> &\n  TgphComponentProps<typeof Root<T>> & {\n    icon?: React.ComponentProps<typeof TelegraphIcon>;\n    onRemove?: () => void;\n  } & ( // Optionally allow textToCopy only when onCopy is defined\n    | {\n        onCopy: () => void;\n        textToCopy?: string;\n      }\n    | {\n        onCopy?: never;\n        textToCopy?: never;\n      }\n  );\n\nconst Default = <T extends TgphElement>({\n  color = \"default\",\n  size = \"1\",\n  variant = \"soft\",\n  icon,\n  onRemove,\n  onCopy,\n  textToCopy,\n  children,\n  ...props\n}: DefaultProps<T>) => {\n  return (\n    <Root color={color} size={size} variant={variant} {...props}>\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 && <CopyButton onClick={onCopy} textToCopy={textToCopy} />}\n    </Root>\n  );\n};\n\nObject.assign(Default, {\n  Root,\n  Button,\n  Text,\n  Icon,\n  CopyButton,\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  CopyButton: typeof CopyButton;\n};\n\nexport { Tag };\n"],"names":["SIZE","SPACING","COLOR","TagContext","React","Root","as","size","color","variant","className","props","jsx","Stack","clsx","Text","context","TelegraphText","CopyButton","onClick","textToCopy","copied","setCopied","timeout","AnimatePresence","Tooltip","TelegraphButton","event","_a","motion","Lucide","Button","Icon","icon","alt","ariaHidden","a11yProps","TelegraphIcon","Default","onRemove","onCopy","children","Tag"],"mappings":"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"}

package/dist/css/default.css

@@ -1 +1 @@
-.tgph :is(.mr-1){margin-right:var(--tgph-spacing-1)}.tgph :is(.inline-flex){display:inline-flex}.tgph :is(.h-5){height:var(--tgph-spacing-5)}.tgph :is(.h-6){height:var(--tgph-spacing-6)}.tgph :is(.h-8){height:var(--tgph-spacing-8)}.tgph :is(.overflow-hidden){overflow:hidden}.tgph :is(.rounded-bl-0){border-bottom-left-radius:var(--tgph-rounded-0)}.tgph :is(.rounded-tl-0){border-top-left-radius:var(--tgph-rounded-0)}.tgph :is(.bg-accent-3){background-color:var(--tgph-accent-3)}.tgph :is(.bg-accent-9){background-color:var(--tgph-accent-9)}.tgph :is(.bg-blue-3){background-color:var(--tgph-blue-3)}.tgph :is(.bg-blue-9){background-color:var(--tgph-blue-9)}.tgph :is(.bg-gray-3){background-color:var(--tgph-gray-3)}.tgph :is(.bg-gray-9){background-color:var(--tgph-gray-9)}.tgph :is(.bg-green-3){background-color:var(--tgph-green-3)}.tgph :is(.bg-green-9){background-color:var(--tgph-green-9)}.tgph :is(.bg-purple-3){background-color:var(--tgph-purple-3)}.tgph :is(.bg-purple-9){background-color:var(--tgph-purple-9)}.tgph :is(.bg-red-3){background-color:var(--tgph-red-3)}.tgph :is(.bg-red-9){background-color:var(--tgph-red-9)}.tgph :is(.bg-yellow-3){background-color:var(--tgph-yellow-3)}.tgph :is(.bg-yellow-9){background-color:var(--tgph-yellow-9)}.tgph :is(.blur){--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.tgph :is(.transition){transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}
+.tgph :is(.mr-1){margin-right:var(--tgph-spacing-1)}.tgph :is(.inline-flex){display:inline-flex}.tgph :is(.h-5){height:var(--tgph-spacing-5)}.tgph :is(.h-6){height:var(--tgph-spacing-6)}.tgph :is(.h-8){height:var(--tgph-spacing-8)}.tgph :is(.overflow-hidden){overflow:hidden}.tgph :is(.rounded-bl-0){border-bottom-left-radius:var(--tgph-rounded-0)}.tgph :is(.rounded-tl-0){border-top-left-radius:var(--tgph-rounded-0)}.tgph :is(.bg-accent-3){background-color:var(--tgph-accent-3)}.tgph :is(.bg-accent-9){background-color:var(--tgph-accent-9)}.tgph :is(.bg-blue-3){background-color:var(--tgph-blue-3)}.tgph :is(.bg-blue-9){background-color:var(--tgph-blue-9)}.tgph :is(.bg-gray-12){background-color:var(--tgph-gray-12)}.tgph :is(.bg-gray-3){background-color:var(--tgph-gray-3)}.tgph :is(.bg-gray-9){background-color:var(--tgph-gray-9)}.tgph :is(.bg-green-3){background-color:var(--tgph-green-3)}.tgph :is(.bg-green-9){background-color:var(--tgph-green-9)}.tgph :is(.bg-purple-3){background-color:var(--tgph-purple-3)}.tgph :is(.bg-purple-9){background-color:var(--tgph-purple-9)}.tgph :is(.bg-red-3){background-color:var(--tgph-red-3)}.tgph :is(.bg-red-9){background-color:var(--tgph-red-9)}.tgph :is(.bg-yellow-3){background-color:var(--tgph-yellow-3)}.tgph :is(.bg-yellow-9){background-color:var(--tgph-yellow-9)}.tgph :is(.blur){--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.tgph :is(.transition){transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}

package/dist/esm/index.mjs

@@ -27,7 +27,7 @@ const P = {
 }, s = {
   Root: {
     solid: {
-      default: "bg-gray-9",
+      default: "bg-gray-12",
       accent: "bg-accent-9",
       gray: "bg-gray-9",
       red: "bg-red-9",

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    \"0\": \"h-5\",\n    \"1\": \"h-6\",\n    \"2\": \"h-8\",\n  },\n} as const;\n\nexport const SPACING = {\n  Root: {\n    \"0\": \"1\",\n    \"1\": \"2\",\n    \"2\": \"2\",\n  },\n  Text: {\n    \"0\": \"1\",\n    \"1\": \"2\",\n    \"2\": \"2\",\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 {\n  PolymorphicProps,\n  PolymorphicPropsWithTgphRef,\n  Required,\n  TgphComponentProps,\n  TgphElement,\n} from \"@telegraph/helpers\";\nimport { Lucide, Icon as TelegraphIcon } from \"@telegraph/icon\";\nimport { Stack } from \"@telegraph/layout\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text as TelegraphText } from \"@telegraph/typography\";\nimport { clsx } from \"clsx\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport React from \"react\";\n\nimport { COLOR, SIZE, SPACING } from \"./Tag.constants\";\n\ntype RootBaseProps = {\n  size?: \"0\" | \"1\" | \"2\";\n  color?: keyof (typeof COLOR.Root)[\"soft\"];\n  variant?: keyof typeof COLOR.Root;\n};\n\ntype RootProps<T extends TgphElement> = PolymorphicPropsWithTgphRef<\n  T,\n  HTMLSpanElement\n> &\n  TgphComponentProps<typeof Stack> &\n  RootBaseProps;\n\nconst TagContext = React.createContext<Required<RootBaseProps>>({\n  size: \"1\",\n  color: \"default\",\n  variant: \"soft\",\n});\n\nconst Root = <T extends TgphElement>({\n  as = \"span\" as T,\n  size = \"1\",\n  color = \"default\",\n  variant = \"soft\",\n  className,\n  ...props\n}: RootProps<T>) => {\n  return (\n    <TagContext.Provider value={{ size, color, variant }}>\n      <Stack\n        as={as}\n        display=\"inline-flex\"\n        align=\"center\"\n        rounded=\"2\"\n        pl={SPACING.Root[size]}\n        className={clsx(SIZE.Root[size], COLOR.Root[variant][color], className)}\n        {...props}\n        data-tag\n      />\n    </TagContext.Provider>\n  );\n};\n\ntype TextProps<T extends TgphElement> = Omit<\n  TgphComponentProps<typeof TelegraphText<T>>,\n  \"as\"\n> & {\n  as?: T;\n};\n\nconst Text = <T extends TgphElement>({\n  as = \"span\" as T,\n  ...props\n}: TextProps<T>) => {\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      weight=\"medium\"\n      mr={SPACING.Text[context.size]}\n      {...props}\n    />\n  );\n};\ntype ButtonProps<T extends TgphElement> = TgphComponentProps<\n  typeof TelegraphButton<T>\n>;\n\ntype CopyButtonProps = TgphComponentProps<typeof TelegraphButton.Root> & {\n  textToCopy?: string;\n};\n\nconst CopyButton = ({\n  onClick,\n  textToCopy,\n  className,\n  ...props\n}: CopyButtonProps) => {\n  const context = React.useContext(TagContext);\n\n  const [copied, setCopied] = React.useState(false);\n\n  React.useEffect(() => {\n    if (copied) {\n      const timeout = setTimeout(() => setCopied(false), 2000);\n      return () => clearTimeout(timeout);\n    }\n  }, [copied]);\n\n  return (\n    <AnimatePresence mode=\"wait\" initial={false}>\n      <Tooltip label=\"Copy text\">\n        <TelegraphButton.Root\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n            // Still run onClick incase the consumer wants to do something else\n            onClick?.(event);\n            setCopied(true);\n            textToCopy && navigator.clipboard.writeText(textToCopy);\n            event.currentTarget?.blur();\n          }}\n          size={context.size}\n          color={COLOR.Button[context.variant][context.color]}\n          variant={context.variant}\n          className={clsx(\"overflow-hidden\", className)}\n          roundedTopRight=\"3\"\n          roundedBottomRight=\"3\"\n          roundedTopLeft=\"0\"\n          roundedBottomLeft=\"0\"\n          {...props}\n        >\n          {copied ? (\n            <TelegraphButton.Icon\n              as={motion.span}\n              initial={{ y: \"100%\" }}\n              animate={{ y: 0 }}\n              exit={{ y: \"100%\" }}\n              transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n              icon={Lucide.Check}\n              alt=\"Copied text\"\n              key={\"check icon\"}\n            />\n          ) : (\n            <TelegraphButton.Icon\n              as={motion.span}\n              initial={{ y: \"-100%\" }}\n              animate={{ y: 0 }}\n              exit={{ y: \"-100%\" }}\n              transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n              icon={Lucide.Copy}\n              alt=\"Copy text\"\n              key={\"copy icon\"}\n            />\n          )}\n        </TelegraphButton.Root>\n      </Tooltip>\n    </AnimatePresence>\n  );\n};\n\nconst Button = <T extends TgphElement>({\n  className,\n  ...props\n}: ButtonProps<T>) => {\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    />\n  );\n};\ntype IconProps<T extends TgphElement> = TgphComponentProps<\n  typeof TelegraphIcon<T>\n>;\n\nconst Icon = <T extends TgphElement>({\n  icon,\n  alt,\n  \"aria-hidden\": ariaHidden,\n  className,\n  ...props\n}: IconProps<T>) => {\n  const context = React.useContext(TagContext);\n  const a11yProps = !alt ? { \"aria-hidden\": ariaHidden } : { alt };\n  return (\n    <TelegraphIcon\n      icon={icon}\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      {...a11yProps}\n      {...props}\n    />\n  );\n};\n\ntype DefaultProps<T extends TgphElement> = PolymorphicProps<T> &\n  TgphComponentProps<typeof Root<T>> & {\n    icon?: React.ComponentProps<typeof TelegraphIcon>;\n    onRemove?: () => void;\n  } & ( // Optionally allow textToCopy only when onCopy is defined\n    | {\n        onCopy: () => void;\n        textToCopy?: string;\n      }\n    | {\n        onCopy?: never;\n        textToCopy?: never;\n      }\n  );\n\nconst Default = <T extends TgphElement>({\n  color = \"default\",\n  size = \"1\",\n  variant = \"soft\",\n  icon,\n  onRemove,\n  onCopy,\n  textToCopy,\n  children,\n  ...props\n}: DefaultProps<T>) => {\n  return (\n    <Root color={color} size={size} variant={variant} {...props}>\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 && <CopyButton onClick={onCopy} textToCopy={textToCopy} />}\n    </Root>\n  );\n};\n\nObject.assign(Default, {\n  Root,\n  Button,\n  Text,\n  Icon,\n  CopyButton,\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  CopyButton: typeof CopyButton;\n};\n\nexport { Tag };\n"],"names":["SIZE","SPACING","COLOR","TagContext","React","Root","as","size","color","variant","className","props","jsx","Stack","clsx","Text","context","TelegraphText","CopyButton","onClick","textToCopy","copied","setCopied","timeout","AnimatePresence","Tooltip","TelegraphButton","event","_a","motion","Lucide","Button","Icon","icon","alt","ariaHidden","a11yProps","TelegraphIcon","Default","onRemove","onCopy","children","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    \"0\": \"h-5\",\n    \"1\": \"h-6\",\n    \"2\": \"h-8\",\n  },\n} as const;\n\nexport const SPACING = {\n  Root: {\n    \"0\": \"1\",\n    \"1\": \"2\",\n    \"2\": \"2\",\n  },\n  Text: {\n    \"0\": \"1\",\n    \"1\": \"2\",\n    \"2\": \"2\",\n  },\n} as const;\n\nexport const COLOR = {\n  Root: {\n    solid: {\n      default: \"bg-gray-12\",\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 {\n  PolymorphicProps,\n  PolymorphicPropsWithTgphRef,\n  Required,\n  TgphComponentProps,\n  TgphElement,\n} from \"@telegraph/helpers\";\nimport { Lucide, Icon as TelegraphIcon } from \"@telegraph/icon\";\nimport { Stack } from \"@telegraph/layout\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text as TelegraphText } from \"@telegraph/typography\";\nimport { clsx } from \"clsx\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport React from \"react\";\n\nimport { COLOR, SIZE, SPACING } from \"./Tag.constants\";\n\ntype RootBaseProps = {\n  size?: \"0\" | \"1\" | \"2\";\n  color?: keyof (typeof COLOR.Root)[\"soft\"];\n  variant?: keyof typeof COLOR.Root;\n};\n\ntype RootProps<T extends TgphElement> = PolymorphicPropsWithTgphRef<\n  T,\n  HTMLSpanElement\n> &\n  TgphComponentProps<typeof Stack> &\n  RootBaseProps;\n\nconst TagContext = React.createContext<Required<RootBaseProps>>({\n  size: \"1\",\n  color: \"default\",\n  variant: \"soft\",\n});\n\nconst Root = <T extends TgphElement>({\n  as = \"span\" as T,\n  size = \"1\",\n  color = \"default\",\n  variant = \"soft\",\n  className,\n  ...props\n}: RootProps<T>) => {\n  return (\n    <TagContext.Provider value={{ size, color, variant }}>\n      <Stack\n        as={as}\n        display=\"inline-flex\"\n        align=\"center\"\n        rounded=\"2\"\n        pl={SPACING.Root[size]}\n        className={clsx(SIZE.Root[size], COLOR.Root[variant][color], className)}\n        {...props}\n        data-tag\n      />\n    </TagContext.Provider>\n  );\n};\n\ntype TextProps<T extends TgphElement> = Omit<\n  TgphComponentProps<typeof TelegraphText<T>>,\n  \"as\"\n> & {\n  as?: T;\n};\n\nconst Text = <T extends TgphElement>({\n  as = \"span\" as T,\n  ...props\n}: TextProps<T>) => {\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      weight=\"medium\"\n      mr={SPACING.Text[context.size]}\n      {...props}\n    />\n  );\n};\ntype ButtonProps<T extends TgphElement> = TgphComponentProps<\n  typeof TelegraphButton<T>\n>;\n\ntype CopyButtonProps = TgphComponentProps<typeof TelegraphButton.Root> & {\n  textToCopy?: string;\n};\n\nconst CopyButton = ({\n  onClick,\n  textToCopy,\n  className,\n  ...props\n}: CopyButtonProps) => {\n  const context = React.useContext(TagContext);\n\n  const [copied, setCopied] = React.useState(false);\n\n  React.useEffect(() => {\n    if (copied) {\n      const timeout = setTimeout(() => setCopied(false), 2000);\n      return () => clearTimeout(timeout);\n    }\n  }, [copied]);\n\n  return (\n    <AnimatePresence mode=\"wait\" initial={false}>\n      <Tooltip label=\"Copy text\">\n        <TelegraphButton.Root\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n            // Still run onClick incase the consumer wants to do something else\n            onClick?.(event);\n            setCopied(true);\n            textToCopy && navigator.clipboard.writeText(textToCopy);\n            event.currentTarget?.blur();\n          }}\n          size={context.size}\n          color={COLOR.Button[context.variant][context.color]}\n          variant={context.variant}\n          className={clsx(\"overflow-hidden\", className)}\n          roundedTopRight=\"3\"\n          roundedBottomRight=\"3\"\n          roundedTopLeft=\"0\"\n          roundedBottomLeft=\"0\"\n          {...props}\n        >\n          {copied ? (\n            <TelegraphButton.Icon\n              as={motion.span}\n              initial={{ y: \"100%\" }}\n              animate={{ y: 0 }}\n              exit={{ y: \"100%\" }}\n              transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n              icon={Lucide.Check}\n              alt=\"Copied text\"\n              key={\"check icon\"}\n            />\n          ) : (\n            <TelegraphButton.Icon\n              as={motion.span}\n              initial={{ y: \"-100%\" }}\n              animate={{ y: 0 }}\n              exit={{ y: \"-100%\" }}\n              transition={{ duration: 0.2, type: \"spring\", bounce: 0 }}\n              icon={Lucide.Copy}\n              alt=\"Copy text\"\n              key={\"copy icon\"}\n            />\n          )}\n        </TelegraphButton.Root>\n      </Tooltip>\n    </AnimatePresence>\n  );\n};\n\nconst Button = <T extends TgphElement>({\n  className,\n  ...props\n}: ButtonProps<T>) => {\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    />\n  );\n};\ntype IconProps<T extends TgphElement> = TgphComponentProps<\n  typeof TelegraphIcon<T>\n>;\n\nconst Icon = <T extends TgphElement>({\n  icon,\n  alt,\n  \"aria-hidden\": ariaHidden,\n  className,\n  ...props\n}: IconProps<T>) => {\n  const context = React.useContext(TagContext);\n  const a11yProps = !alt ? { \"aria-hidden\": ariaHidden } : { alt };\n  return (\n    <TelegraphIcon\n      icon={icon}\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      {...a11yProps}\n      {...props}\n    />\n  );\n};\n\ntype DefaultProps<T extends TgphElement> = PolymorphicProps<T> &\n  TgphComponentProps<typeof Root<T>> & {\n    icon?: React.ComponentProps<typeof TelegraphIcon>;\n    onRemove?: () => void;\n  } & ( // Optionally allow textToCopy only when onCopy is defined\n    | {\n        onCopy: () => void;\n        textToCopy?: string;\n      }\n    | {\n        onCopy?: never;\n        textToCopy?: never;\n      }\n  );\n\nconst Default = <T extends TgphElement>({\n  color = \"default\",\n  size = \"1\",\n  variant = \"soft\",\n  icon,\n  onRemove,\n  onCopy,\n  textToCopy,\n  children,\n  ...props\n}: DefaultProps<T>) => {\n  return (\n    <Root color={color} size={size} variant={variant} {...props}>\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 && <CopyButton onClick={onCopy} textToCopy={textToCopy} />}\n    </Root>\n  );\n};\n\nObject.assign(Default, {\n  Root,\n  Button,\n  Text,\n  Icon,\n  CopyButton,\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  CopyButton: typeof CopyButton;\n};\n\nexport { Tag };\n"],"names":["SIZE","SPACING","COLOR","TagContext","React","Root","as","size","color","variant","className","props","jsx","Stack","clsx","Text","context","TelegraphText","CopyButton","onClick","textToCopy","copied","setCopied","timeout","AnimatePresence","Tooltip","TelegraphButton","event","_a","motion","Lucide","Button","Icon","icon","alt","ariaHidden","a11yProps","TelegraphIcon","Default","onRemove","onCopy","children","Tag"],"mappings":";;;;;;;;;AAAO,MAAMA,IAAO;AAAA,EAClB,MAAM;AAAA,IACJ,GAAK;AAAA,IACL,GAAK;AAAA,IACL,GAAK;AAAA,EACP;AACF,GAEaC,IAAU;AAAA,EACrB,MAAM;AAAA,IACJ,GAAK;AAAA,IACL,GAAK;AAAA,IACL,GAAK;AAAA,EACP;AAAA,EACA,MAAM;AAAA,IACJ,GAAK;AAAA,IACL,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,GC/EMC,IAAaC,EAAM,cAAuC;AAAA,EAC9D,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AACX,CAAC,GAEKC,IAAO,CAAwB;AAAA,EACnC,IAAAC,IAAK;AAAA,EACL,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,GAAGC;AACL,MAEI,gBAAAC,EAACT,EAAW,UAAX,EAAoB,OAAO,EAAE,MAAAI,GAAM,OAAAC,GAAO,SAAAC,KACzC,UAAA,gBAAAG;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,IAAAP;AAAA,IACA,SAAQ;AAAA,IACR,OAAM;AAAA,IACN,SAAQ;AAAA,IACR,IAAIL,EAAQ,KAAKM,CAAI;AAAA,IACrB,WAAWO,EAAKd,EAAK,KAAKO,CAAI,GAAGL,EAAM,KAAKO,CAAO,EAAED,CAAK,GAAGE,CAAS;AAAA,IACrE,GAAGC;AAAA,IACJ,YAAQ;AAAA,EAAA;AAEZ,EAAA,CAAA,GAWEI,IAAO,CAAwB;AAAA,EACnC,IAAAT,IAAK;AAAA,EACL,GAAGK;AACL,MAAoB;AACZ,QAAAK,IAAUZ,EAAM,WAAWD,CAAU;AAEzC,SAAA,gBAAAS;AAAA,IAACK;AAAAA,IAAA;AAAA,MACC,IAAAX;AAAA,MACA,MAAMU,EAAQ;AAAA,MACd,OAAOd,EAAM,KAAKc,EAAQ,OAAO,EAAEA,EAAQ,KAAK;AAAA,MAChD,QAAO;AAAA,MACP,IAAIf,EAAQ,KAAKe,EAAQ,IAAI;AAAA,MAC5B,GAAGL;AAAA,IAAA;AAAA,EAAA;AAGV,GASMO,IAAa,CAAC;AAAA,EAClB,SAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAV;AAAA,EACA,GAAGC;AACL,MAAuB;AACf,QAAAK,IAAUZ,EAAM,WAAWD,CAAU,GAErC,CAACkB,GAAQC,CAAS,IAAIlB,EAAM,SAAS,EAAK;AAEhD,SAAAA,EAAM,UAAU,MAAM;AACpB,QAAIiB,GAAQ;AACV,YAAME,IAAU,WAAW,MAAMD,EAAU,EAAK,GAAG,GAAI;AAChD,aAAA,MAAM,aAAaC,CAAO;AAAA,IACnC;AAAA,EAAA,GACC,CAACF,CAAM,CAAC,GAGT,gBAAAT,EAACY,KAAgB,MAAK,QAAO,SAAS,IACpC,UAAA,gBAAAZ,EAACa,GAAQ,EAAA,OAAM,aACb,UAAA,gBAAAb;AAAA,IAACc,EAAgB;AAAA,IAAhB;AAAA,MACC,SAAS,CAACC,MAA+C;;AAEvD,QAAAR,KAAA,QAAAA,EAAUQ,IACVL,EAAU,EAAI,GACAF,KAAA,UAAU,UAAU,UAAUA,CAAU,IACtDQ,IAAAD,EAAM,kBAAN,QAAAC,EAAqB;AAAA,MACvB;AAAA,MACA,MAAMZ,EAAQ;AAAA,MACd,OAAOd,EAAM,OAAOc,EAAQ,OAAO,EAAEA,EAAQ,KAAK;AAAA,MAClD,SAASA,EAAQ;AAAA,MACjB,WAAWF,EAAK,mBAAmBJ,CAAS;AAAA,MAC5C,iBAAgB;AAAA,MAChB,oBAAmB;AAAA,MACnB,gBAAe;AAAA,MACf,mBAAkB;AAAA,MACjB,GAAGC;AAAA,MAEH,UACCU,IAAA,gBAAAT;AAAA,QAACc,EAAgB;AAAA,QAAhB;AAAA,UACC,IAAIG,EAAO;AAAA,UACX,SAAS,EAAE,GAAG,OAAO;AAAA,UACrB,SAAS,EAAE,GAAG,EAAE;AAAA,UAChB,MAAM,EAAE,GAAG,OAAO;AAAA,UAClB,YAAY,EAAE,UAAU,KAAK,MAAM,UAAU,QAAQ,EAAE;AAAA,UACvD,MAAMC,EAAO;AAAA,UACb,KAAI;AAAA,QAAA;AAAA,QACC;AAAA,MAAA,IAGP,gBAAAlB;AAAA,QAACc,EAAgB;AAAA,QAAhB;AAAA,UACC,IAAIG,EAAO;AAAA,UACX,SAAS,EAAE,GAAG,QAAQ;AAAA,UACtB,SAAS,EAAE,GAAG,EAAE;AAAA,UAChB,MAAM,EAAE,GAAG,QAAQ;AAAA,UACnB,YAAY,EAAE,UAAU,KAAK,MAAM,UAAU,QAAQ,EAAE;AAAA,UACvD,MAAMC,EAAO;AAAA,UACb,KAAI;AAAA,QAAA;AAAA,QACC;AAAA,MACP;AAAA,IAAA;AAAA,EAAA,EAGN,CAAA,EACF,CAAA;AAEJ,GAEMC,IAAS,CAAwB;AAAA,EACrC,WAAArB;AAAA,EACA,GAAGC;AACL,MAAsB;AACd,QAAAK,IAAUZ,EAAM,WAAWD,CAAU;AAEzC,SAAA,gBAAAS;AAAA,IAACc;AAAAA,IAAA;AAAA,MACC,MAAMV,EAAQ;AAAA,MACd,OAAOd,EAAM,OAAOc,EAAQ,OAAO,EAAEA,EAAQ,KAAK;AAAA,MAClD,SAASA,EAAQ;AAAA,MACjB,MAAM,EAAE,MAAMc,EAAO,GAAG,KAAK,QAAQ;AAAA,MACrC,WAAWhB,EAAK,6BAA6BJ,CAAS;AAAA,MACrD,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV,GAKMqB,IAAO,CAAwB;AAAA,EACnC,MAAAC;AAAA,EACA,KAAAC;AAAA,EACA,eAAeC;AAAA,EACf,WAAAzB;AAAA,EACA,GAAGC;AACL,MAAoB;AACZ,QAAAK,IAAUZ,EAAM,WAAWD,CAAU,GACrCiC,IAAaF,IAAsC,EAAE,KAAAA,MAAlC,EAAE,eAAeC,EAAW;AAEnD,SAAA,gBAAAvB;AAAA,IAACyB;AAAAA,IAAA;AAAA,MACC,MAAAJ;AAAA,MACA,MAAMjB,EAAQ;AAAA,MACd,OAAOd,EAAM,KAAKc,EAAQ,OAAO,EAAEA,EAAQ,KAAK;AAAA,MAChD,WAAWF,EAAK,kCAAkCJ,CAAS;AAAA,MAC1D,GAAG0B;AAAA,MACH,GAAGzB;AAAA,IAAA;AAAA,EAAA;AAGV,GAiBM2B,IAAU,CAAwB;AAAA,EACtC,OAAA9B,IAAQ;AAAA,EACR,MAAAD,IAAO;AAAA,EACP,SAAAE,IAAU;AAAA,EACV,MAAAwB;AAAA,EACA,UAAAM;AAAA,EACA,QAAAC;AAAA,EACA,YAAApB;AAAA,EACA,UAAAqB;AAAA,EACA,GAAG9B;AACL,wBAEKN,GAAK,EAAA,OAAAG,GAAc,MAAAD,GAAY,SAAAE,GAAmB,GAAGE,GACnD,UAAA;AAAA,EAAQsB,KAAA,gBAAArB,EAACoB,GAAM,EAAA,GAAGC,EAAM,CAAA;AAAA,EACxB,gBAAArB,EAAAG,GAAA,EAAK,IAAG,QAAQ,UAAA0B,EAAS,CAAA;AAAA,EACzBF,KACC,gBAAA3B,EAACmB,GAAO,EAAA,SAASQ,GAAU,MAAM,EAAE,MAAMT,EAAO,GAAG,KAAK,SAAY,EAAA,CAAA;AAAA,EAErEU,KAAU,gBAAA5B,EAACM,GAAW,EAAA,SAASsB,GAAQ,YAAApB,GAAwB;AAClE,EAAA,CAAA;AAIJ,OAAO,OAAOkB,GAAS;AAAA,EACrB,MAAAjC;AAAA,EACA,QAAA0B;AAAA,EACA,MAAAhB;AAAA,EACA,MAAAiB;AAAA,EACA,YAAAd;AACF,CAAC;AAED,MAAMwB,IAAMJ;"}

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

@@ -20,7 +20,7 @@ export declare const SPACING: {
 export declare const COLOR: {
     readonly Root: {
         readonly solid: {
-            readonly default: "bg-gray-9";
+            readonly default: "bg-gray-12";
             readonly accent: "bg-accent-9";
             readonly gray: "bg-gray-9";
             readonly red: "bg-red-9";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telegraph/tag",
-  "version": "0.0.50",
+  "version": "0.0.52",
   "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/tag",
   "author": "@knocklabs",
   "license": "MIT",
@@ -31,13 +31,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@telegraph/button": "^0.0.49",
+    "@telegraph/button": "^0.0.50",
     "@telegraph/compose-refs": "^0.0.2",
     "@telegraph/helpers": "^0.0.7",
-    "@telegraph/icon": "^0.0.31",
-    "@telegraph/layout": "^0.0.29",
-    "@telegraph/tooltip": "^0.0.23",
-    "@telegraph/typography": "^0.0.29",
+    "@telegraph/icon": "^0.0.32",
+    "@telegraph/layout": "^0.0.30",
+    "@telegraph/tooltip": "^0.0.24",
+    "@telegraph/typography": "^0.0.30",
     "clsx": "^2.1.1",
     "framer-motion": "^11.1.9"
   },
@@ -53,7 +53,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.3.1",
     "typescript": "^5.5.4",
-    "vite": "^5.3.5"
+    "vite": "^5.3.6"
   },
   "peerDependencies": {
     "react": "^18.2.0",