@soul-refiner/design-system 2.5.0-alpha.4 → 2.5.0-alpha.6

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

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

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

@@ -0,0 +1 @@
+export { Filter } from './filter';

package/dist/components/input/index.js

@@ -0,0 +1,11 @@
+export { Checkbox } from './checkbox';
+export { DatePicker } from './date';
+export { Filter } from './filter';
+export { Radio } from './radio';
+export { Search } from './search';
+export { Select } from './select';
+export { TextArea } from './text_area';
+export { TextInput } from './text_input';
+export { CalendarInput } from './calendar';
+export { Time } from './time';
+export { TimeInput } from './time_input';

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

@@ -0,0 +1 @@
+export { Radio } from './radio';

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

@@ -1,23 +1,44 @@
-"use client";
-"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`
+'use client';
+import React from 'react';
+import { styled } from 'styled-components';
+import { Box } from '../../../components/atoms/box/box';
+import { P } from '../../../components/atoms/typography/paragraph';
+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.createElement(Label, { "$disabled": disabled, "$reversed": reversed, "$sx": sx, onClick: handleLabelClick },
+        React.createElement(Input, { checked: checked, onClickCapture: handleInputClick, disabled: disabled, type: "radio", value: value, ...rest }),
+        React.createElement(P, { as: "span" }, label)));
+};
+const Label = styled.label `
   display: flex;
   align-items: center;
   gap: 8px;
   user-select: none;
 
-  ${({$disabled:e})=>e?`
+  ${({ $disabled }) => $disabled
+    ? `
     & > * {
       color: var(--color-grey-7);
-    }`:`
+    }`
+    : `
     cursor: pointer;
     &:hover {
       input {
         border-color: var(--color-primary-blue-2);
       }
     }`}
-  flex-direction: ${({$reversed:e})=>e?"row-reverse":"row"};
-  ${({$sx:e})=>e||""}
-`,Input=styled.styled.input`
+  flex-direction: ${({ $reversed }) => ($reversed ? 'row-reverse' : 'row')};
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const Input = styled.input `
   appearance: none;
   position: relative;
   height: 20px;
@@ -51,4 +72,13 @@
       }
     }
   }
-`,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;
+`;
+const RadioGroup = ({ children, name, ...rest }) => {
+    return (React.createElement(Box, { ...rest }, React.Children.map(children, (child) => {
+        if (React.isValidElement(child))
+            return React.createElement(Radio, { key: child.key, name: name, ...child.props });
+    })));
+};
+Radio.Group = RadioGroup;
+RadioGroup.displayName = 'Radio.Group';
+export { Radio };

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

@@ -0,0 +1 @@
+export { Search } from './search';

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

@@ -1,19 +1,56 @@
-"use client";
-"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:`
+'use client';
+import React from 'react';
+import { styled } from 'styled-components';
+import { Styles } from '../../../common/styles';
+import { Close } from '../../../icons/basic/close';
+import { Search as SearchIcon } from '../../../icons/basic/search';
+export const Search = ({ dropdownFilter, onChange, onClearText, onSubmit, placeholder, size, sx, value, }) => {
+    const [expanded, setExpanded] = React.useState(false);
+    const [focused, setFocused] = React.useState(false);
+    const inputRef = React.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.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.createElement(SearchIcon, { color: size === 'large' ? 'blue-7' : 'grey-3', size: iconSize, onClick: isCollapsed ? undefined : handleCollapse, sx: isCollapsed || size !== 'collapsed'
+                ? undefined
+                : `
           &:hover {
             cursor: pointer;
             background-color: var(--color-grey-10);
             border-radius: 50%;
-          }`}),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;":""}
+          }` }),
+        React.createElement(Input, { "$isCollapsed": isCollapsed, onBlur: () => setFocused(false), onChange: onChange, onFocus: () => setFocused(true), onSubmit: onSubmit, placeholder: placeholder, ref: inputRef, value: value }),
+        !isCollapsed && onClearText && (React.createElement(Close, { size: 16, onClick: onClearText, sx: `
+            ${value.length === 0 ? 'visibility: hidden;' : ''}
             padding: 4px;
             &:hover {
               cursor: pointer;
               background-color: var(--color-grey-10);
               border-radius: 50%;
-            }`}),"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}
+            }` })),
+        size === 'large' && dropdownFilter && (React.createElement(React.Fragment, null,
+            React.createElement(Separator, null),
+            dropdownFilter))));
+};
+const Wrapper = styled.div `
+  ${Styles.flex}
+  ${Styles.padding}
   display: flex;
   background-color: var(--color-white);
   border: 1px solid transparent;
@@ -23,48 +60,65 @@
     flex-shrink: 0;
   }
 
-  ${({$isCollapsed:e,$size:r})=>e?`
+  ${({ $isCollapsed, $size }) => $isCollapsed
+    ? `
     padding: 12px;
     border-radius: 50%;
     &:hover {
       background-color: var(--color-grey-10);
       cursor: pointer;
-    }`:`
+    }`
+    : `
     border-radius: 8px;
-    `+("collapsed"===r?`
+    ${$size === 'collapsed'
+        ? // collapsed
+            `
       gap: 8px;
       padding: 10px 16px;
       border: 1px solid var(--color-grey-8);
       
       &:hover {
         border: 1px solid var(--color-grey-6);
-      }`:"small"===r?`
+      }`
+        : $size === 'small'
+            ? // small
+                `
       gap: 12px;
       padding: 10px 16px;
       border: 1px solid var(--color-grey-8);
       
       &:hover {
         border: 1px solid var(--color-grey-6);
-      }`:"medium"===r?`
+      }`
+            : $size === 'medium'
+                ? // medium
+                    `
       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:e,$isCollapsed:r})=>e&&!r?"border: 1px solid var(--color-primary-blue-2) !important;":""}
