fuse-importer 0.1.5-testing → 0.1.7-testing

package/lib/esm/common/Table/TableActions/TableActions.js

@@ -21,17 +21,22 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useReviewContext } from "../../../Importer";
 import { defaultTableActionsHeightPx } from "./common";
+import { CustomActions } from "./CustomActions";
 import { DeleteSelectedRows } from "./DeleteSelectedRows";
-import { SearchRows } from "./SearchRows";
 import { ExportData } from "./ExportData";
-import * as S from "./TableActions.styles";
 import { FilterByErrors } from "./FilterByErrors/FilterByErrors";
 import { RowFilters } from "./RowFilters";
+import { SearchRows } from "./SearchRows";
+import * as S from "./TableActions.styles";
 import { TransformedRecordsCount } from "./TransformedRecordsCount";
-import { CustomActions } from "./CustomActions";
 import ValidationProgress from "./ValidationProgress";
 export var TableActions = function (_a) {
     var _b = _a.tableActionsHeight, tableActionsHeight = _b === void 0 ? defaultTableActionsHeightPx : _b, props = __rest(_a, ["tableActionsHeight"]);
-    return (_jsxs(S.TableActionsContainer, __assign({ height: tableActionsHeight }, props, { children: [_jsxs(S.TableActionsContent, { children: [_jsx(SearchRows, {}), _jsx(RowFilters, {}), _jsx(FilterByErrors, {}), _jsxs(S.ButtonActionsContainer, { children: [_jsx(DeleteSelectedRows, {}), _jsx(ExportData, {}), _jsx(CustomActions, {})] })] }), _jsxs(S.TableActionsInformations, { children: [_jsx(ValidationProgress, {}), _jsx(TransformedRecordsCount, {})] })] })));
+    var _c = useReviewContext(), isTransformTooltipOpened = _c.isTransformTooltipOpened, setIsTransformTooltipOpened = _c.setIsTransformTooltipOpened;
+    var onCloseTransformsTooltip = function () {
+        setIsTransformTooltipOpened(false);
+    };
+    return (_jsxs(S.TableActionsContainer, __assign({ height: tableActionsHeight }, props, { children: [_jsxs(S.TableActionsContent, { children: [_jsx(SearchRows, {}), _jsx(RowFilters, {}), _jsx(FilterByErrors, {}), _jsxs(S.ButtonActionsContainer, { children: [_jsx(DeleteSelectedRows, {}), _jsx(ExportData, {}), _jsx(CustomActions, {})] })] }), _jsxs(S.TableActionsInformations, { children: [_jsx(ValidationProgress, {}), isTransformTooltipOpened && (_jsx(TransformedRecordsCount, { onClose: onCloseTransformsTooltip }))] })] })));
 };

package/lib/esm/common/Table/TableActions/TableActions.styles.js

@@ -13,6 +13,6 @@ export var TableActionsContainer = styled(Div)(templateObject_1 || (templateObje
 });
 export var ButtonActionsContainer = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  gap: 8px;\n"], ["\n  align-items: center;\n  display: flex;\n  gap: 8px;\n"])));
 export var TableActionsContent = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  gap: 16px;\n"], ["\n  align-items: center;\n  display: flex;\n  gap: 16px;\n"])));
-export var TableActionsInformations = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  gap: 16px;\n"], ["\n  align-items: center;\n  display: flex;\n  gap: 16px;\n"])));
+export var TableActionsInformations = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  gap: 16px;\n  position: relative;\n  z-index: 101;\n"], ["\n  align-items: center;\n  display: flex;\n  gap: 16px;\n  position: relative;\n  z-index: 101;\n"])));
 export var ActionButton = styled.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  background: transparent;\n  border-radius: 4px;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  height: 36px;\n  justify-content: center;\n  padding: 0px;\n  width: 36px;\n\n  :disabled {\n    opacity: 0.6;\n\n    :hover {\n      background-color: transparent !important;\n      cursor: not-allowed;\n    }\n  }\n"], ["\n  align-items: center;\n  background: transparent;\n  border-radius: 4px;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  height: 36px;\n  justify-content: center;\n  padding: 0px;\n  width: 36px;\n\n  :disabled {\n    opacity: 0.6;\n\n    :hover {\n      background-color: transparent !important;\n      cursor: not-allowed;\n    }\n  }\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/lib/esm/common/Table/TableActions/TransformedRecordsCount.d.ts

