@telegraph/tag 0.0.60 → 0.0.61

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @telegraph/tag
 
+## 0.0.61
+
+### Patch Changes
+
+- [#367](https://github.com/knocklabs/telegraph/pull/367) [`a748be4`](https://github.com/knocklabs/telegraph/commit/a748be4d48b4e26908deaa120389598e185007c6) Thanks [@kylemcd](https://github.com/kylemcd)! - style engine migration
+
+- [#368](https://github.com/knocklabs/telegraph/pull/368) [`22ac9d0`](https://github.com/knocklabs/telegraph/commit/22ac9d0ff28ef0966edd31a4016c76d8a7ae91ad) Thanks [@kylemcd](https://github.com/kylemcd)! - motion updates
+
+- [#366](https://github.com/knocklabs/telegraph/pull/366) [`6cf176f`](https://github.com/knocklabs/telegraph/commit/6cf176fc3272d89d725951b5024dd0db4cf9a4e8) Thanks [@kylemcd](https://github.com/kylemcd)! - style engine migration
+
+- Updated dependencies [[`a748be4`](https://github.com/knocklabs/telegraph/commit/a748be4d48b4e26908deaa120389598e185007c6), [`22ac9d0`](https://github.com/knocklabs/telegraph/commit/22ac9d0ff28ef0966edd31a4016c76d8a7ae91ad), [`8fdf776`](https://github.com/knocklabs/telegraph/commit/8fdf77633d6991014ffa55b32b1ba45ef124f917), [`6cf176f`](https://github.com/knocklabs/telegraph/commit/6cf176fc3272d89d725951b5024dd0db4cf9a4e8), [`6cf176f`](https://github.com/knocklabs/telegraph/commit/6cf176fc3272d89d725951b5024dd0db4cf9a4e8), [`bc6c1f4`](https://github.com/knocklabs/telegraph/commit/bc6c1f4223380b310487d72dc4153e499f07fefe)]:
+  - @telegraph/typography@0.1.3
+  - @telegraph/tooltip@0.0.30
+  - @telegraph/button@0.0.57
+  - @telegraph/layout@0.1.3
+  - @telegraph/motion@0.0.2
+  - @telegraph/icon@0.0.37
+
 ## 0.0.60
 
 ### Patch Changes

package/dist/cjs/default.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=default.js.map

package/dist/cjs/default.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"default.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/cjs/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),y=require("@telegraph/button"),u=require("@telegraph/icon"),C=require("@telegraph/layout"),B=require("@telegraph/tooltip"),q=require("@telegraph/typography"),x=require("clsx"),b=require("framer-motion"),i=require("react"),z={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:"default",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=i.createContext({size:"1",color:"default",variant:"soft"}),f=({as:n="span",size:t="1",color:o="default",variant:a="soft",className:e,...l})=>r.jsx(g.Provider,{value:{size:t,color:o,variant:a},children:r.jsx(C.Stack,{as:n,display:"inline-flex",align:"center",rounded:"2",pl:w.Root[t],className:x.clsx(z.Root[t],d.Root[a][o],e),...l,"data-tag":!0})}),h=({as:n="span",maxW:t="40",style:o,...a})=>{const e=i.useContext(g);return r.jsx(q.Text,{as:n,size:e.size,color:d.Text[e.variant][e.color],weight:"medium",mr:w.Text[e.size],maxW:t,style:{whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden",...o},...a})},m=({onClick:n,textToCopy:t,className:o,...a})=>{const e=i.useContext(g),[l,c]=i.useState(!1);return i.useEffect(()=>{if(l){const s=setTimeout(()=>c(!1),2e3);return()=>clearTimeout(s)}},[l]),r.jsx(b.AnimatePresence,{mode:"wait",initial:!1,children:r.jsx(B.Tooltip,{label:"Copy text",children:r.jsx(y.Button.Root,{onClick:s=>{var p;n==null||n(s),c(!0),t&&navigator.clipboard.writeText(t),(p=s.currentTarget)==null||p.blur()},size:e.size,color:d.Button[e.variant][e.color],variant:e.variant,className:x.clsx("overflow-hidden",o),roundedTopRight:"3",roundedBottomRight:"3",roundedTopLeft:"0",roundedBottomLeft:"0",...a,children:l?r.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"):r.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:n,...t})=>{const o=i.useContext(g);return r.jsx(y.Button,{size:o.size,color:d.Button[o.variant][o.color],variant:o.variant,icon:{icon:u.Lucide.X,alt:"close"},className:x.clsx("rounded-tl-0 rounded-bl-0",n),...t})},T=({icon:n,alt:t,"aria-hidden":o,className:a,...e})=>{const l=i.useContext(g),c=t?{alt:t}:{"aria-hidden":o};return r.jsx(u.Icon,{icon:n,size:l.size,color:d.Icon[l.variant][l.color],className:x.clsx("rounded-tl-0 rounded-bl-0 mr-1",a),...c,...e})},v=({color:n="default",size:t="1",variant:o="soft",icon:a,onRemove:e,onCopy:l,textToCopy:c,textProps:s={maxW:"40"},children:p,...R})=>r.jsxs(f,{color:n,size:t,variant:o,...R,children:[a&&r.jsx(T,{...a}),r.jsx(h,{as:"span",...s,children:p}),e&&r.jsx(j,{onClick:e,icon:{icon:u.Lucide.X,alt:"Remove"}}),l&&r.jsx(m,{onClick:l,textToCopy:c})]});Object.assign(v,{Root:f,Button:j,Text:h,Icon:T,CopyButton:m});const I=v;exports.Tag=I;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),g=require("@telegraph/button"),u=require("@telegraph/icon"),v=require("@telegraph/layout"),y=require("@telegraph/motion"),B=require("@telegraph/tooltip"),C=require("@telegraph/typography"),L=require("clsx"),l=require("react"),z={Root:{0:{h:"5"},1:{h:"6"},2:{h:"8"}}},h={Root:{0:"1",1:"2",2:"2"},Text:{0:"1",1:"2",2:"2"}},s={Root:{solid:{default:"gray-12",accent:"accent-9",gray:"gray-9",red:"red-9",blue:"blue-9",green:"green-9",yellow:"yellow-9",purple:"purple-9"},soft:{default:"gray-3",accent:"accent-3",gray:"gray-3",red:"red-3",blue:"blue-3",green:"green-3",yellow:"yellow-3",purple:"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:"default",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=l.createContext({size:"1",color:"default",variant:"soft"}),f=({as:n="span",size:t="1",color:i="default",variant:o="soft",className:e,...a})=>r.jsx(d.Provider,{value:{size:t,color:i,variant:o},children:r.jsx(v.Stack,{as:n,align:"center",rounded:"2",display:"inline-flex",pl:h.Root[t],backgroundColor:s.Root[o][i],h:z.Root[t].h,className:L.clsx("tgph-tag",e),...a,"data-tag":!0})}),x=({as:n="span",maxW:t="40",style:i,...o})=>{const e=l.useContext(d);return r.jsx(C.Text,{as:n,size:e.size,color:s.Text[e.variant][e.color],weight:"medium",mr:h.Text[e.size],maxW:t,overflow:"hidden",style:{whiteSpace:"nowrap",textOverflow:"ellipsis",...i},...o})},w=({onClick:n,textToCopy:t,...i})=>{const o=l.useContext(d),[e,a]=l.useState(!1);return l.useEffect(()=>{if(e){const c=setTimeout(()=>a(!1),2e3);return()=>clearTimeout(c)}},[e]),r.jsx(B.Tooltip,{label:"Copy text",children:r.jsxs(g.Button.Root,{onClick:c=>{var p;n==null||n(c),a(!0),t&&navigator.clipboard.writeText(t),(p=c.currentTarget)==null||p.blur()},size:o.size,color:s.Button[o.variant][o.color],variant:o.variant,roundedTopRight:"3",roundedBottomRight:"3",roundedTopLeft:"0",roundedBottomLeft:"0",position:"relative",overflow:"hidden",p:"2",...i,children:[r.jsx(g.Button.Icon,{as:y.motion.span,initializeWithAnimation:!1,animate:{y:e?0:"150%",opacity:1},transition:{duration:150,type:"spring"},icon:u.Lucide.Check,alt:"Copied text","aria-hidden":!e}),r.jsx(g.Button.Icon,{as:y.motion.span,initializeWithAnimation:!1,animate:{y:e?"-150%":0,opacity:1},transition:{duration:150,type:"spring"},icon:u.Lucide.Copy,position:"absolute",alt:"Copy text","aria-hidden":e})]})})},m=({...n})=>{const t=l.useContext(d);return r.jsx(g.Button,{size:t.size,color:s.Button[t.variant][t.color],variant:t.variant,icon:{icon:u.Lucide.X,alt:"close"},roundedTopRight:"3",roundedBottomRight:"3",roundedTopLeft:"0",roundedBottomLeft:"0",...n})},b=({icon:n,alt:t,"aria-hidden":i,...o})=>{const e=l.useContext(d),a=t?{alt:t}:{"aria-hidden":i};return r.jsx(u.Icon,{icon:n,size:e.size,color:s.Icon[e.variant][e.color],mr:"1",roundedTopRight:"3",roundedBottomRight:"3",roundedTopLeft:"0",roundedBottomLeft:"0",...a,...o})},T=({color:n="default",size:t="1",variant:i="soft",icon:o,onRemove:e,onCopy:a,textToCopy:c,textProps:p={maxW:"40"},children:j,...R})=>r.jsxs(f,{color:n,size:t,variant:i,...R,children:[o&&r.jsx(b,{...o}),r.jsx(x,{as:"span",...p,children:j}),e&&r.jsx(m,{onClick:e,icon:{icon:u.Lucide.X,alt:"Remove"}}),a&&r.jsx(w,{onClick:a,textToCopy:c})]});Object.assign(T,{Root:f,Button:m,Text:x,Icon:b,CopyButton:w});const q=T;exports.Tag=q;
 //# 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-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: \"default\",\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  maxW = \"40\",\n  style,\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      maxW={maxW}\n      style={{\n        whiteSpace: \"nowrap\",\n        textOverflow: \"ellipsis\",\n        overflow: \"hidden\",\n        ...style,\n      }}\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    textProps?: React.ComponentProps<typeof Text>;\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  textProps = { maxW: \"40\" },\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\" {...textProps}>\n        {children}\n      </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","maxW","style","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","textProps","children","Tag"],"mappings":"mVAAaA,EAAO,CAClB,KAAM,CACJ,EAAK,MACL,EAAK,MACL,EAAK,KACP,CACF,EAEaC,EAAU,CACrB,KAAM,CACJ,EAAK,IACL,EAAK,IACL,EAAK,GACP,EACA,KAAM,CACJ,EAAK,IACL,EAAK,IACL,EAAK,GACP,CACF,EAEaC,EAAQ,CACnB,KAAM,CACJ,MAAO,CACL,QAAS,aACT,OAAQ,cACR,KAAM,YACN,IAAK,WACL,KAAM,YACN,MAAO,aACP,OAAQ,cACR,OAAQ,aACV,EACA,KAAM,CACJ,QAAS,YACT,OAAQ,cACR,KAAM,YACN,IAAK,WACL,KAAM,YACN,MAAO,aACP,OAAQ,cACR,OAAQ,aACV,CACF,EACA,KAAM,CACJ,MAAO,CACL,QAAS,QACT,KAAM,QACN,IAAK,QACL,OAAQ,QACR,KAAM,QACN,MAAO,QACP,OAAQ,QACR,OAAQ,OACV,EACA,KAAM,CACJ,QAAS,UACT,KAAM,OACN,OAAQ,SACR,IAAK,MACL,KAAM,OACN,MAAO,QACP,OAAQ,SACR,OAAQ,QACV,CACF,EACA,KAAM,CACJ,MAAO,CACL,QAAS,QACT,KAAM,QACN,OAAQ,QACR,IAAK,QACL,KAAM,QACN,MAAO,QACP,OAAQ,QACR,OAAQ,OACV,EACA,KAAM,CACJ,QAAS,UACT,KAAM,OACN,OAAQ,SACR,IAAK,MACL,KAAM,OACN,MAAO,QACP,OAAQ,SACR,OAAQ,QACV,CACF,EACA,OAAQ,CACN,MAAO,CACL,QAAS,UACT,KAAM,OACN,OAAQ,SACR,IAAK,MACL,KAAM,OACN,MAAO,QACP,OAAQ,SACR,OAAQ,QACV,EACA,KAAM,CACJ,QAAS,OACT,KAAM,OACN,OAAQ,SACR,IAAK,MACL,KAAM,OACN,MAAO,QACP,OAAQ,SACR,OAAQ,QACV,CACF,CACF,EC/EMC,EAAaC,EAAM,cAAuC,CAC9D,KAAM,IACN,MAAO,UACP,QAAS,MACX,CAAC,EAEKC,EAAO,CAAwB,CACnC,GAAAC,EAAK,OACL,KAAAC,EAAO,IACP,MAAAC,EAAQ,UACR,QAAAC,EAAU,OACV,UAAAC,EACA,GAAGC,CACL,IAEIC,MAACT,EAAW,SAAX,CAAoB,MAAO,CAAE,KAAAI,EAAM,MAAAC,EAAO,QAAAC,GACzC,SAAAG,EAAA,IAACC,EAAA,MAAA,CACC,GAAAP,EACA,QAAQ,cACR,MAAM,SACN,QAAQ,IACR,GAAIL,EAAQ,KAAKM,CAAI,EACrB,UAAWO,EAAA,KAAKd,EAAK,KAAKO,CAAI,EAAGL,EAAM,KAAKO,CAAO,EAAED,CAAK,EAAGE,CAAS,EACrE,GAAGC,EACJ,WAAQ,EAAA,CAEZ,CAAA,CAAA,EAWEI,EAAO,CAAwB,CACnC,GAAAT,EAAK,OACL,KAAAU,EAAO,KACP,MAAAC,EACA,GAAGN,CACL,IAAoB,CACZ,MAAAO,EAAUd,EAAM,WAAWD,CAAU,EAEzC,OAAAS,EAAA,IAACO,EAAA,KAAA,CACC,GAAAb,EACA,KAAMY,EAAQ,KACd,MAAOhB,EAAM,KAAKgB,EAAQ,OAAO,EAAEA,EAAQ,KAAK,EAChD,OAAO,SACP,GAAIjB,EAAQ,KAAKiB,EAAQ,IAAI,EAC7B,KAAAF,EACA,MAAO,CACL,WAAY,SACZ,aAAc,WACd,SAAU,SACV,GAAGC,CACL,EACC,GAAGN,CAAA,CAAA,CAGV,EASMS,EAAa,CAAC,CAClB,QAAAC,EACA,WAAAC,EACA,UAAAZ,EACA,GAAGC,CACL,IAAuB,CACf,MAAAO,EAAUd,EAAM,WAAWD,CAAU,EAErC,CAACoB,EAAQC,CAAS,EAAIpB,EAAM,SAAS,EAAK,EAEhD,OAAAA,EAAM,UAAU,IAAM,CACpB,GAAImB,EAAQ,CACV,MAAME,EAAU,WAAW,IAAMD,EAAU,EAAK,EAAG,GAAI,EAChD,MAAA,IAAM,aAAaC,CAAO,CACnC,CAAA,EACC,CAACF,CAAM,CAAC,EAGTX,EAAA,IAACc,mBAAgB,KAAK,OAAO,QAAS,GACpC,SAAAd,EAAAA,IAACe,EAAAA,QAAQ,CAAA,MAAM,YACb,SAAAf,EAAA,IAACgB,EAAAA,OAAgB,KAAhB,CACC,QAAUC,GAA+C,OAEvDR,GAAA,MAAAA,EAAUQ,GACVL,EAAU,EAAI,EACAF,GAAA,UAAU,UAAU,UAAUA,CAAU,GACtDQ,EAAAD,EAAM,gBAAN,MAAAC,EAAqB,MACvB,EACA,KAAMZ,EAAQ,KACd,MAAOhB,EAAM,OAAOgB,EAAQ,OAAO,EAAEA,EAAQ,KAAK,EAClD,QAASA,EAAQ,QACjB,UAAWJ,EAAAA,KAAK,kBAAmBJ,CAAS,EAC5C,gBAAgB,IAChB,mBAAmB,IACnB,eAAe,IACf,kBAAkB,IACjB,GAAGC,EAEH,SACCY,EAAAX,EAAA,IAACgB,EAAAA,OAAgB,KAAhB,CACC,GAAIG,EAAO,OAAA,KACX,QAAS,CAAE,EAAG,MAAO,EACrB,QAAS,CAAE,EAAG,CAAE,EAChB,KAAM,CAAE,EAAG,MAAO,EAClB,WAAY,CAAE,SAAU,GAAK,KAAM,SAAU,OAAQ,CAAE,EACvD,KAAMC,EAAO,OAAA,MACb,IAAI,aAAA,EACC,YAAA,EAGPpB,EAAA,IAACgB,EAAAA,OAAgB,KAAhB,CACC,GAAIG,EAAO,OAAA,KACX,QAAS,CAAE,EAAG,OAAQ,EACtB,QAAS,CAAE,EAAG,CAAE,EAChB,KAAM,CAAE,EAAG,OAAQ,EACnB,WAAY,CAAE,SAAU,GAAK,KAAM,SAAU,OAAQ,CAAE,EACvD,KAAMC,EAAO,OAAA,KACb,IAAI,WAAA,EACC,WACP,CAAA,CAAA,CAGN,CAAA,CACF,CAAA,CAEJ,EAEMC,EAAS,CAAwB,CACrC,UAAAvB,EACA,GAAGC,CACL,IAAsB,CACd,MAAAO,EAAUd,EAAM,WAAWD,CAAU,EAEzC,OAAAS,EAAA,IAACgB,EAAA,OAAA,CACC,KAAMV,EAAQ,KACd,MAAOhB,EAAM,OAAOgB,EAAQ,OAAO,EAAEA,EAAQ,KAAK,EAClD,QAASA,EAAQ,QACjB,KAAM,CAAE,KAAMc,EAAAA,OAAO,EAAG,IAAK,OAAQ,EACrC,UAAWlB,EAAAA,KAAK,4BAA6BJ,CAAS,EACrD,GAAGC,CAAA,CAAA,CAGV,EAKMuB,EAAO,CAAwB,CAAA,KACnCC,EACA,IAAAC,EACA,cAAeC,EACf,UAAA3B,EACA,GAAGC,CACL,IAAoB,CACZ,MAAAO,EAAUd,EAAM,WAAWD,CAAU,EACrCmC,EAAaF,EAAsC,CAAE,IAAAA,GAAlC,CAAE,cAAeC,CAAW,EAEnD,OAAAzB,EAAA,IAAC2B,EAAA,KAAA,CAAA,KACCJ,EACA,KAAMjB,EAAQ,KACd,MAAOhB,EAAM,KAAKgB,EAAQ,OAAO,EAAEA,EAAQ,KAAK,EAChD,UAAWJ,EAAAA,KAAK,iCAAkCJ,CAAS,EAC1D,GAAG4B,EACH,GAAG3B,CAAA,CAAA,CAGV,EAkBM6B,EAAU,CAAwB,CACtC,MAAAhC,EAAQ,UACR,KAAAD,EAAO,IACP,QAAAE,EAAU,OAAA,KACV0B,EACA,SAAAM,EACA,OAAAC,EACA,WAAApB,EACA,UAAAqB,EAAY,CAAE,KAAM,IAAK,EACzB,SAAAC,EACA,GAAGjC,CACL,WAEKN,EAAK,CAAA,MAAAG,EAAc,KAAAD,EAAY,QAAAE,EAAmB,GAAGE,EACnD,SAAA,CAAQwB,GAAAvB,EAAAA,IAACsB,EAAM,CAAA,GAAGC,CAAM,CAAA,QACxBpB,EAAK,CAAA,GAAG,OAAQ,GAAG4B,EACjB,SAAAC,EACH,EACCH,GACC7B,EAAAA,IAACqB,EAAO,CAAA,QAASQ,EAAU,KAAM,CAAE,KAAMT,EAAAA,OAAO,EAAG,IAAK,QAAY,CAAA,CAAA,EAErEU,GAAU9B,EAAA,IAACQ,EAAW,CAAA,QAASsB,EAAQ,WAAApB,EAAwB,CAClE,CAAA,CAAA,EAIJ,OAAO,OAAOkB,EAAS,CACrB,KAAAnC,EACA,OAAA4B,EACA,KAAAlB,EACA,KAAAmB,EACA,WAAAd,CACF,CAAC,EAED,MAAMyB,EAAML"}
+{"version":3,"file":"index.js","sources":["../../src/Tag/Tag.constants.ts","../../src/Tag/Tag.tsx"],"sourcesContent":["export const SIZE = {\n  Root: {\n    \"0\": {\n      h: \"5\",\n    },\n    \"1\": {\n      h: \"6\",\n    },\n    \"2\": {\n      h: \"8\",\n    },\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: \"gray-12\",\n      accent: \"accent-9\",\n      gray: \"gray-9\",\n      red: \"red-9\",\n      blue: \"blue-9\",\n      green: \"green-9\",\n      yellow: \"yellow-9\",\n      purple: \"purple-9\",\n    },\n    soft: {\n      default: \"gray-3\",\n      accent: \"accent-3\",\n      gray: \"gray-3\",\n      red: \"red-3\",\n      blue: \"blue-3\",\n      green: \"green-3\",\n      yellow: \"yellow-3\",\n      purple: \"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: \"default\",\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 { motion } from \"@telegraph/motion\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text as TelegraphText } from \"@telegraph/typography\";\nimport { clsx } from \"clsx\";\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        align=\"center\"\n        rounded=\"2\"\n        display=\"inline-flex\"\n        pl={SPACING.Root[size]}\n        backgroundColor={COLOR.Root[variant][color]}\n        h={SIZE.Root[size].h}\n        className={clsx(\"tgph-tag\", 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  maxW = \"40\",\n  style,\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      maxW={maxW}\n      overflow=\"hidden\"\n      style={{\n        whiteSpace: \"nowrap\",\n        textOverflow: \"ellipsis\",\n        ...style,\n      }}\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 = ({ onClick, textToCopy, ...props }: 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    <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        roundedTopRight=\"3\"\n        roundedBottomRight=\"3\"\n        roundedTopLeft=\"0\"\n        roundedBottomLeft=\"0\"\n        position=\"relative\"\n        overflow=\"hidden\"\n        p=\"2\"\n        {...props}\n      >\n        <TelegraphButton.Icon\n          as={motion.span}\n          initializeWithAnimation={false}\n          animate={{ y: copied ? 0 : \"150%\", opacity: copied ? 1 : 1 }}\n          transition={{ duration: 150, type: \"spring\" }}\n          icon={Lucide.Check}\n          alt=\"Copied text\"\n          aria-hidden={!copied}\n        />\n        <TelegraphButton.Icon\n          as={motion.span}\n          initializeWithAnimation={false}\n          animate={{ y: !copied ? 0 : \"-150%\", opacity: !copied ? 1 : 1 }}\n          transition={{ duration: 150, type: \"spring\" }}\n          icon={Lucide.Copy}\n          position=\"absolute\"\n          alt=\"Copy text\"\n          aria-hidden={copied}\n        />\n      </TelegraphButton.Root>\n    </Tooltip>\n  );\n};\n\nconst Button = <T extends TgphElement>({ ...props }: 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      roundedTopRight=\"3\"\n      roundedBottomRight=\"3\"\n      roundedTopLeft=\"0\"\n      roundedBottomLeft=\"0\"\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  ...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      mr=\"1\"\n      roundedTopRight=\"3\"\n      roundedBottomRight=\"3\"\n      roundedTopLeft=\"0\"\n      roundedBottomLeft=\"0\"\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    textProps?: React.ComponentProps<typeof Text>;\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  textProps = { maxW: \"40\" },\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\" {...textProps}>\n        {children}\n      </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","maxW","style","context","TelegraphText","CopyButton","onClick","textToCopy","copied","setCopied","timeout","Tooltip","jsxs","TelegraphButton","event","_a","motion","Lucide","Button","Icon","icon","alt","ariaHidden","a11yProps","TelegraphIcon","Default","onRemove","onCopy","textProps","children","Tag"],"mappings":"uVAAaA,EAAO,CAClB,KAAM,CACJ,EAAK,CACH,EAAG,GACL,EACA,EAAK,CACH,EAAG,GACL,EACA,EAAK,CACH,EAAG,GACL,CACF,CACF,EAEaC,EAAU,CACrB,KAAM,CACJ,EAAK,IACL,EAAK,IACL,EAAK,GACP,EACA,KAAM,CACJ,EAAK,IACL,EAAK,IACL,EAAK,GACP,CACF,EAEaC,EAAQ,CACnB,KAAM,CACJ,MAAO,CACL,QAAS,UACT,OAAQ,WACR,KAAM,SACN,IAAK,QACL,KAAM,SACN,MAAO,UACP,OAAQ,WACR,OAAQ,UACV,EACA,KAAM,CACJ,QAAS,SACT,OAAQ,WACR,KAAM,SACN,IAAK,QACL,KAAM,SACN,MAAO,UACP,OAAQ,WACR,OAAQ,UACV,CACF,EACA,KAAM,CACJ,MAAO,CACL,QAAS,QACT,KAAM,QACN,IAAK,QACL,OAAQ,QACR,KAAM,QACN,MAAO,QACP,OAAQ,QACR,OAAQ,OACV,EACA,KAAM,CACJ,QAAS,UACT,KAAM,OACN,OAAQ,SACR,IAAK,MACL,KAAM,OACN,MAAO,QACP,OAAQ,SACR,OAAQ,QACV,CACF,EACA,KAAM,CACJ,MAAO,CACL,QAAS,QACT,KAAM,QACN,OAAQ,QACR,IAAK,QACL,KAAM,QACN,MAAO,QACP,OAAQ,QACR,OAAQ,OACV,EACA,KAAM,CACJ,QAAS,UACT,KAAM,OACN,OAAQ,SACR,IAAK,MACL,KAAM,OACN,MAAO,QACP,OAAQ,SACR,OAAQ,QACV,CACF,EACA,OAAQ,CACN,MAAO,CACL,QAAS,UACT,KAAM,OACN,OAAQ,SACR,IAAK,MACL,KAAM,OACN,MAAO,QACP,OAAQ,SACR,OAAQ,QACV,EACA,KAAM,CACJ,QAAS,OACT,KAAM,OACN,OAAQ,SACR,IAAK,MACL,KAAM,OACN,MAAO,QACP,OAAQ,SACR,OAAQ,QACV,CACF,CACF,ECrFMC,EAAaC,EAAM,cAAuC,CAC9D,KAAM,IACN,MAAO,UACP,QAAS,MACX,CAAC,EAEKC,EAAO,CAAwB,CACnC,GAAAC,EAAK,OACL,KAAAC,EAAO,IACP,MAAAC,EAAQ,UACR,QAAAC,EAAU,OACV,UAAAC,EACA,GAAGC,CACL,IAEIC,MAACT,EAAW,SAAX,CAAoB,MAAO,CAAE,KAAAI,EAAM,MAAAC,EAAO,QAAAC,GACzC,SAAAG,EAAA,IAACC,EAAA,MAAA,CACC,GAAAP,EACA,MAAM,SACN,QAAQ,IACR,QAAQ,cACR,GAAIL,EAAQ,KAAKM,CAAI,EACrB,gBAAiBL,EAAM,KAAKO,CAAO,EAAED,CAAK,EAC1C,EAAGR,EAAK,KAAKO,CAAI,EAAE,EACnB,UAAWO,EAAAA,KAAK,WAAYJ,CAAS,EACpC,GAAGC,EACJ,WAAQ,EAAA,CAEZ,CAAA,CAAA,EAWEI,EAAO,CAAwB,CACnC,GAAAT,EAAK,OACL,KAAAU,EAAO,KACP,MAAAC,EACA,GAAGN,CACL,IAAoB,CACZ,MAAAO,EAAUd,EAAM,WAAWD,CAAU,EAEzC,OAAAS,EAAA,IAACO,EAAA,KAAA,CACC,GAAAb,EACA,KAAMY,EAAQ,KACd,MAAOhB,EAAM,KAAKgB,EAAQ,OAAO,EAAEA,EAAQ,KAAK,EAChD,OAAO,SACP,GAAIjB,EAAQ,KAAKiB,EAAQ,IAAI,EAC7B,KAAAF,EACA,SAAS,SACT,MAAO,CACL,WAAY,SACZ,aAAc,WACd,GAAGC,CACL,EACC,GAAGN,CAAA,CAAA,CAGV,EASMS,EAAa,CAAC,CAAE,QAAAC,EAAS,WAAAC,EAAY,GAAGX,KAA6B,CACnE,MAAAO,EAAUd,EAAM,WAAWD,CAAU,EAErC,CAACoB,EAAQC,CAAS,EAAIpB,EAAM,SAAS,EAAK,EAEhD,OAAAA,EAAM,UAAU,IAAM,CACpB,GAAImB,EAAQ,CACV,MAAME,EAAU,WAAW,IAAMD,EAAU,EAAK,EAAG,GAAI,EAChD,MAAA,IAAM,aAAaC,CAAO,CACnC,CAAA,EACC,CAACF,CAAM,CAAC,EAGTX,EAAAA,IAACc,EAAAA,QAAQ,CAAA,MAAM,YACb,SAAAC,EAAA,KAACC,EAAAA,OAAgB,KAAhB,CACC,QAAUC,GAA+C,OAEvDR,GAAA,MAAAA,EAAUQ,GACVL,EAAU,EAAI,EACAF,GAAA,UAAU,UAAU,UAAUA,CAAU,GACtDQ,EAAAD,EAAM,gBAAN,MAAAC,EAAqB,MACvB,EACA,KAAMZ,EAAQ,KACd,MAAOhB,EAAM,OAAOgB,EAAQ,OAAO,EAAEA,EAAQ,KAAK,EAClD,QAASA,EAAQ,QACjB,gBAAgB,IAChB,mBAAmB,IACnB,eAAe,IACf,kBAAkB,IAClB,SAAS,WACT,SAAS,SACT,EAAE,IACD,GAAGP,EAEJ,SAAA,CAAAC,EAAA,IAACgB,EAAAA,OAAgB,KAAhB,CACC,GAAIG,EAAO,OAAA,KACX,wBAAyB,GACzB,QAAS,CAAE,EAAGR,EAAS,EAAI,OAAQ,QAAkB,CAAM,EAC3D,WAAY,CAAE,SAAU,IAAK,KAAM,QAAS,EAC5C,KAAMS,EAAO,OAAA,MACb,IAAI,cACJ,cAAa,CAACT,CAAA,CAChB,EACAX,EAAA,IAACgB,EAAAA,OAAgB,KAAhB,CACC,GAAIG,EAAO,OAAA,KACX,wBAAyB,GACzB,QAAS,CAAE,EAAIR,EAAa,QAAJ,EAAa,QAAuB,CAAE,EAC9D,WAAY,CAAE,SAAU,IAAK,KAAM,QAAS,EAC5C,KAAMS,EAAO,OAAA,KACb,SAAS,WACT,IAAI,YACJ,cAAaT,CAAA,CACf,CAAA,CAAA,CAEJ,CAAA,CAAA,CAEJ,EAEMU,EAAS,CAAwB,CAAE,GAAGtB,KAA4B,CAChE,MAAAO,EAAUd,EAAM,WAAWD,CAAU,EAEzC,OAAAS,EAAA,IAACgB,EAAA,OAAA,CACC,KAAMV,EAAQ,KACd,MAAOhB,EAAM,OAAOgB,EAAQ,OAAO,EAAEA,EAAQ,KAAK,EAClD,QAASA,EAAQ,QACjB,KAAM,CAAE,KAAMc,EAAAA,OAAO,EAAG,IAAK,OAAQ,EACrC,gBAAgB,IAChB,mBAAmB,IACnB,eAAe,IACf,kBAAkB,IACjB,GAAGrB,CAAA,CAAA,CAGV,EAKMuB,EAAO,CAAwB,CAAA,KACnCC,EACA,IAAAC,EACA,cAAeC,EACf,GAAG1B,CACL,IAAoB,CACZ,MAAAO,EAAUd,EAAM,WAAWD,CAAU,EACrCmC,EAAaF,EAAsC,CAAE,IAAAA,GAAlC,CAAE,cAAeC,CAAW,EAEnD,OAAAzB,EAAA,IAAC2B,EAAA,KAAA,CAAA,KACCJ,EACA,KAAMjB,EAAQ,KACd,MAAOhB,EAAM,KAAKgB,EAAQ,OAAO,EAAEA,EAAQ,KAAK,EAChD,GAAG,IACH,gBAAgB,IAChB,mBAAmB,IACnB,eAAe,IACf,kBAAkB,IACjB,GAAGoB,EACH,GAAG3B,CAAA,CAAA,CAGV,EAkBM6B,EAAU,CAAwB,CACtC,MAAAhC,EAAQ,UACR,KAAAD,EAAO,IACP,QAAAE,EAAU,OAAA,KACV0B,EACA,SAAAM,EACA,OAAAC,EACA,WAAApB,EACA,UAAAqB,EAAY,CAAE,KAAM,IAAK,EACzB,SAAAC,EACA,GAAGjC,CACL,WAEKN,EAAK,CAAA,MAAAG,EAAc,KAAAD,EAAY,QAAAE,EAAmB,GAAGE,EACnD,SAAA,CAAQwB,GAAAvB,EAAAA,IAACsB,EAAM,CAAA,GAAGC,CAAM,CAAA,QACxBpB,EAAK,CAAA,GAAG,OAAQ,GAAG4B,EACjB,SAAAC,EACH,EACCH,GACC7B,EAAAA,IAACqB,EAAO,CAAA,QAASQ,EAAU,KAAM,CAAE,KAAMT,EAAAA,OAAO,EAAG,IAAK,QAAY,CAAA,CAAA,EAErEU,GAAU9B,EAAA,IAACQ,EAAW,CAAA,QAASsB,EAAQ,WAAApB,EAAwB,CAClE,CAAA,CAAA,EAIJ,OAAO,OAAOkB,EAAS,CACrB,KAAAnC,EACA,OAAA4B,EACA,KAAAlB,EACA,KAAAmB,EACA,WAAAd,CACF,CAAC,EAED,MAAMyB,EAAML"}

package/dist/esm/default.mjs

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=default.mjs.map

package/dist/esm/default.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"default.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/esm/index.mjs

@@ -1,19 +1,25 @@
-import { jsx as r, jsxs as B } from "react/jsx-runtime";
-import { Button as g } from "@telegraph/button";
-import { Lucide as y, Icon as I } from "@telegraph/icon";
+import { jsx as n, jsxs as h } from "react/jsx-runtime";
+import { Button as p } from "@telegraph/button";
+import { Lucide as g, Icon as C } from "@telegraph/icon";
 import { Stack as z } from "@telegraph/layout";
-import { Tooltip as N } from "@telegraph/tooltip";
-import { Text as S } from "@telegraph/typography";
-import { clsx as f } from "clsx";
-import { AnimatePresence as L, motion as b } from "framer-motion";
-import i from "react";
+import { motion as f } from "@telegraph/motion";
+import { Tooltip as I } from "@telegraph/tooltip";
+import { Text as L } from "@telegraph/typography";
+import { clsx as S } from "clsx";
+import l from "react";
 const O = {
   Root: {
-    0: "h-5",
-    1: "h-6",
-    2: "h-8"
+    0: {
+      h: "5"
+    },
+    1: {
+      h: "6"
+    },
+    2: {
+      h: "8"
+    }
   }
-}, w = {
+}, y = {
   Root: {
     0: "1",
     1: "2",
@@ -24,27 +30,27 @@ const O = {
     1: "2",
     2: "2"
   }
-}, s = {
+}, u = {
   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"
+      default: "gray-12",
+      accent: "accent-9",
+      gray: "gray-9",
+      red: "red-9",
+      blue: "blue-9",
+      green: "green-9",
+      yellow: "yellow-9",
+      purple: "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"
+      default: "gray-3",
+      accent: "accent-3",
+      gray: "gray-3",
+      red: "red-3",
+      blue: "blue-3",
+      green: "green-3",
+      yellow: "yellow-3",
+      purple: "purple-3"
     }
   },
   Icon: {
@@ -113,170 +119,174 @@ const O = {
       purple: "purple"
     }
   }
-}, d = i.createContext({
+}, d = l.createContext({
   size: "1",
   color: "default",
   variant: "soft"
 }), m = ({
-  as: n = "span",
+  as: r = "span",
   size: t = "1",
-  color: o = "default",
-  variant: l = "soft",
+  color: a = "default",
+  variant: o = "soft",
   className: e,
-  ...a
-}) => /* @__PURE__ */ r(d.Provider, { value: { size: t, color: o, variant: l }, children: /* @__PURE__ */ r(
+  ...i
+}) => /* @__PURE__ */ n(d.Provider, { value: { size: t, color: a, variant: o }, children: /* @__PURE__ */ n(
   z,
   {
-    as: n,
-    display: "inline-flex",
+    as: r,
     align: "center",
     rounded: "2",
-    pl: w.Root[t],
-    className: f(O.Root[t], s.Root[l][o], e),
-    ...a,
+    display: "inline-flex",
+    pl: y.Root[t],
+    backgroundColor: u.Root[o][a],
+    h: O.Root[t].h,
+    className: S("tgph-tag", e),
+    ...i,
     "data-tag": !0
   }
-) }), h = ({
-  as: n = "span",
+) }), w = ({
+  as: r = "span",
   maxW: t = "40",
-  style: o,
-  ...l
+  style: a,
+  ...o
 }) => {
-  const e = i.useContext(d);
-  return /* @__PURE__ */ r(
-    S,
+  const e = l.useContext(d);
+  return /* @__PURE__ */ n(
+    L,
     {
-      as: n,
+      as: r,
       size: e.size,
-      color: s.Text[e.variant][e.color],
+      color: u.Text[e.variant][e.color],
       weight: "medium",
-      mr: w.Text[e.size],
+      mr: y.Text[e.size],
       maxW: t,
+      overflow: "hidden",
       style: {
         whiteSpace: "nowrap",
         textOverflow: "ellipsis",
-        overflow: "hidden",
-        ...o
+        ...a
       },
-      ...l
+      ...o
     }
   );
-}, x = ({
-  onClick: n,
-  textToCopy: t,
-  className: o,
-  ...l
-}) => {
-  const e = i.useContext(d), [a, c] = i.useState(!1);
-  return i.useEffect(() => {
-    if (a) {
-      const u = setTimeout(() => c(!1), 2e3);
-      return () => clearTimeout(u);
+}, x = ({ onClick: r, textToCopy: t, ...a }) => {
+  const o = l.useContext(d), [e, i] = l.useState(!1);
+  return l.useEffect(() => {
+    if (e) {
+      const c = setTimeout(() => i(!1), 2e3);
+      return () => clearTimeout(c);
     }
-  }, [a]), /* @__PURE__ */ r(L, { mode: "wait", initial: !1, children: /* @__PURE__ */ r(N, { label: "Copy text", children: /* @__PURE__ */ r(
-    g.Root,
+  }, [e]), /* @__PURE__ */ n(I, { label: "Copy text", children: /* @__PURE__ */ h(
+    p.Root,
     {
-      onClick: (u) => {
-        var p;
-        n == null || n(u), c(!0), t && navigator.clipboard.writeText(t), (p = u.currentTarget) == null || p.blur();
+      onClick: (c) => {
+        var s;
+        r == null || r(c), i(!0), t && navigator.clipboard.writeText(t), (s = c.currentTarget) == null || s.blur();
       },
-      size: e.size,
-      color: s.Button[e.variant][e.color],
-      variant: e.variant,
-      className: f("overflow-hidden", o),
+      size: o.size,
+      color: u.Button[o.variant][o.color],
+      variant: o.variant,
       roundedTopRight: "3",
       roundedBottomRight: "3",
       roundedTopLeft: "0",
       roundedBottomLeft: "0",
-      ...l,
-      children: a ? /* @__PURE__ */ r(
-        g.Icon,
-        {
-          as: b.span,
-          initial: { y: "100%" },
-          animate: { y: 0 },
-          exit: { y: "100%" },
-          transition: { duration: 0.2, type: "spring", bounce: 0 },
-          icon: y.Check,
-          alt: "Copied text"
-        },
-        "check icon"
-      ) : /* @__PURE__ */ r(
-        g.Icon,
-        {
-          as: b.span,
-          initial: { y: "-100%" },
-          animate: { y: 0 },
-          exit: { y: "-100%" },
-          transition: { duration: 0.2, type: "spring", bounce: 0 },
-          icon: y.Copy,
-          alt: "Copy text"
-        },
-        "copy icon"
-      )
+      position: "relative",
+      overflow: "hidden",
+      p: "2",
+      ...a,
+      children: [
+        /* @__PURE__ */ n(
+          p.Icon,
+          {
+            as: f.span,
+            initializeWithAnimation: !1,
+            animate: { y: e ? 0 : "150%", opacity: 1 },
+            transition: { duration: 150, type: "spring" },
+            icon: g.Check,
+            alt: "Copied text",
+            "aria-hidden": !e
+          }
+        ),
+        /* @__PURE__ */ n(
+          p.Icon,
+          {
+            as: f.span,
+            initializeWithAnimation: !1,
+            animate: { y: e ? "-150%" : 0, opacity: 1 },
+            transition: { duration: 150, type: "spring" },
+            icon: g.Copy,
+            position: "absolute",
+            alt: "Copy text",
+            "aria-hidden": e
+          }
+        )
+      ]
     }
-  ) }) });
-}, T = ({
-  className: n,
-  ...t
-}) => {
-  const o = i.useContext(d);
-  return /* @__PURE__ */ r(
-    g,
+  ) });
+}, b = ({ ...r }) => {
+  const t = l.useContext(d);
+  return /* @__PURE__ */ n(
+    p,
     {
-      size: o.size,
-      color: s.Button[o.variant][o.color],
-      variant: o.variant,
-      icon: { icon: y.X, alt: "close" },
-      className: f("rounded-tl-0 rounded-bl-0", n),
-      ...t
+      size: t.size,
+      color: u.Button[t.variant][t.color],
+      variant: t.variant,
+      icon: { icon: g.X, alt: "close" },
+      roundedTopRight: "3",
+      roundedBottomRight: "3",
+      roundedTopLeft: "0",
+      roundedBottomLeft: "0",
+      ...r
     }
   );
-}, v = ({
-  icon: n,
+}, T = ({
+  icon: r,
   alt: t,
-  "aria-hidden": o,
-  className: l,
-  ...e
+  "aria-hidden": a,
+  ...o
 }) => {
-  const a = i.useContext(d), c = t ? { alt: t } : { "aria-hidden": o };
-  return /* @__PURE__ */ r(
-    I,
+  const e = l.useContext(d), i = t ? { alt: t } : { "aria-hidden": a };
+  return /* @__PURE__ */ n(
+    C,
     {
-      icon: n,
-      size: a.size,
-      color: s.Icon[a.variant][a.color],
-      className: f("rounded-tl-0 rounded-bl-0 mr-1", l),
-      ...c,
-      ...e
+      icon: r,
+      size: e.size,
+      color: u.Icon[e.variant][e.color],
+      mr: "1",
+      roundedTopRight: "3",
+      roundedBottomRight: "3",
+      roundedTopLeft: "0",
+      roundedBottomLeft: "0",
+      ...i,
+      ...o
     }
   );
-}, C = ({
-  color: n = "default",
+}, R = ({
+  color: r = "default",
   size: t = "1",
-  variant: o = "soft",
-  icon: l,
+  variant: a = "soft",
+  icon: o,
   onRemove: e,
-  onCopy: a,
+  onCopy: i,
   textToCopy: c,
-  textProps: u = { maxW: "40" },
-  children: p,
-  ...R
-}) => /* @__PURE__ */ B(m, { color: n, size: t, variant: o, ...R, children: [
-  l && /* @__PURE__ */ r(v, { ...l }),
-  /* @__PURE__ */ r(h, { as: "span", ...u, children: p }),
-  e && /* @__PURE__ */ r(T, { onClick: e, icon: { icon: y.X, alt: "Remove" } }),
-  a && /* @__PURE__ */ r(x, { onClick: a, textToCopy: c })
+  textProps: s = { maxW: "40" },
+  children: v,
+  ...B
+}) => /* @__PURE__ */ h(m, { color: r, size: t, variant: a, ...B, children: [
+  o && /* @__PURE__ */ n(T, { ...o }),
+  /* @__PURE__ */ n(w, { as: "span", ...s, children: v }),
+  e && /* @__PURE__ */ n(b, { onClick: e, icon: { icon: g.X, alt: "Remove" } }),
+  i && /* @__PURE__ */ n(x, { onClick: i, textToCopy: c })
 ] });
-Object.assign(C, {
+Object.assign(R, {
   Root: m,
-  Button: T,
-  Text: h,
-  Icon: v,
+  Button: b,
+  Text: w,
+  Icon: T,
   CopyButton: x
 });
-const W = C;
+const D = R;
 export {
-  W as Tag
+  D 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    \"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: \"default\",\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  maxW = \"40\",\n  style,\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      maxW={maxW}\n      style={{\n        whiteSpace: \"nowrap\",\n        textOverflow: \"ellipsis\",\n        overflow: \"hidden\",\n        ...style,\n      }}\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    textProps?: React.ComponentProps<typeof Text>;\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  textProps = { maxW: \"40\" },\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\" {...textProps}>\n        {children}\n      </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","maxW","style","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","textProps","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\": {\n      h: \"5\",\n    },\n    \"1\": {\n      h: \"6\",\n    },\n    \"2\": {\n      h: \"8\",\n    },\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: \"gray-12\",\n      accent: \"accent-9\",\n      gray: \"gray-9\",\n      red: \"red-9\",\n      blue: \"blue-9\",\n      green: \"green-9\",\n      yellow: \"yellow-9\",\n      purple: \"purple-9\",\n    },\n    soft: {\n      default: \"gray-3\",\n      accent: \"accent-3\",\n      gray: \"gray-3\",\n      red: \"red-3\",\n      blue: \"blue-3\",\n      green: \"green-3\",\n      yellow: \"yellow-3\",\n      purple: \"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: \"default\",\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 { motion } from \"@telegraph/motion\";\nimport { Tooltip } from \"@telegraph/tooltip\";\nimport { Text as TelegraphText } from \"@telegraph/typography\";\nimport { clsx } from \"clsx\";\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        align=\"center\"\n        rounded=\"2\"\n        display=\"inline-flex\"\n        pl={SPACING.Root[size]}\n        backgroundColor={COLOR.Root[variant][color]}\n        h={SIZE.Root[size].h}\n        className={clsx(\"tgph-tag\", 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  maxW = \"40\",\n  style,\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      maxW={maxW}\n      overflow=\"hidden\"\n      style={{\n        whiteSpace: \"nowrap\",\n        textOverflow: \"ellipsis\",\n        ...style,\n      }}\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 = ({ onClick, textToCopy, ...props }: 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    <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        roundedTopRight=\"3\"\n        roundedBottomRight=\"3\"\n        roundedTopLeft=\"0\"\n        roundedBottomLeft=\"0\"\n        position=\"relative\"\n        overflow=\"hidden\"\n        p=\"2\"\n        {...props}\n      >\n        <TelegraphButton.Icon\n          as={motion.span}\n          initializeWithAnimation={false}\n          animate={{ y: copied ? 0 : \"150%\", opacity: copied ? 1 : 1 }}\n          transition={{ duration: 150, type: \"spring\" }}\n          icon={Lucide.Check}\n          alt=\"Copied text\"\n          aria-hidden={!copied}\n        />\n        <TelegraphButton.Icon\n          as={motion.span}\n          initializeWithAnimation={false}\n          animate={{ y: !copied ? 0 : \"-150%\", opacity: !copied ? 1 : 1 }}\n          transition={{ duration: 150, type: \"spring\" }}\n          icon={Lucide.Copy}\n          position=\"absolute\"\n          alt=\"Copy text\"\n          aria-hidden={copied}\n        />\n      </TelegraphButton.Root>\n    </Tooltip>\n  );\n};\n\nconst Button = <T extends TgphElement>({ ...props }: 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      roundedTopRight=\"3\"\n      roundedBottomRight=\"3\"\n      roundedTopLeft=\"0\"\n      roundedBottomLeft=\"0\"\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  ...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      mr=\"1\"\n      roundedTopRight=\"3\"\n      roundedBottomRight=\"3\"\n      roundedTopLeft=\"0\"\n      roundedBottomLeft=\"0\"\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    textProps?: React.ComponentProps<typeof Text>;\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  textProps = { maxW: \"40\" },\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\" {...textProps}>\n        {children}\n      </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","maxW","style","context","TelegraphText","CopyButton","onClick","textToCopy","copied","setCopied","timeout","Tooltip","jsxs","TelegraphButton","event","_a","motion","Lucide","Button","Icon","icon","alt","ariaHidden","a11yProps","TelegraphIcon","Default","onRemove","onCopy","textProps","children","Tag"],"mappings":"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"}

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

@@ -1,8 +1,14 @@
 export declare const SIZE: {
     readonly Root: {
-        readonly "0": "h-5";
-        readonly "1": "h-6";
-        readonly "2": "h-8";
+        readonly "0": {
+            readonly h: "5";
+        };
+        readonly "1": {
+            readonly h: "6";
+        };
+        readonly "2": {
+            readonly h: "8";
+        };
     };
 };
 export declare const SPACING: {
@@ -20,24 +26,24 @@ export declare const SPACING: {
 export declare const COLOR: {
     readonly Root: {
         readonly solid: {
-            readonly default: "bg-gray-12";
-            readonly accent: "bg-accent-9";
-            readonly gray: "bg-gray-9";
-            readonly red: "bg-red-9";
-            readonly blue: "bg-blue-9";
-            readonly green: "bg-green-9";
-            readonly yellow: "bg-yellow-9";
-            readonly purple: "bg-purple-9";
+            readonly default: "gray-12";
+            readonly accent: "accent-9";
+            readonly gray: "gray-9";
+            readonly red: "red-9";
+            readonly blue: "blue-9";
+            readonly green: "green-9";
+            readonly yellow: "yellow-9";
+            readonly purple: "purple-9";
         };
         readonly soft: {
-            readonly default: "bg-gray-3";
-            readonly accent: "bg-accent-3";
-            readonly gray: "bg-gray-3";
-            readonly red: "bg-red-3";
-            readonly blue: "bg-blue-3";
-            readonly green: "bg-green-3";
-            readonly yellow: "bg-yellow-3";
-            readonly purple: "bg-purple-3";
+            readonly default: "gray-3";
+            readonly accent: "accent-3";
+            readonly gray: "gray-3";
+            readonly red: "red-3";
+            readonly blue: "blue-3";
+            readonly green: "green-3";
+            readonly yellow: "yellow-3";
+            readonly purple: "purple-3";
         };
     };
     readonly Icon: {

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.constants.d.ts","sourceRoot":"","sources":["../../../src/Tag/Tag.constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI;;;;;;CAMP,CAAC;AAEX,eAAO,MAAM,OAAO;;;;;;;;;;;CAWV,CAAC;AAEX,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyFR,CAAC"}
+{"version":3,"file":"Tag.constants.d.ts","sourceRoot":"","sources":["../../../src/Tag/Tag.constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI;;;;;;;;;;;;CAYP,CAAC;AAEX,eAAO,MAAM,OAAO;;;;;;;;;;;CAWV,CAAC;AAEX,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyFR,CAAC"}

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

@@ -21,10 +21,10 @@ type ButtonProps<T extends TgphElement> = TgphComponentProps<typeof TelegraphBut
 type CopyButtonProps = TgphComponentProps<typeof TelegraphButton.Root> & {
     textToCopy?: string;
 };
-declare const CopyButton: ({ onClick, textToCopy, className, ...props }: CopyButtonProps) => import("react/jsx-runtime").JSX.Element;
-declare const Button: <T extends TgphElement>({ className, ...props }: ButtonProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const CopyButton: ({ onClick, textToCopy, ...props }: CopyButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const Button: <T extends TgphElement>({ ...props }: ButtonProps<T>) => import("react/jsx-runtime").JSX.Element;
 type IconProps<T extends TgphElement> = TgphComponentProps<typeof TelegraphIcon<T>>;
-declare const Icon: <T extends TgphElement>({ icon, alt, "aria-hidden": ariaHidden, className, ...props }: IconProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const Icon: <T extends TgphElement>({ icon, alt, "aria-hidden": ariaHidden, ...props }: IconProps<T>) => import("react/jsx-runtime").JSX.Element;
 type DefaultProps<T extends TgphElement> = PolymorphicProps<T> & TgphComponentProps<typeof Root<T>> & {
     icon?: React.ComponentProps<typeof TelegraphIcon>;
     textProps?: React.ComponentProps<typeof Text>;

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/Tag/Tag.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,KAAK,EACV,gBAAgB,EAChB,2BAA2B,EAE3B,kBAAkB,EAClB,WAAW,EACZ,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAU,IAAI,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChE,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAG1C,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE9D,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAiB,MAAM,iBAAiB,CAAC;AAEvD,KAAK,aAAa,GAAG;IACnB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB,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;AAEF,KAAK,SAAS,CAAC,CAAC,SAAS,WAAW,IAAI,2BAA2B,CACjE,CAAC,EACD,eAAe,CAChB,GACC,kBAAkB,CAAC,OAAO,KAAK,CAAC,GAChC,aAAa,CAAC;AAQhB,QAAA,MAAM,IAAI,GAAI,CAAC,SAAS,WAAW,qDAOhC,SAAS,CAAC,CAAC,CAAC,4CAiBd,CAAC;AAEF,KAAK,SAAS,CAAC,CAAC,SAAS,WAAW,IAAI,IAAI,CAC1C,kBAAkB,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC,EAC3C,IAAI,CACL,GAAG;IACF,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,CAAC;AAEF,QAAA,MAAM,IAAI,GAAI,CAAC,SAAS,WAAW,iCAKhC,SAAS,CAAC,CAAC,CAAC,4CAmBd,CAAC;AACF,KAAK,WAAW,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAC1D,OAAO,eAAe,CAAC,CAAC,CAAC,CAC1B,CAAC;AAEF,KAAK,eAAe,GAAG,kBAAkB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG;IACvE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,QAAA,MAAM,UAAU,sCAAuC,eAAe,4CAwDrE,CAAC;AAEF,QAAA,MAAM,MAAM,GAAI,CAAC,SAAS,WAAW,gBAAgB,WAAW,CAAC,CAAC,CAAC,4CAelE,CAAC;AACF,KAAK,SAAS,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CACxD,OAAO,aAAa,CAAC,CAAC,CAAC,CACxB,CAAC;AAEF,QAAA,MAAM,IAAI,GAAI,CAAC,SAAS,WAAW,sDAKhC,SAAS,CAAC,CAAC,CAAC,4CAiBd,CAAC;AAEF,KAAK,YAAY,CAAC,CAAC,SAAS,WAAW,IAAI,gBAAgB,CAAC,CAAC,CAAC,GAC5D,kBAAkB,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG;IACnC,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC;IAClD,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC;IAC9C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,GAAG,CACA;IACE,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,GACD;IACE,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB,CACJ,CAAC;AAEJ,QAAA,MAAM,OAAO,GAAI,CAAC,SAAS,WAAW,+FAWnC,YAAY,CAAC,CAAC,CAAC,4CAajB,CAAC;AAUF,QAAA,MAAM,GAAG,EAAc,OAAO,OAAO,GAAG;IACtC,IAAI,EAAE,OAAO,IAAI,CAAC;IAClB,MAAM,EAAE,OAAO,MAAM,CAAC;IACtB,IAAI,EAAE,OAAO,IAAI,CAAC;IAClB,IAAI,EAAE,OAAO,IAAI,CAAC;IAClB,UAAU,EAAE,OAAO,UAAU,CAAC;CAC/B,CAAC;AAEF,OAAO,EAAE,GAAG,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telegraph/tag",
-  "version": "0.0.60",
+  "version": "0.0.61",
   "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/tag",
   "author": "@knocklabs",
   "license": "MIT",
@@ -31,22 +31,21 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@telegraph/button": "^0.0.56",
+    "@telegraph/button": "^0.0.57",
     "@telegraph/compose-refs": "^0.0.2",
     "@telegraph/helpers": "^0.0.7",
-    "@telegraph/icon": "^0.0.36",
-    "@telegraph/layout": "^0.1.2",
-    "@telegraph/tooltip": "^0.0.29",
-    "@telegraph/typography": "^0.1.2",
-    "clsx": "^2.1.1",
-    "framer-motion": "^11.1.9"
+    "@telegraph/icon": "^0.0.37",
+    "@telegraph/layout": "^0.1.3",
+    "@telegraph/motion": "^0.0.2",
+    "@telegraph/tooltip": "^0.0.30",
+    "@telegraph/typography": "^0.1.3",
+    "clsx": "^2.1.1"
   },
   "devDependencies": {
     "@knocklabs/eslint-config": "^0.0.3",
     "@knocklabs/prettier-config": "^0.0.1",
     "@knocklabs/typescript-config": "^0.0.2",
     "@telegraph/postcss-config": "^0.0.20",
-    "@telegraph/tailwind-config": "^0.0.11",
     "@telegraph/vite-config": "^0.0.11",
     "@types/react": "^18.2.48",
     "eslint": "^8.56.0",

package/dist/css/default.css

@@ -1 +0,0 @@
-.tgph .mr-1{margin-right:var(--tgph-spacing-1)}.tgph .inline-flex{display:inline-flex}.tgph .hidden{display:none}.tgph .h-5{height:var(--tgph-spacing-5)}.tgph .h-6{height:var(--tgph-spacing-6)}.tgph .h-8{height:var(--tgph-spacing-8)}.tgph .overflow-hidden{overflow:hidden}.tgph .rounded-bl-0{border-bottom-left-radius:var(--tgph-rounded-0)}.tgph .rounded-tl-0{border-top-left-radius:var(--tgph-rounded-0)}.tgph .bg-accent-3{background-color:var(--tgph-accent-3)}.tgph .bg-accent-9{background-color:var(--tgph-accent-9)}.tgph .bg-blue-3{background-color:var(--tgph-blue-3)}.tgph .bg-blue-9{background-color:var(--tgph-blue-9)}.tgph .bg-gray-12{background-color:var(--tgph-gray-12)}.tgph .bg-gray-3{background-color:var(--tgph-gray-3)}.tgph .bg-gray-9{background-color:var(--tgph-gray-9)}.tgph .bg-green-3{background-color:var(--tgph-green-3)}.tgph .bg-green-9{background-color:var(--tgph-green-9)}.tgph .bg-purple-3{background-color:var(--tgph-purple-3)}.tgph .bg-purple-9{background-color:var(--tgph-purple-9)}.tgph .bg-red-3{background-color:var(--tgph-red-3)}.tgph .bg-red-9{background-color:var(--tgph-red-9)}.tgph .bg-yellow-3{background-color:var(--tgph-yellow-3)}.tgph .bg-yellow-9{background-color:var(--tgph-yellow-9)}.tgph .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 .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}