@onepercentio/one-ui 0.1.2

package/dist/components/Select/Select.js

@@ -0,0 +1,72 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const Collapsable_1 = __importDefault(require("../Collapsable"));
+const Text_1 = __importDefault(require("../Text"));
+const Select_module_scss_1 = __importDefault(require("./Select.module.scss"));
+const Input_1 = __importDefault(require("../Input"));
+const Loader_1 = __importDefault(require("../Loader"));
+const OneUIProvider_1 = require("../../context/OneUIProvider");
+/**
+ * A dropdown select
+ **/
+function Select(_a) {
+    var { items, selected, label, onClick, loading } = _a, otherProps = __rest(_a, ["items", "selected", "label", "onClick", "loading"]);
+    const { StateIndicator } = (0, OneUIProvider_1.useOneUIContext)().component.select;
+    const _selected = (0, react_1.useMemo)(() => {
+        return items.find((a) => a.value === selected);
+    }, [selected]);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (open) {
+            const close = () => {
+                setOpen(false);
+            };
+            window.addEventListener("click", close);
+            return () => window.removeEventListener("click", close);
+        }
+    }, [open]);
+    return (react_1.default.createElement(Collapsable_1.default, { title: react_1.default.createElement(Input_1.default, Object.assign({}, otherProps, { className: `${Select_module_scss_1.default.input} ${!items.length ? Select_module_scss_1.default.empty : ""}`, value: (_selected === null || _selected === void 0 ? void 0 : _selected.label) || label, disabled: true, Icon: react_1.default.createElement("div", { className: `${Select_module_scss_1.default.indicator}` }, loading ? react_1.default.createElement(Loader_1.default, null) : react_1.default.createElement(StateIndicator, { open: !!open })) })), id: undefined, mode: "float", open: open, onToggleOpen: (open) => {
+            if (items.length)
+                setOpen(open);
+        }, className: otherProps.disabled ? "disabled" : "", contentClassName: `${Select_module_scss_1.default.optionsContainer}` },
+        react_1.default.createElement("div", { className: Select_module_scss_1.default.items, onClick: (e) => {
+                e.stopPropagation();
+                setOpen(false);
+            } }, items.map((i) => (react_1.default.createElement(Text_1.default, { type: "caption", key: i.value, className: i === _selected ? Select_module_scss_1.default.selected : "", onClick: () => onClick(i) }, i.label))))));
+}
+exports.default = (0, react_1.forwardRef)((props, ref) => (react_1.default.createElement(Select, Object.assign({}, props))));
+//# sourceMappingURL=Select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"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"}

package/dist/components/Select/Select.module.scss

@@ -0,0 +1,47 @@
+@import "../../assets/styles/index.scss";
+
+> :last-child {
+  position: absolute;
+  right: 0px;
+  z-index: 100;
+}
+.items > * {
+  cursor: pointer;
+  background: $mainBackgroundColor;
+  padding: 12px 32px;
+  margin-bottom: 8px;
+  margin-left: 4px;
+  margin-right: 4px;
+  text-align: left;
+  border-radius: 4px;
+  font-size: 14px;
+  &.selected {
+    background-color: $lightGray;
+  }
+}
+.empty {
+  opacity: 0.3;
+}
+.input {
+  transition: opacity $fast;
+  cursor: pointer;
+  padding-right: 30px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform $fast;
+  min-height: inherit;
+  transform: rotateX(0deg);
+}
+.open {
+  transform: rotateX(180deg);
+}
+.optionsContainer {
+  margin: 0px 8px;
+  margin-top: -18px;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.16);
+}

package/dist/components/Select/Select.stories.d.ts

