@discourser/design-system 0.2.2 → 0.3.0

package/README.md

@@ -584,6 +584,59 @@ pnpm test --ui     # Open Vitest UI
 | `pnpm typecheck` | TypeScript validation |
 | `pnpm lint` | ESLint |
 
+## 🔄 Token Workflow
+
+This design system uses [figma-token-sync](https://github.com/yourusername/figma-token-sync) for bidirectional token synchronization with Figma.
+
+### After Exporting from Figma
+
+1. **Export from Figma**
+   - Run figma-token-sync plugin → Export
+   - Save files to Downloads (or remember location)
+
+2. **Organize tokens**
+   ```bash
+   pnpm organize-tokens
+   ```
+   - Provide paths when prompted
+   - Review summary
+
+3. **Rebuild design system**
+   ```bash
+   pnpm build:panda
+   ```
+
+4. **Test in Storybook**
+   ```bash
+   pnpm dev
+   ```
+
+5. **Commit changes**
+   ```bash
+   git add tokens/
+   git commit -m "chore: update tokens from Figma"
+   ```
+
+### Importing to Figma
+
+1. **Generate DTCG tokens**
+   ```bash
+   pnpm transform:contract-to-dtcg
+   ```
+
+2. **Open figma-token-sync plugin**
+   - Click "Import"
+   - Browse to `tokens/tokens.json`
+   - Plugin creates/updates Figma variables
+
+### Token Files
+
+- `tokens/primitives-generated.json` - Primitive color tokens from Figma (not in git)
+- `tokens/semantic-light-generated.json` - Light mode semantic tokens (not in git)
+- `tokens/semantic-dark-generated.json` - Dark mode semantic tokens (not in git)
+- `tokens/tokens.json` - Combined token file for import to Figma (not in git)
+- `src/languages/material3.language.ts` - Source of truth (in git)
+
 ## 🤝 Contributing
 
 ### Development Workflow

package/dist/index.cjs

@@ -11,11 +11,11 @@ var dialog = require('@ark-ui/react/dialog');
 var _switch = require('@ark-ui/react/switch');
 var accordion = require('@ark-ui/react/accordion');
 var tabs = require('@ark-ui/react/tabs');
+var field = require('@ark-ui/react/field');
 var checkbox = require('@ark-ui/react/checkbox');
 var radioGroup = require('@ark-ui/react/radio-group');
 var select = require('@ark-ui/react/select');
 var slider = require('@ark-ui/react/slider');
-var field = require('@ark-ui/react/field');
 var avatar = require('@ark-ui/react/avatar');
 var progress = require('@ark-ui/react/progress');
 var portal = require('@ark-ui/react/portal');
@@ -281,6 +281,26 @@ var List = withContext6(tabs.Tabs.List, "list");
 var Trigger3 = withContext6(tabs.Tabs.Trigger, "trigger");
 var Content3 = withContext6(tabs.Tabs.Content, "content");
 var Indicator = withContext6(tabs.Tabs.Indicator, "indicator");
+var Input = jsx.styled(field.Field.Input, recipes.input);
+var InputAddon = jsx.styled(factory.ark.div, recipes.inputAddon);
+var { withProvider: withProvider5, withContext: withContext7 } = jsx.createStyleContext(recipes.inputGroup);
+var Root7 = withProvider5(factory.ark.div, "root");
+var Element = withContext7(factory.ark.div, "element");
+var InputGroupRoot = react$1.forwardRef(
+  function InputGroup(props, ref) {
+    const { startElement, endElement, children, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root7, { ref, ...rest, children: [
+      startElement && /* @__PURE__ */ jsxRuntime.jsx(Element, { insetInlineStart: "0", top: "0", children: startElement }),
+      children,
+      endElement && /* @__PURE__ */ jsxRuntime.jsx(Element, { insetInlineEnd: "0", top: "0", children: endElement })
+    ] });
+  }
+);
+var InputGroup2 = Object.assign(InputGroupRoot, {
+  Root: Root7,
+  Element
+});
+var Textarea = jsx.styled(field.Field.Textarea, recipes.textarea);
 
 // src/components/Checkbox.tsx
 var Checkbox_exports = {};
@@ -291,15 +311,15 @@ __export(Checkbox_exports, {
   HiddenInput: () => HiddenInput2,
   Indicator: () => Indicator2,
   Label: () => Label2,
-  Root: () => Root7,
+  Root: () => Root8,
   RootProvider: () => RootProvider4
 });
-var { withProvider: withProvider5, withContext: withContext7 } = jsx.createStyleContext(recipes.checkbox);
-var Root7 = withProvider5(checkbox.Checkbox.Root, "root");
-var RootProvider4 = withProvider5(checkbox.Checkbox.RootProvider, "root");
-var Control2 = withContext7(checkbox.Checkbox.Control, "control");
-var Group2 = withProvider5(checkbox.Checkbox.Group, "group");
-var Label2 = withContext7(checkbox.Checkbox.Label, "label");
+var { withProvider: withProvider6, withContext: withContext8 } = jsx.createStyleContext(recipes.checkbox);
+var Root8 = withProvider6(checkbox.Checkbox.Root, "root");
+var RootProvider4 = withProvider6(checkbox.Checkbox.RootProvider, "root");
+var Control2 = withContext8(checkbox.Checkbox.Control, "control");
+var Group2 = withProvider6(checkbox.Checkbox.Group, "group");
+var Label2 = withContext8(checkbox.Checkbox.Label, "label");
 var HiddenInput2 = checkbox.Checkbox.HiddenInput;
 var Indicator2 = react$1.forwardRef(
   function Indicator3(props, ref) {
@@ -334,17 +354,17 @@ __export(RadioGroup_exports, {
   ItemHiddenInput: () => ItemHiddenInput,
   ItemText: () => ItemText,
   Label: () => Label3,
-  Root: () => Root8,
+  Root: () => Root9,
   RootProvider: () => RootProvider5
 });
-var { withProvider: withProvider6, withContext: withContext8 } = jsx.createStyleContext(recipes.radioGroup);
-var Root8 = withProvider6(radioGroup.RadioGroup.Root, "root");
-var RootProvider5 = withProvider6(radioGroup.RadioGroup.RootProvider, "root");
-var Indicator4 = withContext8(radioGroup.RadioGroup.Indicator, "indicator");
-var Item2 = withContext8(radioGroup.RadioGroup.Item, "item");
-var ItemControl = withContext8(radioGroup.RadioGroup.ItemControl, "itemControl");
-var ItemText = withContext8(radioGroup.RadioGroup.ItemText, "itemText");
-var Label3 = withContext8(radioGroup.RadioGroup.Label, "label");
+var { withProvider: withProvider7, withContext: withContext9 } = jsx.createStyleContext(recipes.radioGroup);
+var Root9 = withProvider7(radioGroup.RadioGroup.Root, "root");
+var RootProvider5 = withProvider7(radioGroup.RadioGroup.RootProvider, "root");
+var Indicator4 = withContext9(radioGroup.RadioGroup.Indicator, "indicator");
+var Item2 = withContext9(radioGroup.RadioGroup.Item, "item");
+var ItemControl = withContext9(radioGroup.RadioGroup.ItemControl, "itemControl");
+var ItemText = withContext9(radioGroup.RadioGroup.ItemText, "itemText");
+var Label3 = withContext9(radioGroup.RadioGroup.Label, "label");
 var ItemHiddenInput = radioGroup.RadioGroup.ItemHiddenInput;
 
 // src/components/Select.tsx
@@ -366,35 +386,35 @@ __export(Select_exports, {
   Label: () => Label4,
   List: () => List2,
   Positioner: () => Positioner3,
-  Root: () => Root9,
+  Root: () => Root10,
   Trigger: () => Trigger4,
   ValueText: () => ValueText
 });
-var { withProvider: withProvider7, withContext: withContext9 } = jsx.createStyleContext(recipes.select);
+var { withProvider: withProvider8, withContext: withContext10 } = jsx.createStyleContext(recipes.select);
 var CheckIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) });
 var ChevronsUpDownIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m7 15 5 5 5-5" }),
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m7 9 5-5 5 5" })
 ] });
