@telegraph/input 0.0.47 → 0.0.49

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @telegraph/input
 
+## 0.0.49
+
+### Patch Changes
+
+- Updated dependencies [[`bca0117`](https://github.com/knocklabs/telegraph/commit/bca011776c3b8b96e4f46a049578fcd7a167e052)]:
+  - @telegraph/layout@0.2.0
+  - @telegraph/typography@0.1.22
+
+## 0.0.48
+
+### Patch Changes
+
+- [#501](https://github.com/knocklabs/telegraph/pull/501) [`dc12662`](https://github.com/knocklabs/telegraph/commit/dc12662f6f41697d976d0978871a567d564777e8) Thanks [@kylemcd](https://github.com/kylemcd)! - deprecate usage of `@telegraph/motion` in favor of tiny `motion` package
+
+- [#498](https://github.com/knocklabs/telegraph/pull/498) [`99e01e3`](https://github.com/knocklabs/telegraph/commit/99e01e3dcf7508af0bfae14e9b62cccff7af3388) Thanks [@kylemcd](https://github.com/kylemcd)! - update imports for the `Lucide` object from `@telegraph/icon` to import icons directly from `lucide-react` instead.
+
+- [#497](https://github.com/knocklabs/telegraph/pull/497) [`2d3e1cd`](https://github.com/knocklabs/telegraph/commit/2d3e1cddd8a6bfac7108e350649f81bdc18f57c8) Thanks [@kylemcd](https://github.com/kylemcd)! - deprecate tailwind usage and migrate any remaining packages
+
+- Updated dependencies [[`e554068`](https://github.com/knocklabs/telegraph/commit/e554068b0f9ca5a1e8fe9d6f27dd2a30373a3cc8), [`99e01e3`](https://github.com/knocklabs/telegraph/commit/99e01e3dcf7508af0bfae14e9b62cccff7af3388), [`2d3e1cd`](https://github.com/knocklabs/telegraph/commit/2d3e1cddd8a6bfac7108e350649f81bdc18f57c8)]:
+  - @telegraph/layout@0.1.21
+  - @telegraph/typography@0.1.21
+
 ## 0.0.47
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),C=require("@radix-ui/react-slot"),I=require("@telegraph/compose-refs"),b=require("@telegraph/layout"),v=require("@telegraph/typography"),l=require("clsx"),s=require("react"),a={Container:{1:"h-6 pl-0 rounded-2",2:"h-8 pl-0 rounded-2",3:"h-10 pl-0 rounded-3"},Input:{1:"px-1",2:"px-2",3:"px-3"},Text:{1:"1",2:"2",3:"3"},Slot:{1:"[&>[data-tgph-button]]:rounded-1",2:"[&>[data-tgph-button]]:rounded-1",3:"[&>[data-tgph-button]]:rounded-2"},SlotLeading:{1:"order-1 pl-1",2:"order-1 pl-2",3:"order-1 pl-3"},SlotTrailing:{1:"order-3 pr-1",2:"order-3 pr-2",3:"order-3 pr-3"}},z={Container:{default:{outline:"bg-surface-1 border-gray-6 hover:border-gray-7 focus-within:!border-blue-8",ghost:"bg-transparent border-transparent hover:bg-gray-3 focus-within:!bg-gray-4 focus-within:!border-blue-8"},disabled:{outline:"cursor-not-allowed bg-gray-2 border-gray-2 [&_[data-tgph-icon]]:text-gray-8 placeholder:text-gray-9 [&>input]:text-gray-9",ghost:"cursor-not-allowed bg-transparent border border-transparent [&_[data-tgph-icon]]:text-gray-8 placeholder:text-gray-9 [&>input]:text-gray-9"},error:{outline:"bg-surface-1 border-red-6",ghost:"bg-transparent border-red-6"}}},h=s.createContext({state:"default",size:"2",variant:"outline"}),x=({as:r="input",size:t="2",variant:o="outline",textProps:n={size:a.Text[t],color:"default"},className:y,disabled:d,errored:j,children:m,tgphRef:S,...R})=>{const q=r,i=s.useRef(null),w=I.useComposedRefs(S,i),c=d?"disabled":j?"error":"default";return e.jsx(h.Provider,{value:{size:t,variant:o,state:c},children:e.jsxs(b.Box,{className:l("box-border flex items-center transition-all","border-[1px] border-solid text-gray-12 placeholder:text-gray-10",z.Container[c][o],a.Container[t]),onPointerDown:p=>{if(p.target.closest("button, a")){p.preventDefault();return}const g=i.current;g&&requestAnimationFrame(()=>{g.focus()})},children:[e.jsx(v.Text,{as:q,className:l("appearance-none border-none shadow-0 outline-0 bg-transparent","[font-family:inherit] h-full w-full","order-2",a.Input[t],y),disabled:d,...n,...R,tgphRef:w}),m]})})},u=s.forwardRef(({position:r="leading",...t},o)=>{const n=s.useContext(h);return e.jsx(b.Box,{className:l("group box-border flex items-center justify-center h-full","[&>[data-tgph-button]]:w-full [&>[data-tgph-button]]:h-auto","[&>[data-tgph-button-layout='icon-only']]:aspect-square [&>[data-tgph-button-layout='icon-only']]:p-0","[&>[data-tgph-button-layout='default']]:px-2","[&:has([data-tgph-button-layout='icon-only'])]:aspect-square","[&:has([data-tgph-button-layout='icon-only'])]:!p-1",r==="leading"&&a.SlotLeading[n.size],r==="trailing"&&a.SlotTrailing[n.size],a.Slot[t.size??n.size]),children:e.jsx(C.Slot,{size:n.size,...t,ref:o})})}),f=({LeadingComponent:r,TrailingComponent:t,...o})=>e.jsxs(x,{...o,children:[r&&e.jsx(u,{position:"leading",children:r}),t&&e.jsx(u,{position:"trailing",children:t})]});Object.assign(f,{Root:x,Slot:u});const T=f;exports.Input=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),_=require("@radix-ui/react-slot"),q=require("@telegraph/compose-refs"),b=require("@telegraph/layout"),w=require("@telegraph/typography"),s=require("react"),i={Container:{1:{h:"6",pl:"0",rounded:"2"},2:{h:"8",pl:"0",rounded:"2"},3:{h:"10",pl:"0",rounded:"2"}},Text:{1:{size:"1",px:"1"},2:{size:"2",px:"2"},3:{size:"3",px:"3"}},SlotLeading:{1:{pl:"1"},2:{pl:"2"},3:{pl:"3"}},SlotTrailing:{1:{pr:"1"},2:{pr:"2"},3:{pr:"3"}}},g={Container:{default:{outline:{bg:"surface-1",border:"px",borderColor:"gray-6",hover_borderColor:"gray-7",focus_within_borderColor:"blue-8"},ghost:{bg:"transparent",border:"px",borderColor:"transparent",hover_backgroundColor:"gray-3",hover_borderColor:"transparent",focus_within_backgroundColor:"gray-4",focus_within_borderColor:"blue-8"}},disabled:{outline:{bg:"gray-2",border:"px",borderColor:"gray-2"},ghost:{bg:"transparent",border:"px",borderColor:"transparent"}},error:{outline:{bg:"surface-1",border:"px",borderColor:"red-6"},ghost:{bg:"transparent",border:"px",borderColor:"red-6"}}},Text:{default:{color:"default"},disabled:{color:"disabled"},error:{color:"default"}}},f=s.createContext({state:"default",size:"2",variant:"outline"}),h=({as:e="input",size:t="2",variant:o="outline",textProps:n,disabled:u,errored:C,children:j,tgphRef:y,...S})=>{const R=e,d=s.useRef(null),z=q.useComposedRefs(y,d),a=u?"disabled":C?"error":"default";return r.jsx(f.Provider,{value:{size:t,variant:o,state:a},children:r.jsxs(b.Stack,{onPointerDown:c=>{if(c.target.closest("button, a")){c.preventDefault();return}const p=d.current;p&&requestAnimationFrame(()=>{p.focus()})},align:"center",...i.Container[t],...g.Container[a][o],"data-tgph-input-container":!0,"data-tgph-input-container-variant":o,"data-tgph-input-container-state":a,"data-tgph-input-container-size":t,children:[r.jsx(w.Text,{as:R,bg:"transparent",shadow:"0",h:"full",w:"full",disabled:u,tgphRef:z,...i.Text[t],...g.Text[a],...S,...n,"data-tgph-input-field":!0}),j]})})},l=s.forwardRef(({position:e="leading",...t},o)=>{const n=s.useContext(f);return r.jsx(b.Stack,{align:"center",justify:"center",h:"full","data-tgph-input-slot":!0,"data-tgph-input-slot-position":e,"data-tgph-input-slot-size":t.size??n.size,...e==="leading"&&i.SlotLeading[n.size],...e==="trailing"&&i.SlotTrailing[n.size],children:r.jsx(_.Slot,{size:n.size,...t,ref:o})})}),x=({LeadingComponent:e,TrailingComponent:t,...o})=>r.jsxs(h,{...o,children:[e&&r.jsx(l,{position:"leading",children:e}),t&&r.jsx(l,{position:"trailing",children:t})]});Object.assign(x,{Root:h,Slot:l});const T=x;exports.Input=T;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Input/Input.constants.ts","../../src/Input/Input.tsx"],"sourcesContent":["export const SIZE = {\n  Container: {\n    \"1\": \"h-6 pl-0 rounded-2\",\n    \"2\": \"h-8 pl-0 rounded-2\",\n    \"3\": \"h-10 pl-0 rounded-3\",\n  },\n  Input: {\n    \"1\": \"px-1\",\n    \"2\": \"px-2\",\n    \"3\": \"px-3\",\n  },\n  Text: {\n    \"1\": \"1\",\n    \"2\": \"2\",\n    \"3\": \"3\",\n  },\n  Slot: {\n    \"1\": \"[&>[data-tgph-button]]:rounded-1\",\n    \"2\": \"[&>[data-tgph-button]]:rounded-1\",\n    \"3\": \"[&>[data-tgph-button]]:rounded-2\",\n  },\n  SlotLeading: {\n    \"1\": \"order-1 pl-1\",\n    \"2\": \"order-1 pl-2\",\n    \"3\": \"order-1 pl-3\",\n  },\n  SlotTrailing: {\n    \"1\": \"order-3 pr-1\",\n    \"2\": \"order-3 pr-2\",\n    \"3\": \"order-3 pr-3\",\n  },\n} as const;\n\nexport const COLOR = {\n  Container: {\n    default: {\n      outline:\n        \"bg-surface-1 border-gray-6 hover:border-gray-7 focus-within:!border-blue-8\",\n      ghost:\n        \"bg-transparent border-transparent hover:bg-gray-3 focus-within:!bg-gray-4 focus-within:!border-blue-8\",\n    },\n    disabled: {\n      outline:\n        \"cursor-not-allowed bg-gray-2 border-gray-2 [&_[data-tgph-icon]]:text-gray-8 placeholder:text-gray-9 [&>input]:text-gray-9\",\n      ghost:\n        \"cursor-not-allowed bg-transparent border border-transparent [&_[data-tgph-icon]]:text-gray-8 placeholder:text-gray-9 [&>input]:text-gray-9\",\n    },\n    error: {\n      outline: \"bg-surface-1 border-red-6\",\n      ghost: \"bg-transparent border-red-6\",\n    },\n  },\n} as const;\n","import { Slot as RadixSlot } from \"@radix-ui/react-slot\";\nimport { useComposedRefs } from \"@telegraph/compose-refs\";\nimport type {\n  PolymorphicProps,\n  PolymorphicPropsWithTgphRef,\n  Required,\n  TgphComponentProps,\n  TgphElement,\n} from \"@telegraph/helpers\";\nimport { Box } from \"@telegraph/layout\";\nimport { Text } from \"@telegraph/typography\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport { COLOR, SIZE } from \"./Input.constants\";\n\ntype BaseRootProps = {\n  size?: keyof typeof SIZE.Container;\n  variant?: keyof typeof COLOR.Container.default;\n  errored?: boolean;\n};\n\ntype RootProps<T extends TgphElement> = Omit<\n  PolymorphicPropsWithTgphRef<T, HTMLInputElement>,\n  \"size\"\n> &\n  BaseRootProps & {\n    textProps?: Omit<React.ComponentProps<typeof Text<\"input\">>, \"as\">;\n  };\n\ntype InternalProps = Omit<BaseRootProps, \"errored\"> & {\n  state: \"default\" | \"disabled\" | \"error\";\n};\n\nconst InputContext = React.createContext<Required<InternalProps>>({\n  state: \"default\",\n  size: \"2\",\n  variant: \"outline\",\n});\n\nconst Root = <T extends TgphElement>({\n  as = \"input\" as T,\n  size = \"2\",\n  variant = \"outline\",\n  textProps = { size: SIZE.Text[size], color: \"default\" },\n  className,\n  disabled,\n  errored,\n  children,\n  tgphRef,\n  ...props\n}: RootProps<T>) => {\n  const Component = as;\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const composedRefs = useComposedRefs(tgphRef, inputRef);\n\n  const state = disabled ? \"disabled\" : errored ? \"error\" : \"default\";\n\n  return (\n    <InputContext.Provider value={{ size, variant, state }}>\n      <Box\n        className={clsx(\n          \"box-border flex items-center transition-all\",\n          \"border-[1px] border-solid text-gray-12 placeholder:text-gray-10\",\n          COLOR.Container[state][variant],\n          SIZE.Container[size],\n        )}\n        // Focus the input when clicking on the container\n        onPointerDown={(event: React.MouseEvent<HTMLDivElement>) => {\n          const target = event.target as HTMLElement;\n\n          // Make sure we're not clicking on an interactive element\n          if (target.closest(\"button, a\")) {\n            event.preventDefault();\n            return;\n          }\n\n          const input = inputRef.current;\n          if (!input) return;\n\n          requestAnimationFrame(() => {\n            input.focus();\n          });\n        }}\n      >\n        {/* \n          We choose to use the `<Text/>` component as a base here so that we can \n          configure the text inside of the input to match the design system font sizes\n        */}\n        <Text\n          as={Component}\n          className={clsx(\n            \"appearance-none border-none shadow-0 outline-0 bg-transparent\",\n            \"[font-family:inherit] h-full w-full\",\n            \"order-2\",\n            SIZE.Input[size],\n            className,\n          )}\n          disabled={disabled}\n          {...textProps}\n          {...props}\n          tgphRef={composedRefs}\n        />\n        {children}\n      </Box>\n    </InputContext.Provider>\n  );\n};\n\ntype SlotProps = React.ComponentPropsWithoutRef<typeof RadixSlot> & {\n  size?: keyof typeof SIZE.Slot;\n  position?: \"leading\" | \"trailing\";\n};\ntype SlotRef = React.ElementRef<typeof RadixSlot>;\n\nconst Slot = React.forwardRef<SlotRef, SlotProps>(\n  ({ position = \"leading\", ...props }, forwardedRef) => {\n    const context = React.useContext(InputContext);\n    return (\n      <Box\n        className={clsx(\n          \"group box-border flex items-center justify-center h-full\",\n          \"[&>[data-tgph-button]]:w-full [&>[data-tgph-button]]:h-auto\",\n          // Overrides to match the icon button in figma\n          \"[&>[data-tgph-button-layout='icon-only']]:aspect-square [&>[data-tgph-button-layout='icon-only']]:p-0\",\n          // Overrides default button layout to match the button in figma\n          \"[&>[data-tgph-button-layout='default']]:px-2\",\n          // If only an icon button is present, set the aspect ratio to square\n          \"[&:has([data-tgph-button-layout='icon-only'])]:aspect-square\",\n          // If only an icon button is present, reset the padding to spacing-1\n          \"[&:has([data-tgph-button-layout='icon-only'])]:!p-1\",\n          position === \"leading\" && SIZE.SlotLeading[context.size],\n          position === \"trailing\" && SIZE.SlotTrailing[context.size],\n          SIZE.Slot[props.size ?? context.size],\n        )}\n      >\n        <RadixSlot size={context.size} {...props} ref={forwardedRef} />\n      </Box>\n    );\n  },\n);\n\ntype DefaultProps<T extends TgphElement> = PolymorphicProps<T> &\n  TgphComponentProps<typeof Root> & {\n    LeadingComponent?: React.ReactNode;\n    TrailingComponent?: React.ReactNode;\n  };\n\nconst Default = <T extends TgphElement>({\n  LeadingComponent,\n  TrailingComponent,\n  ...props\n}: DefaultProps<T>) => {\n  return (\n    <Root {...props}>\n      {LeadingComponent && <Slot position=\"leading\">{LeadingComponent}</Slot>}\n      {TrailingComponent && (\n        <Slot position=\"trailing\">{TrailingComponent}</Slot>\n      )}\n    </Root>\n  );\n};\n\nObject.assign(Default, { Root, Slot });\n\nconst Input = Default as typeof Default & {\n  Root: typeof Root;\n  Slot: typeof Slot;\n};\n\nexport { Input };\n"],"names":["SIZE","COLOR","InputContext","React","Root","as","size","variant","textProps","className","disabled","errored","children","tgphRef","props","Component","inputRef","composedRefs","useComposedRefs","state","jsx","jsxs","Box","clsx","event","input","Text","Slot","position","forwardedRef","context","RadixSlot","Default","LeadingComponent","TrailingComponent","Input"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/Input/Input.constants.ts","../../src/Input/Input.tsx"],"sourcesContent":["export const SIZE = {\n  Container: {\n    \"1\": {\n      h: \"6\",\n      pl: \"0\",\n      rounded: \"2\",\n    },\n    \"2\": {\n      h: \"8\",\n      pl: \"0\",\n      rounded: \"2\",\n    },\n    \"3\": {\n      h: \"10\",\n      pl: \"0\",\n      rounded: \"2\",\n    },\n  },\n  Text: {\n    \"1\": {\n      size: \"1\",\n      px: \"1\",\n    },\n    \"2\": {\n      size: \"2\",\n      px: \"2\",\n    },\n    \"3\": {\n      size: \"3\",\n      px: \"3\",\n    },\n  },\n  SlotLeading: {\n    \"1\": {\n      pl: \"1\",\n    },\n    \"2\": {\n      pl: \"2\",\n    },\n    \"3\": {\n      pl: \"3\",\n    },\n  },\n  SlotTrailing: {\n    \"1\": {\n      pr: \"1\",\n    },\n    \"2\": {\n      pr: \"2\",\n    },\n    \"3\": {\n      pr: \"3\",\n    },\n  },\n} as const;\n\nexport const COLOR = {\n  Container: {\n    default: {\n      outline: {\n        bg: \"surface-1\",\n        border: \"px\",\n        borderColor: \"gray-6\",\n        hover_borderColor: \"gray-7\",\n        focus_within_borderColor: \"blue-8\",\n      },\n      ghost: {\n        bg: \"transparent\",\n        border: \"px\",\n        borderColor: \"transparent\",\n        hover_backgroundColor: \"gray-3\",\n        hover_borderColor: \"transparent\",\n        focus_within_backgroundColor: \"gray-4\",\n        focus_within_borderColor: \"blue-8\",\n      },\n    },\n    disabled: {\n      outline: {\n        bg: \"gray-2\",\n        border: \"px\",\n        borderColor: \"gray-2\",\n      },\n      ghost: {\n        bg: \"transparent\",\n        border: \"px\",\n        borderColor: \"transparent\",\n      },\n    },\n    error: {\n      outline: {\n        bg: \"surface-1\",\n        border: \"px\",\n        borderColor: \"red-6\",\n      },\n      ghost: {\n        bg: \"transparent\",\n        border: \"px\",\n        borderColor: \"red-6\",\n      },\n    },\n  },\n  Text: {\n    default: {\n      color: \"default\",\n    },\n    disabled: {\n      color: \"disabled\",\n    },\n    error: {\n      color: \"default\",\n    },\n  },\n} as const;\n","import { Slot as RadixSlot } from \"@radix-ui/react-slot\";\nimport { useComposedRefs } from \"@telegraph/compose-refs\";\nimport type {\n  PolymorphicProps,\n  Required,\n  TgphComponentProps,\n  TgphElement,\n} from \"@telegraph/helpers\";\nimport { Stack } from \"@telegraph/layout\";\nimport { Text } from \"@telegraph/typography\";\nimport React from \"react\";\n\nimport { COLOR, SIZE } from \"./Input.constants\";\n\ntype BaseRootProps = {\n  size?: \"1\" | \"2\" | \"3\";\n  variant?: \"outline\" | \"ghost\";\n  errored?: boolean;\n};\n\ntype RootProps<T extends TgphElement> = BaseRootProps & {\n  textProps?: Omit<React.ComponentProps<typeof Text<T>>, \"as\">;\n} & Omit<React.ComponentProps<typeof Text<T>>, \"as\">;\n\ntype InternalProps = Omit<BaseRootProps, \"errored\"> & {\n  state: \"default\" | \"disabled\" | \"error\";\n};\n\nconst InputContext = React.createContext<Required<InternalProps>>({\n  state: \"default\",\n  size: \"2\",\n  variant: \"outline\",\n});\n\nconst Root = <T extends TgphElement>({\n  as = \"input\" as T,\n  size = \"2\",\n  variant = \"outline\",\n  textProps,\n  disabled,\n  errored,\n  children,\n  tgphRef,\n  ...props\n}: RootProps<T>) => {\n  const Component = as;\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const composedRefs = useComposedRefs(tgphRef, inputRef);\n\n  const state = disabled ? \"disabled\" : errored ? \"error\" : \"default\";\n\n  return (\n    <InputContext.Provider value={{ size, variant, state }}>\n      <Stack\n        // Focus the input when clicking on the container\n        onPointerDown={(event: React.MouseEvent<HTMLDivElement>) => {\n          const target = event.target as HTMLElement;\n\n          // Make sure we're not clicking on an interactive element\n          if (target.closest(\"button, a\")) {\n            event.preventDefault();\n            return;\n          }\n\n          const input = inputRef.current;\n          if (!input) return;\n\n          requestAnimationFrame(() => {\n            input.focus();\n          });\n        }}\n        align=\"center\"\n        {...SIZE.Container[size]}\n        {...COLOR.Container[state][variant]}\n        data-tgph-input-container\n        data-tgph-input-container-variant={variant}\n        data-tgph-input-container-state={state}\n        data-tgph-input-container-size={size}\n      >\n        {/* \n          We choose to use the `<Text/>` component as a base here so that we can \n          configure the text inside of the input to match the design system font sizes\n        */}\n        <Text\n          as={Component}\n          bg=\"transparent\"\n          shadow=\"0\"\n          h=\"full\"\n          w=\"full\"\n          disabled={disabled}\n          tgphRef={composedRefs}\n          {...SIZE.Text[size]}\n          {...COLOR.Text[state]}\n          {...props}\n          {...textProps}\n          data-tgph-input-field\n        />\n        {children}\n      </Stack>\n    </InputContext.Provider>\n  );\n};\n\ntype SlotProps = React.ComponentPropsWithoutRef<typeof RadixSlot> & {\n  size?: \"1\" | \"2\" | \"3\";\n  position?: \"leading\" | \"trailing\";\n};\ntype SlotRef = React.ElementRef<typeof RadixSlot>;\n\nconst Slot = React.forwardRef<SlotRef, SlotProps>(\n  ({ position = \"leading\", ...props }, forwardedRef) => {\n    const context = React.useContext(InputContext);\n    return (\n      <Stack\n        align=\"center\"\n        justify=\"center\"\n        h=\"full\"\n        data-tgph-input-slot\n        data-tgph-input-slot-position={position}\n        data-tgph-input-slot-size={props.size ?? context.size}\n        {...(position === \"leading\" && SIZE.SlotLeading[context.size])}\n        {...(position === \"trailing\" && SIZE.SlotTrailing[context.size])}\n      >\n        <RadixSlot size={context.size} {...props} ref={forwardedRef} />\n      </Stack>\n    );\n  },\n);\n\ntype DefaultProps<T extends TgphElement> = PolymorphicProps<T> &\n  TgphComponentProps<typeof Root> & {\n    LeadingComponent?: React.ReactNode;\n    TrailingComponent?: React.ReactNode;\n  };\n\nconst Default = <T extends TgphElement>({\n  LeadingComponent,\n  TrailingComponent,\n  ...props\n}: DefaultProps<T>) => {\n  return (\n    <Root {...props}>\n      {LeadingComponent && <Slot position=\"leading\">{LeadingComponent}</Slot>}\n      {TrailingComponent && (\n        <Slot position=\"trailing\">{TrailingComponent}</Slot>\n      )}\n    </Root>\n  );\n};\n\nObject.assign(Default, { Root, Slot });\n\nconst Input = Default as typeof Default & {\n  Root: typeof Root;\n  Slot: typeof Slot;\n};\n\nexport { Input };\n"],"names":["SIZE","COLOR","InputContext","React","Root","as","size","variant","textProps","disabled","errored","children","tgphRef","props","Component","inputRef","composedRefs","useComposedRefs","state","jsx","jsxs","Stack","event","input","Text","Slot","position","forwardedRef","context","RadixSlot","Default","LeadingComponent","TrailingComponent","Input"],"mappings":"iRAAaA,EAAO,CAClB,UAAW,CACT,EAAK,CACH,EAAG,IACH,GAAI,IACJ,QAAS,GAAA,EAEX,EAAK,CACH,EAAG,IACH,GAAI,IACJ,QAAS,GAAA,EAEX,EAAK,CACH,EAAG,KACH,GAAI,IACJ,QAAS,GAAA,CACX,EAEF,KAAM,CACJ,EAAK,CACH,KAAM,IACN,GAAI,GAAA,EAEN,EAAK,CACH,KAAM,IACN,GAAI,GAAA,EAEN,EAAK,CACH,KAAM,IACN,GAAI,GAAA,CACN,EAEF,YAAa,CACX,EAAK,CACH,GAAI,GAAA,EAEN,EAAK,CACH,GAAI,GAAA,EAEN,EAAK,CACH,GAAI,GAAA,CACN,EAEF,aAAc,CACZ,EAAK,CACH,GAAI,GAAA,EAEN,EAAK,CACH,GAAI,GAAA,EAEN,EAAK,CACH,GAAI,GAAA,CACN,CAEJ,EAEaC,EAAQ,CACnB,UAAW,CACT,QAAS,CACP,QAAS,CACP,GAAI,YACJ,OAAQ,KACR,YAAa,SACb,kBAAmB,SACnB,yBAA0B,QAAA,EAE5B,MAAO,CACL,GAAI,cACJ,OAAQ,KACR,YAAa,cACb,sBAAuB,SACvB,kBAAmB,cACnB,6BAA8B,SAC9B,yBAA0B,QAAA,CAC5B,EAEF,SAAU,CACR,QAAS,CACP,GAAI,SACJ,OAAQ,KACR,YAAa,QAAA,EAEf,MAAO,CACL,GAAI,cACJ,OAAQ,KACR,YAAa,aAAA,CACf,EAEF,MAAO,CACL,QAAS,CACP,GAAI,YACJ,OAAQ,KACR,YAAa,OAAA,EAEf,MAAO,CACL,GAAI,cACJ,OAAQ,KACR,YAAa,OAAA,CACf,CACF,EAEF,KAAM,CACJ,QAAS,CACP,MAAO,SAAA,EAET,SAAU,CACR,MAAO,UAAA,EAET,MAAO,CACL,MAAO,SAAA,CACT,CAEJ,ECpFMC,EAAeC,EAAM,cAAuC,CAChE,MAAO,UACP,KAAM,IACN,QAAS,SACX,CAAC,EAEKC,EAAO,CAAwB,CACnC,GAAAC,EAAK,QACL,KAAAC,EAAO,IACP,QAAAC,EAAU,UACV,UAAAC,EACA,SAAAC,EACA,QAAAC,EACA,SAAAC,EACA,QAAAC,EACA,GAAGC,CACL,IAAoB,CAClB,MAAMC,EAAYT,EACZU,EAAWZ,EAAM,OAAyB,IAAI,EAC9Ca,EAAeC,EAAAA,gBAAgBL,EAASG,CAAQ,EAEhDG,EAAQT,EAAW,WAAaC,EAAU,QAAU,UAE1D,OACES,MAACjB,EAAa,SAAb,CAAsB,MAAO,CAAE,KAAAI,EAAM,QAAAC,EAAS,MAAAW,GAC7C,SAAAE,EAAAA,KAACC,EAAAA,MAAA,CAEC,cAAgBC,GAA4C,CAI1D,GAHeA,EAAM,OAGV,QAAQ,WAAW,EAAG,CAC/BA,EAAM,eAAA,EACN,MACF,CAEA,MAAMC,EAAQR,EAAS,QAClBQ,GAEL,sBAAsB,IAAM,CAC1BA,EAAM,MAAA,CACR,CAAC,CACH,EACA,MAAM,SACL,GAAGvB,EAAK,UAAUM,CAAI,EACtB,GAAGL,EAAM,UAAUiB,CAAK,EAAEX,CAAO,EAClC,4BAAyB,GACzB,oCAAmCA,EACnC,kCAAiCW,EACjC,iCAAgCZ,EAMhC,SAAA,CAAAa,EAAAA,IAACK,EAAAA,KAAA,CACC,GAAIV,EACJ,GAAG,cACH,OAAO,IACP,EAAE,OACF,EAAE,OACF,SAAAL,EACA,QAASO,EACR,GAAGhB,EAAK,KAAKM,CAAI,EACjB,GAAGL,EAAM,KAAKiB,CAAK,EACnB,GAAGL,EACH,GAAGL,EACJ,wBAAqB,EAAA,CAAA,EAEtBG,CAAA,CAAA,CAAA,EAEL,CAEJ,EAQMc,EAAOtB,EAAM,WACjB,CAAC,CAAE,SAAAuB,EAAW,UAAW,GAAGb,CAAA,EAASc,IAAiB,CACpD,MAAMC,EAAUzB,EAAM,WAAWD,CAAY,EAC7C,OACEiB,EAAAA,IAACE,EAAAA,MAAA,CACC,MAAM,SACN,QAAQ,SACR,EAAE,OACF,uBAAoB,GACpB,gCAA+BK,EAC/B,4BAA2Bb,EAAM,MAAQe,EAAQ,KAChD,GAAIF,IAAa,WAAa1B,EAAK,YAAY4B,EAAQ,IAAI,EAC3D,GAAIF,IAAa,YAAc1B,EAAK,aAAa4B,EAAQ,IAAI,EAE9D,SAAAT,EAAAA,IAACU,EAAAA,MAAU,KAAMD,EAAQ,KAAO,GAAGf,EAAO,IAAKc,CAAA,CAAc,CAAA,CAAA,CAGnE,CACF,EAQMG,EAAU,CAAwB,CACtC,iBAAAC,EACA,kBAAAC,EACA,GAAGnB,CACL,IAEIO,EAAAA,KAAChB,EAAA,CAAM,GAAGS,EACP,SAAA,CAAAkB,GAAoBZ,EAAAA,IAACM,EAAA,CAAK,SAAS,UAAW,SAAAM,EAAiB,EAC/DC,GACCb,EAAAA,IAACM,EAAA,CAAK,SAAS,WAAY,SAAAO,CAAA,CAAkB,CAAA,EAEjD,EAIJ,OAAO,OAAOF,EAAS,CAAE,KAAA1B,EAAM,KAAAqB,EAAM,EAErC,MAAMQ,EAAQH"}

package/dist/css/default.css

@@ -1 +1 @@
-.tgph .order-1{order:1}.tgph .order-2{order:2}.tgph .order-3{order:3}.tgph .box-border{box-sizing:border-box}.tgph .flex{display:flex}.tgph .aspect-square{aspect-ratio:1 / 1}.tgph .h-10{height:var(--tgph-spacing-10)}.tgph .h-6{height:var(--tgph-spacing-6)}.tgph .h-8{height:var(--tgph-spacing-8)}.tgph .h-full{height:var(--tgph-spacing-full)}.tgph .w-full{width:var(--tgph-spacing-full)}.tgph .cursor-not-allowed{cursor:not-allowed}.tgph .appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.tgph .items-center{align-items:center}.tgph .justify-center{justify-content:center}.tgph .rounded-2{border-radius:var(--tgph-rounded-2)}.tgph .rounded-3{border-radius:var(--tgph-rounded-3)}.tgph .border,.tgph .border-\[1px\]{border-width:1px}.tgph .border-solid{border-style:solid}.tgph .border-none{border-style:none}.tgph .border-gray-2{border-color:var(--tgph-gray-2)}.tgph .border-gray-6{border-color:var(--tgph-gray-6)}.tgph .border-red-6{border-color:var(--tgph-red-6)}.tgph .border-transparent{border-color:var(--tgph-transparent)}.tgph .bg-gray-2{background-color:var(--tgph-gray-2)}.tgph .bg-surface-1{background-color:var(--tgph-surface-1)}.tgph .bg-transparent{background-color:var(--tgph-transparent)}.tgph .\!p-1{padding:var(--tgph-spacing-1)!important}.tgph .px-1{padding-left:var(--tgph-spacing-1);padding-right:var(--tgph-spacing-1)}.tgph .px-2{padding-left:var(--tgph-spacing-2);padding-right:var(--tgph-spacing-2)}.tgph .px-3{padding-left:var(--tgph-spacing-3);padding-right:var(--tgph-spacing-3)}.tgph .pl-0{padding-left:var(--tgph-spacing-0)}.tgph .pl-1{padding-left:var(--tgph-spacing-1)}.tgph .pl-2{padding-left:var(--tgph-spacing-2)}.tgph .pl-3{padding-left:var(--tgph-spacing-3)}.tgph .pr-1{padding-right:var(--tgph-spacing-1)}.tgph .pr-2{padding-right:var(--tgph-spacing-2)}.tgph .pr-3{padding-right:var(--tgph-spacing-3)}.tgph .text-gray-12{color:var(--tgph-gray-12)}.tgph .shadow-0{--tw-shadow: var(--tgph-shadow-0);--tw-shadow-colored: var(--tgph-shadow-0);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.tgph .outline{outline-style:solid}.tgph .outline-0{outline-width:0px}.tgph .transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.tgph .\[font-family\:inherit\]{font-family:inherit}.tgph .placeholder\:text-gray-10::-moz-placeholder{color:var(--tgph-gray-10)}.tgph .placeholder\:text-gray-10::placeholder{color:var(--tgph-gray-10)}.tgph .placeholder\:text-gray-9::-moz-placeholder{color:var(--tgph-gray-9)}.tgph .placeholder\:text-gray-9::placeholder{color:var(--tgph-gray-9)}.tgph .focus-within\:\!border-blue-8:focus-within{border-color:var(--tgph-blue-8)!important}.tgph .focus-within\:\!bg-gray-4:focus-within{background-color:var(--tgph-gray-4)!important}.tgph .hover\:border-gray-7:hover{border-color:var(--tgph-gray-7)}.tgph .hover\:bg-gray-3:hover{background-color:var(--tgph-gray-3)}.tgph .\[\&\:has\(\[data-tgph-button-layout\=\'icon-only\'\]\)\]\:aspect-square:has([data-tgph-button-layout=icon-only]){aspect-ratio:1 / 1}.tgph .\[\&\:has\(\[data-tgph-button-layout\=\'icon-only\'\]\)\]\:\!p-1:has([data-tgph-button-layout=icon-only]){padding:var(--tgph-spacing-1)!important}.tgph :is(.\[\&\>\[data-tgph-button-layout\=\'default\'\]\]\:px-2>[data-tgph-button-layout=default]){padding-left:var(--tgph-spacing-2);padding-right:var(--tgph-spacing-2)}.tgph :is(.\[\&\>\[data-tgph-button-layout\=\'icon-only\'\]\]\:aspect-square>[data-tgph-button-layout=icon-only]){aspect-ratio:1 / 1}.tgph :is(.\[\&\>\[data-tgph-button-layout\=\'icon-only\'\]\]\:p-0>[data-tgph-button-layout=icon-only]){padding:var(--tgph-spacing-0)}.tgph :is(.\[\&\>\[data-tgph-button\]\]\:h-auto>[data-tgph-button]){height:var(--tgph-spacing-auto)}.tgph :is(.\[\&\>\[data-tgph-button\]\]\:w-full>[data-tgph-button]){width:var(--tgph-spacing-full)}.tgph :is(.\[\&\>\[data-tgph-button\]\]\:rounded-1>[data-tgph-button]){border-radius:var(--tgph-rounded-1)}.tgph :is(.\[\&\>\[data-tgph-button\]\]\:rounded-2>[data-tgph-button]){border-radius:var(--tgph-rounded-2)}.tgph :is(.\[\&\>input\]\:text-gray-9>input){color:var(--tgph-gray-9)}.tgph :is(.\[\&_\[data-tgph-icon\]\]\:text-gray-8 [data-tgph-icon]){color:var(--tgph-gray-8)}
+[data-tgph-input-container]{box-sizing:border-box}[data-tgph-input-slot]{box-sizing:border-box;order:2}[data-tgph-input-slot]>[data-tgph-button]{width:var(--tgph-spacing-full);height:var(--tgph-spacing-auto)}[data-tgph-input-slot]>[data-tgph-button-layout=icon-only]{aspect-ratio:1;padding:var(--tgph-spacing-0)}[data-tgph-input-slot]>[data-tgph-button-layout=default]{padding:var(--tgph-spacing-2)}[data-tgph-input-slot]:has([data-tgph-button-layout=icon-only]){aspect-ratio:1}[data-tgph-input-slot]:has([data-tgph-button-layout=icon-only]){padding:var(--tgph-spacing-1)!important}[data-tgph-input-slot-position=leading]{order:1}[data-tgph-input-slot-position=trailing]{order:3}[data-tgph-input-slot-size="1"]>[data-tgph-button]{border-radius:var(--tgph-rounded-1)}[data-tgph-input-slot-size="2"]>[data-tgph-button]{border-radius:var(--tgph-rounded-1)}[data-tgph-input-slot-size="3"]>[data-tgph-button]{border-radius:var(--tgph-rounded-2)}[data-tgph-input-container-state=disabled]{cursor:not-allowed}[data-tgph-input-field]{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:none;box-shadow:none;order:2;font-family:inherit}

package/dist/esm/index.mjs

@@ -1,57 +1,120 @@
-import { jsx as a, jsxs as b } from "react/jsx-runtime";
-import { Slot as j } from "@radix-ui/react-slot";
-import { useComposedRefs as v } from "@telegraph/compose-refs";
-import { Box as h } from "@telegraph/layout";
-import { Text as T } from "@telegraph/typography";
-import d from "clsx";
-import l from "react";
-const n = {
+import { jsx as n, jsxs as f } from "react/jsx-runtime";
+import { Slot as y } from "@radix-ui/react-slot";
+import { useComposedRefs as T } from "@telegraph/compose-refs";
+import { Stack as b } from "@telegraph/layout";
+import { Text as v } from "@telegraph/typography";
+import i from "react";
+const l = {
   Container: {
-    1: "h-6 pl-0 rounded-2",
-    2: "h-8 pl-0 rounded-2",
-    3: "h-10 pl-0 rounded-3"
-  },
-  Input: {
-    1: "px-1",
-    2: "px-2",
-    3: "px-3"
+    1: {
+      h: "6",
+      pl: "0",
+      rounded: "2"
+    },
+    2: {
+      h: "8",
+      pl: "0",
+      rounded: "2"
+    },
+    3: {
+      h: "10",
+      pl: "0",
+      rounded: "2"
+    }
   },
   Text: {
-    1: "1",
-    2: "2",
-    3: "3"
-  },
-  Slot: {
-    1: "[&>[data-tgph-button]]:rounded-1",
-    2: "[&>[data-tgph-button]]:rounded-1",
-    3: "[&>[data-tgph-button]]:rounded-2"
+    1: {
+      size: "1",
+      px: "1"
+    },
+    2: {
+      size: "2",
+      px: "2"
+    },
+    3: {
+      size: "3",
+      px: "3"
+    }
   },
   SlotLeading: {
-    1: "order-1 pl-1",
-    2: "order-1 pl-2",
-    3: "order-1 pl-3"
+    1: {
+      pl: "1"
+    },
+    2: {
+      pl: "2"
+    },
+    3: {
+      pl: "3"
+    }
   },
   SlotTrailing: {
-    1: "order-3 pr-1",
-    2: "order-3 pr-2",
-    3: "order-3 pr-3"
+    1: {
+      pr: "1"
+    },
+    2: {
+      pr: "2"
+    },
+    3: {
+      pr: "3"
+    }
   }
-}, q = {
+}, g = {
   Container: {
     default: {
-      outline: "bg-surface-1 border-gray-6 hover:border-gray-7 focus-within:!border-blue-8",
-      ghost: "bg-transparent border-transparent hover:bg-gray-3 focus-within:!bg-gray-4 focus-within:!border-blue-8"
+      outline: {
+        bg: "surface-1",
+        border: "px",
+        borderColor: "gray-6",
+        hover_borderColor: "gray-7",
+        focus_within_borderColor: "blue-8"
+      },
+      ghost: {
+        bg: "transparent",
+        border: "px",
+        borderColor: "transparent",
+        hover_backgroundColor: "gray-3",
+        hover_borderColor: "transparent",
+        focus_within_backgroundColor: "gray-4",
+        focus_within_borderColor: "blue-8"
+      }
+    },
+    disabled: {
+      outline: {
+        bg: "gray-2",
+        border: "px",
+        borderColor: "gray-2"
+      },
+      ghost: {
+        bg: "transparent",
+        border: "px",
+        borderColor: "transparent"
+      }
+    },
+    error: {
+      outline: {
+        bg: "surface-1",
+        border: "px",
+        borderColor: "red-6"
+      },
+      ghost: {
+        bg: "transparent",
+        border: "px",
+        borderColor: "red-6"
+      }
+    }
+  },
+  Text: {
+    default: {
+      color: "default"
     },
     disabled: {
-      outline: "cursor-not-allowed bg-gray-2 border-gray-2 [&_[data-tgph-icon]]:text-gray-8 placeholder:text-gray-9 [&>input]:text-gray-9",
-      ghost: "cursor-not-allowed bg-transparent border border-transparent [&_[data-tgph-icon]]:text-gray-8 placeholder:text-gray-9 [&>input]:text-gray-9"
+      color: "disabled"
     },
     error: {
-      outline: "bg-surface-1 border-red-6",
-      ghost: "bg-transparent border-red-6"
+      color: "default"
     }
   }
-}, f = l.createContext({
+}, h = i.createContext({
   state: "default",
   size: "2",
   variant: "outline"
@@ -59,92 +122,85 @@ const n = {
   as: r = "input",
   size: t = "2",
   variant: e = "outline",
-  textProps: o = { size: n.Text[t], color: "default" },
-  className: m,
-  disabled: u,
-  errored: w,
-  children: S,
+  textProps: o,
+  disabled: d,
+  errored: m,
+  children: z,
   tgphRef: R,
-  ...C
+  ...S
 }) => {
-  const z = r, i = l.useRef(null), I = v(R, i), p = u ? "disabled" : w ? "error" : "default";
-  return /* @__PURE__ */ a(f.Provider, { value: { size: t, variant: e, state: p }, children: /* @__PURE__ */ b(
-    h,
+  const _ = r, u = i.useRef(null), w = T(R, u), a = d ? "disabled" : m ? "error" : "default";
+  return /* @__PURE__ */ n(h.Provider, { value: { size: t, variant: e, state: a }, children: /* @__PURE__ */ f(
+    b,
     {
-      className: d(
-        "box-border flex items-center transition-all",
-        "border-[1px] border-solid text-gray-12 placeholder:text-gray-10",
-        q.Container[p][e],
-        n.Container[t]
-      ),
-      onPointerDown: (c) => {
-        if (c.target.closest("button, a")) {
-          c.preventDefault();
+      onPointerDown: (p) => {
+        if (p.target.closest("button, a")) {
+          p.preventDefault();
           return;
         }
-        const g = i.current;
-        g && requestAnimationFrame(() => {
-          g.focus();
+        const c = u.current;
+        c && requestAnimationFrame(() => {
+          c.focus();
         });
       },
+      align: "center",
+      ...l.Container[t],
+      ...g.Container[a][e],
+      "data-tgph-input-container": !0,
+      "data-tgph-input-container-variant": e,
+      "data-tgph-input-container-state": a,
+      "data-tgph-input-container-size": t,
       children: [
-        /* @__PURE__ */ a(
-          T,
+        /* @__PURE__ */ n(
+          v,
           {
-            as: z,
-            className: d(
-              "appearance-none border-none shadow-0 outline-0 bg-transparent",
-              "[font-family:inherit] h-full w-full",
-              "order-2",
-              n.Input[t],
-              m
-            ),
-            disabled: u,
+            as: _,
+            bg: "transparent",
+            shadow: "0",
+            h: "full",
+            w: "full",
+            disabled: d,
+            tgphRef: w,
+            ...l.Text[t],
+            ...g.Text[a],
+            ...S,
             ...o,
-            ...C,
-            tgphRef: I
+            "data-tgph-input-field": !0
           }
         ),
-        S
+        z
       ]
     }
   ) });
-}, s = l.forwardRef(
+}, s = i.forwardRef(
   ({ position: r = "leading", ...t }, e) => {
-    const o = l.useContext(f);
-    return /* @__PURE__ */ a(
-      h,
+    const o = i.useContext(h);
+    return /* @__PURE__ */ n(
+      b,
       {
-        className: d(
-          "group box-border flex items-center justify-center h-full",
-          "[&>[data-tgph-button]]:w-full [&>[data-tgph-button]]:h-auto",
-          // Overrides to match the icon button in figma
-          "[&>[data-tgph-button-layout='icon-only']]:aspect-square [&>[data-tgph-button-layout='icon-only']]:p-0",
-          // Overrides default button layout to match the button in figma
-          "[&>[data-tgph-button-layout='default']]:px-2",
-          // If only an icon button is present, set the aspect ratio to square
-          "[&:has([data-tgph-button-layout='icon-only'])]:aspect-square",
-          // If only an icon button is present, reset the padding to spacing-1
-          "[&:has([data-tgph-button-layout='icon-only'])]:!p-1",
-          r === "leading" && n.SlotLeading[o.size],
-          r === "trailing" && n.SlotTrailing[o.size],
-          n.Slot[t.size ?? o.size]
-        ),
-        children: /* @__PURE__ */ a(j, { size: o.size, ...t, ref: e })
+        align: "center",
+        justify: "center",
+        h: "full",
+        "data-tgph-input-slot": !0,
+        "data-tgph-input-slot-position": r,
+        "data-tgph-input-slot-size": t.size ?? o.size,
+        ...r === "leading" && l.SlotLeading[o.size],
+        ...r === "trailing" && l.SlotTrailing[o.size],
+        children: /* @__PURE__ */ n(y, { size: o.size, ...t, ref: e })
       }
     );
   }
-), y = ({
+), C = ({
   LeadingComponent: r,
   TrailingComponent: t,
   ...e
-}) => /* @__PURE__ */ b(x, { ...e, children: [
-  r && /* @__PURE__ */ a(s, { position: "leading", children: r }),
-  t && /* @__PURE__ */ a(s, { position: "trailing", children: t })
+}) => /* @__PURE__ */ f(x, { ...e, children: [
+  r && /* @__PURE__ */ n(s, { position: "leading", children: r }),
+  t && /* @__PURE__ */ n(s, { position: "trailing", children: t })
 ] });
-Object.assign(y, { Root: x, Slot: s });
-const E = y;
+Object.assign(C, { Root: x, Slot: s });
+const q = C;
 export {
-  E as Input
+  q as Input
 };
 //# sourceMappingURL=index.mjs.map

package/dist/esm/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Input/Input.constants.ts","../../src/Input/Input.tsx"],"sourcesContent":["export const SIZE = {\n  Container: {\n    \"1\": \"h-6 pl-0 rounded-2\",\n    \"2\": \"h-8 pl-0 rounded-2\",\n    \"3\": \"h-10 pl-0 rounded-3\",\n  },\n  Input: {\n    \"1\": \"px-1\",\n    \"2\": \"px-2\",\n    \"3\": \"px-3\",\n  },\n  Text: {\n    \"1\": \"1\",\n    \"2\": \"2\",\n    \"3\": \"3\",\n  },\n  Slot: {\n    \"1\": \"[&>[data-tgph-button]]:rounded-1\",\n    \"2\": \"[&>[data-tgph-button]]:rounded-1\",\n    \"3\": \"[&>[data-tgph-button]]:rounded-2\",\n  },\n  SlotLeading: {\n    \"1\": \"order-1 pl-1\",\n    \"2\": \"order-1 pl-2\",\n    \"3\": \"order-1 pl-3\",\n  },\n  SlotTrailing: {\n    \"1\": \"order-3 pr-1\",\n    \"2\": \"order-3 pr-2\",\n    \"3\": \"order-3 pr-3\",\n  },\n} as const;\n\nexport const COLOR = {\n  Container: {\n    default: {\n      outline:\n        \"bg-surface-1 border-gray-6 hover:border-gray-7 focus-within:!border-blue-8\",\n      ghost:\n        \"bg-transparent border-transparent hover:bg-gray-3 focus-within:!bg-gray-4 focus-within:!border-blue-8\",\n    },\n    disabled: {\n      outline:\n        \"cursor-not-allowed bg-gray-2 border-gray-2 [&_[data-tgph-icon]]:text-gray-8 placeholder:text-gray-9 [&>input]:text-gray-9\",\n      ghost:\n        \"cursor-not-allowed bg-transparent border border-transparent [&_[data-tgph-icon]]:text-gray-8 placeholder:text-gray-9 [&>input]:text-gray-9\",\n    },\n    error: {\n      outline: \"bg-surface-1 border-red-6\",\n      ghost: \"bg-transparent border-red-6\",\n    },\n  },\n} as const;\n","import { Slot as RadixSlot } from \"@radix-ui/react-slot\";\nimport { useComposedRefs } from \"@telegraph/compose-refs\";\nimport type {\n  PolymorphicProps,\n  PolymorphicPropsWithTgphRef,\n  Required,\n  TgphComponentProps,\n  TgphElement,\n} from \"@telegraph/helpers\";\nimport { Box } from \"@telegraph/layout\";\nimport { Text } from \"@telegraph/typography\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport { COLOR, SIZE } from \"./Input.constants\";\n\ntype BaseRootProps = {\n  size?: keyof typeof SIZE.Container;\n  variant?: keyof typeof COLOR.Container.default;\n  errored?: boolean;\n};\n\ntype RootProps<T extends TgphElement> = Omit<\n  PolymorphicPropsWithTgphRef<T, HTMLInputElement>,\n  \"size\"\n> &\n  BaseRootProps & {\n    textProps?: Omit<React.ComponentProps<typeof Text<\"input\">>, \"as\">;\n  };\n\ntype InternalProps = Omit<BaseRootProps, \"errored\"> & {\n  state: \"default\" | \"disabled\" | \"error\";\n};\n\nconst InputContext = React.createContext<Required<InternalProps>>({\n  state: \"default\",\n  size: \"2\",\n  variant: \"outline\",\n});\n\nconst Root = <T extends TgphElement>({\n  as = \"input\" as T,\n  size = \"2\",\n  variant = \"outline\",\n  textProps = { size: SIZE.Text[size], color: \"default\" },\n  className,\n  disabled,\n  errored,\n  children,\n  tgphRef,\n  ...props\n}: RootProps<T>) => {\n  const Component = as;\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const composedRefs = useComposedRefs(tgphRef, inputRef);\n\n  const state = disabled ? \"disabled\" : errored ? \"error\" : \"default\";\n\n  return (\n    <InputContext.Provider value={{ size, variant, state }}>\n      <Box\n        className={clsx(\n          \"box-border flex items-center transition-all\",\n          \"border-[1px] border-solid text-gray-12 placeholder:text-gray-10\",\n          COLOR.Container[state][variant],\n          SIZE.Container[size],\n        )}\n        // Focus the input when clicking on the container\n        onPointerDown={(event: React.MouseEvent<HTMLDivElement>) => {\n          const target = event.target as HTMLElement;\n\n          // Make sure we're not clicking on an interactive element\n          if (target.closest(\"button, a\")) {\n            event.preventDefault();\n            return;\n          }\n\n          const input = inputRef.current;\n          if (!input) return;\n\n          requestAnimationFrame(() => {\n            input.focus();\n          });\n        }}\n      >\n        {/* \n          We choose to use the `<Text/>` component as a base here so that we can \n          configure the text inside of the input to match the design system font sizes\n        */}\n        <Text\n          as={Component}\n          className={clsx(\n            \"appearance-none border-none shadow-0 outline-0 bg-transparent\",\n            \"[font-family:inherit] h-full w-full\",\n            \"order-2\",\n            SIZE.Input[size],\n            className,\n          )}\n          disabled={disabled}\n          {...textProps}\n          {...props}\n          tgphRef={composedRefs}\n        />\n        {children}\n      </Box>\n    </InputContext.Provider>\n  );\n};\n\ntype SlotProps = React.ComponentPropsWithoutRef<typeof RadixSlot> & {\n  size?: keyof typeof SIZE.Slot;\n  position?: \"leading\" | \"trailing\";\n};\ntype SlotRef = React.ElementRef<typeof RadixSlot>;\n\nconst Slot = React.forwardRef<SlotRef, SlotProps>(\n  ({ position = \"leading\", ...props }, forwardedRef) => {\n    const context = React.useContext(InputContext);\n    return (\n      <Box\n        className={clsx(\n          \"group box-border flex items-center justify-center h-full\",\n          \"[&>[data-tgph-button]]:w-full [&>[data-tgph-button]]:h-auto\",\n          // Overrides to match the icon button in figma\n          \"[&>[data-tgph-button-layout='icon-only']]:aspect-square [&>[data-tgph-button-layout='icon-only']]:p-0\",\n          // Overrides default button layout to match the button in figma\n          \"[&>[data-tgph-button-layout='default']]:px-2\",\n          // If only an icon button is present, set the aspect ratio to square\n          \"[&:has([data-tgph-button-layout='icon-only'])]:aspect-square\",\n          // If only an icon button is present, reset the padding to spacing-1\n          \"[&:has([data-tgph-button-layout='icon-only'])]:!p-1\",\n          position === \"leading\" && SIZE.SlotLeading[context.size],\n          position === \"trailing\" && SIZE.SlotTrailing[context.size],\n          SIZE.Slot[props.size ?? context.size],\n        )}\n      >\n        <RadixSlot size={context.size} {...props} ref={forwardedRef} />\n      </Box>\n    );\n  },\n);\n\ntype DefaultProps<T extends TgphElement> = PolymorphicProps<T> &\n  TgphComponentProps<typeof Root> & {\n    LeadingComponent?: React.ReactNode;\n    TrailingComponent?: React.ReactNode;\n  };\n\nconst Default = <T extends TgphElement>({\n  LeadingComponent,\n  TrailingComponent,\n  ...props\n}: DefaultProps<T>) => {\n  return (\n    <Root {...props}>\n      {LeadingComponent && <Slot position=\"leading\">{LeadingComponent}</Slot>}\n      {TrailingComponent && (\n        <Slot position=\"trailing\">{TrailingComponent}</Slot>\n      )}\n    </Root>\n  );\n};\n\nObject.assign(Default, { Root, Slot });\n\nconst Input = Default as typeof Default & {\n  Root: typeof Root;\n  Slot: typeof Slot;\n};\n\nexport { Input };\n"],"names":["SIZE","COLOR","InputContext","React","Root","as","size","variant","textProps","className","disabled","errored","children","tgphRef","props","Component","inputRef","composedRefs","useComposedRefs","state","jsx","jsxs","Box","clsx","event","input","Text","Slot","position","forwardedRef","context","RadixSlot","Default","LeadingComponent","TrailingComponent","Input"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/Input/Input.constants.ts","../../src/Input/Input.tsx"],"sourcesContent":["export const SIZE = {\n  Container: {\n    \"1\": {\n      h: \"6\",\n      pl: \"0\",\n      rounded: \"2\",\n    },\n    \"2\": {\n      h: \"8\",\n      pl: \"0\",\n      rounded: \"2\",\n    },\n    \"3\": {\n      h: \"10\",\n      pl: \"0\",\n      rounded: \"2\",\n    },\n  },\n  Text: {\n    \"1\": {\n      size: \"1\",\n      px: \"1\",\n    },\n    \"2\": {\n      size: \"2\",\n      px: \"2\",\n    },\n    \"3\": {\n      size: \"3\",\n      px: \"3\",\n    },\n  },\n  SlotLeading: {\n    \"1\": {\n      pl: \"1\",\n    },\n    \"2\": {\n      pl: \"2\",\n    },\n    \"3\": {\n      pl: \"3\",\n    },\n  },\n  SlotTrailing: {\n    \"1\": {\n      pr: \"1\",\n    },\n    \"2\": {\n      pr: \"2\",\n    },\n    \"3\": {\n      pr: \"3\",\n    },\n  },\n} as const;\n\nexport const COLOR = {\n  Container: {\n    default: {\n      outline: {\n        bg: \"surface-1\",\n        border: \"px\",\n        borderColor: \"gray-6\",\n        hover_borderColor: \"gray-7\",\n        focus_within_borderColor: \"blue-8\",\n      },\n      ghost: {\n        bg: \"transparent\",\n        border: \"px\",\n        borderColor: \"transparent\",\n        hover_backgroundColor: \"gray-3\",\n        hover_borderColor: \"transparent\",\n        focus_within_backgroundColor: \"gray-4\",\n        focus_within_borderColor: \"blue-8\",\n      },\n    },\n    disabled: {\n      outline: {\n        bg: \"gray-2\",\n        border: \"px\",\n        borderColor: \"gray-2\",\n      },\n      ghost: {\n        bg: \"transparent\",\n        border: \"px\",\n        borderColor: \"transparent\",\n      },\n    },\n    error: {\n      outline: {\n        bg: \"surface-1\",\n        border: \"px\",\n        borderColor: \"red-6\",\n      },\n      ghost: {\n        bg: \"transparent\",\n        border: \"px\",\n        borderColor: \"red-6\",\n      },\n    },\n  },\n  Text: {\n    default: {\n      color: \"default\",\n    },\n    disabled: {\n      color: \"disabled\",\n    },\n    error: {\n      color: \"default\",\n    },\n  },\n} as const;\n","import { Slot as RadixSlot } from \"@radix-ui/react-slot\";\nimport { useComposedRefs } from \"@telegraph/compose-refs\";\nimport type {\n  PolymorphicProps,\n  Required,\n  TgphComponentProps,\n  TgphElement,\n} from \"@telegraph/helpers\";\nimport { Stack } from \"@telegraph/layout\";\nimport { Text } from \"@telegraph/typography\";\nimport React from \"react\";\n\nimport { COLOR, SIZE } from \"./Input.constants\";\n\ntype BaseRootProps = {\n  size?: \"1\" | \"2\" | \"3\";\n  variant?: \"outline\" | \"ghost\";\n  errored?: boolean;\n};\n\ntype RootProps<T extends TgphElement> = BaseRootProps & {\n  textProps?: Omit<React.ComponentProps<typeof Text<T>>, \"as\">;\n} & Omit<React.ComponentProps<typeof Text<T>>, \"as\">;\n\ntype InternalProps = Omit<BaseRootProps, \"errored\"> & {\n  state: \"default\" | \"disabled\" | \"error\";\n};\n\nconst InputContext = React.createContext<Required<InternalProps>>({\n  state: \"default\",\n  size: \"2\",\n  variant: \"outline\",\n});\n\nconst Root = <T extends TgphElement>({\n  as = \"input\" as T,\n  size = \"2\",\n  variant = \"outline\",\n  textProps,\n  disabled,\n  errored,\n  children,\n  tgphRef,\n  ...props\n}: RootProps<T>) => {\n  const Component = as;\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const composedRefs = useComposedRefs(tgphRef, inputRef);\n\n  const state = disabled ? \"disabled\" : errored ? \"error\" : \"default\";\n\n  return (\n    <InputContext.Provider value={{ size, variant, state }}>\n      <Stack\n        // Focus the input when clicking on the container\n        onPointerDown={(event: React.MouseEvent<HTMLDivElement>) => {\n          const target = event.target as HTMLElement;\n\n          // Make sure we're not clicking on an interactive element\n          if (target.closest(\"button, a\")) {\n            event.preventDefault();\n            return;\n          }\n\n          const input = inputRef.current;\n          if (!input) return;\n\n          requestAnimationFrame(() => {\n            input.focus();\n          });\n        }}\n        align=\"center\"\n        {...SIZE.Container[size]}\n        {...COLOR.Container[state][variant]}\n        data-tgph-input-container\n        data-tgph-input-container-variant={variant}\n        data-tgph-input-container-state={state}\n        data-tgph-input-container-size={size}\n      >\n        {/* \n          We choose to use the `<Text/>` component as a base here so that we can \n          configure the text inside of the input to match the design system font sizes\n        */}\n        <Text\n          as={Component}\n          bg=\"transparent\"\n          shadow=\"0\"\n          h=\"full\"\n          w=\"full\"\n          disabled={disabled}\n          tgphRef={composedRefs}\n          {...SIZE.Text[size]}\n          {...COLOR.Text[state]}\n          {...props}\n          {...textProps}\n          data-tgph-input-field\n        />\n        {children}\n      </Stack>\n    </InputContext.Provider>\n  );\n};\n\ntype SlotProps = React.ComponentPropsWithoutRef<typeof RadixSlot> & {\n  size?: \"1\" | \"2\" | \"3\";\n  position?: \"leading\" | \"trailing\";\n};\ntype SlotRef = React.ElementRef<typeof RadixSlot>;\n\nconst Slot = React.forwardRef<SlotRef, SlotProps>(\n  ({ position = \"leading\", ...props }, forwardedRef) => {\n    const context = React.useContext(InputContext);\n    return (\n      <Stack\n        align=\"center\"\n        justify=\"center\"\n        h=\"full\"\n        data-tgph-input-slot\n        data-tgph-input-slot-position={position}\n        data-tgph-input-slot-size={props.size ?? context.size}\n        {...(position === \"leading\" && SIZE.SlotLeading[context.size])}\n        {...(position === \"trailing\" && SIZE.SlotTrailing[context.size])}\n      >\n        <RadixSlot size={context.size} {...props} ref={forwardedRef} />\n      </Stack>\n    );\n  },\n);\n\ntype DefaultProps<T extends TgphElement> = PolymorphicProps<T> &\n  TgphComponentProps<typeof Root> & {\n    LeadingComponent?: React.ReactNode;\n    TrailingComponent?: React.ReactNode;\n  };\n\nconst Default = <T extends TgphElement>({\n  LeadingComponent,\n  TrailingComponent,\n  ...props\n}: DefaultProps<T>) => {\n  return (\n    <Root {...props}>\n      {LeadingComponent && <Slot position=\"leading\">{LeadingComponent}</Slot>}\n      {TrailingComponent && (\n        <Slot position=\"trailing\">{TrailingComponent}</Slot>\n      )}\n    </Root>\n  );\n};\n\nObject.assign(Default, { Root, Slot });\n\nconst Input = Default as typeof Default & {\n  Root: typeof Root;\n  Slot: typeof Slot;\n};\n\nexport { Input };\n"],"names":["SIZE","COLOR","InputContext","React","Root","as","size","variant","textProps","disabled","errored","children","tgphRef","props","Component","inputRef","composedRefs","useComposedRefs","state","jsx","jsxs","Stack","event","input","Text","Slot","position","forwardedRef","context","RadixSlot","Default","LeadingComponent","TrailingComponent","Input"],"mappings":"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"}

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

@@ -1,48 +1,112 @@
 export declare const SIZE: {
     readonly Container: {
-        readonly "1": "h-6 pl-0 rounded-2";
-        readonly "2": "h-8 pl-0 rounded-2";
-        readonly "3": "h-10 pl-0 rounded-3";
-    };
-    readonly Input: {
-        readonly "1": "px-1";
-        readonly "2": "px-2";
-        readonly "3": "px-3";
+        readonly "1": {
+            readonly h: "6";
+            readonly pl: "0";
+            readonly rounded: "2";
+        };
+        readonly "2": {
+            readonly h: "8";
+            readonly pl: "0";
+            readonly rounded: "2";
+        };
+        readonly "3": {
+            readonly h: "10";
+            readonly pl: "0";
+            readonly rounded: "2";
+        };
     };
     readonly Text: {
-        readonly "1": "1";
-        readonly "2": "2";
-        readonly "3": "3";
-    };
-    readonly Slot: {
-        readonly "1": "[&>[data-tgph-button]]:rounded-1";
-        readonly "2": "[&>[data-tgph-button]]:rounded-1";
-        readonly "3": "[&>[data-tgph-button]]:rounded-2";
+        readonly "1": {
+            readonly size: "1";
+            readonly px: "1";
+        };
+        readonly "2": {
+            readonly size: "2";
+            readonly px: "2";
+        };
+        readonly "3": {
+            readonly size: "3";
+            readonly px: "3";
+        };
     };
     readonly SlotLeading: {
-        readonly "1": "order-1 pl-1";
-        readonly "2": "order-1 pl-2";
-        readonly "3": "order-1 pl-3";
+        readonly "1": {
+            readonly pl: "1";
+        };
+        readonly "2": {
+            readonly pl: "2";
+        };
+        readonly "3": {
+            readonly pl: "3";
+        };
     };
     readonly SlotTrailing: {
-        readonly "1": "order-3 pr-1";
-        readonly "2": "order-3 pr-2";
-        readonly "3": "order-3 pr-3";
+        readonly "1": {
+            readonly pr: "1";
+        };
+        readonly "2": {
+            readonly pr: "2";
+        };
+        readonly "3": {
+            readonly pr: "3";
+        };
     };
 };
 export declare const COLOR: {
     readonly Container: {
         readonly default: {
-            readonly outline: "bg-surface-1 border-gray-6 hover:border-gray-7 focus-within:!border-blue-8";
-            readonly ghost: "bg-transparent border-transparent hover:bg-gray-3 focus-within:!bg-gray-4 focus-within:!border-blue-8";
+            readonly outline: {
+                readonly bg: "surface-1";
+                readonly border: "px";
+                readonly borderColor: "gray-6";
+                readonly hover_borderColor: "gray-7";
+                readonly focus_within_borderColor: "blue-8";
+            };
+            readonly ghost: {
+                readonly bg: "transparent";
+                readonly border: "px";
+                readonly borderColor: "transparent";
+                readonly hover_backgroundColor: "gray-3";
+                readonly hover_borderColor: "transparent";
+                readonly focus_within_backgroundColor: "gray-4";
+                readonly focus_within_borderColor: "blue-8";
+            };
+        };
+        readonly disabled: {
+            readonly outline: {
+                readonly bg: "gray-2";
+                readonly border: "px";
+                readonly borderColor: "gray-2";
+            };
+            readonly ghost: {
+                readonly bg: "transparent";
+                readonly border: "px";
+                readonly borderColor: "transparent";
+            };
+        };
+        readonly error: {
+            readonly outline: {
+                readonly bg: "surface-1";
+                readonly border: "px";
+                readonly borderColor: "red-6";
+            };
+            readonly ghost: {
+                readonly bg: "transparent";
+                readonly border: "px";
+                readonly borderColor: "red-6";
+            };
+        };
+    };
+    readonly Text: {
+        readonly default: {
+            readonly color: "default";
         };
         readonly disabled: {
-            readonly outline: "cursor-not-allowed bg-gray-2 border-gray-2 [&_[data-tgph-icon]]:text-gray-8 placeholder:text-gray-9 [&>input]:text-gray-9";
-            readonly ghost: "cursor-not-allowed bg-transparent border border-transparent [&_[data-tgph-icon]]:text-gray-8 placeholder:text-gray-9 [&>input]:text-gray-9";
+            readonly color: "disabled";
         };
         readonly error: {
-            readonly outline: "bg-surface-1 border-red-6";
-            readonly ghost: "bg-transparent border-red-6";
+            readonly color: "default";
         };
     };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Input.constants.d.ts","sourceRoot":"","sources":["../../../src/Input/Input.constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BP,CAAC;AAEX,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;CAmBR,CAAC"}
+{"version":3,"file":"Input.constants.d.ts","sourceRoot":"","sources":["../../../src/Input/Input.constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsDP,CAAC;AAEX,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDR,CAAC"}

package/dist/types/Input/Input.d.ts

@@ -1,18 +1,17 @@
-import { PolymorphicProps, PolymorphicPropsWithTgphRef, TgphComponentProps, TgphElement } from '@telegraph/helpers';
+import { PolymorphicProps, TgphComponentProps, TgphElement } from '@telegraph/helpers';
 import { Text } from '@telegraph/typography';
 import { default as React } from 'react';
-import { COLOR, SIZE } from './Input.constants';
 type BaseRootProps = {
-    size?: keyof typeof SIZE.Container;
-    variant?: keyof typeof COLOR.Container.default;
+    size?: "1" | "2" | "3";
+    variant?: "outline" | "ghost";
     errored?: boolean;
 };
-type RootProps<T extends TgphElement> = Omit<PolymorphicPropsWithTgphRef<T, HTMLInputElement>, "size"> & BaseRootProps & {
-    textProps?: Omit<React.ComponentProps<typeof Text<"input">>, "as">;
-};
-declare const Root: <T extends TgphElement>({ as, size, variant, textProps, className, disabled, errored, children, tgphRef, ...props }: RootProps<T>) => import("react/jsx-runtime").JSX.Element;
+type RootProps<T extends TgphElement> = BaseRootProps & {
+    textProps?: Omit<React.ComponentProps<typeof Text<T>>, "as">;
+} & Omit<React.ComponentProps<typeof Text<T>>, "as">;
+declare const Root: <T extends TgphElement>({ as, size, variant, textProps, disabled, errored, children, tgphRef, ...props }: RootProps<T>) => import("react/jsx-runtime").JSX.Element;
 declare const Slot: React.ForwardRefExoticComponent<Omit<import('@radix-ui/react-slot').SlotProps & React.RefAttributes<HTMLElement>, "ref"> & {
-    size?: keyof typeof SIZE.Slot;
+    size?: "1" | "2" | "3";
     position?: "leading" | "trailing";
 } & React.RefAttributes<HTMLElement>>;
 type DefaultProps<T extends TgphElement> = PolymorphicProps<T> & TgphComponentProps<typeof Root> & {

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

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/Input/Input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,gBAAgB,EAChB,2BAA2B,EAE3B,kBAAkB,EAClB,WAAW,EACZ,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAE7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEhD,KAAK,aAAa,GAAG;IACnB,IAAI,CAAC,EAAE,MAAM,OAAO,IAAI,CAAC,SAAS,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,OAAO,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,KAAK,SAAS,CAAC,CAAC,SAAS,WAAW,IAAI,IAAI,CAC1C,2BAA2B,CAAC,CAAC,EAAE,gBAAgB,CAAC,EAChD,MAAM,CACP,GACC,aAAa,GAAG;IACd,SAAS,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;CACpE,CAAC;AAYJ,QAAA,MAAM,IAAI,GAAI,CAAC,SAAS,WAAW,+FAWhC,SAAS,CAAC,CAAC,CAAC,4CAwDd,CAAC;AAQF,QAAA,MAAM,IAAI;WALD,MAAM,OAAO,IAAI,CAAC,IAAI;eAClB,SAAS,GAAG,UAAU;qCA6BlC,CAAC;AAEF,KAAK,YAAY,CAAC,CAAC,SAAS,WAAW,IAAI,gBAAgB,CAAC,CAAC,CAAC,GAC5D,kBAAkB,CAAC,OAAO,IAAI,CAAC,GAAG;IAChC,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACrC,CAAC;AAEJ,QAAA,MAAM,OAAO,GAAI,CAAC,SAAS,WAAW,qDAInC,YAAY,CAAC,CAAC,CAAC,4CASjB,CAAC;AAIF,QAAA,MAAM,KAAK,EAAc,OAAO,OAAO,GAAG;IACxC,IAAI,EAAE,OAAO,IAAI,CAAC;IAClB,IAAI,EAAE,OAAO,IAAI,CAAC;CACnB,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/Input/Input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,gBAAgB,EAEhB,kBAAkB,EAClB,WAAW,EACZ,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,KAAK,aAAa,GAAG;IACnB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,KAAK,SAAS,CAAC,CAAC,SAAS,WAAW,IAAI,aAAa,GAAG;IACtD,SAAS,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;CAC9D,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;AAYrD,QAAA,MAAM,IAAI,GAAI,CAAC,SAAS,WAAW,oFAUhC,SAAS,CAAC,CAAC,CAAC,4CAyDd,CAAC;AAQF,QAAA,MAAM,IAAI;WALD,GAAG,GAAG,GAAG,GAAG,GAAG;eACX,SAAS,GAAG,UAAU;qCAsBlC,CAAC;AAEF,KAAK,YAAY,CAAC,CAAC,SAAS,WAAW,IAAI,gBAAgB,CAAC,CAAC,CAAC,GAC5D,kBAAkB,CAAC,OAAO,IAAI,CAAC,GAAG;IAChC,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACrC,CAAC;AAEJ,QAAA,MAAM,OAAO,GAAI,CAAC,SAAS,WAAW,qDAInC,YAAY,CAAC,CAAC,CAAC,4CASjB,CAAC;AAIF,QAAA,MAAM,KAAK,EAAc,OAAO,OAAO,GAAG;IACxC,IAAI,EAAE,OAAO,IAAI,CAAC;IAClB,IAAI,EAAE,OAAO,IAAI,CAAC;CACnB,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telegraph/input",
-  "version": "0.0.47",
+  "version": "0.0.49",
   "description": "Input component for Telegraph",
   "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/input",
   "author": "@knocklabs",
@@ -35,16 +35,15 @@
     "@radix-ui/react-slot": "^1.2.3",
     "@telegraph/compose-refs": "^0.0.7",
     "@telegraph/helpers": "^0.0.13",
-    "@telegraph/layout": "^0.1.20",
-    "@telegraph/typography": "^0.1.20",
+    "@telegraph/layout": "^0.2.0",
+    "@telegraph/typography": "^0.1.22",
     "clsx": "^2.1.1"
   },
   "devDependencies": {
     "@knocklabs/eslint-config": "^0.0.4",
     "@knocklabs/typescript-config": "^0.0.2",
-    "@telegraph/postcss-config": "^0.0.26",
+    "@telegraph/postcss-config": "^0.0.28",
     "@telegraph/prettier-config": "^0.0.7",
-    "@telegraph/tailwind-config": "^0.0.13",
     "@telegraph/vite-config": "^0.0.15",
     "@types/react": "^18.3.18",
     "eslint": "^8.56.0",