@@ -0,0 +1,48 @@
+import React from "react";
+declare const _default: {
+    component: <I extends import("./Select").SelectItem>({ items, selected, label, onClick, loading, ...otherProps }: {
+        loading?: boolean | undefined;
+        items: readonly I[];
+        onClick: (i: I) => void;
+    } & ({
+        selected?: I["value"] | undefined;
+        label: string;
+    } | {
+        selected: I["value"];
+        label?: string | undefined;
+    }) & Omit<{
+        error?: string | undefined;
+        hideError?: "onfocus" | undefined;
+        placeholder?: string | undefined;
+        disclaimer?: string | undefined;
+        icon?: ({
+            onClick?: (() => void) | undefined;
+        } & React.ClassAttributes<any> & React.ImgHTMLAttributes<HTMLImageElement>) | undefined;
+        Icon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    } & Omit<React.HTMLProps<HTMLInputElement>, "ref"> & React.RefAttributes<any>, "onClick" | "selected">) => JSX.Element;
+    title: string;
+};
+export default _default;
+export declare const InitialImplementation: {
+    (args: any): JSX.Element;
+    args: Partial<{
+        loading?: boolean | undefined;
+        items: readonly import("./Select").SelectItem[];
+        onClick: (i: import("./Select").SelectItem) => void;
+    } & ({
+        selected?: string | undefined;
+        label: string;
+    } | {
+        selected: string;
+        label?: string | undefined;
+    }) & Omit<{
+        error?: string | undefined;
+        hideError?: "onfocus" | undefined;
+        placeholder?: string | undefined;
+        disclaimer?: string | undefined;
+        icon?: ({
+            onClick?: (() => void) | undefined;
+        } & React.ClassAttributes<any> & React.ImgHTMLAttributes<HTMLImageElement>) | undefined;
+        Icon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    } & Omit<React.HTMLProps<HTMLInputElement>, "ref"> & React.RefAttributes<any>, "onClick" | "selected">>;
+};

package/dist/components/Select/Select.stories.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InitialImplementation = void 0;
+const react_1 = __importDefault(require("react"));
+const OneUIProvider_1 = __importDefault(require("../../context/OneUIProvider"));
+const MutableHamburgerButton_1 = __importDefault(require("../MutableHamburgerButton"));
+const Select_1 = __importDefault(require("./Select"));
+exports.default = {
+    component: Select_1.default,
+    title: "Select",
+};
+const InitialImplementation = (args) => (react_1.default.createElement(OneUIProvider_1.default, { config: {
+        component: {
+            select: {
+                StateIndicator: ({ open }) => (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(MutableHamburgerButton_1.default, { state: !open ? "arrow-down" : "arrow-up", size: 24 }))),
+            },
+        },
+    } },
+    react_1.default.createElement(Select_1.default, Object.assign({}, args))));
+exports.InitialImplementation = InitialImplementation;
+exports.InitialImplementation.args = {
+    items: [
+        {
+            label: "Example item",
+            value: "",
+        },
+    ],
+    label: "Example label",
+};
+//# sourceMappingURL=Select.stories.js.map

package/dist/components/Select/Select.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.stories.js","sourceRoot":"","sources":["../../../src/components/Select/Select.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,gFAAwD;AACxD,uFAA+D;AAC/D,sDAA8B;AAE9B,kBAAe;IACb,SAAS,EAAE,gBAAM;IACjB,KAAK,EAAE,QAAQ;CAChB,CAAC;AAEK,MAAM,qBAAqB,GAAG,CAAC,IAAS,EAAE,EAAE,CAAC,CAClD,8BAAC,uBAAa,IACZ,MAAM,EAAE;QACN,SAAS,EAAE;YACT,MAAM,EAAE;gBACN,cAAc,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAC5B;oBACE,8BAAC,gCAAsB,IACrB,KAAK,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,EACxC,IAAI,EAAE,EAAE,GACR,CACD,CACJ;aACF;SACF;KACF;IAED,8BAAC,gBAAM,oBAAK,IAAI,EAAI,CACN,CACjB,CAAC;AAnBW,QAAA,qBAAqB,yBAmBhC;AACF,6BAAqB,CAAC,IAAI,GAAG;IAC3B,KAAK,EAAE;QACL;YACE,KAAK,EAAE,cAAc;YACrB,KAAK,EAAE,EAAE;SACV;KACF;IACD,KAAK,EAAE,eAAe;CACyB,CAAC"}

package/dist/components/Select/Select.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Select/Select.test.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const Select_1 = __importDefault(require("./Select"));
+it('Should at least render :)', () => {
+    (0, react_2.render)(react_1.default.createElement(Select_1.default, Object.assign({}, {})));
+});
+//# sourceMappingURL=Select.test.js.map