-var Root9 = withProvider7(select.Select.Root, "root");
-var ClearTrigger = withContext9(select.Select.ClearTrigger, "clearTrigger");
-var Content4 = withContext9(select.Select.Content, "content");
-var Control3 = withContext9(select.Select.Control, "control");
-var IndicatorGroup = withContext9(factory.ark.div, "indicatorGroup");
-var Item3 = withContext9(select.Select.Item, "item");
-var ItemGroup = withContext9(select.Select.ItemGroup, "itemGroup");
-var ItemGroupLabel = withContext9(select.Select.ItemGroupLabel, "itemGroupLabel");
-var ItemText2 = withContext9(select.Select.ItemText, "itemText");
-var Label4 = withContext9(select.Select.Label, "label");
-var List2 = withContext9(select.Select.List, "list");
-var Positioner3 = withContext9(select.Select.Positioner, "positioner");
-var Trigger4 = withContext9(select.Select.Trigger, "trigger");
-var ValueText = withContext9(select.Select.ValueText, "valueText");
-var Indicator5 = withContext9(select.Select.Indicator, "indicator", {
+var Root10 = withProvider8(select.Select.Root, "root");
+var ClearTrigger = withContext10(select.Select.ClearTrigger, "clearTrigger");
+var Content4 = withContext10(select.Select.Content, "content");
+var Control3 = withContext10(select.Select.Control, "control");
+var IndicatorGroup = withContext10(factory.ark.div, "indicatorGroup");
+var Item3 = withContext10(select.Select.Item, "item");
+var ItemGroup = withContext10(select.Select.ItemGroup, "itemGroup");
+var ItemGroupLabel = withContext10(select.Select.ItemGroupLabel, "itemGroupLabel");
+var ItemText2 = withContext10(select.Select.ItemText, "itemText");
+var Label4 = withContext10(select.Select.Label, "label");
+var List2 = withContext10(select.Select.List, "list");
+var Positioner3 = withContext10(select.Select.Positioner, "positioner");
+var Trigger4 = withContext10(select.Select.Trigger, "trigger");
+var ValueText = withContext10(select.Select.ValueText, "valueText");
+var Indicator5 = withContext10(select.Select.Indicator, "indicator", {
   defaultProps: { children: /* @__PURE__ */ jsxRuntime.jsx(ChevronsUpDownIcon, {}) }
 });
 var HiddenSelect = select.Select.HiddenSelect;
-var StyledItemIndicator = withContext9(select.Select.ItemIndicator, "itemIndicator");
+var StyledItemIndicator = withContext10(select.Select.ItemIndicator, "itemIndicator");
 var ItemIndicator2 = react$1.forwardRef(
   function ItemIndicator3(props, ref) {
     const item = select.useSelectItemContext();
@@ -415,14 +435,14 @@ __export(Slider_exports, {
   MarkerIndicator: () => MarkerIndicator,
   Marks: () => Marks,
   Range: () => Range,
-  Root: () => Root10,
+  Root: () => Root11,
   Thumb: () => Thumb2,
   Thumbs: () => Thumbs,
   Track: () => Track,
   ValueText: () => ValueText2
 });
 var StyleContextInternal = react$1.createContext(null);
-var Root10 = react$1.forwardRef(
+var Root11 = react$1.forwardRef(
   function SliderRoot(props, ref) {
     const { orientation, size, variant, colorPalette, className, ...arkProps } = props;
     const styles = recipes.slider({ orientation, size, variant });
@@ -519,36 +539,29 @@ var Thumbs = (props) => {
   return slider2.value.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(Thumb2, { index, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(HiddenInput3, {}) }, index));
 };
 
-// src/components/Textarea.tsx
-var Textarea_exports = {};
-__export(Textarea_exports, {
-  Textarea: () => Textarea
-});
-var Textarea = jsx.styled(field.Field.Textarea, recipes.textarea);
-
 // src/components/Avatar.tsx
 var Avatar_exports = {};
 __export(Avatar_exports, {
   Context: () => avatar.AvatarContext,
   Fallback: () => Fallback,
   Image: () => Image,
-  Root: () => Root11,
+  Root: () => Root12,
   RootProvider: () => RootProvider6
 });
 var UserIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }),
   /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "7", r: "4" })
 ] });
