@lightsparkdev/ui 1.1.11 → 1.1.12

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @lightsparkdev/ui
 
+## 1.1.12
+
+### Patch Changes
+
+- 8fd199a: - Component and theme updates
+- Updated dependencies [8fd199a]
+  - @lightsparkdev/core@1.4.5
+
 ## 1.1.11
 
 ### Patch Changes

package/dist/{chunk-RTBR3MYS.cjs → chunk-23RQUWY3.cjs}

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunkZ6EUSUADcjs = require('./chunk-Z6EUSUAD.cjs');
+var _chunkYM5JDZDQcjs = require('./chunk-YM5JDZDQ.cjs');
 
 // src/styles/themeDefaults/buttons.tsx
-var buttonBorderRadiuses = [8, 32, 999, "100%"];
+var buttonBorderRadiuses = [4, 8, 32, 999, "100%"];
 var allowedButtonTypographyTypes = [
   "Body",
   "Body Strong",
@@ -19,6 +19,7 @@ var buttonsThemeBase = {
   defaultTypographyType: "Body Strong",
   defaultColor: "text",
   defaultBorderRadius: 32,
+  defaultGap: 8,
   defaultBackgroundColor: "bg",
   defaultBorderColor: "bg",
   defaultHoverBackgroundColor: "bg",
@@ -47,7 +48,7 @@ var buttonsThemeBase = {
   },
   kinds: {}
 };
-var defaultButtonsTheme = _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, buttonsThemeBase), {
+var defaultButtonsTheme = _chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, buttonsThemeBase), {
   kinds: {
     primary: {
       defaultColor: "bg",
@@ -121,6 +122,10 @@ var defaultButtonsTheme = _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6E
       defaultActiveBackgroundColor: "red42a30",
       defaultActiveBorderColor: "transparent"
     },
+    warningLight: {
+      defaultColor: "danger",
+      defaultBackgroundColor: "warningBackground"
+    },
     tertiary: {
       defaultColor: "bg",
       defaultBackgroundColor: "grayBlue9",

package/dist/{chunk-FGMYBF3Y.js → chunk-23V2BQIJ.js}

@@ -1,17 +1,17 @@
 import {
   getPropDefaultsBase
-} from "./chunk-LEMT5P3Z.js";
+} from "./chunk-YQNDIDC2.js";
 import {
   typographyStyles
 } from "./chunk-YW4BJCOL.js";
 import {
   applyTypography
-} from "./chunk-2C7DZIDY.js";
+} from "./chunk-HXEOFTXC.js";
 import {
   __objRest,
   __spreadProps,
   __spreadValues
-} from "./chunk-W7FAWX6T.js";
+} from "./chunk-CWMXXUWU.js";
 
 // src/components/typography/base/Btn.tsx
 import styled from "@emotion/styled";

package/dist/chunk-24MJ7UXE.cjs