package/dist/components/Select/Select.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.test.js","sourceRoot":"","sources":["../../../src/components/Select/Select.test.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,kDAAgD;AAEhD,sDAAiC;AAEjC,EAAE,CAAC,2BAA2B,EAAE,GAAG,EAAE;IACjC,IAAA,cAAM,EAAC,8BAAC,gBAAS,oBAAM,EAAU,EAAG,CAAC,CAAC;AAC1C,CAAC,CAAC,CAAA"}

package/dist/components/Select/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Select';

package/dist/components/Select/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Select_1 = require("./Select");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Select_1).default; } });
+//# sourceMappingURL=index.js.map

package/dist/components/Select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":";;;;;;AAAA,mCAAmC;AAA1B,kHAAA,OAAO,OAAA"}

package/dist/components/Spacing/Spacing.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A component to inject some spacing between component when required
+ **/
+export default function Spacing({ size }: {
+    size: "large" | "small" | "stretch";
+}): JSX.Element;

package/dist/components/Spacing/Spacing.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const Spacing_module_scss_1 = __importDefault(require("./Spacing.module.scss"));
+/**
+ * A component to inject some spacing between component when required
+ **/
+function Spacing({ size }) {
+    return react_1.default.createElement("div", { className: `${Spacing_module_scss_1.default.spacing} ${Spacing_module_scss_1.default[`spacing_${size}`]}` });
+}
+exports.default = Spacing;
+//# sourceMappingURL=Spacing.js.map

package/dist/components/Spacing/Spacing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spacing.js","sourceRoot":"","sources":["../../../src/components/Spacing/Spacing.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,gFAA2C;AAE3C;;IAEI;AACJ,SAAwB,OAAO,CAAC,EAAE,IAAI,EAA2C;IAC/E,OAAO,uCAAK,SAAS,EAAE,GAAG,6BAAM,CAAC,OAAO,IAAI,6BAAM,CAAC,WAAW,IAAI,EAAE,CAAC,EAAE,GAAI,CAAC;AAC9E,CAAC;AAFD,0BAEC"}

package/dist/components/Spacing/Spacing.module.scss

@@ -0,0 +1,13 @@
+.spacing_large {
+  height: 33px;
+}
+.spacing_small {
+  height: 15px;
+}
+.spacing_stretch {
+  flex: 1;
+}
+
+.spacing {
+  display: block;
+}

package/dist/components/Spacing/Spacing.stories.d.ts

@@ -0,0 +1,7 @@
+import C from "./Spacing";
+declare const _default: {
+    component: typeof C;
+    title: string;
+};
+export default _default;
+export declare const TodasVariacoes: () => JSX.Element[];

package/dist/components/Spacing/Spacing.stories.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TodasVariacoes = void 0;
+const react_1 = __importDefault(require("react"));
+const Spacing_1 = __importDefault(require("./Spacing"));
+exports.default = {
+    component: Spacing_1.default,
+    title: "Espaçamento",
+};
+const TodasVariacoes = () => {
+    const variantes = Spacing_1.default.__docgenInfo.props.size.type
+        .value;
+    return variantes
+        .map((a) => JSON.parse(a.value))
+        .map((a) => (react_1.default.createElement("div", { style: {
+            width: "25%",
+            marginRight: 24,
+            display: "inline-flex",
+            minHeight: "300px",
+            flexDirection: "column",
+            backgroundColor: "lightyellow",
+        } },
+        react_1.default.createElement("span", { style: { borderBottom: "2px solid black", marginBottom: 14 } },
+            "Tipo: ",
+            react_1.default.createElement("b", null, a)),
+        react_1.default.createElement("span", null, "Item antes do espacamento"),
+        react_1.default.createElement(Spacing_1.default, { size: a }),
+        react_1.default.createElement("span", null, "Item depois do espacamento"),
+        react_1.default.createElement(Spacing_1.default, { size: "large" }))));
+};
+exports.TodasVariacoes = TodasVariacoes;
+//# sourceMappingURL=Spacing.stories.js.map

