@ambuj.bhaskar/react-component-library 0.3.2 → 0.4.0

package/dist/assets/index.css

@@ -1 +1 @@
-*{box-sizing:border-box}body{margin:0}mark{background-color:unset!important;padding:0rem!important}hr,p{margin:0}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}}.icon_svg{width:100%;height:100%}.size_xs{width:16px;height:16px}.size_s{width:20px;height:20px}.size_m{width:24px;height:24px}.size_l{width:32px;height:32px}.size_xl{width:48px;height:48px}.button{transition:all .2s ease-in-out;display:flex;align-items:center;cursor:pointer;position:relative;background-color:unset;border:none}.button .background{position:absolute;z-index:1;width:100%;height:100%;top:0;left:0;border-radius:500px}.button .background.primary{filter:opacity(.05)}.button .background.primary:hover{filter:opacity(.15)}.button .background.primary:active{filter:opacity(1)}.button .background.secondary{filter:opacity(.1)}.button .background.secondary:hover{filter:opacity(.15)}.button .background.secondary:active{filter:opacity(.2)}.button .background.tertiary{filter:opacity(0)}.button .background.tertiary:hover{filter:opacity(.1)}.button .background.tertiary:active{filter:opacity(.2)}.button .background.nav{filter:opacity(0)}.button .background.nav:hover{filter:opacity(.1)}.button .background.nav:active{filter:opacity(.2)}.button .background.disabled{filter:opacity(.05)!important}.button .background.disabled.tertiary,.button .background.disabled.nav{filter:opacity(0)!important}.button>p{align-self:center;font-weight:var(--hydra_font_weight_m);z-index:2}.button.disabled,.button.disabled:hover,.button.disabled:active{cursor:no-drop!important;color:var(--hydra_c_disabled)!important}.button.disabled{cursor:no-drop;color:var(--hydra_c_disabled)}.button.disabled.primary,.button.disabled.primary:hover,.button.disabled.primary:active{outline-width:1px!important}.button.disabled.secondary,.button.disabled.secondary:hover,.button.disabled.secondary:active,.button.disabled.tertiary,.button.disabled.tertiary:hover,.button.disabled.tertiary:active,.button.disabled.nav,.button.disabled.nav:hover,.button.disabled.nav:active{outline-width:0px!important}.button.disabled.primary{outline-width:1px!important}.button.secondary{outline-width:0px!important}.button.secondary:hover,.button.secondary:active{outline-width:1px!important}.button.nav,.button.nav:hover{outline-width:0px!important}.button.nav:active{outline-width:1px!important}.button>p,.button>svg{z-index:2;pointer-events:none}.button.primary:active>p{color:var(--hydra_c_text_tertiary)!important}.button.fixed.h_s{--button_height: 30px;height:var(--button_height);border-radius:calc(var(--button_height) / 2);font-size:var(--font_s);padding:0px calc(var(--button_height) / 5)}.button.fixed.h_m{--button_height: 40px;height:var(--button_height);border-radius:calc(var(--button_height) / 2);padding:0px calc(var(--button_height) / 5)}.button.fixed.h_l{--button_height: 50px;height:var(--button_height);border-radius:calc(var(--button_height) / 2);padding:0px calc(var(--button_height) / 5)}.button.hugging.p_s{padding:3px 10px;border-radius:500px;font-size:var(--font_s)}.button.hugging.p_m{padding:6px 18px;border-radius:500px}.button.hugging.p_l{padding:10px 22px;border-radius:500px}.button.fixed.h_s.icon{--button_height: 30px;height:var(--button_height);border-radius:calc(var(--button_height) / 2);font-size:var(--font_s);padding:calc(var(--button_height) / 5) calc(var(--button_height) / 5)}.button.fixed.h_m.icon{--button_height: 40px;height:var(--button_height);border-radius:calc(var(--button_height) / 2);padding:calc(var(--button_height) / 5) calc(var(--button_height) / 5)}.button.fixed.h_l.icon{--button_height: 50px;height:var(--button_height);border-radius:calc(var(--button_height) / 2);padding:calc(var(--button_height) / 5) calc(var(--button_height) / 5)}.button.hugging.p_s.icon{padding:5px;border-radius:500px;font-size:var(--font_s)}.button.hugging.p_m.icon{padding:10px;border-radius:500px}.button.hugging.p_l.icon{padding:15px;border-radius:500px}.button.text_xs{font-size:var(--font_xs)!important}.button.text_s{font-size:var(--font_s)!important}.button.text_m{font-size:var(--font_m)!important}.button.text_l{font-size:var(--font_l)!important}.button.text_xl{font-size:var(--font_xl)!important}.input_wrapper{--color_text_secondary: #292929;--color_input_box_default: rgb(224, 222, 222);--color_input_box_active: #ffffff;--color_input_box_border_primary: #292929;--color_input_box_disabled: rgb(168, 168, 168);--color_disabled: rgb(24, 24, 24);--font_s: 14px;transition:all .2s ease-in-out;display:flex;align-items:center;position:relative;border:none;box-sizing:border-box;gap:8px;color:var(--color_text_secondary);background-color:var(--color_input_box_default);border-radius:25px;--input_box_height_s: 30px;--input_box_height_m: 40px;--input_box_height_l: 50px;--input_box_padding_s: .5rem 1.25rem;--input_box_padding_m: .75rem 1.25rem;--input_box_padding_l: .5rem 1.5rem}.input_wrapper.disabled{cursor:no-drop!important}.input_wrapper.disabled>.input{cursor:no-drop!important}.input_wrapper.h_s{height:var(--input_box_height_s);padding:var(--input_box_padding_s)}.input_wrapper.h_m{height:var(--input_box_height_m);padding:var(--input_box_padding_m)}.input_wrapper.h_l{height:var(--input_box_height_l);padding:var(--input_box_padding_l)}.input_wrapper:focus-within{background-color:var(--color_input_box_active);outline:1px solid var(--color_input_box_border_primary)}.input_wrapper.icon_before{flex-direction:row}.input_wrapper.icon_after{flex-direction:row-reverse}.input{border:none!important;outline:none!important;background:transparent;text-overflow:ellipsis;overflow:hidden!important;min-width:0!important;flex-grow:1;font-size:var(--font_s)!important}.input_wrapper:not(.empty):not(.disabled):not(:focus-within){background-color:var(--color_input_box_result);color:var(--color_text_secondary)}.input::placeholder{font-size:var(--font_s)!important;color:var(--color_text_secondary)}.icon-wrapper{display:flex;align-items:center;justify-content:center}.input_wrapper.input-disabled{background-color:var(--color_input_box_disabled);color:var(--color_disabled)}.single_select_container,.ant-select-dropdown{--color_select_border: #a3a3a3;--c_single_select_input_fill_active: rgb(214, 214, 214);--font_s: 14px;--font_weight_m: 500;--c_text_primary: #fff;--c_single_select_input_fill_default: #bbbbbb;--c_single_select_fill_menu_item_default: #dddddd;--c_single_select_fill_menu_item_active: #cecece;--c_single_select_fill_menu_item_hover: #b1b1b1;--c_secondary: #fff;--c_text_primary: #292929}.single_select_container{display:flex;justify-content:center;align-items:center;height:unset;--select_height_s: 30px;--select_height_default: 40px;--select_height_l: 50px;--select_padding_s: 1rem 1rem;--select_padding_default: 1.25rem 1rem;--select_padding_l: .5rem 1.5rem}.ant-select-focused:not(.ant-select-disabled):not(.ant-select-customize-input) .ant-select-selector{outline:1px solid var(--color_select_border)!important;background-color:var(--c_single_select_input_fill_active)!important}.ant-select-focused:not(.ant-select-disabled):not(.ant-select-customize-input) .ant-select-selector>.ant-select-selection-item{font-weight:var(--font_weight_m)!important}.single_select_container>.ant-select-selector{outline:none!important;border:none!important;border-radius:100px!important;box-shadow:none!important;color:var(--c_text_primary)!important;background-color:var(--c_single_select_input_fill_default)!important}.single_select_container.h_s>.ant-select-selector{height:var(--select_height_s)!important;padding:var(--select_padding_s)!important}.single_select_container.h_m>.ant-select-selector{height:var(--select_height_default)!important;padding:var(--select_padding_default)!important}.single_select_container.h_l>.ant-select-selector{height:var(--select_height_l)!important;padding:var(--select_padding_l)!important}.single_select_container.h_l>.ant-select-selector:focus{background-color:red!important}.ant-select-dropdown{z-index:10000;border-radius:20px;outline:1px solid var(--color_select_border);box-shadow:unset;padding:0}.ant-select-dropdown .ant-select-item-option{align-items:center;padding:1rem;background-color:var(--c_single_select_fill_menu_item_default)!important;color:var(--c_text_primary)!important;border-radius:0}.ant-select-dropdown .ant-select-item-option-selected{align-items:center;padding:1rem;background-color:var(--c_single_select_fill_menu_item_active)!important}.ant-select-dropdown .ant-select-item-option-active:not(.ant-select-item-option-selected){align-items:center;padding:1rem;background-color:var(--c_single_select_fill_menu_item_hover)!important}.ant-select .ant-select-arrow{padding-right:.75rem;color:var(--c_secondary)}.ant-select-selection-placeholder{font-size:var(--font_s)!important;color:var(--c_text_secondary)!important}.ant-select-selection-item{font-size:var(--font_s)!important;color:var(--c_text_primary)!important;background-color:unset!important}
+*{box-sizing:border-box}body{margin:0}mark{background-color:unset!important;padding:0rem!important}hr,p{margin:0}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}}.icon_svg{width:100%;height:100%}.size_xs{width:16px;height:16px}.size_s{width:20px;height:20px}.size_m{width:24px;height:24px}.size_l{width:32px;height:32px}.size_xl{width:48px;height:48px}.button{transition:all .2s ease-in-out;display:flex;align-items:center;cursor:pointer;position:relative;background-color:unset;border:none}.button .background{position:absolute;z-index:1;width:100%;height:100%;top:0;left:0;border-radius:500px}.button .background.primary{filter:opacity(.05)}.button .background.primary:hover{filter:opacity(.15)}.button .background.primary:active{filter:opacity(1)}.button .background.secondary{filter:opacity(.1)}.button .background.secondary:hover{filter:opacity(.15)}.button .background.secondary:active{filter:opacity(.2)}.button .background.tertiary{filter:opacity(0)}.button .background.tertiary:hover{filter:opacity(.1)}.button .background.tertiary:active{filter:opacity(.2)}.button .background.nav{filter:opacity(0)}.button .background.nav:hover{filter:opacity(.1)}.button .background.nav:active{filter:opacity(.2)}.button .background.disabled{filter:opacity(.05)!important}.button .background.disabled.tertiary,.button .background.disabled.nav{filter:opacity(0)!important}.button>p{align-self:center;font-weight:var(--hydra_font_weight_m);z-index:2}.button.disabled,.button.disabled:hover,.button.disabled:active{cursor:no-drop!important;color:var(--hydra_c_disabled)!important}.button.disabled{cursor:no-drop;color:var(--hydra_c_disabled)}.button.disabled.primary,.button.disabled.primary:hover,.button.disabled.primary:active{outline-width:1px!important}.button.disabled.secondary,.button.disabled.secondary:hover,.button.disabled.secondary:active,.button.disabled.tertiary,.button.disabled.tertiary:hover,.button.disabled.tertiary:active,.button.disabled.nav,.button.disabled.nav:hover,.button.disabled.nav:active{outline-width:0px!important}.button.disabled.primary{outline-width:1px!important}.button.secondary{outline-width:0px!important}.button.secondary:hover,.button.secondary:active{outline-width:1px!important}.button.nav,.button.nav:hover{outline-width:0px!important}.button.nav:active{outline-width:1px!important}.button>p,.button>svg{z-index:2;pointer-events:none}.button.primary:active>p{color:var(--hydra_c_text_tertiary)!important}.button.fixed.h_s{--button_height: 30px;height:var(--button_height);border-radius:calc(var(--button_height) / 2);font-size:var(--font_s);padding:0px calc(var(--button_height) / 5)}.button.fixed.h_m{--button_height: 40px;height:var(--button_height);border-radius:calc(var(--button_height) / 2);padding:0px calc(var(--button_height) / 5)}.button.fixed.h_l{--button_height: 50px;height:var(--button_height);border-radius:calc(var(--button_height) / 2);padding:0px calc(var(--button_height) / 5)}.button.hugging.p_s{padding:3px 10px;border-radius:500px;font-size:var(--font_s)}.button.hugging.p_m{padding:6px 18px;border-radius:500px}.button.hugging.p_l{padding:10px 22px;border-radius:500px}.button.fixed.h_s.icon{--button_height: 30px;height:var(--button_height);border-radius:calc(var(--button_height) / 2);font-size:var(--font_s);padding:calc(var(--button_height) / 5) calc(var(--button_height) / 5)}.button.fixed.h_m.icon{--button_height: 40px;height:var(--button_height);border-radius:calc(var(--button_height) / 2);padding:calc(var(--button_height) / 5) calc(var(--button_height) / 5)}.button.fixed.h_l.icon{--button_height: 50px;height:var(--button_height);border-radius:calc(var(--button_height) / 2);padding:calc(var(--button_height) / 5) calc(var(--button_height) / 5)}.button.hugging.p_s.icon{padding:5px;border-radius:500px;font-size:var(--font_s)}.button.hugging.p_m.icon{padding:10px;border-radius:500px}.button.hugging.p_l.icon{padding:15px;border-radius:500px}.button.text_xs{font-size:var(--font_xs)!important}.button.text_s{font-size:var(--font_s)!important}.button.text_m{font-size:var(--font_m)!important}.button.text_l{font-size:var(--font_l)!important}.button.text_xl{font-size:var(--font_xl)!important}.input_wrapper{--color_text_secondary: #292929;--color_input_box_default: rgb(224, 222, 222);--color_input_box_active: #ffffff;--color_input_box_border_primary: #292929;--color_input_box_disabled: rgb(168, 168, 168);--color_disabled: rgb(24, 24, 24);--font_s: 14px;transition:all .2s ease-in-out;display:flex;align-items:center;position:relative;border:none;box-sizing:border-box;gap:8px;color:var(--color_text_secondary);background-color:var(--color_input_box_default);border-radius:25px;--input_box_height_s: 30px;--input_box_height_m: 40px;--input_box_height_l: 50px;--input_box_padding_s: .5rem 1.25rem;--input_box_padding_m: .75rem 1.25rem;--input_box_padding_l: .5rem 1.5rem}.input_wrapper.disabled{cursor:no-drop!important}.input_wrapper.disabled>.input{cursor:no-drop!important}.input_wrapper.h_s{height:var(--input_box_height_s);padding:var(--input_box_padding_s)}.input_wrapper.h_m{height:var(--input_box_height_m);padding:var(--input_box_padding_m)}.input_wrapper.h_l{height:var(--input_box_height_l);padding:var(--input_box_padding_l)}.input_wrapper:focus-within{background-color:var(--color_input_box_active);outline:1px solid var(--color_input_box_border_primary)}.input_wrapper.icon_before{flex-direction:row}.input_wrapper.icon_after{flex-direction:row-reverse}.input{border:none!important;outline:none!important;background:transparent;text-overflow:ellipsis;overflow:hidden!important;min-width:0!important;flex-grow:1;font-size:var(--font_s)!important}.input_wrapper:not(.empty):not(.disabled):not(:focus-within){background-color:var(--color_input_box_result);color:var(--color_text_secondary)}.input::placeholder{font-size:var(--font_s)!important;color:var(--color_text_secondary)}.icon-wrapper{display:flex;align-items:center;justify-content:center}.input_wrapper.input-disabled{background-color:var(--color_input_box_disabled);color:var(--color_disabled)}.multi_select_container,.multi_select_dropdown{--font_weight_m: 500;--color_text_primary: #292929;--fill_focused: #b8b8b8;--fill_default: #cecece;--color_icon: #292929;--color_text_secondary: #f1f1f1;--color_dropdown_border: #b8b8b8;--menuitem_active: #9b9b9b;--menuitem_hover: #d6d6d6;--menuitem_default: #ebebeb}.multi_select_container{display:flex;justify-content:center;align-items:center;height:unset;--select_height_s: 30px;--select_height_default: 40px;--select_height_l: 50px;--select_padding_s: 1rem 1rem;--select_padding_default: 1.25rem 1rem;--select_padding_l: .5rem 1.5rem}.multi_select_container.ant-select-focused:not(.ant-select-disabled):not(.ant-select-customize-input) .ant-select-selector{outline:1px solid var(--color_dropdown_border)!important;background-color:var(--fill_focused)!important}.multi_select_container.ant-select-focused:not(.ant-select-disabled):not(.ant-select-customize-input) .ant-select-selector>.ant-select-selection-item{font-weight:var(--font_weight_m)!important}.multi_select_container>.ant-select-selector{outline:none!important;border:none!important;border-radius:100px!important;box-shadow:none!important;color:var(--color_text_primary)!important;background-color:var(--fill_default)!important;width:100%!important;height:40px!important;padding:0 .75rem!important}.ant-select-selection-overflow-item>.ant-select-selection-item{background-color:var(--menuitem_active)!important;border-radius:500px!important}.ant-select-selection-item{border-radius:500px!important}.multi_select_container.h_s>.ant-select-selector{height:var(--select_height_s)!important}.multi_select_container.h_m>.ant-select-selector{height:var(--select_height_default)!important}.multi_select_container.h_l>.ant-select-selector{height:var(--select_height_l)!important}.multi_select_container.h_l>.ant-select-selector:focus{background-color:red!important}.ant-select-selection-wrap{height:100%}.ant-select-selection-item{font-size:var(--font_s)!important;color:var(--color_text_primary)!important}.multi_select_dropdown{z-index:10000;border-radius:20px;outline:1px solid var(--color_dropdown_border);box-shadow:unset;padding:0}.multi_select_dropdown .ant-select-item-option{align-items:center;padding:1rem;background-color:var(--menuitem_default)!important;color:var(--color_text_primary)!important;border-radius:0}.multi_select_dropdown .ant-select-item-option-selected{align-items:center;padding:1rem;background-color:var(--menuitem_active)!important}.multi_select_dropdown .ant-select-item-option-active:not(.ant-select-item-option-selected){align-items:center;padding:1rem;background-color:var(--menuitem_hover)!important}.ant-select .ant-select-arrow{padding-right:.75rem;color:var(--color_icon)}.ant-select-selection-placeholder{font-size:var(--font_s)!important;color:var(--color_text_primary)!important}.ant-select-selection-item{font-size:var(--font_s)!important;color:var(--color_text_primary)!important;background-color:unset!important}.single_select_container,.single_select_dropdown{--color_select_border: #a3a3a3;--c_single_select_input_fill_default: #bbbbbb;--c_single_select_input_fill_active: #b3b3b3;--font_s: 14px;--font_weight_m: 500;--c_text_primary: #fff;--c_single_select_fill_menu_item_default: #dddddd;--c_single_select_fill_menu_item_active: #cecece;--c_single_select_fill_menu_item_hover: #b1b1b1;--c_secondary: #fff;--c_text_primary: #292929}.single_select_container{display:flex;justify-content:center;align-items:center;height:unset;--select_height_s: 30px;--select_height_default: 40px;--select_height_l: 50px;--select_padding_s: 1rem 1rem;--select_padding_default: 1.25rem 1rem;--select_padding_l: .5rem 1.5rem}.single_select_container.ant-select-focused:not(.ant-select-disabled):not(.ant-select-customize-input) .ant-select-selector{outline:1px solid var(--color_select_border)!important;background-color:var(--c_single_select_input_fill_active)!important}.single_select_container.ant-select-focused:not(.ant-select-disabled):not(.ant-select-customize-input) .ant-select-selector>.ant-select-selection-item{font-weight:var(--font_weight_m)!important}.single_select_container>.ant-select-selector{outline:none!important;border:none!important;border-radius:100px!important;box-shadow:none!important;color:var(--c_text_primary)!important;background-color:var(--c_single_select_input_fill_default)!important}.single_select_container.h_s>.ant-select-selector{height:var(--select_height_s)!important;padding:var(--select_padding_s)!important}.single_select_container.h_m>.ant-select-selector{height:var(--select_height_default)!important;padding:var(--select_padding_default)!important}.single_select_container.h_l>.ant-select-selector{height:var(--select_height_l)!important;padding:var(--select_padding_l)!important}.single_select_container.h_l>.ant-select-selector:focus{background-color:red!important}.single_select_dropdown{z-index:10000;border-radius:20px;outline:1px solid var(--color_select_border);box-shadow:unset;padding:0}.single_select_dropdown .ant-select-item-option{align-items:center;padding:1rem;background-color:var(--c_single_select_fill_menu_item_default)!important;color:var(--c_text_primary)!important;border-radius:0}.single_select_dropdown .ant-select-item-option-selected{align-items:center;padding:1rem;background-color:var(--c_single_select_fill_menu_item_active)!important}.single_select_dropdown .ant-select-item-option-active:not(.ant-select-item-option-selected){align-items:center;padding:1rem;background-color:var(--c_single_select_fill_menu_item_hover)!important}.ant-select .ant-select-arrow{padding-right:.75rem;color:var(--c_secondary)}.ant-select-selection-placeholder{font-size:var(--font_s)!important;color:var(--c_text_primary)!important}.ant-select-selection-item{font-size:var(--font_s)!important;color:var(--c_text_primary)!important;background-color:unset!important}

package/dist/index.d.ts

@@ -1,8 +1,33 @@
 import { ComponentProps } from 'react';
+import { default as default_2 } from 'react';
 import * as React_2 from 'react';
 
 /**
  * Button component props.
+ /**
+ * @typedef {Object} ButtonProps
+ * @property {string} [variant="primary"] - Variant of the button, affects styling.
+ * @property {string} [background="rgb(255, 204, 0)"] - Background color of the button.
+ * @property {string} [border="#292929"] - Border color of the button.
+ * @property {string} [container="hugging"] - Container type for button sizing.
+ * @property {string} [width="13.5rem"] - Width of the button.
+ * @property {string} [height="m"] - Height of the button.
+ * @property {string} [padding="m"] - Padding inside the button.
+ * @property {string} [gap="0.25rem"] - Gap between elements inside the button.
+ * @property {string} [placement="center"] - Placement of the content inside the button.
+ * @property {boolean} [disabled=false] - If true, the button is disabled.
+ * @property {boolean} [loading=false] - If true, the button shows a loading state.
+ * @property {string} [text=null] - Text to display inside the button.
+ * @property {string} [textSize="s"] - Size of the text inside the button.
+ * @property {string} [textColor="#292929"] - Color of the text inside the button.
+ * @property {Object.<string, string>} [textColorStates=null] - Color states for the text.
+ * @property {IconName} [icon=null] - Icon to display inside the button.
+ * @property {string} [iconSize="s"] - Size of the icon inside the button.
+ * @property {string} [iconColor="#292929"] - Color of the icon inside the button.
+ * @property {string} [iconPosition="before"] - Position of the icon relative to the text.
+ * @property {Object.<string, string>} [iconColorStates=null] - Color states for the icon.
+ * @property {string} [className=null] - Additional class names for styling.
+ * @property {...React.ComponentPropsWithoutRef<'button'>} [props=null] - Other button props
  */
 export declare const Button: React.FC<ButtonProps>;
 
@@ -48,6 +73,19 @@ declare type HTMLButtonProps = ComponentProps<"button">;
 
 declare type HTMLInputProps = ComponentProps<"input">;
 
+/**
+ * A component that renders an icon by its name.
+ *
+ * The icon must be registered in the {@link IconRegistry}.
+ *
+ * @prop {string} name - Name of the icon to use.
+ * @prop {string} [className] - Additional class names for styling.
+ * @prop {"xs" | "s" | "m" | "l" | "xl"} [size] - Size of the icon.
+ * @prop {string} [background] - Background color of the icon.
+ * @prop {string} [color] - Color of the icon.
+ * @prop {React.MouseEventHandler<SVGSVGElement>} [onClick] - Callback when the icon is clicked.
+ * @prop {React.SVGAttributes<SVGSVGElement>} ...svgProps - Additional props to pass to the SVG element.
+ */
 export declare const Icon: React_2.FC<IconProps>;
 
 declare type IconName = keyof typeof IconRegistry;
@@ -65,6 +103,20 @@ declare type IconProps = SVGprops & {
 
 declare const IconRegistry: Record<string, any>;
 
+/**
+ * Input component props.
+ *
+ * @prop {string} [className] - Additional class names for styling.
+ * @prop {string | number} [value] - The value of the input.
+ * @prop {"s" | "m" | "l"} [height] - The height of the input.
+ * @prop {CSSstring} [width] - The width of the input.
+ * @prop {"flex-start" | "center" | "flex-end"} [placement] - The placement of the content inside the input.
+ * @prop {IconName} [icon] - The icon to display inside the input.
+ * @prop {"before" | "after"} [iconPosition] - The position of the icon relative to the input.
+ * @prop {Color} [iconColor] - The color of the icon.
+ * @prop {boolean} [disabled] - If true, the input is disabled.
+ * @prop {React.ChangeEventHandler<HTMLInputElement>} [onChange] - The callback function when the input changes.
+ */
 export declare const Input: React.FC<InputProps>;
 
 declare type InputProps = HTMLInputProps & {
@@ -82,26 +134,79 @@ declare type InputProps = HTMLInputProps & {
 
 declare type JustifyContent = "center" | "start" | "end" | "flex-start" | "flex-end" | "left" | "right" | "baseline" | "first baseline" | "last baseline" | "space-between" | "space-around" | "space-evenly" | "stretch";
 
+/**
+ * A multiselect component.
+ *
+ * @prop {Option[]} options - Options for the multiselect.
+ * @prop {(value: string[]) => void} onChange - Callback function when the selection changes.
+ * @prop {string} [placeholder] - Placeholder text for the input.
+ * @prop {boolean} [searchable] - Whether the input is searchable.
+ * @prop {string[]} [value] - The selected values.
+ * @prop {string} [className] - The class name for the component.
+ * @prop {boolean} [disabled] - Whether the component is disabled.
+ * @prop {CSSstring} [width] - The width of the component.
+ * @prop {string} [height] - The height of the component.
+ * @prop {string} [id] - The id of the component.
+ */
+export declare const Multiselect: default_2.FC<MultiselectProps>;
+
+declare type MultiselectProps = {
+    options: Option_2[];
+    onChange: (value: string[]) => void;
+    placeholder?: string;
+    searchable?: boolean;
+    maxTagCount?: "responsive" | number;
+    value?: string[];
+    width?: CSSstring;
+    height?: string;
+    className?: string;
+    disabled?: boolean;
+    id?: string;
+};
+
+declare type Option_2 = {
+    label: string;
+    value: string;
+};
+
 declare type Padding = "s" | "m" | "l";
 
+/**
+ * A single select component.
+ *
+ * @prop {Option[]} options - Options for the select.
+ * @prop {(value: string) => void} onChange - Callback function when the selection changes.
+ * @prop {string} [placeholder] - Placeholder text for the input.
+ * @prop {boolean} [searchable] - Whether the input is searchable.
+ * @prop {string} [value] - The selected value.
+ * @prop {string} [className] - The class name for the component.
+ * @prop {boolean} [disabled] - Whether the component is disabled.
+ * @prop {CSSstring} [width] - The width of the component.
+ * @prop {string} [height] - The height of the component.
+ * @prop {string} [id] - The id of the component.
+ */
 export declare const Select: React.FC<SelectProps>;
 
 declare type SelectProps = {
-    options: {
-        value: string;
-        label: string;
-    }[];
+    options: Option_2[];
+    onChange: (value: string) => void;
     placeholder?: string;
     searchable?: boolean;
-    onChange: (value: string) => void;
     value?: string;
-    containerClass?: string;
+    className?: string;
     disabled?: boolean;
     width?: CSSstring;
     height?: string;
     id?: string;
 };
 
+/**
+ * Spinner component props.
+ *
+ * @typedef {Object} SpinnerProps
+ * @property {SpinnerProps.size} [size="m"] - Size of the spinner.
+ * @property {SpinnerProps.color} [color] - Color of the spinner.
+ */
 export declare const Spinner: React_2.FC<SpinnerProps>;
 
 declare type SpinnerProps = {