w-design-system 0.0.26 → 0.0.28

package/dist/components/DateRangePicker/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/DateRangePicker/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAEjC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;eAUvB,KAAK,CAAC,SAAS,CAAC,KAAK;WACzB,KAAK,CAAC,MAAM,CAAC,OAAO;CAC9B,CAAA;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;eAC/B,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC;WAC/B,KAAK,CAAC,MAAM,CAAC,OAAO;;;CAG9B,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;eAIzB,KAAK,CAAC,SAAS,CAAC,KAAK;;;;;;;YAOxB,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;;YAMpB,KAAK,CAAC,MAAM,CAAC,MAAM;;;;;;YAMnB,KAAK,CAAC,MAAM,CAAC,OAAO;;CAE/B,CAAA;AAOD,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAkB;;;;;;WAM5C,CAAC,EAAE,eAAe,EAAE,cAAc,EAAE,EAAE,EAAE,CAC/C,eAAe,IAAI,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;;;;;MAS3E,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,EAAE,EAAE,CAC/C,KAAK,IAAI,CAAC,CAAC,eAAe,IAAI,cAAc,CAAC,CAAC,CAAC,CAAC,qBAAqB,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE;;CAEpG,CAAA;AAQD,MAAM,CAAC,MAAM,6BAA6B,GAAG,MAAM,CAAC,GAAG,CAAoC;;sBAErE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,IAAI,KAAK,CAAC,MAAM,CAAC,eAAe;;;;;mBAK7D,CAAC,EAAE,eAAe,EAAE,cAAc,EAAE,EAAE,EAAE;IACvD,IAAI,eAAe,IAAI,cAAc;QAAE,OAAO,KAAK,CAAA;IACnD,IAAI,eAAe;QAAE,OAAO,aAAa,CAAA;IACzC,IAAI,cAAc;QAAE,OAAO,aAAa,CAAA;IACxC,OAAO,GAAG,CAAA;AACZ,CAAC;;;qBAGkB,CAAC,EAAE,eAAe,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAE,EAAE;IACjE,IAAI,eAAe,IAAI,cAAc;QAAE,OAAO,KAAK,CAAA;IACnD,IAAI,eAAe;QAAE,OAAO,aAAa,CAAA;IACzC,IAAI,cAAc;QAAE,OAAO,aAAa,CAAA;IACxC,IAAI,QAAQ;QAAE,OAAO,GAAG,CAAA;IACxB,OAAO,KAAK,CAAA;AACd,CAAC;wBACmB,KAAK,CAAC,MAAM,CAAC,eAAe;;;;;;wBAM5B,CAAC,EAAE,eAAe,EAAE,cAAc,EAAE,EAAE,EAAE,CAC1D,eAAe,IAAI,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa;;;;CAI5E,CAAA;AACD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOzC,CAAA"}

package/dist/components/Input/index.d.ts

@@ -1,8 +1,9 @@
 import React, { HTMLAttributes, ReactNode } from 'react';
 export interface InputProps extends HTMLAttributes<HTMLDivElement> {
     placeholder?: string;
-    iconLeft?: ReactNode;
-    label: string;
+    rightIcon?: ReactNode;
+    leftIcon?: ReactNode;
+    label?: string;
     value?: string;
     readonly?: boolean;
     disabled?: boolean;
@@ -10,7 +11,6 @@ export interface InputProps extends HTMLAttributes<HTMLDivElement> {
     onInput?: (e: React.FormEvent<HTMLInputElement>) => void;
     onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-    iconRight?: ReactNode;
 }
 export interface Position {
     x: number;

package/dist/components/Input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,SAAS,EAA4B,MAAM,OAAO,CAAA;AAGlF,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAC3D,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACxD,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAC9D,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAC5D,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB;AAED,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA0FtC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,SAAS,EAA4B,MAAM,OAAO,CAAA;AAGlF,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAC3D,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACxD,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAC9D,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;CAC7D;AAED,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA0FtC,CAAA"}

package/dist/components/Input/index.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { useEffect, useId, useRef } from 'react';
 import { InputWrapper, StyledInput, StyledInputBorder, StyledInputContent, StyledLabel } from './styles';
 export const Input = (_a) => {
-    var { label, readonly, onChange, onInput, value, onKeyDown, disabled, onKeyUp, iconLeft, iconRight } = _a, props = __rest(_a, ["label", "readonly", "onChange", "onInput", "value", "onKeyDown", "disabled", "onKeyUp", "iconLeft", "iconRight"]);
+    var { label, readonly, onChange, onInput, value, onKeyDown, disabled, onKeyUp, leftIcon, rightIcon } = _a, props = __rest(_a, ["label", "readonly", "onChange", "onInput", "value", "onKeyDown", "disabled", "onKeyUp", "leftIcon", "rightIcon"]);
     const id = useId();
     const [labelPosition, setLabelPosition] = React.useState({
         x: 0,
@@ -63,8 +63,8 @@ export const Input = (_a) => {
         React.createElement(StyledInputContent, { disabled: disabled, ref: contentRef, onClick: onClickHandler },
             React.createElement(StyledInputBorder, { content: contentPosition, label: labelPosition }),
             React.createElement(StyledLabel, { htmlFor: id, ref: labelRef }, label),
-            iconLeft,
+            leftIcon,
             React.createElement(StyledInput, { id: id, disabled: disabled, value: value, placeholder: props.placeholder, ref: inputRef, onChange: onChange, onInput: onInput, onKeyDown: onKeyDown, onKeyUp: onKeyUp, readOnly: readonly }),
-            iconRight)));
+            rightIcon)));
 };
 //# sourceMappingURL=index.js.map

