@techsio/ui-kit 0.15.0 → 0.16.0

package/dist/molecules/search-form.figma.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import code_connect from "@figma/code-connect";
 import { SearchForm } from "./search-form.js";
-code_connect.connect(SearchForm, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=1146-48", {
+code_connect.connect(SearchForm, "https://www.figma.com/design/12xb1pqXKwE2vbOByN3ntg/New-Design-System-vol.-2?node-id=2620-122", {
     imports: [
         'import { SearchForm } from "@libs/ui/molecules/search-form"'
     ],
@@ -10,15 +10,19 @@ code_connect.connect(SearchForm, "https://www.figma.com/design/12xb1pqXKwE2vbOBy
             sm: "sm",
             md: "md",
             lg: "lg"
-        })
+        }),
+        gapped: code_connect.boolean("gapped")
     },
-    example: ({ size })=>/*#__PURE__*/ jsxs(SearchForm, {
+    example: ({ size, gapped })=>/*#__PURE__*/ jsx(SearchForm, {
+            gapped: gapped,
             size: size,
-            children: [
-                /*#__PURE__*/ jsx(SearchForm.Input, {
-                    placeholder: "Search..."
-                }),
-                /*#__PURE__*/ jsx(SearchForm.Button, {})
-            ]
+            children: /*#__PURE__*/ jsxs(SearchForm.Control, {
+                children: [
+                    /*#__PURE__*/ jsx(SearchForm.Input, {
+                        placeholder: "Search..."
+                    }),
+                    /*#__PURE__*/ jsx(SearchForm.Button, {})
+                ]
+            })
         })
 });

package/dist/molecules/search-form.js

@@ -1,5 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { createContext, useContext, useId, useState } from "react";
+import { createContext, useContext, useEffect, useId, useState } from "react";
+import { createPortal } from "react-dom";
 import { Button } from "../atoms/button.js";
 import { Input } from "../atoms/input.js";
 import { Label } from "../atoms/label.js";
@@ -10,46 +11,55 @@ const searchFormVariants = tv({
             "relative grid"
         ],
         control: [
-            "relative flex items-center overflow-hidden",
-            "form-control-base",
-            "hover:border-input-border-hover",
-            "focus-within:border-input-border-focus",
-            "focus-within:outline-(style:--default-ring-style) focus-within:outline-(length:--default-ring-width)",
-            "focus-within:outline-input-ring",
-            "focus-within:outline-offset-(length:--default-ring-offset)",
-            "transition-colors duration-200 motion-reduce:transition-none"
+            "flex items-stretch"
+        ],
+        inputWrapper: [
+            "relative min-w-0 flex-1",
+            "focus-within:z-10"
         ],
         input: [
-            "peer",
-            "min-w-0 flex-1",
-            "border-none bg-transparent",
-            "focus-visible:outline-none"
+            "w-full"
         ],
         button: [
-            "h-full shrink-0 items-center rounded-l-none"
+            "relative shrink-0",
+            "focus-visible:z-10"
         ],
         clearButton: [
-            "h-full shrink-0 rounded-none p-search-form-clear-button",
-            "peer-hover:bg-input-hover peer-focus:bg-input-focus"
+            "absolute inset-y-0",
+            "inline-flex items-center justify-center"
         ]
     },
     variants: {
         size: {
             sm: {
                 root: "gap-search-form-sm",
-                control: "h-form-control-sm rounded-search-form-sm"
+                button: "h-form-control-sm",
+                clearButton: "end-(length:--padding-input-sm)"
             },
             md: {
                 root: "gap-search-form-md",
-                control: "h-form-control-md rounded-search-form-md"
+                button: "h-form-control-md",
+                clearButton: "end-(length:--padding-input-md)"
             },
             lg: {
-                root: "gap-search-form-lg"
+                root: "gap-search-form-lg",
+                button: "h-form-control-lg",
+                clearButton: "end-(length:--padding-input-lg)"
+            }
+        },
+        gapped: {
+            false: {
+                input: "rounded-e-none",
+                button: "rounded-s-none"
+            },
+            true: {
+                control: "gap-search-form-gapped"
             }
         }
     },
     defaultVariants: {
-        size: "md"
+        size: "md",
+        gapped: false
     }
 });
 const SearchFormContext = /*#__PURE__*/ createContext(null);
