@soul-refiner/design-system 2.0.4 → 2.1.1-alpha.1

package/dist/components/input/filter/filter.js

@@ -1,147 +1,10 @@
 "use client";
-'use strict';
-
-var React = require('react');
-var styled = require('styled-components');
-var box = require('../../atoms/box/box.js');
-var button = require('../../actions/button/button.js');
-var paragraph = require('../../atoms/typography/paragraph.js');
-var chevron_down = require('../../../icons/arrow/chevron_down.js');
-var chevron_up = require('../../../icons/arrow/chevron_up.js');
-var close = require('../../../icons/basic/close.js');
-var styles = require('../../../common/styles.js');
-var filter_option = require('./filter_option.js');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-
-const Filter = ({ closeOnBlur = true, disabled, graphic, graphicAlignment = 'left', resetGraphic, label = '', sx, triggerType, options, defaultValue = '', closeOnChange = true, optionOnChange, optionShowClose, checkbox, applyOnClick, resetOnClick, applyResetActions, }) => {
-    const multiple = !!checkbox;
-    const wrapperRef = React__default.default.useRef(null);
-    const optionsRef = React__default.default.useRef(null);
-    const [open, setOpen] = React__default.default.useState(false);
-    const [selected, setSelected] = React__default.default.useState(() => defaultValue ? defaultValue : multiple ? [] : '');
-    const [filterLabel, setFilterLabel] = React__default.default.useState('');
-    React__default.default.useEffect(() => {
-        if (disabled) {
-            setOpen(false);
-        }
-    }, [disabled]);
-    React__default.default.useEffect(() => {
-        if (triggerType === 'outlined' && defaultValue === undefined) {
-            setSelected(multiple
-                ? [options[0]?.value]
-                : options[0]?.value);
-        }
-    }, [triggerType, defaultValue]);
-    React__default.default.useEffect(() => {
-        if (open) {
-            return;
-        }
-        if (!selected.length) {
-            setFilterLabel(label);
-            return;
-        }
-        // not using selected[0] since it is required to show the first
-        const firstSelected = options.find((option) => typeof option !== 'string' && isSelected(option.value));
-        if (typeof selected === 'string') {
-            setFilterLabel(firstSelected.label);
-            return;
-        }
-        setFilterLabel(selected.length > 1
-            ? `${firstSelected.label} +${selected.length - 1}`
-            : firstSelected.label);
-    }, [selected, options, open]);
-    const handleOpen = () => {
-        if (disabled) {
-            return;
-        }
-        setOpen((prev) => !prev);
-    };
-    const handleBlur = (event) => {
-        if (closeOnBlur &&
-            wrapperRef?.current &&
-            !wrapperRef?.current?.contains(event.relatedTarget)) {
-            setOpen(false);
-        }
-    };
-    const handleChangeSingle = (event) => {
-        event.stopPropagation();
-        const value = event.target.getAttribute('data-value') ?? '';
-        if (selected !== value) {
-            setSelected(value);
-        }
-        else {
-            setSelected('');
-        }
-        if (closeOnChange && !applyOnClick) {
-            setOpen(false);
-        }
-        if (optionOnChange)
-            optionOnChange(event);
-    };
-    const handleChangeMultiple = (event) => {
-        event.stopPropagation();
-        const value = event.target.getAttribute('data-value') ?? '';
-        if (Array.isArray(selected) && selected.includes(value)) {
-            setSelected((prev) => prev.filter((item) => item !== value));
-        }
-        else {
-            setSelected((prev) => [value, ...prev]);
-        }
-        if (closeOnChange && !applyOnClick) {
-            setOpen(false);
-        }
-        if (optionOnChange)
-            optionOnChange(event);
-    };
-    const handleChange = multiple ? handleChangeMultiple : handleChangeSingle;
-    const isSelected = (value) => multiple ? selected.includes(value) : value === selected;
-    const dropdownOptions = [
-        ...options.map((option, index) => {
-            if (typeof option === 'string' && option === 'break') {
-                return React__default.default.createElement(filter_option.Spacer, { key: `${React__default.default.useId()}-spacer-${index}` });
-            }
-            return (React__default.default.createElement(filter_option.Option, { key: option.value, onClick: handleChange, selected: isSelected(option.value), checkbox: checkbox, radio: !multiple && triggerType === 'pill', showClose: optionShowClose === undefined
-                    ? index === 0 && triggerType === 'pill'
-                    : optionShowClose, onClose: () => setOpen(false), ...option }));
-        }),
-        triggerType === 'pill' && React__default.default.createElement(filter_option.Spacer, { key: `spacer-${options.length}` }),
-    ];
-    const showResetGraphic = resetGraphic &&
-        (typeof selected === 'string' ? !!selected : !!selected.length);
-    return (React__default.default.createElement(Wrapper, { "$sx": sx, tabIndex: 0, ref: wrapperRef, onBlurCapture: handleBlur },
-        React__default.default.createElement(FilterTrigger, { disabled: disabled, graphic: graphic, graphicAlignment: graphicAlignment, label: label, onClick: handleOpen, onReset: resetGraphic
-                ? (event) => {
-                    event.stopPropagation();
-                    resetOnClick && resetOnClick(event);
-                    setSelected(multiple ? [] : '');
-                    setOpen(false);
-                }
-                : undefined, open: open, resetGraphic: showResetGraphic, type: triggerType, value: filterLabel }),
-        open && (React__default.default.createElement(Container, { ref: optionsRef },
-            React__default.default.createElement(React__default.default.Fragment, null,
-                dropdownOptions,
-                triggerType === 'pill' && applyResetActions && (React__default.default.createElement(box.Box, { "$display": "flex", "$dir": "row", "$align": "center", "$justify": "flex-end", "$gap": 8, sx: "margin-top: 8px; padding-right: 8px; padding-bottom: 8px" },
-                    React__default.default.createElement(button.Button, { onClick: (event) => {
-                            resetOnClick && resetOnClick(event);
-                            setSelected(multiple ? [] : '');
-                            setOpen(false);
-                        }, size: "small", type: "text" }, "Reset"),
-                    React__default.default.createElement(button.Button, { onClick: (event) => {
-                            applyOnClick && applyOnClick(event);
-                            setOpen(false);
-                        }, size: "small", type: "primary" }, "Apply"))))))));
-};
-const Wrapper = styled__default.default.div `
+"use strict";var React=require("react"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),button=require("../../actions/button/button.js"),paragraph=require("../../atoms/typography/paragraph.js"),chevron_down=require("../../../icons/arrow/chevron_down.js"),chevron_up=require("../../../icons/arrow/chevron_up.js"),close=require("../../../icons/basic/close.js"),styles=require("../../../common/styles.js"),filter_option=require("./filter_option.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),styled__default=_interopDefaultCompat(styled);const Filter=({closeOnBlur:t=!0,disabled:e,graphic:a,graphicAlignment:l="left",resetGraphic:r,label:o="",sx:n,triggerType:d,options:u,defaultValue:c="",closeOnChange:i=!0,optionOnChange:s,optionShowClose:p,checkbox:f,applyOnClick:_,resetOnClick:g,applyResetActions:v})=>{const b=!!f,y=React__default.default.useRef(null);var h=React__default.default.useRef(null);const[m,x]=React__default.default.useState(!1),[R,C]=React__default.default.useState(()=>c||(b?[]:"")),[E,k]=React__default.default.useState("");React__default.default.useEffect(()=>{e&&x(!1)},[e]),React__default.default.useEffect(()=>{"outlined"===d&&void 0===c&&C(b?[u[0]?.value]:u[0]?.value)},[d,c]),React__default.default.useEffect(()=>{var e;m||(R.length?(e=u.find(e=>"string"!=typeof e&&w(e.value)),"string"==typeof R?k(e.label):k(1<R.length?e.label+" +"+(R.length-1):e.label)):k(o))},[R,u,m]);const $=b?e=>{e.stopPropagation();const t=e.target.getAttribute("data-value")??"";Array.isArray(R)&&R.includes(t)?C(e=>e.filter(e=>e!==t)):C(e=>[t,...e]),i&&!_&&x(!1),s&&s(e)}:e=>{e.stopPropagation();var t=e.target.getAttribute("data-value")??"";R!==t?C(t):C(""),i&&!_&&x(!1),s&&s(e)},w=e=>b?R.includes(e):e===R;var P=[...u.map((e,t)=>"string"==typeof e&&"break"===e?React__default.default.createElement(filter_option.Spacer,{key:React__default.default.useId()+"-spacer-"+t}):React__default.default.createElement(filter_option.Option,{key:e.value,onClick:$,selected:w(e.value),checkbox:f,radio:!b&&"pill"===d,showClose:void 0===p?0===t&&"pill"===d:p,onClose:()=>x(!1),...e})),"pill"===d&&React__default.default.createElement(filter_option.Spacer,{key:"spacer-"+u.length})],S=r&&("string"==typeof R?!!R:!!R.length);return React__default.default.createElement(Wrapper,{$sx:n,tabIndex:0,ref:y,onBlurCapture:e=>{t&&y?.current&&!y?.current?.contains(e.relatedTarget)&&x(!1)}},React__default.default.createElement(FilterTrigger,{disabled:e,graphic:a,graphicAlignment:l,label:o,onClick:()=>{e||x(e=>!e)},onReset:r?e=>{e.stopPropagation(),g&&g(e),C(b?[]:""),x(!1)}:void 0,open:m,resetGraphic:S,type:d,value:E}),m&&React__default.default.createElement(Container,{ref:h},React__default.default.createElement(React__default.default.Fragment,null,P,"pill"===d&&v&&React__default.default.createElement(box.Box,{$display:"flex",$dir:"row",$align:"center",$justify:"flex-end",$gap:8,sx:"margin-top: 8px; padding-right: 8px; padding-bottom: 8px"},React__default.default.createElement(button.Button,{onClick:e=>{g&&g(e),C(b?[]:""),x(!1)},size:"small",type:"text"},"Reset"),React__default.default.createElement(button.Button,{onClick:e=>{_&&_(e),x(!1)},size:"small",type:"primary"},"Apply")))))},Wrapper=styled__default.default.div`
   position: relative;
   display: block;
   outline: none;
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-const Container = styled__default.default.div `
+  ${({$sx:e})=>e||""}
+`,Container=styled__default.default.div`
   position: absolute;
   width: max-content;
   z-index: 100;
@@ -158,59 +21,7 @@ const Container = styled__default.default.div `
   & > div:last-of-type {
     border-radius: 0px 0px 8px 8px;
   }
