@gobolt/genesis 0.3.22 → 0.3.24

package/dist/components/TableWithControls/useTableWithControls.js

@@ -1,9 +1,36 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { useTable } from "../Table/useTable";
 import { mockColumns, mockDataSource } from "../Table/__mocks__/table-mocks";
 //import
-const tableControlsData = {
+var tableControlsData = {
     primaryTableRowData: {
         sortOptions: [
             { value: "status", label: _jsx("span", { children: "Status" }) },
@@ -22,7 +49,7 @@ const tableControlsData = {
         totalRecords: mockDataSource.appointments.length,
     },
 };
-const startingUseTableConfig = {
+var startingUseTableConfig = {
     columns: mockColumns,
     filters: {
         order: "asc",
@@ -31,106 +58,60 @@ const startingUseTableConfig = {
     disableAutoFetch: true,
     dataSource: [],
 };
-export const useTableWithControls = (tableConfig) => {
-    const [useTableConfig, setUseTableConfig] = useState(startingUseTableConfig);
-    const [groups, setGroups] = useState(tableControlsData.secondaryTableRowData.groups);
-    const [primaryTableRowData, setPrimaryTableRowData] = useState(tableControlsData.primaryTableRowData);
-    const { secondaryTableRowData } = tableControlsData;
-    const newSecondaryTableRowData = {
-        ...secondaryTableRowData,
-        groups,
-        totalRecords: safeDataSource.length,
-    };
-    const { dataSource, columns, rowSelection, updateDataSource } = useTable(useTableConfig);
+export var useTableWithControls = function (tableConfig) {
+    var _a = __read(useState(startingUseTableConfig), 2), useTableConfig = _a[0], setUseTableConfig = _a[1];
+    var _b = __read(useState(tableControlsData.secondaryTableRowData.groups), 2), groups = _b[0], setGroups = _b[1];
+    var _c = __read(useState(tableControlsData.primaryTableRowData), 2), primaryTableRowData = _c[0], setPrimaryTableRowData = _c[1];
+    var secondaryTableRowData = tableControlsData.secondaryTableRowData;
+    var newSecondaryTableRowData = __assign(__assign({}, secondaryTableRowData), { groups: groups, totalRecords: safeDataSource.length });
+    var _d = useTable(useTableConfig), dataSource = _d.dataSource, columns = _d.columns, rowSelection = _d.rowSelection, updateDataSource = _d.updateDataSource;
     // Ensure we always return a valid object, even if dataSource is empty
-    const safeDataSource = dataSource || [];
-    const onGroupItemClick = (title, item) => {
-        const newGroups = { ...groups };
-        newGroups[title] = newGroups[title].filter((group) => group !== item);
+    var safeDataSource = dataSource || [];
+    var onGroupItemClick = function (title, item) {
+        var newGroups = __assign({}, groups);
+        newGroups[title] = newGroups[title].filter(function (group) { return group !== item; });
         setGroups(newGroups);
     };
-    const onChange = (actionEvent) => {
+    var onChange = function (actionEvent) {
         if (actionEvent.event === "inputChange") {
-            const { value } = actionEvent.payload;
-            if (typeof value === "string") {
-                setUseTableConfig((previous) => ({
-                    ...previous,
-                    filters: {
-                        ...previous.filters,
-                        search: value,
-                    },
-                    fetchOptions: {
-                        ...previous.fetchOptions,
-                        body: JSON.stringify({
-                            filters: {
-                                ...previous.filters,
-                                search: value,
-                            },
-                        }),
-                    },
-                }));
+            var value_1 = actionEvent.payload.value;
+            if (typeof value_1 === "string") {
+                setUseTableConfig(function (previous) { return (__assign(__assign({}, previous), { filters: __assign(__assign({}, previous.filters), { search: value_1 }), fetchOptions: __assign(__assign({}, previous.fetchOptions), { body: JSON.stringify({
+                            filters: __assign(__assign({}, previous.filters), { search: value_1 }),
+                        }) }) })); });
             }
         }
         if (actionEvent.event === "primaryChange") {
-            const { value } = actionEvent.payload;
-            if (typeof value === "string") {
-                setUseTableConfig((previous) => ({
-                    ...previous,
-                    filters: {
-                        ...previous.filters,
-                        sort: value,
-                    },
-                    fetchOptions: {
-                        ...previous.fetchOptions,
-                        body: JSON.stringify({
-                            filters: {
-                                ...previous.filters,
-                                sort: value,
-                            },
-                        }),
-                    },
-                }));
+            var value_2 = actionEvent.payload.value;
+            if (typeof value_2 === "string") {
+                setUseTableConfig(function (previous) { return (__assign(__assign({}, previous), { filters: __assign(__assign({}, previous.filters), { sort: value_2 }), fetchOptions: __assign(__assign({}, previous.fetchOptions), { body: JSON.stringify({
+                            filters: __assign(__assign({}, previous.filters), { sort: value_2 }),
+                        }) }) })); });
             }
         }
         if (actionEvent.event === "groupItemClick") {
-            const { title, item } = actionEvent.payload;
+            var _a = actionEvent.payload, title = _a.title, item = _a.item;
             if (typeof title === "string" && typeof item === "string") {
                 onGroupItemClick(title, item);
             }
         }
         if (actionEvent.event === "orderClick") {
-            setPrimaryTableRowData((previous) => ({
-                ...previous,
-                isSortedAscending: !previous.isSortedAscending,
-            }));
-            const { value } = actionEvent.payload;
-            if (typeof value === "string") {
-                setUseTableConfig((previous) => ({
-                    ...previous,
-                    filters: {
-                        ...previous.filters,
-                        order: value,
-                    },
-                    fetchOptions: {
-                        ...previous.fetchOptions,
-                        body: JSON.stringify({
-                            filters: {
-                                ...previous.filters,
-                                order: value,
-                            },
-                        }),
-                    },
-                }));
+            setPrimaryTableRowData(function (previous) { return (__assign(__assign({}, previous), { isSortedAscending: !previous.isSortedAscending })); });
+            var value_3 = actionEvent.payload.value;
+            if (typeof value_3 === "string") {
+                setUseTableConfig(function (previous) { return (__assign(__assign({}, previous), { filters: __assign(__assign({}, previous.filters), { order: value_3 }), fetchOptions: __assign(__assign({}, previous.fetchOptions), { body: JSON.stringify({
+                            filters: __assign(__assign({}, previous.filters), { order: value_3 }),
+                        }) }) })); });
             }
         }
     };
     return {
-        onChange,
-        primaryTableRowData,
+        onChange: onChange,
+        primaryTableRowData: primaryTableRowData,
         secondaryTableRowData: newSecondaryTableRowData,
         dataSource: safeDataSource,
-        columns,
-        rowSelection,
-        updateDataSource,
+        columns: columns,
+        rowSelection: rowSelection,
+        updateDataSource: updateDataSource,
     };
 };

package/dist/components/TableWithControls/utils/icon-util.d.ts

@@ -0,0 +1,3 @@
+export declare const getIcon: (name: string) => import("react/jsx-runtime").JSX.Element;
+export declare const getIconColor: (state: any, theme: any) => any;
+export declare const getBadgeStateIcon: (state: any, color: any, isFilled?: boolean, hasIcon?: boolean, customIcon?: any) => any;

package/dist/components/TableWithControls/utils/icon-util.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { STATE } from "@gobolt/genesis/constants";
+const iconSize = 18;
+// check circle filled & outline
+import { FaCircleCheck } from "react-icons/fa6";
+import { HiOutlineCheckCircle } from "react-icons/hi";
+// info circle filled & outline
+import { PiInfoFill, PiInfo } from "react-icons/pi";
+// error circle filled & outline
+import { HiXCircle } from "react-icons/hi";
+import { HiOutlineXCircle } from "react-icons/hi";
+// warning circle filled & outline
+import { HiExclamationCircle } from "react-icons/hi";
+import { HiOutlineExclamationCircle } from "react-icons/hi";
+// minus circle filled & outline
+import { HiMinusCircle } from "react-icons/hi";
+import { HiOutlineMinusCircle } from "react-icons/hi";
+// clock circle filled & outline
+import { HiClock } from "react-icons/hi";
+import { HiOutlineClock } from "react-icons/hi";
+import { HiOutlineGlobe } from "react-icons/hi";
+import { TbFiles } from "react-icons/tb";
+import { LuTag } from "react-icons/lu";
+export const getIcon = (name) => {
+    switch (name.toLowerCase()) {
+        case "orders": {
+            return _jsx(LuTag, {});
+        }
+        case "warehouse": {
+            return _jsx(HiOutlineGlobe, {});
+        }
+        case "availability": {
+            return _jsx(TbFiles, {});
+        }
+        default: {
+            return null;
+        }
+    }
+};
+export const getIconColor = (state, theme) => {
+    switch (state) {
+        case STATE.error: {
+            return theme.colors.status.error.onsurface;
+        }
+        case STATE.success: {
+            return theme.colors.status.success.onsurface;
+        }
+        case STATE.warning: {
+            return theme.colors.status.warning.default;
+        }
+        case STATE.removed: {
+            return theme.colors.status.generic.default;
+        }
+        case STATE.progress: {
+            return theme.colors.timebox.evening.default;
+        }
+        case STATE.info:
+        default: {
+            return theme.colors.status.info.onsurface;
+        }
+    }
+};
+export const getBadgeStateIcon = (state, color, isFilled = true, hasIcon = true, customIcon = null) => {
+    if (!state || !hasIcon) {
+        return null;
+    }
+    if (customIcon) {
+        return customIcon;
+    }
+    if (!isFilled) {
+        switch (state) {
+            // isFilled is false
+            case STATE.warning: {
+                return _jsx(HiOutlineExclamationCircle, { size: iconSize, style: { color } });
+            }
+            case STATE.error: {
+                return _jsx(HiOutlineXCircle, { size: iconSize, style: { color } });
+            }
+            case STATE.success: {
+                return _jsx(HiOutlineCheckCircle, { size: iconSize, style: { color } });
+            }
+            case STATE.progress: {
+                return _jsx(HiOutlineClock, { size: iconSize, style: { color } });
+            }
+            case STATE.removed: {
+                return _jsx(HiOutlineMinusCircle, { size: iconSize, style: { color } });
+            }
+            case STATE.info:
+            default: {
+                return _jsx(PiInfo, { size: iconSize, style: { color } });
+            }
+        }
+    }
+    switch (state) {
+        // isFilled is true
+        case STATE.warning: {
+            return _jsx(HiExclamationCircle, { size: iconSize, style: { color } });
+        }
+        case STATE.error: {
+            return _jsx(HiXCircle, { size: iconSize, style: { color } });
+        }
+        case STATE.success: {
+            return _jsx(FaCircleCheck, { size: iconSize, style: { color } });
+        }
+        case STATE.progress: {
+            return _jsx(HiClock, { size: iconSize, style: { color } });
+        }
+        case STATE.removed: {
+            return _jsx(HiMinusCircle, { size: iconSize, style: { color } });
+        }
+        case STATE.info:
+        default: {
+            return _jsx(PiInfoFill, { size: iconSize, style: { color } });
+        }
+    }
+};

package/dist/components/Tooltip/Tooltip.js

@@ -2,7 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as S from "./styles";
 import { Typography } from "@gobolt/genesis/components";
 import { TYPOGRAPHY_VARIANT } from "@gobolt/genesis/constants";
-const Tooltip = ({ tip = "", children }) => {
+var Tooltip = function (_a) {
+    var _b = _a.tip, tip = _b === void 0 ? "" : _b, children = _a.children;
     return (_jsx(S.Tooltip, { "data-testid": "Tooltip", placement: "top", title: _jsx("div", { style: { marginTop: 2 }, children: _jsx(Typography, { variant: TYPOGRAPHY_VARIANT.body2, color: "white", children: tip }) }), children: children }));
 };
 export default Tooltip;

package/dist/components/Tooltip/styles.d.ts

@@ -1,6 +1,19 @@
+import { type GenesisTheme } from "@gobolt/genesis/styles/theme/genesis-theme.types";
+interface StyledTooltipProperties {
+    theme?: GenesisTheme;
+    type?: "primary" | "secondary";
+    state?: "active" | "disabled";
+}
 export declare const getGenesisClass: ({ colors, borderRadius, sizing }: {
     colors: any;
     borderRadius: any;
     sizing: any;
 }, type?: string, state?: string) => string;
-export declare const Tooltip: any;
+export declare const Tooltip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(Omit<import("antd/es/tooltip").TooltipPropsWithTitle & import("react").RefAttributes<import("antd/es/tooltip").TooltipRef>, "ref"> & {
+    ref?: ((instance: import("antd/es/tooltip").TooltipRef | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<import("antd/es/tooltip").TooltipRef> | null | undefined;
+}) | (Omit<import("antd/es/tooltip").TooltipPropsWithOverlay & import("react").RefAttributes<import("antd/es/tooltip").TooltipRef>, "ref"> & {
+    ref?: ((instance: import("antd/es/tooltip").TooltipRef | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<import("antd/es/tooltip").TooltipRef> | null | undefined;
+}), StyledTooltipProperties>> & string & Omit<import("react").ForwardRefExoticComponent<import("antd").TooltipProps & import("react").RefAttributes<import("antd/es/tooltip").TooltipRef>> & {
+    _InternalPanelDoNotUseOrYouWillBeFired: import("react").FC<import("antd/es/tooltip/PurePanel").PurePanelProps>;
+}, keyof import("react").Component<any, {}, any>>;
+export {};

package/dist/components/Tooltip/styles.js

@@ -1,26 +1,17 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import styled from "@gobolt/genesis/utils/styled";
 import { Tooltip as AntTooltip } from "antd";
-export const getGenesisClass = ({ colors, borderRadius, sizing }, type = "primary", state = "active") => `
-  .ant-tooltip {
-    --antd-arrow-background-color: ${colors.surface.dark};
-  }
-
-  .ant-tooltip-inner {
-    background-color: ${colors.surface.dark};
-    border-radius: ${borderRadius.sm};
-    padding: ${sizing.xs} ${sizing.sm};
-    font-size: 14px;
-    line-height: 20px;
-    color: ${colors.onsurface.white};
-    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
-  }
-
-  .ant-tooltip-arrow-content {
-    background-color: ${colors.surface.dark};
-  }
-`;
-export const Tooltip = styled(AntTooltip) `
-  ${({ theme, type, state }) => {
+export var getGenesisClass = function (_a, type, state) {
+    var colors = _a.colors, borderRadius = _a.borderRadius, sizing = _a.sizing;
+    if (type === void 0) { type = "primary"; }
+    if (state === void 0) { state = "active"; }
+    return "\n  .ant-tooltip {\n    --antd-arrow-background-color: ".concat(colors.surface.dark, ";\n  }\n\n  .ant-tooltip-inner {\n    background-color: ").concat(colors.surface.dark, ";\n    border-radius: ").concat(borderRadius.sm, ";\n    padding: ").concat(sizing.xs, " ").concat(sizing.sm, ";\n    font-size: 14px;\n    line-height: 20px;\n    color: ").concat(colors.onsurface.white, ";\n    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);\n  }\n\n  .ant-tooltip-arrow-content {\n    background-color: ").concat(colors.surface.dark, ";\n  }\n");
+};
+export var Tooltip = styled(AntTooltip)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+    var theme = _a.theme, type = _a.type, state = _a.state;
     return getGenesisClass(theme, type, state);
-}}
-`;
+});
+var templateObject_1;

package/dist/components/Typography/Typography.js

@@ -1,16 +1,39 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as S from "./styles";
 import { useGenesis } from "@gobolt/genesis/providers";
 import { TYPE, TYPOGRAPHY_VARIANT, STATE, } from "@gobolt/genesis/constants";
-const Typography = ({ children, themeType = TYPE.secondary, variant = TYPOGRAPHY_VARIANT.body1, state = STATE.active, color, isText = false, isFullWidth, style, isDisabled, ...rest }) => {
-    const { breakpoint } = useGenesis();
+var Typography = function (_a) {
+    var children = _a.children, _b = _a.themeType, themeType = _b === void 0 ? TYPE.secondary : _b, _c = _a.variant, variant = _c === void 0 ? TYPOGRAPHY_VARIANT.body1 : _c, _d = _a.state, state = _d === void 0 ? STATE.active : _d, color = _a.color, _e = _a.isText, isText = _e === void 0 ? false : _e, isFullWidth = _a.isFullWidth, style = _a.style, isDisabled = _a.isDisabled, rest = __rest(_a, ["children", "themeType", "variant", "state", "color", "isText", "isFullWidth", "style", "isDisabled"]);
+    var breakpoint = useGenesis().breakpoint;
     if (variant.startsWith("display") || variant.startsWith("heading")) {
-        const level = variant.split("heading")[1] || variant.split("display")[1];
-        return (_jsx(S.Headline, { state: state, "$themeType": themeType, variant: variant, breakpoint: breakpoint, color: color, level: Number.parseInt(level), "$isFullWidth": isFullWidth, style: style, disabled: isDisabled, ...rest, children: children }));
+        var level = variant.split("heading")[1] || variant.split("display")[1];
+        return (_jsx(S.Headline, __assign({ state: state, "$themeType": themeType, variant: variant, breakpoint: breakpoint, color: color, level: Number.parseInt(level), "$isFullWidth": isFullWidth, style: style, disabled: isDisabled }, rest, { children: children })));
     }
     if (isText) {
-        return (_jsx(S.Text, { state: state, "$themeType": themeType, variant: variant, breakpoint: breakpoint, color: color, "$isFullWidth": isFullWidth, style: style, disabled: isDisabled, ...rest, children: children }));
+        return (_jsx(S.Text, __assign({ state: state, "$themeType": themeType, variant: variant, breakpoint: breakpoint, color: color, "$isFullWidth": isFullWidth, style: style, disabled: isDisabled }, rest, { children: children })));
     }
-    return (_jsx(S.Paragraph, { state: state, "$themeType": themeType, variant: variant, breakpoint: breakpoint, color: color, "$isFullWidth": isFullWidth, style: style, disabled: isDisabled, ...rest, children: children }));
+    return (_jsx(S.Paragraph, __assign({ state: state, "$themeType": themeType, variant: variant, breakpoint: breakpoint, color: color, "$isFullWidth": isFullWidth, style: style, disabled: isDisabled }, rest, { children: children })));
 };
 export default Typography;

package/dist/components/Typography/styles.d.ts

@@ -1,3 +1,21 @@
-export declare const Headline: any;
-export declare const Paragraph: any;
-export declare const Text: any;
+import { GenesisTheme } from "@/lib/styles/theme/genesis-theme.types";
+import { TYPE, STATE } from "@gobolt/genesis/constants";
+interface TypographyStyledProperties {
+    theme: GenesisTheme;
+    $themeType?: keyof typeof TYPE;
+    variant?: string;
+    state?: keyof typeof STATE;
+    breakpoint?: string;
+    color?: string;
+    $isFullWidth?: boolean;
+}
+export declare const Headline: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("antd/es/typography/Title").TitleProps & import("react").RefAttributes<HTMLElement>, "ref"> & {
+    ref?: ((instance: HTMLElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLElement> | null | undefined;
+}, TypographyStyledProperties>> & string & Omit<import("react").ForwardRefExoticComponent<import("antd/es/typography/Title").TitleProps & import("react").RefAttributes<HTMLElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const Paragraph: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("antd/es/typography/Paragraph").ParagraphProps & import("react").RefAttributes<HTMLElement>, "ref"> & {
+    ref?: ((instance: HTMLElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLElement> | null | undefined;
+}, TypographyStyledProperties>> & string & Omit<import("react").ForwardRefExoticComponent<import("antd/es/typography/Paragraph").ParagraphProps & import("react").RefAttributes<HTMLElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const Text: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, TypographyStyledProperties>> & string & Omit<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, keyof import("react").Component<any, {}, any>>;
+export {};

package/dist/components/Typography/styles.js

@@ -1,54 +1,37 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import styled from "@gobolt/genesis/utils/styled";
 import { Typography as AntTypography } from "antd";
-const getVariant = (typography, variant, breakpoint) => {
-    return `
-        font-size: ${typography[breakpoint][variant].fontSize}px !important;
-        line-height: ${typography[breakpoint][variant].lineHeight};
-        letter-spacing: ${typography[breakpoint][variant].letterSpacing}px;
-        font-weight: ${typography[breakpoint][variant].fontWeight};
-      `;
+var getVariant = function (typography, variant, breakpoint) {
+    return "\n        font-size: ".concat(typography[breakpoint][variant].fontSize, "px !important;\n        line-height: ").concat(typography[breakpoint][variant].lineHeight, ";\n        letter-spacing: ").concat(typography[breakpoint][variant].letterSpacing, "px;\n        font-weight: ").concat(typography[breakpoint][variant].fontWeight, ";\n      ");
 };
-const getColor = (color, colors, $themeType) => {
+var getColor = function (color, colors, $themeType) {
     if (color) {
         return color;
     }
     return colors[$themeType].active.color;
 };
-const getFontFamily = (variant) => {
-    return `
-    ${variant.includes("digits")
+var getFontFamily = function (variant) {
+    return "\n    ".concat(variant.includes("digits")
         ? "'Roboto Mono', sans-serif"
-        : "'Inter', sans-serif"} !important;
-  `;
+        : "'Inter', sans-serif", " !important;\n  ");
+};
+var getGenesisTypographyClass = function (_a, $themeType, variant, state, breakpoint, color, $isFullWidth) {
+    var colors = _a.colors, typography = _a.typography;
+    return "\n    &.ant-typography {\n      font-family: ".concat(getFontFamily(variant), ";\n      color: ").concat(getColor(color, colors, $themeType), " !important;\n      ").concat(getVariant(typography, variant, breakpoint), "\n      margin-bottom: 0 !important;\n      width: ").concat($isFullWidth ? "100%" : "auto", ";\n      line-height: 1;\n\n      &:disabled {\n        color: ").concat(colors.status.disabled.default, " !important;\n        userSelect: none;\n        cursor: not-allowed;\n      }\n    } \n");
 };
-const getGenesisTypographyClass = ({ colors, typography }, $themeType, variant, state, breakpoint, color, $isFullWidth) => `
-    &.ant-typography {
-      font-family: ${getFontFamily(variant)};
-      color: ${getColor(color, colors, $themeType)} !important;
-      ${getVariant(typography, variant, breakpoint)}
-      margin-bottom: 0 !important;
-      width: ${$isFullWidth ? "100%" : "auto"};
-      line-height: 1;
-
-      &:disabled {
-        color: ${colors.status.disabled.default} !important;
-        userSelect: none;
-        cursor: not-allowed;
-      }
-    } 
-`;
-export const Headline = styled(AntTypography.Title) `
-  ${({ theme, $themeType, variant, state, breakpoint, color, $isFullWidth, }) => {
+export var Headline = styled(AntTypography.Title)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+    var theme = _a.theme, $themeType = _a.$themeType, variant = _a.variant, state = _a.state, breakpoint = _a.breakpoint, color = _a.color, $isFullWidth = _a.$isFullWidth;
     return getGenesisTypographyClass(theme, $themeType, variant, state, breakpoint, color, $isFullWidth);
-}}
-`;
-export const Paragraph = styled(AntTypography.Paragraph) `
-  ${({ theme, $themeType, variant, state, breakpoint, color, $isFullWidth, }) => {
+});
+export var Paragraph = styled(AntTypography.Paragraph)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+    var theme = _a.theme, $themeType = _a.$themeType, variant = _a.variant, state = _a.state, breakpoint = _a.breakpoint, color = _a.color, $isFullWidth = _a.$isFullWidth;
     return getGenesisTypographyClass(theme, $themeType, variant, state, breakpoint, color, $isFullWidth);
-}}
-`;
-export const Text = styled(AntTypography.Text) `
-  ${({ theme, $themeType, variant, state, breakpoint, color, $isFullWidth, }) => {
+});
+export var Text = styled(AntTypography.Text)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+    var theme = _a.theme, $themeType = _a.$themeType, variant = _a.variant, state = _a.state, breakpoint = _a.breakpoint, color = _a.color, $isFullWidth = _a.$isFullWidth;
     return getGenesisTypographyClass(theme, $themeType, variant, state, breakpoint, color, $isFullWidth);
-}}
-`;
+});
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/UtilityButton/UtilityButton.js

@@ -1,9 +1,32 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import Button from "../Button";
 import { TYPE } from "../../constants";
-const UtilityButton = ({ children, onClick, state = "active", isIconButton = false, size = "normal", ...rest }) => {
-    const buttonState = state === "active" || state === "disabled" ? state : "active";
-    const themeType = TYPE.utility;
-    return (_jsx(Button, { onClick: onClick, themeType: themeType, state: buttonState, disabled: state === "disabled" || rest.disabled, isIconButton: isIconButton, size: size, ...rest, children: children }));
+var UtilityButton = function (_a) {
+    var children = _a.children, onClick = _a.onClick, _b = _a.state, state = _b === void 0 ? "active" : _b, _c = _a.isIconButton, isIconButton = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "normal" : _d, rest = __rest(_a, ["children", "onClick", "state", "isIconButton", "size"]);
+    var buttonState = state === "active" || state === "disabled" ? state : "active";
+    var themeType = TYPE.utility;
+    return (_jsx(Button, __assign({ onClick: onClick, themeType: themeType, state: buttonState, disabled: state === "disabled" || rest.disabled, isIconButton: isIconButton, size: size }, rest, { children: children })));
 };
 export default UtilityButton;

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

@@ -0,0 +1,16 @@
+import React, { MouseEvent } from "react";
+import type { ButtonProps as AntButtonProperties } from "antd/es/button";
+import { STATE } from "../../constants";
+type ButtonThemeType = "primary" | "secondary" | "tertiary" | "destructive" | "utility" | "icon";
+export interface ButtonProps extends Omit<AntButtonProperties, "type" | "size"> {
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    children?: React.ReactNode;
+    themeType?: ButtonThemeType;
+    state?: keyof typeof STATE;
+    isIconButton?: boolean;
+    size?: "small" | "normal" | "large";
+    isSelected?: boolean;
+    icon?: React.ReactNode;
+}
+declare const Button: React.FC<ButtonProps>;
+export default Button;

package/dist/components/UtilityButton/components/Button/Button.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as S from "./styles";
+const getState = (state, isSelected) => {
+    if (isSelected) {
+        return "selected";
+    }
+    return state === "active" || state === "disabled" ? state : "active";
+};
+const Button = ({ children, onClick, themeType = "primary", state = "active", isIconButton = false, size = "normal", isSelected, ...rest }) => {
+    const buttonState = getState(state, isSelected);
+    return (_jsx(S.Button, { onClick: onClick, "$themeType": themeType, "$state": buttonState, disabled: state === "disabled" || rest.disabled, "$isIconButton": isIconButton, size: size, ...rest, children: children }));
+};
+export default Button;

package/dist/components/UtilityButton/components/Button/IconButton.d.ts

@@ -0,0 +1,8 @@
+import type { ButtonProps } from "./Button";
+export interface IconButtonProps extends Omit<ButtonProps, "themeType" | "size"> {
+    icon: React.ReactNode;
+    size?: "small" | "normal" | "large";
+    isSelected?: boolean;
+}
+declare const IconButton: ({ isSelected, state, onClick, icon, size, ...rest }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default IconButton;

package/dist/components/UtilityButton/components/Button/IconButton.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as S from "./icon-button-styles";
+import { TYPE } from "../../constants";
+const IconButton = ({ isSelected = false, state = "active", onClick, icon, size = "small", ...rest }) => {
+    const buttonState = state === "active" || state === "disabled" ? state : "active";
+    const themeType = TYPE.icon;
+    return (_jsx(S.Button, { onClick: onClick, "$themeType": themeType, "$state": buttonState, disabled: state === "disabled" || rest.disabled, size: size, "$isSelected": isSelected, ...rest, children: icon }));
+};
+export default IconButton;

package/dist/components/UtilityButton/components/Button/icon-button-styles.d.ts

@@ -0,0 +1 @@
+export declare const Button: any;