@@ -58,10 +68,12 @@ function useSearchFormContext() {
     if (!context) throw new Error("SearchForm components must be used within SearchForm");
     return context;
 }
-function SearchForm({ size = "md", children, defaultValue = "", value, onValueChange, className, ref, onSubmit, ...props }) {
+function SearchForm({ size = "md", gapped = false, children, defaultValue = "", value, onValueChange, className, ref, onSubmit, ...props }) {
     const generatedId = useId();
     const inputId = `search-input-${generatedId}`;
     const [internalValue, setInternalValue] = useState(defaultValue);
+    const [clearSlot, setClearSlot] = useState(null);
+    const [hasClearButton, setHasClearButton] = useState(false);
     const isControlled = void 0 !== value;
     const inputValue = isControlled ? value : internalValue;
     const setInputValue = (newValue)=>{
@@ -76,16 +88,22 @@ function SearchForm({ size = "md", children, defaultValue = "", value, onValueCh
         onSubmit?.(e);
     };
     const styles = searchFormVariants({
-        size
+        size,
+        gapped
     });
     return /*#__PURE__*/ jsx(SearchFormContext.Provider, {
         value: {
             size,
+            gapped,
             inputId,
             inputValue,
             setInputValue,
             clearInput,
-            hasValue: inputValue.length > 0
+            hasValue: inputValue.length > 0,
+            clearSlot,
+            setClearSlot,
+            hasClearButton,
+            setHasClearButton
         },
         children: /*#__PURE__*/ jsx("search", {
             children: /*#__PURE__*/ jsx("form", {
@@ -111,9 +129,10 @@ SearchForm.Label = function({ children, className, ...props }) {
     });
 };
 SearchForm.Control = function({ children, className, ref, ...props }) {
-    const { size } = useSearchFormContext();
+    const { size, gapped } = useSearchFormContext();
     const styles = searchFormVariants({
-        size
+        size,
+        gapped
     });
     return /*#__PURE__*/ jsx("div", {
         className: styles.control({
@@ -125,29 +144,36 @@ SearchForm.Control = function({ children, className, ref, ...props }) {
     });
 };
 SearchForm.Input = function({ className, placeholder = "Search...", ref, ...props }) {
-    const { inputId, inputValue, setInputValue, size } = useSearchFormContext();
+    const { inputId, inputValue, setInputValue, size, gapped, hasValue, hasClearButton, setClearSlot } = useSearchFormContext();
     const styles = searchFormVariants({
-        size
+        size,
+        gapped
     });
-    return /*#__PURE__*/ jsx(Input, {
-        "aria-label": props["aria-label"] || "Search",
-        className: styles.input({
-            className
-        }),
-        id: inputId,
-        onChange: (e)=>setInputValue(e.target.value),
-        placeholder: placeholder,
-        ref: ref,
-        size: size,
-        type: "search",
-        value: inputValue,
-        ...props
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.inputWrapper(),
+        ref: setClearSlot,
+        children: /*#__PURE__*/ jsx(Input, {
+            "aria-label": props["aria-label"] || "Search",
+            className: styles.input({
+                className
+            }),
+            id: inputId,
+            onChange: (e)=>setInputValue(e.target.value),
+            placeholder: placeholder,
+            ref: ref,
+            size: size,
+            type: "search",
+            value: inputValue,
+            withButtonInside: hasValue && hasClearButton ? "right" : void 0,
+            ...props
+        })
     });
 };
 SearchForm.Button = function({ className, children, showSearchIcon = false, icon, iconPosition = "right", ...props }) {
-    const { size } = useSearchFormContext();
+    const { size, gapped } = useSearchFormContext();
     const styles = searchFormVariants({
-        size
+        size,
+        gapped
     });
     const effectiveIcon = icon ?? (showSearchIcon ? "token-icon-search" : void 0);
     return /*#__PURE__*/ jsx(Button, {
@@ -163,12 +189,19 @@ SearchForm.Button = function({ className, children, showSearchIcon = false, icon
     });
 };
 SearchForm.ClearButton = function({ className, icon = "token-icon-close", theme = "unstyled", ...props }) {
-    const { size, clearInput, hasValue, inputValue } = useSearchFormContext();
+    const { size, gapped, clearInput, hasValue, inputValue, clearSlot, setHasClearButton } = useSearchFormContext();
     const styles = searchFormVariants({
-        size
+        size,
+        gapped
     });
-    if (!hasValue) return null;
-    return /*#__PURE__*/ jsx(Button, {
+    useEffect(()=>{
+        setHasClearButton(true);
+        return ()=>setHasClearButton(false);
+    }, [
+        setHasClearButton
+    ]);
+    if (!(hasValue && clearSlot)) return null;
+    return /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx(Button, {
         "aria-label": `Clear search: ${inputValue}`,
         className: styles.clearButton({
             className
@@ -179,7 +212,7 @@ SearchForm.ClearButton = function({ className, icon = "token-icon-close", theme
         theme: theme,
         type: "button",
         ...props
-    });
+    }), clearSlot);
 };
 SearchForm.displayName = "SearchForm";
 export { SearchForm, searchFormVariants, useSearchFormContext };

package/dist/src/molecules/search-form.d.ts

@@ -7,19 +7,33 @@ declare const searchFormVariants: import("tailwind-variants").TVReturnType<{
     size: {
         sm: {
             root: string;
-            control: string;
+            button: string;
+            clearButton: string;
         };
         md: {
             root: string;
-            control: string;
+            button: string;
+            clearButton: string;
         };
         lg: {
             root: string;
+            button: string;
+            clearButton: string;
+        };
+    };
+    gapped: {
+        false: {
+            input: string;
+            button: string;
+        };
+        true: {
+            control: string;
         };
     };
 }, {
     root: string[];
     control: string[];
+    inputWrapper: string[];
     input: string[];
     button: string[];
     clearButton: string[];
@@ -27,19 +41,33 @@ declare const searchFormVariants: import("tailwind-variants").TVReturnType<{
     size: {
         sm: {
             root: string;
-            control: string;
+            button: string;
+            clearButton: string;
         };
         md: {
             root: string;
-            control: string;
+            button: string;
+            clearButton: string;
         };
         lg: {
             root: string;
+            button: string;
+            clearButton: string;
+        };
+    };
+    gapped: {
+        false: {
+            input: string;
+            button: string;
+        };
+        true: {
+            control: string;
         };
     };
 }, {
     root: string[];
     control: string[];
+    inputWrapper: string[];
     input: string[];
     button: string[];
     clearButton: string[];
@@ -47,19 +75,33 @@ declare const searchFormVariants: import("tailwind-variants").TVReturnType<{
     size: {
         sm: {
             root: string;
-            control: string;
+            button: string;
+            clearButton: string;
         };
         md: {
             root: string;
-            control: string;
+            button: string;
+            clearButton: string;
         };
         lg: {
             root: string;
+            button: string;
+            clearButton: string;
+        };
+    };
+    gapped: {
+        false: {
+            input: string;
+            button: string;
+        };
+        true: {
+            control: string;
         };
     };
 }, {
     root: string[];
     control: string[];
+    inputWrapper: string[];
     input: string[];
     button: string[];
     clearButton: string[];
@@ -67,11 +109,16 @@ declare const searchFormVariants: import("tailwind-variants").TVReturnType<{
 export type SearchFormSize = "sm" | "md" | "lg";
 type SearchFormContextValue = {
     size: SearchFormSize;
+    gapped: boolean;
     inputId: string;
     inputValue: string;
     setInputValue: (value: string) => void;
     clearInput: () => void;
     hasValue: boolean;
+    clearSlot: HTMLDivElement | null;
+    setClearSlot: (element: HTMLDivElement | null) => void;
+    hasClearButton: boolean;
+    setHasClearButton: (present: boolean) => void;
 };
 declare function useSearchFormContext(): SearchFormContextValue;
 export interface SearchFormProps extends VariantProps<typeof searchFormVariants>, Omit<ComponentPropsWithoutRef<"form">, "size"> {
@@ -81,13 +128,13 @@ export interface SearchFormProps extends VariantProps<typeof searchFormVariants>
     onValueChange?: (value: string) => void;
     ref?: Ref<HTMLFormElement>;
 }
-export declare function SearchForm({ size, children, defaultValue, value, onValueChange, className, ref, onSubmit, ...props }: SearchFormProps): import("react/jsx-runtime").JSX.Element;
+export declare function SearchForm({ size, gapped, children, defaultValue, value, onValueChange, className, ref, onSubmit, ...props }: SearchFormProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace SearchForm {
     var Label: ({ children, className, ...props }: SearchFormLabelProps) => import("react/jsx-runtime").JSX.Element;
     var Control: ({ children, className, ref, ...props }: SearchFormControlProps) => import("react/jsx-runtime").JSX.Element;
     var Input: ({ className, placeholder, ref, ...props }: SearchFormInputProps) => import("react/jsx-runtime").JSX.Element;
     var Button: ({ className, children, showSearchIcon, icon, iconPosition, ...props }: SearchFormButtonProps) => import("react/jsx-runtime").JSX.Element;
-    var ClearButton: ({ className, icon, theme, ...props }: SearchFormClearButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+    var ClearButton: ({ className, icon, theme, ...props }: SearchFormClearButtonProps) => import("react").ReactPortal | null;
     var displayName: string;
 }
 interface SearchFormLabelProps extends Omit<LabelProps, "htmlFor" | "size"> {
@@ -95,7 +142,7 @@ interface SearchFormLabelProps extends Omit<LabelProps, "htmlFor" | "size"> {
 interface SearchFormControlProps extends ComponentPropsWithoutRef<"div"> {
     ref?: Ref<HTMLDivElement>;
 }
-interface SearchFormInputProps extends Omit<InputProps, "size" | "value" | "onChange"> {
+interface SearchFormInputProps extends Omit<InputProps, "size" | "value" | "onChange" | "withButtonInside"> {
 }
 interface SearchFormButtonProps extends Omit<ButtonProps, "size"> {
     showSearchIcon?: boolean;

package/dist/src/molecules/search-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search-form.d.ts","sourceRoot":"","sources":["../../../src/molecules/search-form.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,wBAAwB,EAG7B,KAAK,SAAS,EACd,KAAK,GAAG,EAIT,MAAM,OAAO,CAAA;AACd,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AACrD,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAC1D,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAGvD,QAAA,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA+CtB,CAAA;AAEF,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE/C,KAAK,sBAAsB,GAAG;IAC5B,IAAI,EAAE,cAAc,CAAA;IACpB,OAAO,EAAE,MAAM,CAAA;IACf,UAAU,EAAE,MAAM,CAAA;IAClB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,QAAQ,EAAE,OAAO,CAAA;CAClB,CAAA;AAID,iBAAS,oBAAoB,2BAM5B;AAED,MAAM,WAAW,eACf,SAAQ,YAAY,CAAC,OAAO,kBAAkB,CAAC,EAC7C,IAAI,CAAC,wBAAwB,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChD,QAAQ,EAAE,SAAS,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAA;CAC3B;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAW,EACX,QAAQ,EACR,YAAiB,EACjB,KAAK,EACL,aAAa,EACb,SAAS,EACT,GAAG,EACH,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,2CAgDjB;yBA1De,UAAU;mDAkEvB,oBAAoB;0DAmBpB,sBAAsB;2DAmBtB,oBAAoB;wFA+BpB,qBAAqB;4DA8BrB,0BAA0B;;;AAzG7B,UAAU,oBAAqB,SAAQ,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,MAAM,CAAC;CAAG;AAgB9E,UAAU,sBAAuB,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACtE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B;AAkBD,UAAU,oBACR,SAAQ,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;CAAG;AA2B5D,UAAU,qBAAsB,SAAQ,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC;IAC/D,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AA+BD,UAAU,0BACR,SAAQ,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;CAAG;AA6B3D,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,CAAA"}
+{"version":3,"file":"search-form.d.ts","sourceRoot":"","sources":["../../../src/molecules/search-form.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,wBAAwB,EAG7B,KAAK,SAAS,EACd,KAAK,GAAG,EAKT,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AACrD,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAC1D,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAGvD,QAAA,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA4DtB,CAAA;AAEF,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE/C,KAAK,sBAAsB,GAAG;IAC5B,IAAI,EAAE,cAAc,CAAA;IACpB,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;IACf,UAAU,EAAE,MAAM,CAAA;IAClB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,QAAQ,EAAE,OAAO,CAAA;IAGjB,SAAS,EAAE,cAAc,GAAG,IAAI,CAAA;IAChC,YAAY,EAAE,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAA;IAGtD,cAAc,EAAE,OAAO,CAAA;IACvB,iBAAiB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;CAC9C,CAAA;AAID,iBAAS,oBAAoB,2BAM5B;AAED,MAAM,WAAW,eACf,SAAQ,YAAY,CAAC,OAAO,kBAAkB,CAAC,EAC7C,IAAI,CAAC,wBAAwB,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChD,QAAQ,EAAE,SAAS,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAA;CAC3B;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAW,EACX,MAAc,EACd,QAAQ,EACR,YAAiB,EACjB,KAAK,EACL,aAAa,EACb,SAAS,EACT,GAAG,EACH,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,2CAuDjB;yBAlEe,UAAU;mDA0EvB,oBAAoB;0DAmBpB,sBAAsB;2DAsBtB,oBAAoB;wFA2CpB,qBAAqB;4DA8BrB,0BAA0B;;;AAxH7B,UAAU,oBAAqB,SAAQ,IAAI,CAAC,UAAU,EAAE,SAAS,GAAG,MAAM,CAAC;CAAG;AAgB9E,UAAU,sBAAuB,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACtE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B;AAkBD,UAAU,oBACR,SAAQ,IAAI,CACV,UAAU,EACV,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,kBAAkB,CACnD;CAAG;AAuCN,UAAU,qBAAsB,SAAQ,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC;IAC/D,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AA+BD,UAAU,0BACR,SAAQ,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;CAAG;AA8C3D,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,CAAA"}

package/dist/stories/molecules/search-form.stories.d.ts

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof SearchForm>;
 export default meta;
 type Story = StoryObj<typeof SearchForm>;
 export declare const Default: Story;
+export declare const Gapped: Story;
 export declare const WithLabel: Story;
 export declare const IconButton: Story;
 export declare const WithoutButton: Story;

package/dist/stories/molecules/search-form.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search-form.stories.d.ts","sourceRoot":"","sources":["../../../stories/molecules/search-form.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAGtD,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAA;AAE5D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAoBjC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAA;AAExC,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAYvB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAWxB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAU3B,CAAA;AAmBD,eAAO,MAAM,UAAU,EAAE,KAExB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAY7B,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KA+BnB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KA+B1B,CAAA;AA2BD,eAAO,MAAM,cAAc,EAAE,KAE5B,CAAA;AA4BD,eAAO,MAAM,YAAY,EAAE,KAU1B,CAAA"}
+{"version":3,"file":"search-form.stories.d.ts","sourceRoot":"","sources":["../../../stories/molecules/search-form.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAItD,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAA;AAE5D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAyBjC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAA;AAExC,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAmBpB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAYvB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAWxB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAU3B,CAAA;AAmBD,eAAO,MAAM,UAAU,EAAE,KAExB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAY7B,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KA+BnB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KA+B1B,CAAA;AA2BD,eAAO,MAAM,cAAc,EAAE,KAE5B,CAAA;AA4BD,eAAO,MAAM,YAAY,EAAE,KAU1B,CAAA"}

package/dist/stories/overview/component-comparison.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component-comparison.stories.d.ts","sourceRoot":"","sources":["../../../stories/overview/component-comparison.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AA6CtD,QAAA,MAAM,IAAI,EAAE,IAMX,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAA;AAkwBrB,eAAO,MAAM,UAAU,EAAE,KAExB,CAAA"}
+{"version":3,"file":"component-comparison.stories.d.ts","sourceRoot":"","sources":["../../../stories/overview/component-comparison.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AA6CtD,QAAA,MAAM,IAAI,EAAE,IAMX,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAA;AA8xBrB,eAAO,MAAM,UAAU,EAAE,KAExB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techsio/ui-kit",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "type": "module",
   "repository": {
     "type": "git",

package/src/tokens/components/molecules/_search-form.css

@@ -1,4 +1,12 @@
 /*
- * SearchForm — runtime tokens come entirely from
+ * SearchForm — runtime tokens come mostly from
  * libs/ui/src/tokens/figma/variables.css.
+ *
+ * This file only declares what Figma does not export:
+ *   - `--spacing-search-form-gapped` — the horizontal gap inserted between
+ *     the input and the button when the `gapped` prop is enabled (8px).
  */
+
+@theme static {
+  --spacing-search-form-gapped: var(--dimension-8);
+}