@tecsinapse/react-web-kit 1.7.8 → 1.8.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.8.0](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.7.8...@tecsinapse/react-web-kit@1.8.0) (2021-09-28)
+
+
+### Features
+
+* extend web components from html div element ([ebc700a](https://github.com/tecsinapse/design-system/commit/ebc700aad0068b34eb31ebbb705b2485d410c72e))
+
+
+
+
+
 ## [1.7.8](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.7.7...@tecsinapse/react-web-kit@1.7.8) (2021-09-27)
 
 **Note:** Version bump only for package @tecsinapse/react-web-kit

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

@@ -1,5 +1,5 @@
 import React from 'react';
-export interface AccordionProps {
+export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
     open?: boolean;
     onChange?: () => void;
     title: string;

package/dist/components/atoms/Accordion/Accordion.js

@@ -26,7 +26,8 @@ const Accordion = ({
   open: _open = false,
   onChange,
   transition = 200,
-  children
+  children,
+  ...rest
 }) => {
   const [open, setOpen] = _react.default.useState(_open);
 
@@ -53,7 +54,7 @@ const Accordion = ({
     setOpen(state => !state);
   }, [onChange]);
 
-  return _react.default.createElement(_styled.AccordionContainer, null, _react.default.createElement(_styled.TitleContainer, {
+  return _react.default.createElement(_styled.AccordionContainer, rest, _react.default.createElement(_styled.TitleContainer, {
     onClick: handleClick
   }, _react.default.createElement(_reactTransitionGroup.Transition, {
     in: open,

package/dist/components/atoms/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/Accordion/Accordion.tsx"],"names":["Accordion","title","open","_open","onChange","transition","children","setOpen","React","useState","contentHeight","setContentHeight","theme","ref","useEffect","useLayoutEffect","size","Array","from","current","reduce","prev","curr","clientHeight","handleClick","useCallback","state","htmlEl"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAMA;;AACA;;AAMA;;;;;;AAUA,MAAMA,SAAmC,GAAG,CAAC;AAC3CC,EAAAA,KAD2C;AAE3CC,EAAAA,IAAI,EAAEC,KAAK,GAAG,KAF6B;AAG3CC,EAAAA,QAH2C;AAI3CC,EAAAA,UAAU,GAAG,GAJ8B;AAK3CC,EAAAA;AAL2C,CAAD,KAMtC;AACJ,QAAM,CAACJ,IAAD,EAAOK,OAAP,IAAkBC,eAAMC,QAAN,CAAeN,KAAf,CAAxB;;AACA,QAAM,CAACO,aAAD,EAAgBC,gBAAhB,IAAoCH,eAAMC,QAAN,CAAe,CAAf,CAA1C;;AACA,QAAMG,KAAK,GAAG,uBAAd;AAEA,QAAMC,GAAG,GAAG,mBAA8B,IAA9B,CAAZ;;AAEAL,iBAAMM,SAAN,CAAgB,MAAMP,OAAO,CAACJ,KAAD,CAA7B,EAAsC,CAACA,KAAD,CAAtC;;AAEAK,iBAAMO,eAAN,CAAsB,MAAM;AAAA;;AAC1B,UAAMC,IAAI,GAAGC,KAAK,CAACC,IAAN,CACV,iBAAAL,GAAG,CAACM,OAAJ,8DAAab,QAAb,KAAyB,EADf,EAEXc,MAFW,CAEJ,CAACC,IAAD,EAAOC,IAAP,KAAgBD,IAAI,GAAGC,IAAI,CAACC,YAFxB,EAEsC,CAFtC,CAAb;AAGAZ,IAAAA,gBAAgB,CAACK,IAAD,CAAhB;AACD,GALD,EAKG,EALH;;AAOA,QAAMQ,WAAW,GAAGhB,eAAMiB,WAAN,CAAkB,MAAM;AAC1C,QAAIrB,QAAJ,EAAc;AACZA,MAAAA,QAAQ;AACR;AACD;;AACDG,IAAAA,OAAO,CAACmB,KAAK,IAAI,CAACA,KAAX,CAAP;AACD,GANmB,EAMjB,CAACtB,QAAD,CANiB,CAApB;;AAQA,SACE,6BAAC,0BAAD,QACE,6BAAC,sBAAD;AAAgB,IAAA,OAAO,EAAEoB;AAAzB,KACE,6BAAC,gCAAD;AAAY,IAAA,EAAE,EAAEtB,IAAhB;AAAsB,IAAA,OAAO,EAAEG;AAA/B,KACGqB,KAAK,IACJ,6BAAC,eAAD;AACE,IAAA,UAAU,EAAC,IADb;AAEE,IAAA,UAAU,EAAC,MAFb;AAGE,IAAA,KAAK,EAAE,EACL,GAAG,4BAAWrB,UAAX,EAAuBO,KAAvB,CADE;AAEL,SAAG,iCAAgBA,KAAhB,EAAuBc,KAAvB;AAFE;AAHT,KAQGzB,KARH,CAFJ,CADF,EAeE,6BAAC,qBAAD,QACE,6BAAC,eAAD;AACE,IAAA,IAAI,EAAC,oBADP;AAEE,IAAA,IAAI,EAAEC,IAAI,GAAG,YAAH,GAAkB,cAF9B;AAGE,IAAA,IAAI,EAAC,MAHP;AAIE,IAAA,SAAS,EAAC;AAJZ,IADF,CAfF,CADF,EAyBE,6BAAC,gCAAD;AAAY,IAAA,EAAE,EAAEA,IAAhB;AAAsB,IAAA,OAAO,EAAEG;AAA/B,KACGqB,KAAK,IACJ,6BAAC,wBAAD;AACE,IAAA,GAAG,EAAEC,MAAM,IAAKd,GAAG,CAACM,OAAJ,GAAcQ,MADhC;AAEE,IAAA,KAAK,EAAE,EACL,GAAG,8BAAazB,IAAb,EAAmBG,UAAnB,EAA+BK,aAA/B,EAA8CE,KAA9C,CADE;AAEL,SAAG,mCAAkBF,aAAlB,EAAiCE,KAAjC,EAAwCc,KAAxC;AAFE;AAFT,KAOGpB,QAPH,CAFJ,CAzBF,CADF;AAyCD,CAvED;;eAyEeN,S","sourcesContent":["import React, { useRef } from 'react';\nimport { Icon, Text, ThemeProp } from '@tecsinapse/react-core';\nimport {\n  AccordionContainer,\n  IconContainer,\n  TitleContainer,\n  ContentContainer,\n} from './styled';\nimport { Transition } from 'react-transition-group';\nimport {\n  contentStyle,\n  contentTransition,\n  titleStyle,\n  titleTransition,\n} from './animations';\nimport { useTheme } from '@emotion/react';\n\nexport interface AccordionProps {\n  open?: boolean;\n  onChange?: () => void;\n  title: string;\n  /** Transition time for collapse effect in ms */\n  transition?: number;\n}\n\nconst Accordion: React.FC<AccordionProps> = ({\n  title,\n  open: _open = false,\n  onChange,\n  transition = 200,\n  children,\n}) => {\n  const [open, setOpen] = React.useState(_open);\n  const [contentHeight, setContentHeight] = React.useState(0);\n  const theme = useTheme() as ThemeProp;\n\n  const ref = useRef<HTMLDivElement | null>(null);\n\n  React.useEffect(() => setOpen(_open), [_open]);\n\n  React.useLayoutEffect(() => {\n    const size = Array.from(\n      (ref.current?.children || []) as HTMLCollection\n    ).reduce((prev, curr) => prev + curr.clientHeight, 0);\n    setContentHeight(size);\n  }, []);\n\n  const handleClick = React.useCallback(() => {\n    if (onChange) {\n      onChange();\n      return;\n    }\n    setOpen(state => !state);\n  }, [onChange]);\n\n  return (\n    <AccordionContainer>\n      <TitleContainer onClick={handleClick}>\n        <Transition in={open} timeout={transition}>\n          {state => (\n            <Text\n              typography=\"h4\"\n              fontWeight=\"bold\"\n              style={{\n                ...titleStyle(transition, theme),\n                ...titleTransition(theme)[state],\n              }}\n            >\n              {title}\n            </Text>\n          )}\n        </Transition>\n        <IconContainer>\n          <Icon\n            type=\"material-community\"\n            name={open ? 'chevron-up' : 'chevron-down'}\n            size=\"kilo\"\n            fontColor=\"medium\"\n          />\n        </IconContainer>\n      </TitleContainer>\n      <Transition in={open} timeout={transition}>\n        {state => (\n          <ContentContainer\n            ref={htmlEl => (ref.current = htmlEl)}\n            style={{\n              ...contentStyle(open, transition, contentHeight, theme),\n              ...contentTransition(contentHeight, theme)[state],\n            }}\n          >\n            {children}\n          </ContentContainer>\n        )}\n      </Transition>\n    </AccordionContainer>\n  );\n};\n\nexport default Accordion;\n"],"file":"Accordion.js"}
+{"version":3,"sources":["../../../../src/components/atoms/Accordion/Accordion.tsx"],"names":["Accordion","title","open","_open","onChange","transition","children","rest","setOpen","React","useState","contentHeight","setContentHeight","theme","ref","useEffect","useLayoutEffect","size","Array","from","current","reduce","prev","curr","clientHeight","handleClick","useCallback","state","htmlEl"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAMA;;AACA;;AAMA;;;;;;AAUA,MAAMA,SAAmC,GAAG,CAAC;AAC3CC,EAAAA,KAD2C;AAE3CC,EAAAA,IAAI,EAAEC,KAAK,GAAG,KAF6B;AAG3CC,EAAAA,QAH2C;AAI3CC,EAAAA,UAAU,GAAG,GAJ8B;AAK3CC,EAAAA,QAL2C;AAM3C,KAAGC;AANwC,CAAD,KAOtC;AACJ,QAAM,CAACL,IAAD,EAAOM,OAAP,IAAkBC,eAAMC,QAAN,CAAeP,KAAf,CAAxB;;AACA,QAAM,CAACQ,aAAD,EAAgBC,gBAAhB,IAAoCH,eAAMC,QAAN,CAAe,CAAf,CAA1C;;AACA,QAAMG,KAAK,GAAG,uBAAd;AAEA,QAAMC,GAAG,GAAG,mBAA8B,IAA9B,CAAZ;;AAEAL,iBAAMM,SAAN,CAAgB,MAAMP,OAAO,CAACL,KAAD,CAA7B,EAAsC,CAACA,KAAD,CAAtC;;AAEAM,iBAAMO,eAAN,CAAsB,MAAM;AAAA;;AAC1B,UAAMC,IAAI,GAAGC,KAAK,CAACC,IAAN,CACV,iBAAAL,GAAG,CAACM,OAAJ,8DAAad,QAAb,KAAyB,EADf,EAEXe,MAFW,CAEJ,CAACC,IAAD,EAAOC,IAAP,KAAgBD,IAAI,GAAGC,IAAI,CAACC,YAFxB,EAEsC,CAFtC,CAAb;AAGAZ,IAAAA,gBAAgB,CAACK,IAAD,CAAhB;AACD,GALD,EAKG,EALH;;AAOA,QAAMQ,WAAW,GAAGhB,eAAMiB,WAAN,CAAkB,MAAM;AAC1C,QAAItB,QAAJ,EAAc;AACZA,MAAAA,QAAQ;AACR;AACD;;AACDI,IAAAA,OAAO,CAACmB,KAAK,IAAI,CAACA,KAAX,CAAP;AACD,GANmB,EAMjB,CAACvB,QAAD,CANiB,CAApB;;AAQA,SACE,6BAAC,0BAAD,EAAwBG,IAAxB,EACE,6BAAC,sBAAD;AAAgB,IAAA,OAAO,EAAEkB;AAAzB,KACE,6BAAC,gCAAD;AAAY,IAAA,EAAE,EAAEvB,IAAhB;AAAsB,IAAA,OAAO,EAAEG;AAA/B,KACGsB,KAAK,IACJ,6BAAC,eAAD;AACE,IAAA,UAAU,EAAC,IADb;AAEE,IAAA,UAAU,EAAC,MAFb;AAGE,IAAA,KAAK,EAAE,EACL,GAAG,4BAAWtB,UAAX,EAAuBQ,KAAvB,CADE;AAEL,SAAG,iCAAgBA,KAAhB,EAAuBc,KAAvB;AAFE;AAHT,KAQG1B,KARH,CAFJ,CADF,EAeE,6BAAC,qBAAD,QACE,6BAAC,eAAD;AACE,IAAA,IAAI,EAAC,oBADP;AAEE,IAAA,IAAI,EAAEC,IAAI,GAAG,YAAH,GAAkB,cAF9B;AAGE,IAAA,IAAI,EAAC,MAHP;AAIE,IAAA,SAAS,EAAC;AAJZ,IADF,CAfF,CADF,EAyBE,6BAAC,gCAAD;AAAY,IAAA,EAAE,EAAEA,IAAhB;AAAsB,IAAA,OAAO,EAAEG;AAA/B,KACGsB,KAAK,IACJ,6BAAC,wBAAD;AACE,IAAA,GAAG,EAAEC,MAAM,IAAKd,GAAG,CAACM,OAAJ,GAAcQ,MADhC;AAEE,IAAA,KAAK,EAAE,EACL,GAAG,8BAAa1B,IAAb,EAAmBG,UAAnB,EAA+BM,aAA/B,EAA8CE,KAA9C,CADE;AAEL,SAAG,mCAAkBF,aAAlB,EAAiCE,KAAjC,EAAwCc,KAAxC;AAFE;AAFT,KAOGrB,QAPH,CAFJ,CAzBF,CADF;AAyCD,CAxED;;eA0EeN,S","sourcesContent":["import React, { useRef } from 'react';\nimport { Icon, Text, ThemeProp } from '@tecsinapse/react-core';\nimport {\n  AccordionContainer,\n  IconContainer,\n  TitleContainer,\n  ContentContainer,\n} from './styled';\nimport { Transition } from 'react-transition-group';\nimport {\n  contentStyle,\n  contentTransition,\n  titleStyle,\n  titleTransition,\n} from './animations';\nimport { useTheme } from '@emotion/react';\n\nexport interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {\n  open?: boolean;\n  onChange?: () => void;\n  title: string;\n  /** Transition time for collapse effect in ms */\n  transition?: number;\n}\n\nconst Accordion: React.FC<AccordionProps> = ({\n  title,\n  open: _open = false,\n  onChange,\n  transition = 200,\n  children,\n  ...rest\n}) => {\n  const [open, setOpen] = React.useState(_open);\n  const [contentHeight, setContentHeight] = React.useState(0);\n  const theme = useTheme() as ThemeProp;\n\n  const ref = useRef<HTMLDivElement | null>(null);\n\n  React.useEffect(() => setOpen(_open), [_open]);\n\n  React.useLayoutEffect(() => {\n    const size = Array.from(\n      (ref.current?.children || []) as HTMLCollection\n    ).reduce((prev, curr) => prev + curr.clientHeight, 0);\n    setContentHeight(size);\n  }, []);\n\n  const handleClick = React.useCallback(() => {\n    if (onChange) {\n      onChange();\n      return;\n    }\n    setOpen(state => !state);\n  }, [onChange]);\n\n  return (\n    <AccordionContainer {...rest}>\n      <TitleContainer onClick={handleClick}>\n        <Transition in={open} timeout={transition}>\n          {state => (\n            <Text\n              typography=\"h4\"\n              fontWeight=\"bold\"\n              style={{\n                ...titleStyle(transition, theme),\n                ...titleTransition(theme)[state],\n              }}\n            >\n              {title}\n            </Text>\n          )}\n        </Transition>\n        <IconContainer>\n          <Icon\n            type=\"material-community\"\n            name={open ? 'chevron-up' : 'chevron-down'}\n            size=\"kilo\"\n            fontColor=\"medium\"\n          />\n        </IconContainer>\n      </TitleContainer>\n      <Transition in={open} timeout={transition}>\n        {state => (\n          <ContentContainer\n            ref={htmlEl => (ref.current = htmlEl)}\n            style={{\n              ...contentStyle(open, transition, contentHeight, theme),\n              ...contentTransition(contentHeight, theme)[state],\n            }}\n          >\n            {children}\n          </ContentContainer>\n        )}\n      </Transition>\n    </AccordionContainer>\n  );\n};\n\nexport default Accordion;\n"],"file":"Accordion.js"}

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

@@ -1,8 +1,7 @@
-import React, { CSSProperties } from 'react';
-export interface ModalProps {
+import React from 'react';
+export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
     open: boolean;
     onClose: () => void;
-    style?: CSSProperties;
 }
 declare const Modal: React.FC<ModalProps>;
 export default Modal;

package/dist/components/atoms/Modal/Modal.js

@@ -17,11 +17,14 @@ var _animations = require("./animations");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 const Modal = ({
   children,
   open,
   onClose,
-  style
+  style,
+  ...rest
 }) => {
   return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_Overlay.Overlay, {
     open: open,
@@ -30,12 +33,12 @@ const Modal = ({
   }), _react.default.createElement(_reactTransitionGroup.Transition, {
     in: open,
     timeout: 400
-  }, state => _react.default.createElement(_styled.ModalContainer, {
+  }, state => _react.default.createElement(_styled.ModalContainer, _extends({
     style: { ...style,
       ..._animations.defaultStyleOverlay,
       ..._animations.transitionStylesOverlay[state]
     }
-  }, children)));
+  }, rest), children)));
 };
 
 var _default = Modal;

package/dist/components/atoms/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/Modal/Modal.tsx"],"names":["Modal","children","open","onClose","style","state","defaultStyleOverlay","transitionStylesOverlay"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;AAQA,MAAMA,KAA2B,GAAG,CAAC;AAAEC,EAAAA,QAAF;AAAYC,EAAAA,IAAZ;AAAkBC,EAAAA,OAAlB;AAA2BC,EAAAA;AAA3B,CAAD,KAAwC;AAC1E,SACE,4DACE,6BAAC,gBAAD;AAAS,IAAA,IAAI,EAAEF,IAAf;AAAqB,IAAA,OAAO,EAAEC,OAA9B;AAAuC,IAAA,MAAM,EAAC;AAA9C,IADF,EAEE,6BAAC,gCAAD;AAAY,IAAA,EAAE,EAAED,IAAhB;AAAsB,IAAA,OAAO,EAAE;AAA/B,KACGG,KAAK,IACJ,6BAAC,sBAAD;AACE,IAAA,KAAK,EAAE,EACL,GAAGD,KADE;AAEL,SAAGE,+BAFE;AAGL,SAAGC,oCAAwBF,KAAxB;AAHE;AADT,KAOGJ,QAPH,CAFJ,CAFF,CADF;AAkBD,CAnBD;;eAqBeD,K","sourcesContent":["import React, { CSSProperties } from 'react';\nimport { Transition } from 'react-transition-group';\nimport { Overlay } from '../Overlay';\nimport { ModalContainer } from './styled';\nimport { defaultStyleOverlay, transitionStylesOverlay } from './animations';\n\nexport interface ModalProps {\n  open: boolean;\n  onClose: () => void;\n  style?: CSSProperties;\n}\n\nconst Modal: React.FC<ModalProps> = ({ children, open, onClose, style }) => {\n  return (\n    <>\n      <Overlay open={open} onClose={onClose} zIndex=\"modal\" />\n      <Transition in={open} timeout={400}>\n        {state => (\n          <ModalContainer\n            style={{\n              ...style,\n              ...defaultStyleOverlay,\n              ...transitionStylesOverlay[state],\n            }}\n          >\n            {children}\n          </ModalContainer>\n        )}\n      </Transition>\n    </>\n  );\n};\n\nexport default Modal;\n"],"file":"Modal.js"}
+{"version":3,"sources":["../../../../src/components/atoms/Modal/Modal.tsx"],"names":["Modal","children","open","onClose","style","rest","state","defaultStyleOverlay","transitionStylesOverlay"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;AAOA,MAAMA,KAA2B,GAAG,CAAC;AACnCC,EAAAA,QADmC;AAEnCC,EAAAA,IAFmC;AAGnCC,EAAAA,OAHmC;AAInCC,EAAAA,KAJmC;AAKnC,KAAGC;AALgC,CAAD,KAM9B;AACJ,SACE,4DACE,6BAAC,gBAAD;AAAS,IAAA,IAAI,EAAEH,IAAf;AAAqB,IAAA,OAAO,EAAEC,OAA9B;AAAuC,IAAA,MAAM,EAAC;AAA9C,IADF,EAEE,6BAAC,gCAAD;AAAY,IAAA,EAAE,EAAED,IAAhB;AAAsB,IAAA,OAAO,EAAE;AAA/B,KACGI,KAAK,IACJ,6BAAC,sBAAD;AACE,IAAA,KAAK,EAAE,EACL,GAAGF,KADE;AAEL,SAAGG,+BAFE;AAGL,SAAGC,oCAAwBF,KAAxB;AAHE;AADT,KAMMD,IANN,GAQGJ,QARH,CAFJ,CAFF,CADF;AAmBD,CA1BD;;eA4BeD,K","sourcesContent":["import React from 'react';\nimport { Transition } from 'react-transition-group';\nimport { Overlay } from '../Overlay';\nimport { ModalContainer } from './styled';\nimport { defaultStyleOverlay, transitionStylesOverlay } from './animations';\n\nexport interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {\n  open: boolean;\n  onClose: () => void;\n}\n\nconst Modal: React.FC<ModalProps> = ({\n  children,\n  open,\n  onClose,\n  style,\n  ...rest\n}) => {\n  return (\n    <>\n      <Overlay open={open} onClose={onClose} zIndex=\"modal\" />\n      <Transition in={open} timeout={400}>\n        {state => (\n          <ModalContainer\n            style={{\n              ...style,\n              ...defaultStyleOverlay,\n              ...transitionStylesOverlay[state],\n            }}\n            {...rest}\n          >\n            {children}\n          </ModalContainer>\n        )}\n      </Transition>\n    </>\n  );\n};\n\nexport default Modal;\n"],"file":"Modal.js"}

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

@@ -1,10 +1,10 @@
-import { ElementType, FC } from 'react';
+import React, { ElementType, FC } from 'react';
 export declare type BreadcrumbType = {
     title: string;
     Component: ElementType;
     props?: any;
 };
-export interface BreadcrumbsProps {
+export interface BreadcrumbsProps extends React.HTMLAttributes<HTMLDivElement> {
     breadcrumbs: BreadcrumbType[];
 }
 declare const Breadcrumbs: FC<BreadcrumbsProps>;

package/dist/components/molecules/Breadcrumbs/Breadcrumbs.js

@@ -14,9 +14,10 @@ var _BreadcrumbItem = require("./BreadcrumbItem");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const Breadcrumbs = ({
-  breadcrumbs
+  breadcrumbs,
+  ...rest
 }) => {
-  return _react.default.createElement(_styled.StyledContainerBreadcrumbs, null, breadcrumbs.map((item, index) => {
+  return _react.default.createElement(_styled.StyledContainerBreadcrumbs, rest, breadcrumbs.map((item, index) => {
     const {
       props,
       Component = 'a',

package/dist/components/molecules/Breadcrumbs/Breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/Breadcrumbs/Breadcrumbs.tsx"],"names":["Breadcrumbs","breadcrumbs","map","item","index","props","Component","title","length"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAYA,MAAMA,WAAiC,GAAG,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAqB;AAC7D,SACE,6BAAC,kCAAD,QACGA,WAAW,CAACC,GAAZ,CAAgB,CAACC,IAAD,EAAOC,KAAP,KAAiB;AAChC,UAAM;AAAEC,MAAAA,KAAF;AAASC,MAAAA,SAAS,GAAG,GAArB;AAA0BC,MAAAA;AAA1B,QAAoCJ,IAA1C;AACA,WACE,6BAAC,8BAAD;AACE,MAAA,GAAG,EAAEC,KADP;AAEE,MAAA,SAAS,EAAEE,SAFb;AAGE,MAAA,KAAK,EAAED,KAHT;AAIE,MAAA,MAAM,EAAEJ,WAAW,CAACO,MAAZ,GAAqB,CAArB,KAA2BJ,KAJrC;AAKE,MAAA,KAAK,EAAEG;AALT,MADF;AASD,GAXA,CADH,CADF;AAgBD,CAjBD;;eAmBeP,W","sourcesContent":["import React, { ElementType, FC } from 'react';\nimport { StyledContainerBreadcrumbs } from './styled';\nimport { BreadcrumbItem } from './BreadcrumbItem';\n\nexport type BreadcrumbType = {\n  title: string;\n  Component: ElementType;\n  props?: any;\n};\n\nexport interface BreadcrumbsProps {\n  breadcrumbs: BreadcrumbType[];\n}\n\nconst Breadcrumbs: FC<BreadcrumbsProps> = ({ breadcrumbs }) => {\n  return (\n    <StyledContainerBreadcrumbs>\n      {breadcrumbs.map((item, index) => {\n        const { props, Component = 'a', title } = item;\n        return (\n          <BreadcrumbItem\n            key={index}\n            Component={Component}\n            props={props}\n            isLast={breadcrumbs.length - 1 === index}\n            title={title}\n          />\n        );\n      })}\n    </StyledContainerBreadcrumbs>\n  );\n};\n\nexport default Breadcrumbs;\n"],"file":"Breadcrumbs.js"}
+{"version":3,"sources":["../../../../src/components/molecules/Breadcrumbs/Breadcrumbs.tsx"],"names":["Breadcrumbs","breadcrumbs","rest","map","item","index","props","Component","title","length"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAYA,MAAMA,WAAiC,GAAG,CAAC;AAAEC,EAAAA,WAAF;AAAe,KAAGC;AAAlB,CAAD,KAA8B;AACtE,SACE,6BAAC,kCAAD,EAAgCA,IAAhC,EACGD,WAAW,CAACE,GAAZ,CAAgB,CAACC,IAAD,EAAOC,KAAP,KAAiB;AAChC,UAAM;AAAEC,MAAAA,KAAF;AAASC,MAAAA,SAAS,GAAG,GAArB;AAA0BC,MAAAA;AAA1B,QAAoCJ,IAA1C;AACA,WACE,6BAAC,8BAAD;AACE,MAAA,GAAG,EAAEC,KADP;AAEE,MAAA,SAAS,EAAEE,SAFb;AAGE,MAAA,KAAK,EAAED,KAHT;AAIE,MAAA,MAAM,EAAEL,WAAW,CAACQ,MAAZ,GAAqB,CAArB,KAA2BJ,KAJrC;AAKE,MAAA,KAAK,EAAEG;AALT,MADF;AASD,GAXA,CADH,CADF;AAgBD,CAjBD;;eAmBeR,W","sourcesContent":["import React, { ElementType, FC } from 'react';\nimport { StyledContainerBreadcrumbs } from './styled';\nimport { BreadcrumbItem } from './BreadcrumbItem';\n\nexport type BreadcrumbType = {\n  title: string;\n  Component: ElementType;\n  props?: any;\n};\n\nexport interface BreadcrumbsProps extends React.HTMLAttributes<HTMLDivElement> {\n  breadcrumbs: BreadcrumbType[];\n}\n\nconst Breadcrumbs: FC<BreadcrumbsProps> = ({ breadcrumbs, ...rest }) => {\n  return (\n    <StyledContainerBreadcrumbs {...rest}>\n      {breadcrumbs.map((item, index) => {\n        const { props, Component = 'a', title } = item;\n        return (\n          <BreadcrumbItem\n            key={index}\n            Component={Component}\n            props={props}\n            isLast={breadcrumbs.length - 1 === index}\n            title={title}\n          />\n        );\n      })}\n    </StyledContainerBreadcrumbs>\n  );\n};\n\nexport default Breadcrumbs;\n"],"file":"Breadcrumbs.js"}

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

@@ -1,8 +1,9 @@
-import { FC } from 'react';
-export interface DrawerProps {
+import React, { FC } from 'react';
+declare type AnchorPosition = 'left' | 'right' | 'top' | 'bottom';
+export interface DrawerProps extends React.HTMLAttributes<HTMLDivElement> {
     open: boolean;
     onClose: () => void;
-    anchorPosition: 'left' | 'right' | 'top' | 'bottom';
+    anchorPosition: AnchorPosition;
 }
 declare const Drawer: FC<DrawerProps>;
 export default Drawer;

package/dist/components/molecules/Drawer/Drawer.js

@@ -17,11 +17,15 @@ var _animations = require("./animations");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 const Drawer = ({
   open,
   anchorPosition = 'right',
   onClose,
-  children
+  children,
+  style,
+  ...rest
 }) => {
   const getStyles = (anchorPosition, state) => {
     const stylesLeftRight = (0, _animations.defaultStylesLeftRight)(anchorPosition);
@@ -48,12 +52,14 @@ const Drawer = ({
   }), _react.default.createElement(_reactTransitionGroup.Transition, {
     in: open,
     timeout: 300
-  }, state => _react.default.createElement(_styled.StyledContainerDrawer, {
-    style: getStyles(anchorPosition, state),
+  }, state => _react.default.createElement(_styled.StyledContainerDrawer, _extends({
+    style: { ...style,
+      ...getStyles(anchorPosition, state)
+    },
     anchorPosition: anchorPosition,
     onClose: onClose,
     open: open
-  }, children)));
+  }, rest), children)));
 };
 
 var _default = Drawer;

package/dist/components/molecules/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/Drawer/Drawer.tsx"],"names":["Drawer","open","anchorPosition","onClose","children","getStyles","state","stylesLeftRight","transitionLeftRight","stylesTopBottom","transitionTopBottom","includes"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;AAaA,MAAMA,MAAuB,GAAG,CAAC;AAC/BC,EAAAA,IAD+B;AAE/BC,EAAAA,cAAc,GAAG,OAFc;AAG/BC,EAAAA,OAH+B;AAI/BC,EAAAA;AAJ+B,CAAD,KAK1B;AACJ,QAAMC,SAAS,GAAG,CAACH,cAAD,EAAyBI,KAAzB,KAAwC;AACxD,UAAMC,eAAe,GAAG,wCAAuBL,cAAvB,CAAxB;AACA,UAAMM,mBAAmB,GAAG,2CAA0BN,cAA1B,CAA5B;AACA,UAAMO,eAAe,GAAG,wCAAuBP,cAAvB,CAAxB;AACA,UAAMQ,mBAAmB,GAAG,2CAA0BR,cAA1B,CAA5B;;AAEA,QAAI,CAAC,MAAD,EAAS,OAAT,EAAkBS,QAAlB,CAA2BT,cAA3B,CAAJ,EAAgD;AAC9C,aAAO,EACL,GAAGK,eADE;AAEL,WAAGC,mBAAmB,CAACF,KAAD;AAFjB,OAAP;AAID,KALD,MAKO;AACL,aAAO,EACL,GAAGG,eADE;AAEL,WAAGC,mBAAmB,CAACJ,KAAD;AAFjB,OAAP;AAID;AACF,GAjBD;;AAmBA,SACE,4DACE,6BAAC,gBAAD;AAAS,IAAA,OAAO,EAAE,GAAlB;AAAuB,IAAA,IAAI,EAAEL,IAA7B;AAAmC,IAAA,OAAO,EAAEE,OAA5C;AAAqD,IAAA,MAAM,EAAC;AAA5D,IADF,EAEE,6BAAC,gCAAD;AAAY,IAAA,EAAE,EAAEF,IAAhB;AAAsB,IAAA,OAAO,EAAE;AAA/B,KACGK,KAAK,IACJ,6BAAC,6BAAD;AACE,IAAA,KAAK,EAAED,SAAS,CAACH,cAAD,EAAiBI,KAAjB,CADlB;AAEE,IAAA,cAAc,EAAEJ,cAFlB;AAGE,IAAA,OAAO,EAAEC,OAHX;AAIE,IAAA,IAAI,EAAEF;AAJR,KAMGG,QANH,CAFJ,CAFF,CADF;AAiBD,CA1CD;;eA4CeJ,M","sourcesContent":["import React, { FC } from 'react';\nimport { StyledContainerDrawer } from './styled';\nimport { Transition } from 'react-transition-group';\nimport { Overlay } from '../../atoms/Overlay';\nimport {\n  transitionStylesTopBottom,\n  defaultStylesTopBottom,\n  defaultStylesLeftRight,\n  transitionStylesLeftRight,\n} from './animations';\n\nexport interface DrawerProps {\n  open: boolean;\n  onClose: () => void;\n  anchorPosition: 'left' | 'right' | 'top' | 'bottom';\n}\n\nconst Drawer: FC<DrawerProps> = ({\n  open,\n  anchorPosition = 'right',\n  onClose,\n  children,\n}) => {\n  const getStyles = (anchorPosition: string, state: any) => {\n    const stylesLeftRight = defaultStylesLeftRight(anchorPosition);\n    const transitionLeftRight = transitionStylesLeftRight(anchorPosition);\n    const stylesTopBottom = defaultStylesTopBottom(anchorPosition);\n    const transitionTopBottom = transitionStylesTopBottom(anchorPosition);\n\n    if (['left', 'right'].includes(anchorPosition)) {\n      return {\n        ...stylesLeftRight,\n        ...transitionLeftRight[state],\n      };\n    } else {\n      return {\n        ...stylesTopBottom,\n        ...transitionTopBottom[state],\n      };\n    }\n  };\n\n  return (\n    <>\n      <Overlay timeout={300} open={open} onClose={onClose} zIndex=\"drawer\" />\n      <Transition in={open} timeout={300}>\n        {state => (\n          <StyledContainerDrawer\n            style={getStyles(anchorPosition, state)}\n            anchorPosition={anchorPosition}\n            onClose={onClose}\n            open={open}\n          >\n            {children}\n          </StyledContainerDrawer>\n        )}\n      </Transition>\n    </>\n  );\n};\n\nexport default Drawer;\n"],"file":"Drawer.js"}
+{"version":3,"sources":["../../../../src/components/molecules/Drawer/Drawer.tsx"],"names":["Drawer","open","anchorPosition","onClose","children","style","rest","getStyles","state","stylesLeftRight","transitionLeftRight","stylesTopBottom","transitionTopBottom","includes"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;AAeA,MAAMA,MAAuB,GAAG,CAAC;AAC/BC,EAAAA,IAD+B;AAE/BC,EAAAA,cAAc,GAAG,OAFc;AAG/BC,EAAAA,OAH+B;AAI/BC,EAAAA,QAJ+B;AAK/BC,EAAAA,KAL+B;AAM/B,KAAGC;AAN4B,CAAD,KAO1B;AACJ,QAAMC,SAAS,GAAG,CAChBL,cADgB,EAEhBM,KAFgB,KAGb;AACH,UAAMC,eAAe,GAAG,wCAAuBP,cAAvB,CAAxB;AACA,UAAMQ,mBAAmB,GAAG,2CAA0BR,cAA1B,CAA5B;AACA,UAAMS,eAAe,GAAG,wCAAuBT,cAAvB,CAAxB;AACA,UAAMU,mBAAmB,GAAG,2CAA0BV,cAA1B,CAA5B;;AAEA,QAAI,CAAC,MAAD,EAAS,OAAT,EAAkBW,QAAlB,CAA2BX,cAA3B,CAAJ,EAAgD;AAC9C,aAAO,EACL,GAAGO,eADE;AAEL,WAAGC,mBAAmB,CAACF,KAAD;AAFjB,OAAP;AAID,KALD,MAKO;AACL,aAAO,EACL,GAAGG,eADE;AAEL,WAAGC,mBAAmB,CAACJ,KAAD;AAFjB,OAAP;AAID;AACF,GApBD;;AAsBA,SACE,4DACE,6BAAC,gBAAD;AAAS,IAAA,OAAO,EAAE,GAAlB;AAAuB,IAAA,IAAI,EAAEP,IAA7B;AAAmC,IAAA,OAAO,EAAEE,OAA5C;AAAqD,IAAA,MAAM,EAAC;AAA5D,IADF,EAEE,6BAAC,gCAAD;AAAY,IAAA,EAAE,EAAEF,IAAhB;AAAsB,IAAA,OAAO,EAAE;AAA/B,KACGO,KAAK,IACJ,6BAAC,6BAAD;AACE,IAAA,KAAK,EAAE,EAAE,GAAGH,KAAL;AAAY,SAAGE,SAAS,CAACL,cAAD,EAAiBM,KAAjB;AAAxB,KADT;AAEE,IAAA,cAAc,EAAEN,cAFlB;AAGE,IAAA,OAAO,EAAEC,OAHX;AAIE,IAAA,IAAI,EAAEF;AAJR,KAKMK,IALN,GAOGF,QAPH,CAFJ,CAFF,CADF;AAkBD,CAhDD;;eAkDeJ,M","sourcesContent":["import React, { FC } from 'react';\nimport { StyledContainerDrawer } from './styled';\nimport { Transition, TransitionStatus } from 'react-transition-group';\nimport { Overlay } from '../../atoms/Overlay';\nimport {\n  transitionStylesTopBottom,\n  defaultStylesTopBottom,\n  defaultStylesLeftRight,\n  transitionStylesLeftRight,\n} from './animations';\n\ntype AnchorPosition = 'left' | 'right' | 'top' | 'bottom';\n\nexport interface DrawerProps extends React.HTMLAttributes<HTMLDivElement> {\n  open: boolean;\n  onClose: () => void;\n  anchorPosition: AnchorPosition;\n}\n\nconst Drawer: FC<DrawerProps> = ({\n  open,\n  anchorPosition = 'right',\n  onClose,\n  children,\n  style,\n  ...rest\n}) => {\n  const getStyles = (\n    anchorPosition: AnchorPosition,\n    state: TransitionStatus\n  ) => {\n    const stylesLeftRight = defaultStylesLeftRight(anchorPosition);\n    const transitionLeftRight = transitionStylesLeftRight(anchorPosition);\n    const stylesTopBottom = defaultStylesTopBottom(anchorPosition);\n    const transitionTopBottom = transitionStylesTopBottom(anchorPosition);\n\n    if (['left', 'right'].includes(anchorPosition)) {\n      return {\n        ...stylesLeftRight,\n        ...transitionLeftRight[state],\n      };\n    } else {\n      return {\n        ...stylesTopBottom,\n        ...transitionTopBottom[state],\n      };\n    }\n  };\n\n  return (\n    <>\n      <Overlay timeout={300} open={open} onClose={onClose} zIndex=\"drawer\" />\n      <Transition in={open} timeout={300}>\n        {state => (\n          <StyledContainerDrawer\n            style={{ ...style, ...getStyles(anchorPosition, state) }}\n            anchorPosition={anchorPosition}\n            onClose={onClose}\n            open={open}\n            {...rest}\n          >\n            {children}\n          </StyledContainerDrawer>\n        )}\n      </Transition>\n    </>\n  );\n};\n\nexport default Drawer;\n"],"file":"Drawer.js"}

package/dist/components/molecules/Drawer/animations.d.ts

@@ -1,13 +1,9 @@
+import { CSSProperties } from 'react';
 export declare const transformLeftRigthClose: (anchorPosition: string) => "translateX(100%)" | "translateX(-100%)";
 export declare const transformLeftRigthOpen = "translateX(0)";
 export declare const transformTopBottomClose: (anchorPosition: string) => "translateY(-100%)" | "translateY(100%)";
 export declare const transformTopBottomOpen = "translateY(0%)";
-export declare const defaultStylesLeftRight: (anchorPosition: string) => {
-    transition: string;
-    transform: () => "translateX(100%)" | "translateX(-100%)";
-    overflowX: string;
-    overflowY: string;
-};
+export declare const defaultStylesLeftRight: (anchorPosition: string) => CSSProperties;
 export declare const transitionStylesLeftRight: (anchorPosition: string) => {
     entering: {
         transform: string;
@@ -22,12 +18,7 @@ export declare const transitionStylesLeftRight: (anchorPosition: string) => {
         transform: string;
     };
 };
-export declare const defaultStylesTopBottom: (anchorPosition: string) => {
-    transition: string;
-    transform: string;
-    overflowX: string;
-    overflowY: string;
-};
+export declare const defaultStylesTopBottom: (anchorPosition: string) => CSSProperties;
 export declare const transitionStylesTopBottom: (anchorPosition: string) => {
     entering: {
         transform: string;

package/dist/components/molecules/Drawer/animations.js

@@ -20,7 +20,7 @@ exports.transformTopBottomOpen = transformTopBottomOpen;
 const defaultStylesLeftRight = anchorPosition => {
   return {
     transition: 'transform 300ms ease-in-out',
-    transform: () => transformLeftRigthClose(anchorPosition),
+    transform: transformLeftRigthClose(anchorPosition),
     overflowX: 'hidden',
     overflowY: 'auto'
   };

package/dist/components/molecules/Drawer/animations.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/Drawer/animations.ts"],"names":["transformLeftRigthClose","anchorPosition","transformLeftRigthOpen","transformTopBottomClose","transformTopBottomOpen","defaultStylesLeftRight","transition","transform","overflowX","overflowY","transitionStylesLeftRight","entering","entered","exiting","exited","defaultStylesTopBottom","transitionStylesTopBottom"],"mappings":";;;;;;;AAAO,MAAMA,uBAAuB,GAAIC,cAAD,IACrCA,cAAc,KAAK,OAAnB,GAA6B,kBAA7B,GAAkD,mBAD7C;;;AAGA,MAAMC,sBAAsB,GAAG,eAA/B;;;AAEA,MAAMC,uBAAuB,GAAIF,cAAD,IACrCA,cAAc,KAAK,KAAnB,GAA2B,mBAA3B,GAAiD,kBAD5C;;;AAGA,MAAMG,sBAAsB,GAAG,gBAA/B;;;AAEA,MAAMC,sBAAsB,GAAIJ,cAAD,IAA4B;AAChE,SAAO;AACLK,IAAAA,UAAU,EAAE,6BADP;AAELC,IAAAA,SAAS,EAAE,MAAMP,uBAAuB,CAACC,cAAD,CAFnC;AAGLO,IAAAA,SAAS,EAAE,QAHN;AAILC,IAAAA,SAAS,EAAE;AAJN,GAAP;AAMD,CAPM;;;;AASA,MAAMC,yBAAyB,GAAIT,cAAD,IAA4B;AACnE,SAAO;AACLU,IAAAA,QAAQ,EAAE;AAAEJ,MAAAA,SAAS,EAAEP,uBAAuB,CAACC,cAAD;AAApC,KADL;AAELW,IAAAA,OAAO,EAAE;AACPL,MAAAA,SAAS,EAAEL;AADJ,KAFJ;AAKLW,IAAAA,OAAO,EAAE;AACPN,MAAAA,SAAS,EAAEL;AADJ,KALJ;AAQLY,IAAAA,MAAM,EAAE;AAAEP,MAAAA,SAAS,EAAEP,uBAAuB,CAACC,cAAD;AAApC;AARH,GAAP;AAUD,CAXM;;;;AAaA,MAAMc,sBAAsB,GAAId,cAAD,IAA4B;AAChE,SAAO;AACLK,IAAAA,UAAU,EAAE,6BADP;AAELC,IAAAA,SAAS,EAAEJ,uBAAuB,CAACF,cAAD,CAF7B;AAGLO,IAAAA,SAAS,EAAE,QAHN;AAILC,IAAAA,SAAS,EAAE;AAJN,GAAP;AAMD,CAPM;;;;AAQA,MAAMO,yBAAyB,GAAIf,cAAD,IAA4B;AACnE,SAAO;AACLU,IAAAA,QAAQ,EAAE;AAAEJ,MAAAA,SAAS,EAAEJ,uBAAuB,CAACF,cAAD;AAApC,KADL;AAELW,IAAAA,OAAO,EAAE;AACPL,MAAAA,SAAS,EAAEH;AADJ,KAFJ;AAKLS,IAAAA,OAAO,EAAE;AACPN,MAAAA,SAAS,EAAEH;AADJ,KALJ;AAQLU,IAAAA,MAAM,EAAE;AAAEP,MAAAA,SAAS,EAAEJ,uBAAuB,CAACF,cAAD;AAApC;AARH,GAAP;AAUD,CAXM","sourcesContent":["export const transformLeftRigthClose = (anchorPosition: string) =>\n  anchorPosition === 'right' ? 'translateX(100%)' : 'translateX(-100%)';\n\nexport const transformLeftRigthOpen = 'translateX(0)';\n\nexport const transformTopBottomClose = (anchorPosition: string) =>\n  anchorPosition === 'top' ? 'translateY(-100%)' : 'translateY(100%)';\n\nexport const transformTopBottomOpen = 'translateY(0%)';\n\nexport const defaultStylesLeftRight = (anchorPosition: string) => {\n  return {\n    transition: 'transform 300ms ease-in-out',\n    transform: () => transformLeftRigthClose(anchorPosition),\n    overflowX: 'hidden',\n    overflowY: 'auto',\n  };\n};\n\nexport const transitionStylesLeftRight = (anchorPosition: string) => {\n  return {\n    entering: { transform: transformLeftRigthClose(anchorPosition) },\n    entered: {\n      transform: transformLeftRigthOpen,\n    },\n    exiting: {\n      transform: transformLeftRigthOpen,\n    },\n    exited: { transform: transformLeftRigthClose(anchorPosition) },\n  };\n};\n\nexport const defaultStylesTopBottom = (anchorPosition: string) => {\n  return {\n    transition: 'transform 300ms ease-in-out',\n    transform: transformTopBottomClose(anchorPosition),\n    overflowX: 'hidden',\n    overflowY: 'auto',\n  };\n};\nexport const transitionStylesTopBottom = (anchorPosition: string) => {\n  return {\n    entering: { transform: transformTopBottomClose(anchorPosition) },\n    entered: {\n      transform: transformTopBottomOpen,\n    },\n    exiting: {\n      transform: transformTopBottomOpen,\n    },\n    exited: { transform: transformTopBottomClose(anchorPosition) },\n  };\n};\n"],"file":"animations.js"}
+{"version":3,"sources":["../../../../src/components/molecules/Drawer/animations.ts"],"names":["transformLeftRigthClose","anchorPosition","transformLeftRigthOpen","transformTopBottomClose","transformTopBottomOpen","defaultStylesLeftRight","transition","transform","overflowX","overflowY","transitionStylesLeftRight","entering","entered","exiting","exited","defaultStylesTopBottom","transitionStylesTopBottom"],"mappings":";;;;;;;AAEO,MAAMA,uBAAuB,GAAIC,cAAD,IACrCA,cAAc,KAAK,OAAnB,GAA6B,kBAA7B,GAAkD,mBAD7C;;;AAGA,MAAMC,sBAAsB,GAAG,eAA/B;;;AAEA,MAAMC,uBAAuB,GAAIF,cAAD,IACrCA,cAAc,KAAK,KAAnB,GAA2B,mBAA3B,GAAiD,kBAD5C;;;AAGA,MAAMG,sBAAsB,GAAG,gBAA/B;;;AAEA,MAAMC,sBAAsB,GACjCJ,cADoC,IAElB;AAClB,SAAO;AACLK,IAAAA,UAAU,EAAE,6BADP;AAELC,IAAAA,SAAS,EAAEP,uBAAuB,CAACC,cAAD,CAF7B;AAGLO,IAAAA,SAAS,EAAE,QAHN;AAILC,IAAAA,SAAS,EAAE;AAJN,GAAP;AAMD,CATM;;;;AAWA,MAAMC,yBAAyB,GAAIT,cAAD,IAA4B;AACnE,SAAO;AACLU,IAAAA,QAAQ,EAAE;AAAEJ,MAAAA,SAAS,EAAEP,uBAAuB,CAACC,cAAD;AAApC,KADL;AAELW,IAAAA,OAAO,EAAE;AACPL,MAAAA,SAAS,EAAEL;AADJ,KAFJ;AAKLW,IAAAA,OAAO,EAAE;AACPN,MAAAA,SAAS,EAAEL;AADJ,KALJ;AAQLY,IAAAA,MAAM,EAAE;AAAEP,MAAAA,SAAS,EAAEP,uBAAuB,CAACC,cAAD;AAApC;AARH,GAAP;AAUD,CAXM;;;;AAaA,MAAMc,sBAAsB,GACjCd,cADoC,IAElB;AAClB,SAAO;AACLK,IAAAA,UAAU,EAAE,6BADP;AAELC,IAAAA,SAAS,EAAEJ,uBAAuB,CAACF,cAAD,CAF7B;AAGLO,IAAAA,SAAS,EAAE,QAHN;AAILC,IAAAA,SAAS,EAAE;AAJN,GAAP;AAMD,CATM;;;;AAUA,MAAMO,yBAAyB,GAAIf,cAAD,IAA4B;AACnE,SAAO;AACLU,IAAAA,QAAQ,EAAE;AAAEJ,MAAAA,SAAS,EAAEJ,uBAAuB,CAACF,cAAD;AAApC,KADL;AAELW,IAAAA,OAAO,EAAE;AACPL,MAAAA,SAAS,EAAEH;AADJ,KAFJ;AAKLS,IAAAA,OAAO,EAAE;AACPN,MAAAA,SAAS,EAAEH;AADJ,KALJ;AAQLU,IAAAA,MAAM,EAAE;AAAEP,MAAAA,SAAS,EAAEJ,uBAAuB,CAACF,cAAD;AAApC;AARH,GAAP;AAUD,CAXM","sourcesContent":["import { CSSProperties } from 'react';\n\nexport const transformLeftRigthClose = (anchorPosition: string) =>\n  anchorPosition === 'right' ? 'translateX(100%)' : 'translateX(-100%)';\n\nexport const transformLeftRigthOpen = 'translateX(0)';\n\nexport const transformTopBottomClose = (anchorPosition: string) =>\n  anchorPosition === 'top' ? 'translateY(-100%)' : 'translateY(100%)';\n\nexport const transformTopBottomOpen = 'translateY(0%)';\n\nexport const defaultStylesLeftRight = (\n  anchorPosition: string\n): CSSProperties => {\n  return {\n    transition: 'transform 300ms ease-in-out',\n    transform: transformLeftRigthClose(anchorPosition),\n    overflowX: 'hidden',\n    overflowY: 'auto',\n  };\n};\n\nexport const transitionStylesLeftRight = (anchorPosition: string) => {\n  return {\n    entering: { transform: transformLeftRigthClose(anchorPosition) },\n    entered: {\n      transform: transformLeftRigthOpen,\n    },\n    exiting: {\n      transform: transformLeftRigthOpen,\n    },\n    exited: { transform: transformLeftRigthClose(anchorPosition) },\n  };\n};\n\nexport const defaultStylesTopBottom = (\n  anchorPosition: string\n): CSSProperties => {\n  return {\n    transition: 'transform 300ms ease-in-out',\n    transform: transformTopBottomClose(anchorPosition),\n    overflowX: 'hidden',\n    overflowY: 'auto',\n  };\n};\nexport const transitionStylesTopBottom = (anchorPosition: string) => {\n  return {\n    entering: { transform: transformTopBottomClose(anchorPosition) },\n    entered: {\n      transform: transformTopBottomOpen,\n    },\n    exiting: {\n      transform: transformTopBottomOpen,\n    },\n    exited: { transform: transformTopBottomClose(anchorPosition) },\n  };\n};\n"],"file":"animations.js"}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { MostUsedType, OptionsType } from './types';
-export interface MenubarProps {
+export interface MenubarProps extends React.HTMLAttributes<HTMLDivElement> {
     options: OptionsType[];
     leftComponents?: React.ReactNode;
     rightComponents?: React.ReactNode;

package/dist/components/molecules/Menubar/Menubar.js

@@ -29,6 +29,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 const Menubar = ({
   leftComponents,
   rightComponents,
@@ -37,7 +39,8 @@ const Menubar = ({
   mostUsed,
   mostUsedLabel = 'Mais acessados',
   searchResultsLabel = 'Resultados da busca',
-  searchable = true
+  searchable = true,
+  ...rest
 }) => {
   const [search, setSearch] = _react.default.useState('');
 
@@ -57,7 +60,9 @@ const Menubar = ({
     setResults((0, _utils.filterAndTransform)(options, search));
   }, [search]);
 
-  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_styled.StyledMenuBar, null, _react.default.createElement(_styled.StyledMenuButton, {
+  return _react.default.createElement("div", _extends({
+    ref: ref => menuRef.current = ref
+  }, rest), _react.default.createElement(_styled.StyledMenuBar, null, _react.default.createElement(_styled.StyledMenuButton, {
     variant: "filled",
     color: "primary",
     onPress: toggleOpen
@@ -88,7 +93,6 @@ const Menubar = ({
     in: open,
     timeout: 250
   }, state => _react.default.createElement(_styled.StyledContainerOpenMenu, {
-    ref: ref => menuRef.current = ref,
     style: (0, _animations.getContainerOpenMenuStyles)(state)
   }, !search ? _react.default.createElement(_react.default.Fragment, null, mostUsed && _react.default.createElement(_MostUsed.MostUsed, {
     label: mostUsedLabel,

package/dist/components/molecules/Menubar/Menubar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/Menubar/Menubar.tsx"],"names":["Menubar","leftComponents","rightComponents","searchPlaceholder","options","mostUsed","mostUsedLabel","searchResultsLabel","searchable","search","setSearch","React","useState","results","setResults","input","setInput","open","setOpen","menuRef","toggleOpen","useCallback","state","useEffect","ref","current","map","result","title","category"],"mappings":"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","sourcesContent":["import React, { useRef } from 'react';\nimport { Icon, Text, useDebouncedState } from '@tecsinapse/react-core';\nimport { Transition } from 'react-transition-group';\nimport {\n  StyledIconInput,\n  StyledMenuBar,\n  StyledMenuButton,\n  StyledContainerOpenMenu,\n  StyledInput,\n  StyledInputContainer,\n  StyledSearchResultsContainer,\n  StyledSearchTextContainer,\n} from './styled';\nimport { MostUsedType, OptionsType } from './types';\nimport { MostUsed } from './MostUsed';\nimport { MenuBlock } from './MenuBlock';\nimport { SearchResultItem } from './SearchResultItem';\nimport { filterAndTransform } from './utils';\nimport {\n  getContainerOpenMenuStyles,\n  getInputContainerStyles,\n} from './animations';\nimport { useClickAwayListener } from '../../../hooks';\n\nexport interface MenubarProps {\n  options: OptionsType[];\n  leftComponents?: React.ReactNode;\n  rightComponents?: React.ReactNode;\n  /** Limited to first 4 elements */\n  mostUsed?: MostUsedType[];\n  mostUsedLabel?: string;\n  searchable?: boolean;\n  searchPlaceholder?: string;\n  searchResultsLabel?: string;\n}\n\nconst Menubar: React.FC<MenubarProps> = ({\n  leftComponents,\n  rightComponents,\n  searchPlaceholder = 'O quê você deseja buscar?',\n  options,\n  mostUsed,\n  mostUsedLabel = 'Mais acessados',\n  searchResultsLabel = 'Resultados da busca',\n  searchable = true,\n}) => {\n  const [search, setSearch] = React.useState<string>('');\n  const [results, setResults] = React.useState<MostUsedType[]>([]);\n  const [input, setInput] = useDebouncedState<string>('', setSearch);\n  const [open, setOpen] = React.useState<boolean>(false);\n  const menuRef = useRef<HTMLDivElement | null>(null);\n  useClickAwayListener(menuRef, setOpen);\n\n  const toggleOpen = React.useCallback(() => setOpen(state => !state), [\n    setOpen,\n  ]);\n\n  React.useEffect(() => {\n    if (search === '') return;\n    setResults(filterAndTransform(options, search));\n  }, [search]);\n\n  return (\n    <>\n      <StyledMenuBar>\n        <StyledMenuButton variant=\"filled\" color=\"primary\" onPress={toggleOpen}>\n          {!open ? (\n            <Icon\n              size=\"deca\"\n              name=\"menu\"\n              type=\"material-community\"\n              fontColor=\"light\"\n            />\n          ) : (\n            <Icon\n              size=\"deca\"\n              name=\"close\"\n              type=\"material-community\"\n              fontColor=\"light\"\n            />\n          )}\n        </StyledMenuButton>\n        {leftComponents}\n        <Transition in={open} timeout={250}>\n          {state => (\n            <StyledInputContainer style={getInputContainerStyles(state)}>\n              {searchable && (\n                <StyledInput\n                  placeholder={searchPlaceholder}\n                  leftComponent={\n                    <StyledIconInput>\n                      <Icon name=\"magnify\" type=\"material-community\" />\n                    </StyledIconInput>\n                  }\n                  value={input}\n                  onChange={setInput}\n                />\n              )}\n            </StyledInputContainer>\n          )}\n        </Transition>\n        {rightComponents}\n      </StyledMenuBar>\n      <Transition in={open} timeout={250}>\n        {state => (\n          <StyledContainerOpenMenu\n            ref={ref => (menuRef.current = ref)}\n            style={getContainerOpenMenuStyles(state)}\n          >\n            {!search ? (\n              <>\n                {mostUsed && (\n                  <MostUsed\n                    label={mostUsedLabel}\n                    data={mostUsed}\n                    toggle={toggleOpen}\n                  />\n                )}\n                <MenuBlock options={options} toggle={toggleOpen} />\n              </>\n            ) : (\n              <StyledSearchResultsContainer>\n                <StyledSearchTextContainer>\n                  <Text fontWeight=\"bold\">{searchResultsLabel}</Text>\n                </StyledSearchTextContainer>\n                {results.map(result => (\n                  <SearchResultItem\n                    key={`${result.title}-${result.category}`}\n                    data={result}\n                    searchTerm={search}\n                    toggle={toggleOpen}\n                  />\n                ))}\n              </StyledSearchResultsContainer>\n            )}\n          </StyledContainerOpenMenu>\n        )}\n      </Transition>\n    </>\n  );\n};\n\nexport default Menubar;\n"],"file":"Menubar.js"}
+{"version":3,"sources":["../../../../src/components/molecules/Menubar/Menubar.tsx"],"names":["Menubar","leftComponents","rightComponents","searchPlaceholder","options","mostUsed","mostUsedLabel","searchResultsLabel","searchable","rest","search","setSearch","React","useState","results","setResults","input","setInput","open","setOpen","menuRef","toggleOpen","useCallback","state","useEffect","ref","current","map","result","title","category"],"mappings":"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","sourcesContent":["import React, { useRef } from 'react';\nimport { Icon, Text, useDebouncedState } from '@tecsinapse/react-core';\nimport { Transition } from 'react-transition-group';\nimport {\n  StyledIconInput,\n  StyledMenuBar,\n  StyledMenuButton,\n  StyledContainerOpenMenu,\n  StyledInput,\n  StyledInputContainer,\n  StyledSearchResultsContainer,\n  StyledSearchTextContainer,\n} from './styled';\nimport { MostUsedType, OptionsType } from './types';\nimport { MostUsed } from './MostUsed';\nimport { MenuBlock } from './MenuBlock';\nimport { SearchResultItem } from './SearchResultItem';\nimport { filterAndTransform } from './utils';\nimport {\n  getContainerOpenMenuStyles,\n  getInputContainerStyles,\n} from './animations';\nimport { useClickAwayListener } from '../../../hooks';\n\nexport interface MenubarProps extends React.HTMLAttributes<HTMLDivElement> {\n  options: OptionsType[];\n  leftComponents?: React.ReactNode;\n  rightComponents?: React.ReactNode;\n  /** Limited to first 4 elements */\n  mostUsed?: MostUsedType[];\n  mostUsedLabel?: string;\n  searchable?: boolean;\n  searchPlaceholder?: string;\n  searchResultsLabel?: string;\n}\n\nconst Menubar: React.FC<MenubarProps> = ({\n  leftComponents,\n  rightComponents,\n  searchPlaceholder = 'O quê você deseja buscar?',\n  options,\n  mostUsed,\n  mostUsedLabel = 'Mais acessados',\n  searchResultsLabel = 'Resultados da busca',\n  searchable = true,\n  ...rest\n}) => {\n  const [search, setSearch] = React.useState<string>('');\n  const [results, setResults] = React.useState<MostUsedType[]>([]);\n  const [input, setInput] = useDebouncedState<string>('', setSearch);\n  const [open, setOpen] = React.useState<boolean>(false);\n  const menuRef = useRef<HTMLDivElement | null>(null);\n  useClickAwayListener(menuRef, setOpen);\n\n  const toggleOpen = React.useCallback(() => setOpen(state => !state), [\n    setOpen,\n  ]);\n\n  React.useEffect(() => {\n    if (search === '') return;\n    setResults(filterAndTransform(options, search));\n  }, [search]);\n\n  return (\n    <div ref={ref => (menuRef.current = ref)} {...rest}>\n      <StyledMenuBar>\n        <StyledMenuButton variant=\"filled\" color=\"primary\" onPress={toggleOpen}>\n          {!open ? (\n            <Icon\n              size=\"deca\"\n              name=\"menu\"\n              type=\"material-community\"\n              fontColor=\"light\"\n            />\n          ) : (\n            <Icon\n              size=\"deca\"\n              name=\"close\"\n              type=\"material-community\"\n              fontColor=\"light\"\n            />\n          )}\n        </StyledMenuButton>\n        {leftComponents}\n        <Transition in={open} timeout={250}>\n          {state => (\n            <StyledInputContainer style={getInputContainerStyles(state)}>\n              {searchable && (\n                <StyledInput\n                  placeholder={searchPlaceholder}\n                  leftComponent={\n                    <StyledIconInput>\n                      <Icon name=\"magnify\" type=\"material-community\" />\n                    </StyledIconInput>\n                  }\n                  value={input}\n                  onChange={setInput}\n                />\n              )}\n            </StyledInputContainer>\n          )}\n        </Transition>\n        {rightComponents}\n      </StyledMenuBar>\n      <Transition in={open} timeout={250}>\n        {state => (\n          <StyledContainerOpenMenu style={getContainerOpenMenuStyles(state)}>\n            {!search ? (\n              <>\n                {mostUsed && (\n                  <MostUsed\n                    label={mostUsedLabel}\n                    data={mostUsed}\n                    toggle={toggleOpen}\n                  />\n                )}\n                <MenuBlock options={options} toggle={toggleOpen} />\n              </>\n            ) : (\n              <StyledSearchResultsContainer>\n                <StyledSearchTextContainer>\n                  <Text fontWeight=\"bold\">{searchResultsLabel}</Text>\n                </StyledSearchTextContainer>\n                {results.map(result => (\n                  <SearchResultItem\n                    key={`${result.title}-${result.category}`}\n                    data={result}\n                    searchTerm={search}\n                    toggle={toggleOpen}\n                  />\n                ))}\n              </StyledSearchResultsContainer>\n            )}\n          </StyledContainerOpenMenu>\n        )}\n      </Transition>\n    </div>\n  );\n};\n\nexport default Menubar;\n"],"file":"Menubar.js"}

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

@@ -1,7 +1,5 @@
-import { CSSProperties } from 'react';
 import { SelectProps } from '../Select';
-declare const Dropdown: <Data, Type extends "single" | "multi">({ options, onSearch, type, hideSearchBar, onSelect, value, keyExtractor, labelExtractor, setDropDownVisible, style, }: SelectProps<Data, Type> & {
+declare const Dropdown: <Data, Type extends "single" | "multi">({ options, onSearch, type, hideSearchBar, onSelect, value, keyExtractor, labelExtractor, setDropDownVisible, style, anchor, }: SelectProps<Data, Type> & {
     setDropDownVisible: (t: boolean) => void;
-    style: CSSProperties;
 }) => JSX.Element;
 export default Dropdown;

package/dist/components/molecules/Select/Dropdown/Dropdown.js

@@ -27,7 +27,8 @@ const Dropdown = ({
   keyExtractor,
   labelExtractor,
   setDropDownVisible,
-  style
+  style,
+  anchor
 }) => {
   const [searchArg, setSearchArg] = (0, _reactCore.useDebouncedState)('', onSearch);
   const lengthOptions = options.length;
@@ -44,7 +45,8 @@ const Dropdown = ({
 
   return _react.default.createElement(_styled.StyledContainerDropdown, {
     lengthOptions: lengthOptions,
-    style: style
+    style: style,
+    anchor: anchor
   }, type === 'multi' && _react.default.createElement(_styled.StyledContainerCheckAll, {
     onClick: hideSearchBar ? onClickCheckAll : undefined
   }, _react.default.createElement(_reactCore.Checkbox, {
@@ -67,8 +69,8 @@ const Dropdown = ({
     onChange: text => setSearchArg(text)
   })) : _react.default.createElement(_styled.StyledContainerTextLabel, null, _react.default.createElement(_reactCore.Text, {
     fontWeight: "bold"
-  }, _react.default.createElement(_styled.StyledSpan, null, "Selecionar todos")))), _react.default.createElement(_styled.StyledTest, {
-    lenghtOptions: options.length
+  }, _react.default.createElement(_styled.StyledSpan, null, "Selecionar todos")))), _react.default.createElement(_styled.OptionsContainer, {
+    lengthOptions: options.length
   }, options.map((item, index) => _react.default.createElement(_SelectItem.ItemSelect, {
     type: type,
     key: index,

package/dist/components/molecules/Select/Dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/molecules/Select/Dropdown/Dropdown.tsx"],"names":["Dropdown","options","onSearch","type","hideSearchBar","onSelect","value","keyExtractor","labelExtractor","setDropDownVisible","style","searchArg","setSearchArg","lengthOptions","length","checkedAll","setCheckedAll","React","useState","onClickCheckAll","items","map","option","aux","auxArray","undefined","width","marginHorizontal","text","item","index"],"mappings":"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","sourcesContent":["import React, { CSSProperties } from 'react';\nimport {\n  Checkbox,\n  Text,\n  Icon,\n  useDebouncedState,\n} from '@tecsinapse/react-core';\nimport { Input } from '../../../atoms/Input';\nimport { ItemSelect } from '../SelectItem';\nimport { SelectProps } from '../Select';\nimport {\n  SearchBarContainer,\n  StyledContainerCheckAll,\n  StyledContainerDropdown,\n  StyledContainerTextLabel,\n  StyledSpan,\n  StyledTest,\n} from './styled';\n\nconst Dropdown = <Data, Type extends 'single' | 'multi'>({\n  options,\n  onSearch,\n  type,\n  hideSearchBar,\n  onSelect,\n  value,\n  keyExtractor,\n  labelExtractor,\n  setDropDownVisible,\n  style,\n}: SelectProps<Data, Type> & {\n  setDropDownVisible: (t: boolean) => void;\n  style: CSSProperties;\n}): JSX.Element => {\n  const [searchArg, setSearchArg] = useDebouncedState<string>('', onSearch);\n  const lengthOptions = options.length;\n\n  const [checkedAll, setCheckedAll] = React.useState<boolean>(\n    type === 'multi' && (value as Data[])?.length === lengthOptions\n  );\n\n  const onClickCheckAll = () => {\n    const items = options.map(option => option);\n    setCheckedAll(!checkedAll);\n    const aux = !checkedAll;\n    type OnSelectArg = Parameters<typeof onSelect>[0];\n    const auxArray: Data[] = [];\n    !aux ? onSelect(auxArray as OnSelectArg) : onSelect(items as OnSelectArg);\n  };\n\n  return (\n    <StyledContainerDropdown lengthOptions={lengthOptions} style={style}>\n      {type === 'multi' && (\n        <StyledContainerCheckAll\n          onClick={hideSearchBar ? onClickCheckAll : undefined}\n        >\n          <Checkbox checked={checkedAll} onChange={onClickCheckAll} />\n          {!hideSearchBar ? (\n            <SearchBarContainer>\n              <Input\n                style={{ width: '100%' }}\n                placeholder=\"Busque a opção desejada\"\n                value={searchArg}\n                leftComponent={\n                  <Icon\n                    name=\"magnify\"\n                    type=\"material-community\"\n                    size=\"centi\"\n                    style={{ marginHorizontal: 12 }}\n                  />\n                }\n                onChange={text => setSearchArg(text)}\n              />\n            </SearchBarContainer>\n          ) : (\n            <StyledContainerTextLabel>\n              <Text fontWeight=\"bold\">\n                <StyledSpan>Selecionar todos</StyledSpan>\n              </Text>\n            </StyledContainerTextLabel>\n          )}\n        </StyledContainerCheckAll>\n      )}\n      <StyledTest lenghtOptions={options.length}>\n        {options.map((item, index) => (\n          <ItemSelect\n            type={type}\n            key={index}\n            item={item}\n            onSelect={onSelect}\n            value={value}\n            keyExtractor={keyExtractor}\n            index={index}\n            labelExtractor={labelExtractor}\n            setDropDownVisible={setDropDownVisible}\n            checkedAll={checkedAll}\n            setCheckedAll={setCheckedAll}\n            lenghtOptions={options.length}\n          />\n        ))}\n      </StyledTest>\n    </StyledContainerDropdown>\n  );\n};\n\nexport default Dropdown;\n"],"file":"Dropdown.js"}
+{"version":3,"sources":["../../../../../src/components/molecules/Select/Dropdown/Dropdown.tsx"],"names":["Dropdown","options","onSearch","type","hideSearchBar","onSelect","value","keyExtractor","labelExtractor","setDropDownVisible","style","anchor","searchArg","setSearchArg","lengthOptions","length","checkedAll","setCheckedAll","React","useState","onClickCheckAll","items","map","option","aux","auxArray","undefined","width","marginHorizontal","text","item","index"],"mappings":";;;;;;;AAAA;;AACA;;AAMA;;AACA;;AAEA;;;;AASA,MAAMA,QAAQ,GAAG,CAAwC;AACvDC,EAAAA,OADuD;AAEvDC,EAAAA,QAFuD;AAGvDC,EAAAA,IAHuD;AAIvDC,EAAAA,aAJuD;AAKvDC,EAAAA,QALuD;AAMvDC,EAAAA,KANuD;AAOvDC,EAAAA,YAPuD;AAQvDC,EAAAA,cARuD;AASvDC,EAAAA,kBATuD;AAUvDC,EAAAA,KAVuD;AAWvDC,EAAAA;AAXuD,CAAxC,KAcE;AACjB,QAAM,CAACC,SAAD,EAAYC,YAAZ,IAA4B,kCAA0B,EAA1B,EAA8BX,QAA9B,CAAlC;AACA,QAAMY,aAAa,GAAGb,OAAO,CAACc,MAA9B;;AAEA,QAAM,CAACC,UAAD,EAAaC,aAAb,IAA8BC,eAAMC,QAAN,CAClChB,IAAI,KAAK,OAAT,IAAoB,CAACG,KAAD,aAACA,KAAD,uBAACA,KAAD,CAAmBS,MAAnB,MAA8BD,aADhB,CAApC;;AAIA,QAAMM,eAAe,GAAG,MAAM;AAC5B,UAAMC,KAAK,GAAGpB,OAAO,CAACqB,GAAR,CAAYC,MAAM,IAAIA,MAAtB,CAAd;AACAN,IAAAA,aAAa,CAAC,CAACD,UAAF,CAAb;AACA,UAAMQ,GAAG,GAAG,CAACR,UAAb;AAEA,UAAMS,QAAgB,GAAG,EAAzB;AACA,KAACD,GAAD,GAAOnB,QAAQ,CAACoB,QAAD,CAAf,GAA2CpB,QAAQ,CAACgB,KAAD,CAAnD;AACD,GAPD;;AASA,SACE,6BAAC,+BAAD;AACE,IAAA,aAAa,EAAEP,aADjB;AAEE,IAAA,KAAK,EAAEJ,KAFT;AAGE,IAAA,MAAM,EAAEC;AAHV,KAKGR,IAAI,KAAK,OAAT,IACC,6BAAC,+BAAD;AACE,IAAA,OAAO,EAAEC,aAAa,GAAGgB,eAAH,GAAqBM;AAD7C,KAGE,6BAAC,mBAAD;AAAU,IAAA,OAAO,EAAEV,UAAnB;AAA+B,IAAA,QAAQ,EAAEI;AAAzC,IAHF,EAIG,CAAChB,aAAD,GACC,6BAAC,0BAAD,QACE,6BAAC,YAAD;AACE,IAAA,KAAK,EAAE;AAAEuB,MAAAA,KAAK,EAAE;AAAT,KADT;AAEE,IAAA,WAAW,EAAC,+BAFd;AAGE,IAAA,KAAK,EAAEf,SAHT;AAIE,IAAA,aAAa,EACX,6BAAC,eAAD;AACE,MAAA,IAAI,EAAC,SADP;AAEE,MAAA,IAAI,EAAC,oBAFP;AAGE,MAAA,IAAI,EAAC,OAHP;AAIE,MAAA,KAAK,EAAE;AAAEgB,QAAAA,gBAAgB,EAAE;AAApB;AAJT,MALJ;AAYE,IAAA,QAAQ,EAAEC,IAAI,IAAIhB,YAAY,CAACgB,IAAD;AAZhC,IADF,CADD,GAkBC,6BAAC,gCAAD,QACE,6BAAC,eAAD;AAAM,IAAA,UAAU,EAAC;AAAjB,KACE,6BAAC,kBAAD,2BADF,CADF,CAtBJ,CANJ,EAoCE,6BAAC,wBAAD;AAAkB,IAAA,aAAa,EAAE5B,OAAO,CAACc;AAAzC,KACGd,OAAO,CAACqB,GAAR,CAAY,CAACQ,IAAD,EAAOC,KAAP,KACX,6BAAC,sBAAD;AACE,IAAA,IAAI,EAAE5B,IADR;AAEE,IAAA,GAAG,EAAE4B,KAFP;AAGE,IAAA,IAAI,EAAED,IAHR;AAIE,IAAA,QAAQ,EAAEzB,QAJZ;AAKE,IAAA,KAAK,EAAEC,KALT;AAME,IAAA,YAAY,EAAEC,YANhB;AAOE,IAAA,KAAK,EAAEwB,KAPT;AAQE,IAAA,cAAc,EAAEvB,cARlB;AASE,IAAA,kBAAkB,EAAEC,kBATtB;AAUE,IAAA,UAAU,EAAEO,UAVd;AAWE,IAAA,aAAa,EAAEC,aAXjB;AAYE,IAAA,aAAa,EAAEhB,OAAO,CAACc;AAZzB,IADD,CADH,CApCF,CADF;AAyDD,CAxFD;;eA0Fef,Q","sourcesContent":["import React from 'react';\nimport {\n  Checkbox,\n  Text,\n  Icon,\n  useDebouncedState,\n} from '@tecsinapse/react-core';\nimport { Input } from '../../../atoms/Input';\nimport { ItemSelect } from '../SelectItem';\nimport { SelectProps } from '../Select';\nimport {\n  SearchBarContainer,\n  StyledContainerCheckAll,\n  StyledContainerDropdown,\n  StyledContainerTextLabel,\n  StyledSpan,\n  OptionsContainer,\n} from './styled';\n\nconst Dropdown = <Data, Type extends 'single' | 'multi'>({\n  options,\n  onSearch,\n  type,\n  hideSearchBar,\n  onSelect,\n  value,\n  keyExtractor,\n  labelExtractor,\n  setDropDownVisible,\n  style,\n  anchor,\n}: SelectProps<Data, Type> & {\n  setDropDownVisible: (t: boolean) => void;\n}): JSX.Element => {\n  const [searchArg, setSearchArg] = useDebouncedState<string>('', onSearch);\n  const lengthOptions = options.length;\n\n  const [checkedAll, setCheckedAll] = React.useState<boolean>(\n    type === 'multi' && (value as Data[])?.length === lengthOptions\n  );\n\n  const onClickCheckAll = () => {\n    const items = options.map(option => option);\n    setCheckedAll(!checkedAll);\n    const aux = !checkedAll;\n    type OnSelectArg = Parameters<typeof onSelect>[0];\n    const auxArray: Data[] = [];\n    !aux ? onSelect(auxArray as OnSelectArg) : onSelect(items as OnSelectArg);\n  };\n\n  return (\n    <StyledContainerDropdown\n      lengthOptions={lengthOptions}\n      style={style}\n      anchor={anchor}\n    >\n      {type === 'multi' && (\n        <StyledContainerCheckAll\n          onClick={hideSearchBar ? onClickCheckAll : undefined}\n        >\n          <Checkbox checked={checkedAll} onChange={onClickCheckAll} />\n          {!hideSearchBar ? (\n            <SearchBarContainer>\n              <Input\n                style={{ width: '100%' }}\n                placeholder=\"Busque a opção desejada\"\n                value={searchArg}\n                leftComponent={\n                  <Icon\n                    name=\"magnify\"\n                    type=\"material-community\"\n                    size=\"centi\"\n                    style={{ marginHorizontal: 12 }}\n                  />\n                }\n                onChange={text => setSearchArg(text)}\n              />\n            </SearchBarContainer>\n          ) : (\n            <StyledContainerTextLabel>\n              <Text fontWeight=\"bold\">\n                <StyledSpan>Selecionar todos</StyledSpan>\n              </Text>\n            </StyledContainerTextLabel>\n          )}\n        </StyledContainerCheckAll>\n      )}\n      <OptionsContainer lengthOptions={options.length}>\n        {options.map((item, index) => (\n          <ItemSelect\n            type={type}\n            key={index}\n            item={item}\n            onSelect={onSelect}\n            value={value}\n            keyExtractor={keyExtractor}\n            index={index}\n            labelExtractor={labelExtractor}\n            setDropDownVisible={setDropDownVisible}\n            checkedAll={checkedAll}\n            setCheckedAll={setCheckedAll}\n            lenghtOptions={options.length}\n          />\n        ))}\n      </OptionsContainer>\n    </StyledContainerDropdown>\n  );\n};\n\nexport default Dropdown;\n"],"file":"Dropdown.js"}

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

@@ -3,7 +3,7 @@ export declare const StyledContainerDropdown: import("@emotion/styled").StyledCo
     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 StyledTest: import("@emotion/styled").StyledComponent<{
+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>, {}>;

package/dist/components/molecules/Select/Dropdown/styled.js

@@ -3,14 +3,32 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledContainerTextLabel = exports.StyledSpan = exports.StyledContainerCheckAll = exports.SearchBarContainer = exports.StyledTest = exports.StyledContainerDropdown = void 0;
+exports.StyledContainerTextLabel = exports.StyledSpan = exports.StyledContainerCheckAll = exports.SearchBarContainer = exports.OptionsContainer = exports.StyledContainerDropdown = void 0;
 
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _reactCore = require("@tecsinapse/react-core");
 
+var _react = require("@emotion/react");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+const anchorBottom = ({
+  theme,
+  anchor
+}) => anchor === 'bottom' && (0, _react.css)`
+    margin-top: ${theme.spacing.centi};
+    top: 100%;
+  `;
+
+const anchorTop = ({
+  theme,
+  anchor
+}) => anchor === 'top' && (0, _react.css)`
+    margin-bottom: ${theme.spacing.centi};
+    bottom: 100%;
+  `;
+
 const StyledContainerDropdown = (0, _styled.default)('div')`
   width: 100%;
   background-color: ${({
@@ -19,14 +37,10 @@ const StyledContainerDropdown = (0, _styled.default)('div')`
   border-radius: ${({
   theme
 }) => theme.borderRadius.mili};
-  box-shadow: 0px 2px 8px
+  box-shadow: 0 2px 8px
     ${({
   theme
 }) => (0, _reactCore.hex2rgba)(theme.miscellaneous.shadow, 0.08)};
-  margin-top: ${({
-  theme
-}) => theme.spacing.centi};
-  top: 100%;
   position: absolute;
   padding-top: ${({
   theme,
@@ -38,14 +52,16 @@ const StyledContainerDropdown = (0, _styled.default)('div')`
   z-index: ${({
   theme
 }) => theme.zIndex.select};
+  ${anchorTop}
+  ${anchorBottom}
 `;
 exports.StyledContainerDropdown = StyledContainerDropdown;
-const StyledTest = (0, _styled.default)('div')`
+const OptionsContainer = (0, _styled.default)('div')`
   max-height: 250px;
   top: 100%;
   overflow-y: ${({
-  lenghtOptions = 0
-}) => lenghtOptions > 5 ? 'scroll' : 'hidden'};
+  lengthOptions = 0
+}) => lengthOptions > 5 ? 'scroll' : 'hidden'};
   ::-webkit-scrollbar {
     width: 8px;
   }
@@ -63,7 +79,7 @@ const StyledTest = (0, _styled.default)('div')`
 }) => theme.color.primary.light};
   },
 `;
-exports.StyledTest = StyledTest;
+exports.OptionsContainer = OptionsContainer;
 const SearchBarContainer = (0, _styled.default)('div')`
   padding-left: ${({
   theme

package/dist/components/molecules/Select/Dropdown/styled.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/molecules/Select/Dropdown/styled.ts"],"names":["StyledContainerDropdown","theme","miscellaneous","surfaceColor","borderRadius","mili","shadow","spacing","centi","hideSearchBar","deca","zIndex","select","StyledTest","lenghtOptions","color","secondary","light","primary","SearchBarContainer","StyledContainerCheckAll","xlight","medium","StyledSpan","StyledContainerTextLabel"],"mappings":"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","sourcesContent":["import styled from '@emotion/styled';\nimport { hex2rgba, StyleProps } from '@tecsinapse/react-core';\nimport { SelectProps } from '../Select';\n\nexport const StyledContainerDropdown = styled('div')<\n  Partial<StyleProps & SelectProps<any, any> & { lengthOptions: number }>\n>`\n  width: 100%;\n  background-color: ${({ theme }: StyleProps) =>\n    theme.miscellaneous.surfaceColor};\n  border-radius: ${({ theme }: StyleProps) => theme.borderRadius.mili};\n  box-shadow: 0px 2px 8px\n    ${({ theme }: StyleProps) => hex2rgba(theme.miscellaneous.shadow, 0.08)};\n  margin-top: ${({ theme }: StyleProps) => theme.spacing.centi};\n  top: 100%;\n  position: absolute;\n  padding-top: ${({\n    theme,\n    hideSearchBar,\n  }: StyleProps & Partial<SelectProps<any, any>>) =>\n    !hideSearchBar ? `${theme.spacing.deca}` : '0px'};\n  padding-bottom: ${({ theme }: StyleProps) => theme.spacing.mili};\n  z-index: ${({ theme }: StyleProps) => theme.zIndex.select};\n`;\n\nexport const StyledTest = styled('div')<\n  Partial<StyleProps & SelectProps<any, any> & { lenghtOptions: number }>\n>`\n  max-height: 250px;\n  top: 100%;\n  overflow-y: ${({\n    lenghtOptions = 0,\n  }: Partial<{ lenghtOptions: number } & StyleProps>) =>\n    lenghtOptions > 5 ? 'scroll' : 'hidden'};\n  ::-webkit-scrollbar {\n    width: 8px;\n  }\n  ::-webkit-scrollbar-thumb {\n    border-radius: ${({ theme }: StyleProps) => theme.borderRadius.centi};\n    background-color: ${({ theme }: StyleProps) => theme.color.secondary.light};\n  }\n  ::-webkit-scrollbar-thumb:hover {\n    background-color: ${({ theme }: StyleProps) => theme.color.primary.light};\n  },\n`;\n\nexport const SearchBarContainer = styled('div')<Partial<StyleProps>>`\n  padding-left: ${({ theme }) => theme.spacing.mili};\n  width: 100%;\n`;\n\nexport const StyledContainerCheckAll = styled('div')<Partial<StyleProps>>`\n  padding: ${({ theme }) => `${theme.spacing.mili} ${theme.spacing.deca}`};\n  flex-direction: row;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  cursor: pointer;\n  &:hover {\n    background-color: ${({ theme }) => theme.color.primary.xlight};\n  }\n  &:hover span {\n    color: ${({ theme }) => theme.color.primary.medium};\n  }\n`;\n\nexport const StyledSpan = styled('span')<Partial<StyleProps>>`\n  color: ${({ theme }) => theme.color.primary.medium};\n  padding: ${({ theme }) => `${theme.spacing.mili} 0px`};\n`;\n\nexport const StyledContainerTextLabel = styled('div')<Partial<StyleProps>>`\n  padding-left: ${({ theme }) => theme.spacing.mili};\n  width: 100%;\n  display: flex;\n  overflow: hidden;\n`;\n"],"file":"styled.js"}
+{"version":3,"sources":["../../../../../src/components/molecules/Select/Dropdown/styled.ts"],"names":["anchorBottom","theme","anchor","spacing","centi","anchorTop","StyledContainerDropdown","miscellaneous","surfaceColor","borderRadius","mili","shadow","hideSearchBar","deca","zIndex","select","OptionsContainer","lengthOptions","color","secondary","light","primary","SearchBarContainer","StyledContainerCheckAll","xlight","medium","StyledSpan","StyledContainerTextLabel"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;AAMA,MAAMA,YAAY,GAAG,CAAC;AACpBC,EAAAA,KADoB;AAEpBC,EAAAA;AAFoB,CAAD,KAInBA,MAAM,KAAK,QAAX,IACA,eAAI;AACN,kBAAkBD,KAAK,CAACE,OAAN,CAAcC,KAAM;AACtC;AACA,GARA;;AAUA,MAAMC,SAAS,GAAG,CAAC;AACjBJ,EAAAA,KADiB;AAEjBC,EAAAA;AAFiB,CAAD,KAIhBA,MAAM,KAAK,KAAX,IACA,eAAI;AACN,qBAAqBD,KAAK,CAACE,OAAN,CAAcC,KAAM;AACzC;AACA,GARA;;AAUO,MAAME,uBAAuB,GAAG,qBAAO,KAAP,CAA6B;AACpE;AACA,sBAAsB,CAAC;AAAEL,EAAAA;AAAF,CAAD,KAClBA,KAAK,CAACM,aAAN,CAAoBC,YAAa;AACrC,mBAAmB,CAAC;AAAEP,EAAAA;AAAF,CAAD,KAA2BA,KAAK,CAACQ,YAAN,CAAmBC,IAAK;AACtE;AACA,MAAM,CAAC;AAAET,EAAAA;AAAF,CAAD,KAA2B,yBAASA,KAAK,CAACM,aAAN,CAAoBI,MAA7B,EAAqC,IAArC,CAA2C;AAC5E;AACA,iBAAiB,CAAC;AACdV,EAAAA,KADc;AAEdW,EAAAA;AAFc,CAAD,KAIb,CAACA,aAAD,GAAkB,GAAEX,KAAK,CAACE,OAAN,CAAcU,IAAK,EAAvC,GAA2C,KAAM;AACrD,oBAAoB,CAAC;AAAEZ,EAAAA;AAAF,CAAD,KAA2BA,KAAK,CAACE,OAAN,CAAcO,IAAK;AAClE,aAAa,CAAC;AAAET,EAAAA;AAAF,CAAD,KAA2BA,KAAK,CAACa,MAAN,CAAaC,MAAO;AAC5D,IAAIV,SAAU;AACd,IAAIL,YAAa;AACjB,CAjBO;;AAmBA,MAAMgB,gBAAgB,GAAG,qBAAO,KAAP,CAA6B;AAC7D;AACA;AACA,gBAAgB,CAAC;AAAEC,EAAAA,aAAa,GAAG;AAAlB,CAAD,KACZA,aAAa,GAAG,CAAhB,GAAoB,QAApB,GAA+B,QAAS;AAC5C;AACA;AACA;AACA;AACA,qBAAqB,CAAC;AAAEhB,EAAAA;AAAF,CAAD,KAA2BA,KAAK,CAACQ,YAAN,CAAmBL,KAAM;AACzE,wBAAwB,CAAC;AAAEH,EAAAA;AAAF,CAAD,KAA2BA,KAAK,CAACiB,KAAN,CAAYC,SAAZ,CAAsBC,KAAM;AAC/E;AACA;AACA,wBAAwB,CAAC;AAAEnB,EAAAA;AAAF,CAAD,KAA2BA,KAAK,CAACiB,KAAN,CAAYG,OAAZ,CAAoBD,KAAM;AAC7E;AACA,CAfO;;AAiBA,MAAME,kBAAkB,GAAG,qBAAO,KAAP,CAAmC;AACrE,kBAAkB,CAAC;AAAErB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACE,OAAN,CAAcO,IAAK;AACpD;AACA,CAHO;;AAKA,MAAMa,uBAAuB,GAAG,qBAAO,KAAP,CAAmC;AAC1E,aAAa,CAAC;AAAEtB,EAAAA;AAAF,CAAD,KAAgB,GAAEA,KAAK,CAACE,OAAN,CAAcO,IAAK,IAAGT,KAAK,CAACE,OAAN,CAAcU,IAAK,EAAE;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;AAAEZ,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACiB,KAAN,CAAYG,OAAZ,CAAoBG,MAAO;AAClE;AACA;AACA,aAAa,CAAC;AAAEvB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACiB,KAAN,CAAYG,OAAZ,CAAoBI,MAAO;AACvD;AACA,CAbO;;AAeA,MAAMC,UAAU,GAAG,qBAAO,MAAP,CAAoC;AAC9D,WAAW,CAAC;AAAEzB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACiB,KAAN,CAAYG,OAAZ,CAAoBI,MAAO;AACrD,aAAa,CAAC;AAAExB,EAAAA;AAAF,CAAD,KAAgB,GAAEA,KAAK,CAACE,OAAN,CAAcO,IAAK,MAAM;AACxD,CAHO;;AAKA,MAAMiB,wBAAwB,GAAG,qBAAO,KAAP,CAAmC;AAC3E,kBAAkB,CAAC;AAAE1B,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACE,OAAN,CAAcO,IAAK;AACpD;AACA;AACA;AACA,CALO","sourcesContent":["import styled from '@emotion/styled';\nimport { hex2rgba, StyleProps } from '@tecsinapse/react-core';\nimport { SelectProps } from '../Select';\nimport { css } from '@emotion/react';\n\ntype InjectedProps = Partial<\n  StyleProps & SelectProps<any, any> & { lengthOptions: number }\n>;\n\nconst anchorBottom = ({\n  theme,\n  anchor,\n}: StyleProps & Omit<InjectedProps, 'theme'>) =>\n  anchor === 'bottom' &&\n  css`\n    margin-top: ${theme.spacing.centi};\n    top: 100%;\n  `;\n\nconst anchorTop = ({\n  theme,\n  anchor,\n}: StyleProps & Omit<InjectedProps, 'theme'>) =>\n  anchor === 'top' &&\n  css`\n    margin-bottom: ${theme.spacing.centi};\n    bottom: 100%;\n  `;\n\nexport const StyledContainerDropdown = styled('div')<InjectedProps>`\n  width: 100%;\n  background-color: ${({ theme }: StyleProps) =>\n    theme.miscellaneous.surfaceColor};\n  border-radius: ${({ theme }: StyleProps) => theme.borderRadius.mili};\n  box-shadow: 0 2px 8px\n    ${({ theme }: StyleProps) => hex2rgba(theme.miscellaneous.shadow, 0.08)};\n  position: absolute;\n  padding-top: ${({\n    theme,\n    hideSearchBar,\n  }: StyleProps & Partial<SelectProps<any, any>>) =>\n    !hideSearchBar ? `${theme.spacing.deca}` : '0px'};\n  padding-bottom: ${({ theme }: StyleProps) => theme.spacing.mili};\n  z-index: ${({ theme }: StyleProps) => theme.zIndex.select};\n  ${anchorTop}\n  ${anchorBottom}\n`;\n\nexport const OptionsContainer = styled('div')<InjectedProps>`\n  max-height: 250px;\n  top: 100%;\n  overflow-y: ${({ lengthOptions = 0 }: InjectedProps) =>\n    lengthOptions > 5 ? 'scroll' : 'hidden'};\n  ::-webkit-scrollbar {\n    width: 8px;\n  }\n  ::-webkit-scrollbar-thumb {\n    border-radius: ${({ theme }: StyleProps) => theme.borderRadius.centi};\n    background-color: ${({ theme }: StyleProps) => theme.color.secondary.light};\n  }\n  ::-webkit-scrollbar-thumb:hover {\n    background-color: ${({ theme }: StyleProps) => theme.color.primary.light};\n  },\n`;\n\nexport const SearchBarContainer = styled('div')<Partial<StyleProps>>`\n  padding-left: ${({ theme }) => theme.spacing.mili};\n  width: 100%;\n`;\n\nexport const StyledContainerCheckAll = styled('div')<Partial<StyleProps>>`\n  padding: ${({ theme }) => `${theme.spacing.mili} ${theme.spacing.deca}`};\n  flex-direction: row;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  cursor: pointer;\n  &:hover {\n    background-color: ${({ theme }) => theme.color.primary.xlight};\n  }\n  &:hover span {\n    color: ${({ theme }) => theme.color.primary.medium};\n  }\n`;\n\nexport const StyledSpan = styled('span')<Partial<StyleProps>>`\n  color: ${({ theme }) => theme.color.primary.medium};\n  padding: ${({ theme }) => `${theme.spacing.mili} 0px`};\n`;\n\nexport const StyledContainerTextLabel = styled('div')<Partial<StyleProps>>`\n  padding-left: ${({ theme }) => theme.spacing.mili};\n  width: 100%;\n  display: flex;\n  overflow: hidden;\n`;\n"],"file":"styled.js"}