@@ -1 +1,6 @@
-export declare const TransformedRecordsCount: () => JSX.Element;
+export declare const TooltipBackdrop: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../styled").CSSProps, never>;
+type TransformedRecordsCountProps = {
+    onClose: () => void;
+};
+export declare const TransformedRecordsCount: ({ onClose, }: TransformedRecordsCountProps) => JSX.Element;
+export {};

package/lib/esm/common/Table/TableActions/TransformedRecordsCount.js

@@ -14,16 +14,16 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
-import { useSpreadsheetContext } from "../../../Importer";
-import { Div, colors } from "../../../styled";
-import { CheckIcon } from "./icons";
 import { Button } from "../../../common/buttons";
-import { truncateString } from "../../../utils";
+import { useSpreadsheetContext } from "../../../Importer";
 import { useDataSetContext } from "../../../Importer/common/Spreadsheet/DataSetContextProvider";
-import { useValidationContext } from "../../../Importer/common/Spreadsheet/ValidationContextProvider";
+import { useFilteredDataContext } from "../../../Importer/common/Spreadsheet/FilteredDataContextProvider";
+import { colors, Div } from "../../../styled";
+import { truncateString } from "../../../utils";
+import { CheckIcon } from "./icons";
 var formatToLocaleString = function (number) {
     return number.toLocaleString(undefined, {
         minimumFractionDigits: 0,
@@ -31,60 +31,41 @@ var formatToLocaleString = function (number) {
     });
 };
 var RecordsCountContainer = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  z-index: 2;\n\n  * {\n    box-sizing: border-box;\n  }\n"], ["\n  position: relative;\n  z-index: 2;\n\n  * {\n    box-sizing: border-box;\n  }\n"])));
-var Counter = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  background: ", ";\n  border-radius: 35px;\n  display: flex;\n  padding: 0px 18px;\n  user-select: none;\n"], ["\n  align-items: center;\n  background: ", ";\n  border-radius: 35px;\n  display: flex;\n  padding: 0px 18px;\n  user-select: none;\n"])), colors.blue100);
-var TooltipContainer = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: ", ";\n  border-radius: 8px;\n  box-shadow: 0px 3.53px 63.58px 0px #b7a6a640;\n  display: flex;\n  flex-direction: column;\n  gap: 18px;\n  padding: 16px 32px 24px 24px;\n  position: absolute;\n  right: 0px;\n  top: 66px;\n  width: clamp(150px, 379px, 379px);\n\n  &::before {\n    border-color: transparent transparent #ffffff transparent;\n    border-radius: 4px;\n    border-style: solid;\n    border-width: 0 14.5px 24px 14.5px;\n    content: \"\";\n    height: 0;\n    position: absolute;\n    right: -4px;\n    top: -6px;\n    transform: rotate(120deg);\n    width: 0;\n  }\n"], ["\n  background: ", ";\n  border-radius: 8px;\n  box-shadow: 0px 3.53px 63.58px 0px #b7a6a640;\n  display: flex;\n  flex-direction: column;\n  gap: 18px;\n  padding: 16px 32px 24px 24px;\n  position: absolute;\n  right: 0px;\n  top: 66px;\n  width: clamp(150px, 379px, 379px);\n\n  &::before {\n    border-color: transparent transparent #ffffff transparent;\n    border-radius: 4px;\n    border-style: solid;\n    border-width: 0 14.5px 24px 14.5px;\n    content: \"\";\n    height: 0;\n    position: absolute;\n    right: -4px;\n    top: -6px;\n    transform: rotate(120deg);\n    width: 0;\n  }\n"])), colors.white);
+var Counter = styled(Div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  background: ", ";\n  border-radius: 35px;\n  display: flex;\n  padding: 0px 18px;\n  position: relative;\n  user-select: none;\n  z-index: 101;\n"], ["\n  align-items: center;\n  background: ", ";\n  border-radius: 35px;\n  display: flex;\n  padding: 0px 18px;\n  position: relative;\n  user-select: none;\n  z-index: 101;\n"])), colors.blue100);
+var TooltipContainer = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: ", ";\n  border-radius: 8px;\n  box-shadow: 0px 3.53px 63.58px 0px #b7a6a640;\n  display: flex;\n  flex-direction: column;\n  gap: 18px;\n  padding: 16px 32px 24px 24px;\n  position: absolute;\n  right: 0px;\n  top: 66px;\n  width: clamp(150px, 379px, 379px);\n  z-index: 101;\n\n  &::before {\n    border-color: transparent transparent #ffffff transparent;\n    border-radius: 4px;\n    border-style: solid;\n    border-width: 0 14.5px 24px 14.5px;\n    content: \"\";\n    height: 0;\n    position: absolute;\n    right: -4px;\n    top: -6px;\n    transform: rotate(120deg);\n    width: 0;\n  }\n"], ["\n  background: ", ";\n  border-radius: 8px;\n  box-shadow: 0px 3.53px 63.58px 0px #b7a6a640;\n  display: flex;\n  flex-direction: column;\n  gap: 18px;\n  padding: 16px 32px 24px 24px;\n  position: absolute;\n  right: 0px;\n  top: 66px;\n  width: clamp(150px, 379px, 379px);\n  z-index: 101;\n\n  &::before {\n    border-color: transparent transparent #ffffff transparent;\n    border-radius: 4px;\n    border-style: solid;\n    border-width: 0 14.5px 24px 14.5px;\n    content: \"\";\n    height: 0;\n    position: absolute;\n    right: -4px;\n    top: -6px;\n    transform: rotate(120deg);\n    width: 0;\n  }\n"])), colors.white);
 var ExampleCode = styled(Div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  background: ", ";\n  border-radius: 4px;\n  display: flex;\n  justify-content: space-between;\n  padding: 4px;\n"], ["\n  align-items: center;\n  background: ", ";\n  border-radius: 4px;\n  display: flex;\n  justify-content: space-between;\n  padding: 4px;\n"])), colors.blue100);
 var StyledButton = styled(Button)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-self: flex-end;\n  height: 36px;\n  padding: 0px;\n  width: 61px;\n"], ["\n  align-self: flex-end;\n  height: 36px;\n  padding: 0px;\n  width: 61px;\n"])));
+export var TooltipBackdrop = styled(Div)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background: rgba(0, 0, 0, 0.37);\n  height: 100vh;\n  left: 0px;\n  margin: 0px;\n  position: fixed;\n  top: 0px;\n  width: 100vw;\n  z-index: 99;\n"], ["\n  background: rgba(0, 0, 0, 0.37);\n  height: 100vh;\n  left: 0px;\n  margin: 0px;\n  position: fixed;\n  top: 0px;\n  width: 100vw;\n  z-index: 99;\n"])));
 var Tooltip = function (_a) {
-    var recordsCount = _a.recordsCount, onClose = _a.onClose, transformedRowData = _a.transformedRowData;
+    var recordsCount = _a.recordsCount, onClose = _a.onClose;
+    var getRecord = useDataSetContext().getRecord;
     var t = useTranslation("review").t;
-    return (_jsxs(TooltipContainer, __assign({ "data-cy": "transformations-tooltip" }, { children: [_jsx(Div, { children: _jsx(CheckIcon, {}) }), _jsx(Div, __assign({ subtitle: true }, { children: t("table_actions.transformed_records.auto_corrections_amount", {
-                    amount: formatToLocaleString(recordsCount),
-                }) })), transformedRowData && (_jsxs(Div, { children: [_jsx(Div, __assign({ mb: 5, label1: true, style: { color: colors.gray700 } }, { children: t("table_actions.transformed_records.example") })), _jsxs(ExampleCode, { children: [_jsx(Div, __assign({ body1: true }, { children: truncateString(transformedRowData === null || transformedRowData === void 0 ? void 0 : transformedRowData.transformed, 15) })), _jsx(Div, __assign({ body1: true, style: { textDecoration: "line-through" } }, { children: truncateString(transformedRowData === null || transformedRowData === void 0 ? void 0 : transformedRowData.original, 15) }))] })] })), _jsx(StyledButton, __assign({ buttonTextSmall: true, uppercase: true, onClick: onClose }, { children: "OK" }))] })));
+    var filteredDataIds = useFilteredDataContext().filteredDataIds;
+    var _b = useState(null), exampleTransform = _b[0], setExampleTransform = _b[1];
+    useEffect(function () {
+        var foundId = filteredDataIds.find(function (id) { var _a, _b; return Object.keys((_b = (_a = getRecord(id)) === null || _a === void 0 ? void 0 : _a._meta) === null || _b === void 0 ? void 0 : _b.transformedRow).length > 0; });
+        if (foundId)
+            setExampleTransform(Object.values(getRecord(foundId)._meta.transformedRow)[0]);
+    }, [filteredDataIds]);
+    return (_jsxs(_Fragment, { children: [_jsx(TooltipBackdrop, { "data-cy": "transformations-tooltip-backdrop", onClick: onClose }), _jsxs(TooltipContainer, __assign({ "data-cy": "transformations-tooltip" }, { children: [_jsx(Div, { children: _jsx(CheckIcon, {}) }), _jsx(Div, __assign({ subtitle: true }, { children: t("table_actions.transformed_records.auto_corrections_amount", {
+                            amount: formatToLocaleString(recordsCount),
+                        }) })), _jsxs(Div, { children: [_jsx(Div, __assign({ mb: 5, label1: true, style: { color: colors.gray700 } }, { children: t("table_actions.transformed_records.example") })), exampleTransform && (_jsxs(ExampleCode, { children: [_jsx(Div, __assign({ body1: true }, { children: truncateString(exampleTransform === null || exampleTransform === void 0 ? void 0 : exampleTransform.transformed, 15) })), _jsx(Div, __assign({ body1: true, style: { textDecoration: "line-through" } }, { children: truncateString(exampleTransform === null || exampleTransform === void 0 ? void 0 : exampleTransform.original, 15) }))] }))] }), _jsx(StyledButton, __assign({ buttonTextSmall: true, uppercase: true, onClick: onClose }, { children: "OK" }))] }))] }));
 };
-export var TransformedRecordsCount = function () {
-    var _a = useSpreadsheetContext(), filteredDataIds = _a.filteredDataIds, isTransformTooltipOpened = _a.isTransformTooltipOpened, setIsTransformTooltipOpened = _a.setIsTransformTooltipOpened;
-    var spreadsheetInitialized = useValidationContext().spreadsheetInitialized;
+export var TransformedRecordsCount = function (_a) {
+    var onClose = _a.onClose;
+    var filteredDataIds = useSpreadsheetContext().filteredDataIds;
     var getRecord = useDataSetContext().getRecord;
     var t = useTranslation("review").t;
-    var tooltipWasAlreadyOpened = useRef(false);
     var transformedRecordsCount = useMemo(function () {
         var _a;
-        if (tooltipWasAlreadyOpened.current)
-            return;
         var counter = 0;
         for (var i = 0; i < filteredDataIds.length; i++) {
             var currentData = getRecord(filteredDataIds[i]);
             var transformedObj = (_a = currentData === null || currentData === void 0 ? void 0 : currentData._meta) === null || _a === void 0 ? void 0 : _a.transformedRow;
-            if (transformedObj) {
-                counter += Object.keys(transformedObj).length;
-            }
+            counter += Object.keys(transformedObj).length;
         }
         return counter;
     }, [filteredDataIds]);
-    useEffect(function () {
-        if (tooltipWasAlreadyOpened.current || !spreadsheetInitialized)
-            return;
-        if (transformedRecordsCount > 0 && !isTransformTooltipOpened) {
-            setIsTransformTooltipOpened(true);
-            tooltipWasAlreadyOpened.current = true;
-        }
-    }, [transformedRecordsCount, spreadsheetInitialized]);
-    var handleCloseTooltip = function () {
-        setIsTransformTooltipOpened(false);
-    };
-    var firstTransformedRow = useMemo(function () {
-        var _a;
-        for (var _i = 0, filteredDataIds_1 = filteredDataIds; _i < filteredDataIds_1.length; _i++) {
-            var id = filteredDataIds_1[_i];
-            var record = getRecord(id);
-            var transformedRow = (_a = record === null || record === void 0 ? void 0 : record._meta) === null || _a === void 0 ? void 0 : _a.transformedRow;
-            if (transformedRow && Object.keys(transformedRow).length > 0) {
-                return Object.values(transformedRow)[0];
-            }
-        }
-        return null;
-    }, []);
-    return (_jsx(_Fragment, { children: isTransformTooltipOpened && transformedRecordsCount ? (_jsxs(RecordsCountContainer, { children: [_jsxs(Counter, __assign({ body1: true }, { children: [_jsxs(Div, __assign({ bold: true, mr: 4, "data-cy": "transformations-counter" }, { children: [formatToLocaleString(transformedRecordsCount), " "] })), t("table_actions.transformed_records.auto_corrections_done")] })), isTransformTooltipOpened && (_jsx(Tooltip, { transformedRowData: firstTransformedRow, recordsCount: transformedRecordsCount, onClose: handleCloseTooltip }))] })) : null }));
+    return (_jsxs(RecordsCountContainer, { children: [_jsxs(Counter, __assign({ body1: true }, { children: [_jsxs(Div, __assign({ bold: true, mr: 4, "data-cy": "transformations-counter" }, { children: [formatToLocaleString(transformedRecordsCount), " "] })), t("table_actions.transformed_records.auto_corrections_done")] })), _jsx(Tooltip, { recordsCount: transformedRecordsCount, onClose: onClose })] }));
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/lib/esm/common/buttons.js

@@ -60,7 +60,7 @@ var styles = {
     primary: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    color: ", ";\n    background: ", ";\n\n    border: solid 4px ", ";\n    box-sizing: border-box;\n\n    :hover {\n      background: ", ";\n      /* a3 at the end adds 0.64 opacity */\n      box-shadow: 0px 0px 8px ", "a3;\n    }\n    :active {\n      background: ", ";\n      border: 4px solid ", ";\n    }\n    :focus {\n      background: ", ";\n      /* a3 at the end adds 0.64 opacity */\n      box-shadow: 0px 0px 8px ", "a3;\n    }\n    ", "\n  "], ["\n    color: ", ";\n    background: ", ";\n\n    border: solid 4px ", ";\n    box-sizing: border-box;\n\n    :hover {\n      background: ", ";\n      /* a3 at the end adds 0.64 opacity */\n      box-shadow: 0px 0px 8px ", "a3;\n    }\n    :active {\n      background: ", ";\n      border: 4px solid ", ";\n    }\n    :focus {\n      background: ", ";\n      /* a3 at the end adds 0.64 opacity */\n      box-shadow: 0px 0px 8px ", "a3;\n    }\n    ", "\n  "])), function (props) { return props.theme.colors.white; }, getBgColor, getBgColor, getBgColor, getBgColor, getBgColor, getBorderColor, getBgColor, getBgColor, function (props) {
         return props.isDisabled && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        background: ", " !important;\n        opacity: 0.4;\n        box-shadow: none !important;\n        border: none !important;\n        cursor: not-allowed !important;\n      "], ["\n        background: ", " !important;\n        opacity: 0.4;\n        box-shadow: none !important;\n        border: none !important;\n        cursor: not-allowed !important;\n      "])), getBgColor);
     }),
-    secondary: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    background: ", ";\n    box-sizing: border-box;\n    border: solid 1px ", ";\n    color: ", ";\n    & > svg {\n      & > path {\n        fill: ", ";\n        stroke: ", ";\n      }\n    }\n    :active {\n      border: 1px solid ", ";\n      background: ", ";\n      color: ", ";\n      & > svg {\n        & > path {\n          fill: ", ";\n          stroke: ", ";\n        }\n      }\n    }\n    :focus {\n      box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.24);\n    }\n    ", "\n  "], ["\n    background: ", ";\n    box-sizing: border-box;\n    border: solid 1px ", ";\n    color: ", ";\n    & > svg {\n      & > path {\n        fill: ", ";\n        stroke: ", ";\n      }\n    }\n    :active {\n      border: 1px solid ", ";\n      background: ", ";\n      color: ", ";\n      & > svg {\n        & > path {\n          fill: ", ";\n          stroke: ", ";\n        }\n      }\n    }\n    :focus {\n      box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.24);\n    }\n    ", "\n  "])), function (props) { return props.theme.colors.white; }, function (props) { return props.theme.colors.black; }, function (props) { return props.theme.colors.black; }, getSvgFillColorForNormalState, getSvgStrokeColorForNormalState, function (props) { return props.theme.colors.black; }, function (props) { return props.theme.colors.black; }, function (props) { return props.theme.colors.white; }, getSvgFillColorForActiveState, getSvgStrokeColorForActiveState, function (props) {
+    secondary: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    background: ", ";\n    box-sizing: border-box;\n    border: 2px solid ", ";\n    color: ", ";\n    & > svg {\n      & > path {\n        fill: ", ";\n        stroke: ", ";\n      }\n    }\n    :active {\n      border: 2px solid ", ";\n      background: ", ";\n      color: ", ";\n      & > svg {\n        & > path {\n          fill: ", ";\n          stroke: ", ";\n        }\n      }\n    }\n    :focus {\n      box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.24);\n    }\n    ", "\n  "], ["\n    background: ", ";\n    box-sizing: border-box;\n    border: 2px solid ", ";\n    color: ", ";\n    & > svg {\n      & > path {\n        fill: ", ";\n        stroke: ", ";\n      }\n    }\n    :active {\n      border: 2px solid ", ";\n      background: ", ";\n      color: ", ";\n      & > svg {\n        & > path {\n          fill: ", ";\n          stroke: ", ";\n        }\n      }\n    }\n    :focus {\n      box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.24);\n    }\n    ", "\n  "])), function (props) { return props.theme.colors.white; }, function (props) { return props.theme.colors.black; }, function (props) { return props.theme.colors.black; }, getSvgFillColorForNormalState, getSvgStrokeColorForNormalState, function (props) { return props.theme.colors.black; }, function (props) { return props.theme.colors.black; }, function (props) { return props.theme.colors.white; }, getSvgFillColorForActiveState, getSvgStrokeColorForActiveState, function (props) {
         return props.isDisabled && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        border: 2px solid ", ";\n        color: ", ";\n        & > svg {\n          & > path {\n            fill: ", ";\n            stroke: ", ";\n          }\n        }\n      "], ["\n        border: 2px solid ", ";\n        color: ", ";\n        & > svg {\n          & > path {\n            fill: ", ";\n            stroke: ", ";\n          }\n        }\n      "])), function (props) { return props.theme.colors.gray390; }, function (props) { return props.theme.colors.gray390; }, getSvgFillColorForDisabledState, getSvgStrokeColorForDisabledState);
     }),
     tertiary: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    background: transparent;\n    border: solid 1px transparent;\n    color: ", ";\n    :hover {\n      background: ", ";\n    }\n    :active {\n      background: ", ";\n      color: ", ";\n    }\n    ", "\n  "], ["\n    background: transparent;\n    border: solid 1px transparent;\n    color: ", ";\n    :hover {\n      background: ", ";\n    }\n    :active {\n      background: ", ";\n      color: ", ";\n    }\n    ", "\n  "])), function (props) { return props.theme.colors.text; }, function (props) { return props.theme.colors.white50; }, function (props) { return props.theme.colors.black; }, function (props) { return props.theme.colors.white; }, function (props) {