package/dist/components/Paginate/index.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-export type PropsPaginate = {
+export type PaginateProps = {
     currentPage: number;
     itemCount: number;
     itemsPerPage?: number;
     onChangePage: (page: number) => void;
     onChangeItemsPerPage: (itemsPerPage: number) => void;
 };
-export declare const Paginate: ({ currentPage, itemCount, onChangePage, itemsPerPage, onChangeItemsPerPage, }: PropsPaginate) => React.JSX.Element;
+export declare const Paginate: ({ currentPage, itemCount, onChangePage, itemsPerPage, onChangeItemsPerPage, }: PaginateProps) => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Paginate/stories.d.ts

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { PropsPaginate } from '.';
-declare const meta: Meta<PropsPaginate>;
+import { PaginateProps } from '.';
+declare const meta: Meta<PaginateProps>;
 export default meta;
-export declare const Default: StoryObj<PropsPaginate>;
+export declare const Default: StoryObj<PaginateProps>;
 //# sourceMappingURL=stories.d.ts.map

package/dist/components/Select/index.d.ts

@@ -0,0 +1,20 @@
+import React, { HTMLAttributes, ReactNode } from 'react';
+export interface SelectProps extends HTMLAttributes<HTMLDivElement> {
+    disabled?: boolean;
+    label?: string;
+    leftIcon?: ReactNode;
+    onOptionChange?: (option: number | null) => void;
+    options?: {
+        text: string;
+        id: number;
+    }[];
+    placeholder?: string;
+    rightIcon?: ReactNode;
+    selectedOption?: number | null;
+    value?: string;
+}
+export interface SelectRef {
+    setOpen(open: boolean): void;
+}
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<SelectRef>>;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Select/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,cAAc,EAEd,SAAS,EAMV,MAAM,OAAO,CAAA;AAOd,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,cAAc,CAAC;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAChD,OAAO,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IACxC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,SAAS;IACxB,OAAO,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAA;CAC7B;AA2FD,eAAO,MAAM,MAAM,+EAAoC,CAAA"}

package/dist/components/Select/index.js

@@ -0,0 +1,68 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import { chevronDownSVG } from '../../assets/icon';
+import { IconWrapper } from '../IconWrapper';
+import { Input } from '../Input';
+import { theme } from '../Themes';
+import { OptionButton, Dropdown, DropdownWrapper, SelectWrapper } from './styles';
+const SelectFowardRef = (_a, ref) => {
+    var _b;
+    var { children, label, leftIcon, onOptionChange, options, placeholder, rightIcon, selectedOption, value } = _a, props = __rest(_a, ["children", "label", "leftIcon", "onOptionChange", "options", "placeholder", "rightIcon", "selectedOption", "value"]);
+    const [open, setOpen] = useState(false);
+    const wrapperRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        setOpen,
+    }));
+    useEffect(() => {
+        if (!open)
+            return;
+        const handler = (event) => {
+            let element = event.target;
+            while (element && element !== document.body.parentElement) {
+                if (element === wrapperRef.current)
+                    break;
+                element = element.parentElement;
+            }
+            if (element === document.body.parentElement) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener('click', handler);
+        return () => {
+            document.removeEventListener('click', handler);
+        };
+    }, [open]);
+    const onOptionClick = (option) => {
+        onOptionChange && onOptionChange(option);
+        setOpen(false);
+    };
+    const valueComputed = useMemo(() => {
+        if (value)
+            return value;
+        if (selectedOption) {
+            const option = options === null || options === void 0 ? void 0 : options.find(option => option.id === selectedOption);
+            return option === null || option === void 0 ? void 0 : option.text;
+        }
+        return '';
+    }, [value, selectedOption, options]);
+    return (React.createElement(SelectWrapper, Object.assign({}, props, { ref: wrapperRef }),
+        React.createElement(Input, { leftIcon: leftIcon, rightIcon: React.createElement(React.Fragment, null,
+                rightIcon,
+                React.createElement(IconWrapper, { className: `icon ${open ? 'icon-rotate' : ''}`, src: chevronDownSVG, width: "16px", color: theme.colors.shade30 })), placeholder: placeholder, label: label, value: valueComputed, readonly: true, onClick: () => setOpen(!open) }),
+        open && (React.createElement(DropdownWrapper, null,
+            React.createElement(Dropdown, null,
+                ((_b = options === null || options === void 0 ? void 0 : options.length) !== null && _b !== void 0 ? _b : 0) > 0 && (React.createElement("div", null, options === null || options === void 0 ? void 0 : options.map(option => (React.createElement(OptionButton, { selected: option.id === selectedOption, key: option.id, onClick: () => onOptionClick(option.id) }, option.text))))),
+                children)))));
+};
+export const Select = React.forwardRef(SelectFowardRef);
+//# sourceMappingURL=index.js.map

