@telegraph/tag 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# @telegraph/tag
+
+## 0.0.1
+
+### Patch Changes
+
+- [#58](https://github.com/knocklabs/telegraph/pull/58) [`8a5298e`](https://github.com/knocklabs/telegraph/commit/8a5298e344c55dfa38553f1df09f17d90aa78951) Thanks [@kylemcd](https://github.com/kylemcd)! - telegraph component and supporting updates
+
+- Updated dependencies [[`8a5298e`](https://github.com/knocklabs/telegraph/commit/8a5298e344c55dfa38553f1df09f17d90aa78951)]:
+  - @telegraph/button@0.0.5

package/README.md

@@ -0,0 +1,153 @@
+![Telegraph by Knock](https://github.com/knocklabs/telegraph/assets/29106675/9b5022e3-b02c-4582-ba57-3d6171e45e44)
+
+[![npm version](https://img.shields.io/npm/v/@telegraph/tag.svg)](https://www.npmjs.com/package/@telegraph/tag)
+
+# @telegraph/tag
+> A tag component with optional interactive button
+
+
+## Installation Instructions
+
+```
+npm install @telegraph/tag
+```
+
+
+### Add stylesheet
+Pick one:
+
+Via CSS (preferred):
+```
+@import "@telegraph/tag"
+```
+
+Via Javascript:
+```
+import "@telegraph/tag/default.css"
+```
+
+> Then, include `className="tgph"` on the farthest parent element wrapping the telegraph components
+
+## Usage
+
+### Basic Usage
+Shorthand tag component that adheres to the telegraph design system
+
+```
+import { Tag } from "@telegraph/tag"
+
+...
+
+<Tag>Tag</Tag>
+```
+
+#### Props
+
+| Name | Type | Default | Options |
+| ---- | -----| ------- | ------- |
+| size | string | "1" | "1" "2" |
+| color | string | "default" | "default", "gray", "red", "accent", "blue", "green", "yellow" |
+| variant | string | "soft" | "soft", "solid"|
+| icon | [Icon Props](https://github.com/knocklabs/telegraph/tree/main/packages/icon#props) | `undefined` | |
+| onRemove | () => {} | `undefined` | |
+| onCopy | () => {} | `undefined` | |
+
+
+### Advanced Usage
+Individual parts of the tag component that can be composed in configurations different from the default telegraph design system styles. This can be used to create modifications to one-off tag components without the need to modify the tag exported from this package.
+
+#### `<Tag.Root/>`
+Wraps the Tag children components and relays props to them.
+
+```
+import { Tag } from '@telegraph/tag'
+
+...
+
+<Tag.Root></Tag.Root>
+```
+
+#### Props
+
+| Name | Type | Default | Options |
+| ---- | -----| ------- | ------- |
+| size | string | "1" | "1" "2" |
+| color | string | "default" | "default", "gray", "red", "accent", "blue", "green", "yellow" |
+| variant | string | "soft" | "soft", "solid"|
+
+
+
+#### `<Tag.Text/>`
+A component built on top of the Text component from [@telegraph/typography](https://github.com/knocklabs/telegraph/tree/main/packages/typography) with translated props to adhere to the telegraph design system
+
+```
+import { Tag } from '@telegraph/tag'
+
+...
+
+<Tag.Text>Text</Tag.Text>
+```
+
+##### Props
+
+> See [text props](https://github.com/knocklabs/telegraph/tree/main/packages/typography)
+
+#### `<Tag.Button/>`
+A component build on top of the Button component from [@telegraph/button](https://github.com/knocklabs/telegraph/tree/main/packages/button)
+
+```
+import { Tag } from '@telegraph/tag'
+
+...
+
+<Tag.Button/>
+```
+
+#### Props
+
+>  See [button props](https://github.com/knocklabs/telegraph/tree/main/packages/icon#props)
+
+
+#### `<Tag.Text/>`
+A component built on top of the Text component from [@telegraph/typography](https://github.com/knocklabs/telegraph/tree/main/packages/typography) with translated props to adhere to the telegraph design system
+
+```
+import { Tag } from '@telegraph/tag'
+
+...
+
+<Tag.Text>Text</Tag.Text>
+```
+
+##### Props
+
+> See [text props](https://github.com/knocklabs/telegraph/tree/main/packages/typography)
+
+#### `<Tag.Icon/>`
+A component build on top of the Icon component from [@telegraph/icon](https://github.com/knocklabs/telegraph/tree/main/packages/icon)
+
+```
+import { Tag } from '@telegraph/tag'
+
+...
+
+<Tag.Icon icon={addSharp} alt="create"/>
+```
+
+#### Props
+
+>  See [icon props](https://github.com/knocklabs/telegraph/tree/main/packages/icon)
+
+#### An example of composing an advanced Tag
+```
+import { Tag } from "@telegraph/tag"
+import { addSharp, closeSharp } from '@telegraph/icon'
+
+<Tag.Root color="blue" variant="solid" size="2">
+    <Tag.Icon icon={addSharp} alt="Create"/>
+    <Tag.Text>Text</Tag.Text>
+    <Tag.Button icon={{ icon: removeSharp, alt: "remove"}} onClick={() => {}}/>
+</Tag.Root>
+```
+
+

package/dist/cjs/index.js

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

package/dist/cjs/index.js.map

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

package/dist/css/default.css

@@ -0,0 +1 @@
+.tgph :is(.mr-1){margin-right:var(--tgph-spacing-1)}.tgph :is(.mr-2){margin-right:var(--tgph-spacing-2)}.tgph :is(.inline-flex){display:inline-flex}.tgph :is(.h-6){height:var(--tgph-spacing-6)}.tgph :is(.h-8){height:var(--tgph-spacing-8)}.tgph :is(.items-center){align-items:center}.tgph :is(.rounded-3){border-radius:var(--tgph-rounded-3)}.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-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(.pl-2){padding-left:var(--tgph-spacing-2)}

package/dist/esm/index.mjs

@@ -0,0 +1,196 @@
+import { jsx as l, jsxs as p } from "react/jsx-runtime";
+import { Button as R } from "@telegraph/button";
+import { closeSharp as i, Icon as C, copyOutline as T } from "@telegraph/icon";
+import { Text as v } from "@telegraph/typography";
+import { clsx as d } from "clsx";
+import n from "react";
+const z = {
+  Root: {
+    1: "h-6",
+    2: "h-8"
+  }
+}, s = {
+  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"
+    },
+    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"
+    }
+  },
+  Icon: {
+    solid: {
+      default: "white",
+      gray: "white",
+      red: "white",
+      accent: "white",
+      blue: "white",
+      green: "white",
+      yellow: "white"
+    },
+    soft: {
+      default: "default",
+      gray: "gray",
+      accent: "accent",
+      red: "red",
+      blue: "blue",
+      green: "green",
+      yellow: "yellow"
+    }
+  },
+  Text: {
+    solid: {
+      default: "white",
+      gray: "white",
+      accent: "white",
+      red: "white",
+      blue: "white",
+      green: "white",
+      yellow: "white"
+    },
+    soft: {
+      default: "default",
+      gray: "gray",
+      accent: "accent",
+      red: "red",
+      blue: "blue",
+      green: "green",
+      yellow: "yellow"
+    }
+  },
+  Button: {
+    solid: {
+      default: "gray",
+      gray: "gray",
+      accent: "accent",
+      red: "red",
+      blue: "blue",
+      green: "green",
+      yellow: "yellow"
+    },
+    soft: {
+      default: "gray",
+      gray: "gray",
+      accent: "accent",
+      red: "red",
+      blue: "blue",
+      green: "green",
+      yellow: "yellow"
+    }
+  }
+}, u = n.createContext({
+  size: "1",
+  color: "default",
+  variant: "soft"
+}), f = n.forwardRef(
+  ({ size: t = "1", color: o = "default", variant: r = "soft", className: e, ...a }, c) => /* @__PURE__ */ l(u.Provider, { value: { size: t, color: o, variant: r }, children: /* @__PURE__ */ l(
+    "span",
+    {
+      className: d(
+        "inline-flex items-center rounded-3 pl-2",
+        z.Root[t],
+        s.Root[r][o],
+        e
+      ),
+      ...a,
+      ref: c,
+      "data-tag": !0
+    }
+  ) })
+), w = n.forwardRef(
+  ({ as: t = "span", className: o, ...r }, e) => {
+    const a = n.useContext(u);
+    return /* @__PURE__ */ l(
+      v,
+      {
+        as: t,
+        size: a.size,
+        color: s.Text[a.variant][a.color],
+        className: d("rounded-tl-0 rounded-bl-0 mr-2", o),
+        ...r,
+        ref: e
+      }
+    );
+  }
+), g = n.forwardRef(
+  ({ className: t, ...o }, r) => {
+    const e = n.useContext(u);
+    return /* @__PURE__ */ l(
+      R,
+      {
+        size: e.size,
+        color: s.Button[e.variant][e.color],
+        variant: e.variant,
+        icon: { icon: i, alt: "close" },
+        className: d("rounded-tl-0 rounded-bl-0", t),
+        ...o,
+        ref: r
+      }
+    );
+  }
+), y = n.forwardRef(
+  ({ className: t, ...o }, r) => {
+    const e = n.useContext(u);
+    return /* @__PURE__ */ l(
+      C,
+      {
+        size: e.size,
+        color: s.Icon[e.variant][e.color],
+        className: d("rounded-tl-0 rounded-bl-0 mr-1", t),
+        ...o,
+        ref: r
+      }
+    );
+  }
+), b = n.forwardRef(
+  ({
+    color: t = "default",
+    size: o = "1",
+    variant: r = "soft",
+    icon: e,
+    onRemove: a,
+    onCopy: c,
+    children: h,
+    ...m
+  }, x) => /* @__PURE__ */ p(f, { color: t, size: o, variant: r, ...m, ref: x, children: [
+    e && /* @__PURE__ */ l(y, { ...e }),
+    /* @__PURE__ */ l(w, { children: h }),
+    a && /* @__PURE__ */ l(
+      g,
+      {
+        onClick: a,
+        icon: { icon: i, alt: "Copy Text" }
+      }
+    ),
+    c && /* @__PURE__ */ l(
+      g,
+      {
+        onClick: c,
+        icon: { icon: T, alt: "Remove" }
+      }
+    )
+  ] })
+);
+Object.assign(b, {
+  Root: f,
+  Button: g,
+  Text: w,
+  Icon: y
+});
+const k = b;
+export {
+  k as Tag
+};
+//# sourceMappingURL=index.mjs.map

package/dist/esm/index.mjs.map

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

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

@@ -0,0 +1,89 @@
+export declare const SIZE: {
+    readonly Root: {
+        readonly "1": "h-6";
+        readonly "2": "h-8";
+    };
+};
+export declare const COLOR: {
+    readonly Root: {
+        readonly solid: {
+            readonly default: "bg-gray-9";
+            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 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 Icon: {
+        readonly solid: {
+            readonly default: "white";
+            readonly gray: "white";
+            readonly red: "white";
+            readonly accent: "white";
+            readonly blue: "white";
+            readonly green: "white";
+            readonly yellow: "white";
+        };
+        readonly soft: {
+            readonly default: "default";
+            readonly gray: "gray";
+            readonly accent: "accent";
+            readonly red: "red";
+            readonly blue: "blue";
+            readonly green: "green";
+            readonly yellow: "yellow";
+        };
+    };
+    readonly Text: {
+        readonly solid: {
+            readonly default: "white";
+            readonly gray: "white";
+            readonly accent: "white";
+            readonly red: "white";
+            readonly blue: "white";
+            readonly green: "white";
+            readonly yellow: "white";
+        };
+        readonly soft: {
+            readonly default: "default";
+            readonly gray: "gray";
+            readonly accent: "accent";
+            readonly red: "red";
+            readonly blue: "blue";
+            readonly green: "green";
+            readonly yellow: "yellow";
+        };
+    };
+    readonly Button: {
+        readonly solid: {
+            readonly default: "gray";
+            readonly gray: "gray";
+            readonly accent: "accent";
+            readonly red: "red";
+            readonly blue: "blue";
+            readonly green: "green";
+            readonly yellow: "yellow";
+        };
+        readonly soft: {
+            readonly default: "gray";
+            readonly gray: "gray";
+            readonly accent: "accent";
+            readonly red: "red";
+            readonly blue: "blue";
+            readonly green: "green";
+            readonly yellow: "yellow";
+        };
+    };
+};
+//# sourceMappingURL=Tag.constants.d.ts.map

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

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

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

@@ -0,0 +1,41 @@
+import { Button as TelegraphButton } from "@telegraph/button";
+import { Icon as TelegraphIcon } from "@telegraph/icon";
+import { Text as TelegraphText } from "@telegraph/typography";
+import React from "react";
+type RootBaseProps = {
+    size?: "1" | "2";
+    color?: React.ComponentProps<typeof TelegraphButton>["color"] & "default";
+    variant?: "soft" | "solid";
+};
+declare const Root: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & RootBaseProps & React.RefAttributes<HTMLSpanElement>>;
+type TextProps = Omit<React.ComponentProps<typeof TelegraphText>, "as"> & {
+    as: React.ComponentProps<typeof TelegraphText>["as"];
+};
+declare const Text: React.ForwardRefExoticComponent<Omit<TextProps, "ref"> & React.RefAttributes<HTMLParagraphElement & HTMLSpanElement & HTMLDivElement & HTMLLabelElement & HTMLPreElement>>;
+declare const Button: React.ForwardRefExoticComponent<Omit<{
+    variant?: "soft" | "solid" | "outline" | "ghost" | undefined;
+    size?: "1" | "2" | "3" | undefined;
+    color?: "gray" | "accent" | "red" | "blue" | "green" | "yellow" | undefined;
+    state?: "default" | "disabled" | "loading" | "error" | "success" | "warning" | undefined;
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const Icon: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLSpanElement> & {
+    icon: string;
+    alt: string;
+    size?: "1" | "2" | "0" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | undefined;
+    variant?: "primary" | "secondary" | undefined;
+    color?: "white" | "default" | "gray" | "accent" | "red" | "blue" | "green" | "yellow" | "beige" | "disabled" | undefined;
+} & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+type DefaultProps = React.ComponentProps<typeof Root> & {
+    text: string;
+    icon?: React.ComponentProps<typeof TelegraphIcon>;
+    onCopy?: () => void;
+    onRemove?: () => void;
+};
+declare const Tag: React.ForwardRefExoticComponent<Omit<DefaultProps, "ref"> & React.RefAttributes<HTMLSpanElement>> & {
+    Root: typeof Root;
+    Button: typeof Button;
+    Text: typeof Text;
+    Icon: typeof Icon;
+};
+export { Tag };
+//# sourceMappingURL=Tag.d.ts.map

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

@@ -0,0 +1 @@
+{"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,EACL,IAAI,IAAI,aAAa,EAGtB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE9D,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,KAAK,aAAa,GAAG;IACnB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,KAAK,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC;IAC1E,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC5B,CAAC;AAYF,QAAA,MAAM,IAAI,+HAqBT,CAAC;AAEF,KAAK,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,EAAE,IAAI,CAAC,GAAG;IACxE,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC,IAAI,CAAC,CAAC;CACtD,CAAC;AAIF,QAAA,MAAM,IAAI,4KAcT,CAAC;AAKF,QAAA,MAAM,MAAM;;;;;4IAeX,CAAC;AAKF,QAAA,MAAM,IAAI;;;;;;wFAaT,CAAC;AAEF,KAAK,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,GAAG;IACtD,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC;IAClD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AA6CF,QAAA,MAAM,GAAG;UACD,WAAW;YACT,aAAa;UACf,WAAW;UACX,WAAW;CAClB,CAAC;AAEF,OAAO,EAAE,GAAG,EAAE,CAAC"}

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

@@ -0,0 +1,2 @@
+export { Tag } from "./Tag";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Tag/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC"}

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export { Tag } from "./Tag";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC"}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@telegraph/tag",
+  "version": "0.0.1",
+  "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/tag",
+  "author": "@knocklabs",
+  "license": "MIT",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.mjs",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.js",
+      "types": "./dist/types/index.d.ts",
+      "default": "./dist/css/default.css"
+    },
+    "./default.css": "./dist/css/default.css"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "prettier": "@knocklabs/prettier-config",
+  "scripts": {
+    "clean": "rm -rf dist",
+    "dev": "vite build --watch --emptyOutDir false",
+    "build": "yarn clean && vite build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "coverage": "vitest run --coverage",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "format": "prettier \"src/**/*.{js,ts,tsx}\" --write",
+    "format:check": "prettier \"src/**/*.{js,ts,tsx}\" --check",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@telegraph/button": "^0.0.5",
+    "@telegraph/icon": "^0.0.4",
+    "@telegraph/typography": "^0.0.8",
+    "clsx": "^2.1.0"
+  },
+  "devDependencies": {
+    "@knocklabs/eslint-config": "^0.0.3",
+    "@knocklabs/prettier-config": "^0.0.1",
+    "@knocklabs/typescript-config": "^0.0.2",
+    "@telegraph/postcss-config": "^0.0.9",
+    "@telegraph/tailwind-config": "^0.0.10",
+    "@telegraph/vite-config": "^0.0.8",
+    "@telegraph/vitest-config": "^0.0.6",
+    "@types/react": "^18.2.48",
+    "eslint": "^8.56.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.12",
+    "vitest": "^1.2.2"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}