-`;
-/********************************************************
- *  Triggers
- */
-const textProps = {
-    as: 'span',
-    $fontSize: 14,
-    $lineHeight: 20,
-};
-const wrapperProps = {
-    $align: 'center',
-    $dir: 'row',
-    $gap: 16,
-};
-const FilterTrigger = ({ disabled, graphic, graphicAlignment, label, onClick, resetGraphic, open, onReset, type, value, }) => {
-    if (type === 'pill') {
-        return (React__default.default.createElement(Pill, { disabled: disabled, onClick: onClick, "$labelIsDefault": value === label, ...wrapperProps },
-            graphicAlignment === 'left' ? graphic : null,
-            React__default.default.createElement(paragraph.P, { ...textProps }, value),
-            resetGraphic ? React__default.default.createElement(close.Close, { color: "blue-3", onClick: onReset }) : null,
-            graphicAlignment === 'right' ? graphic : null,
-            !graphic && !resetGraphic && (open ? React__default.default.createElement(chevron_up.ChevronUp, null) : React__default.default.createElement(chevron_down.ChevronDown, null))));
-    }
-    if (type === 'labeled') {
-        return (React__default.default.createElement(Labeled, { disabled: disabled, onClick: onClick, ...wrapperProps },
-            React__default.default.createElement(paragraph.P, { ...textProps }, label),
-            React__default.default.createElement(LabelSeparator, null),
-            React__default.default.createElement(paragraph.P, { "$color": "primary-blue-2", "$mediumBold": true, ...textProps }, value),
-            open ? React__default.default.createElement(chevron_up.ChevronUp, null) : React__default.default.createElement(chevron_down.ChevronDown, null)));
-    }
-    if (type === 'avatar') {
-        return (React__default.default.createElement(Avatar, { "$align": "center", "$dir": "row", "$gap": 8, disabled: disabled, onClick: onClick },
-            graphic,
-            open ? React__default.default.createElement(chevron_up.ChevronUp, null) : React__default.default.createElement(chevron_down.ChevronDown, null)));
-    }
-    if (type === 'text') {
-        return (React__default.default.createElement(Text, { disabled: disabled, onClick: onClick, ...wrapperProps },
-            React__default.default.createElement(paragraph.P, { "$color": "grey-4", "$semiBold": true, ...textProps },
-                label,
-                ":"),
-            React__default.default.createElement(paragraph.P, { "$color": "primary-blue-2", "$semiBold": true, className: "filter-trigger-value", ...textProps }, value),
-            open ? React__default.default.createElement(chevron_up.ChevronUp, null) : React__default.default.createElement(chevron_down.ChevronDown, null)));
-    }
-    return (React__default.default.createElement(Outlined, { disabled: disabled, onClick: onClick, ...wrapperProps },
-        graphicAlignment === 'left' ? graphic : null,
-        graphic,
-        React__default.default.createElement(paragraph.P, { ...textProps }, value),
-        graphicAlignment === 'right' ? graphic : null,
-        !graphic && (open ? React__default.default.createElement(chevron_up.ChevronUp, null) : React__default.default.createElement(chevron_down.ChevronDown, null))));
-};
-Filter.Trigger = FilterTrigger;
-FilterTrigger.displayName = 'Filter.Trigger';
-const sharedStyles = styled.css `
+`,textProps={as:"span",$fontSize:14,$lineHeight:20},wrapperProps={$align:"center",$dir:"row",$gap:16},FilterTrigger=({disabled:e,graphic:t,graphicAlignment:a,label:l,onClick:r,resetGraphic:o,open:n,onReset:d,type:u,value:c})=>"pill"===u?React__default.default.createElement(Pill,{disabled:e,onClick:r,$labelIsDefault:c===l,...wrapperProps},"left"===a?t:null,React__default.default.createElement(paragraph.P,{...textProps},c),o?React__default.default.createElement(close.Close,{color:"blue-3",onClick:d}):null,"right"===a?t:null,!t&&!o&&(n?React__default.default.createElement(chevron_up.ChevronUp,null):React__default.default.createElement(chevron_down.ChevronDown,null))):"labeled"===u?React__default.default.createElement(Labeled,{disabled:e,onClick:r,...wrapperProps},React__default.default.createElement(paragraph.P,{...textProps},l),React__default.default.createElement(LabelSeparator,null),React__default.default.createElement(paragraph.P,{$color:"primary-blue-2",$mediumBold:!0,...textProps},c),n?React__default.default.createElement(chevron_up.ChevronUp,null):React__default.default.createElement(chevron_down.ChevronDown,null)):"avatar"===u?React__default.default.createElement(Avatar,{$align:"center",$dir:"row",$gap:8,disabled:e,onClick:r},t,n?React__default.default.createElement(chevron_up.ChevronUp,null):React__default.default.createElement(chevron_down.ChevronDown,null)):"text"===u?React__default.default.createElement(Text,{disabled:e,onClick:r,...wrapperProps},React__default.default.createElement(paragraph.P,{$color:"grey-4",$semiBold:!0,...textProps},l,":"),React__default.default.createElement(paragraph.P,{$color:"primary-blue-2",$semiBold:!0,className:"filter-trigger-value",...textProps},c),n?React__default.default.createElement(chevron_up.ChevronUp,null):React__default.default.createElement(chevron_down.ChevronDown,null)):React__default.default.createElement(Outlined,{disabled:e,onClick:r,...wrapperProps},"left"===a?t:null,t,React__default.default.createElement(paragraph.P,{...textProps},c),"right"===a?t:null,!t&&(n?React__default.default.createElement(chevron_up.ChevronUp,null):React__default.default.createElement(chevron_down.ChevronDown,null))),sharedStyles=((Filter.Trigger=FilterTrigger).displayName="Filter.Trigger",styled.css`
   display: flex;
   padding: 10px 16px;
   border: none;