package/dist/components/Select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Select/stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Select } from './index';
+declare const meta: Meta<typeof Select>;
+export default meta;
+type Story = StoryObj<typeof Select>;
+export declare const Default: Story;
+//# sourceMappingURL=stories.d.ts.map

package/dist/components/Select/stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stories.d.ts","sourceRoot":"","sources":["../../../src/components/Select/stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,MAAM,EAAe,MAAM,SAAS,CAAA;AAG7C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAWC,CAAA;AAE/B,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAA;AA8BpC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAA"}

package/dist/components/Select/stories.js

@@ -0,0 +1,48 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { Select } from './index';
+import React from 'react';
+const meta = {
+    title: 'Components/Select',
+    component: Select,
+    tags: ['autodocs'],
+    argTypes: {
+        placeholder: { control: 'text' },
+        label: { control: 'text' },
+        disabled: { control: 'boolean' },
+        selectedOption: { control: 'number' },
+        onOptionChange: { action: 'selectedOptionChange' },
+    },
+};
+export default meta;
+const ComponentWrapper = (_a) => {
+    var { options } = _a, args = __rest(_a, ["options"]);
+    const [selectedOption, setSelectOption] = React.useState(null);
+    return (React.createElement(Select, Object.assign({ selectedOption: selectedOption, onOptionChange: option => setSelectOption(option), options: options !== null && options !== void 0 ? options : [
+            {
+                text: 'Opção 1',
+                id: 1,
+            },
+            {
+                text: 'Opção 2',
+                id: 2,
+            },
+            {
+                text: 'Opção 3',
+                id: 3,
+            },
+        ] }, args)));
+};
+export const Default = {
+    render: args => React.createElement(ComponentWrapper, { label: "Label", placeholder: "Placeholder" }),
+};
+//# sourceMappingURL=stories.js.map