-var { withProvider: withProvider8, withContext: withContext10 } = jsx.createStyleContext(recipes.avatar);
-var Root11 = withProvider8(avatar.Avatar.Root, "root");
-var RootProvider6 = withProvider8(avatar.Avatar.RootProvider, "root");
-var Image = withContext10(avatar.Avatar.Image, "image", {
+var { withProvider: withProvider9, withContext: withContext11 } = jsx.createStyleContext(recipes.avatar);
+var Root12 = withProvider9(avatar.Avatar.Root, "root");
+var RootProvider6 = withProvider9(avatar.Avatar.RootProvider, "root");
+var Image = withContext11(avatar.Avatar.Image, "image", {
   defaultProps: {
     draggable: "false",
     referrerPolicy: "no-referrer"
   }
 });
-var StyledFallback = withContext10(avatar.Avatar.Fallback, "fallback");
+var StyledFallback = withContext11(avatar.Avatar.Fallback, "fallback");
 var Fallback = react$1.forwardRef(function Fallback2(props, ref) {
   const { name, children, asChild, ...rest } = props;
   const fallbackContent = children || asChild ? children : name ? getInitials(name) : /* @__PURE__ */ jsxRuntime.jsx(UserIcon, {});
@@ -576,23 +589,23 @@ __export(Progress_exports, {
   CircleTrack: () => CircleTrack,
   Label: () => Label6,
   Range: () => Range2,
-  Root: () => Root12,
+  Root: () => Root13,
   RootProvider: () => RootProvider7,
   Track: () => Track2,
   ValueText: () => ValueText3,
   View: () => View
 });
-var { withProvider: withProvider9, withContext: withContext11 } = jsx.createStyleContext(recipes.progress);
-var Root12 = withProvider9(progress.Progress.Root, "root");
-var RootProvider7 = withProvider9(progress.Progress.RootProvider, "root");
-var Circle = withContext11(progress.Progress.Circle, "circle");
-var CircleRange = withContext11(progress.Progress.CircleRange, "circleRange");
-var CircleTrack = withContext11(progress.Progress.CircleTrack, "circleTrack");
-var Label6 = withContext11(progress.Progress.Label, "label");
-var Range2 = withContext11(progress.Progress.Range, "range");
-var Track2 = withContext11(progress.Progress.Track, "track");
-var ValueText3 = withContext11(progress.Progress.ValueText, "valueText");
-var View = withContext11(progress.Progress.View, "view");
+var { withProvider: withProvider10, withContext: withContext12 } = jsx.createStyleContext(recipes.progress);
+var Root13 = withProvider10(progress.Progress.Root, "root");
+var RootProvider7 = withProvider10(progress.Progress.RootProvider, "root");
+var Circle = withContext12(progress.Progress.Circle, "circle");
+var CircleRange = withContext12(progress.Progress.CircleRange, "circleRange");
+var CircleTrack = withContext12(progress.Progress.CircleTrack, "circleTrack");
+var Label6 = withContext12(progress.Progress.Label, "label");
+var Range2 = withContext12(progress.Progress.Range, "range");
+var Track2 = withContext12(progress.Progress.Track, "track");
+var ValueText3 = withContext12(progress.Progress.ValueText, "valueText");
+var View = withContext12(progress.Progress.View, "view");
 
 // src/components/Skeleton.tsx
 var Skeleton_exports = {};
@@ -653,12 +666,12 @@ var CircleXIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", he
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m15 9-6 6" }),
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m9 9 6 6" })
 ] });
-var { withProvider: withProvider10, withContext: withContext12 } = jsx.createStyleContext(recipes.toast);
-var Root13 = withProvider10(toast.Toast.Root, "root");
-var Title4 = withContext12(toast.Toast.Title, "title");
-var Description4 = withContext12(toast.Toast.Description, "description");
-var ActionTrigger = withContext12(toast.Toast.ActionTrigger, "actionTrigger");
-var CloseTrigger3 = withContext12(toast.Toast.CloseTrigger, "closeTrigger");
+var { withProvider: withProvider11, withContext: withContext13 } = jsx.createStyleContext(recipes.toast);
+var Root14 = withProvider11(toast.Toast.Root, "root");
+var Title4 = withContext13(toast.Toast.Title, "title");
+var Description4 = withContext13(toast.Toast.Description, "description");
+var ActionTrigger = withContext13(toast.Toast.ActionTrigger, "actionTrigger");
+var CloseTrigger3 = withContext13(toast.Toast.CloseTrigger, "closeTrigger");
 var StyledToaster = jsx.styled(toast.Toaster);
 var iconMap = {
   warning: CircleAlertIcon,
@@ -678,7 +691,7 @@ var toaster = toast.createToaster({
   max: 5
 });
 var Toaster = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx(portal.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(StyledToaster, { toaster, insetInline: { mdDown: "4" }, children: (toast2) => /* @__PURE__ */ jsxRuntime.jsxs(Root13, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(portal.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(StyledToaster, { toaster, insetInline: { mdDown: "4" }, children: (toast2) => /* @__PURE__ */ jsxRuntime.jsxs(Root14, { children: [
     toast2.type === "loading" ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { color: "colorPalette.plain.fg" }) : /* @__PURE__ */ jsxRuntime.jsx(Indicator6, {}),
     /* @__PURE__ */ jsxRuntime.jsxs(jsx.Stack, { gap: "3", alignItems: "start", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(jsx.Stack, { gap: "1", children: [
@@ -706,33 +719,33 @@ __export(Popover_exports, {
   Header: () => Header4,
   Indicator: () => Indicator7,
   Positioner: () => Positioner4,
-  Root: () => Root14,
+  Root: () => Root15,
   RootProvider: () => RootProvider8,
   Title: () => Title5,
   Trigger: () => Trigger5
 });
-var { withRootProvider: withRootProvider3, withContext: withContext13 } = jsx.createStyleContext(recipes.popover);
-var Root14 = withRootProvider3(popover.Popover.Root, {
+var { withRootProvider: withRootProvider3, withContext: withContext14 } = jsx.createStyleContext(recipes.popover);
+var Root15 = withRootProvider3(popover.Popover.Root, {
   defaultProps: { unmountOnExit: true, lazyMount: true }
 });
 var RootProvider8 = withRootProvider3(popover.Popover.Root, {
   defaultProps: { unmountOnExit: true, lazyMount: true }
 });
-var Anchor = withContext13(popover.Popover.Anchor, "anchor");
-var ArrowTip = withContext13(popover.Popover.ArrowTip, "arrowTip");
-var Arrow = withContext13(popover.Popover.Arrow, "arrow", {
+var Anchor = withContext14(popover.Popover.Anchor, "anchor");
+var ArrowTip = withContext14(popover.Popover.ArrowTip, "arrowTip");
+var Arrow = withContext14(popover.Popover.Arrow, "arrow", {
   defaultProps: { children: /* @__PURE__ */ jsxRuntime.jsx(ArrowTip, {}) }
 });
-var CloseTrigger4 = withContext13(popover.Popover.CloseTrigger, "closeTrigger");
-var Content5 = withContext13(popover.Popover.Content, "content");
-var Description5 = withContext13(popover.Popover.Description, "description");
-var Indicator7 = withContext13(popover.Popover.Indicator, "indicator");
-var Positioner4 = withContext13(popover.Popover.Positioner, "positioner");
-var Title5 = withContext13(popover.Popover.Title, "title");
-var Trigger5 = withContext13(popover.Popover.Trigger, "trigger");
-var Body4 = withContext13(factory.ark.div, "body");
-var Header4 = withContext13(factory.ark.div, "header");
-var Footer4 = withContext13(factory.ark.div, "footer");
+var CloseTrigger4 = withContext14(popover.Popover.CloseTrigger, "closeTrigger");
+var Content5 = withContext14(popover.Popover.Content, "content");
+var Description5 = withContext14(popover.Popover.Description, "description");
+var Indicator7 = withContext14(popover.Popover.Indicator, "indicator");
+var Positioner4 = withContext14(popover.Popover.Positioner, "positioner");
+var Title5 = withContext14(popover.Popover.Title, "title");
+var Trigger5 = withContext14(popover.Popover.Trigger, "trigger");
+var Body4 = withContext14(factory.ark.div, "body");
+var Header4 = withContext14(factory.ark.div, "header");
+var Footer4 = withContext14(factory.ark.div, "footer");
 
 // src/components/Tooltip.tsx
 var Tooltip_exports = {};
@@ -740,15 +753,15 @@ __export(Tooltip_exports, {
   Context: () => tooltip.TooltipContext,
   Tooltip: () => Tooltip
 });
-var { withRootProvider: withRootProvider4, withContext: withContext14 } = jsx.createStyleContext(recipes.tooltip);
-var Root15 = withRootProvider4(tooltip.Tooltip.Root, {
+var { withRootProvider: withRootProvider4, withContext: withContext15 } = jsx.createStyleContext(recipes.tooltip);
+var Root16 = withRootProvider4(tooltip.Tooltip.Root, {
   defaultProps: { unmountOnExit: true, lazyMount: true }
 });
-var Arrow2 = withContext14(tooltip.Tooltip.Arrow, "arrow");
-var ArrowTip2 = withContext14(tooltip.Tooltip.ArrowTip, "arrowTip");
-var Content6 = withContext14(tooltip.Tooltip.Content, "content");
-var Positioner5 = withContext14(tooltip.Tooltip.Positioner, "positioner");
-var Trigger6 = withContext14(tooltip.Tooltip.Trigger, "trigger");
+var Arrow2 = withContext15(tooltip.Tooltip.Arrow, "arrow");
+var ArrowTip2 = withContext15(tooltip.Tooltip.ArrowTip, "arrowTip");
+var Content6 = withContext15(tooltip.Tooltip.Content, "content");
+var Positioner5 = withContext15(tooltip.Tooltip.Positioner, "positioner");
+var Trigger6 = withContext15(tooltip.Tooltip.Trigger, "trigger");
 var Tooltip = react$1.forwardRef(function Tooltip2(props, ref) {
   const {
     showArrow,
@@ -761,7 +774,7 @@ var Tooltip = react$1.forwardRef(function Tooltip2(props, ref) {
     ...rootProps
   } = props;
   if (disabled) return children;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Root15, { ...rootProps, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Root16, { ...rootProps, children: [
     /* @__PURE__ */ jsxRuntime.jsx(Trigger6, { asChild: true, children }),
     /* @__PURE__ */ jsxRuntime.jsx(portal.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ jsxRuntime.jsx(Positioner5, { children: /* @__PURE__ */ jsxRuntime.jsxs(Content6, { ref, ...contentProps, children: [
       showArrow && /* @__PURE__ */ jsxRuntime.jsx(Arrow2, { children: /* @__PURE__ */ jsxRuntime.jsx(ArrowTip2, {}) }),
@@ -769,6 +782,7 @@ var Tooltip = react$1.forwardRef(function Tooltip2(props, ref) {
     ] }) }) })
   ] });
 });
+var Heading = jsx.styled("h2", recipes.heading);
 
 // node_modules/.pnpm/@pandacss+dev@1.8.0_hono@4.11.3_jsdom@27.4.0_typescript@5.9.3/node_modules/@pandacss/dev/dist/index.mjs
 function defineRecipe(config) {
@@ -1720,6 +1734,13 @@ var material3Language = {
       emphasizedAccelerate: "cubic-bezier(0.3, 0, 0.8, 0.15)"
     },
     style: "expressive"
+  },
+  border: {
+    widths: {
+      thin: "1px",
+      medium: "2px",
+      thick: "4px"
+    }
   }
 };
 
@@ -1747,7 +1768,8 @@ function transformTokens(language) {
     radii: objectToTokens(language.shape.radii),
     shadows: objectToTokens(language.elevation.levels),
     durations: objectToTokens(language.motion.durations),
-    easings: objectToTokens(language.motion.easings)
+    easings: objectToTokens(language.motion.easings),
+    borderWidths: objectToTokens(language.border.widths)
   };
 }
 function transformSemanticTokens(language) {
@@ -1853,8 +1875,12 @@ exports.CloseButton = CloseButton_exports;
 exports.Dialog = Dialog_exports;
 exports.Drawer = Drawer_exports;
 exports.Group = Group_exports;
+exports.Heading = Heading;
 exports.Icon = Icon_exports;
 exports.IconButton = IconButton_exports;
+exports.Input = Input;
+exports.InputAddon = InputAddon;
+exports.InputGroup = InputGroup2;
 exports.Popover = Popover_exports;
 exports.Progress = Progress_exports;
 exports.RadioGroup = RadioGroup_exports;
@@ -1864,7 +1890,7 @@ exports.Slider = Slider_exports;
 exports.Spinner = Spinner_exports;
 exports.Switch = Switch_exports;
 exports.Tabs = Tabs_exports;
-exports.Textarea = Textarea_exports;
+exports.Textarea = Textarea;
 exports.Toaster = Toaster;
 exports.Tooltip = Tooltip_exports;
 exports.activeLanguage = material3Language;