@gobolt/genesis 0.3.21 → 0.3.22

package/dist/components/TableWithControls/useTableWithControls.js

@@ -1,36 +1,9 @@
-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
-var tableControlsData = {
+const tableControlsData = {
     primaryTableRowData: {
         sortOptions: [
             { value: "status", label: _jsx("span", { children: "Status" }) },
@@ -49,7 +22,7 @@ var tableControlsData = {
         totalRecords: mockDataSource.appointments.length,
     },
 };
-var startingUseTableConfig = {
+const startingUseTableConfig = {
     columns: mockColumns,
     filters: {
         order: "asc",
@@ -58,60 +31,106 @@ var startingUseTableConfig = {
     disableAutoFetch: true,
     dataSource: [],
 };
-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;
+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);
     // Ensure we always return a valid object, even if dataSource is empty
-    var safeDataSource = dataSource || [];
-    var onGroupItemClick = function (title, item) {
-        var newGroups = __assign({}, groups);
-        newGroups[title] = newGroups[title].filter(function (group) { return group !== item; });
+    const safeDataSource = dataSource || [];
+    const onGroupItemClick = (title, item) => {
+        const newGroups = { ...groups };
+        newGroups[title] = newGroups[title].filter((group) => group !== item);
         setGroups(newGroups);
     };
-    var onChange = function (actionEvent) {
+    const onChange = (actionEvent) => {
         if (actionEvent.event === "inputChange") {
-            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 }),
-                        }) }) })); });
+            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,
+                            },
+                        }),
+                    },
+                }));
             }
         }
         if (actionEvent.event === "primaryChange") {
-            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 }),
-                        }) }) })); });
+            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,
+                            },
+                        }),
+                    },
+                }));
             }
         }
         if (actionEvent.event === "groupItemClick") {
-            var _a = actionEvent.payload, title = _a.title, item = _a.item;
+            const { title, item } = actionEvent.payload;
             if (typeof title === "string" && typeof item === "string") {
                 onGroupItemClick(title, item);
             }
         }
         if (actionEvent.event === "orderClick") {
-            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 }),
-                        }) }) })); });
+            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,
+                            },
+                        }),
+                    },
+                }));
             }
         }
     };
     return {
-        onChange: onChange,
-        primaryTableRowData: primaryTableRowData,
+        onChange,
+        primaryTableRowData,
         secondaryTableRowData: newSecondaryTableRowData,
         dataSource: safeDataSource,
-        columns: columns,
-        rowSelection: rowSelection,
-        updateDataSource: updateDataSource,
+        columns,
+        rowSelection,
+        updateDataSource,
     };
 };

package/dist/components/Tooltip/Tooltip.js

@@ -2,8 +2,7 @@ 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";
-var Tooltip = function (_a) {
-    var _b = _a.tip, tip = _b === void 0 ? "" : _b, children = _a.children;
+const Tooltip = ({ tip = "", 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,19 +1,6 @@
-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: 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 {};
+export declare const Tooltip: any;

package/dist/components/Tooltip/styles.js

@@ -1,17 +1,26 @@
-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 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;
+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 }) => {
     return getGenesisClass(theme, type, state);
-});
-var templateObject_1;
+}}
+`;

package/dist/components/Typography/Typography.js

@@ -1,39 +1,16 @@
-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";
-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;
+const Typography = ({ children, themeType = TYPE.secondary, variant = TYPOGRAPHY_VARIANT.body1, state = STATE.active, color, isText = false, isFullWidth, style, isDisabled, ...rest }) => {
+    const { breakpoint } = useGenesis();
     if (variant.startsWith("display") || variant.startsWith("heading")) {
-        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 })));
+        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 }));
     }
     if (isText) {
-        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.Text, { 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 })));
+    return (_jsx(S.Paragraph, { 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,21 +1,3 @@
-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 {};
+export declare const Headline: any;
+export declare const Paragraph: any;
+export declare const Text: any;

package/dist/components/Typography/styles.js

@@ -1,37 +1,54 @@
-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";
-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 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 getColor = function (color, colors, $themeType) {
+const getColor = (color, colors, $themeType) => {
     if (color) {
         return color;
     }
     return colors[$themeType].active.color;
 };
-var getFontFamily = function (variant) {
-    return "\n    ".concat(variant.includes("digits")
+const getFontFamily = (variant) => {
+    return `
+    ${variant.includes("digits")
         ? "'Roboto Mono', sans-serif"
-        : "'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");
+        : "'Inter', sans-serif"} !important;
+  `;
 };
-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;
+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, }) => {
     return getGenesisTypographyClass(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;
+}}
+`;
+export const Paragraph = styled(AntTypography.Paragraph) `
+  ${({ theme, $themeType, variant, state, breakpoint, color, $isFullWidth, }) => {
     return getGenesisTypographyClass(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;
+}}
+`;
+export const Text = styled(AntTypography.Text) `
+  ${({ theme, $themeType, variant, state, breakpoint, color, $isFullWidth, }) => {
     return getGenesisTypographyClass(theme, $themeType, variant, state, breakpoint, color, $isFullWidth);
-});
-var templateObject_1, templateObject_2, templateObject_3;
+}}
+`;