package/dist/components/Select/stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/Select/stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,EAAE,MAAM,EAAe,MAAM,SAAS,CAAA;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,IAAI,GAAwB;IAChC,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,MAAM;IACjB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,cAAc,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QACrC,cAAc,EAAE,EAAE,MAAM,EAAE,sBAAsB,EAAE;KACnD;CAC4B,CAAA;AAE/B,eAAe,IAAI,CAAA;AAGnB,MAAM,gBAAgB,GAAG,CAAC,EAAiC,EAAE,EAAE;QAArC,EAAE,OAAO,OAAwB,EAAnB,IAAI,cAAlB,WAAoB,CAAF;IAC1C,MAAM,CAAC,cAAc,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAgB,IAAI,CAAC,CAAA;IAE7E,OAAO,CACL,oBAAC,MAAM,kBACL,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,MAAM,CAAC,EAAE,CAAC,eAAe,CAAC,MAAM,CAAC,EACjD,OAAO,EACL,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI;YACT;gBACE,IAAI,EAAE,SAAS;gBACf,EAAE,EAAE,CAAC;aACN;YACD;gBACE,IAAI,EAAE,SAAS;gBACf,EAAE,EAAE,CAAC;aACN;YACD;gBACE,IAAI,EAAE,SAAS;gBACf,EAAE,EAAE,CAAC;aACN;SACF,IAEC,IAAI,EACR,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,oBAAC,gBAAgB,IAAC,KAAK,EAAC,OAAO,EAAC,WAAW,EAAC,aAAa,GAAG;CAC7E,CAAA"}

package/dist/components/Select/styles.d.ts

@@ -0,0 +1,8 @@
+export declare const SelectWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Dropdown: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const DropdownWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export interface OptionButtonProps {
+    selected: boolean;
+}
+export declare const OptionButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, OptionButtonProps>> & string;
+//# sourceMappingURL=styles.d.ts.map

package/dist/components/Select/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Select/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa,6NAQzB,CAAA;AAED,eAAO,MAAM,QAAQ,6NASpB,CAAA;AAED,eAAO,MAAM,eAAe,6NAE3B,CAAA;AAGD,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,YAAY,kQAqBxB,CAAA"}

package/dist/components/Select/styles.js

