@parrot-co/parrot-ui 0.0.80 → 0.0.81

package/dist/main.js

@@ -29,7 +29,7 @@ $parcel$export(module.exports, "CheckboxGroup", () => $b8075849c644c9bf$export$4
 $parcel$export(module.exports, "Radio", () => $98a03e69ce05a78a$export$d7b12c4107be0d61);
 $parcel$export(module.exports, "RadioGroup", () => $98a03e69ce05a78a$export$a98f0dcb43a68a25);
 $parcel$export(module.exports, "RadioCard", () => $037280c850c74ffd$export$f8afaea2e9656b91);
-$parcel$export(module.exports, "Select", () => $0a4561d925fa922e$export$a26e8b900a29a570);
+$parcel$export(module.exports, "Select", () => $0a4561d925fa922e$export$ef9b1a59e592288f);
 $parcel$export(module.exports, "DatePicker", () => $4d607687132d9f4f$export$5109c6dd95d8fb00);
 $parcel$export(module.exports, "Avatar", () => $53cff1de4d77d0c5$export$e2255cf6045e8d47);
 $parcel$export(module.exports, "FileUploader", () => $5bdc448a87fb1cbf$export$1a5cb5295a7d2749);
@@ -49,6 +49,7 @@ $parcel$export(module.exports, "Table", () => $3dd82f03c348455b$export$54ec01a60
 $parcel$export(module.exports, "Timeline", () => $c07c6db9734c74af$export$e6a97ba2cae5bb94);
 $parcel$export(module.exports, "Modal", () => $ceb05569908c0e0d$export$2b77a92f1a5ad772);
 $parcel$export(module.exports, "Space", () => $78991f4fdd965321$export$eef1e68107c58ef2);
+$parcel$export(module.exports, "TagInput", () => $b30cd386a46620b6$export$39299b56cfd4e361);
 $parcel$export(module.exports, "parrot", () => $80923bc9c1ba824c$export$3817b7a54a07cec7);
 $parcel$export(module.exports, "ParrotTheme", () => $80923bc9c1ba824c$export$bca14c5b3b88a9c9);
 $parcel$export(module.exports, "ParrotThemeConfig", () => $80923bc9c1ba824c$export$e506a1d27d1eaa20);
@@ -867,22 +868,28 @@ var $85c11fe4a674fe33$export$2e2bcd8739ae039 = $85c11fe4a674fe33$var$Column;
 
 
 const $ace9347704301509$export$719e80a44b5e9ad0 = (0, $80923bc9c1ba824c$export$dbf350e5966cf602)({
+    "$$input-height": "24px",
     boxSizing: "border-box",
     fontFamily: "$sans",
     lineHeight: "$base",
-    "&:not(button):focus-within": {
-        boxShadow: "$focusRing",
-        border: "1px solid $violet6",
-        background: "white"
-    },
-    "&:where(button):focus": {
+    minHeight: "$$input-height",
+    "&[data-focused=true]": {
         boxShadow: "$focusRing",
         border: "1px solid $violet6"
     },
+    // "&:not(button):focus-within": {
+    //   boxShadow: "$focusRing",
+    //   border: "1px solid $violet6",
+    //   background: "white",
+    // },
+    // "&:where(button):focus": {
+    //   boxShadow: "$focusRing",
+    //   border: "1px solid $violet6",
+    // },
     defaultVariants: {
-        appearance: "filled",
         size: "sm",
-        shape: "round"
+        shape: "round",
+        appearance: "outline"
     },
     variants: {
         isDisabled: {
@@ -916,69 +923,33 @@ const $ace9347704301509$export$719e80a44b5e9ad0 = (0, $80923bc9c1ba824c$export$d
             }
         },
         shape: {
-            round: {},
+            round: {
+                borderRadius: "calc($$input-height / 4)"
+            },
             sharp: {}
         },
         size: {
             xs: {
-                height: 24,
                 fontSize: "$2"
             },
             sm: {
-                height: 32,
+                "$$input-height": "32px",
                 fontSize: "$3"
             },
             md: {
-                height: 40,
+                "$$input-height": "40px",
                 fontSize: "$3"
             },
             lg: {
-                height: 44,
+                "$$input-height": "44px",
                 fontSize: "$4"
             },
             xl: {
-                height: 52,
+                "$$input-height": "52px",
                 fontSize: "$5"
             }
         }
-    },
-    compoundVariants: [
-        {
-            size: "xs",
-            shape: "round",
-            css: {
-                borderRadius: 8
-            }
-        },
-        {
-            size: "sm",
-            shape: "round",
-            css: {
-                borderRadius: 7
-            }
-        },
-        {
-            size: "md",
-            shape: "round",
-            css: {
-                borderRadius: 8
-            }
-        },
-        {
-            size: "lg",
-            shape: "round",
-            css: {
-                borderRadius: 8
-            }
-        },
-        {
-            size: "xl",
-            shape: "round",
-            css: {
-                borderRadius: 8
-            }
-        }
-    ]
+    }
 });
 
 
@@ -1124,8 +1095,10 @@ function $02a166a5043d2558$export$ccdcc3b9d72a654(color, variant) {
                 background: `$${color}4`,
                 color: `$${color}11`,
                 fill: `$${color}11`,
+                border: "none",
                 "&:focus": {
-                    boxShadow: $02a166a5043d2558$export$71074ab0ed740397(color)
+                    boxShadow: $02a166a5043d2558$export$71074ab0ed740397(color),
+                    border: `1.5px solid $${color}5`
                 }
             }
         };
@@ -1595,7 +1568,7 @@ const $78991f4fdd965321$var$SpaceContext = /*#__PURE__*/ $E4F9t$react.createCont
     classNames: {},
     compactItemWrapperAdjust: ""
 });