+  ${({ $isFocused, $isCollapsed }) => $isFocused && !$isCollapsed
+    ? 'border: 1px solid var(--color-primary-blue-2) !important;'
+    : ''}
 
-  ${({$sx:e})=>e||""}
-`,Input=styled.styled.input.attrs(({ref:e})=>({ref:e}))`
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const Input = styled.input.attrs(({ ref }) => ({
+    ref: ref,
+})) `
   flex: 1;
   border-radius: 8px;
   outline: none;
@@ -74,9 +128,12 @@
   line-height: 20px;
   color: var(--color-grey-2);
 
-  ${({$isCollapsed:e})=>e?"width: 0px; height: 0px; padding: 0px !important; border: none !important;":""}
-`,Separator=styled.styled.div`
+  ${({ $isCollapsed }) => $isCollapsed
+    ? 'width: 0px; height: 0px; padding: 0px !important; border: none !important;'
+    : ''}
+`;
+const Separator = styled.div `
   width: 1px;
   height: 20px;
   background-color: var(--color-grey-9);
-`;exports.Search=Search;
+`;

package/dist/components/input/select/index.js

@@ -0,0 +1 @@
+export { Select } from './select';

package/dist/components/input/select/select.js

@@ -1,5 +1,14 @@
-"use client";
-"use strict";var React=require("react"),styled=require("styled-components"),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 Select=({label:e,onClick:t,selected:a,sx:r,value:l})=>React__default.default.createElement(Label,{onClick:e=>t(e,l),$sx:r},React__default.default.createElement("input",{value:l,type:"radio",checked:a,readOnly:!0}),React__default.default.createElement(SelectBox,{$selected:a}),React__default.default.createElement(paragraph.P,{as:"div"},e)),Label=styled.styled.div`
+'use client';
+import React from 'react';
+import { styled } from 'styled-components';
+import { P } from '../../../components/atoms/typography/paragraph';
+export const Select = ({ label, onClick, selected, sx, value, }) => {
+    return (React.createElement(Label, { onClick: (event) => onClick(event, value), "$sx": sx },
+        React.createElement("input", { value: value, type: "radio", checked: selected, readOnly: true }),
+        React.createElement(SelectBox, { "$selected": selected }),
+        React.createElement(P, { as: "div" }, label)));
+};
+const Label = styled.div `
   display: flex;
   flex-flow: row nowrap;
   gap: 24px;
@@ -10,8 +19,9 @@
   input {
     display: none;
   }
-  ${({$sx:e})=>e||""}
-`,SelectBox=styled.styled.div`
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const SelectBox = styled.div `
   position: relative;
   width: 18px;
   height: 18px;
@@ -19,7 +29,8 @@
   border-radius: 4px;
   flex-shrink: 0;
 
-  ${({$selected:e})=>e?`
+  ${({ $selected }) => $selected
+    ? `
     background-color: var(--color-primary-blue-2);
     border-color: var(--color-primary-blue-2);
     
@@ -31,5 +42,6 @@
       font-size: 13px;
       color: var(--color-white);
       font-weight: 500;
-    }`:""}
-`;exports.Select=Select;
+    }`
+    : ''}
+`;

package/dist/components/input/text_area/index.js

@@ -0,0 +1 @@
+export { TextArea } from './text_area';

package/dist/components/input/text_area/text_area.js

