@tecsinapse/react-web-kit 1.18.5 → 1.19.0

package/CHANGELOG.md

@@ -3,6 +3,42 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.19.0](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.18.7...@tecsinapse/react-web-kit@1.19.0) (2022-08-24)
+
+
+### Bug Fixes
+
+* change PressableSurface with Pressable on LabeledSwitch label ([5029a74](https://github.com/tecsinapse/design-system/commit/5029a74bfc272f5aecb3bdae9152f0920a36c8bb))
+* LabeledSwitch disabled and react-core exports ([855f12f](https://github.com/tecsinapse/design-system/commit/855f12f0dff1ce4c5969eba723707340e60a3310))
+* merge ([b32e31d](https://github.com/tecsinapse/design-system/commit/b32e31d0a73a0ec3d20d65aa672e198fd874997a))
+
+
+### Features
+
+* grid web responsive support ([4111063](https://github.com/tecsinapse/design-system/commit/411106311d37d62bae4736c07f71038d5564319c))
+* grid web responsive support ([fd91539](https://github.com/tecsinapse/design-system/commit/fd91539dae6df151beeb48ce3749623e2bb4dedc))
+* LabeledSwitch implementation. ([519fe87](https://github.com/tecsinapse/design-system/commit/519fe8769d687f15af09c9fb77fe98a727f9078b))
+
+
+
+
+
+## [1.18.7](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.18.6...@tecsinapse/react-web-kit@1.18.7) (2022-08-18)
+
+**Note:** Version bump only for package @tecsinapse/react-web-kit
+
+
+
+
+
+## [1.18.6](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.18.5...@tecsinapse/react-web-kit@1.18.6) (2022-08-09)
+
+**Note:** Version bump only for package @tecsinapse/react-web-kit
+
+
+
+
+
 ## [1.18.5](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.18.4...@tecsinapse/react-web-kit@1.18.5) (2022-08-08)
 
 

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

@@ -3,6 +3,8 @@ import { FC } from 'react';
 export declare type WebButtonProps = ButtonProps & {
     onMouseOver?: () => void;
     onMouseOut?: () => void;
+    onPressIn?: () => void;
+    onPressOut?: () => void;
 };
 declare const Button: FC<WebButtonProps>;
 export default Button;

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

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _useMouseHover = require("./hooks/useMouseHover");
 
+var _useMousePressed = require("./hooks/useMousePressed");
+
 var _styled = require("./styled");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -20,6 +22,11 @@ const Button = ({
   disabled,
   frozen,
   state,
+  variant,
+  onMouseOut,
+  onMouseOver,
+  onPressIn,
+  onPressOut,
   ...rest
 }) => {
   const _frozen = frozen || state === 'loading';
@@ -28,14 +35,23 @@ const Button = ({
     mouseOver,
     handleMouseOut,
     handleMouseOver
-  } = (0, _useMouseHover.useMouseHover)(!disabled && !_frozen);
+  } = (0, _useMouseHover.useMouseHover)(!disabled && !_frozen, onMouseOut, onMouseOver);
+  const {
+    pressed,
+    handlePressIn,
+    handlePressOut
+  } = (0, _useMousePressed.useMousePressed)(!disabled && !_frozen, onPressIn, onPressOut);
   return _react.default.createElement(_styled.StyledWebButton, _extends({}, rest, {
     disabled: disabled,
     frozen: _frozen,
     state: state,
     onMouseOver: handleMouseOver,
     onMouseOut: handleMouseOut,
-    mouseOver: mouseOver
+    mouseOver: mouseOver,
+    onPressIn: handlePressIn,
+    onPressOut: handlePressOut,
+    pressed: pressed,
+    variant: variant
   }), children);
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/Button/Button.tsx"],"names":["Button","children","disabled","frozen","state","rest","_frozen","mouseOver","handleMouseOut","handleMouseOver"],"mappings":";;;;;;;AACA;;AACA;;AACA;;;;;;AAWA,MAAMA,MAA0B,GAAG,CAAC;AAClCC,EAAAA,QADkC;AAElCC,EAAAA,QAFkC;AAGlCC,EAAAA,MAHkC;AAIlCC,EAAAA,KAJkC;AAKlC,KAAGC;AAL+B,CAAD,KAMhB;AACjB,QAAMC,OAAO,GAAGH,MAAM,IAAIC,KAAK,KAAK,SAApC;;AACA,QAAM;AAAEG,IAAAA,SAAF;AAAaC,IAAAA,cAAb;AAA6BC,IAAAA;AAA7B,MAAiD,kCACrD,CAACP,QAAD,IAAa,CAACI,OADuC,CAAvD;AAIA,SACE,6BAAC,uBAAD,eACMD,IADN;AAEE,IAAA,QAAQ,EAAEH,QAFZ;AAGE,IAAA,MAAM,EAAEI,OAHV;AAIE,IAAA,KAAK,EAAEF,KAJT;AAKE,IAAA,WAAW,EAAEK,eALf;AAME,IAAA,UAAU,EAAED,cANd;AAOE,IAAA,SAAS,EAAED;AAPb,MASGN,QATH,CADF;AAaD,CAzBD;;eA2BeD,M","sourcesContent":["import { ButtonProps } from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { useMouseHover } from './hooks/useMouseHover';\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};\n\nconst Button: FC<WebButtonProps> = ({\n  children,\n  disabled,\n  frozen,\n  state,\n  ...rest\n}): JSX.Element => {\n  const _frozen = frozen || state === 'loading';\n  const { mouseOver, handleMouseOut, handleMouseOver } = useMouseHover(\n    !disabled && !_frozen\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    >\n      {children}\n    </StyledWebButton>\n  );\n};\n\nexport default Button;\n"],"file":"Button.js"}
+{"version":3,"sources":["../../../../src/components/atoms/Button/Button.tsx"],"names":["Button","children","disabled","frozen","state","variant","onMouseOut","onMouseOver","onPressIn","onPressOut","rest","_frozen","mouseOver","handleMouseOut","handleMouseOver","pressed","handlePressIn","handlePressOut"],"mappings":";;;;;;;AACA;;AACA;;AACA;;AACA;;;;;;AAaA,MAAMA,MAA0B,GAAG,CAAC;AAClCC,EAAAA,QADkC;AAElCC,EAAAA,QAFkC;AAGlCC,EAAAA,MAHkC;AAIlCC,EAAAA,KAJkC;AAKlCC,EAAAA,OALkC;AAMlCC,EAAAA,UANkC;AAOlCC,EAAAA,WAPkC;AAQlCC,EAAAA,SARkC;AASlCC,EAAAA,UATkC;AAUlC,KAAGC;AAV+B,CAAD,KAWhB;AACjB,QAAMC,OAAO,GAAGR,MAAM,IAAIC,KAAK,KAAK,SAApC;;AACA,QAAM;AAAEQ,IAAAA,SAAF;AAAaC,IAAAA,cAAb;AAA6BC,IAAAA;AAA7B,MAAiD,kCACrD,CAACZ,QAAD,IAAa,CAACS,OADuC,EAErDL,UAFqD,EAGrDC,WAHqD,CAAvD;AAKA,QAAM;AAAEQ,IAAAA,OAAF;AAAWC,IAAAA,aAAX;AAA0BC,IAAAA;AAA1B,MAA6C,sCACjD,CAACf,QAAD,IAAa,CAACS,OADmC,EAEjDH,SAFiD,EAGjDC,UAHiD,CAAnD;AAMA,SACE,6BAAC,uBAAD,eACMC,IADN;AAEE,IAAA,QAAQ,EAAER,QAFZ;AAGE,IAAA,MAAM,EAAES,OAHV;AAIE,IAAA,KAAK,EAAEP,KAJT;AAKE,IAAA,WAAW,EAAEU,eALf;AAME,IAAA,UAAU,EAAED,cANd;AAOE,IAAA,SAAS,EAAED,SAPb;AAQE,IAAA,SAAS,EAAEI,aARb;AASE,IAAA,UAAU,EAAEC,cATd;AAUE,IAAA,OAAO,EAAEF,OAVX;AAWE,IAAA,OAAO,EAAEV;AAXX,MAaGJ,QAbH,CADF;AAiBD,CAzCD;;eA2CeD,M","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"],"file":"Button.js"}

package/dist/components/atoms/Button/hooks/useMouseHover.d.ts

@@ -1,5 +1,5 @@
-export declare const useMouseHover: (active: boolean) => {
+export declare const useMouseHover: (active: boolean, onMouseOver?: (() => void) | undefined, onMouseOut?: (() => void) | undefined) => {
     mouseOver: boolean;
-    handleMouseOver: () => false | void;
-    handleMouseOut: () => false | void;
+    handleMouseOver: () => void;
+    handleMouseOut: () => void;
 };

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

@@ -7,10 +7,20 @@ exports.useMouseHover = void 0;
 
 var _react = require("react");
 
-const useMouseHover = active => {
+const useMouseHover = (active, onMouseOver, onMouseOut) => {
   const [mouseOver, setMouseOver] = (0, _react.useState)(false);
-  const handleMouseOver = (0, _react.useCallback)(() => active && setMouseOver(true), [active, setMouseOver]);
-  const handleMouseOut = (0, _react.useCallback)(() => active && setMouseOver(false), [active, setMouseOver]);
+  const handleMouseOver = (0, _react.useCallback)(() => {
+    if (active) {
+      setMouseOver(true);
+      onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver();
+    }
+  }, [active, setMouseOver]);
+  const handleMouseOut = (0, _react.useCallback)(() => {
+    if (active) {
+      setMouseOver(false);
+      onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut();
+    }
+  }, [active, setMouseOver]);
   return {
     mouseOver,
     handleMouseOver,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/atoms/Button/hooks/useMouseHover.ts"],"names":["useMouseHover","active","mouseOver","setMouseOver","handleMouseOver","handleMouseOut"],"mappings":";;;;;;;AAAA;;AAEO,MAAMA,aAAa,GAAIC,MAAD,IAAqB;AAChD,QAAM,CAACC,SAAD,EAAYC,YAAZ,IAA4B,qBAAkB,KAAlB,CAAlC;AAEA,QAAMC,eAAe,GAAG,wBAAY,MAAMH,MAAM,IAAIE,YAAY,CAAC,IAAD,CAAxC,EAAgD,CACtEF,MADsE,EAEtEE,YAFsE,CAAhD,CAAxB;AAKA,QAAME,cAAc,GAAG,wBAAY,MAAMJ,MAAM,IAAIE,YAAY,CAAC,KAAD,CAAxC,EAAiD,CACtEF,MADsE,EAEtEE,YAFsE,CAAjD,CAAvB;AAKA,SAAO;AACLD,IAAAA,SADK;AAELE,IAAAA,eAFK;AAGLC,IAAAA;AAHK,GAAP;AAKD,CAlBM","sourcesContent":["import { useCallback, useState } from 'react';\n\nexport const useMouseHover = (active: boolean) => {\n  const [mouseOver, setMouseOver] = useState<boolean>(false);\n\n  const handleMouseOver = useCallback(() => active && setMouseOver(true), [\n    active,\n    setMouseOver,\n  ]);\n\n  const handleMouseOut = useCallback(() => active && setMouseOver(false), [\n    active,\n    setMouseOver,\n  ]);\n\n  return {\n    mouseOver,\n    handleMouseOver,\n    handleMouseOut,\n  };\n};\n"],"file":"useMouseHover.js"}
+{"version":3,"sources":["../../../../../src/components/atoms/Button/hooks/useMouseHover.ts"],"names":["useMouseHover","active","onMouseOver","onMouseOut","mouseOver","setMouseOver","handleMouseOver","handleMouseOut"],"mappings":";;;;;;;AAAA;;AAEO,MAAMA,aAAa,GAAG,CAC3BC,MAD2B,EAE3BC,WAF2B,EAG3BC,UAH2B,KAIxB;AACH,QAAM,CAACC,SAAD,EAAYC,YAAZ,IAA4B,qBAAkB,KAAlB,CAAlC;AAEA,QAAMC,eAAe,GAAG,wBAAY,MAAM;AACxC,QAAIL,MAAJ,EAAY;AACVI,MAAAA,YAAY,CAAC,IAAD,CAAZ;AACAH,MAAAA,WAAW,SAAX,IAAAA,WAAW,WAAX,YAAAA,WAAW;AACZ;AACF,GALuB,EAKrB,CAACD,MAAD,EAASI,YAAT,CALqB,CAAxB;AAOA,QAAME,cAAc,GAAG,wBAAY,MAAM;AACvC,QAAIN,MAAJ,EAAY;AACVI,MAAAA,YAAY,CAAC,KAAD,CAAZ;AACAF,MAAAA,UAAU,SAAV,IAAAA,UAAU,WAAV,YAAAA,UAAU;AACX;AACF,GALsB,EAKpB,CAACF,MAAD,EAASI,YAAT,CALoB,CAAvB;AAOA,SAAO;AACLD,IAAAA,SADK;AAELE,IAAAA,eAFK;AAGLC,IAAAA;AAHK,GAAP;AAKD,CA1BM","sourcesContent":["import { useCallback, useState } from 'react';\n\nexport const useMouseHover = (\n  active: boolean,\n  onMouseOver?: () => void,\n  onMouseOut?: () => void\n) => {\n  const [mouseOver, setMouseOver] = useState<boolean>(false);\n\n  const handleMouseOver = useCallback(() => {\n    if (active) {\n      setMouseOver(true);\n      onMouseOver?.();\n    }\n  }, [active, setMouseOver]);\n\n  const handleMouseOut = useCallback(() => {\n    if (active) {\n      setMouseOver(false);\n      onMouseOut?.();\n    }\n  }, [active, setMouseOver]);\n\n  return {\n    mouseOver,\n    handleMouseOver,\n    handleMouseOut,\n  };\n};\n"],"file":"useMouseHover.js"}

package/dist/components/atoms/Button/hooks/useMousePressed.d.ts

@@ -0,0 +1,5 @@
+export declare const useMousePressed: (active: boolean, onPressIn?: (() => void) | undefined, onPressOut?: (() => void) | undefined) => {
+    pressed: boolean;
+    handlePressIn: () => void;
+    handlePressOut: () => void;
+};

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

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMousePressed = void 0;
+
+var _react = require("react");
+
+const useMousePressed = (active, onPressIn, onPressOut) => {
+  const [pressed, setPressed] = (0, _react.useState)(false);
+  const handlePressIn = (0, _react.useCallback)(() => {
+    if (active) {
+      setPressed(true);
+      onPressIn === null || onPressIn === void 0 ? void 0 : onPressIn();
+    }
+  }, [active, setPressed]);
+  const handlePressOut = (0, _react.useCallback)(() => {
+    if (active) {
+      setPressed(false);
+      onPressOut === null || onPressOut === void 0 ? void 0 : onPressOut();
+    }
+  }, [active, setPressed]);
+  return {
+    pressed,
+    handlePressIn,
+    handlePressOut
+  };
+};
+
+exports.useMousePressed = useMousePressed;
+//# sourceMappingURL=useMousePressed.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/atoms/Button/hooks/useMousePressed.ts"],"names":["useMousePressed","active","onPressIn","onPressOut","pressed","setPressed","handlePressIn","handlePressOut"],"mappings":";;;;;;;AAAA;;AAEO,MAAMA,eAAe,GAAG,CAC7BC,MAD6B,EAE7BC,SAF6B,EAG7BC,UAH6B,KAI1B;AACH,QAAM,CAACC,OAAD,EAAUC,UAAV,IAAwB,qBAAkB,KAAlB,CAA9B;AAEA,QAAMC,aAAa,GAAG,wBAAY,MAAM;AACtC,QAAIL,MAAJ,EAAY;AACVI,MAAAA,UAAU,CAAC,IAAD,CAAV;AACAH,MAAAA,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS;AACV;AACF,GALqB,EAKnB,CAACD,MAAD,EAASI,UAAT,CALmB,CAAtB;AAOA,QAAME,cAAc,GAAG,wBAAY,MAAM;AACvC,QAAIN,MAAJ,EAAY;AACVI,MAAAA,UAAU,CAAC,KAAD,CAAV;AACAF,MAAAA,UAAU,SAAV,IAAAA,UAAU,WAAV,YAAAA,UAAU;AACX;AACF,GALsB,EAKpB,CAACF,MAAD,EAASI,UAAT,CALoB,CAAvB;AAOA,SAAO;AACLD,IAAAA,OADK;AAELE,IAAAA,aAFK;AAGLC,IAAAA;AAHK,GAAP;AAKD,CA1BM","sourcesContent":["import { useCallback, useState } from 'react';\n\nexport const useMousePressed = (\n  active: boolean,\n  onPressIn?: () => void,\n  onPressOut?: () => void\n) => {\n  const [pressed, setPressed] = useState<boolean>(false);\n\n  const handlePressIn = useCallback(() => {\n    if (active) {\n      setPressed(true);\n      onPressIn?.();\n    }\n  }, [active, setPressed]);\n\n  const handlePressOut = useCallback(() => {\n    if (active) {\n      setPressed(false);\n      onPressOut?.();\n    }\n  }, [active, setPressed]);\n\n  return {\n    pressed,\n    handlePressIn,\n    handlePressOut,\n  };\n};\n"],"file":"useMousePressed.js"}

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

@@ -23,13 +23,18 @@ const webStyles = () => {
 
 const hoverStyles = ({
   mouseOver,
+  pressed,
   theme,
-  color = 'primary',
+  variant = 'filled',
   disabled
 }) => {
-  return mouseOver && !disabled && (0, _native.css)`
-      background-color: ${theme === null || theme === void 0 ? void 0 : theme.color[color].dark};
-      border-color: ${theme === null || theme === void 0 ? void 0 : theme.color[color].dark};
+  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]};
     `;
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/Button/styled.ts"],"names":["webStyles","hoverStyles","mouseOver","theme","color","disabled","dark","StyledWebButton","Button"],"mappings":";;;;;;;AAAA;;AACA;;;;;;AAGA,MAAMA,SAAS,GAAG,MAAM;AACtB,SAAO,gBAAI;AACb;AACA;AACA;AACA,GAJE;AAKD,CAND;;AAQA,MAAMC,WAAW,GAAG,CAAC;AACnBC,EAAAA,SADmB;AAEnBC,EAAAA,KAFmB;AAGnBC,EAAAA,KAAK,GAAG,SAHW;AAInBC,EAAAA;AAJmB,CAAD,KAKiD;AACnE,SACEH,SAAS,IACT,CAACG,QADD,IAEA,gBAAI;AACR,0BAA0BF,KADnB,aACmBA,KADnB,uBACmBA,KAAK,CAAEC,KAAP,CAAaA,KAAb,EAAoBE,IAAK;AACnD,sBAAsBH,KAFf,aAEeA,KAFf,uBAEeA,KAAK,CAAEC,KAAP,CAAaA,KAAb,EAAoBE,IAAK;AAC/C,KANE;AAQD,CAdD;;AAgBO,MAAMC,eAAe,GAAG,qBAAOC,iBAAP,EAE7BR,SAF6B,EAElBC,WAFkB,CAAxB","sourcesContent":["import styled, { css } from '@emotion/native';\nimport { Button, StyleProps } 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  theme,\n  color = 'primary',\n  disabled,\n}: { mouseOver: boolean } & WebButtonProps & Partial<StyleProps>) => {\n  return (\n    mouseOver &&\n    !disabled &&\n    css`\n      background-color: ${theme?.color[color].dark};\n      border-color: ${theme?.color[color].dark};\n    `\n  );\n};\n\nexport const StyledWebButton = styled(Button)<\n  { mouseOver: boolean } & WebButtonProps & Partial<StyleProps>\n>(webStyles, hoverStyles);\n"],"file":"styled.js"}
+{"version":3,"sources":["../../../../src/components/atoms/Button/styled.ts"],"names":["webStyles","hoverStyles","mouseOver","pressed","theme","variant","disabled","variantColor","colorVC","variantColorGradation","colorGradationVC","variantBorderColor","borderColorVC","variantBorderColorGradation","borderColorGradationVC","color","StyledWebButton","Button"],"mappings":";;;;;;;AAAA;;AACA;;;;;;AAUA,MAAMA,SAAS,GAAG,MAAM;AACtB,SAAO,gBAAI;AACb;AACA;AACA;AACA,GAJE;AAKD,CAND;;AAQA,MAAMC,WAAW,GAAG,CAAC;AACnBC,EAAAA,SADmB;AAEnBC,EAAAA,OAFmB;AAGnBC,EAAAA,KAHmB;AAInBC,EAAAA,OAAO,GAAG,QAJS;AAKnBC,EAAAA;AALmB,CAAD,KAOM;AACxB,QAAMC,YAAY,GAAGC,mBAAQH,OAAR,CAArB;AACA,QAAMI,qBAAqB,GAAGC,4BAAiBL,OAAjB,CAA9B;AACA,QAAMM,kBAAkB,GAAGC,yBAAcP,OAAd,CAA3B;AACA,QAAMQ,2BAA2B,GAAGC,kCAAuBT,OAAvB,CAApC;AACA,SACEH,SAAS,IACT,CAACI,QADD,IAEA,CAACH,OAFD,IAGA,gBAAI;AACR,0BAA0BC,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,qBAAOC,iBAAP,EAG7BjB,SAH6B,EAGlBC,WAHkB,CAAxB","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"],"file":"styled.js"}

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

@@ -1,15 +1,5 @@
 import React from 'react';
-import { SpacingType } from '@tecsinapse/react-core';
-export interface IGrid extends React.HTMLAttributes<HTMLDivElement> {
-    children: JSX.Element[];
-    layout?: number[][];
-    columns?: number;
-    spacing?: SpacingType | {
-        top?: SpacingType;
-        right?: SpacingType;
-        bottom?: SpacingType;
-        left?: SpacingType;
-    };
-}
-declare const Grid: ({ children, columns, layout, style, spacing, ...rest }: IGrid) => JSX.Element;
+import { IGrid } from '@tecsinapse/react-core';
+export declare type IGridWeb = IGrid & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
+declare const Grid: ({ children, columns, layout, style, spacing, ...rest }: IGridWeb) => JSX.Element;
 export default Grid;

package/dist/components/molecules/Grid/Grid.js

@@ -30,6 +30,7 @@ const Grid = ({
         flexWrap: 'wrap'
       }
     }, rest), _react.default.Children.map(children, (child, index) => _react.default.createElement(_Item.GridItem, {
+      key: `child-${index}`,
       columns: columns,
       span: flatLayout[index],
       spacing: spacing
@@ -42,10 +43,11 @@ const Grid = ({
       flexDirection: 'row',
       flexWrap: 'wrap'
     }
-  }, rest), _react.default.Children.map(children, child => {
+  }, rest), _react.default.Children.map(children, (child, index) => {
     return _react.default.cloneElement(child, { ...(child === null || child === void 0 ? void 0 : child.props),
       columns,
-      spacing: (child === null || child === void 0 ? void 0 : child.props.spacing) ?? spacing
+      spacing: (child === null || child === void 0 ? void 0 : child.props.spacing) ?? spacing,
+      key: `child-${index}`
     });
   }));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/Grid/Grid.tsx"],"names":["Grid","children","columns","layout","style","spacing","rest","flatLayout","flat","display","flexDirection","flexWrap","React","Children","map","child","index","cloneElement","props"],"mappings":";;;;;;;AAAA;;AACA;;;;;;AA0BA,MAAMA,IAAI,GAAG,CAAC;AACZC,EAAAA,QADY;AAEZC,EAAAA,OAAO,GAAG,EAFE;AAGZC,EAAAA,MAHY;AAIZC,EAAAA,KAJY;AAKZC,EAAAA,OALY;AAMZ,KAAGC;AANS,CAAD,KAOA;AACX,MAAIH,MAAJ,EAAY;AACV,UAAMI,UAAU,GAAGJ,MAAM,CAACK,IAAP,EAAnB;AACA,WACE;AACE,MAAA,KAAK,EAAE,EACL,GAAGJ,KADE;AAELK,QAAAA,OAAO,EAAE,MAFJ;AAGLC,QAAAA,aAAa,EAAE,KAHV;AAILC,QAAAA,QAAQ,EAAE;AAJL;AADT,OAOML,IAPN,GASGM,eAAMC,QAAN,CAAeC,GAAf,CAAmBb,QAAnB,EAA6B,CAACc,KAAD,EAAQC,KAAR,KAC5B,6BAAC,cAAD;AACE,MAAA,OAAO,EAAEd,OADX;AAEE,MAAA,IAAI,EAAEK,UAAU,CAACS,KAAD,CAFlB;AAGE,MAAA,OAAO,EAAEX;AAHX,OAKGU,KALH,CADD,CATH,CADF;AAqBD;;AAED,SACE;AACE,IAAA,KAAK,EAAE,EACL,GAAGX,KADE;AAELK,MAAAA,OAAO,EAAE,MAFJ;AAGLC,MAAAA,aAAa,EAAE,KAHV;AAILC,MAAAA,QAAQ,EAAE;AAJL;AADT,KAOML,IAPN,GASGM,eAAMC,QAAN,CAAeC,GAAf,CAAmBb,QAAnB,EAA6Bc,KAAK,IAAI;AACrC,WAAOH,eAAMK,YAAN,CAAmBF,KAAnB,EAA0B,EAC/B,IAAGA,KAAH,aAAGA,KAAH,uBAAGA,KAAK,CAAEG,KAAV,CAD+B;AAE/BhB,MAAAA,OAF+B;AAG/BG,MAAAA,OAAO,EAAE,CAAAU,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEG,KAAP,CAAab,OAAb,KAAwBA;AAHF,KAA1B,CAAP;AAKD,GANA,CATH,CADF;AAmBD,CApDD;;eAsDeL,I","sourcesContent":["import React from 'react';\nimport { GridItem } from './Item';\nimport { SpacingType } from '@tecsinapse/react-core';\n\nexport interface IGrid extends React.HTMLAttributes<HTMLDivElement> {\n  children: JSX.Element[];\n  /** Layout should represent the multiplier of columns to fill the rows properly.\n   * Example:\n   * const layout = [\n   *   [6, 6], // Two elements on row\n   *   [4, 4, 4], // Three elements on row\n   *   [12], // One element on row\n   * ];\n   * */\n  layout?: number[][];\n  /** Number of grid columns to be considered (not the number of elements per row) */\n  columns?: number;\n  spacing?:\n    | SpacingType\n    | {\n        top?: SpacingType;\n        right?: SpacingType;\n        bottom?: SpacingType;\n        left?: SpacingType;\n      };\n}\n\nconst Grid = ({\n  children,\n  columns = 12,\n  layout,\n  style,\n  spacing,\n  ...rest\n}: IGrid) => {\n  if (layout) {\n    const flatLayout = layout.flat();\n    return (\n      <div\n        style={{\n          ...style,\n          display: 'flex',\n          flexDirection: 'row',\n          flexWrap: 'wrap',\n        }}\n        {...rest}\n      >\n        {React.Children.map(children, (child, index) => (\n          <GridItem\n            columns={columns}\n            span={flatLayout[index]}\n            spacing={spacing}\n          >\n            {child}\n          </GridItem>\n        ))}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      style={{\n        ...style,\n        display: 'flex',\n        flexDirection: 'row',\n        flexWrap: 'wrap',\n      }}\n      {...rest}\n    >\n      {React.Children.map(children, child => {\n        return React.cloneElement(child, {\n          ...child?.props,\n          columns,\n          spacing: child?.props.spacing ?? spacing,\n        });\n      })}\n    </div>\n  );\n};\n\nexport default Grid;\n"],"file":"Grid.js"}
+{"version":3,"sources":["../../../../src/components/molecules/Grid/Grid.tsx"],"names":["Grid","children","columns","layout","style","spacing","rest","flatLayout","flat","display","flexDirection","flexWrap","React","Children","map","child","index","cloneElement","props","key"],"mappings":";;;;;;;AAAA;;AACA;;;;;;AAMA,MAAMA,IAAI,GAAG,CAAC;AACZC,EAAAA,QADY;AAEZC,EAAAA,OAAO,GAAG,EAFE;AAGZC,EAAAA,MAHY;AAIZC,EAAAA,KAJY;AAKZC,EAAAA,OALY;AAMZ,KAAGC;AANS,CAAD,KAOgB;AAC3B,MAAIH,MAAJ,EAAY;AACV,UAAMI,UAAU,GAAGJ,MAAM,CAACK,IAAP,EAAnB;AACA,WACE;AACE,MAAA,KAAK,EAAE,EACL,GAAGJ,KADE;AAELK,QAAAA,OAAO,EAAE,MAFJ;AAGLC,QAAAA,aAAa,EAAE,KAHV;AAILC,QAAAA,QAAQ,EAAE;AAJL;AADT,OAOML,IAPN,GASGM,eAAMC,QAAN,CAAeC,GAAf,CAAmBb,QAAnB,EAA6B,CAACc,KAAD,EAAQC,KAAR,KAC5B,6BAAC,cAAD;AACE,MAAA,GAAG,EAAG,SAAQA,KAAM,EADtB;AAEE,MAAA,OAAO,EAAEd,OAFX;AAGE,MAAA,IAAI,EAAEK,UAAU,CAACS,KAAD,CAHlB;AAIE,MAAA,OAAO,EAAEX;AAJX,OAMGU,KANH,CADD,CATH,CADF;AAsBD;;AAED,SACE;AACE,IAAA,KAAK,EAAE,EACL,GAAGX,KADE;AAELK,MAAAA,OAAO,EAAE,MAFJ;AAGLC,MAAAA,aAAa,EAAE,KAHV;AAILC,MAAAA,QAAQ,EAAE;AAJL;AADT,KAOML,IAPN,GASGM,eAAMC,QAAN,CAAeC,GAAf,CAAmBb,QAAnB,EAA6B,CAACc,KAAD,EAAQC,KAAR,KAAkB;AAC9C,WAAOJ,eAAMK,YAAN,CAAmBF,KAAnB,EAA0B,EAC/B,IAAGA,KAAH,aAAGA,KAAH,uBAAGA,KAAK,CAAEG,KAAV,CAD+B;AAE/BhB,MAAAA,OAF+B;AAG/BG,MAAAA,OAAO,EAAE,CAAAU,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEG,KAAP,CAAab,OAAb,KAAwBA,OAHF;AAI/Bc,MAAAA,GAAG,EAAG,SAAQH,KAAM;AAJW,KAA1B,CAAP;AAMD,GAPA,CATH,CADF;AAoBD,CAtDD;;eAwDehB,I","sourcesContent":["import React from 'react';\nimport { GridItem } from './Item';\nimport { IGrid } from '@tecsinapse/react-core';\n\nexport type IGridWeb = IGrid &\n  Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;\n\nconst Grid = ({\n  children,\n  columns = 12,\n  layout,\n  style,\n  spacing,\n  ...rest\n}: IGridWeb): JSX.Element => {\n  if (layout) {\n    const flatLayout = layout.flat();\n    return (\n      <div\n        style={{\n          ...style,\n          display: 'flex',\n          flexDirection: 'row',\n          flexWrap: 'wrap',\n        }}\n        {...rest}\n      >\n        {React.Children.map(children, (child, index) => (\n          <GridItem\n            key={`child-${index}`}\n            columns={columns}\n            span={flatLayout[index]}\n            spacing={spacing}\n          >\n            {child}\n          </GridItem>\n        ))}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      style={{\n        ...style,\n        display: 'flex',\n        flexDirection: 'row',\n        flexWrap: 'wrap',\n      }}\n      {...rest}\n    >\n      {React.Children.map(children, (child, index) => {\n        return React.cloneElement(child, {\n          ...child?.props,\n          columns,\n          spacing: child?.props.spacing ?? spacing,\n          key: `child-${index}`,\n        });\n      })}\n    </div>\n  );\n};\n\nexport default Grid;\n"],"file":"Grid.js"}

package/dist/components/molecules/Grid/Item/Item.d.ts

@@ -1,30 +1,9 @@
 import React from 'react';
-import { SpacingType } from '@tecsinapse/react-core';
-declare type FlexPositioning = 'flex-start' | 'flex-end' | 'center';
-declare type FlexAlignBase = FlexPositioning | 'stretch';
-declare type FlexAlignType = FlexAlignBase | 'baseline';
-declare type FlexSpacing = 'space-between' | 'space-around';
-export interface IGridItem {
-    children: React.ReactElement;
-    span: number;
-    columns?: number;
-    loading?: boolean;
-    loadingComponent?: React.ReactElement;
-    alignContent?: FlexAlignBase | FlexSpacing;
-    alignItems?: FlexAlignType;
-    alignSelf?: 'auto' | FlexAlignType;
-    flex?: number;
-    flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
-    flexGrow?: number;
-    flexShrink?: number;
-    justifyContent?: FlexPositioning | FlexSpacing | 'space-evenly';
-    spacing?: SpacingType | {
-        top?: SpacingType;
-        right?: SpacingType;
-        bottom?: SpacingType;
-        left?: SpacingType;
-    };
-    wrapper?: boolean;
+import { IGridItem, Breakpoints } from '@tecsinapse/react-core';
+export declare type Span = Pick<Breakpoints, 'sm'> & Partial<Omit<Breakpoints, 'sm'>>;
+export interface IGridItemWeb extends Omit<IGridItem, 'span'>, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    span: number | Span;
+    flexBasis?: string | 'content' | 'auto' | 'max-content' | 'min-content' | 'fit-content';
 }
-declare const GridItem: ({ children, span, columns, loadingComponent, loading, spacing: _spacing, wrapper, ...rest }: IGridItem) => JSX.Element;
+declare const GridItem: ({ children, span: _span, columns, loadingComponent, loading, spacing: _spacing, wrapper, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, justifyContent, flexBasis, style, ...rest }: IGridItemWeb) => JSX.Element;
 export default GridItem;

package/dist/components/molecules/Grid/Item/Item.js

@@ -9,21 +9,42 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactCore = require("@tecsinapse/react-core");
 
+var _reactWebKit = require("@tecsinapse/react-web-kit");
+
+var _functions = require("./functions");
+
 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 GridItem = ({
   children,
-  span,
+  span: _span,
   columns = 12,
   loadingComponent,
   loading = false,
   spacing: _spacing,
   wrapper = false,
+  alignContent,
+  alignItems,
+  alignSelf,
+  flex,
+  flexDirection,
+  flexGrow,
+  flexShrink,
+  justifyContent,
+  flexBasis,
+  style,
   ...rest
 }) => {
   const {
     spacing
   } = (0, _reactCore.useTheme)();
+  const {
+    sm,
+    md,
+    lg
+  } = (0, _reactWebKit.useBreakpoints)();
 
   if (!_react.default.Children.only(children)) {
     throw new Error('The number of children in GridItem should be one');
@@ -33,32 +54,33 @@ const GridItem = ({
     return loadingComponent;
   }
 
-  const getPadding = pos => {
-    if (_spacing) {
-      if (typeof _spacing === 'string') return (0, _reactCore.extractNumbersFromString)(spacing[_spacing]);else if (typeof _spacing === 'object' && _spacing[pos]) {
-        return (0, _reactCore.extractNumbersFromString)(spacing[_spacing[pos]]);
-      } else return undefined;
-    } else return undefined;
-  };
-
-  const style = { ...rest,
+  const span = typeof _span === 'number' ? _span : (0, _functions.getSpan)(_span, sm, md, lg);
+  const _style = { ...style,
+    alignContent,
+    alignItems,
+    alignSelf,
+    flexDirection,
+    flexGrow,
+    flexShrink,
+    justifyContent,
+    flex,
     boxSizing: 'border-box',
-    flexBasis: `${100 / (columns / span)}%`,
-    paddingTop: getPadding('top'),
-    paddingBottom: getPadding('bottom'),
-    paddingRight: getPadding('right'),
-    paddingLeft: getPadding('left')
+    flexBasis: flexBasis ?? `${(0, _reactCore.getGridItemColumSpan)(columns, span)}%`,
+    paddingTop: (0, _reactCore.getGridItemPadding)('top', _spacing, spacing),
+    paddingBottom: (0, _reactCore.getGridItemPadding)('bottom', _spacing, spacing),
+    paddingRight: (0, _reactCore.getGridItemPadding)('right', _spacing, spacing),
+    paddingLeft: (0, _reactCore.getGridItemPadding)('left', _spacing, spacing)
   };
 
   const clone = _react.default.cloneElement(children, { ...(children === null || children === void 0 ? void 0 : children.props),
-    style: wrapper ? children === null || children === void 0 ? void 0 : children.props.style : { ...style,
+    style: wrapper ? children === null || children === void 0 ? void 0 : children.props.style : { ..._style,
       ...(children === null || children === void 0 ? void 0 : children.props.style)
     }
   });
 
-  return wrapper ? _react.default.createElement("div", {
-    style: style
-  }, clone) : clone;
+  return wrapper ? _react.default.createElement("div", _extends({}, rest, {
+    style: _style
+  }), clone) : clone;
 };
 
 var _default = GridItem;

package/dist/components/molecules/Grid/Item/Item.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/molecules/Grid/Item/Item.tsx"],"names":["GridItem","children","span","columns","loadingComponent","loading","spacing","_spacing","wrapper","rest","React","Children","only","Error","getPadding","pos","undefined","style","boxSizing","flexBasis","paddingTop","paddingBottom","paddingRight","paddingLeft","clone","cloneElement","props"],"mappings":";;;;;;;AAAA;;AACA;;;;AA4CA,MAAMA,QAAQ,GAAG,CAAC;AAChBC,EAAAA,QADgB;AAEhBC,EAAAA,IAFgB;AAGhBC,EAAAA,OAAO,GAAG,EAHM;AAIhBC,EAAAA,gBAJgB;AAKhBC,EAAAA,OAAO,GAAG,KALM;AAMhBC,EAAAA,OAAO,EAAEC,QANO;AAOhBC,EAAAA,OAAO,GAAG,KAPM;AAQhB,KAAGC;AARa,CAAD,KASA;AACf,QAAM;AAAEH,IAAAA;AAAF,MAAc,0BAApB;;AACA,MAAI,CAACI,eAAMC,QAAN,CAAeC,IAAf,CAAoBX,QAApB,CAAL,EAAoC;AAClC,UAAM,IAAIY,KAAJ,CAAU,kDAAV,CAAN;AACD;;AACD,MAAIT,gBAAgB,IAAIC,OAAxB,EAAiC;AAC/B,WAAOD,gBAAP;AACD;;AAED,QAAMU,UAAU,GAAIC,GAAD,IAA0B;AAC3C,QAAIR,QAAJ,EAAc;AACZ,UAAI,OAAOA,QAAP,KAAoB,QAAxB,EACE,OAAO,yCAAyBD,OAAO,CAACC,QAAD,CAAhC,CAAP,CADF,KAEK,IAAI,OAAOA,QAAP,KAAoB,QAApB,IAAgCA,QAAQ,CAACQ,GAAD,CAA5C,EAAmD;AACtD,eAAO,yCAAyBT,OAAO,CAACC,QAAQ,CAACQ,GAAD,CAAT,CAAhC,CAAP;AACD,OAFI,MAEE,OAAOC,SAAP;AACR,KAND,MAMO,OAAOA,SAAP;AACR,GARD;;AAUA,QAAMC,KAA0B,GAAG,EACjC,GAAGR,IAD8B;AAEjCS,IAAAA,SAAS,EAAE,YAFsB;AAGjCC,IAAAA,SAAS,EAAG,GAAE,OAAOhB,OAAO,GAAGD,IAAjB,CAAuB,GAHJ;AAIjCkB,IAAAA,UAAU,EAAEN,UAAU,CAAC,KAAD,CAJW;AAKjCO,IAAAA,aAAa,EAAEP,UAAU,CAAC,QAAD,CALQ;AAMjCQ,IAAAA,YAAY,EAAER,UAAU,CAAC,OAAD,CANS;AAOjCS,IAAAA,WAAW,EAAET,UAAU,CAAC,MAAD;AAPU,GAAnC;;AAUA,QAAMU,KAAK,GAAGd,eAAMe,YAAN,CAAmBxB,QAAnB,EAA6B,EACzC,IAAGA,QAAH,aAAGA,QAAH,uBAAGA,QAAQ,CAAEyB,KAAb,CADyC;AAEzCT,IAAAA,KAAK,EAAET,OAAO,GACVP,QADU,aACVA,QADU,uBACVA,QAAQ,CAAEyB,KAAV,CAAgBT,KADN,GAEV,EAAE,GAAGA,KAAL;AAAY,UAAGhB,QAAH,aAAGA,QAAH,uBAAGA,QAAQ,CAAEyB,KAAV,CAAgBT,KAAnB;AAAZ;AAJqC,GAA7B,CAAd;;AAOA,SAAOT,OAAO,GAAG;AAAK,IAAA,KAAK,EAAES;AAAZ,KAAoBO,KAApB,CAAH,GAAsCA,KAApD;AACD,CA9CD;;eAgDexB,Q","sourcesContent":["import React from 'react';\nimport {\n  extractNumbersFromString,\n  SpacingType,\n  useTheme,\n} from '@tecsinapse/react-core';\n\ntype FlexPositioning = 'flex-start' | 'flex-end' | 'center';\ntype FlexAlignBase = FlexPositioning | 'stretch';\ntype FlexAlignType = FlexAlignBase | 'baseline';\ntype FlexSpacing = 'space-between' | 'space-around';\n\ntype PaddingPosition = 'top' | 'right' | 'bottom' | 'left';\n\nexport interface IGridItem {\n  children: React.ReactElement;\n  /** Number of columns to fill */\n  span: number;\n  /** You don't have to give this property since is inherited from Grid */\n  columns?: number;\n  loading?: boolean;\n  /** If your GridItem has a loading state, specify the component here (Skeleton) */\n  loadingComponent?: React.ReactElement;\n  /** Flex properties below */\n  alignContent?: FlexAlignBase | FlexSpacing;\n  alignItems?: FlexAlignType;\n  alignSelf?: 'auto' | FlexAlignType;\n  flex?: number;\n  flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';\n  flexGrow?: number;\n  flexShrink?: number;\n  justifyContent?: FlexPositioning | FlexSpacing | 'space-evenly';\n  /** You don't have to give this property since is inherited from Grid */\n  spacing?:\n    | SpacingType\n    | {\n        top?: SpacingType;\n        right?: SpacingType;\n        bottom?: SpacingType;\n        left?: SpacingType;\n      };\n  /** Used to wrap children in a View when its style extrapolates the dimensions*/\n  wrapper?: boolean;\n}\n\nconst GridItem = ({\n  children,\n  span,\n  columns = 12,\n  loadingComponent,\n  loading = false,\n  spacing: _spacing,\n  wrapper = false,\n  ...rest\n}: IGridItem) => {\n  const { spacing } = useTheme();\n  if (!React.Children.only(children)) {\n    throw new Error('The number of children in GridItem should be one');\n  }\n  if (loadingComponent && loading) {\n    return loadingComponent;\n  }\n\n  const getPadding = (pos: PaddingPosition) => {\n    if (_spacing) {\n      if (typeof _spacing === 'string')\n        return extractNumbersFromString(spacing[_spacing]);\n      else if (typeof _spacing === 'object' && _spacing[pos]) {\n        return extractNumbersFromString(spacing[_spacing[pos]!]);\n      } else return undefined;\n    } else return undefined;\n  };\n\n  const style: React.CSSProperties = {\n    ...rest,\n    boxSizing: 'border-box',\n    flexBasis: `${100 / (columns / span)}%`,\n    paddingTop: getPadding('top'),\n    paddingBottom: getPadding('bottom'),\n    paddingRight: getPadding('right'),\n    paddingLeft: getPadding('left'),\n  };\n\n  const clone = React.cloneElement(children, {\n    ...children?.props,\n    style: wrapper\n      ? children?.props.style\n      : { ...style, ...children?.props.style },\n  });\n\n  return wrapper ? <div style={style}>{clone}</div> : clone;\n};\n\nexport default GridItem;\n"],"file":"Item.js"}
+{"version":3,"sources":["../../../../../src/components/molecules/Grid/Item/Item.tsx"],"names":["GridItem","children","span","_span","columns","loadingComponent","loading","spacing","_spacing","wrapper","alignContent","alignItems","alignSelf","flex","flexDirection","flexGrow","flexShrink","justifyContent","flexBasis","style","rest","sm","md","lg","React","Children","only","Error","_style","boxSizing","paddingTop","paddingBottom","paddingRight","paddingLeft","clone","cloneElement","props"],"mappings":";;;;;;;AAAA;;AACA;;AAOA;;AACA;;;;;;AAmBA,MAAMA,QAAQ,GAAG,CAAC;AAChBC,EAAAA,QADgB;AAEhBC,EAAAA,IAAI,EAAEC,KAFU;AAGhBC,EAAAA,OAAO,GAAG,EAHM;AAIhBC,EAAAA,gBAJgB;AAKhBC,EAAAA,OAAO,GAAG,KALM;AAMhBC,EAAAA,OAAO,EAAEC,QANO;AAOhBC,EAAAA,OAAO,GAAG,KAPM;AAQhBC,EAAAA,YARgB;AAShBC,EAAAA,UATgB;AAUhBC,EAAAA,SAVgB;AAWhBC,EAAAA,IAXgB;AAYhBC,EAAAA,aAZgB;AAahBC,EAAAA,QAbgB;AAchBC,EAAAA,UAdgB;AAehBC,EAAAA,cAfgB;AAgBhBC,EAAAA,SAhBgB;AAiBhBC,EAAAA,KAjBgB;AAkBhB,KAAGC;AAlBa,CAAD,KAmBgB;AAC/B,QAAM;AAAEb,IAAAA;AAAF,MAAc,0BAApB;AACA,QAAM;AAAEc,IAAAA,EAAF;AAAMC,IAAAA,EAAN;AAAUC,IAAAA;AAAV,MAAiB,kCAAvB;;AACA,MAAI,CAACC,eAAMC,QAAN,CAAeC,IAAf,CAAoBzB,QAApB,CAAL,EAAoC;AAClC,UAAM,IAAI0B,KAAJ,CAAU,kDAAV,CAAN;AACD;;AACD,MAAItB,gBAAgB,IAAIC,OAAxB,EAAiC;AAC/B,WAAOD,gBAAP;AACD;;AAED,QAAMH,IAAI,GAAG,OAAOC,KAAP,KAAiB,QAAjB,GAA4BA,KAA5B,GAAoC,wBAAQA,KAAR,EAAekB,EAAf,EAAmBC,EAAnB,EAAuBC,EAAvB,CAAjD;AAEA,QAAMK,MAA2B,GAAG,EAClC,GAAGT,KAD+B;AAElCT,IAAAA,YAFkC;AAGlCC,IAAAA,UAHkC;AAIlCC,IAAAA,SAJkC;AAKlCE,IAAAA,aALkC;AAMlCC,IAAAA,QANkC;AAOlCC,IAAAA,UAPkC;AAQlCC,IAAAA,cARkC;AASlCJ,IAAAA,IATkC;AAUlCgB,IAAAA,SAAS,EAAE,YAVuB;AAWlCX,IAAAA,SAAS,EAAEA,SAAS,IAAK,GAAE,qCAAqBd,OAArB,EAA8BF,IAA9B,CAAoC,GAX7B;AAYlC4B,IAAAA,UAAU,EAAE,mCAAmB,KAAnB,EAA0BtB,QAA1B,EAAoCD,OAApC,CAZsB;AAalCwB,IAAAA,aAAa,EAAE,mCAAmB,QAAnB,EAA6BvB,QAA7B,EAAuCD,OAAvC,CAbmB;AAclCyB,IAAAA,YAAY,EAAE,mCAAmB,OAAnB,EAA4BxB,QAA5B,EAAsCD,OAAtC,CAdoB;AAelC0B,IAAAA,WAAW,EAAE,mCAAmB,MAAnB,EAA2BzB,QAA3B,EAAqCD,OAArC;AAfqB,GAApC;;AAkBA,QAAM2B,KAAK,GAAGV,eAAMW,YAAN,CAAmBlC,QAAnB,EAA6B,EACzC,IAAGA,QAAH,aAAGA,QAAH,uBAAGA,QAAQ,CAAEmC,KAAb,CADyC;AAEzCjB,IAAAA,KAAK,EAAEV,OAAO,GACVR,QADU,aACVA,QADU,uBACVA,QAAQ,CAAEmC,KAAV,CAAgBjB,KADN,GAEV,EAAE,GAAGS,MAAL;AAAa,UAAG3B,QAAH,aAAGA,QAAH,uBAAGA,QAAQ,CAAEmC,KAAV,CAAgBjB,KAAnB;AAAb;AAJqC,GAA7B,CAAd;;AAOA,SAAOV,OAAO,GACZ,iDAASW,IAAT;AAAe,IAAA,KAAK,EAAEQ;AAAtB,MACGM,KADH,CADY,GAKZA,KALF;AAOD,CA/DD;;eAiEelC,Q","sourcesContent":["import React from 'react';\nimport {\n  IGridItem,\n  useTheme,\n  Breakpoints,\n  getGridItemColumSpan,\n  getGridItemPadding,\n} from '@tecsinapse/react-core';\nimport { useBreakpoints } from '@tecsinapse/react-web-kit';\nimport { getSpan } from './functions';\n\nexport type Span = Pick<Breakpoints, 'sm'> & Partial<Omit<Breakpoints, 'sm'>>;\n\nexport interface IGridItemWeb\n  extends Omit<IGridItem, 'span'>,\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** At least sm should exist */\n  span: number | Span;\n  /** Only specify this property if the GridItem will be 'dynamic', adjusting itself to content. Use this with `wrapper` for better result. */\n  flexBasis?:\n    | string\n    | 'content'\n    | 'auto'\n    | 'max-content'\n    | 'min-content'\n    | 'fit-content';\n}\n\nconst GridItem = ({\n  children,\n  span: _span,\n  columns = 12,\n  loadingComponent,\n  loading = false,\n  spacing: _spacing,\n  wrapper = false,\n  alignContent,\n  alignItems,\n  alignSelf,\n  flex,\n  flexDirection,\n  flexGrow,\n  flexShrink,\n  justifyContent,\n  flexBasis,\n  style,\n  ...rest\n}: IGridItemWeb): JSX.Element => {\n  const { spacing } = useTheme();\n  const { sm, md, lg } = useBreakpoints();\n  if (!React.Children.only(children)) {\n    throw new Error('The number of children in GridItem should be one');\n  }\n  if (loadingComponent && loading) {\n    return loadingComponent;\n  }\n\n  const span = typeof _span === 'number' ? _span : getSpan(_span, sm, md, lg);\n\n  const _style: React.CSSProperties = {\n    ...style,\n    alignContent,\n    alignItems,\n    alignSelf,\n    flexDirection,\n    flexGrow,\n    flexShrink,\n    justifyContent,\n    flex,\n    boxSizing: 'border-box',\n    flexBasis: flexBasis ?? `${getGridItemColumSpan(columns, span)}%`,\n    paddingTop: getGridItemPadding('top', _spacing, spacing),\n    paddingBottom: getGridItemPadding('bottom', _spacing, spacing),\n    paddingRight: getGridItemPadding('right', _spacing, spacing),\n    paddingLeft: getGridItemPadding('left', _spacing, spacing),\n  };\n\n  const clone = React.cloneElement(children, {\n    ...children?.props,\n    style: wrapper\n      ? children?.props.style\n      : { ..._style, ...children?.props.style },\n  });\n\n  return wrapper ? (\n    <div {...rest} style={_style}>\n      {clone}\n    </div>\n  ) : (\n    clone\n  );\n};\n\nexport default GridItem;\n"],"file":"Item.js"}

package/dist/components/molecules/Grid/Item/functions.d.ts

@@ -0,0 +1,2 @@
+import { Span } from './Item';
+export declare const getSpan: (value: Span, sm: boolean, md: boolean, lg: boolean) => number;

package/dist/components/molecules/Grid/Item/functions.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSpan = void 0;
+
+const getSpan = (value, sm, md, lg) => {
+  if (sm) return value.sm;
+  if (md) return value.md ?? value.sm;
+  if (lg) return value.lg ?? value.md ?? value.sm;
+  return 0;
+};
+
+exports.getSpan = getSpan;
+//# sourceMappingURL=functions.js.map

package/dist/components/molecules/Grid/Item/functions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/molecules/Grid/Item/functions.ts"],"names":["getSpan","value","sm","md","lg"],"mappings":";;;;;;;AAEO,MAAMA,OAAO,GAAG,CACrBC,KADqB,EAErBC,EAFqB,EAGrBC,EAHqB,EAIrBC,EAJqB,KAKV;AACX,MAAIF,EAAJ,EAAQ,OAAOD,KAAK,CAACC,EAAb;AACR,MAAIC,EAAJ,EAAQ,OAAOF,KAAK,CAACE,EAAN,IAAYF,KAAK,CAACC,EAAzB;AACR,MAAIE,EAAJ,EAAQ,OAAOH,KAAK,CAACG,EAAN,IAAYH,KAAK,CAACE,EAAlB,IAAwBF,KAAK,CAACC,EAArC;AACR,SAAO,CAAP;AACD,CAVM","sourcesContent":["import { Span } from './Item';\n\nexport const getSpan = (\n  value: Span,\n  sm: boolean,\n  md: boolean,\n  lg: boolean\n): number => {\n  if (sm) return value.sm;\n  if (md) return value.md ?? value.sm;\n  if (lg) return value.lg ?? value.md ?? value.sm;\n  return 0;\n};\n"],"file":"functions.js"}

package/dist/components/molecules/Grid/Item/index.d.ts

@@ -1,2 +1,2 @@
 export { default as GridItem } from './Item';
-export type { IGridItem } from './Item';
+export type { IGridItemWeb } from './Item';

package/dist/components/molecules/Grid/Item/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/molecules/Grid/Item/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA","sourcesContent":["export { default as GridItem } from './Item';\nexport type { IGridItem } from './Item';\n"],"file":"index.js"}
+{"version":3,"sources":["../../../../../src/components/molecules/Grid/Item/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA","sourcesContent":["export { default as GridItem } from './Item';\nexport type { IGridItemWeb } from './Item';\n"],"file":"index.js"}

package/dist/components/molecules/Grid/index.d.ts

@@ -1,4 +1,4 @@
 export { GridItem } from './Item';
-export type { IGridItem } from './Item';
+export type { IGridItemWeb } from './Item';
 export { default as Grid } from './Grid';
-export type { IGrid } from './Grid';
+export type { IGridWeb } from './Grid';

package/dist/components/molecules/Grid/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/Grid/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;AAEA","sourcesContent":["export { GridItem } from './Item';\nexport type { IGridItem } from './Item';\nexport { default as Grid } from './Grid';\nexport type { IGrid } from './Grid';\n"],"file":"index.js"}
+{"version":3,"sources":["../../../../src/components/molecules/Grid/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;AAEA","sourcesContent":["export { GridItem } from './Item';\nexport type { IGridItemWeb } from './Item';\nexport { default as Grid } from './Grid';\nexport type { IGridWeb } from './Grid';\n"],"file":"index.js"}

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

@@ -0,0 +1,6 @@
+import { IconTextButtonProps } from '@tecsinapse/react-core';
+import React from 'react';
+import { WebButtonProps } from '../../atoms/Button';
+export declare type WebIconTextButtonProps = IconTextButtonProps & Omit<WebButtonProps, 'ButtonProps'>;
+declare const IconTextButton: React.FC<WebIconTextButtonProps>;
+export default IconTextButton;

package/dist/components/molecules/IconTextButton/IconTextButton.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _reactCore = require("@tecsinapse/react-core");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useIconTextButton = _interopRequireDefault(require("./hooks/useIconTextButton"));
+
+var _styled = require("./styled");
+
+var _TextComponent = _interopRequireDefault(require("./TextComponent"));
+
+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 IconTextButton = ({
+  iconProps,
+  iconPosition = 'left',
+  textProps,
+  label,
+  variant = 'filled',
+  size = 'default',
+  ...rest
+}) => {
+  const {
+    handleHover,
+    handlePressed,
+    defaultFontColor
+  } = (0, _useIconTextButton.default)(variant);
+  return _react.default.createElement(_styled.StyledIconTextButton, _extends({
+    boxed: !label,
+    variant: variant,
+    size: size,
+    onMouseOut: () => handleHover(true),
+    onMouseOver: () => handleHover(false),
+    onPressIn: () => handlePressed(true),
+    onPressOut: () => handlePressed(false)
+  }, rest), iconPosition === 'left' ? _react.default.createElement(_reactCore.IconComponent, {
+    iconProps: iconProps,
+    size: size,
+    defaultFontColor: defaultFontColor
+  }) : _react.default.createElement(_react.default.Fragment, null), _react.default.createElement(_TextComponent.default, {
+    label: label,
+    defaultFontColor: defaultFontColor,
+    hasIcon: !!iconProps,
+    iconPosition: iconPosition,
+    textProps: textProps,
+    size: size
+  }), iconPosition === 'right' ? _react.default.createElement(_reactCore.IconComponent, {
+    iconProps: iconProps,
+    size: size,
+    defaultFontColor: defaultFontColor
+  }) : _react.default.createElement(_react.default.Fragment, null));
+};
+
+var _default = IconTextButton;
+exports.default = _default;
+//# sourceMappingURL=IconTextButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/molecules/IconTextButton/IconTextButton.tsx"],"names":["IconTextButton","iconProps","iconPosition","textProps","label","variant","size","rest","handleHover","handlePressed","defaultFontColor"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;AAKA,MAAMA,cAAgD,GAAG,CAAC;AACxDC,EAAAA,SADwD;AAExDC,EAAAA,YAAY,GAAG,MAFyC;AAGxDC,EAAAA,SAHwD;AAIxDC,EAAAA,KAJwD;AAKxDC,EAAAA,OAAO,GAAG,QAL8C;AAMxDC,EAAAA,IAAI,GAAG,SANiD;AAOxD,KAAGC;AAPqD,CAAD,KAQtC;AACjB,QAAM;AAAEC,IAAAA,WAAF;AAAeC,IAAAA,aAAf;AAA8BC,IAAAA;AAA9B,MAAmD,gCACvDL,OADuD,CAAzD;AAIA,SACE,6BAAC,4BAAD;AACE,IAAA,KAAK,EAAE,CAACD,KADV;AAEE,IAAA,OAAO,EAAEC,OAFX;AAGE,IAAA,IAAI,EAAEC,IAHR;AAIE,IAAA,UAAU,EAAE,MAAME,WAAW,CAAC,IAAD,CAJ/B;AAKE,IAAA,WAAW,EAAE,MAAMA,WAAW,CAAC,KAAD,CALhC;AAME,IAAA,SAAS,EAAE,MAAMC,aAAa,CAAC,IAAD,CANhC;AAOE,IAAA,UAAU,EAAE,MAAMA,aAAa,CAAC,KAAD;AAPjC,KAQMF,IARN,GAUGL,YAAY,KAAK,MAAjB,GACC,6BAAC,wBAAD;AACE,IAAA,SAAS,EAAED,SADb;AAEE,IAAA,IAAI,EAAEK,IAFR;AAGE,IAAA,gBAAgB,EAAEI;AAHpB,IADD,GAOC,2DAjBJ,EAmBE,6BAAC,sBAAD;AACE,IAAA,KAAK,EAAEN,KADT;AAEE,IAAA,gBAAgB,EAAEM,gBAFpB;AAGE,IAAA,OAAO,EAAE,CAAC,CAACT,SAHb;AAIE,IAAA,YAAY,EAAEC,YAJhB;AAKE,IAAA,SAAS,EAAEC,SALb;AAME,IAAA,IAAI,EAAEG;AANR,IAnBF,EA2BGJ,YAAY,KAAK,OAAjB,GACC,6BAAC,wBAAD;AACE,IAAA,SAAS,EAAED,SADb;AAEE,IAAA,IAAI,EAAEK,IAFR;AAGE,IAAA,gBAAgB,EAAEI;AAHpB,IADD,GAOC,2DAlCJ,CADF;AAuCD,CApDD;;eAsDeV,c","sourcesContent":["import { IconComponent, IconTextButtonProps } from '@tecsinapse/react-core';\nimport React from 'react';\nimport { WebButtonProps } from '../../atoms/Button';\nimport useIconTextButton from './hooks/useIconTextButton';\nimport { StyledIconTextButton } from './styled';\nimport TextComponent from './TextComponent';\n\nexport type WebIconTextButtonProps = IconTextButtonProps &\n  Omit<WebButtonProps, 'ButtonProps'>;\n\nconst IconTextButton: React.FC<WebIconTextButtonProps> = ({\n  iconProps,\n  iconPosition = 'left',\n  textProps,\n  label,\n  variant = 'filled',\n  size = 'default',\n  ...rest\n}): JSX.Element => {\n  const { handleHover, handlePressed, defaultFontColor } = useIconTextButton(\n    variant\n  );\n\n  return (\n    <StyledIconTextButton\n      boxed={!label}\n      variant={variant}\n      size={size}\n      onMouseOut={() => handleHover(true)}\n      onMouseOver={() => handleHover(false)}\n      onPressIn={() => handlePressed(true)}\n      onPressOut={() => handlePressed(false)}\n      {...rest}\n    >\n      {iconPosition === 'left' ? (\n        <IconComponent\n          iconProps={iconProps}\n          size={size}\n          defaultFontColor={defaultFontColor}\n        />\n      ) : (\n        <></>\n      )}\n      <TextComponent\n        label={label}\n        defaultFontColor={defaultFontColor}\n        hasIcon={!!iconProps}\n        iconPosition={iconPosition}\n        textProps={textProps}\n        size={size}\n      />\n      {iconPosition === 'right' ? (\n        <IconComponent\n          iconProps={iconProps}\n          size={size}\n          defaultFontColor={defaultFontColor}\n        />\n      ) : (\n        <></>\n      )}\n    </StyledIconTextButton>\n  );\n};\n\nexport default IconTextButton;\n"],"file":"IconTextButton.js"}