@@ -228,8 +39,7 @@ const sharedStyles = styled.css `
       fill: var(--color-grey-7);
     }
   }
-`;
-const Outlined = styled__default.default.button `
+`),Outlined=styled__default.default.button`
   ${sharedStyles}
   ${styles.Styles.flex}
   border: 1px solid var(--color-grey-8);
@@ -240,8 +50,7 @@ const Outlined = styled__default.default.button `
   &:hover {
     background-color: var(--color-grey-9);
   }
-`;
-const Pill = styled__default.default.button `
+`,Pill=styled__default.default.button`
   ${sharedStyles}
   ${styles.Styles.flex}
   border: 1px solid var(--color-grey-8);
@@ -249,8 +58,7 @@ const Pill = styled__default.default.button `
   background-color: var(--color-white);
   font-family: var(--font-inter);
 
-  ${({ $labelIsDefault }) => !$labelIsDefault
-    ? `
+  ${({$labelIsDefault:e})=>e?"":`
       & > * {
         color: var(--color-primary-blue-2);
         fill: currentColor;
@@ -264,10 +72,8 @@ const Pill = styled__default.default.button `
       &:hover {
         background-color: var(--color-primary-blue-4);
       }
-    `
-    : ''}
-`;
-const Labeled = styled__default.default.button `
+    `}
+`,Labeled=styled__default.default.button`
   ${sharedStyles}
   ${styles.Styles.flex}
   border-radius: 24px;
