@tecsinapse/react-web-kit 2.3.1-beta.0 → 3.0.0

package/README.md

@@ -2,7 +2,7 @@
 
 # TecSinapse Design System
 
-[![Stars](https://img.shields.io/github/stars/tecsinapse/design-system?style=social)](https://github.com/tecsinapse/design-system/) [![License](https://img.shields.io/github/license/tecsinapse/design-system)](./LICENSE.md) [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.0-4baaaa.svg)](CODE_OF_CONDUCT.md)![build workflow](https://github.com/tecsinapse/design-system/actions/workflows/build-deploy.yml/badge.svg)
+[![Stars](https://img.shields.io/github/stars/tecsinapse/design-system?style=social)](https://github.com/tecsinapse/design-system/) [![License](https://img.shields.io/github/license/tecsinapse/design-system)](./LICENSE.md) [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.0-4baaaa.svg)](CODE_OF_CONDUCT.md)![build workflow](https://github.com/tecsinapse/design-system/actions/workflows/ci.yml/badge.svg)
 
 
 [TecSinapse Design System](https://tecsinapse.github.io/design-system) is the hybrid implementation of the [TecSinapse](https://www.tecsinapse.com.br/) Design System. 
@@ -23,11 +23,12 @@ Here are a few helpful links for getting started:
 
 ## Packages
 
-| Package                                                         | Content                                              | Version                                     |
-| --------------------------------------------------------------- | ---------------------------------------------------- | ------------------------------------------- |
-| **[@tecsinapse/react-core](./packages/react-core)**             | the core hybrid React component library              | [![npm version](https://badge.fury.io/js/%40tecsinapse%2Freact-core.svg)](https://badge.fury.io/js/%40tecsinapse%2Freact-core) |
-| **[@tecsinapse/react-web-kit](./packages/react-web-kit)**       | the React component library focused on web           | [![npm version](https://badge.fury.io/js/%40tecsinapse%2Freact-web-kit.svg)](https://badge.fury.io/js/%40tecsinapse%2Freact-web-kit) |
+| Package                                                         | Content                                              | Version                                                                                                                                    |
+|-----------------------------------------------------------------|------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------|
+| **[@tecsinapse/react-core](./packages/react-core)**             | the core hybrid React component library              | [![npm version](https://badge.fury.io/js/%40tecsinapse%2Freact-core.svg)](https://badge.fury.io/js/%40tecsinapse%2Freact-core)             |
+| **[@tecsinapse/react-web-kit](./packages/react-web-kit)**       | the React component library focused on web           | [![npm version](https://badge.fury.io/js/%40tecsinapse%2Freact-web-kit.svg)](https://badge.fury.io/js/%40tecsinapse%2Freact-web-kit)       |
 | **[@tecsinapse/react-native-kit](./packages/react-native-kit)** | the React native component library focused on mobile | [![npm version](https://badge.fury.io/js/%40tecsinapse%2Freact-native-kit.svg)](https://badge.fury.io/js/%40tecsinapse%2Freact-native-kit) |
+| **[@tecsinapse/react-charts](./packages/react-charts)**         | Charts for React based on SVG                        | [![npm version](https://badge.fury.io/js/%40tecsinapse%2Freact-charts.svg)](https://badge.fury.io/js/%40tecsinapse%2Freact-charts)         |
 
 ## Code of conduct
 
@@ -35,11 +36,36 @@ We want to foster an inclusive and friendly community around our Open Source eff
 
 If you feel another member of the community violated our code or you are experiencing problems participating in our community because of another individual's behavior, please get in touch with our maintainers.
 
+## How to make local changes available for other projects?
+
+At times, it may be necessary to test changes directly in a product, and not in the design system, and for this to work in a less laborious way, we can follow the steps below:
+
+3 terminal tabs should open:
+- In one run the JS code watch:
+```
+yarn build:watch
+```
+- In another run the watch of the TS code watch
+```
+yarn build:declarations:watch
+```
+- On another run yalc push (this script updates linked local projects)
+```
+yarn yalc:push
+```
+
+With that, all changes will be in yalc locally.
+
+To access in your application, see this [example](https://github.com/tecsinapse/vendas-web-poc-playground#tools) in topic "**Yalc link Design System:**"
+
+
 ### Maintainers
 
+- [Beatriz Silva](mailto:beatriz.silva@tecsinapse.com.br)
 - [Denner Vidal](mailto:denner.vidal@tecsinapse.com.br)
-- [Nilson Altonio](mailto:nilson.antonio@tecsinapse.com.br)
-- [Agnaldo Citadin](mailto:agnaldo.citadin@tecsinapse.com.br)
+- [Gabriel Sanches](mailto:gabriel.sanches@tecsinapse.com.br)
+- [Lucas Ramos](mailto:lucas.ramos@tecsinapse.com.br)
+- [Nilson Antonio](mailto:nilson.antonio@tecsinapse.com.br)
 - [Ryan Correa](mailto:ryan.correa@tecsinapse.com.br)
 
 ## Contributing

package/dist/cjs/components/molecules/Select/functions.js

@@ -13,30 +13,17 @@ const getSingleLabel = (value, options, keyExtractor, placeholder, labelExtracto
   return selectedOption ? labelExtractor(selectedOption) : placeholder;
 };
 const getDisplayValue = (type, value, options, placeholder, keyExtractor, labelExtractor, multiLabels) => {
-  if (type === "multi") {
-    if (value === void 0 || value.length === 0)
-      return placeholder;
-    if (value.length === 1) {
-      return getSingleLabel(
-        value?.[0],
-        options,
-        keyExtractor,
-        placeholder,
-        labelExtractor
-      );
-    }
+  if (value === void 0 || value.length === 0)
+    return placeholder;
+  if (type === "multi" && value.length > 1)
     return getMultiLabel(value, options, multiLabels);
-  } else {
-    if (value === void 0)
-      return placeholder;
-    return getSingleLabel(
-      value,
-      options,
-      keyExtractor,
-      placeholder,
-      labelExtractor
-    );
-  }
+  return getSingleLabel(
+    value instanceof Array ? value?.[0] : value,
+    options,
+    keyExtractor,
+    placeholder,
+    labelExtractor
+  );
 };
 
 exports.getDisplayValue = getDisplayValue;

package/dist/cjs/components/molecules/Snackbar/styled.js

@@ -6,7 +6,7 @@ var reactCore = require('@tecsinapse/react-core');
 const baseStyles = () => [
   nativeStyled.css({
     left: "50%",
-    maxWidth: "600px",
+    maxWidth: 600,
     transform: [{ translateX: "-50%" }]
   })
 ];

package/dist/esm/components/molecules/Select/functions.js

@@ -11,30 +11,17 @@ const getSingleLabel = (value, options, keyExtractor, placeholder, labelExtracto
   return selectedOption ? labelExtractor(selectedOption) : placeholder;
 };
 const getDisplayValue = (type, value, options, placeholder, keyExtractor, labelExtractor, multiLabels) => {
-  if (type === "multi") {
-    if (value === void 0 || value.length === 0)
-      return placeholder;
-    if (value.length === 1) {
-      return getSingleLabel(
-        value?.[0],
-        options,
-        keyExtractor,
-        placeholder,
-        labelExtractor
-      );
-    }
+  if (value === void 0 || value.length === 0)
+    return placeholder;
+  if (type === "multi" && value.length > 1)
     return getMultiLabel(value, options, multiLabels);
-  } else {
-    if (value === void 0)
-      return placeholder;
-    return getSingleLabel(
-      value,
-      options,
-      keyExtractor,
-      placeholder,
-      labelExtractor
-    );
-  }
+  return getSingleLabel(
+    value instanceof Array ? value?.[0] : value,
+    options,
+    keyExtractor,
+    placeholder,
+    labelExtractor
+  );
 };
 
 export { getDisplayValue };

package/dist/esm/components/molecules/Snackbar/styled.js

@@ -4,7 +4,7 @@ import { Snackbar } from '@tecsinapse/react-core';
 const baseStyles = () => [
   css({
     left: "50%",
-    maxWidth: "600px",
+    maxWidth: 600,
     transform: [{ translateX: "-50%" }]
   })
 ];

package/dist/types/components/atoms/Accordion/Accordion.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
     open?: boolean;
     onChange?: () => void;
     title: string;
     transition?: number;
 }
-declare const Accordion: React.FC<AccordionProps>;
+declare const Accordion: ({ title, open: _open, onChange, transition, children, ...rest }: PropsWithChildren<AccordionProps>) => JSX.Element;
 export default Accordion;

package/dist/types/components/atoms/Accordion/animations.d.ts

@@ -1,19 +1,20 @@
+import { ThemeProp } from '@tecsinapse/react-core';
 export declare const contentStyle: (open: boolean, transition: number, value: number, theme: ThemeProp) => {
     transition: string;
-    paddingBottom: any;
+    paddingBottom: number;
     height: number;
 };
 export declare const contentTransition: (value: number, theme: ThemeProp) => {
     entering: {
-        paddingBottom: any;
+        paddingBottom: number;
         height: number;
     };
     entered: {
-        paddingBottom: any;
+        paddingBottom: number;
         height: number;
     };
     exiting: {
-        paddingBottom: any;
+        paddingBottom: number;
         height: number;
     };
     exited: {
@@ -23,19 +24,19 @@ export declare const contentTransition: (value: number, theme: ThemeProp) => {
 };
 export declare const titleStyle: (transition: number, theme: ThemeProp) => {
     transition: string;
-    color: any;
+    color: string;
 };
 export declare const titleTransition: (theme: ThemeProp) => {
     entering: {
-        color: any;
+        color: string;
     };
     entered: {
-        color: any;
+        color: string;
     };
     exiting: {
-        color: any;
+        color: string;
     };
     exited: {
-        color: any;
+        color: string;
     };
 };

package/dist/types/components/atoms/Accordion/styled.d.ts

@@ -1,7 +1,16 @@
 /// <reference types="react" />
-export declare const IconContainer: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const TitleContainer: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const AccordionContainer: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TitleContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AccordionContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ContentContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

package/dist/types/components/atoms/Button/styled.d.ts

@@ -1,4 +1,13 @@
 /// <reference types="react" />
-export declare const StyledWebButton: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: import("react").Ref<any> | undefined;
-}>;
+export declare const StyledWebButton: import("@emotion/native").StyledComponent<import("@tecsinapse/react-core").ButtonProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    mouseOver: boolean;
+    pressed: boolean;
+} & {
+    onMouseOver?: (() => void) | undefined;
+    onMouseOut?: (() => void) | undefined;
+    onPressIn?: (() => void) | undefined;
+    onPressOut?: (() => void) | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, {}, {}>;

package/dist/types/components/atoms/Dropdown/styled.d.ts

@@ -1,2 +1,5 @@
 /// <reference types="react" />
-export declare const StyledContainerDropdown: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledContainerDropdown: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/types/components/atoms/Input/styled.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
-export declare const StyledWebTextInput: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: import("react").Ref<any> | undefined;
-}>;
+export declare const StyledWebTextInput: import("@emotion/native").StyledComponent<import("@tecsinapse/react-core").InputElementProps & import("react").RefAttributes<import("react-native").TextInput> & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, {}, {}>;

package/dist/types/components/atoms/InputMask/styled.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
-export declare const StyledWebTextInputMask: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: import("react").Ref<any> | undefined;
-}>;
+export declare const StyledWebTextInputMask: import("@emotion/native").StyledComponent<import("@tecsinapse/react-core").InputMaskElementProps & import("react").RefAttributes<import("react-native").TextInput> & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, {}, {}>;

package/dist/types/components/atoms/Modal/styled.d.ts

@@ -1,2 +1,5 @@
 /// <reference types="react" />
-export declare const ModalContainer: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ModalContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/types/components/atoms/Overlay/styled.d.ts

@@ -1,2 +1,11 @@
 /// <reference types="react" />
-export declare const StyledOverlay: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+import { ZIndex } from '@tecsinapse/react-core';
+type InjectedProps = {
+    show: boolean;
+    zIndex: keyof ZIndex;
+};
+export declare const StyledOverlay: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps> & InjectedProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export {};

package/dist/types/components/atoms/Skeleton/styled.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
+import { SkeletonProps } from './Skeleton';
 export declare const Wrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-} & Partial<any>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps & SkeletonProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/types/components/atoms/Switch/styled.d.ts

@@ -1,3 +1,9 @@
 /// <reference types="react" />
-export declare const StyledSwitchContent: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledSwitch: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledSwitchContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledSwitch: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/types/components/atoms/Table/Cell/styled.d.ts

@@ -1,2 +1,5 @@
 /// <reference types="react" />
-export declare const TCell: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {}>;
+export declare const TCell: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {}>;

package/dist/types/components/atoms/Table/Container/styled.d.ts

@@ -1,2 +1,5 @@
 /// <reference types="react" />
-export declare const TContainer: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/types/components/atoms/Table/Header/styled.d.ts

@@ -1,4 +1,13 @@
 /// <reference types="react" />
-export declare const ThStyled: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, {}>;
-export declare const THeadStyled: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, {}>;
-export declare const HeaderBackground: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, {}>;
+export declare const ThStyled: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, {}>;
+export declare const THeadStyled: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, {}>;
+export declare const HeaderBackground: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, {}>;

package/dist/types/components/atoms/Table/Row/styled.d.ts

@@ -1,2 +1,5 @@
 /// <reference types="react" />
-export declare const TRow: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, {}>;
+export declare const TRow: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, {}>;

package/dist/types/components/atoms/Table/styled.d.ts

@@ -1,2 +1,5 @@
 /// <reference types="react" />
-export declare const TableStyled: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;
+export declare const TableStyled: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;

package/dist/types/components/atoms/Tooltip/styled.d.ts

@@ -1,9 +1,18 @@
 /// <reference types="react" />
-import { Position } from './Tooltip';
-export declare const TooltipSpan: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+import { ComputedType, MaxWidth, Position } from './Tooltip';
+type InjectedProps = {
+    computed?: ComputedType;
+    position?: Position;
+    maxWidth?: MaxWidth;
+};
+export declare const TooltipSpan: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps> & InjectedProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const Container: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
     position?: Position | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export {};

package/dist/types/components/molecules/Breadcrumbs/BreadcrumbItem/styled.d.ts

@@ -1,3 +1,9 @@
 /// <reference types="react" />
-export declare const StyledContainerItem: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledContainerIcon: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledContainerItem: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledContainerIcon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/types/components/molecules/Breadcrumbs/styled.d.ts

@@ -1,2 +1,5 @@
 /// <reference types="react" />
-export declare const StyledContainerBreadcrumbs: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledContainerBreadcrumbs: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/types/components/molecules/DatePicker/DatePicker.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DatePickerProps, SelectionType } from '@tecsinapse/react-core';
 export type WebDatePickerProps<T extends SelectionType> = Omit<DatePickerProps<T>, 'CalendarComponent' | 'renderCalendar' | 'requestCloseCalendar' | 'requestShowCalendar'> & {
     callbackAfterValidated?: (valid: boolean, message?: string) => void;

package/dist/types/components/molecules/DatePicker/Modal.d.ts

@@ -1,4 +1,5 @@
-/// <reference types="react" />
-import { CalendarProps } from '@tecsinapse/react-core';
+import { CalendarProps, SelectionType } from '@tecsinapse/react-core';
 import { ModalProps } from 'react-native';
-export declare const Modal: <T extends SelectionType>({ onRequestClose, children, ...modalProps }: any) => JSX.Element;
+export declare const Modal: <T extends SelectionType>({ onRequestClose, children, ...modalProps }: CalendarProps<T> & import("react-native").ModalBaseProps & import("react-native").ModalPropsIOS & import("react-native").ModalPropsAndroid & import("react-native").ViewProps & {
+    children: JSX.Element;
+}) => JSX.Element;

package/dist/types/components/molecules/DatePicker/styled.d.ts

@@ -1,7 +1,11 @@
 /// <reference types="react" />
-export declare const Backdrop: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: import("react").Ref<any> | undefined;
-}>;
-export declare const ModalContent: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: import("react").Ref<import("react-native/types").View> | undefined;
+export declare const Backdrop: import("@emotion/native").StyledComponent<import("@tecsinapse/react-core").PressableSurfaceProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, {}, {}>;
+export declare const ModalContent: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, {}, {
+    ref?: import("react").Ref<import("react-native").View> | undefined;
 }>;

package/dist/types/components/molecules/DateTimePicker/Modal.d.ts

@@ -1,2 +1,3 @@
+import { DateTimeSelectorProps } from '@tecsinapse/react-core';
 import * as React from 'react';
-export declare const Modal: React.FC<any>;
+export declare const Modal: React.FC<DateTimeSelectorProps & import("react-native").ModalBaseProps & import("react-native").ModalPropsIOS & import("react-native").ModalPropsAndroid & import("react-native").ViewProps>;

package/dist/types/components/molecules/DateTimePicker/styled.d.ts

@@ -1,7 +1,11 @@
 /// <reference types="react" />
-export declare const Backdrop: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: import("react").Ref<any> | undefined;
-}>;
-export declare const ModalContent: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: import("react").Ref<import("react-native/types").View> | undefined;
+export declare const Backdrop: import("@emotion/native").StyledComponent<import("@tecsinapse/react-core").PressableSurfaceProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, {}, {}>;
+export declare const ModalContent: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, {}, {
+    ref?: import("react").Ref<import("react-native").View> | undefined;
 }>;

package/dist/types/components/molecules/Drawer/styled.d.ts

@@ -1,2 +1,6 @@
 /// <reference types="react" />
-export declare const StyledContainerDrawer: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+import { DrawerProps } from './Drawer';
+export declare const StyledContainerDrawer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & DrawerProps & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/types/components/molecules/IconTextButton/hooks/useIconTextButton.d.ts

@@ -1,6 +1,7 @@
+import { VariantType } from '@tecsinapse/react-core';
 declare const useIconTextButton: (variant: VariantType) => {
     handleHover: (value: boolean) => void;
     handlePressed: (value: boolean) => void;
-    defaultFontColor: any;
+    defaultFontColor: keyof import("@tecsinapse/react-core").FontColor;
 };
 export default useIconTextButton;

package/dist/types/components/molecules/IconTextButton/styled.d.ts

@@ -1 +1,12 @@
-export declare const StyledIconTextButton: import("@emotion/native").StyledComponent<any, {}, {}>;
+/// <reference types="react" />
+export declare const StyledIconTextButton: import("@emotion/native").StyledComponent<import("@tecsinapse/react-core").ButtonProps & {
+    onMouseOver?: (() => void) | undefined;
+    onMouseOut?: (() => void) | undefined;
+    onPressIn?: (() => void) | undefined;
+    onPressOut?: (() => void) | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps> & {
+    boxed: boolean;
+}, {}, {}>;

package/dist/types/components/molecules/LabeledSwitch/styled.d.ts

@@ -1,8 +1,12 @@
 /// <reference types="react" />
+import { LabelPositionOptions } from '@tecsinapse/react-core';
 export declare const StyledDiv: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledLabel: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: import("react").Ref<any> | undefined;
-}>;
+export declare const StyledLabel: import("@emotion/native").StyledComponent<import("@tecsinapse/react-core").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps> & {
+    labelPosition: LabelPositionOptions;
+}, {}, {}>;

package/dist/types/components/molecules/Masonry/styled.d.ts

@@ -1,7 +1,18 @@
 /// <reference types="react" />
-export declare const StyledColumnItem: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+import { MasonryProps } from './Masonry';
+export declare const StyledColumnItem: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps> & {
+    index: number;
+} & Partial<MasonryProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledMasonry: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledRowItem: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledRowItem: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps> & {
+    index: number;
+} & Partial<MasonryProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/types/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/styled.d.ts

@@ -1,3 +1,9 @@
 /// <reference types="react" />
-export declare const StyledContainerItem: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const DummyBorder: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledContainerItem: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DummyBorder: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/types/components/molecules/Menubar/MenuBlock/MenuItem/styled.d.ts

@@ -1,3 +1,9 @@
 /// <reference types="react" />
-export declare const StyledContainerItemText: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledSubButton: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const StyledContainerItemText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledSubButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/dist/types/components/molecules/Menubar/MenuBlock/styled.d.ts

@@ -1,6 +1,21 @@
 /// <reference types="react" />
-export declare const StyledLeftComponent: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledRightComponent: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledContainerMenu: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledContainerItems: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledText: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const StyledLeftComponent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledRightComponent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledContainerMenu: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledContainerItems: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/dist/types/components/molecules/Menubar/MostUsed/styled.d.ts

@@ -1,5 +1,9 @@
 /// <reference types="react" />
-export declare const StyledCardContainer: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledCard: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: import("react").Ref<any> | undefined;
-}>;
+export declare const StyledCardContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledCard: import("@emotion/native").StyledComponent<import("@tecsinapse/react-core").CardProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, {}, {}>;

package/dist/types/components/molecules/Menubar/SearchResultItem/styled.d.ts

@@ -1,5 +1,9 @@
 /// <reference types="react" />
-export declare const StyledSearchItemContainer: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const HighlightText: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: import("react").Ref<any> | undefined;
-}>;
+export declare const StyledSearchItemContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const HighlightText: import("@emotion/native").StyledComponent<import("@tecsinapse/react-core").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, {}, {}>;

package/dist/types/components/molecules/Menubar/styled.d.ts

@@ -1,9 +1,31 @@
 /// <reference types="react" />
-export declare const StyledIconInput: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledMenuBar: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledMenuButton: import("@emotion/native").StyledComponent<any, {}, {}>;
-export declare const StyledContainerOpenMenu: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledInput: import("@emotion/native").StyledComponent<any, {}, {}>;
+export declare const StyledIconInput: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledMenuBar: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledMenuButton: import("@emotion/native").StyledComponent<import("@tecsinapse/react-core").ButtonProps & {
+    onMouseOver?: (() => void) | undefined;
+    onMouseOut?: (() => void) | undefined;
+    onPressIn?: (() => void) | undefined;
+    onPressOut?: (() => void) | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, {}, {}>;
+export declare const StyledContainerOpenMenu: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledInput: import("@emotion/native").StyledComponent<Omit<import("@tecsinapse/react-core").InputElementProps, "style"> & import("@tecsinapse/react-core").InputContainerProps & {
+    ref?: import("react").Ref<HTMLInputElement | undefined> | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, {}, {}>;
 export declare const StyledInputContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
@@ -12,4 +34,7 @@ export declare const StyledSearchResultsContainer: import("@emotion/styled").Sty
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledSearchTextContainer: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledSearchTextContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/types/components/molecules/Select/Dropdown/styled.d.ts

@@ -1,14 +1,36 @@
 /// <reference types="react" />
+import { SelectProps } from '../Select';
 export declare const StyledContainerDropdown: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-} & Partial<any>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps & SelectProps<unknown, "single" | "multi"> & {
+    lengthOptions: number;
+}>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const OptionsContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-} & Partial<any>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const SearchBarContainer: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const PaddedContainer: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledContainerCheckAll: import("@emotion/styled").StyledComponent<any, {}, {}>;
-export declare const StyledSpan: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const StyledContainerTextLabel: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps & SelectProps<unknown, "single" | "multi"> & {
+    lengthOptions: number;
+}>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SearchBarContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PaddedContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledContainerCheckAll: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps> & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const StyledSpan: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const StyledContainerTextLabel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/types/components/molecules/Select/SelectItem/SelectItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface SelectItemProps<Data, Type extends 'single' | 'multi'> {
     item: Data;
     type: Type;

package/dist/types/components/molecules/Select/SelectItem/styled.d.ts

@@ -1,4 +1,15 @@
 /// <reference types="react" />
-export declare const ContainerItemSelect: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledSpan: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const StyledContainerTextLabel: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContainerItemSelect: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledSpan: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps> & {
+    singleHighligh: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const StyledContainerTextLabel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/types/components/molecules/Select/styled.d.ts

@@ -1,4 +1,10 @@
 import React from 'react';
-export declare const StyledContainer: import("@emotion/styled").StyledComponent<any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledInputContainer: import("@emotion/styled").StyledComponent<any, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledInputContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const RightComponent: JSX.Element;

package/dist/types/components/molecules/Snackbar/styled.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
-export declare const SnackbarStyled: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: import("react").Ref<any> | undefined;
-}>;
+export declare const SnackbarStyled: import("@emotion/native").StyledComponent<import("@tecsinapse/react-core").SnackbarProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, {}, {}>;

package/dist/types/components/molecules/TextArea/styled.d.ts

@@ -1,4 +1 @@
-/// <reference types="react" />
-export declare const StyledWebInput: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: import("react").Ref<any> | undefined;
-}>;
+export declare const StyledWebInput: import("@emotion/native").StyledComponent<any, {}, {}>;

package/dist/types/components/organisms/DataGrid/Footer/styled.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
-export declare const TdFooterStyled: import("@emotion/styled").StyledComponent<any, {}, {}>;
+export declare const TdFooterStyled: import("@emotion/styled").StyledComponent<import("react").TdHTMLAttributes<HTMLTableCellElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, {}, {}>;
 export declare const FlexContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
@@ -22,11 +24,37 @@ export declare const FooterContainerEnd: import("@emotion/styled").StyledCompone
 } & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-export declare const SelectContainer: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const NavigationButton: import("@emotion/native").StyledComponent<any, {}, {}>;
-export declare const PageButton: import("@emotion/native").StyledComponent<any, {}, {}>;
-export declare const PagesContainer: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const HoveredText: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const TextPagination: import("@emotion/native").StyledComponent<any, {}, {
-    ref?: import("react").Ref<any> | undefined;
-}>;
+export declare const SelectContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const NavigationButton: import("@emotion/native").StyledComponent<import("@tecsinapse/react-core").ButtonProps & {
+    onMouseOver?: (() => void) | undefined;
+    onMouseOut?: (() => void) | undefined;
+    onPressIn?: (() => void) | undefined;
+    onPressOut?: (() => void) | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, {}, {}>;
+export declare const PageButton: import("@emotion/native").StyledComponent<import("@tecsinapse/react-core").ButtonProps & {
+    onMouseOver?: (() => void) | undefined;
+    onMouseOut?: (() => void) | undefined;
+    onPressIn?: (() => void) | undefined;
+    onPressOut?: (() => void) | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, {}, {}>;
+export declare const PagesContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const HoveredText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TextPagination: import("@emotion/native").StyledComponent<import("@tecsinapse/react-core").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, {}, {}>;

package/dist/types/components/organisms/DataGrid/Header/Header.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { HeadersType } from '../types';
 export interface DataGridHeaderProps<Data> {
     headers: HeadersType<Data>[];

package/dist/types/components/organisms/DataGrid/Header/styled.d.ts

@@ -1 +1,4 @@
-export declare const CheckboxHeader: import("@emotion/styled").StyledComponent<any, {}, {}>;
+/// <reference types="react" />
+export declare const CheckboxHeader: import("@emotion/styled").StyledComponent<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, {}, {}>;

package/dist/types/components/organisms/DataGrid/styled.d.ts

@@ -1 +1,4 @@
-export declare const CheckboxCell: import("@emotion/styled").StyledComponent<any, {}, {}>;
+/// <reference types="react" />
+export declare const CheckboxCell: import("@emotion/styled").StyledComponent<import("react").TdHTMLAttributes<HTMLTableCellElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & Partial<import("@tecsinapse/react-core").ThemeProviderProps>, {}, {}>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-web-kit",
   "description": "TecSinapse React components",
-  "version": "2.3.1-beta.0+66dfc116",
+  "version": "3.0.0",
   "license": "MIT",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -10,19 +10,18 @@
     "dist"
   ],
   "scripts": {
-    "start": "yarn build:es --watch",
-    "build:es": "yarn rollup --config",
+    "dev": "rollup --watch",
+    "build:es": "rollup --config",
     "build:declaration": "tsc --project tsconfig.build.json",
     "build:declaration:watch": "tsc --project tsconfig.build.json --watch",
     "yalc:push": "yalc push --changed",
     "yalc:show": "yalc installations show $npm_package_name"
   },
   "dependencies": {
-    "@emotion/native": "~11.10.0",
-    "@emotion/react": "~11.10.0",
-    "@emotion/styled": "~11.10.0",
-    "@tecsinapse/react-core": "2.2.1-beta.0+66dfc116",
-    "@types/react-native": "^0.71.0",
+    "@emotion/native": "~11.11.0",
+    "@emotion/react": "~11.11.0",
+    "@emotion/styled": "~11.11.0",
+    "@tecsinapse/react-core": "^3.0.0",
     "date-fns": "~2.30.0",
     "react-native-vector-icons": "^9.2.0",
     "react-transition-group": "~4.4.5"
@@ -41,5 +40,5 @@
     "react-dom": "^18.0.0",
     "react-native-web": ">=0.18.0 <1"
   },
-  "gitHead": "66dfc11647cad934077a753144e1c39324e87ad2"
+  "gitHead": "59db148f23b2b94e8db779e035b43e58a0104fed"
 }