package/dist/components/Spacing/Spacing.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spacing.stories.js","sourceRoot":"","sources":["../../../src/components/Spacing/Spacing.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,wDAA0B;AAE1B,kBAAe;IACb,SAAS,EAAE,iBAAC;IACZ,KAAK,EAAE,aAAa;CACrB,CAAC;AAEK,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,MAAM,SAAS,GAAyB,iBAAS,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI;SAC3E,KAAK,CAAC;IAET,OAAO,SAAS;SACb,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;SAC/B,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACV,uCACE,KAAK,EAAE;YACL,KAAK,EAAE,KAAK;YACZ,WAAW,EAAE,EAAE;YACf,OAAO,EAAE,aAAa;YACtB,SAAS,EAAE,OAAO;YAClB,aAAa,EAAE,QAAQ;YACvB,eAAe,EAAE,aAAa;SAC/B;QAED,wCAAM,KAAK,EAAE,EAAE,YAAY,EAAE,iBAAiB,EAAE,YAAY,EAAE,EAAE,EAAE;;YAC1D,yCAAI,CAAC,CAAK,CACX;QACP,wEAAsC;QACtC,8BAAC,iBAAC,IAAC,IAAI,EAAE,CAAQ,GAAI;QACrB,yEAAuC;QACvC,8BAAC,iBAAC,IAAC,IAAI,EAAC,OAAO,GAAG,CACd,CACP,CAAC,CAAC;AACP,CAAC,CAAC;AA1BW,QAAA,cAAc,kBA0BzB"}

package/dist/components/Spacing/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Spacing';

package/dist/components/Spacing/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Spacing_1 = require("./Spacing");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Spacing_1).default; } });
+//# sourceMappingURL=index.js.map

package/dist/components/Spacing/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Spacing/index.tsx"],"names":[],"mappings":";;;;;;AAAA,qCAAoC;AAA3B,mHAAA,OAAO,OAAA"}

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,19 @@
+export declare type TableProps<I extends any> = {
+    className?: string;
+    heading: {
+        [K in keyof I]?: string;
+    };
+    order: (keyof I)[];
+    items: (I & {
+        className?: string;
+    })[];
+    paginable?: {
+        currentPage: number;
+        totalItems: number;
+        togglePage: (page: number) => void;
+    };
+};
+/**
+ * A simple table layout
+ **/
+export default function Table<I extends any>({ paginable, heading, order, items, className, }: TableProps<I>): JSX.Element;

package/dist/components/Table/Table.js

@@ -0,0 +1,84 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const OneUIProvider_1 = require("../../context/OneUIProvider");
+const Button_1 = __importDefault(require("../Button"));
+const Spacing_1 = __importDefault(require("../Spacing"));
+const UncontrolledTransition_1 = __importDefault(require("../UncontrolledTransition"));
+const Table_module_scss_1 = __importDefault(require("./Table.module.scss"));
+/**
+ * A simple table layout
+ **/
+function Table({ paginable, heading, order, items, className = "", }) {
+    const transitionRef = (0, react_1.useRef)(null);
+    const { controls: { NextPage = ({ disabled }) => (react_1.default.createElement(Button_1.default, { disabled: disabled, variant: "filled" }, ">")), PrevPage = ({ disabled }) => (react_1.default.createElement(Button_1.default, { disabled: disabled, variant: "filled" }, "<")), }, } = (0, OneUIProvider_1.useOneUIContext)().component.table;
+    const { items: itemsToShow, pages } = (0, react_1.useMemo)(() => {
+        if (paginable) {
+            const numPages = Math.ceil(paginable.totalItems / 5);
+            return {
+                items: items.slice((paginable.currentPage - 1) * 5, (paginable.currentPage - 1) * 5 + 5),
+                pages: numPages,
+            };
+        }
+        return {
+            items: items,
+        };
+    }, [items, paginable === null || paginable === void 0 ? void 0 : paginable.currentPage, paginable === null || paginable === void 0 ? void 0 : paginable.totalItems]);
+    const Wrapper = paginable ? UncontrolledTransition_1.default : "div";
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(TableContext.Provider, { value: {
+                itemsToShow,
+                keys: order,
+                heading,
+            } },
+            react_1.default.createElement(Wrapper, { className: Table_module_scss_1.default.transitionContainer, ref: transitionRef },
+                react_1.default.createElement(TableComp, { key: paginable === null || paginable === void 0 ? void 0 : paginable.currentPage, className: className }))),
+        paginable && paginable.totalItems > 5 ? (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(Spacing_1.default, { size: "small" }),
+            react_1.default.createElement("div", { className: Table_module_scss_1.default.footer, "data-testid": "controls" },
+                react_1.default.createElement("span", { className: Table_module_scss_1.default.iterable, onClick: () => {
+                        if (!(transitionRef.current instanceof HTMLDivElement))
+                            transitionRef.current.setOrientation("backward");
+                        paginable.togglePage(paginable.currentPage - 1);
+                    } },
+                    react_1.default.createElement(PrevPage, { disabled: paginable.currentPage === 1 })),
+                react_1.default.createElement("span", { className: Table_module_scss_1.default.paging }, `${paginable.currentPage}/${pages}`),
+                react_1.default.createElement("span", { className: Table_module_scss_1.default.iterable, onClick: () => {
+                        if (!(transitionRef.current instanceof HTMLDivElement))
+                            transitionRef.current.setOrientation("forward");
+                        paginable.togglePage(paginable.currentPage + 1);
+                    } },
+                    react_1.default.createElement(NextPage, { disabled: paginable.currentPage === pages }))))) : null));
+}
+exports.default = Table;
+const TableContext = (0, react_1.createContext)(null);
+function TableComp({ className }) {
+    const { itemsToShow, keys, heading } = (0, react_1.useContext)(TableContext);
+    return (react_1.default.createElement("table", { className: `${Table_module_scss_1.default.container} ${className}` },
+        react_1.default.createElement("thead", null,
+            react_1.default.createElement("tr", null, keys.map((key) => (react_1.default.createElement("th", { key: String(key) }, heading[key]))))),
+        react_1.default.createElement("tbody", null, itemsToShow.map((i, index) => (react_1.default.createElement("tr", { key: String(index), className: i.className }, keys.map((key) => (react_1.default.createElement("td", { key: String(key) }, i[key])))))))));
+}
+//# sourceMappingURL=Table.js.map