@@ -0,0 +1,454 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkTQ7E3EMIcjs = require('./chunk-TQ7E3EMI.cjs');
+
+
+
+
+
+
+var _chunkIIB3Z36Qcjs = require('./chunk-IIB3Z36Q.cjs');
+
+
+var _chunkAF67FQ4Zcjs = require('./chunk-AF67FQ4Z.cjs');
+
+
+var _chunkDIRSPH6Acjs = require('./chunk-DIRSPH6A.cjs');
+
+
+var _chunkMA4TAJR3cjs = require('./chunk-MA4TAJR3.cjs');
+
+
+var _chunkXHIUWLTCcjs = require('./chunk-XHIUWLTC.cjs');
+
+
+var _chunkUPQXK6TFcjs = require('./chunk-UPQXK6TF.cjs');
+
+
+var _chunk6YG7IA2Fcjs = require('./chunk-6YG7IA2F.cjs');
+
+
+var _chunkNMFG6FLIcjs = require('./chunk-NMFG6FLI.cjs');
+
+
+var _chunkEJR26GKNcjs = require('./chunk-EJR26GKN.cjs');
+
+
+var _chunkP7BNVHNVcjs = require('./chunk-P7BNVHNV.cjs');
+
+
+var _chunkGMDANQACcjs = require('./chunk-GMDANQAC.cjs');
+
+
+var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
+
+
+var _chunkX6AJB6TLcjs = require('./chunk-X6AJB6TL.cjs');
+
+
+var _chunkR5SHOMBXcjs = require('./chunk-R5SHOMBX.cjs');
+
+
+var _chunkJFPLNGMQcjs = require('./chunk-JFPLNGMQ.cjs');
+
+
+
+var _chunkYM5JDZDQcjs = require('./chunk-YM5JDZDQ.cjs');
+
+// src/components/DataManagerTable/PillFilter.tsx
+var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
+var _core = require('@lightsparkdev/core');
+var _reactdatetimerangepicker = require('@wojtekmaj/react-datetimerange-picker'); var _reactdatetimerangepicker2 = _interopRequireDefault(_reactdatetimerangepicker);
+var _dayjs = require('dayjs'); var _dayjs2 = _interopRequireDefault(_dayjs);
+var _utcjs = require('dayjs/plugin/utc.js'); var _utcjs2 = _interopRequireDefault(_utcjs);
+var _lodashes = require('lodash-es');
+var _react = require('react');
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+_dayjs2.default.extend(_utcjs2.default);
+function PillFilter({
+  filter,
+  state,
+  onUpdateFilter,
+  onDelete,
+  customComponents
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, FilterContainer, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Property, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk6YG7IA2Fcjs.Label, { size: "Small", content: filter.label }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Operator, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkTQ7E3EMIcjs.Body,
+      {
+        size: "Small",
+        color: "secondary",
+        content: getOperatorLabel(filter)
+      }
+    ) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      FilterDropdown,
+      {
+        filterAndState: { filter, state },
+        onUpdateFilter,
+        customComponents
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DeleteButton, { onClick: onDelete, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkX6AJB6TLcjs.Icon,
+      {
+        name: "CentralCrossSmall",
+        color: "secondary",
+        width: 16,
+        iconProps: {
+          strokeWidth: "3px"
+        }
+      }
+    ) })
+  ] });
+}
+function getOperatorLabel(filter) {
+  switch (filter.type) {
+    case "enum" /* ENUM */:
+      return "is";
+    case "date" /* DATE */:
+      return "is";
+    case "string" /* STRING */:
+      return "is";
+    case "id" /* ID */:
+      return "is";
+    case "boolean" /* BOOLEAN */:
+      return "is";
+    // TODO: Currency filter state, design tbd
+    default:
+      return "is";
+  }
+}
+function formatDateValue(date) {
+  return _dayjs2.default.utc(date).format("MMM DD, HH:mm");
+}
+function getFilterValue(state) {
+  var _a, _b, _c;
+  if (_chunkDIRSPH6Acjs.isEnumFilterState.call(void 0, state)) {
+    return ((_a = state.appliedValues) == null ? void 0 : _a.join(", ").replaceAll("_", " ")) || "";
+  } else if (_chunkXHIUWLTCcjs.isStringFilterState.call(void 0, state)) {
+    return ((_b = state.appliedValues) == null ? void 0 : _b.join(", ")) || "";
+  } else if (_chunkMA4TAJR3cjs.isIdFilterState.call(void 0, state)) {
+    return ((_c = state.appliedValues) == null ? void 0 : _c.join(", ")) || "";
+  } else if (_chunkAF67FQ4Zcjs.isDateFilterState.call(void 0, state)) {
+    return state.start && state.end ? `${formatDateValue(state.start)} - ${formatDateValue(state.end)}` : "Empty";
+  } else if (_chunkUPQXK6TFcjs.isBooleanFilterState.call(void 0, state)) {
+    return state.value ? "True" : "False";
+  }
+  throw new Error("Invalid filter state");
+}
+var commonDropdownGetCSS = ({
+  isOpen,
+  theme
+}) => {
+  return {
+    borderRight: `0.5px solid ${_chunkR5SHOMBXcjs.getColor.call(void 0, theme, ["controls", "border"])}`,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center"
+  };
+};
+var commonDropdownProps = {
+  getCSS: commonDropdownGetCSS,
+  align: "left"
+};
+function FilterDropdown({
+  filterAndState,
+  onUpdateFilter,
+  customComponents
+}) {
+  const [stringFilterValue, setStringFilterValue] = _react.useState.call(void 0, "");
+  const [dates, setDates] = _react.useState.call(void 0, null);
+  const [isOpen, setIsOpen] = _react.useState.call(void 0, false);
+  const DropdownComponent = (customComponents == null ? void 0 : customComponents.customDropdown) || _chunkEJR26GKNcjs.Dropdown;
+  if (_chunkIIB3Z36Qcjs.isEnumFilterAndState.call(void 0, filterAndState)) {
+    const { filter, state } = filterAndState;
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      DropdownComponent,
+      _chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, commonDropdownProps), {
+        button: {
+          getContent: ({ isOpen: isOpen2, theme }) => {
+            return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Value, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _chunk6YG7IA2Fcjs.Label,
+              {
+                size: "Small",
+                content: _lodashes.capitalize.call(void 0, getFilterValue(state))
+              }
+            ) });
+          }
+        },
+        dropdownItems: filter.enumValues.map((option) => ({
+          label: option.label,
+          onClick: () => {
+            const optionValues = _core.ensureArray.call(void 0, option.value);
+            let updatedAppliedValues = [];
+            if (filter.isMulti) {
+              updatedAppliedValues = state.appliedValues ? [
+                ...state.appliedValues.filter(
+                  (appliedValue) => appliedValue !== option.value
+                ),
+                ...optionValues
+              ] : [...optionValues];
+            } else {
+              updatedAppliedValues = [...optionValues];
+            }
+            onUpdateFilter(_chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, state), {
+              value: option.label,
+              isApplied: true,
+              appliedValues: updatedAppliedValues
+            }));
+          }
+        }))
+      })
+    );
+  } else if (_chunkIIB3Z36Qcjs.isStringFilterAndState.call(void 0, filterAndState) || _chunkIIB3Z36Qcjs.isIdFilterAndState.call(void 0, filterAndState)) {
+    const TextInputComponent = (customComponents == null ? void 0 : customComponents.customTextInput) || _chunkNMFG6FLIcjs.TextInput;
+    const { filter, state } = filterAndState;
+    const handleApplyFilter = () => {
+      let updatedAppliedValues = [];
+      if (filter.isMulti) {
+        updatedAppliedValues = state.appliedValues ? [
+          ...state.appliedValues.filter(
+            (appliedValue) => appliedValue !== stringFilterValue
+          ),
+          stringFilterValue
+        ] : [stringFilterValue];
+      } else {
+        updatedAppliedValues = [stringFilterValue];
+      }
+      onUpdateFilter(_chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, state), {
+        appliedValues: updatedAppliedValues,
+        value: stringFilterValue,
+        isApplied: true
+      }));
+      setIsOpen(false);
+    };
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      DropdownComponent,
+      _chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, commonDropdownProps), {
+        isOpen,
+        onOpen: () => setIsOpen(true),
+        onClose: () => setIsOpen(false),
+        button: {
+          getContent: ({ isOpen: isOpen2, theme }) => {
+            const filterValue = getFilterValue(state);
+            return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Value, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _chunk6YG7IA2Fcjs.Label,
+              {
+                size: "Small",
+                content: filterValue.length > 0 ? filterValue : "Empty",
+                color: filterValue.length > 0 ? "text" : "secondary"
+              }
+            ) });
+          }
+        },
+        dropdownContent: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkP7BNVHNVcjs.Flex, { column: true, gap: 8, pt: 8, pr: 8, pb: 8, pl: 8, width: 240, children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            TextInputComponent,
+            {
+              placeholder: "Enter value",
+              value: stringFilterValue,
+              onChange: (value) => {
+                setStringFilterValue(value);
+              },
+              onKeyDown: (keyValue, event) => {
+                if (keyValue === "Enter") {
+                  handleApplyFilter();
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _chunkGMDANQACcjs.Button,
+            {
+              kind: "primary",
+              text: "Apply",
+              typography: {
+                type: "Btn"
+              },
+              fullWidth: true,
+              onClick: handleApplyFilter
+            }
+          )
+        ] })
+      })
+    );
+  } else if (_chunkIIB3Z36Qcjs.isBooleanFilterAndState.call(void 0, filterAndState)) {
+    const { state } = filterAndState;
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      DropdownComponent,
+      _chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, commonDropdownProps), {
+        button: {
+          getContent: ({ isOpen: isOpen2, theme }) => {
+            return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Value, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _chunk6YG7IA2Fcjs.Label,
+              {
+                size: "Small",
+                content: _lodashes.capitalize.call(void 0, getFilterValue(state))
+              }
+            ) });
+          }
+        },
+        dropdownItems: ["True", "False"].map((option) => ({
+          label: option,
+          onClick: () => {
+            onUpdateFilter(_chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, state), {
+              value: option,
+              isApplied: true
+            }));
+          }
+        }))
+      })
+    );
+  } else if (_chunkIIB3Z36Qcjs.isDateFilterAndState.call(void 0, filterAndState)) {
+    const { state } = filterAndState;
+    const isValidDateRange = (dates2) => {
+      return dates2 instanceof Array && dates2.length === 2 && dates2[0] !== null && dates2[1] !== null;
+    };
+    const handleCalendarChange = (dates2) => {
+      if (!isValidDateRange(dates2)) {
+        return;
+      }
+      setDates(dates2);
+    };
+    const updateCalendarState = (dates2) => {
+      if (!isValidDateRange(dates2)) {
+        return;
+      }
+      const start = _dayjs2.default.utc(dates2[0]).add(_dayjs2.default.call(void 0, ).utcOffset(), "minutes").toDate();
+      const end = _dayjs2.default.utc(dates2[1]).add(_dayjs2.default.call(void 0, ).utcOffset(), "minutes").toDate();
+      onUpdateFilter(_chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, state), {
+        preset: "Custom" /* Custom */,
+        isApplied: true,
+        customRangeOperation: "is between" /* IsBetween */,
+        start,
+        end
+      }));
+      setIsOpen(false);
+    };
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      DropdownComponent,
+      _chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, commonDropdownProps), {
+        isOpen,
+        onOpen: () => setIsOpen(true),
+        onClose: () => setIsOpen(false),
+        button: {
+          getContent: ({ isOpen: isOpen2, theme }) => {
+            return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Value, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _chunk6YG7IA2Fcjs.Label,
+              {
+                size: "Small",
+                content: getFilterValue(state),
+                color: state.start && state.end ? "text" : "secondary"
+              }
+            ) });
+          }
+        },
+        dropdownContent: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _reactdatetimerangepicker2.default,
+            {
+              onChange: handleCalendarChange,
+              isCalendarOpen: true,
+              closeWidgets: false,
+              value: dates,
+              locale: "en-US",
+              autoFocus: true,
+              formatShortWeekday: (locale, date) => {
+                return _lodashes.capitalize.call(void 0, 
+                  date.toLocaleDateString(locale, { weekday: "short" })
+                ).slice(0, 1);
+              },
+              css: customComponents == null ? void 0 : customComponents.customCalendarCss,
+              nextLabel: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NextPrevCalendarButtons, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkX6AJB6TLcjs.Icon, { name: "CentralChevronRight", width: 10 }) }),
+              prevLabel: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NextPrevCalendarButtons, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkX6AJB6TLcjs.Icon, { name: "CentralChevronLeft", width: 10 }) })
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _chunkP7BNVHNVcjs.Flex,
+            {
+              pt: _chunkZUAO4DW3cjs.Spacing["3xs"],
+              pr: _chunkZUAO4DW3cjs.Spacing.sm,
+              pb: _chunkZUAO4DW3cjs.Spacing.sm,
+              pl: _chunkZUAO4DW3cjs.Spacing.sm,
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                _chunkGMDANQACcjs.Button,
+                {
+                  kind: "primary",
+                  typography: {
+                    type: "Btn"
+                  },
+                  fullWidth: true,
+                  text: "Apply",
+                  onClick: () => {
+                    updateCalendarState(dates);
+                  }
+                }
+              )
+            }
+          )
+        ] }) })
+      })
+    );
+  }
+  return null;
+}
+var FilterContainer = _styled2.default.div`
+  display: flex;
+  flex-direction: row;
+  height: 30px;
+  background: ${({ theme }) => theme.bg};
+  border-radius: 4px;
+  border: 0.5px solid ${({ theme }) => _chunkR5SHOMBXcjs.getColor.call(void 0, theme, ["controls", "border"])};
+`;
+var Property = _styled2.default.div`
+  border-right: 0.5px solid
+    ${({ theme }) => _chunkR5SHOMBXcjs.getColor.call(void 0, theme, ["controls", "border"])};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0px ${_chunkZUAO4DW3cjs.Spacing.px.xs};
+  white-space: nowrap;
+`;
+var Operator = _styled2.default.div`
+  border-right: 0.5px solid
+    ${({ theme }) => _chunkR5SHOMBXcjs.getColor.call(void 0, theme, ["controls", "border"])};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0px ${_chunkZUAO4DW3cjs.Spacing.px.xs};
+`;
+var Value = _styled2.default.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0px ${_chunkZUAO4DW3cjs.Spacing.px.xs};
+  white-space: nowrap;
+`;
+var DeleteButton = _styled2.default.div`
+  padding: 0px ${_chunkZUAO4DW3cjs.Spacing.px["2xs"]};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: background-color 0.3s ease-in-out;
+  &:hover {
+    background-color: ${_chunkJFPLNGMQcjs.colors["black-04"]};
+  }
+  &:active {
+    background-color: ${_chunkJFPLNGMQcjs.colors["black-10"]};
+  }
+`;
+var NextPrevCalendarButtons = _styled2.default.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  min-width: 28px;
+  min-height: 28px;
+`;
+
+
+
+exports.PillFilter = PillFilter;