@@ -0,0 +1,47 @@
+import styled from 'styled-components';
+import { theme } from '../Themes';
+export const SelectWrapper = styled.div `
+  position: relative;
+  .icon {
+    transition: transform 0.3s;
+  }
+  .icon-rotate {
+    transform: rotate(180deg) translateY(5px);
+  }
+`;
+export const Dropdown = styled.div `
+  position: absolute;
+  width: 252px;
+  padding: 16px;
+  z-index: 1;
+  border-radius: 4px;
+  border: 1px solid ${theme.colors.shade20};
+  margin-top: 7px;
+  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
+`;
+export const DropdownWrapper = styled.div `
+  position: relative;
+`;
+export const OptionButton = styled.button `
+  background-color: transparent;
+  border: none;
+  font-size: ${theme.paragraph.medium};
+  font-family: 'Nunito Sans', sans-serif;
+  color: ${({ selected }) => (selected ? theme.colors.cyan30 : theme.colors.shade40)};
+  cursor: pointer;
+  padding: 0;
+  width: 100%;
+  text-align: left;
+  height: 46px;
+  display: flex;
+  align-items: center;
+
+  &:not(:last-child) {
+    border-bottom: 1px solid ${theme.colors.shade10};
+  }
+
+  &:hover {
+    color: ${theme.colors.cyan30};
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/components/Select/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAEjC,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;CAQtC,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;sBAMZ,KAAK,CAAC,MAAM,CAAC,OAAO;;;CAGzC,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;CAExC,CAAA;AAOD,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAmB;;;eAG7C,KAAK,CAAC,SAAS,CAAC,MAAM;;WAE1B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;;;;;;;;;;+BAUrD,KAAK,CAAC,MAAM,CAAC,OAAO;;;;aAItC,KAAK,CAAC,MAAM,CAAC,MAAM;;CAE/B,CAAA"}

package/dist/components/Themes/index.d.ts

@@ -34,6 +34,7 @@ export declare const theme: {
         space9: string;
     };
     colors: {
+        cyan30opacity16: string;
         white: string;
         black: string;
         transparent: string;

package/dist/components/Themes/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Themes/index.ts"],"names":[],"mappings":"AAgDA,eAAO,MAAM,OAAO;;;;;;;;;;CAUnB,CAAA;AAeD,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BjB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Themes/index.ts"],"names":[],"mappings":"AAoDA,eAAO,MAAM,OAAO;;;;;;;;;;CAUnB,CAAA;AAeD,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BjB,CAAA"}

package/dist/components/Themes/index.js

@@ -36,6 +36,9 @@ const mint = {
     mint20: '#D7EFDE',
     mint10: '#EBF8EF',
 };
+const special = {
+    cyan30opacity16: 'rgba(33, 126, 253, 0.16)',
+};
 const white = '#FFFFFF';
 const black = '#333333';
 const transparent = 'transparent';
@@ -65,9 +68,9 @@ const zIndex = {
 export const theme = {
     zIndex,
     spacing,
-    colors: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, yellow), shades), red), honey), mint), cyan), { white,
+    colors: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, yellow), shades), red), honey), mint), cyan), { white,
         black,
-        transparent }),
+        transparent }), special),
     fonts: ['Nunito Sans', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],
     title: {
         medium: '24px',

package/dist/components/Themes/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Themes/index.ts"],"names":[],"mappings":"AAAA,MAAM,IAAI,GAAG;IACX,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;CAClB,CAAA;AAED,MAAM,MAAM,GAAG;IACb,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;CACnB,CAAA;AAED,MAAM,GAAG,GAAG;IACV,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;CACjB,CAAA;AAED,MAAM,KAAK,GAAG;IACZ,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;CACnB,CAAA;AAED,MAAM,MAAM,GAAG;IACb,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;CACpB,CAAA;AAED,MAAM,IAAI,GAAG;IACX,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;CAClB,CAAA;AAED,MAAM,KAAK,GAAG,SAAS,CAAA;AACvB,MAAM,KAAK,GAAG,SAAS,CAAA;AACvB,MAAM,WAAW,GAAG,aAAa,CAAA;AAEjC,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,KAAK;IACb,MAAM,EAAE,KAAK;IACb,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,MAAM;CACf,CAAA;AAED,MAAM,MAAM,GAAG;IACb,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,IAAI,EAAE,KAAK;CACZ,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,MAAM;IACN,OAAO;IACP,MAAM,wGACD,MAAM,GACN,MAAM,GACN,GAAG,GACH,KAAK,GACL,IAAI,GACJ,IAAI,KACP,KAAK;QACL,KAAK;QACL,WAAW,GACZ;IACD,KAAK,EAAE,CAAC,aAAa,EAAE,gBAAgB,EAAE,WAAW,EAAE,OAAO,EAAE,YAAY,CAAC;IAC5E,KAAK,EAAE;QACL,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;KACd;IACD,SAAS,EAAE;QACT,UAAU,EAAE,MAAM;QAClB,SAAS,EAAE,MAAM;QACjB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;KACd;CACF,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Themes/index.ts"],"names":[],"mappings":"AAAA,MAAM,IAAI,GAAG;IACX,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;CAClB,CAAA;AAED,MAAM,MAAM,GAAG;IACb,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;CACnB,CAAA;AAED,MAAM,GAAG,GAAG;IACV,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;CACjB,CAAA;AAED,MAAM,KAAK,GAAG;IACZ,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;CACnB,CAAA;AAED,MAAM,MAAM,GAAG;IACb,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,SAAS;CACpB,CAAA;AAED,MAAM,IAAI,GAAG;IACX,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;CAClB,CAAA;AAED,MAAM,OAAO,GAAG;IACd,eAAe,EAAE,0BAA0B;CAC5C,CAAA;AAED,MAAM,KAAK,GAAG,SAAS,CAAA;AACvB,MAAM,KAAK,GAAG,SAAS,CAAA;AACvB,MAAM,WAAW,GAAG,aAAa,CAAA;AAEjC,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,KAAK;IACb,MAAM,EAAE,KAAK;IACb,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,MAAM;CACf,CAAA;AAED,MAAM,MAAM,GAAG;IACb,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,IAAI,EAAE,KAAK;CACZ,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,MAAM;IACN,OAAO;IACP,MAAM,sHACD,MAAM,GACN,MAAM,GACN,GAAG,GACH,KAAK,GACL,IAAI,GACJ,IAAI,KACP,KAAK;QACL,KAAK;QACL,WAAW,KACR,OAAO,CACX;IACD,KAAK,EAAE,CAAC,aAAa,EAAE,gBAAgB,EAAE,WAAW,EAAE,OAAO,EAAE,YAAY,CAAC;IAC5E,KAAK,EAAE;QACL,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;KACd;IACD,SAAS,EAAE;QACT,UAAU,EAAE,MAAM;QAClB,SAAS,EAAE,MAAM;QACjB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;KACd;CACF,CAAA"}

package/dist/components/Types/index.d.ts

@@ -1,4 +1,9 @@
 import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+import type { DatePickerProps } from '../DatePicker';
+import type { DateRangePickerProps } from '../DateRangePicker';
+import type { SelectProps } from '../Select';
+import type { SelectRef } from '../Select';
+import type { PaginateProps } from '../Paginate';
 type ColorsVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'gray' | 'warning' | 'yellow';
 type ColorsVariantBanner = 'notice' | 'success' | 'danger' | 'warning';
 export interface ButtonTypes extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -41,5 +46,5 @@ export interface TabsTypes extends HTMLAttributes<HTMLDivElement> {
     defaultActiveTab?: string;
     onTabChange?: (activeTab: string) => void;
 }
-export {};
+export { DatePickerProps, DateRangePickerProps, SelectProps, SelectRef, PaginateProps };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEvE,KAAK,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAA;AACnG,KAAK,mBAAmB,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAA;AACtE,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,WAAW,qBAAsB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IACpF,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;CACpC;AAED,MAAM,WAAW,gBAAiB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/E,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAC1B;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,cAAc,CAAC;IACjE,OAAO,CAAC,EAAE,mBAAmB,CAAA;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAED,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,QAAQ,EAAE,SAAS,CAAA;IACnB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAA;CACjC;AAED,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;CAC1C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Types/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACvE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AACpD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAA;AAC9D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAC5C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AAC1C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAChD,KAAK,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAA;AACnG,KAAK,mBAAmB,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAA;AAEtE,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,WAAW,qBAAsB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IACpF,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;CACpC;AAED,MAAM,WAAW,gBAAiB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/E,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAC1B;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,cAAc,CAAC;IACjE,OAAO,CAAC,EAAE,mBAAmB,CAAA;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAED,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,QAAQ,EAAE,SAAS,CAAA;IACnB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAA;CACjC;AAED,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;CAC1C;AAED,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,CAAA"}

package/dist/index.d.ts

@@ -2,16 +2,17 @@ export { Banner } from './components/Banner/index';
 export { Button } from './components/Button/index';
 export { ButtonRadiusIcon } from './components/ButtonRadiusIcon/index';
 export { ButtonRound } from './components/ButtonRound/index';
-export { DateInput } from './components/DateInput/index';
+export { DatePicker as DateInput } from './components/DatePicker/index';
 export { IconWrapper } from './components/IconWrapper/index';
 export { Input } from './components/Input/index';
 export { Modal } from './components/Modal/index';
 export { Paginate } from './components/Paginate/index';
 export { Paragraph } from './components/Paragraph/index';
-export { RangeDateInput } from './components/RangeDateInput/index';
+export { DateRangePicker as RangeDateInput } from './components/DateRangePicker/index';
 export { Table } from './components/Table/index';
 export { Tabs } from './components/Tabs/index';
 export { theme } from './components/Themes/index';
 export { Title } from './components/Title/index';
+export { Select } from './components/Select/index';
 export { appsSVG, alertSVG, bindSVG, bellSVG, checkSVG, calendarSVG, chevronDownSVG, chevronLeftSVG, chevronRightSVG, closeSVG, commentSVG, docCheckSVG, docSVG, dumpSVG, dashboardSVG, docDownloadSVG, docUploadSVG, editSVG, editalSVG, imageSVG, monitoringSVG, settingSVG, financeSVG, spreadsheetSVG, orderSVG, moneySVG, eyesSVG, portalSVG, spinSVG, } from './assets/icon/index';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAA;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAA;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAA;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAA;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAA;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EACL,OAAO,EACP,QAAQ,EACR,OAAO,EACP,OAAO,EACP,QAAQ,EACR,WAAW,EACX,cAAc,EACd,cAAc,EACd,eAAe,EACf,QAAQ,EACR,UAAU,EACV,WAAW,EACX,MAAM,EACN,OAAO,EACP,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,aAAa,EACb,UAAU,EACV,UAAU,EACV,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,SAAS,EACT,OAAO,GACR,MAAM,qBAAqB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAA;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAA;AAC5D,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,MAAM,+BAA+B,CAAA;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAA;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,MAAM,oCAAoC,CAAA;AACtF,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAA;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EACL,OAAO,EACP,QAAQ,EACR,OAAO,EACP,OAAO,EACP,QAAQ,EACR,WAAW,EACX,cAAc,EACd,cAAc,EACd,eAAe,EACf,QAAQ,EACR,UAAU,EACV,WAAW,EACX,MAAM,EACN,OAAO,EACP,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,aAAa,EACb,UAAU,EACV,UAAU,EACV,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,SAAS,EACT,OAAO,GACR,MAAM,qBAAqB,CAAA"}

package/dist/index.js

@@ -2,16 +2,17 @@ export { Banner } from './components/Banner/index';
 export { Button } from './components/Button/index';
 export { ButtonRadiusIcon } from './components/ButtonRadiusIcon/index';
 export { ButtonRound } from './components/ButtonRound/index';
-export { DateInput } from './components/DateInput/index';
+export { DatePicker as DateInput } from './components/DatePicker/index';
 export { IconWrapper } from './components/IconWrapper/index';
 export { Input } from './components/Input/index';
 export { Modal } from './components/Modal/index';
 export { Paginate } from './components/Paginate/index';
 export { Paragraph } from './components/Paragraph/index';
-export { RangeDateInput } from './components/RangeDateInput/index';
+export { DateRangePicker as RangeDateInput } from './components/DateRangePicker/index';
 export { Table } from './components/Table/index';
 export { Tabs } from './components/Tabs/index';
 export { theme } from './components/Themes/index';
 export { Title } from './components/Title/index';
+export { Select } from './components/Select/index';
 export { appsSVG, alertSVG, bindSVG, bellSVG, checkSVG, calendarSVG, chevronDownSVG, chevronLeftSVG, chevronRightSVG, closeSVG, commentSVG, docCheckSVG, docSVG, dumpSVG, dashboardSVG, docDownloadSVG, docUploadSVG, editSVG, editalSVG, imageSVG, monitoringSVG, settingSVG, financeSVG, spreadsheetSVG, orderSVG, moneySVG, eyesSVG, portalSVG, spinSVG, } from './assets/icon/index';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAA;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAA;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAA;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAA;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAA;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EACL,OAAO,EACP,QAAQ,EACR,OAAO,EACP,OAAO,EACP,QAAQ,EACR,WAAW,EACX,cAAc,EACd,cAAc,EACd,eAAe,EACf,QAAQ,EACR,UAAU,EACV,WAAW,EACX,MAAM,EACN,OAAO,EACP,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,aAAa,EACb,UAAU,EACV,UAAU,EACV,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,SAAS,EACT,OAAO,GACR,MAAM,qBAAqB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAA;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAA;AAC5D,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,MAAM,+BAA+B,CAAA;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAA;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,MAAM,oCAAoC,CAAA;AACtF,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAA;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,EACL,OAAO,EACP,QAAQ,EACR,OAAO,EACP,OAAO,EACP,QAAQ,EACR,WAAW,EACX,cAAc,EACd,cAAc,EACd,eAAe,EACf,QAAQ,EACR,UAAU,EACV,WAAW,EACX,MAAM,EACN,OAAO,EACP,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,aAAa,EACb,UAAU,EACV,UAAU,EACV,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,SAAS,EACT,OAAO,GACR,MAAM,qBAAqB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "w-design-system",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "main": "dist/index.js",
   "dependencies": {
     "@svgr/webpack": "^8.1.0",

package/src/components/Button/index.tsx

@@ -6,32 +6,47 @@ import { spinSVG } from '../../assets/icon'
 import { theme } from '../Themes'
 const { colors } = theme
 
-const handleColorLoading = (variante: string) => {
-  if (variante === 'primary') {
-    return colors.cyan50
-  }
-  if (variante === 'primary') {
-    return colors.cyan50
+const handleColorLoading = ({ variant, outline }: any) => {
+  if (outline) {
+    if (variant === 'primary') {
+      return colors.cyan50
+    }
+    if (variant === 'secondary') {
+      return colors.cyan30
+    }
+    if (variant === 'danger') {
+      return colors.red40
+    }
+    if (variant === 'warning') {
+      return colors.honey30
+    }
+    if (variant === 'gray') {
+      return colors.shade30
+    }
+    if (variant === 'success') {
+      return colors.mint40
+    }
+    if (variant === 'yellow') {
+      return colors.yellow30
+    }
   }
-  if (variante === 'secondary') {
-    return colors.cyan30
+  if (variant === 'primary') {
+    return 'white'
   }
-  if (variante === 'danger') {
-    return colors.red40
+  if (variant === 'primary') {
+    return colors.cyan50
   }
-  if (variante === 'warning') {
+  if (variant === 'warning') {
     return colors.honey30
   }
-  if (variante === 'gray') {
-    return colors.shade30
-  }
-  if (variante === 'success') {
-    return colors.mint40
+  if (variant === 'gray') {
+    return colors.shade40
   }
-  if (variante === 'yellow') {
+
+  if (variant === 'yellow') {
     return colors.yellow30
   }
-  return colors.cyan50
+  return 'white'
 }
 
 export const Button: React.FC<ButtonTypes> = ({
@@ -59,7 +74,7 @@ export const Button: React.FC<ButtonTypes> = ({
     size={size}
     {...props}
   >
-    {loading && <IconWrapper src={spinSVG} loading color={outline ? handleColorLoading(variant) : 'white'} />}
+    {loading && <IconWrapper src={spinSVG} loading color={handleColorLoading({ variant, outline })} />}
     {icon && (
       <IconWrapper
         src={icon}

package/src/components/{DateInput → DatePicker}/index.tsx

@@ -1,10 +1,10 @@
 import React, { HTMLAttributes } from 'react'
-import { RangeDateInput } from '../RangeDateInput'
+import { DateRangePicker } from '../DateRangePicker'
 
-export interface DateInputProps extends HTMLAttributes<HTMLDivElement> {
+export interface DatePickerProps extends HTMLAttributes<HTMLDivElement> {
   placeholder?: string
   label: string
-  defaultOptions?: { text: string; id: number }[]
+  options?: { text: string; id: number }[]
   selectedOption?: number | null
   readonly?: boolean
   disabled?: boolean
@@ -13,12 +13,12 @@ export interface DateInputProps extends HTMLAttributes<HTMLDivElement> {
   onSelectedCustomDate?: (date: Date | null) => void
 }
 
-export const DateInput: React.FC<DateInputProps> = ({ onSelectedCustomDate, customDate, ...props }) => {
+export const DatePicker: React.FC<DatePickerProps> = ({ onSelectedCustomDate, customDate, ...props }) => {
   const onRangeSelected = (start: Date | null) => {
     if (onSelectedCustomDate) onSelectedCustomDate(start)
   }
   return (
-    <RangeDateInput
+    <DateRangePicker
       {...props}
       isRange={false}
       onSelectedCustomRange={onRangeSelected}

package/src/components/{DateInput → DatePicker}/stories.tsx

@@ -1,10 +1,10 @@
 import { Meta, StoryObj } from '@storybook/react'
-import { DateInput } from './index'
+import { DatePicker as DatePicker } from './index'
 import React from 'react'
 
-const meta: Meta<typeof DateInput> = {
-  title: 'Components/DateInput',
-  component: DateInput,
+const meta: Meta<typeof DatePicker> = {
+  title: 'Components/DatePicker',
+  component: DatePicker,
   tags: ['autodocs'],
   argTypes: {
     placeholder: { control: 'text' },
@@ -12,21 +12,33 @@ const meta: Meta<typeof DateInput> = {
     readonly: { control: 'boolean' },
     disabled: { control: 'boolean' },
   },
-} satisfies Meta<typeof DateInput>
+} satisfies Meta<typeof DatePicker>
 
 export default meta
-type Story = StoryObj<typeof DateInput>
+type Story = StoryObj<typeof DatePicker>
 
 const ComponentWrapper = ({ defaultOptions, ...args }: any) => {
   const [selectedOption, setSelectOption] = React.useState<number | null>(null)
+
   const [customDate, setCustomDate] = React.useState<Date | null>(null)
+  const onSelectedOptionChange = (option: number | null) => {
+    setSelectOption(option)
+    if (option === null) {
+      setCustomDate(null)
+      return
+    }
+    const date = new Date()
+    date.setDate(date.getDate() + option)
+    setCustomDate(date)
+
+  }
   return (
-    <DateInput
+    <DatePicker
       selectedOption={selectedOption}
       customDate={customDate}
-      onSelectedOptionChange={option => setSelectOption(option)}
+      onSelectedOptionChange={onSelectedOptionChange}
       onSelectedCustomDate={date => setCustomDate(date)}
-      defaultOptions={
+      options={
         defaultOptions ?? [
           {
             text: 'Ontem',