@@ -75,14 +75,14 @@ var styles = {
             : withBrandingCSS;
     }, function (props) { return props.theme.colors.black; }, function (props) { return props.theme.colors.white; }),
 };
-var commonButtonStyle = css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  padding: 12px 24px;\n  user-select: none;\n  width: fit-content;\n\n  ", "\n\n  border: solid 1px black;\n  border-radius: 4px;\n\n  font-family: DM Sans;\n\n  :focus {\n    outline: none;\n  }\n  :hover {\n    cursor: pointer;\n  }\n\n  ", "\n  ", ";\n\n  ", ";\n"], ["\n  padding: 12px 24px;\n  user-select: none;\n  width: fit-content;\n\n  ", "\n\n  border: solid 1px black;\n  border-radius: 4px;\n\n  font-family: DM Sans;\n\n  :focus {\n    outline: none;\n  }\n  :hover {\n    cursor: pointer;\n  }\n\n  ", "\n  ", ";\n\n  ", ";\n"])), function (props) {
-    return props.isSmall && css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      padding: 6px 20px;\n    "], ["\n      padding: 6px 20px;\n    "])));
-}, function (props) {
-    return props.isDisabled && css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      pointer-events: none;\n    "], ["\n      pointer-events: none;\n    "])));
+var commonButtonStyle = css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  padding: 12px 24px;\n  user-select: none;\n  width: fit-content;\n\n  border: solid 1px black;\n  border-radius: 4px;\n\n  font-family: DM Sans;\n\n  :focus {\n    outline: none;\n  }\n  :hover {\n    cursor: pointer;\n  }\n\n  ", "\n  ", ";\n\n  ", ";\n\n  ", "\n"], ["\n  padding: 12px 24px;\n  user-select: none;\n  width: fit-content;\n\n  border: solid 1px black;\n  border-radius: 4px;\n\n  font-family: DM Sans;\n\n  :focus {\n    outline: none;\n  }\n  :hover {\n    cursor: pointer;\n  }\n\n  ", "\n  ", ";\n\n  ", ";\n\n  ", "\n"])), function (props) {
+    return props.isDisabled && css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      pointer-events: none;\n    "], ["\n      pointer-events: none;\n    "])));
 }, function (props) {
     var c = props.theme.css;
     return [c.centered, c.buttonText];
-}, function (props) { return styles[props.variant || "primary"]; });
+}, function (props) { return styles[props.variant || "primary"]; }, function (props) {
+    return props.isSmall && css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      padding: 6px 20px;\n      font-size: 14px;\n    "], ["\n      padding: 6px 20px;\n      font-size: 14px;\n    "])));
+});
 export var ButtonWrapper = styled(Div)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), commonButtonStyle);
 export var ButtonElementWrapper = styled(HTMLButton)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), commonButtonStyle);
 export var ContentWrapper = styled(Div)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  justify-content: center;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  justify-content: center;\n"])));

