@tecsinapse/react-web-kit 1.20.2 → 1.21.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.21.0](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.20.2...@tecsinapse/react-web-kit@1.21.0) (2022-09-05)
+
+
+### Features
+
+* export core as esm ([d4879b3](https://github.com/tecsinapse/design-system/commit/d4879b3f4e2e6bc74d9eaea0ccb00adc0f39b1d7))
+
+
+
+
+
 ## [1.20.2](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.20.1...@tecsinapse/react-web-kit@1.20.2) (2022-09-05)
 
 **Note:** Version bump only for package @tecsinapse/react-web-kit

package/babel.config.esm.js

@@ -16,7 +16,6 @@ module.exports = api => {
       [
         '@babel/env',
         {
-          loose: true,
           modules: false,
         },
       ],

package/babel.config.js

@@ -16,12 +16,7 @@ module.exports = api => {
       [
         '@babel/env',
         {
-          useBuiltIns: 'usage',
-          corejs: 3,
-          targets: {
-            browsers: 'Last 2 Chrome versions, Firefox ESR',
-            node: 'current',
-          },
+          targets: '> 0.5%, last 2 versions, Firefox ESR, not dead',
         },
       ],
       [

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

@@ -21,14 +21,16 @@ 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; }
 
-const Accordion = ({
-  title,
-  open: _open = false,
-  onChange,
-  transition = 200,
-  children,
-  ...rest
-}) => {
+const Accordion = _ref => {
+  let {
+    title,
+    open: _open = false,
+    onChange,
+    transition = 200,
+    children,
+    ...rest
+  } = _ref;
+
   const [open, setOpen] = _react.default.useState(_open);
 
   const [contentHeight, setContentHeight] = _react.default.useState(0);

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","names":["Accordion","title","open","_open","onChange","transition","children","rest","setOpen","React","useState","contentHeight","setContentHeight","theme","useTheme","ref","useRef","useEffect","useLayoutEffect","size","Array","from","current","reduce","prev","curr","clientHeight","handleClick","useCallback","state","titleStyle","titleTransition","htmlEl","contentStyle","contentTransition"],"sources":["../../../../src/components/atoms/Accordion/Accordion.tsx"],"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"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAMA;;AACA;;AAMA;;;;;;AAUA,MAAMA,SAAmC,GAAG,CAAC;EAC3CC,KAD2C;EAE3CC,IAAI,EAAEC,KAAK,GAAG,KAF6B;EAG3CC,QAH2C;EAI3CC,UAAU,GAAG,GAJ8B;EAK3CC,QAL2C;EAM3C,GAAGC;AANwC,CAAD,KAOtC;EACJ,MAAM,CAACL,IAAD,EAAOM,OAAP,IAAkBC,cAAA,CAAMC,QAAN,CAAeP,KAAf,CAAxB;;EACA,MAAM,CAACQ,aAAD,EAAgBC,gBAAhB,IAAoCH,cAAA,CAAMC,QAAN,CAAe,CAAf,CAA1C;;EACA,MAAMG,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMC,GAAG,GAAG,IAAAC,aAAA,EAA8B,IAA9B,CAAZ;;EAEAP,cAAA,CAAMQ,SAAN,CAAgB,MAAMT,OAAO,CAACL,KAAD,CAA7B,EAAsC,CAACA,KAAD,CAAtC;;EAEAM,cAAA,CAAMS,eAAN,CAAsB,MAAM;IAAA;;IAC1B,MAAMC,IAAI,GAAGC,KAAK,CAACC,IAAN,CACV,iBAAAN,GAAG,CAACO,OAAJ,8DAAahB,QAAb,KAAyB,EADf,EAEXiB,MAFW,CAEJ,CAACC,IAAD,EAAOC,IAAP,KAAgBD,IAAI,GAAGC,IAAI,CAACC,YAFxB,EAEsC,CAFtC,CAAb;IAGAd,gBAAgB,CAACO,IAAD,CAAhB;EACD,CALD,EAKG,EALH;;EAOA,MAAMQ,WAAW,GAAGlB,cAAA,CAAMmB,WAAN,CAAkB,MAAM;IAC1C,IAAIxB,QAAJ,EAAc;MACZA,QAAQ;MACR;IACD;;IACDI,OAAO,CAACqB,KAAK,IAAI,CAACA,KAAX,CAAP;EACD,CANmB,EAMjB,CAACzB,QAAD,CANiB,CAApB;;EAQA,OACE,6BAAC,0BAAD,EAAwBG,IAAxB,EACE,6BAAC,sBAAD;IAAgB,OAAO,EAAEoB;EAAzB,GACE,6BAAC,gCAAD;IAAY,EAAE,EAAEzB,IAAhB;IAAsB,OAAO,EAAEG;EAA/B,GACGwB,KAAK,IACJ,6BAAC,eAAD;IACE,UAAU,EAAC,IADb;IAEE,UAAU,EAAC,MAFb;IAGE,KAAK,EAAE,EACL,GAAG,IAAAC,sBAAA,EAAWzB,UAAX,EAAuBQ,KAAvB,CADE;MAEL,GAAG,IAAAkB,2BAAA,EAAgBlB,KAAhB,EAAuBgB,KAAvB;IAFE;EAHT,GAQG5B,KARH,CAFJ,CADF,EAeE,6BAAC,qBAAD,QACE,6BAAC,eAAD;IACE,IAAI,EAAC,oBADP;IAEE,IAAI,EAAEC,IAAI,GAAG,YAAH,GAAkB,cAF9B;IAGE,IAAI,EAAC,MAHP;IAIE,SAAS,EAAC;EAJZ,EADF,CAfF,CADF,EAyBE,6BAAC,gCAAD;IAAY,EAAE,EAAEA,IAAhB;IAAsB,OAAO,EAAEG;EAA/B,GACGwB,KAAK,IACJ,6BAAC,wBAAD;IACE,GAAG,EAAEG,MAAM,IAAKjB,GAAG,CAACO,OAAJ,GAAcU,MADhC;IAEE,KAAK,EAAE,EACL,GAAG,IAAAC,wBAAA,EAAa/B,IAAb,EAAmBG,UAAnB,EAA+BM,aAA/B,EAA8CE,KAA9C,CADE;MAEL,GAAG,IAAAqB,6BAAA,EAAkBvB,aAAlB,EAAiCE,KAAjC,EAAwCgB,KAAxC;IAFE;EAFT,GAOGvB,QAPH,CAFJ,CAzBF,CADF;AAyCD,CAxED;;eA0EeN,S"}
+{"version":3,"file":"Accordion.js","names":["Accordion","title","open","_open","onChange","transition","children","rest","setOpen","React","useState","contentHeight","setContentHeight","theme","useTheme","ref","useRef","useEffect","useLayoutEffect","size","Array","from","current","reduce","prev","curr","clientHeight","handleClick","useCallback","state","titleStyle","titleTransition","htmlEl","contentStyle","contentTransition"],"sources":["../../../../src/components/atoms/Accordion/Accordion.tsx"],"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"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAMA;;AACA;;AAMA;;;;;;AAUA,MAAMA,SAAmC,GAAG,QAOtC;EAAA,IAPuC;IAC3CC,KAD2C;IAE3CC,IAAI,EAAEC,KAAK,GAAG,KAF6B;IAG3CC,QAH2C;IAI3CC,UAAU,GAAG,GAJ8B;IAK3CC,QAL2C;IAM3C,GAAGC;EANwC,CAOvC;;EACJ,MAAM,CAACL,IAAD,EAAOM,OAAP,IAAkBC,cAAA,CAAMC,QAAN,CAAeP,KAAf,CAAxB;;EACA,MAAM,CAACQ,aAAD,EAAgBC,gBAAhB,IAAoCH,cAAA,CAAMC,QAAN,CAAe,CAAf,CAA1C;;EACA,MAAMG,KAAK,GAAG,IAAAC,gBAAA,GAAd;EAEA,MAAMC,GAAG,GAAG,IAAAC,aAAA,EAA8B,IAA9B,CAAZ;;EAEAP,cAAA,CAAMQ,SAAN,CAAgB,MAAMT,OAAO,CAACL,KAAD,CAA7B,EAAsC,CAACA,KAAD,CAAtC;;EAEAM,cAAA,CAAMS,eAAN,CAAsB,MAAM;IAAA;;IAC1B,MAAMC,IAAI,GAAGC,KAAK,CAACC,IAAN,CACV,iBAAAN,GAAG,CAACO,OAAJ,8DAAahB,QAAb,KAAyB,EADf,EAEXiB,MAFW,CAEJ,CAACC,IAAD,EAAOC,IAAP,KAAgBD,IAAI,GAAGC,IAAI,CAACC,YAFxB,EAEsC,CAFtC,CAAb;IAGAd,gBAAgB,CAACO,IAAD,CAAhB;EACD,CALD,EAKG,EALH;;EAOA,MAAMQ,WAAW,GAAGlB,cAAA,CAAMmB,WAAN,CAAkB,MAAM;IAC1C,IAAIxB,QAAJ,EAAc;MACZA,QAAQ;MACR;IACD;;IACDI,OAAO,CAACqB,KAAK,IAAI,CAACA,KAAX,CAAP;EACD,CANmB,EAMjB,CAACzB,QAAD,CANiB,CAApB;;EAQA,OACE,6BAAC,0BAAD,EAAwBG,IAAxB,EACE,6BAAC,sBAAD;IAAgB,OAAO,EAAEoB;EAAzB,GACE,6BAAC,gCAAD;IAAY,EAAE,EAAEzB,IAAhB;IAAsB,OAAO,EAAEG;EAA/B,GACGwB,KAAK,IACJ,6BAAC,eAAD;IACE,UAAU,EAAC,IADb;IAEE,UAAU,EAAC,MAFb;IAGE,KAAK,EAAE,EACL,GAAG,IAAAC,sBAAA,EAAWzB,UAAX,EAAuBQ,KAAvB,CADE;MAEL,GAAG,IAAAkB,2BAAA,EAAgBlB,KAAhB,EAAuBgB,KAAvB;IAFE;EAHT,GAQG5B,KARH,CAFJ,CADF,EAeE,6BAAC,qBAAD,QACE,6BAAC,eAAD;IACE,IAAI,EAAC,oBADP;IAEE,IAAI,EAAEC,IAAI,GAAG,YAAH,GAAkB,cAF9B;IAGE,IAAI,EAAC,MAHP;IAIE,SAAS,EAAC;EAJZ,EADF,CAfF,CADF,EAyBE,6BAAC,gCAAD;IAAY,EAAE,EAAEA,IAAhB;IAAsB,OAAO,EAAEG;EAA/B,GACGwB,KAAK,IACJ,6BAAC,wBAAD;IACE,GAAG,EAAEG,MAAM,IAAKjB,GAAG,CAACO,OAAJ,GAAcU,MADhC;IAEE,KAAK,EAAE,EACL,GAAG,IAAAC,wBAAA,EAAa/B,IAAb,EAAmBG,UAAnB,EAA+BM,aAA/B,EAA8CE,KAA9C,CADE;MAEL,GAAG,IAAAqB,6BAAA,EAAkBvB,aAAlB,EAAiCE,KAAjC,EAAwCgB,KAAxC;IAFE;EAFT,GAOGvB,QAPH,CAFJ,CAzBF,CADF;AAyCD,CAxED;;eA0EeN,S"}

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

@@ -8,7 +8,7 @@ exports.titleTransition = exports.titleStyle = exports.contentTransition = expor
 var _reactCore = require("@tecsinapse/react-core");
 
 const contentStyle = (open, transition, value, theme) => ({
-  transition: `padding-bottom ${transition * 2}ms ease-in-out, height ${transition * 2}ms ease-in-out`,
+  transition: "padding-bottom ".concat(transition * 2, "ms ease-in-out, height ").concat(transition * 2, "ms ease-in-out"),
   paddingBottom: open ? (0, _reactCore.extractNumbersFromString)(theme.spacing.kilo) : 0,
   height: open ? value : 0
 });
@@ -40,7 +40,7 @@ const contentTransition = (value, theme) => {
 exports.contentTransition = contentTransition;
 
 const titleStyle = (transition, theme) => ({
-  transition: `color ${transition * 2}ms ease-in-out`,
+  transition: "color ".concat(transition * 2, "ms ease-in-out"),
   color: theme.font.color.dark
 });
 

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

@@ -1 +1 @@
-{"version":3,"file":"animations.js","names":["contentStyle","open","transition","value","theme","paddingBottom","extractNumbersFromString","spacing","kilo","height","contentTransition","entering","entered","exiting","exited","titleStyle","color","font","dark","titleTransition","orange"],"sources":["../../../../src/components/atoms/Accordion/animations.ts"],"sourcesContent":["import { ThemeProp, extractNumbersFromString } from '@tecsinapse/react-core';\n\nexport const contentStyle = (\n  open: boolean,\n  transition: number,\n  value: number,\n  theme: ThemeProp\n) => ({\n  transition: `padding-bottom ${transition * 2}ms ease-in-out, height ${\n    transition * 2\n  }ms ease-in-out`,\n  paddingBottom: open ? extractNumbersFromString(theme.spacing.kilo) : 0,\n  height: open ? value : 0,\n});\n\nexport const contentTransition = (value: number, theme: ThemeProp) => {\n  const paddingBottom = extractNumbersFromString(theme.spacing.kilo);\n  return {\n    entering: {\n      paddingBottom,\n      height: value,\n    },\n    entered: {\n      paddingBottom,\n      height: value,\n    },\n    exiting: {\n      paddingBottom,\n      height: value,\n    },\n    exited: { paddingBottom: 0, height: 0 },\n  };\n};\n\nexport const titleStyle = (transition: number, theme: ThemeProp) => ({\n  transition: `color ${transition * 2}ms ease-in-out`,\n  color: theme.font.color.dark,\n});\n\nexport const titleTransition = (theme: ThemeProp) => ({\n  entering: {\n    color: theme.font.color.orange,\n  },\n  entered: {\n    color: theme.font.color.orange,\n  },\n  exiting: {\n    color: theme.font.color.orange,\n  },\n  exited: { color: theme.font.color.dark },\n});\n"],"mappings":";;;;;;;AAAA;;AAEO,MAAMA,YAAY,GAAG,CAC1BC,IAD0B,EAE1BC,UAF0B,EAG1BC,KAH0B,EAI1BC,KAJ0B,MAKtB;EACJF,UAAU,EAAG,kBAAiBA,UAAU,GAAG,CAAE,0BAC3CA,UAAU,GAAG,CACd,gBAHG;EAIJG,aAAa,EAAEJ,IAAI,GAAG,IAAAK,mCAAA,EAAyBF,KAAK,CAACG,OAAN,CAAcC,IAAvC,CAAH,GAAkD,CAJjE;EAKJC,MAAM,EAAER,IAAI,GAAGE,KAAH,GAAW;AALnB,CALsB,CAArB;;;;AAaA,MAAMO,iBAAiB,GAAG,CAACP,KAAD,EAAgBC,KAAhB,KAAqC;EACpE,MAAMC,aAAa,GAAG,IAAAC,mCAAA,EAAyBF,KAAK,CAACG,OAAN,CAAcC,IAAvC,CAAtB;EACA,OAAO;IACLG,QAAQ,EAAE;MACRN,aADQ;MAERI,MAAM,EAAEN;IAFA,CADL;IAKLS,OAAO,EAAE;MACPP,aADO;MAEPI,MAAM,EAAEN;IAFD,CALJ;IASLU,OAAO,EAAE;MACPR,aADO;MAEPI,MAAM,EAAEN;IAFD,CATJ;IAaLW,MAAM,EAAE;MAAET,aAAa,EAAE,CAAjB;MAAoBI,MAAM,EAAE;IAA5B;EAbH,CAAP;AAeD,CAjBM;;;;AAmBA,MAAMM,UAAU,GAAG,CAACb,UAAD,EAAqBE,KAArB,MAA2C;EACnEF,UAAU,EAAG,SAAQA,UAAU,GAAG,CAAE,gBAD+B;EAEnEc,KAAK,EAAEZ,KAAK,CAACa,IAAN,CAAWD,KAAX,CAAiBE;AAF2C,CAA3C,CAAnB;;;;AAKA,MAAMC,eAAe,GAAIf,KAAD,KAAuB;EACpDO,QAAQ,EAAE;IACRK,KAAK,EAAEZ,KAAK,CAACa,IAAN,CAAWD,KAAX,CAAiBI;EADhB,CAD0C;EAIpDR,OAAO,EAAE;IACPI,KAAK,EAAEZ,KAAK,CAACa,IAAN,CAAWD,KAAX,CAAiBI;EADjB,CAJ2C;EAOpDP,OAAO,EAAE;IACPG,KAAK,EAAEZ,KAAK,CAACa,IAAN,CAAWD,KAAX,CAAiBI;EADjB,CAP2C;EAUpDN,MAAM,EAAE;IAAEE,KAAK,EAAEZ,KAAK,CAACa,IAAN,CAAWD,KAAX,CAAiBE;EAA1B;AAV4C,CAAvB,CAAxB"}
+{"version":3,"file":"animations.js","names":["contentStyle","open","transition","value","theme","paddingBottom","extractNumbersFromString","spacing","kilo","height","contentTransition","entering","entered","exiting","exited","titleStyle","color","font","dark","titleTransition","orange"],"sources":["../../../../src/components/atoms/Accordion/animations.ts"],"sourcesContent":["import { ThemeProp, extractNumbersFromString } from '@tecsinapse/react-core';\n\nexport const contentStyle = (\n  open: boolean,\n  transition: number,\n  value: number,\n  theme: ThemeProp\n) => ({\n  transition: `padding-bottom ${transition * 2}ms ease-in-out, height ${\n    transition * 2\n  }ms ease-in-out`,\n  paddingBottom: open ? extractNumbersFromString(theme.spacing.kilo) : 0,\n  height: open ? value : 0,\n});\n\nexport const contentTransition = (value: number, theme: ThemeProp) => {\n  const paddingBottom = extractNumbersFromString(theme.spacing.kilo);\n  return {\n    entering: {\n      paddingBottom,\n      height: value,\n    },\n    entered: {\n      paddingBottom,\n      height: value,\n    },\n    exiting: {\n      paddingBottom,\n      height: value,\n    },\n    exited: { paddingBottom: 0, height: 0 },\n  };\n};\n\nexport const titleStyle = (transition: number, theme: ThemeProp) => ({\n  transition: `color ${transition * 2}ms ease-in-out`,\n  color: theme.font.color.dark,\n});\n\nexport const titleTransition = (theme: ThemeProp) => ({\n  entering: {\n    color: theme.font.color.orange,\n  },\n  entered: {\n    color: theme.font.color.orange,\n  },\n  exiting: {\n    color: theme.font.color.orange,\n  },\n  exited: { color: theme.font.color.dark },\n});\n"],"mappings":";;;;;;;AAAA;;AAEO,MAAMA,YAAY,GAAG,CAC1BC,IAD0B,EAE1BC,UAF0B,EAG1BC,KAH0B,EAI1BC,KAJ0B,MAKtB;EACJF,UAAU,2BAAoBA,UAAU,GAAG,CAAjC,oCACRA,UAAU,GAAG,CADL,mBADN;EAIJG,aAAa,EAAEJ,IAAI,GAAG,IAAAK,mCAAA,EAAyBF,KAAK,CAACG,OAAN,CAAcC,IAAvC,CAAH,GAAkD,CAJjE;EAKJC,MAAM,EAAER,IAAI,GAAGE,KAAH,GAAW;AALnB,CALsB,CAArB;;;;AAaA,MAAMO,iBAAiB,GAAG,CAACP,KAAD,EAAgBC,KAAhB,KAAqC;EACpE,MAAMC,aAAa,GAAG,IAAAC,mCAAA,EAAyBF,KAAK,CAACG,OAAN,CAAcC,IAAvC,CAAtB;EACA,OAAO;IACLG,QAAQ,EAAE;MACRN,aADQ;MAERI,MAAM,EAAEN;IAFA,CADL;IAKLS,OAAO,EAAE;MACPP,aADO;MAEPI,MAAM,EAAEN;IAFD,CALJ;IASLU,OAAO,EAAE;MACPR,aADO;MAEPI,MAAM,EAAEN;IAFD,CATJ;IAaLW,MAAM,EAAE;MAAET,aAAa,EAAE,CAAjB;MAAoBI,MAAM,EAAE;IAA5B;EAbH,CAAP;AAeD,CAjBM;;;;AAmBA,MAAMM,UAAU,GAAG,CAACb,UAAD,EAAqBE,KAArB,MAA2C;EACnEF,UAAU,kBAAWA,UAAU,GAAG,CAAxB,mBADyD;EAEnEc,KAAK,EAAEZ,KAAK,CAACa,IAAN,CAAWD,KAAX,CAAiBE;AAF2C,CAA3C,CAAnB;;;;AAKA,MAAMC,eAAe,GAAIf,KAAD,KAAuB;EACpDO,QAAQ,EAAE;IACRK,KAAK,EAAEZ,KAAK,CAACa,IAAN,CAAWD,KAAX,CAAiBI;EADhB,CAD0C;EAIpDR,OAAO,EAAE;IACPI,KAAK,EAAEZ,KAAK,CAACa,IAAN,CAAWD,KAAX,CAAiBI;EADjB,CAJ2C;EAOpDP,OAAO,EAAE;IACPG,KAAK,EAAEZ,KAAK,CAACa,IAAN,CAAWD,KAAX,CAAiBI;EADjB,CAP2C;EAUpDN,MAAM,EAAE;IAAEE,KAAK,EAAEZ,KAAK,CAACa,IAAN,CAAWD,KAAX,CAAiBE;EAA1B;AAV4C,CAAvB,CAAxB"}

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

@@ -7,47 +7,43 @@ exports.TitleContainer = exports.IconContainer = exports.ContentContainer = expo
 
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const IconContainer = (0, _styled.default)('div')`
-  border-radius: ${({
-  theme
-}) => theme.borderRadius.mili};
-  border: ${({
-  theme
-}) => `${theme.borderWidth.pico} solid ${theme.color.secondary.light}`};
-  display: flex;
-  text-align: center;
-  justify-content: center;
-  align-items: center;
-`;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+const IconContainer = (0, _styled.default)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  border: ", ";\n  display: flex;\n  text-align: center;\n  justify-content: center;\n  align-items: center;\n"])), _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.borderRadius.mili;
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return "".concat(theme.borderWidth.pico, " solid ").concat(theme.color.secondary.light);
+});
 exports.IconContainer = IconContainer;
-const TitleContainer = (0, _styled.default)('div')`
-  display: flex;
-  flex: 1;
-  flex-direction: row;
-  justify-content: space-between;
-  cursor: pointer;
-  padding: ${({
-  theme
-}) => theme.spacing.kilo} 0;
-`;
+const TitleContainer = (0, _styled.default)('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  justify-content: space-between;\n  cursor: pointer;\n  padding: ", " 0;\n"])), _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.spacing.kilo;
+});
 exports.TitleContainer = TitleContainer;
-const AccordionContainer = (0, _styled.default)('div')`
-  display: flex;
-  flex-direction: column;
-  border-bottom: ${({
-  theme
-}) => `${theme.borderWidth.pico} solid ${theme.color.secondary.light}`};
-  background-color: ${({
-  theme
-}) => theme.miscellaneous.surfaceColor};
-`;
+const AccordionContainer = (0, _styled.default)('div')(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  border-bottom: ", ";\n  background-color: ", ";\n"])), _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return "".concat(theme.borderWidth.pico, " solid ").concat(theme.color.secondary.light);
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.miscellaneous.surfaceColor;
+});
 exports.AccordionContainer = AccordionContainer;
-const ContentContainer = (0, _styled.default)('div')`
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-`;
+const ContentContainer = (0, _styled.default)('div')(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n"])));
 exports.ContentContainer = ContentContainer;
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","names":["IconContainer","styled","theme","borderRadius","mili","borderWidth","pico","color","secondary","light","TitleContainer","spacing","kilo","AccordionContainer","miscellaneous","surfaceColor","ContentContainer"],"sources":["../../../../src/components/atoms/Accordion/styled.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { StyleProps } from '@tecsinapse/react-core';\n\nexport const IconContainer = styled('div')<Partial<StyleProps>>`\n  border-radius: ${({ theme }) => theme.borderRadius.mili};\n  border: ${({ theme }) =>\n    `${theme.borderWidth.pico} solid ${theme.color.secondary.light}`};\n  display: flex;\n  text-align: center;\n  justify-content: center;\n  align-items: center;\n`;\n\nexport const TitleContainer = styled('div')<Partial<StyleProps>>`\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  justify-content: space-between;\n  cursor: pointer;\n  padding: ${({ theme }) => theme.spacing.kilo} 0;\n`;\n\nexport const AccordionContainer = styled('div')<Partial<StyleProps>>`\n  display: flex;\n  flex-direction: column;\n  border-bottom: ${({ theme }) =>\n    `${theme.borderWidth.pico} solid ${theme.color.secondary.light}`};\n  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n`;\n\nexport const ContentContainer = styled('div')`\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n`;\n"],"mappings":";;;;;;;AAAA;;;;AAGO,MAAMA,aAAa,GAAG,IAAAC,eAAA,EAAO,KAAP,CAAmC;AAChE,mBAAmB,CAAC;EAAEC;AAAF,CAAD,KAAeA,KAAK,CAACC,YAAN,CAAmBC,IAAK;AAC1D,YAAY,CAAC;EAAEF;AAAF,CAAD,KACP,GAAEA,KAAK,CAACG,WAAN,CAAkBC,IAAK,UAASJ,KAAK,CAACK,KAAN,CAAYC,SAAZ,CAAsBC,KAAM,EAAE;AACrE;AACA;AACA;AACA;AACA,CARO;;AAUA,MAAMC,cAAc,GAAG,IAAAT,eAAA,EAAO,KAAP,CAAmC;AACjE;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEC;AAAF,CAAD,KAAeA,KAAK,CAACS,OAAN,CAAcC,IAAK;AAC/C,CAPO;;AASA,MAAMC,kBAAkB,GAAG,IAAAZ,eAAA,EAAO,KAAP,CAAmC;AACrE;AACA;AACA,mBAAmB,CAAC;EAAEC;AAAF,CAAD,KACd,GAAEA,KAAK,CAACG,WAAN,CAAkBC,IAAK,UAASJ,KAAK,CAACK,KAAN,CAAYC,SAAZ,CAAsBC,KAAM,EAAE;AACrE,sBAAsB,CAAC;EAAEP;AAAF,CAAD,KAAeA,KAAK,CAACY,aAAN,CAAoBC,YAAa;AACtE,CANO;;AAQA,MAAMC,gBAAgB,GAAG,IAAAf,eAAA,EAAO,KAAP,CAAc;AAC9C;AACA;AACA;AACA,CAJO"}
+{"version":3,"file":"styled.js","names":["IconContainer","styled","theme","borderRadius","mili","borderWidth","pico","color","secondary","light","TitleContainer","spacing","kilo","AccordionContainer","miscellaneous","surfaceColor","ContentContainer"],"sources":["../../../../src/components/atoms/Accordion/styled.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { StyleProps } from '@tecsinapse/react-core';\n\nexport const IconContainer = styled('div')<Partial<StyleProps>>`\n  border-radius: ${({ theme }) => theme.borderRadius.mili};\n  border: ${({ theme }) =>\n    `${theme.borderWidth.pico} solid ${theme.color.secondary.light}`};\n  display: flex;\n  text-align: center;\n  justify-content: center;\n  align-items: center;\n`;\n\nexport const TitleContainer = styled('div')<Partial<StyleProps>>`\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  justify-content: space-between;\n  cursor: pointer;\n  padding: ${({ theme }) => theme.spacing.kilo} 0;\n`;\n\nexport const AccordionContainer = styled('div')<Partial<StyleProps>>`\n  display: flex;\n  flex-direction: column;\n  border-bottom: ${({ theme }) =>\n    `${theme.borderWidth.pico} solid ${theme.color.secondary.light}`};\n  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n`;\n\nexport const ContentContainer = styled('div')`\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n`;\n"],"mappings":";;;;;;;AAAA;;;;;;;;AAGO,MAAMA,aAAa,GAAG,IAAAC,eAAA,EAAO,KAAP,CAAH,8MACP;EAAA,IAAC;IAAEC;EAAF,CAAD;EAAA,OAAeA,KAAK,CAACC,YAAN,CAAmBC,IAAlC;AAAA,CADO,EAEd;EAAA,IAAC;IAAEF;EAAF,CAAD;EAAA,iBACLA,KAAK,CAACG,WAAN,CAAkBC,IADb,oBAC2BJ,KAAK,CAACK,KAAN,CAAYC,SAAZ,CAAsBC,KADjD;AAAA,CAFc,CAAnB;;AAUA,MAAMC,cAAc,GAAG,IAAAT,eAAA,EAAO,KAAP,CAAH,2MAMd;EAAA,IAAC;IAAEC;EAAF,CAAD;EAAA,OAAeA,KAAK,CAACS,OAAN,CAAcC,IAA7B;AAAA,CANc,CAApB;;AASA,MAAMC,kBAAkB,GAAG,IAAAZ,eAAA,EAAO,KAAP,CAAH,0KAGZ;EAAA,IAAC;IAAEC;EAAF,CAAD;EAAA,iBACZA,KAAK,CAACG,WAAN,CAAkBC,IADN,oBACoBJ,KAAK,CAACK,KAAN,CAAYC,SAAZ,CAAsBC,KAD1C;AAAA,CAHY,EAKT;EAAA,IAAC;IAAEP;EAAF,CAAD;EAAA,OAAeA,KAAK,CAACY,aAAN,CAAoBC,YAAnC;AAAA,CALS,CAAxB;;AAQA,MAAMC,gBAAgB,GAAG,IAAAf,eAAA,EAAO,KAAP,CAAH,2IAAtB"}

package/dist/components/atoms/Badge/Badge.js

@@ -13,12 +13,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 Badge = ({
-  children,
-  fontColor = 'light',
-  value,
-  ...props
-}) => {
+const Badge = _ref => {
+  let {
+    children,
+    fontColor = 'light',
+    value,
+    ...props
+  } = _ref;
   return _react.default.createElement(_reactCore.Badge, _extends({}, props, {
     value: _react.default.createElement(_reactCore.Text, {
       fontColor: fontColor,

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","names":["Badge","children","fontColor","value","props"],"sources":["../../../../src/components/atoms/Badge/Badge.tsx"],"sourcesContent":["import {\n  BadgeProps,\n  Badge as BadgeCore,\n  Text,\n  FontColorType,\n} from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\n\nexport interface BadgeWebProps extends Omit<BadgeProps, 'value'> {\n  fontColor?: FontColorType;\n  value: string | number;\n}\n\nconst Badge: FC<BadgeWebProps> = ({\n  children,\n  fontColor = 'light',\n  value,\n  ...props\n}) => {\n  return (\n    <BadgeCore\n      {...props}\n      value={\n        <Text fontColor={fontColor} fontWeight={'bold'} typography={'label'}>\n          {value}\n        </Text>\n      }\n    >\n      {children}\n    </BadgeCore>\n  );\n};\n\nexport default Badge;\n"],"mappings":";;;;;;;AAAA;;AAMA;;;;;;AAOA,MAAMA,KAAwB,GAAG,CAAC;EAChCC,QADgC;EAEhCC,SAAS,GAAG,OAFoB;EAGhCC,KAHgC;EAIhC,GAAGC;AAJ6B,CAAD,KAK3B;EACJ,OACE,6BAAC,gBAAD,eACMA,KADN;IAEE,KAAK,EACH,6BAAC,eAAD;MAAM,SAAS,EAAEF,SAAjB;MAA4B,UAAU,EAAE,MAAxC;MAAgD,UAAU,EAAE;IAA5D,GACGC,KADH;EAHJ,IAQGF,QARH,CADF;AAYD,CAlBD;;eAoBeD,K"}
+{"version":3,"file":"Badge.js","names":["Badge","children","fontColor","value","props"],"sources":["../../../../src/components/atoms/Badge/Badge.tsx"],"sourcesContent":["import {\n  BadgeProps,\n  Badge as BadgeCore,\n  Text,\n  FontColorType,\n} from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\n\nexport interface BadgeWebProps extends Omit<BadgeProps, 'value'> {\n  fontColor?: FontColorType;\n  value: string | number;\n}\n\nconst Badge: FC<BadgeWebProps> = ({\n  children,\n  fontColor = 'light',\n  value,\n  ...props\n}) => {\n  return (\n    <BadgeCore\n      {...props}\n      value={\n        <Text fontColor={fontColor} fontWeight={'bold'} typography={'label'}>\n          {value}\n        </Text>\n      }\n    >\n      {children}\n    </BadgeCore>\n  );\n};\n\nexport default Badge;\n"],"mappings":";;;;;;;AAAA;;AAMA;;;;;;AAOA,MAAMA,KAAwB,GAAG,QAK3B;EAAA,IAL4B;IAChCC,QADgC;IAEhCC,SAAS,GAAG,OAFoB;IAGhCC,KAHgC;IAIhC,GAAGC;EAJ6B,CAK5B;EACJ,OACE,6BAAC,gBAAD,eACMA,KADN;IAEE,KAAK,EACH,6BAAC,eAAD;MAAM,SAAS,EAAEF,SAAjB;MAA4B,UAAU,EAAE,MAAxC;MAAgD,UAAU,EAAE;IAA5D,GACGC,KADH;EAHJ,IAQGF,QARH,CADF;AAYD,CAlBD;;eAoBeD,K"}

package/dist/components/atoms/Button/Button.js

@@ -17,18 +17,20 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 Button = ({
-  children,
-  disabled,
-  frozen,
-  state,
-  variant,
-  onMouseOut,
-  onMouseOver,
-  onPressIn,
-  onPressOut,
-  ...rest
-}) => {
+const Button = _ref => {
+  let {
+    children,
+    disabled,
+    frozen,
+    state,
+    variant,
+    onMouseOut,
+    onMouseOver,
+    onPressIn,
+    onPressOut,
+    ...rest
+  } = _ref;
+
   const _frozen = frozen || state === 'loading';
 
   const {

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["Button","children","disabled","frozen","state","variant","onMouseOut","onMouseOver","onPressIn","onPressOut","rest","_frozen","mouseOver","handleMouseOut","handleMouseOver","useMouseHover","pressed","handlePressIn","handlePressOut","useMousePressed"],"sources":["../../../../src/components/atoms/Button/Button.tsx"],"sourcesContent":["import { ButtonProps } from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { useMouseHover } from './hooks/useMouseHover';\nimport { useMousePressed } from './hooks/useMousePressed';\nimport { StyledWebButton } from './styled';\n\n/**\n * TODO: Add a property 'defaultElement' to render a default\n * component and provide some button's state to it.\n */\nexport type WebButtonProps = ButtonProps & {\n  onMouseOver?: () => void;\n  onMouseOut?: () => void;\n  onPressIn?: () => void;\n  onPressOut?: () => void;\n};\n\nconst Button: FC<WebButtonProps> = ({\n  children,\n  disabled,\n  frozen,\n  state,\n  variant,\n  onMouseOut,\n  onMouseOver,\n  onPressIn,\n  onPressOut,\n  ...rest\n}): JSX.Element => {\n  const _frozen = frozen || state === 'loading';\n  const { mouseOver, handleMouseOut, handleMouseOver } = useMouseHover(\n    !disabled && !_frozen,\n    onMouseOut,\n    onMouseOver\n  );\n  const { pressed, handlePressIn, handlePressOut } = useMousePressed(\n    !disabled && !_frozen,\n    onPressIn,\n    onPressOut\n  );\n\n  return (\n    <StyledWebButton\n      {...rest}\n      disabled={disabled}\n      frozen={_frozen}\n      state={state}\n      onMouseOver={handleMouseOver}\n      onMouseOut={handleMouseOut}\n      mouseOver={mouseOver}\n      onPressIn={handlePressIn}\n      onPressOut={handlePressOut}\n      pressed={pressed}\n      variant={variant}\n    >\n      {children}\n    </StyledWebButton>\n  );\n};\n\nexport default Button;\n"],"mappings":";;;;;;;AACA;;AACA;;AACA;;AACA;;;;;;AAaA,MAAMA,MAA0B,GAAG,CAAC;EAClCC,QADkC;EAElCC,QAFkC;EAGlCC,MAHkC;EAIlCC,KAJkC;EAKlCC,OALkC;EAMlCC,UANkC;EAOlCC,WAPkC;EAQlCC,SARkC;EASlCC,UATkC;EAUlC,GAAGC;AAV+B,CAAD,KAWhB;EACjB,MAAMC,OAAO,GAAGR,MAAM,IAAIC,KAAK,KAAK,SAApC;;EACA,MAAM;IAAEQ,SAAF;IAAaC,cAAb;IAA6BC;EAA7B,IAAiD,IAAAC,4BAAA,EACrD,CAACb,QAAD,IAAa,CAACS,OADuC,EAErDL,UAFqD,EAGrDC,WAHqD,CAAvD;EAKA,MAAM;IAAES,OAAF;IAAWC,aAAX;IAA0BC;EAA1B,IAA6C,IAAAC,gCAAA,EACjD,CAACjB,QAAD,IAAa,CAACS,OADmC,EAEjDH,SAFiD,EAGjDC,UAHiD,CAAnD;EAMA,OACE,6BAAC,uBAAD,eACMC,IADN;IAEE,QAAQ,EAAER,QAFZ;IAGE,MAAM,EAAES,OAHV;IAIE,KAAK,EAAEP,KAJT;IAKE,WAAW,EAAEU,eALf;IAME,UAAU,EAAED,cANd;IAOE,SAAS,EAAED,SAPb;IAQE,SAAS,EAAEK,aARb;IASE,UAAU,EAAEC,cATd;IAUE,OAAO,EAAEF,OAVX;IAWE,OAAO,EAAEX;EAXX,IAaGJ,QAbH,CADF;AAiBD,CAzCD;;eA2CeD,M"}
+{"version":3,"file":"Button.js","names":["Button","children","disabled","frozen","state","variant","onMouseOut","onMouseOver","onPressIn","onPressOut","rest","_frozen","mouseOver","handleMouseOut","handleMouseOver","useMouseHover","pressed","handlePressIn","handlePressOut","useMousePressed"],"sources":["../../../../src/components/atoms/Button/Button.tsx"],"sourcesContent":["import { ButtonProps } from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { useMouseHover } from './hooks/useMouseHover';\nimport { useMousePressed } from './hooks/useMousePressed';\nimport { StyledWebButton } from './styled';\n\n/**\n * TODO: Add a property 'defaultElement' to render a default\n * component and provide some button's state to it.\n */\nexport type WebButtonProps = ButtonProps & {\n  onMouseOver?: () => void;\n  onMouseOut?: () => void;\n  onPressIn?: () => void;\n  onPressOut?: () => void;\n};\n\nconst Button: FC<WebButtonProps> = ({\n  children,\n  disabled,\n  frozen,\n  state,\n  variant,\n  onMouseOut,\n  onMouseOver,\n  onPressIn,\n  onPressOut,\n  ...rest\n}): JSX.Element => {\n  const _frozen = frozen || state === 'loading';\n  const { mouseOver, handleMouseOut, handleMouseOver } = useMouseHover(\n    !disabled && !_frozen,\n    onMouseOut,\n    onMouseOver\n  );\n  const { pressed, handlePressIn, handlePressOut } = useMousePressed(\n    !disabled && !_frozen,\n    onPressIn,\n    onPressOut\n  );\n\n  return (\n    <StyledWebButton\n      {...rest}\n      disabled={disabled}\n      frozen={_frozen}\n      state={state}\n      onMouseOver={handleMouseOver}\n      onMouseOut={handleMouseOut}\n      mouseOver={mouseOver}\n      onPressIn={handlePressIn}\n      onPressOut={handlePressOut}\n      pressed={pressed}\n      variant={variant}\n    >\n      {children}\n    </StyledWebButton>\n  );\n};\n\nexport default Button;\n"],"mappings":";;;;;;;AACA;;AACA;;AACA;;AACA;;;;;;AAaA,MAAMA,MAA0B,GAAG,QAWhB;EAAA,IAXiB;IAClCC,QADkC;IAElCC,QAFkC;IAGlCC,MAHkC;IAIlCC,KAJkC;IAKlCC,OALkC;IAMlCC,UANkC;IAOlCC,WAPkC;IAQlCC,SARkC;IASlCC,UATkC;IAUlC,GAAGC;EAV+B,CAWjB;;EACjB,MAAMC,OAAO,GAAGR,MAAM,IAAIC,KAAK,KAAK,SAApC;;EACA,MAAM;IAAEQ,SAAF;IAAaC,cAAb;IAA6BC;EAA7B,IAAiD,IAAAC,4BAAA,EACrD,CAACb,QAAD,IAAa,CAACS,OADuC,EAErDL,UAFqD,EAGrDC,WAHqD,CAAvD;EAKA,MAAM;IAAES,OAAF;IAAWC,aAAX;IAA0BC;EAA1B,IAA6C,IAAAC,gCAAA,EACjD,CAACjB,QAAD,IAAa,CAACS,OADmC,EAEjDH,SAFiD,EAGjDC,UAHiD,CAAnD;EAMA,OACE,6BAAC,uBAAD,eACMC,IADN;IAEE,QAAQ,EAAER,QAFZ;IAGE,MAAM,EAAES,OAHV;IAIE,KAAK,EAAEP,KAJT;IAKE,WAAW,EAAEU,eALf;IAME,UAAU,EAAED,cANd;IAOE,SAAS,EAAED,SAPb;IAQE,SAAS,EAAEK,aARb;IASE,UAAU,EAAEC,cATd;IAUE,OAAO,EAAEF,OAVX;IAWE,OAAO,EAAEX;EAXX,IAaGJ,QAbH,CADF;AAiBD,CAzCD;;eA2CeD,M"}

package/dist/components/atoms/Button/styled.js

@@ -9,33 +9,31 @@ var _native = _interopRequireWildcard(require("@emotion/native"));
 
 var _reactCore = require("@tecsinapse/react-core");
 
+var _templateObject, _templateObject2;
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 const webStyles = () => {
-  return (0, _native.css)`
-    & * {
-      user-select: none;
-    }
-  `;
+  return (0, _native.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    & * {\n      user-select: none;\n    }\n  "])));
 };
 
-const hoverStyles = ({
-  mouseOver,
-  pressed,
-  theme,
-  variant = 'filled',
-  disabled
-}) => {
+const hoverStyles = _ref => {
+  let {
+    mouseOver,
+    pressed,
+    theme,
+    variant = 'filled',
+    disabled
+  } = _ref;
   const variantColor = _reactCore.colorVC[variant];
   const variantColorGradation = _reactCore.colorGradationVC[variant];
   const variantBorderColor = _reactCore.borderColorVC[variant];
   const variantBorderColorGradation = _reactCore.borderColorGradationVC[variant];
-  return mouseOver && !disabled && !pressed && (0, _native.css)`
-      background-color: ${theme === null || theme === void 0 ? void 0 : theme.color[variantColor][variantColorGradation]};
-      border-color: ${theme === null || theme === void 0 ? void 0 : theme.color[variantBorderColor][variantBorderColorGradation]};
-    `;
+  return mouseOver && !disabled && !pressed && (0, _native.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border-color: ", ";\n    "])), theme === null || theme === void 0 ? void 0 : theme.color[variantColor][variantColorGradation], theme === null || theme === void 0 ? void 0 : theme.color[variantBorderColor][variantBorderColorGradation]);
 };
 
 const StyledWebButton = (0, _native.default)(_reactCore.Button)(webStyles, hoverStyles);

package/dist/components/atoms/Button/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","names":["webStyles","css","hoverStyles","mouseOver","pressed","theme","variant","disabled","variantColor","colorVC","variantColorGradation","colorGradationVC","variantBorderColor","borderColorVC","variantBorderColorGradation","borderColorGradationVC","color","StyledWebButton","styled","Button"],"sources":["../../../../src/components/atoms/Button/styled.ts"],"sourcesContent":["import styled, { css } from '@emotion/native';\nimport {\n  borderColorGradationVC,\n  borderColorVC,\n  Button,\n  colorGradationVC,\n  colorVC,\n  StyleProps,\n} from '@tecsinapse/react-core';\nimport { WebButtonProps } from './Button';\n\nconst webStyles = () => {\n  return css`\n    & * {\n      user-select: none;\n    }\n  `;\n};\n\nconst hoverStyles = ({\n  mouseOver,\n  pressed,\n  theme,\n  variant = 'filled',\n  disabled,\n}: { mouseOver: boolean; pressed: boolean } & WebButtonProps &\n  Partial<StyleProps>) => {\n  const variantColor = colorVC[variant];\n  const variantColorGradation = colorGradationVC[variant];\n  const variantBorderColor = borderColorVC[variant];\n  const variantBorderColorGradation = borderColorGradationVC[variant];\n  return (\n    mouseOver &&\n    !disabled &&\n    !pressed &&\n    css`\n      background-color: ${theme?.color[variantColor][variantColorGradation]};\n      border-color: ${theme?.color[variantBorderColor][\n        variantBorderColorGradation\n      ]};\n    `\n  );\n};\n\nexport const StyledWebButton = styled(Button)<\n  { mouseOver: boolean; pressed: boolean } & WebButtonProps &\n    Partial<StyleProps>\n>(webStyles, hoverStyles);\n"],"mappings":";;;;;;;AAAA;;AACA;;;;;;AAUA,MAAMA,SAAS,GAAG,MAAM;EACtB,OAAO,IAAAC,WAAA,CAAI;AACb;AACA;AACA;AACA,GAJE;AAKD,CAND;;AAQA,MAAMC,WAAW,GAAG,CAAC;EACnBC,SADmB;EAEnBC,OAFmB;EAGnBC,KAHmB;EAInBC,OAAO,GAAG,QAJS;EAKnBC;AALmB,CAAD,KAOM;EACxB,MAAMC,YAAY,GAAGC,kBAAA,CAAQH,OAAR,CAArB;EACA,MAAMI,qBAAqB,GAAGC,2BAAA,CAAiBL,OAAjB,CAA9B;EACA,MAAMM,kBAAkB,GAAGC,wBAAA,CAAcP,OAAd,CAA3B;EACA,MAAMQ,2BAA2B,GAAGC,iCAAA,CAAuBT,OAAvB,CAApC;EACA,OACEH,SAAS,IACT,CAACI,QADD,IAEA,CAACH,OAFD,IAGA,IAAAH,WAAA,CAAI;AACR,0BAA0BI,KADnB,aACmBA,KADnB,uBACmBA,KAAK,CAAEW,KAAP,CAAaR,YAAb,EAA2BE,qBAA3B,CAAkD;AAC5E,sBAAsBL,KAFf,aAEeA,KAFf,uBAEeA,KAAK,CAAEW,KAAP,CAAaJ,kBAAb,EACdE,2BADc,CAEd;AACR,KATE;AAWD,CAvBD;;AAyBO,MAAMG,eAAe,GAAG,IAAAC,eAAA,EAAOC,iBAAP,EAG7BnB,SAH6B,EAGlBE,WAHkB,CAAxB"}
+{"version":3,"file":"styled.js","names":["webStyles","css","hoverStyles","mouseOver","pressed","theme","variant","disabled","variantColor","colorVC","variantColorGradation","colorGradationVC","variantBorderColor","borderColorVC","variantBorderColorGradation","borderColorGradationVC","color","StyledWebButton","styled","Button"],"sources":["../../../../src/components/atoms/Button/styled.ts"],"sourcesContent":["import styled, { css } from '@emotion/native';\nimport {\n  borderColorGradationVC,\n  borderColorVC,\n  Button,\n  colorGradationVC,\n  colorVC,\n  StyleProps,\n} from '@tecsinapse/react-core';\nimport { WebButtonProps } from './Button';\n\nconst webStyles = () => {\n  return css`\n    & * {\n      user-select: none;\n    }\n  `;\n};\n\nconst hoverStyles = ({\n  mouseOver,\n  pressed,\n  theme,\n  variant = 'filled',\n  disabled,\n}: { mouseOver: boolean; pressed: boolean } & WebButtonProps &\n  Partial<StyleProps>) => {\n  const variantColor = colorVC[variant];\n  const variantColorGradation = colorGradationVC[variant];\n  const variantBorderColor = borderColorVC[variant];\n  const variantBorderColorGradation = borderColorGradationVC[variant];\n  return (\n    mouseOver &&\n    !disabled &&\n    !pressed &&\n    css`\n      background-color: ${theme?.color[variantColor][variantColorGradation]};\n      border-color: ${theme?.color[variantBorderColor][\n        variantBorderColorGradation\n      ]};\n    `\n  );\n};\n\nexport const StyledWebButton = styled(Button)<\n  { mouseOver: boolean; pressed: boolean } & WebButtonProps &\n    Partial<StyleProps>\n>(webStyles, hoverStyles);\n"],"mappings":";;;;;;;AAAA;;AACA;;;;;;;;;;AAUA,MAAMA,SAAS,GAAG,MAAM;EACtB,WAAOC,WAAP;AAKD,CAND;;AAQA,MAAMC,WAAW,GAAG,QAOM;EAAA,IAPL;IACnBC,SADmB;IAEnBC,OAFmB;IAGnBC,KAHmB;IAInBC,OAAO,GAAG,QAJS;IAKnBC;EALmB,CAOK;EACxB,MAAMC,YAAY,GAAGC,kBAAA,CAAQH,OAAR,CAArB;EACA,MAAMI,qBAAqB,GAAGC,2BAAA,CAAiBL,OAAjB,CAA9B;EACA,MAAMM,kBAAkB,GAAGC,wBAAA,CAAcP,OAAd,CAA3B;EACA,MAAMQ,2BAA2B,GAAGC,iCAAA,CAAuBT,OAAvB,CAApC;EACA,OACEH,SAAS,IACT,CAACI,QADD,IAEA,CAACH,OAFD,QAGAH,WAHA,yIAIsBI,KAJtB,aAIsBA,KAJtB,uBAIsBA,KAAK,CAAEW,KAAP,CAAaR,YAAb,EAA2BE,qBAA3B,CAJtB,EAKkBL,KALlB,aAKkBA,KALlB,uBAKkBA,KAAK,CAAEW,KAAP,CAAaJ,kBAAb,EACdE,2BADc,CALlB,CADF;AAWD,CAvBD;;AAyBO,MAAMG,eAAe,GAAG,IAAAC,eAAA,EAAOC,iBAAP,EAG7BnB,SAH6B,EAGlBE,WAHkB,CAAxB"}

package/dist/components/atoms/Dropdown/index.js

@@ -19,11 +19,12 @@ 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; }
 
-const Component = ({
-  visible,
-  setVisible,
-  children
-}) => {
+const Component = _ref => {
+  let {
+    visible,
+    setVisible,
+    children
+  } = _ref;
   const refDropDown = React.useRef(null);
   (0, _reactWebKit.useClickAwayListener)(refDropDown, setVisible);
   return React.createElement(_reactTransitionGroup.Transition, {

package/dist/components/atoms/Dropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Component","visible","setVisible","children","refDropDown","React","useRef","useClickAwayListener","state","defaultStyles","transition","Dropdown"],"sources":["../../../../src/components/atoms/Dropdown/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport { StyledContainerDropdown } from './styled';\nimport { Transition } from 'react-transition-group';\nimport { defaultStyles, transition } from '../../molecules/Select/animations';\nimport { Dispatch, SetStateAction } from 'react';\nimport { useClickAwayListener } from '@tecsinapse/react-web-kit';\n\nexport interface DropdownProps {\n  visible: boolean;\n  setVisible: Dispatch<SetStateAction<boolean>>;\n}\n\nconst Component: React.FC<DropdownProps & { children: JSX.Element }> = ({\n  visible,\n  setVisible,\n  children,\n}): JSX.Element => {\n  const refDropDown = React.useRef(null);\n  useClickAwayListener(refDropDown, setVisible);\n\n  return (\n    <Transition in={visible} timeout={300}>\n      {state => (\n        <StyledContainerDropdown\n          style={{ ...defaultStyles, ...transition['bottom'][state] }}\n          ref={refDropDown}\n        >\n          {children}\n        </StyledContainerDropdown>\n      )}\n    </Transition>\n  );\n};\n\nexport const Dropdown = Component;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;;;;;AAOA,MAAMA,SAA8D,GAAG,CAAC;EACtEC,OADsE;EAEtEC,UAFsE;EAGtEC;AAHsE,CAAD,KAIpD;EACjB,MAAMC,WAAW,GAAGC,KAAK,CAACC,MAAN,CAAa,IAAb,CAApB;EACA,IAAAC,iCAAA,EAAqBH,WAArB,EAAkCF,UAAlC;EAEA,OACE,oBAAC,gCAAD;IAAY,EAAE,EAAED,OAAhB;IAAyB,OAAO,EAAE;EAAlC,GACGO,KAAK,IACJ,oBAAC,+BAAD;IACE,KAAK,EAAE,EAAE,GAAGC,yBAAL;MAAoB,GAAGC,sBAAA,CAAW,QAAX,EAAqBF,KAArB;IAAvB,CADT;IAEE,GAAG,EAAEJ;EAFP,GAIGD,QAJH,CAFJ,CADF;AAYD,CApBD;;AAsBO,MAAMQ,QAAQ,GAAGX,SAAjB"}
+{"version":3,"file":"index.js","names":["Component","visible","setVisible","children","refDropDown","React","useRef","useClickAwayListener","state","defaultStyles","transition","Dropdown"],"sources":["../../../../src/components/atoms/Dropdown/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport { StyledContainerDropdown } from './styled';\nimport { Transition } from 'react-transition-group';\nimport { defaultStyles, transition } from '../../molecules/Select/animations';\nimport { Dispatch, SetStateAction } from 'react';\nimport { useClickAwayListener } from '@tecsinapse/react-web-kit';\n\nexport interface DropdownProps {\n  visible: boolean;\n  setVisible: Dispatch<SetStateAction<boolean>>;\n}\n\nconst Component: React.FC<DropdownProps & { children: JSX.Element }> = ({\n  visible,\n  setVisible,\n  children,\n}): JSX.Element => {\n  const refDropDown = React.useRef(null);\n  useClickAwayListener(refDropDown, setVisible);\n\n  return (\n    <Transition in={visible} timeout={300}>\n      {state => (\n        <StyledContainerDropdown\n          style={{ ...defaultStyles, ...transition['bottom'][state] }}\n          ref={refDropDown}\n        >\n          {children}\n        </StyledContainerDropdown>\n      )}\n    </Transition>\n  );\n};\n\nexport const Dropdown = Component;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;;;;;AAOA,MAAMA,SAA8D,GAAG,QAIpD;EAAA,IAJqD;IACtEC,OADsE;IAEtEC,UAFsE;IAGtEC;EAHsE,CAIrD;EACjB,MAAMC,WAAW,GAAGC,KAAK,CAACC,MAAN,CAAa,IAAb,CAApB;EACA,IAAAC,iCAAA,EAAqBH,WAArB,EAAkCF,UAAlC;EAEA,OACE,oBAAC,gCAAD;IAAY,EAAE,EAAED,OAAhB;IAAyB,OAAO,EAAE;EAAlC,GACGO,KAAK,IACJ,oBAAC,+BAAD;IACE,KAAK,EAAE,EAAE,GAAGC,yBAAL;MAAoB,GAAGC,sBAAA,CAAW,QAAX,EAAqBF,KAArB;IAAvB,CADT;IAEE,GAAG,EAAEJ;EAFP,GAIGD,QAJH,CAFJ,CADF;AAYD,CApBD;;AAsBO,MAAMQ,QAAQ,GAAGX,SAAjB"}

package/dist/components/atoms/Dropdown/styled.js

@@ -9,28 +9,37 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 
 var _reactCore = require("@tecsinapse/react-core");
 
+var _templateObject;
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const StyledContainerDropdown = (0, _styled.default)('div')`
-  width: auto;
-  background-color: ${({
-  theme
-}) => theme.miscellaneous.surfaceColor};
-  border-radius: ${({
-  theme
-}) => theme.borderRadius.mili};
-  box-shadow: 0 2px 8px
-    ${({
-  theme
-}) => (0, _reactCore.hex2rgba)(theme.miscellaneous.shadow, 0.05)};
-  position: absolute;
-  padding-bottom: ${({
-  theme
-}) => theme.spacing.mili};
-  margin-top: 8px;
-  z-index: ${({
-  theme
-}) => theme.zIndex.select};
-`;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+const StyledContainerDropdown = (0, _styled.default)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: auto;\n  background-color: ", ";\n  border-radius: ", ";\n  box-shadow: 0 2px 8px\n    ", ";\n  position: absolute;\n  padding-bottom: ", ";\n  margin-top: 8px;\n  z-index: ", ";\n"])), _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.miscellaneous.surfaceColor;
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.borderRadius.mili;
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return (0, _reactCore.hex2rgba)(theme.miscellaneous.shadow, 0.05);
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.spacing.mili;
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.zIndex.select;
+});
 exports.StyledContainerDropdown = StyledContainerDropdown;
 //# sourceMappingURL=styled.js.map

package/dist/components/atoms/Dropdown/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","names":["StyledContainerDropdown","styled","theme","miscellaneous","surfaceColor","borderRadius","mili","hex2rgba","shadow","spacing","zIndex","select"],"sources":["../../../../src/components/atoms/Dropdown/styled.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { hex2rgba, StyleProps } from '@tecsinapse/react-core';\n\nexport const StyledContainerDropdown = styled('div')<Partial<StyleProps>>`\n  width: auto;\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.05)};\n  position: absolute;\n  padding-bottom: ${({ theme }: StyleProps) => theme.spacing.mili};\n  margin-top: 8px;\n  z-index: ${({ theme }: StyleProps) => theme.zIndex.select};\n`;\n"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEO,MAAMA,uBAAuB,GAAG,IAAAC,eAAA,EAAO,KAAP,CAAmC;AAC1E;AACA,sBAAsB,CAAC;EAAEC;AAAF,CAAD,KAClBA,KAAK,CAACC,aAAN,CAAoBC,YAAa;AACrC,mBAAmB,CAAC;EAAEF;AAAF,CAAD,KAA2BA,KAAK,CAACG,YAAN,CAAmBC,IAAK;AACtE;AACA,MAAM,CAAC;EAAEJ;AAAF,CAAD,KAA2B,IAAAK,mBAAA,EAASL,KAAK,CAACC,aAAN,CAAoBK,MAA7B,EAAqC,IAArC,CAA2C;AAC5E;AACA,oBAAoB,CAAC;EAAEN;AAAF,CAAD,KAA2BA,KAAK,CAACO,OAAN,CAAcH,IAAK;AAClE;AACA,aAAa,CAAC;EAAEJ;AAAF,CAAD,KAA2BA,KAAK,CAACQ,MAAN,CAAaC,MAAO;AAC5D,CAXO"}
+{"version":3,"file":"styled.js","names":["StyledContainerDropdown","styled","theme","miscellaneous","surfaceColor","borderRadius","mili","hex2rgba","shadow","spacing","zIndex","select"],"sources":["../../../../src/components/atoms/Dropdown/styled.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { hex2rgba, StyleProps } from '@tecsinapse/react-core';\n\nexport const StyledContainerDropdown = styled('div')<Partial<StyleProps>>`\n  width: auto;\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.05)};\n  position: absolute;\n  padding-bottom: ${({ theme }: StyleProps) => theme.spacing.mili};\n  margin-top: 8px;\n  z-index: ${({ theme }: StyleProps) => theme.zIndex.select};\n`;\n"],"mappings":";;;;;;;AAAA;;AACA;;;;;;;;AAEO,MAAMA,uBAAuB,GAAG,IAAAC,eAAA,EAAO,KAAP,CAAH,qQAEd;EAAA,IAAC;IAAEC;EAAF,CAAD;EAAA,OAClBA,KAAK,CAACC,aAAN,CAAoBC,YADF;AAAA,CAFc,EAIjB;EAAA,IAAC;IAAEF;EAAF,CAAD;EAAA,OAA2BA,KAAK,CAACG,YAAN,CAAmBC,IAA9C;AAAA,CAJiB,EAM9B;EAAA,IAAC;IAAEJ;EAAF,CAAD;EAAA,OAA2B,IAAAK,mBAAA,EAASL,KAAK,CAACC,aAAN,CAAoBK,MAA7B,EAAqC,IAArC,CAA3B;AAAA,CAN8B,EAQhB;EAAA,IAAC;IAAEN;EAAF,CAAD;EAAA,OAA2BA,KAAK,CAACO,OAAN,CAAcH,IAAzC;AAAA,CARgB,EAUvB;EAAA,IAAC;IAAEJ;EAAF,CAAD;EAAA,OAA2BA,KAAK,CAACQ,MAAN,CAAaC,MAAxC;AAAA,CAVuB,CAA7B"}

package/dist/components/atoms/Input/Input.js

@@ -17,30 +17,32 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 Input = _react.default.forwardRef(({
-  label,
-  labelColor,
-  labelColorVariant,
-  labelColorTone,
-  labelTypography,
-  labelStack,
-  labelWeight,
-  leftComponent,
-  rightComponent,
-  disabled,
-  style,
-  borderColor,
-  borderColorGradation,
-  inputContainerStyle,
-  variant = 'default',
-  hintComponent,
-  hint,
-  onFocus,
-  onBlur,
-  placeholder,
-  value,
-  ...rest
-}, ref) => {
+const Input = _react.default.forwardRef((_ref, ref) => {
+  let {
+    label,
+    labelColor,
+    labelColorVariant,
+    labelColorTone,
+    labelTypography,
+    labelStack,
+    labelWeight,
+    leftComponent,
+    rightComponent,
+    disabled,
+    style,
+    borderColor,
+    borderColorGradation,
+    inputContainerStyle,
+    variant = 'default',
+    hintComponent,
+    hint,
+    onFocus,
+    onBlur,
+    placeholder,
+    value,
+    ...rest
+  } = _ref;
+
   const _hint = hintComponent || _react.default.createElement(_reactCore.Hint, {
     text: hint,
     variant: variant

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["Input","React","forwardRef","label","labelColor","labelColorVariant","labelColorTone","labelTypography","labelStack","labelWeight","leftComponent","rightComponent","disabled","style","borderColor","borderColorGradation","inputContainerStyle","variant","hintComponent","hint","onFocus","onBlur","placeholder","value","rest","ref","_hint","focused","handleBlur","handleFocus","useInputFocus","onlyLabel","undefined","displayName"],"sources":["../../../../src/components/atoms/Input/Input.tsx"],"sourcesContent":["import {\n  Hint,\n  InputContainer,\n  InputContainerProps,\n  InputElementProps,\n  useInputFocus,\n} from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { TextInput, View } from 'react-native';\nimport { StyledWebTextInput } from './styled';\n\nexport type InputWebProps = Omit<InputElementProps, 'style'> &\n  InputContainerProps & { ref?: React.Ref<HTMLInputElement | undefined> };\n\nconst Input: FC<InputWebProps> = React.forwardRef(\n  (\n    {\n      label,\n      labelColor,\n      labelColorVariant,\n      labelColorTone,\n      labelTypography,\n      labelStack,\n      labelWeight,\n      leftComponent,\n      rightComponent,\n      disabled,\n      style,\n      borderColor,\n      borderColorGradation,\n      inputContainerStyle,\n      variant = 'default',\n      hintComponent,\n      hint,\n      onFocus,\n      onBlur,\n      placeholder,\n      value,\n      ...rest\n    },\n    ref\n  ) => {\n    const _hint = hintComponent || <Hint text={hint} variant={variant} />;\n    const { focused, handleBlur, handleFocus } = useInputFocus(\n      onFocus,\n      onBlur,\n      !disabled\n    );\n\n    const onlyLabel = label && !placeholder;\n\n    return (\n      <View style={style}>\n        <InputContainer\n          label={value ? label : undefined}\n          labelColor={labelColor}\n          labelColorVariant={labelColorVariant}\n          labelColorTone={labelColorTone}\n          labelTypography={labelTypography}\n          labelStack={labelStack}\n          labelWeight={labelWeight}\n          leftComponent={leftComponent}\n          rightComponent={rightComponent}\n          borderColor={borderColor}\n          borderColorGradation={borderColorGradation}\n          inputContainerStyle={inputContainerStyle}\n          focused={focused}\n          disabled={disabled}\n          variant={variant}\n        >\n          <StyledWebTextInput\n            {...rest}\n            placeholder={onlyLabel ? label : placeholder}\n            value={value}\n            ref={ref as React.Ref<TextInput>}\n            disabled={disabled}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n          />\n        </InputContainer>\n        {hint && _hint}\n      </View>\n    );\n  }\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":";;;;;;;AAAA;;AAOA;;AACA;;AACA;;;;;;AAKA,MAAMA,KAAwB,GAAGC,cAAA,CAAMC,UAAN,CAC/B,CACE;EACEC,KADF;EAEEC,UAFF;EAGEC,iBAHF;EAIEC,cAJF;EAKEC,eALF;EAMEC,UANF;EAOEC,WAPF;EAQEC,aARF;EASEC,cATF;EAUEC,QAVF;EAWEC,KAXF;EAYEC,WAZF;EAaEC,oBAbF;EAcEC,mBAdF;EAeEC,OAAO,GAAG,SAfZ;EAgBEC,aAhBF;EAiBEC,IAjBF;EAkBEC,OAlBF;EAmBEC,MAnBF;EAoBEC,WApBF;EAqBEC,KArBF;EAsBE,GAAGC;AAtBL,CADF,EAyBEC,GAzBF,KA0BK;EACH,MAAMC,KAAK,GAAGR,aAAa,IAAI,6BAAC,eAAD;IAAM,IAAI,EAAEC,IAAZ;IAAkB,OAAO,EAAEF;EAA3B,EAA/B;;EACA,MAAM;IAAEU,OAAF;IAAWC,UAAX;IAAuBC;EAAvB,IAAuC,IAAAC,wBAAA,EAC3CV,OAD2C,EAE3CC,MAF2C,EAG3C,CAACT,QAH0C,CAA7C;EAMA,MAAMmB,SAAS,GAAG5B,KAAK,IAAI,CAACmB,WAA5B;EAEA,OACE,6BAAC,oBAAD;IAAM,KAAK,EAAET;EAAb,GACE,6BAAC,yBAAD;IACE,KAAK,EAAEU,KAAK,GAAGpB,KAAH,GAAW6B,SADzB;IAEE,UAAU,EAAE5B,UAFd;IAGE,iBAAiB,EAAEC,iBAHrB;IAIE,cAAc,EAAEC,cAJlB;IAKE,eAAe,EAAEC,eALnB;IAME,UAAU,EAAEC,UANd;IAOE,WAAW,EAAEC,WAPf;IAQE,aAAa,EAAEC,aARjB;IASE,cAAc,EAAEC,cATlB;IAUE,WAAW,EAAEG,WAVf;IAWE,oBAAoB,EAAEC,oBAXxB;IAYE,mBAAmB,EAAEC,mBAZvB;IAaE,OAAO,EAAEW,OAbX;IAcE,QAAQ,EAAEf,QAdZ;IAeE,OAAO,EAAEK;EAfX,GAiBE,6BAAC,0BAAD,eACMO,IADN;IAEE,WAAW,EAAEO,SAAS,GAAG5B,KAAH,GAAWmB,WAFnC;IAGE,KAAK,EAAEC,KAHT;IAIE,GAAG,EAAEE,GAJP;IAKE,QAAQ,EAAEb,QALZ;IAME,OAAO,EAAEiB,WANX;IAOE,MAAM,EAAED;EAPV,GAjBF,CADF,EA4BGT,IAAI,IAAIO,KA5BX,CADF;AAgCD,CArE8B,CAAjC;;AAwEA1B,KAAK,CAACiC,WAAN,GAAoB,OAApB;eAEejC,K"}
+{"version":3,"file":"Input.js","names":["Input","React","forwardRef","ref","label","labelColor","labelColorVariant","labelColorTone","labelTypography","labelStack","labelWeight","leftComponent","rightComponent","disabled","style","borderColor","borderColorGradation","inputContainerStyle","variant","hintComponent","hint","onFocus","onBlur","placeholder","value","rest","_hint","focused","handleBlur","handleFocus","useInputFocus","onlyLabel","undefined","displayName"],"sources":["../../../../src/components/atoms/Input/Input.tsx"],"sourcesContent":["import {\n  Hint,\n  InputContainer,\n  InputContainerProps,\n  InputElementProps,\n  useInputFocus,\n} from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { TextInput, View } from 'react-native';\nimport { StyledWebTextInput } from './styled';\n\nexport type InputWebProps = Omit<InputElementProps, 'style'> &\n  InputContainerProps & { ref?: React.Ref<HTMLInputElement | undefined> };\n\nconst Input: FC<InputWebProps> = React.forwardRef(\n  (\n    {\n      label,\n      labelColor,\n      labelColorVariant,\n      labelColorTone,\n      labelTypography,\n      labelStack,\n      labelWeight,\n      leftComponent,\n      rightComponent,\n      disabled,\n      style,\n      borderColor,\n      borderColorGradation,\n      inputContainerStyle,\n      variant = 'default',\n      hintComponent,\n      hint,\n      onFocus,\n      onBlur,\n      placeholder,\n      value,\n      ...rest\n    },\n    ref\n  ) => {\n    const _hint = hintComponent || <Hint text={hint} variant={variant} />;\n    const { focused, handleBlur, handleFocus } = useInputFocus(\n      onFocus,\n      onBlur,\n      !disabled\n    );\n\n    const onlyLabel = label && !placeholder;\n\n    return (\n      <View style={style}>\n        <InputContainer\n          label={value ? label : undefined}\n          labelColor={labelColor}\n          labelColorVariant={labelColorVariant}\n          labelColorTone={labelColorTone}\n          labelTypography={labelTypography}\n          labelStack={labelStack}\n          labelWeight={labelWeight}\n          leftComponent={leftComponent}\n          rightComponent={rightComponent}\n          borderColor={borderColor}\n          borderColorGradation={borderColorGradation}\n          inputContainerStyle={inputContainerStyle}\n          focused={focused}\n          disabled={disabled}\n          variant={variant}\n        >\n          <StyledWebTextInput\n            {...rest}\n            placeholder={onlyLabel ? label : placeholder}\n            value={value}\n            ref={ref as React.Ref<TextInput>}\n            disabled={disabled}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n          />\n        </InputContainer>\n        {hint && _hint}\n      </View>\n    );\n  }\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":";;;;;;;AAAA;;AAOA;;AACA;;AACA;;;;;;AAKA,MAAMA,KAAwB,GAAGC,cAAA,CAAMC,UAAN,CAC/B,OAyBEC,GAzBF,KA0BK;EAAA,IAzBH;IACEC,KADF;IAEEC,UAFF;IAGEC,iBAHF;IAIEC,cAJF;IAKEC,eALF;IAMEC,UANF;IAOEC,WAPF;IAQEC,aARF;IASEC,cATF;IAUEC,QAVF;IAWEC,KAXF;IAYEC,WAZF;IAaEC,oBAbF;IAcEC,mBAdF;IAeEC,OAAO,GAAG,SAfZ;IAgBEC,aAhBF;IAiBEC,IAjBF;IAkBEC,OAlBF;IAmBEC,MAnBF;IAoBEC,WApBF;IAqBEC,KArBF;IAsBE,GAAGC;EAtBL,CAyBG;;EACH,MAAMC,KAAK,GAAGP,aAAa,IAAI,6BAAC,eAAD;IAAM,IAAI,EAAEC,IAAZ;IAAkB,OAAO,EAAEF;EAA3B,EAA/B;;EACA,MAAM;IAAES,OAAF;IAAWC,UAAX;IAAuBC;EAAvB,IAAuC,IAAAC,wBAAA,EAC3CT,OAD2C,EAE3CC,MAF2C,EAG3C,CAACT,QAH0C,CAA7C;EAMA,MAAMkB,SAAS,GAAG3B,KAAK,IAAI,CAACmB,WAA5B;EAEA,OACE,6BAAC,oBAAD;IAAM,KAAK,EAAET;EAAb,GACE,6BAAC,yBAAD;IACE,KAAK,EAAEU,KAAK,GAAGpB,KAAH,GAAW4B,SADzB;IAEE,UAAU,EAAE3B,UAFd;IAGE,iBAAiB,EAAEC,iBAHrB;IAIE,cAAc,EAAEC,cAJlB;IAKE,eAAe,EAAEC,eALnB;IAME,UAAU,EAAEC,UANd;IAOE,WAAW,EAAEC,WAPf;IAQE,aAAa,EAAEC,aARjB;IASE,cAAc,EAAEC,cATlB;IAUE,WAAW,EAAEG,WAVf;IAWE,oBAAoB,EAAEC,oBAXxB;IAYE,mBAAmB,EAAEC,mBAZvB;IAaE,OAAO,EAAEU,OAbX;IAcE,QAAQ,EAAEd,QAdZ;IAeE,OAAO,EAAEK;EAfX,GAiBE,6BAAC,0BAAD,eACMO,IADN;IAEE,WAAW,EAAEM,SAAS,GAAG3B,KAAH,GAAWmB,WAFnC;IAGE,KAAK,EAAEC,KAHT;IAIE,GAAG,EAAErB,GAJP;IAKE,QAAQ,EAAEU,QALZ;IAME,OAAO,EAAEgB,WANX;IAOE,MAAM,EAAED;EAPV,GAjBF,CADF,EA4BGR,IAAI,IAAIM,KA5BX,CADF;AAgCD,CArE8B,CAAjC;;AAwEA1B,KAAK,CAACiC,WAAN,GAAoB,OAApB;eAEejC,K"}

package/dist/components/atoms/Input/styled.js

@@ -9,12 +9,12 @@ var _native = _interopRequireDefault(require("@emotion/native"));
 
 var _reactCore = require("@tecsinapse/react-core");
 
+var _templateObject;
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const StyledWebTextInput = (0, _native.default)(_reactCore.InputElement)`
-  &:focus-visible {
-    outline-width: 0;
-  }
-`;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+const StyledWebTextInput = (0, _native.default)(_reactCore.InputElement)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &:focus-visible {\n    outline-width: 0;\n  }\n"])));
 exports.StyledWebTextInput = StyledWebTextInput;
 //# sourceMappingURL=styled.js.map

package/dist/components/atoms/Input/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","names":["StyledWebTextInput","styled","InputElement"],"sources":["../../../../src/components/atoms/Input/styled.ts"],"sourcesContent":["import styled from '@emotion/native';\nimport { InputElement, StyleProps } from '@tecsinapse/react-core';\n\nexport const StyledWebTextInput = styled(InputElement)<Partial<StyleProps>>`\n  &:focus-visible {\n    outline-width: 0;\n  }\n`;\n"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEO,MAAMA,kBAAkB,GAAG,IAAAC,eAAA,EAAOC,uBAAP,CAA0C;AAC5E;AACA;AACA;AACA,CAJO"}
+{"version":3,"file":"styled.js","names":["StyledWebTextInput","styled","InputElement"],"sources":["../../../../src/components/atoms/Input/styled.ts"],"sourcesContent":["import styled from '@emotion/native';\nimport { InputElement, StyleProps } from '@tecsinapse/react-core';\n\nexport const StyledWebTextInput = styled(InputElement)<Partial<StyleProps>>`\n  &:focus-visible {\n    outline-width: 0;\n  }\n`;\n"],"mappings":";;;;;;;AAAA;;AACA;;;;;;;;AAEO,MAAMA,kBAAkB,GAAG,IAAAC,eAAA,EAAOC,uBAAP,CAAH,wHAAxB"}