@tecsinapse/react-web-kit 2.3.1 → 3.3.0

package/README.md

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

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

@@ -67,4 +67,3 @@ const Accordion = ({
 };
 
 module.exports = Accordion;
-//# sourceMappingURL=Accordion.js.map

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

@@ -46,4 +46,3 @@ exports.contentStyle = contentStyle;
 exports.contentTransition = contentTransition;
 exports.titleStyle = titleStyle;
 exports.titleTransition = titleTransition;
-//# sourceMappingURL=animations.js.map

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

@@ -34,4 +34,3 @@ exports.AccordionContainer = AccordionContainer;
 exports.ContentContainer = ContentContainer;
 exports.IconContainer = IconContainer;
 exports.TitleContainer = TitleContainer;
-//# sourceMappingURL=styled.js.map

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

@@ -20,4 +20,3 @@ const Badge = ({
 };
 
 module.exports = Badge;
-//# sourceMappingURL=Badge.js.map

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

@@ -48,4 +48,3 @@ const Button = ({
 };
 
 module.exports = Button;
-//# sourceMappingURL=Button.js.map

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

@@ -24,4 +24,3 @@ const useMouseHover = (active, onMouseOver, onMouseOut) => {
 };
 
 exports.useMouseHover = useMouseHover;
-//# sourceMappingURL=useMouseHover.js.map

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

@@ -24,4 +24,3 @@ const useMousePressed = (active, onPressIn, onPressOut) => {
 };
 
 exports.useMousePressed = useMousePressed;
-//# sourceMappingURL=useMousePressed.js.map

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

@@ -1,10 +1,10 @@
 'use strict';
 
-var nativeStyled = require('@emotion/native');
+var styled = require('@emotion/native');
 var reactCore = require('@tecsinapse/react-core');
 
 const webStyles = () => {
-  return nativeStyled.css`
+  return styled.css`
     & * {
       user-select: none;
     }
@@ -21,12 +21,11 @@ const hoverStyles = ({
   const variantColorGradation = reactCore.colorGradationVC[variant];
   const variantBorderColor = reactCore.borderColorVC[variant];
   const variantBorderColorGradation = reactCore.borderColorGradationVC[variant];
-  return mouseOver && !disabled && !pressed && nativeStyled.css`
+  return mouseOver && !disabled && !pressed && styled.css`
       background-color: ${theme?.color[variantColor][variantColorGradation]};
       border-color: ${theme?.color[variantBorderColor][variantBorderColorGradation]};
     `;
 };
-const StyledWebButton = nativeStyled(reactCore.Button)(webStyles, hoverStyles);
+const StyledWebButton = styled(reactCore.Button)(webStyles, hoverStyles);
 
 exports.StyledWebButton = StyledWebButton;
-//# sourceMappingURL=styled.js.map

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

@@ -27,4 +27,3 @@ const Component = ({
 const Dropdown = Component;
 
 exports.Dropdown = Dropdown;
-//# sourceMappingURL=index.js.map

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

@@ -16,4 +16,3 @@ const StyledContainerDropdown = styled("div")`
 `;
 
 exports.StyledContainerDropdown = StyledContainerDropdown;
-//# sourceMappingURL=styled.js.map

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

@@ -74,4 +74,3 @@ const Input = React.forwardRef(
 Input.displayName = "Input";
 
 module.exports = Input;
-//# sourceMappingURL=Input.js.map

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

@@ -1,13 +1,12 @@
 'use strict';
 
-var nativeStyled = require('@emotion/native');
+var styled = require('@emotion/native');
 var reactCore = require('@tecsinapse/react-core');
 
-const StyledWebTextInput = nativeStyled(reactCore.InputElement)`
+const StyledWebTextInput = styled(reactCore.InputElement)`
   &:focus-visible {
     outline-width: 0;
   }
 `;
 
 exports.StyledWebTextInput = StyledWebTextInput;
-//# sourceMappingURL=styled.js.map

package/dist/cjs/components/atoms/InputMask/InputMask.js

@@ -74,4 +74,3 @@ const InputMask = React.forwardRef(
 InputMask.displayName = "InputMask";
 
 module.exports = InputMask;
-//# sourceMappingURL=InputMask.js.map

package/dist/cjs/components/atoms/InputMask/styled.js

@@ -1,13 +1,12 @@
 'use strict';
 
-var nativeStyled = require('@emotion/native');
+var styled = require('@emotion/native');
 var reactCore = require('@tecsinapse/react-core');
 
-const StyledWebTextInputMask = nativeStyled(reactCore.InputMaskElement)`
+const StyledWebTextInputMask = styled(reactCore.InputMaskElement)`
   &:focus-visible {
     outline-width: 0;
   }
 `;
 
 exports.StyledWebTextInputMask = StyledWebTextInputMask;
-//# sourceMappingURL=styled.js.map

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

@@ -30,4 +30,3 @@ const Modal = ({
 };
 
 module.exports = Modal;
-//# sourceMappingURL=Modal.js.map

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

@@ -14,4 +14,3 @@ const transitionStylesOverlay = {
 
 exports.defaultStyleOverlay = defaultStyleOverlay;
 exports.transitionStylesOverlay = transitionStylesOverlay;
-//# sourceMappingURL=animations.js.map

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

@@ -19,4 +19,3 @@ const ModalContainer = styled("div")`
 `;
 
 exports.ModalContainer = ModalContainer;
-//# sourceMappingURL=styled.js.map

package/dist/cjs/components/atoms/Overlay/Overlay.js

@@ -30,4 +30,3 @@ const Overlay = ({
 };
 
 module.exports = Overlay;
-//# sourceMappingURL=Overlay.js.map

package/dist/cjs/components/atoms/Overlay/animations.js

@@ -14,4 +14,3 @@ const transitionStylesOverlay = {
 
 exports.defaultStyleOverlay = defaultStyleOverlay;
 exports.transitionStylesOverlay = transitionStylesOverlay;
-//# sourceMappingURL=animations.js.map

package/dist/cjs/components/atoms/Overlay/styled.js

@@ -18,4 +18,3 @@ const StyledOverlay = styled("div")`
 `;
 
 exports.StyledOverlay = StyledOverlay;
-//# sourceMappingURL=styled.js.map

package/dist/cjs/components/atoms/Skeleton/Skeleton.js

@@ -40,4 +40,3 @@ const Skeleton = ({
 };
 
 module.exports = Skeleton;
-//# sourceMappingURL=Skeleton.js.map

package/dist/cjs/components/atoms/Skeleton/styled.js

@@ -61,4 +61,3 @@ const Wrapper = styled("div")`
 `;
 
 exports.Wrapper = Wrapper;
-//# sourceMappingURL=styled.js.map

package/dist/cjs/components/atoms/Switch/Switch.js

@@ -80,4 +80,3 @@ const Switch = ({
 };
 
 module.exports = Switch;
-//# sourceMappingURL=Switch.js.map

package/dist/cjs/components/atoms/Switch/styled.js

@@ -23,4 +23,3 @@ const StyledSwitch = styled.div`
 
 exports.StyledSwitch = StyledSwitch;
 exports.StyledSwitchContent = StyledSwitchContent;
-//# sourceMappingURL=styled.js.map

package/dist/cjs/components/atoms/Table/Body/TBody.js

@@ -10,4 +10,3 @@ const TBody = ({
 };
 
 module.exports = TBody;
-//# sourceMappingURL=TBody.js.map

package/dist/cjs/components/atoms/Table/Cell/Td.js

@@ -11,4 +11,3 @@ const Td = ({
 };
 
 module.exports = Td;
-//# sourceMappingURL=Td.js.map

package/dist/cjs/components/atoms/Table/Cell/styled.js

@@ -13,4 +13,3 @@ const TCell = styled("td")`
 `;
 
 exports.TCell = TCell;
-//# sourceMappingURL=styled.js.map

package/dist/cjs/components/atoms/Table/Container/TableContainer.js

@@ -11,4 +11,3 @@ const TableContainer = ({
 };
 
 module.exports = TableContainer;
-//# sourceMappingURL=TableContainer.js.map

package/dist/cjs/components/atoms/Table/Container/styled.js

@@ -12,4 +12,3 @@ const TContainer = styled("div")`
 `;
 
 exports.TContainer = TContainer;
-//# sourceMappingURL=styled.js.map

package/dist/cjs/components/atoms/Table/Footer/TFoot.js

@@ -11,4 +11,3 @@ const TFoot = ({
 };
 
 module.exports = TFoot;
-//# sourceMappingURL=TFoot.js.map

package/dist/cjs/components/atoms/Table/Footer/styled.js

@@ -10,4 +10,3 @@ const TFooter = styled("tfoot")`
 `;
 
 exports.TFooter = TFooter;
-//# sourceMappingURL=styled.js.map

package/dist/cjs/components/atoms/Table/Header/THead.js

@@ -12,4 +12,3 @@ const THead = ({
 };
 
 module.exports = THead;
-//# sourceMappingURL=THead.js.map

package/dist/cjs/components/atoms/Table/Header/Th.js

@@ -11,4 +11,3 @@ const Th = ({
 };
 
 module.exports = Th;
-//# sourceMappingURL=Th.js.map

package/dist/cjs/components/atoms/Table/Header/styled.js

@@ -31,4 +31,3 @@ const HeaderBackground = styled("hr")`
 exports.HeaderBackground = HeaderBackground;
 exports.THeadStyled = THeadStyled;
 exports.ThStyled = ThStyled;
-//# sourceMappingURL=styled.js.map

package/dist/cjs/components/atoms/Table/Row/Tr.js

@@ -11,4 +11,3 @@ const Tr = ({
 };
 
 module.exports = Tr;
-//# sourceMappingURL=Tr.js.map

package/dist/cjs/components/atoms/Table/Row/styled.js

@@ -10,4 +10,3 @@ const TRow = styled("tr")`
 `;
 
 exports.TRow = TRow;
-//# sourceMappingURL=styled.js.map

package/dist/cjs/components/atoms/Table/Table.js

@@ -11,4 +11,3 @@ const Table = ({
 };
 
 module.exports = Table;
-//# sourceMappingURL=Table.js.map

package/dist/cjs/components/atoms/Table/Toolbar/TableToolbar.js

@@ -14,4 +14,3 @@ const TableToolbar = ({
 };
 
 module.exports = TableToolbar;
-//# sourceMappingURL=TableToolbar.js.map

package/dist/cjs/components/atoms/Table/Toolbar/styled.js

@@ -10,4 +10,3 @@ const TableToolbarStyled = styled("div")`
 `;
 
 exports.TableToolbarStyled = TableToolbarStyled;
-//# sourceMappingURL=styled.js.map

package/dist/cjs/components/atoms/Table/styled.js

@@ -9,4 +9,3 @@ const TableStyled = styled("table")`
 `;
 
 exports.TableStyled = TableStyled;
-//# sourceMappingURL=styled.js.map

package/dist/cjs/components/atoms/Tag/Tag.js

@@ -38,4 +38,3 @@ const Tag = ({
 };
 
 module.exports = Tag;
-//# sourceMappingURL=Tag.js.map

package/dist/cjs/components/atoms/Tooltip/Tooltip.js

@@ -42,4 +42,3 @@ const Tooltip = ({
 };
 
 module.exports = Tooltip;
-//# sourceMappingURL=Tooltip.js.map

package/dist/cjs/components/atoms/Tooltip/styled.js

@@ -71,7 +71,10 @@ const TooltipSpan = styled("span")(
       border-radius: ${theme.borderRadius.mili};
       opacity: 0;
       visibility: hidden;
-      transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
+      transition:
+        opacity 0.3s,
+        visibility 0.3s,
+        transform 0.3s;
       background-color: ${theme.color.secondary.xdark};
       z-index: ${theme.zIndex.absolute};
 
@@ -115,4 +118,3 @@ const Container = styled("div")`
 
 exports.Container = Container;
 exports.TooltipSpan = TooltipSpan;
-//# sourceMappingURL=styled.js.map

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

@@ -23,4 +23,3 @@ const BreadcrumbItem = ({
 };
 
 module.exports = BreadcrumbItem;
-//# sourceMappingURL=BreadcrumbItem.js.map

package/dist/cjs/components/molecules/Breadcrumbs/BreadcrumbItem/styled.js

@@ -19,4 +19,3 @@ const StyledContainerIcon = styled("div")`
 
 exports.StyledContainerIcon = StyledContainerIcon;
 exports.StyledContainerItem = StyledContainerItem;
-//# sourceMappingURL=styled.js.map

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

@@ -21,4 +21,3 @@ const Breadcrumbs = ({ breadcrumbs, ...rest }) => {
 };
 
 module.exports = Breadcrumbs;
-//# sourceMappingURL=Breadcrumbs.js.map

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

@@ -15,4 +15,3 @@ const StyledContainerBreadcrumbs = styled("div")`
 `;
 
 exports.StyledContainerBreadcrumbs = StyledContainerBreadcrumbs;
-//# sourceMappingURL=styled.js.map

package/dist/cjs/components/molecules/DatePicker/DatePicker.js

@@ -159,4 +159,3 @@ const DatePicker = ({
 };
 
 exports.DatePicker = DatePicker;
-//# sourceMappingURL=DatePicker.js.map

package/dist/cjs/components/molecules/DateTimePicker/DateTimePicker.js

@@ -3,6 +3,7 @@
 var reactCore = require('@tecsinapse/react-core');
 var React = require('react');
 var index = require('../../atoms/Dropdown/index.js');
+var DateTimePickerSelector = require('../DateTimePickerSelector/DateTimePickerSelector.js');
 
 const DateTimePicker = ({ ...rest }) => {
   const [visible, setVisible] = React.useState(false);
@@ -12,6 +13,13 @@ const DateTimePicker = ({ ...rest }) => {
     reactCore.DateTimePicker,
     {
       ...rest,
+      DateTimeSelectorComponent: (props) => /* @__PURE__ */ React.createElement(
+        reactCore.ControlledDateTimeSelector,
+        {
+          SelectorComponent: DateTimePickerSelector,
+          ...props
+        }
+      ),
       requestShowSelector: show,
       requestCloseSelector: close,
       renderSelector: (selector) => /* @__PURE__ */ React.createElement(index.Dropdown, { visible, setVisible }, selector)
@@ -20,4 +28,3 @@ const DateTimePicker = ({ ...rest }) => {
 };
 
 exports.DateTimePicker = DateTimePicker;
-//# sourceMappingURL=DateTimePicker.js.map

package/dist/cjs/components/molecules/DateTimePickerSelector/DateTimePickerSelector.js

@@ -0,0 +1,98 @@
+'use strict';
+
+var React = require('react');
+var Button = require('../../atoms/Button/Button.js');
+var reactCore = require('@tecsinapse/react-core');
+var styled = require('./styled.js');
+var ScrollableTimePicker = require('../ScrollableTimePicker/ScrollableTimePicker.js');
+var ScrollableMonthYearPicker = require('../ScrollableMonthYearPicker/ScrollableMonthYearPicker.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const DateTimePickerSelector = ({
+  TextComponent = reactCore.Text,
+  currentMode,
+  handlePressBack,
+  modalTitle,
+  isDate,
+  date,
+  handleCalendarChange,
+  isMonth,
+  setDate,
+  handlePressConfirm,
+  confirmButtonText,
+  locale,
+  yearLabel,
+  monthLabel,
+  hourLabel,
+  minuteLabel,
+  ...rest
+}) => {
+  return /* @__PURE__ */ React__namespace.createElement(styled.Root, { ...rest }, /* @__PURE__ */ React__namespace.createElement(styled.Header, null, currentMode === 1 && /* @__PURE__ */ React__namespace.createElement(styled.BackButton, { onPress: handlePressBack }, /* @__PURE__ */ React__namespace.createElement(
+    reactCore.Icon,
+    {
+      type: "material-community",
+      name: "chevron-left",
+      size: "mega",
+      colorVariant: "secondary"
+    }
+  )), /* @__PURE__ */ React__namespace.createElement(TextComponent, { typography: "base", colorVariant: "secondary" }, modalTitle)), isDate ? /* @__PURE__ */ React__namespace.createElement(
+    reactCore.Calendar,
+    {
+      type: "day",
+      value: date,
+      onChange: handleCalendarChange,
+      year: date.getFullYear(),
+      month: date.getMonth()
+    }
+  ) : isMonth ? /* @__PURE__ */ React__namespace.createElement(styled.Content, { style: { flexDirection: "column" } }, /* @__PURE__ */ React__namespace.createElement(
+    styled.Content,
+    {
+      style: { width: "100%", flexDirection: "row", display: "flex" }
+    },
+    /* @__PURE__ */ React__namespace.createElement(
+      ScrollableMonthYearPicker,
+      {
+        setDate,
+        date,
+        locale,
+        yearLabel,
+        monthLabel
+      }
+    )
+  )) : /* @__PURE__ */ React__namespace.createElement(styled.Content, { style: { flexDirection: "column" } }, /* @__PURE__ */ React__namespace.createElement(
+    styled.Content,
+    {
+      style: { width: "100%", flexDirection: "row", display: "flex" }
+    },
+    /* @__PURE__ */ React__namespace.createElement(
+      ScrollableTimePicker,
+      {
+        setDate,
+        date,
+        locale,
+        hourLabel,
+        minuteLabel
+      }
+    )
+  )), /* @__PURE__ */ React__namespace.createElement(Button, { color: "primary", onPress: handlePressConfirm }, /* @__PURE__ */ React__namespace.createElement(TextComponent, { fontWeight: "bold", fontColor: "light" }, confirmButtonText || "OK")));
+};
+
+module.exports = DateTimePickerSelector;

package/dist/cjs/components/molecules/DateTimePickerSelector/components/MemoizedTimeCard.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var React = require('react');
+var styled = require('../styled.js');
+
+const MemoizedTimeCard = React.memo(
+  ({
+    time,
+    isSelected,
+    onPress,
+    TextComponent
+  }) => /* @__PURE__ */ React.createElement(styled.TimeCard, { id: time, key: time, isSelected, onPress }, /* @__PURE__ */ React.createElement(
+    TextComponent,
+    {
+      colorVariant: isSelected ? "primary" : "secondary",
+      colorTone: "xdark"
+    },
+    time
+  ))
+);
+
+module.exports = MemoizedTimeCard;