package/lib/esm/common/datePatterns.d.ts

@@ -24,3 +24,4 @@ export declare const allowedPatterns: {
         label: string;
     }[];
 };
+export declare const allowedPatternValues: string[];

package/lib/esm/common/datePatterns.js

@@ -1,3 +1,12 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 export var datePatterns = [
     {
         value: "MM/dd/yyyy",
@@ -325,3 +334,4 @@ export var allowedPatterns = {
     datetime: dateTimePatterns,
     time: timePatterns,
 };
+export var allowedPatternValues = __spreadArray(__spreadArray(__spreadArray([], datePatterns, true), dateTimePatterns, true), timePatterns, true).map(function (pattern) { return pattern.value; });

package/lib/esm/styled/theme/textCss.js

@@ -4,7 +4,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import { css } from "../themeType";
 export var textCss = {
-    truncateText: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    overflow: hidden;\n    word-wrap: break-word;\n    overflow-wrap: break-word;\n    display: -webkit-box;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    -webkit-hyphens: auto;\n    -moz-hyphens: auto;\n    hyphens: auto;\n  "], ["\n    overflow: hidden;\n    word-wrap: break-word;\n    overflow-wrap: break-word;\n    display: -webkit-box;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    -webkit-hyphens: auto;\n    -moz-hyphens: auto;\n    hyphens: auto;\n  "]))),
+    truncateText: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    overflow: hidden;\n    word-wrap: break-word;\n    display: -webkit-box;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    -webkit-hyphens: auto;\n    -moz-hyphens: auto;\n    hyphens: auto;\n\n    @supports (overflow-wrap: anywhere) {\n      overflow-wrap: anywhere;\n    }\n\n    @supports not (overflow-wrap: anywhere) {\n      word-wrap: break-word;\n    }\n  "], ["\n    overflow: hidden;\n    word-wrap: break-word;\n    display: -webkit-box;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    -webkit-hyphens: auto;\n    -moz-hyphens: auto;\n    hyphens: auto;\n\n    @supports (overflow-wrap: anywhere) {\n      overflow-wrap: anywhere;\n    }\n\n    @supports not (overflow-wrap: anywhere) {\n      word-wrap: break-word;\n    }\n  "]))),
     dInline: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: inline-block;\n  "], ["\n    display: inline-block;\n  "]))),
     flexWrap: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    flex-wrap: wrap;\n  "], ["\n    display: flex;\n    flex-wrap: wrap;\n  "]))),
     underline: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    text-decoration: underline;\n  "], ["\n    text-decoration: underline;\n  "]))),