package/dist/components/Table/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"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"}

package/dist/components/Table/Table.module.scss

@@ -0,0 +1,76 @@
+@import "../../assets/styles/index.scss";
+
+.transitionContainer {
+  min-height: auto;
+  max-width: 100vw;
+  overflow: auto;
+}
+
+.container {
+  font-family: $mainFontFamily;
+  padding: 0px 4px;
+  width: 100%;
+  position: relative;
+  border-spacing: 0px;
+  th {
+    font-family: 14px;
+    line-height: 28px;
+    text-align: start;
+    font-weight: normal;
+  }
+  td,
+  th {
+    padding: 20px;
+  }
+  tbody tr {
+    background-color: $tableRowBgColor;
+    &:first-child td {
+      &:first-child {
+        border-top-left-radius: 8px;
+      }
+      &:last-child {
+        border-top-right-radius: 8px;
+      }
+      border-top: 1px solid $tableRowBorderColor;
+    }
+    &:last-child td {
+      &:first-child {
+        border-bottom-left-radius: 8px;
+      }
+      &:last-child {
+        border-bottom-right-radius: 8px;
+      }
+    }
+    td {
+      border-bottom: 1px solid $tableRowBorderColor;
+      &:first-child {
+        border-left: 1px solid $tableRowBorderColor;
+      }
+      &:last-child {
+        border-right: 1px solid $tableRowBorderColor;
+      }
+    }
+  }
+}
+.footer {
+  padding: 0px 4px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  --button-min-width: auto;
+  --button-min-height: auto;
+
+  .paging {
+    font-family: $mainFontFamily;
+    color: $digitalBlue;
+    margin: 0px 12px;
+    font-size: 18px;
+  }
+}
+
+.iterable {
+  @include iteractibleElement;
+  &:first-child {
+    margin-left: auto;
+  }
+}

package/dist/components/Table/Table.stories.d.ts

@@ -0,0 +1,15 @@
+import Table, { TableProps } from "./Table";
+declare const _default: {
+    component: typeof Table;
+    title: string;
+};
+export default _default;
+export declare const Paginable: {
+    (args: any): JSX.Element;
+    args: Partial<TableProps<{
+        label1: string;
+        label2: string;
+        label3: string;
+        label4: string;
+    }>>;
+};