package/dist/components/UtilityButton/UtilityButton.js

@@ -1,32 +1,9 @@
-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";
-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 })));
+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 }));
 };
 export default UtilityButton;

package/dist/components/shared/DropdownChevron.js

@@ -1,18 +1,7 @@
-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);
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useGenesis } from "@gobolt/genesis/providers";
-var DropdownChevron = function (properties) {
-    var theme = useGenesis().theme;
-    return (_jsx("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, fill: "none" }, properties, { children: _jsx("path", { fill: "#222", fillRule: "evenodd", d: "M5.293 7.293a1 1 0 0 1 1.414 0L10 10.586l3.293-3.293a1 1 0 1 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414Z", clipRule: "evenodd" }) })));
+const DropdownChevron = (properties) => {
+    const { theme } = useGenesis();
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, fill: "none", ...properties, children: _jsx("path", { fill: "#222", fillRule: "evenodd", d: "M5.293 7.293a1 1 0 0 1 1.414 0L10 10.586l3.293-3.293a1 1 0 1 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414Z", clipRule: "evenodd" }) }));
 };
 export default DropdownChevron;

package/dist/constants/index.js

@@ -1,4 +1,4 @@
-export var TYPE = {
+export const TYPE = {
     primary: "primary",
     secondary: "secondary",
     tertiary: "tertiary",
@@ -6,12 +6,12 @@ export var TYPE = {
     utility: "utility",
     icon: "icon",
 };
-export var BREAKPOINTS = {
+export const BREAKPOINTS = {
     wide: "wide",
     medium: "medium",
     narrow: "narrow",
 };
-export var STATE = {
+export const STATE = {
     active: "active",
     hover: "hover",
     pressed: "pressed",
@@ -27,7 +27,7 @@ export var STATE = {
     removed: "removed",
     hollow: "hollow",
 };
-export var TYPOGRAPHY_VARIANT = {
+export const TYPOGRAPHY_VARIANT = {
     display1: "display1",
     display2: "display2",
     display3: "display3",
@@ -56,18 +56,18 @@ export var TYPOGRAPHY_VARIANT = {
     digits2: "digits2",
     digits3: "digits3",
 };
-export var BUTTON_VARIANT = {
+export const BUTTON_VARIANT = {
     primary: "primary",
     secondary: "secondary",
     tertiary: "tertiary",
 };
-export var SIZE = {
+export const SIZE = {
     small: "small",
     medium: "medium",
     large: "large",
     standard: "standard",
 };
-export var BADGE = {
+export const BADGE = {
     appointment: "appointment",
     asn: "asn",
     inventory: "inventory",
@@ -79,11 +79,11 @@ export var BADGE = {
     system: "system",
 };
 export default {
-    TYPE: TYPE,
-    BREAKPOINTS: BREAKPOINTS,
-    STATE: STATE,
-    TYPOGRAPHY_VARIANT: TYPOGRAPHY_VARIANT,
-    BUTTON_VARIANT: BUTTON_VARIANT,
-    SIZE: SIZE,
-    BADGE: BADGE,
+    TYPE,
+    BREAKPOINTS,
+    STATE,
+    TYPOGRAPHY_VARIANT,
+    BUTTON_VARIANT,
+    SIZE,
+    BADGE,
 };