@@ -278,13 +84,11 @@ const Labeled = styled__default.default.button `
   &:hover {
     background-color: var(--color-grey-9);
   }
-`;
-const LabelSeparator = styled__default.default.div `
+`,LabelSeparator=styled__default.default.div`
   width: 1px;
   height: 20px;
   background-color: var(--color-grey-8);
-`;
-const Avatar = styled__default.default.button `
+`,Avatar=styled__default.default.button`
   ${sharedStyles}
   ${styles.Styles.flex}
   padding: 4px 16px;
@@ -304,8 +108,7 @@ const Avatar = styled__default.default.button `
       opacity: 0.5;
     }
   }
-`;
-const Text = styled__default.default.button `
+`,Text=styled__default.default.button`
   ${sharedStyles}
   ${styles.Styles.flex}
   gap: 8px;
@@ -327,6 +130,4 @@ const Text = styled__default.default.button `
     background-color: transparent;
     border: 1px solid transparent;
   }
-`;
-
-exports.Filter = Filter;
+`;exports.Filter=Filter;

package/dist/components/input/filter/filter_option.js

@@ -1,30 +1,5 @@
 "use client";
-'use strict';
-
-var React = require('react');
-var styled = require('styled-components');
-var box = require('../../atoms/box/box.js');
-var paragraph = require('../../atoms/typography/paragraph.js');
-var checkbox = require('../checkbox/checkbox.js');
-var radio = require('../radio/radio.js');
-var close = require('../../../icons/basic/close.js');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-const Option = ({ label, onClick, selected, sx, value, checkbox: checkbox$1, radio: radio$1 = false, showClose = false, onClose, }) => {
-    return (React__default.default.createElement(OptionWrapper, { "data-value": value, onClick: onClick, "$selected": selected, "$sx": sx, "$hasCheckbox": !!checkbox$1 },
-        checkbox$1 && React__default.default.createElement(checkbox.Checkbox, { selected: selected }),
-        radio$1 && React__default.default.createElement(radio.Radio, { checked: selected, value: value }),
-        React__default.default.createElement(box.Box, { "$dir": "column", "$display": "flex" }, label && (React__default.default.createElement(paragraph.P, { "$color": "grey-4", "$fontSize": 14, "$lineHeight": 20, "$mediumBold": true, "$textClampLines": 1 }, label))),
-        showClose && (React__default.default.createElement(close.Close, { sx: "margin-left: auto; pointer-events: auto !important;", size: 16, onClick: (event) => {
-                event.stopPropagation();
-                onClose && onClose();
-            } }))));
-};
-Option.displayName = 'Filter.Option';
-const OptionWrapper = styled.styled.div `
+"use strict";var React=require("react"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),paragraph=require("../../atoms/typography/paragraph.js"),checkbox=require("../checkbox/checkbox.js"),radio=require("../radio/radio.js"),close=require("../../../icons/basic/close.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Option=({label:e,onClick:a,selected:t,sx:r,value:o,checkbox:c,radio:l=!1,showClose:i=!1,onClose:n})=>React__default.default.createElement(OptionWrapper,{"data-value":o,onClick:a,$selected:t,$sx:r,$hasCheckbox:!!c},c&&React__default.default.createElement(checkbox.Checkbox,{selected:t}),l&&React__default.default.createElement(radio.Radio,{checked:t,value:o}),React__default.default.createElement(box.Box,{$dir:"column",$display:"flex"},e&&React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:14,$lineHeight:20,$mediumBold:!0,$textClampLines:1},e)),i&&React__default.default.createElement(close.Close,{sx:"margin-left: auto; pointer-events: auto !important;",size:16,onClick:e=>{e.stopPropagation(),n&&n()}})),OptionWrapper=(Option.displayName="Filter.Option",styled.styled.div`
   position: relative;
   z-index: 1;
   padding: 12px 16px;
@@ -38,20 +13,13 @@ const OptionWrapper = styled.styled.div `
     pointer-events: none;
   }
 
-  ${({ $selected, $hasCheckbox }) => {
-    if ($selected) {
-        return `
+  ${({$selected:e,$hasCheckbox:a})=>e?`
       background-color: var(--color-grey-9);
       &:active {
         background-color: var(--color-grey-8);
-      }`;
-    }
-    if ($hasCheckbox) {
-        return `&:hover {
+      }`:a?`&:hover {
         background-color: var(--color-grey-10);
-      }`;
-    }
-    return `
+      }`:`
     &:hover {
       background-color: var(--color-grey-10);
     }
@@ -59,15 +27,9 @@ const OptionWrapper = styled.styled.div `
     &:active {
       background-color: var(--color-grey-8);
     }
-    `;
-}}
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-const Spacer = ({ sx }) => {
-    return React__default.default.createElement(SpacerWrapper, { "$sx": sx });
-};
-Spacer.displayName = 'Filter.Spacer';
-const SpacerWrapper = styled.styled.div `
+    `}
+  ${({$sx:e})=>e||""}
+`),Spacer=({sx:e})=>React__default.default.createElement(SpacerWrapper,{$sx:e}),SpacerWrapper=(Spacer.displayName="Filter.Spacer",styled.styled.div`
   width: 100%;
   height: 1px;
   background-color: var(--color-grey-8);
@@ -75,8 +37,5 @@ const SpacerWrapper = styled.styled.div `
   &:hover {
     appearance: none;
   }
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-
-exports.Option = Option;
-exports.Spacer = Spacer;
+  ${({$sx:e})=>e||""}
+`);exports.Option=Option,exports.Spacer=Spacer;

package/dist/components/input/radio/radio.js

@@ -1,51 +1,23 @@
 "use client";
-'use strict';
-
-var React = require('react');
-var styled = require('styled-components');
-var box = require('../../atoms/box/box.js');
-var paragraph = require('../../atoms/typography/paragraph.js');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-const Radio = ({ checked = false, disabled, label, onClick, reversed, sx, value, ...rest }) => {
-    const handleInputClick = (event) => {
-        event.stopPropagation();
-        onClick && onClick(event);
-    };
-    const handleLabelClick = (event) => {
-        event.stopPropagation();
-        event.preventDefault();
-        onClick && onClick(event);
-    };
-    return (React__default.default.createElement(Label, { "$disabled": disabled, "$reversed": reversed, "$sx": sx, onClick: handleLabelClick },
-        React__default.default.createElement(Input, { checked: checked, onClickCapture: handleInputClick, disabled: disabled, type: "radio", value: value, ...rest }),
-        React__default.default.createElement(paragraph.P, { as: "span" }, label)));
-};
-const Label = styled.styled.label `
+"use strict";var React=require("react"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),paragraph=require("../../atoms/typography/paragraph.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Radio=({checked:e=!1,disabled:r,label:a,onClick:t,reversed:o,sx:l,value:d,...i})=>{return React__default.default.createElement(Label,{$disabled:r,$reversed:o,$sx:l,onClick:e=>{e.stopPropagation(),e.preventDefault(),t&&t(e)}},React__default.default.createElement(Input,{checked:e,onClickCapture:e=>{e.stopPropagation(),t&&t(e)},disabled:r,type:"radio",value:d,...i}),React__default.default.createElement(paragraph.P,{as:"span"},a))},Label=styled.styled.label`
   display: flex;
   align-items: center;
   gap: 8px;
   user-select: none;
 
-  ${({ $disabled }) => $disabled
-    ? `
+  ${({$disabled:e})=>e?`
     & > * {
       color: var(--color-grey-7);
-    }`
-    : `
+    }`:`
     cursor: pointer;
     &:hover {
       input {
         border-color: var(--color-primary-blue-2);
       }
     }`}
-  flex-direction: ${({ $reversed }) => ($reversed ? 'row-reverse' : 'row')};
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-const Input = styled.styled.input `
+  flex-direction: ${({$reversed:e})=>e?"row-reverse":"row"};
+  ${({$sx:e})=>e||""}
+`,Input=styled.styled.input`
   appearance: none;
   position: relative;
   height: 20px;
@@ -79,14 +51,4 @@ const Input = styled.styled.input `
       }
     }
   }
-`;
-const RadioGroup = ({ children, name, ...rest }) => {
-    return (React__default.default.createElement(box.Box, { ...rest }, React__default.default.Children.map(children, (child) => {
-        if (React__default.default.isValidElement(child))
-            return React__default.default.createElement(Radio, { key: child.key, name: name, ...child.props });
-    })));
-};
-Radio.Group = RadioGroup;
-RadioGroup.displayName = 'Radio.Group';
-
-exports.Radio = Radio;
+`,RadioGroup=({children:e,name:r,...a})=>React__default.default.createElement(box.Box,{...a},React__default.default.Children.map(e,e=>{if(React__default.default.isValidElement(e))return React__default.default.createElement(Radio,{key:e.key,name:r,...e.props})}));(Radio.Group=RadioGroup).displayName="Radio.Group",exports.Radio=Radio;

package/dist/components/input/search/search.js

@@ -1,61 +1,17 @@
 "use client";
-'use strict';
-
-var React = require('react');
-var styled = require('styled-components');
-var styles = require('../../../common/styles.js');
-var close = require('../../../icons/basic/close.js');
-var search = require('../../../icons/basic/search.js');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-const Search = ({ dropdownFilter, onChange, onClearText, onSubmit, placeholder, size, sx, value, }) => {
-    const [expanded, setExpanded] = React__default.default.useState(false);
-    const [focused, setFocused] = React__default.default.useState(false);
-    const inputRef = React__default.default.useRef(null);
-    const isCollapsed = !expanded && size === 'collapsed';
-    const iconSize = isCollapsed || size === 'large' ? 24 : 16;
-    const handleExpand = () => {
-        setExpanded(true);
-        inputRef?.current?.focus();
-    };
-    const handleCollapse = () => {
-        setExpanded(false);
-        setFocused(false);
-        inputRef?.current?.blur();
-    };
-    const handleFocus = () => {
-        inputRef?.current?.focus();
-    };
-    return (React__default.default.createElement(Wrapper, { "$align": "center", "$dir": "row", "$isCollapsed": isCollapsed, "$isFocused": focused, "$borderRadius": "large", "$size": size, "$sx": sx, onClick: dropdownFilter && size === 'large'
-            ? undefined
-            : isCollapsed
-                ? handleExpand
-                : handleFocus },
-        React__default.default.createElement(search.Search, { color: size === 'large' ? 'blue-7' : 'grey-3', size: iconSize, onClick: isCollapsed ? undefined : handleCollapse, sx: isCollapsed || size !== 'collapsed'
-                ? undefined
-                : `
+"use strict";var React=require("react"),styled=require("styled-components"),styles=require("../../../common/styles.js"),close=require("../../../icons/basic/close.js"),search=require("../../../icons/basic/search.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Search=({dropdownFilter:e,onChange:r,onClearText:o,onSubmit:a,placeholder:l,size:t,sx:d,value:s})=>{const[i,c]=React__default.default.useState(!1),[n,p]=React__default.default.useState(!1),u=React__default.default.useRef(null);var g=!i&&"collapsed"===t,x=g||"large"===t?24:16;return React__default.default.createElement(Wrapper,{$align:"center",$dir:"row",$isCollapsed:g,$isFocused:n,$borderRadius:"large",$size:t,$sx:d,onClick:e&&"large"===t?void 0:g?()=>{c(!0),u?.current?.focus()}:()=>{u?.current?.focus()}},React__default.default.createElement(search.Search,{color:"large"===t?"blue-7":"grey-3",size:x,onClick:g?void 0:()=>{c(!1),p(!1),u?.current?.blur()},sx:g||"collapsed"!==t?void 0:`
           &:hover {
             cursor: pointer;
             background-color: var(--color-grey-10);
             border-radius: 50%;
-          }` }),
-        React__default.default.createElement(Input, { "$isCollapsed": isCollapsed, onBlur: () => setFocused(false), onChange: onChange, onFocus: () => setFocused(true), onSubmit: onSubmit, placeholder: placeholder, ref: inputRef, value: value }),
-        !isCollapsed && onClearText && (React__default.default.createElement(close.Close, { size: 16, onClick: onClearText, sx: `
-            ${value.length === 0 ? 'visibility: hidden;' : ''}
+          }`}),React__default.default.createElement(Input,{$isCollapsed:g,onBlur:()=>p(!1),onChange:r,onFocus:()=>p(!0),onSubmit:a,placeholder:l,ref:u,value:s}),!g&&o&&React__default.default.createElement(close.Close,{size:16,onClick:o,sx:`
+            ${0===s.length?"visibility: hidden;":""}
             padding: 4px;
             &:hover {
               cursor: pointer;
               background-color: var(--color-grey-10);
               border-radius: 50%;
-            }` })),
-        size === 'large' && dropdownFilter && (React__default.default.createElement(React__default.default.Fragment, null,
-            React__default.default.createElement(Separator, null),
-            dropdownFilter))));
-};
-const Wrapper = styled.styled.div `
+            }`}),"large"===t&&e&&React__default.default.createElement(React__default.default.Fragment,null,React__default.default.createElement(Separator,null),e))},Wrapper=styled.styled.div`
   ${styles.Styles.flex}
   ${styles.Styles.padding}
   display: flex;
@@ -67,65 +23,48 @@ const Wrapper = styled.styled.div `
     flex-shrink: 0;
   }
 
-  ${({ $isCollapsed, $size }) => $isCollapsed
-    ? `
+  ${({$isCollapsed:e,$size:r})=>e?`
     padding: 12px;
     border-radius: 50%;
     &:hover {
       background-color: var(--color-grey-10);
       cursor: pointer;
-    }`
-    : `
+    }`:`
     border-radius: 8px;
-    ${$size === 'collapsed'
-        ? // collapsed
-            `
+    `+("collapsed"===r?`
       gap: 8px;
       padding: 10px 16px;
       border: 1px solid var(--color-grey-8);
       
       &:hover {
         border: 1px solid var(--color-grey-6);
-      }`
-        : $size === 'small'
-            ? // small
-                `
+      }`:"small"===r?`
       gap: 12px;
       padding: 10px 16px;
       border: 1px solid var(--color-grey-8);
       
       &:hover {
         border: 1px solid var(--color-grey-6);
-      }`
-            : $size === 'medium'
-                ? // medium
-                    `
+      }`:"medium"===r?`
       gap: 12px;
       padding: 14px 16px;
       border: 1px solid var(--color-grey-8);
       
       &:hover {
         border: 1px solid var(--color-grey-6);
-      }`
-                : // large
-                    `
+      }`:`
       gap: 16px;
       padding: 16px;
       box-shadow: var(--elevation-1);
       
       &:hover {
         border: 1px solid var(--color-grey-6);
-      }`}`}
+      }`)}
 
-  ${({ $isFocused, $isCollapsed }) => $isFocused && !$isCollapsed
-    ? 'border: 1px solid var(--color-primary-blue-2) !important;'
-    : ''}
+  ${({$isFocused:e,$isCollapsed:r})=>e&&!r?"border: 1px solid var(--color-primary-blue-2) !important;":""}
 
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-const Input = styled.styled.input.attrs(({ ref }) => ({
-    ref: ref,
-})) `
+  ${({$sx:e})=>e||""}
+`,Input=styled.styled.input.attrs(({ref:e})=>({ref:e}))`
   flex: 1;
   border-radius: 8px;
   outline: none;
@@ -135,14 +74,9 @@ const Input = styled.styled.input.attrs(({ ref }) => ({
   line-height: 20px;
   color: var(--color-grey-2);
 
-  ${({ $isCollapsed }) => $isCollapsed
-    ? 'width: 0px; height: 0px; padding: 0px !important; border: none !important;'
-    : ''}
-`;
-const Separator = styled.styled.div `
+  ${({$isCollapsed:e})=>e?"width: 0px; height: 0px; padding: 0px !important; border: none !important;":""}
+`,Separator=styled.styled.div`
   width: 1px;
   height: 20px;
   background-color: var(--color-grey-9);
-`;
-
-exports.Search = Search;
+`;exports.Search=Search;