@@ -1,5 +1,35 @@
-"use client";
-"use strict";var React=require("react"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),checkmark_circle=require("../../../icons/basic/checkmark_circle.js"),alert_circle=require("../../../icons/notifications/alert_circle.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const TextArea=({bg:e="var(--color-blue-10)",disabled:r,helperText:t,icon:l,label:a,maxCharacters:o,minHeight:c,minWidth:n,name:i,onChange:d,placeholder:s,resize:u=!1,successful:f,sx:p,value:x,warning:g})=>{const m=React__default.default.useRef(null);return React__default.default.useEffect(()=>{var e;m.current&&(m.current.style.height=c+"px",e=m.current.scrollHeight,m.current.style.height=e+"px")},[m.current,x]),React__default.default.createElement(Label,{$disabled:r,$sx:p},a,React__default.default.createElement(InputWrapper,{$bg:e,$minWidth:n,$successful:f,$warning:g},l,React__default.default.createElement(TextAreaElement,{disabled:r,name:i,onChange:d,placeholder:s,ref:m,value:o?x.slice(0,o-1):x,$minHeight:c,$resize:u}),f&&React__default.default.createElement(checkmark_circle.CheckmarkCircle,{color:"green-3"}),g&&React__default.default.createElement(alert_circle.AlertCircle,{color:"red-4"})),React__default.default.createElement(box.Box,{$gap:16,$justify:"space-between"},t&&React__default.default.createElement(HelperText,null,t),o&&React__default.default.createElement(MaxCharactersText,null,x.length," / ",o)))},Label=styled.styled.label`
+'use client';
+import React from 'react';
+import { styled } from 'styled-components';
+import { Box } from '../../../components/atoms/box/box';
+import { CheckmarkCircle } from '../../../icons/basic/checkmark_circle';
+import { AlertCircle } from '../../../icons/notifications/alert_circle';
+export const TextArea = ({ bg = 'var(--color-blue-10)', disabled, helperText, icon, label, maxCharacters, minHeight, minWidth, name, onChange, placeholder, resize = false, successful, sx, value, warning, }) => {
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (ref.current) {
+            ref.current.style.height = `${minHeight}px`;
+            const scrollHeight = ref.current.scrollHeight;
+            ref.current.style.height = scrollHeight + 'px';
+        }
+    }, [ref.current, value]);
+    return (React.createElement(Label, { "$disabled": disabled, "$sx": sx },
+        label,
+        React.createElement(InputWrapper, { "$bg": bg, "$minWidth": minWidth, "$successful": successful, "$warning": warning },
+            icon,
+            React.createElement(TextAreaElement, { disabled: disabled, name: name, onChange: onChange, placeholder: placeholder, ref: ref, value: maxCharacters
+                    ? value.slice(0, maxCharacters - 1)
+                    : value, "$minHeight": minHeight, "$resize": resize }),
+            successful && React.createElement(CheckmarkCircle, { color: "green-3" }),
+            warning && React.createElement(AlertCircle, { color: "red-4" })),
+        React.createElement(Box, { "$gap": 16, "$justify": "space-between" },
+            helperText && React.createElement(HelperText, null, helperText),
+            maxCharacters && (React.createElement(MaxCharactersText, null,
+                value.length,
+                " / ",
+                maxCharacters)))));
+};
+const Label = styled.label `
   width: 100%;
   display: flex;
   gap: 4px;
@@ -10,24 +40,27 @@
   font-weight: 500;
   line-height: 26px;
 
-  ${({$disabled:e})=>e?`
+  ${({ $disabled }) => $disabled
+    ? `
     color: var(--color-grey-7) !important;
     & > * {
       color: var(--color-grey-7) !important;
     }
     & > div:first-of-type {
       background-color: var(--color-grey-9) !important;
-    }`:""}
+    }`
+    : ''}
 
-  ${({$sx:e})=>e||""}
-`,InputWrapper=styled.styled.div`
-  min-width: ${({$minWidth:e})=>e?e+"px;":""};
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const InputWrapper = styled.div `
+  min-width: ${({ $minWidth }) => ($minWidth ? $minWidth + 'px;' : '')};
   display: flex;
   gap: 8px;
   align-items: center;
   box-sizing: border-box;
   padding: 12px;
-  background-color: ${({$bg:e})=>e};
+  background-color: ${({ $bg }) => $bg};
   border-radius: 8px;
   border: 1px solid var(--color-grey-8);
 
@@ -39,10 +72,11 @@
     border-color: var(--color-primary-blue-2);
   }
 
-  ${({$successful:e})=>e?"border-color: var(--color-green-3) !important;":""}
-  ${({$warning:e})=>e?"border-color: var(--color-red-4) !important;":""}
-`,TextAreaElement=styled.styled.textarea`
-  min-width: ${({$minHeight:e})=>e?e-24+"px;":""}
+  ${({ $successful }) => $successful ? 'border-color: var(--color-green-3) !important;' : ''}
+  ${({ $warning }) => $warning ? 'border-color: var(--color-red-4) !important;' : ''}
+`;
+const TextAreaElement = styled.textarea `
+  min-width: ${({ $minHeight }) => ($minHeight ? $minHeight - 24 + 'px;' : '')}
   padding: 0px;
   flex: 1;
   font-family: var(--font-inter);
@@ -58,13 +92,15 @@
     color: var(--color-grey-6);
   }
 
-  ${({$resize:e})=>e?"":"resize: none;"}
-`,HelperText=styled.styled.p`
+  ${({ $resize }) => ($resize ? '' : 'resize: none;')}
+`;
+const HelperText = styled.p `
   color: var(--color-grey-4);
   font-family: var(--font-inter);
   font-size: 14px;
   line-height: 20px;
-`,MaxCharactersText=styled.styled.p`
+`;
+const MaxCharactersText = styled.p `
   text-align: right;
   color: var(--color-grey-6);
   font-family: var(--font-inter);
@@ -72,4 +108,4 @@
   font-style: normal;
   font-weight: 400;
   line-height: 20px;
-`;exports.TextArea=TextArea;
+`;

package/dist/components/input/text_input/index.js

@@ -0,0 +1 @@
+export { TextInput } from './text_input';