-function $78991f4fdd965321$export$eef1e68107c58ef2({ children: children , compact: compact , gap: gap , ...props }) {
+function $78991f4fdd965321$var$SpaceComponent({ children: children , compact: compact , gap: gap , ...props }, ref) {
     const childrenCount = $E4F9t$react.Children.count(children);
     const nodes = $E4F9t$react.useMemo(()=>{
         return $E4F9t$react.Children.map(children, (child, index)=>{
@@ -1619,30 +1592,30 @@ function $78991f4fdd965321$export$eef1e68107c58ef2({ children: children , compac
     ]);
     const realGap = compact ? undefined : gap;
     return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($78991f4fdd965321$export$30d85e96e785900a, {
+        ref: ref,
         gap: realGap,
         ...props,
         compact: compact,
         children: nodes
     });
 }
+const $78991f4fdd965321$export$eef1e68107c58ef2 = /*#__PURE__*/ $E4F9t$react.forwardRef($78991f4fdd965321$var$SpaceComponent);
 function $78991f4fdd965321$export$450c36e0b0e62ccd() {
     return $E4F9t$react.useContext($78991f4fdd965321$var$SpaceContext);
 }
 
 
 
-const $a40dc702bc0ad3b7$export$f5b8910cec6cf069 = /*#__PURE__*/ (0, ($parcel$interopDefault($E4F9t$react))).forwardRef(({ label: label , error: error , appearance: appearance , size: size , shape: shape , append: append , prepend: prepend , description: description , css: css , isDisabled: isDisabled , validationStatus: validationStatus , className: className , ...props }, ref)=>{
+const $a40dc702bc0ad3b7$export$f5b8910cec6cf069 = /*#__PURE__*/ (0, ($parcel$interopDefault($E4F9t$react))).forwardRef(({ label: label , error: error , appearance: appearance , size: size , shape: shape , append: append , prepend: prepend , description: description , css: css , isDisabled: isDisabled , validationStatus: validationStatus , className: className , inputRef: inputRef , ...props }, ref)=>{
     const space = (0, $78991f4fdd965321$export$450c36e0b0e62ccd)();
-    const inputRef = (0, ($parcel$interopDefault($E4F9t$react))).useRef(null);
+    const internalInputRef = (0, ($parcel$interopDefault($E4F9t$react))).useRef(null);
     const { labelProps: labelProps , inputProps: inputProps , errorMessageProps: errorMessageProps , descriptionProps: descriptionProps  } = (0, $E4F9t$reactaria.useTextField)({
         ...props,
         inputElementType: "input",
         label: label,
         description: description,
         isDisabled: isDisabled
-    }, inputRef);
-    //This is messy
-    //TODO Fix how props are extracted for variants and html props
+    }, internalInputRef);
     const variantProps = {
         appearance: appearance,
         size: size,
@@ -1652,7 +1625,7 @@ const $a40dc702bc0ad3b7$export$f5b8910cec6cf069 = /*#__PURE__*/ (0, ($parcel$int
     };
     const hasAddOns = !!prepend || !!append;
     function captureFocus() {
-        inputRef.current?.focus();
+        internalInputRef.current?.focus();
     }
     const commonProps = {
         className: (0, $d5b2fb178ea6b1b9$export$a274e22fb40f762e)({
@@ -1661,6 +1634,7 @@ const $a40dc702bc0ad3b7$export$f5b8910cec6cf069 = /*#__PURE__*/ (0, ($parcel$int
             ...space.classNames
         })
     };
+    const { isFocused: isFocused , focusProps: focusProps  } = (0, $E4F9t$reactaria.useFocusRing)();
     return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsxs)((0, $00118e4526047a1f$export$2e2bcd8739ae039), {
         className: space.compactItemWrapperAdjust,
         css: css,
@@ -1674,21 +1648,21 @@ const $a40dc702bc0ad3b7$export$f5b8910cec6cf069 = /*#__PURE__*/ (0, ($parcel$int
                 children: label
             }),
             !hasAddOns && /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $61604ea65ee6bc29$export$a195049fd73b3fe2), {
-                ...commonProps,
-                ...variantProps,
-                ...inputProps
+                "data-focused": isFocused,
+                ref: (0, $d5b2fb178ea6b1b9$export$c9058316764c140e)(internalInputRef, inputRef),
+                ...(0, $E4F9t$reactaria.mergeProps)(focusProps, commonProps, variantProps, inputProps)
             }),
             hasAddOns && /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $61604ea65ee6bc29$export$479bffa770f4fc8b), {
-                ...commonProps,
+                "data-focused": isFocused,
                 onClick: captureFocus,
                 hasPrependComponent: !!prepend,
-                ...variantProps,
+                ...(0, $E4F9t$reactaria.mergeProps)(focusProps, commonProps, variantProps),
                 children: /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $04e5d96aee536e27$export$2e2bcd8739ae039), {
                     append: append,
                     prepend: prepend,
                     children: /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)("input", {
-                        ...inputProps,
-                        ref: inputRef
+                        ...(0, $E4F9t$reactaria.mergeProps)(focusProps, inputProps),
+                        ref: (0, $d5b2fb178ea6b1b9$export$c9058316764c140e)(inputRef, internalInputRef)
                     })
                 })
             }),
@@ -1724,7 +1698,7 @@ $a40dc702bc0ad3b7$export$f5b8910cec6cf069.displayName = "Input";
 /* eslint-disable @typescript-eslint/no-explicit-any */ 
 
 const $c68076e2eb9f7d63$export$303ef672e091d99 = (0, $80923bc9c1ba824c$export$dbf350e5966cf602)((0, $02a166a5043d2558$export$5a7eb6284e7684f5), {
-    "$$button-base-height": "28px",
+    "$$button-base-height": "18px",
     display: "inline-flex",
     flexWrap: "nowrap",
     alignItems: "center",
@@ -1772,7 +1746,12 @@ const $c68076e2eb9f7d63$export$303ef672e091d99 = (0, $80923bc9c1ba824c$export$db
             }
         },
         size: {
+            "2xs": {
+                px: 12,
+                fontSize: "$2"
+            },
             xs: {
+                "$$button-base-height": "28px",
                 px: 12,
                 fontSize: "$2"
             },
@@ -2766,7 +2745,6 @@ $037280c850c74ffd$export$f8afaea2e9656b91.displayName = "RadioCard";
 
 
 
-
 const $765152e7e434b079$export$5ff5fb60b45fffad = (0, $80923bc9c1ba824c$export$3817b7a54a07cec7)("div", {
     fontFamily: "$sans",
     fontSize: "$3",
@@ -2808,7 +2786,8 @@ const $765152e7e434b079$export$844bee7de236d7ec = (0, $80923bc9c1ba824c$export$3
 });
 
 
-const $4c66e88b2158ec4e$var$_ListBox = /*#__PURE__*/ (0, ($parcel$interopDefault($E4F9t$react))).forwardRef((props, ref)=>{
+
+function $4c66e88b2158ec4e$var$AriaListBox(props) {
     const internalState = (0, $E4F9t$reactstately.useListState)(props);
     const listRef = (0, $E4F9t$react.useRef)(null);
     const state = props.state || internalState;
@@ -2826,7 +2805,7 @@ const $4c66e88b2158ec4e$var$_ListBox = /*#__PURE__*/ (0, ($parcel$interopDefault
                     overflow: "auto",
                     outline: "none"
                 },
-                ref: (0, $d5b2fb178ea6b1b9$export$c9058316764c140e)(listRef, ref),
+                ref: (0, $d5b2fb178ea6b1b9$export$c9058316764c140e)(listRef),
                 ...listBoxProps,
                 children: [
                     ...state.collection
@@ -2842,8 +2821,25 @@ const $4c66e88b2158ec4e$var$_ListBox = /*#__PURE__*/ (0, ($parcel$interopDefault
             })
         ]
     });
-});
-const $4c66e88b2158ec4e$var$_Option = (props, ref)=>{
+}
+const $4c66e88b2158ec4e$export$41f133550aa26f48 = ({ labelKey: labelKey , valueKey: valueKey , renderOption: renderOption , ...props })=>{
+    if (props.items) return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($4c66e88b2158ec4e$var$AriaListBox, {
+        ...props,
+        children: (item)=>{
+            const label = item?.[labelKey || "label"];
+            const value = item?.[valueKey || "value"];
+            return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $E4F9t$reactstately.Item), {
+                textValue: value ?? label,
+                children: renderOption ? renderOption(item) : label
+            }, value);
+        }
+    });
+    return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($4c66e88b2158ec4e$var$AriaListBox, {
+        ...props
+    });
+};
+$4c66e88b2158ec4e$export$41f133550aa26f48.displayName = "ListBox";
+const $4c66e88b2158ec4e$var$Option = (props)=>{
     const { item: item , state: state  } = props;
     const optionRef = (0, $E4F9t$react.useRef)(null);
     const { optionProps: optionProps , isSelected: isSelected , isDisabled: isDisabled , isFocused: isFocused , isPressed: isPressed  } = (0, $E4F9t$reactaria.useOption)({
@@ -2855,12 +2851,12 @@ const $4c66e88b2158ec4e$var$_Option = (props, ref)=>{
         "data-selected": isSelected,
         "data-disabled": isDisabled,
         "data-pressed": isPressed,
-        ref: (0, $d5b2fb178ea6b1b9$export$c9058316764c140e)(optionRef, ref),
+        ref: optionRef,
         ...(0, $E4F9t$reactaria.mergeProps)(focusProps, optionProps),
         children: item.rendered
     });
 };
-const $4c66e88b2158ec4e$var$_ListSection = (props, ref)=>{
+const $4c66e88b2158ec4e$var$ListSection = (props)=>{
     const { section: section , state: state  } = props;
     const { itemProps: itemProps , headingProps: headingProps , groupProps: groupProps  } = (0, $E4F9t$reactaria.useListBoxSection)({
         heading: section.rendered,
@@ -2872,7 +2868,6 @@ const $4c66e88b2158ec4e$var$_ListSection = (props, ref)=>{
     return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsxs)((0, $E4F9t$reactjsxruntime.Fragment), {
         children: [
             section.key !== state.collection.getFirstKey() && /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)("li", {
-                ref: ref,
                 ...separatorProps
             }),
             /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsxs)((0, $765152e7e434b079$export$844bee7de236d7ec), {
@@ -2898,24 +2893,6 @@ const $4c66e88b2158ec4e$var$_ListSection = (props, ref)=>{
         ]
     });
 };
-const $4c66e88b2158ec4e$export$41f133550aa26f48 = /*#__PURE__*/ (0, ($parcel$interopDefault($E4F9t$react))).forwardRef((props, ref)=>{
-    const { labelKey: labelKey = "label" , renderOption: renderOption  } = props;
-    if (!props.items) return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($4c66e88b2158ec4e$var$_ListBox, {
-        ref: ref,
-        ...props
-    });
-    return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($4c66e88b2158ec4e$var$_ListBox, {
-        ref: ref,
-        ...props,
-        children: (item)=>/*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $E4F9t$reactstately.Item), {
-                children: renderOption ? renderOption?.(item) : item?.[labelKey]
-            })
-    });
-});
-$4c66e88b2158ec4e$var$_ListBox.displayName = "ListBox";
-$4c66e88b2158ec4e$export$41f133550aa26f48.displayName = "WrappedListBox";
-const $4c66e88b2158ec4e$var$ListSection = /*#__PURE__*/ (0, ($parcel$interopDefault($E4F9t$react))).forwardRef($4c66e88b2158ec4e$var$_ListSection);
-const $4c66e88b2158ec4e$var$Option = /*#__PURE__*/ (0, ($parcel$interopDefault($E4F9t$react))).forwardRef($4c66e88b2158ec4e$var$_Option);
 
 
 
@@ -2923,7 +2900,6 @@ const $4c66e88b2158ec4e$var$Option = /*#__PURE__*/ (0, ($parcel$interopDefault($
 
 
 const $6f8af3bc5f5b1477$export$3ac1e88a1c0b9f1 = (0, $80923bc9c1ba824c$export$3817b7a54a07cec7)("button", (0, $ace9347704301509$export$719e80a44b5e9ad0), {
-    all: "unset",
     boxSizing: "border-box",
     display: "inline-flex",
     alignItems: "center",
@@ -2992,7 +2968,7 @@ $3347a410c0691704$export$5b6b19405a83ff9d.displayName = "Popover";
 
 
 
-const $0a4561d925fa922e$export$cd0225d99c675387 = /*#__PURE__*/ (0, ($parcel$interopDefault($E4F9t$react))).forwardRef((props, ref)=>{
+function $0a4561d925fa922e$var$AriaSelect(props) {
     const space = (0, $78991f4fdd965321$export$450c36e0b0e62ccd)();
     const { renderValue: renderValue , renderOption: renderOption , placeholder: placeholder = "Select an option" , appearance: appearance , size: size , css: css , labelKey: labelKey , label: label  } = props;
     const state = (0, $E4F9t$reactstately.useSelectState)(props);
@@ -3001,13 +2977,16 @@ const $0a4561d925fa922e$export$cd0225d99c675387 = /*#__PURE__*/ (0, ($parcel$int
     const { buttonProps: buttonProps  } = (0, $E4F9t$reactaria.useButton)(triggerProps, selectRef);
     const { focusProps: focusProps , isFocused: isFocused  } = (0, $E4F9t$reactaria.useFocusRing)();
     const hasSelection = state.selectedItem != null;
+    function renderSelectedValue() {
+        if (renderValue) return renderValue(state.selectedItem.value);
+        return (state.selectedItem?.value)?.[labelKey || "label"] ?? state?.selectedItem?.rendered;
+    }
     return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsxs)((0, $00118e4526047a1f$export$2e2bcd8739ae039), {
         className: space.compactItemWrapperAdjust,
         stretchX: true,
         css: css,
         position: "relative",
         gap: 2,
-        ref: ref,
         align: "start",
         stack: true,
         children: [
@@ -3037,7 +3016,7 @@ const $0a4561d925fa922e$export$cd0225d99c675387 = /*#__PURE__*/ (0, ($parcel$int
                         ...valueProps,
                         children: [
                             !hasSelection && placeholder,
-                            hasSelection && renderValue ? renderValue(state.selectedItem) : (state.selectedItem?.value)?.[labelKey || "label"]
+                            hasSelection && renderSelectedValue()
                         ]
                     }),
                     /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $E4F9t$reacticonshi.HiSelector), {})
@@ -3063,25 +3042,21 @@ const $0a4561d925fa922e$export$cd0225d99c675387 = /*#__PURE__*/ (0, ($parcel$int
             })
         ]
     });
-});
-const $0a4561d925fa922e$export$a26e8b900a29a570 = /*#__PURE__*/ (0, ($parcel$interopDefault($E4F9t$react))).forwardRef((props, ref)=>{
-    if (!props.items) return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($0a4561d925fa922e$export$cd0225d99c675387, {
-        ...props,
-        ref: ref
+}
+function $0a4561d925fa922e$export$ef9b1a59e592288f(props) {
+    if (!props.items) return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($0a4561d925fa922e$var$AriaSelect, {
+        ...props
     });
-    const key = props.valueKey || "id";
+    const key = props.valueKey || "value";
     const labelKey = props.labelKey || "label";
-    return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($0a4561d925fa922e$export$cd0225d99c675387, {
-        ref: ref,
+    return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($0a4561d925fa922e$var$AriaSelect, {
         ...props,
         children: (item)=>/*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $E4F9t$reactstately.Item), {
                 textValue: item[key] || "key",
                 children: props.renderOption ? props.renderOption?.(item) : item?.[labelKey]
             }, item[key] ?? "key")
     });
-});
-$0a4561d925fa922e$export$a26e8b900a29a570.displayName = "Select";
-$0a4561d925fa922e$export$cd0225d99c675387.displayName = "_Select";
+}
 
 
 
@@ -3534,39 +3509,48 @@ const $8fff24416ec1775a$export$f7513421c53ce141 = (0, $80923bc9c1ba824c$export$3
         size: {
             "3xs": {
                 size: 12,
-                borderRadius: 4
+                borderRadius: 4,
+                fontSize: "$1"
             },
             "2xs": {
                 size: 18,
-                borderRadius: 6
+                borderRadius: 6,
+                fontSize: "$2"
             },
             xs: {
                 size: 24,
-                borderRadius: 6
+                borderRadius: 6,
+                fontSize: "$2"
             },
             sm: {
                 size: 32,
-                borderRadius: 6
+                borderRadius: 6,
+                fontSize: "$3"
             },
             md: {
                 size: 40,
-                borderRadius: 6
+                borderRadius: 6,
+                fontSize: "$4"
             },
             lg: {
                 size: 48,
-                borderRadius: 8
+                borderRadius: 8,
+                fontSize: "$4"
             },
             xl: {
                 size: 56,
-                borderRadius: 8
+                borderRadius: 8,
+                fontSize: "$5"
             },
             "2xl": {
                 size: 64,
-                borderRadius: 8
+                borderRadius: 8,
+                fontSize: "$5"
             },
             "3xl": {
                 size: 72,
-                borderRadius: 8
+                borderRadius: 8,
+                fontSize: "$5"
             }
         }
     }
@@ -4119,7 +4103,7 @@ const $e1b9bb7437d6292e$export$7a4af5518e2bbe67 = (0, $80923bc9c1ba824c$export$3
             },
             sm: {
                 "$$tag-base-height": "24px",
-                px: 6,
+                px: 10,
                 fontSize: 13
             },
             md: {
@@ -4131,6 +4115,11 @@ const $e1b9bb7437d6292e$export$7a4af5518e2bbe67 = (0, $80923bc9c1ba824c$export$3
                 "$$tag-base-height": "32px",
                 px: 6,
                 fontSize: 14
+            },
+            xl: {
+                "$$tag-base-height": "36px",
+                px: 6,
+                fontSize: 14
             }
         },
         shape: {
@@ -5291,4 +5280,199 @@ $ceb05569908c0e0d$export$2b77a92f1a5ad772.useModal = $ceb05569908c0e0d$export$33
 
 
 
+
+
+const $f7d4ed4fd144ec49$export$7b7637218245c8a = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+
+
+
+
+
+const $30a70c8bea3715d9$export$a455218a85c89869 = (0, $80923bc9c1ba824c$export$3817b7a54a07cec7)((0, $7003944ca9ba7b6a$export$2e2bcd8739ae039), (0, $ace9347704301509$export$719e80a44b5e9ad0), {
+    display: "flex",
+    alignItems: "center",
+    flexWrap: "wrap",
+    px: 4,
+    py: 4,
+    gap: "$1",
+    boxSizing: "border-box",
+    // ".input-container": {
+    //   width: 4,
+    // },
+    input: {
+        border: "none",
+        background: "transparent",
+        outline: "none",
+        minWidth: 4,
+        width: "100%",
+        marginInlineStart: 4,
+        writingMode: "horizontal-tb"
+    }
+});
+
+
+
+
+
+function $6a510d1235dad636$export$40bfa8c7b0832715(value, defaultValue, onChange) {
+    const [state, setState] = $E4F9t$react.useState(value || defaultValue);
+    const isControlled = !(0, $aa33179d12a671ed$export$ae45edb09e2fe7c2)(value);
+    const controlledValue = isControlled ? value : state;
+    const setValue = $E4F9t$react.useCallback((value)=>{
+        if (!isControlled) setState(value);
+        if (!Object.is(controlledValue, value)) onChange?.(value);
+    }, [
+        isControlled,
+        controlledValue
+    ]);
+    return [
+        controlledValue,
+        setValue
+    ];
+}
+
+
+
+
+
+function $b30cd386a46620b6$export$39299b56cfd4e361({ css: css , appearance: appearance , size: size , label: label , error: error , placeholder: placeholder , tags: tags , defaultTags: defaultTags , tagColor: tagColor = "gray" , tagVariant: tagVariant = "light" , tagShape: tagShape = "round" , tagSize: tagSize = "md" , onChange: onChange , renderTag: renderTag  }) {
+    const [inputValue, setInputValue] = $E4F9t$react.useState("");
+    const [values, setValues] = (0, $6a510d1235dad636$export$40bfa8c7b0832715)(dedupe(tags), dedupe(defaultTags), onChange);
+    const [isFocused, setIsFocused] = $E4F9t$react.useState(false);
+    function dedupe(values) {
+        if (!values) return undefined;
+        return Array.from(new Set(values));
+    }
+    const inputRef = $E4F9t$react.useRef(null);
+    function onInputChange(e) {
+        const { value: value  } = e.target;
+        setInputValue(value);
+    }
+    // function hasTrailingSpace(value: string) {
+    //   return /\s$/.test(value);
+    // }
+    function hasTrailingComma(value) {
+        return /,$/.test(value);
+    }
+    function onInputFocus() {
+        setIsFocused(true);
+    }
+    function onInputBlur() {
+        setIsFocused(false);
+    }
+    function onKeyDown(e) {
+        switch(e.key){
+            case "Enter":
+            case " ":
+                if (isValid(inputValue.trim())) commit([
+                    inputValue
+                ]);
+                break;
+            case "Backspace":
+                if (!inputValue) onRemove(values[values.length - 1]);
+                break;
+            default:
+                break;
+        }
+    }
+    function captureFocus() {
+        inputRef.current?.focus();
+    }
+    function onRemove(value) {
+        setValues(values.filter((v)=>v !== value));
+    }
+    function isValid(value) {
+        return (0, $f7d4ed4fd144ec49$export$7b7637218245c8a).test(value);
+    }
+    function commit(newValues) {
+        const validValues = newValues.map((v)=>v.trim()).filter((v)=>isValid(v));
+        if (validValues.length > 0) setInputValue("");
+        const finalValues = Array.from(new Set([
+            ...values,
+            ...validValues
+        ]));
+        setValues(finalValues);
+    }
+    const showPlaceholder = !inputValue && values.length === 0;
+    function getInputContainerWidth() {
+        if (showPlaceholder) return (placeholder?.length ?? 0) * 10;
+        if (!showPlaceholder && isFocused) return inputValue.length * 10 || 10;
+        return 0;
+    }
+    $E4F9t$react.useEffect(()=>{
+        if (hasTrailingComma(inputValue.trim())) {
+            const split = inputValue.split(",");
+            commit(split);
+        }
+    }, [
+        inputValue
+    ]);
+    return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsxs)((0, $00118e4526047a1f$export$2e2bcd8739ae039), {
+        css: css,
+        stack: true,
+        gap: 2,
+        children: [
+            label && /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $0c337ac78d7dfe7f$export$2e2bcd8739ae039), {
+                children: label
+            }),
+            /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsxs)((0, $30a70c8bea3715d9$export$a455218a85c89869), {
+                "data-focused": isFocused,
+                onClick: captureFocus,
+                size: size,
+                appearance: appearance,
+                children: [
+                    values.map((value)=>{
+                        return renderTag ? renderTag?.(value, onRemove) : /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $232939a9dd93729d$export$3288d34c523a1192), {
+                            variant: tagVariant,
+                            color: tagColor,
+                            shape: tagShape,
+                            size: tagSize,
+                            append: /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $626c660fba87c9a3$export$c25acd513dcc8062), {
+                                variant: "plain",
+                                color: "gray",
+                                shape: "round",
+                                css: {
+                                    marginLeft: 8
+                                },
+                                onPress: ()=>{
+                                    onRemove(value);
+                                },
+                                size: "2xs",
+                                children: /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $E4F9t$reacticonshi.HiX), {
+                                    size: 16
+                                })
+                            }),
+                            children: value
+                        }, value);
+                    }),
+                    /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $7003944ca9ba7b6a$export$2e2bcd8739ae039), {
+                        css: {
+                            width: getInputContainerWidth()
+                        },
+                        className: "input-container",
+                        children: /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)("input", {
+                            ref: inputRef,
+                            placeholder: showPlaceholder ? placeholder : "",
+                            onKeyDown: onKeyDown,
+                            value: inputValue,
+                            onChange: onInputChange,
+                            onFocus: onInputFocus,
+                            onBlur: onInputBlur
+                        })
+                    })
+                ]
+            }),
+            error && /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $66ede1fa66acd93e$export$2e2bcd8739ae039), {
+                children: error
+            })
+        ]
+    });
+}
+
+
+
+
+
+
+
 //# sourceMappingURL=main.js.map