package/dist/{chunk-M6MRMUGN.cjs → chunk-26LIY2TY.cjs}

@@ -1,28 +1,28 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkCSC4YVBEcjs = require('./chunk-CSC4YVBE.cjs');
+var _chunkNMFG6FLIcjs = require('./chunk-NMFG6FLI.cjs');
 
 
-var _chunkWZN5KA5Jcjs = require('./chunk-WZN5KA5J.cjs');
+var _chunkGCQJPKWFcjs = require('./chunk-GCQJPKWF.cjs');
 
 
 
-var _chunkZN3XZEMGcjs = require('./chunk-ZN3XZEMG.cjs');
+var _chunk33O5ZKBKcjs = require('./chunk-33O5ZKBK.cjs');
 
 
-var _chunkSNSG4HBQcjs = require('./chunk-SNSG4HBQ.cjs');
+var _chunkJR6JLVEZcjs = require('./chunk-JR6JLVEZ.cjs');
 
 
-var _chunkWF7Z2VITcjs = require('./chunk-WF7Z2VIT.cjs');
+var _chunkX6AJB6TLcjs = require('./chunk-X6AJB6TL.cjs');
 
 
 var _chunkKW3JYLRIcjs = require('./chunk-KW3JYLRI.cjs');
 
 
-var _chunkJZ3TGO3Dcjs = require('./chunk-JZ3TGO3D.cjs');
+var _chunkEZNRFABOcjs = require('./chunk-EZNRFABO.cjs');
 
 
-var _chunkZ6EUSUADcjs = require('./chunk-Z6EUSUAD.cjs');
+var _chunkYM5JDZDQcjs = require('./chunk-YM5JDZDQ.cjs');
 
 // src/components/ReadClipboardButton.tsx
 var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
@@ -43,10 +43,10 @@ function ReadClipboardButton({
   clipboardCallbacks
 }) {
   const bp = _chunkKW3JYLRIcjs.useBreakpoints.call(void 0, );
-  const { canReadFromClipboard, readTextFromClipboard } = _chunkJZ3TGO3Dcjs.useClipboard.call(void 0, clipboardCallbacks);
+  const { canReadFromClipboard, readTextFromClipboard } = _chunkEZNRFABOcjs.useClipboard.call(void 0, clipboardCallbacks);
   const [isEditingTextInput, setIsEditingTextInput] = _react.useState.call(void 0, false);
   const isDeleting = _react.useRef.call(void 0, false);
-  const getTextFromClipboard = _react.useCallback.call(void 0, () => _chunkZ6EUSUADcjs.__async.call(void 0, this, null, function* () {
+  const getTextFromClipboard = _react.useCallback.call(void 0, () => _chunkYM5JDZDQcjs.__async.call(void 0, this, null, function* () {
     const text = yield readTextFromClipboard();
     if (text !== null) {
       const value2 = text.trim();
@@ -107,12 +107,12 @@ function ReadClipboardButton({
         hasError: Boolean(errorMsg),
         onMouseUp: onDeleteMouseUp,
         children: autoButtonText ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkSNSG4HBQcjs.UnstyledButton,
+          _chunkJR6JLVEZcjs.UnstyledButton,
           {
             onClick: onClickAutoButton,
             css: { cursor: "pointer" },
             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _chunkWZN5KA5Jcjs.Pill,
+              _chunkGCQJPKWFcjs.Pill,
               {
                 text: autoButtonText,
                 icon: "MagicWand",
@@ -123,12 +123,12 @@ function ReadClipboardButton({
             )
           }
         ) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.Fragment, { children: [
-          !value && !isEditingTextInput ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkSNSG4HBQcjs.UnstyledButton, { onClick, children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWF7Z2VITcjs.Icon, { name: "Copy", width: 19 }),
+          !value && !isEditingTextInput ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkJR6JLVEZcjs.UnstyledButton, { onClick, children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkX6AJB6TLcjs.Icon, { name: "Copy", width: 19 }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: { marginTop: "8px" }, children: description })
           ] }) : null,
           value || isEditingTextInput ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunkWZN5KA5Jcjs.Pill,
+            _chunkGCQJPKWFcjs.Pill,
             {
               text: value,
               onDeleteMouseDown,
@@ -145,9 +145,9 @@ function ReadClipboardButton({
         ] })
       }
     ),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZN3XZEMGcjs.InputSubtext, { text: errorMsg || hint, hasError: Boolean(errorMsg) })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk33O5ZKBKcjs.InputSubtext, { text: errorMsg || hint, hasError: Boolean(errorMsg) })
   ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkCSC4YVBEcjs.TextInput,
+    _chunkNMFG6FLIcjs.TextInput,
     {
       onChange: onChangeTextInput,
       value,
@@ -157,7 +157,7 @@ function ReadClipboardButton({
   ) });
 }
 var ReadClipboardButtonContainer = _styled2.default.div`
-  ${({ theme, hasAddress, hasError }) => _chunkZN3XZEMGcjs.inputBlockStyle.call(void 0, { theme, hasValue: hasAddress, hasError })}
+  ${({ theme, hasAddress, hasError }) => _chunk33O5ZKBKcjs.inputBlockStyle.call(void 0, { theme, hasValue: hasAddress, hasError })}
 `;