@lightsparkdev/ui 1.0.8 → 1.0.9

package/dist/chunk-FRXVOBFV.cjs

@@ -0,0 +1,102 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkEZNRFABOcjs = require('./chunk-EZNRFABO.cjs');
+
+
+
+var _chunkZO52GP5Zcjs = require('./chunk-ZO52GP5Z.cjs');
+
+
+var _chunkI6Y7IHF5cjs = require('./chunk-I6Y7IHF5.cjs');
+
+
+var _chunk2ZRPJUTYcjs = require('./chunk-2ZRPJUTY.cjs');
+
+
+var _chunk7PRNB5U5cjs = require('./chunk-7PRNB5U5.cjs');
+
+// src/components/ClipboardTextField.tsx
+var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
+var _react = require('react');
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function ClipboardTextField({
+  value,
+  icon,
+  stopPropagation,
+  maxLines,
+  elide: elideArgs,
+  wordBreakAll = false,
+  tag = "span",
+  iconSide = "left",
+  typography,
+  clipboardCallbacks
+}) {
+  const { canWriteToClipboard, writeTextToClipboard } = _chunkEZNRFABOcjs.useClipboard.call(void 0, clipboardCallbacks);
+  const addLineClamp = maxLines && maxLines > 1;
+  const displayValue = elideArgs ? _chunk7PRNB5U5cjs.elide.call(void 0, value, elideArgs) : value;
+  const nodes = _chunk2ZRPJUTYcjs.renderTypography.call(void 0, (typography == null ? void 0 : typography.type) || "Body", {
+    content: displayValue,
+    size: (typography == null ? void 0 : typography.size) || "ExtraSmall",
+    color: (typography == null ? void 0 : typography.color) || "inherit"
+  });
+  const baseValueCSS = {
+    flex: 1,
+    overflow: "hidden",
+    textAlign: "left",
+    textOverflow: "ellipsis",
+    wordBreak: wordBreakAll ? "break-all" : "normal",
+    verticalAlign: "middle"
+  };
+  const valueCSS = addLineClamp ? _chunkZO52GP5Zcjs.extend.call(void 0, baseValueCSS, _chunkZO52GP5Zcjs.lineClamp.call(void 0, maxLines), { alignSelf: "baseline" }) : baseValueCSS;
+  const valueNode = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: valueCSS, children: nodes });
+  const onClick = _react.useCallback.call(void 0, 
+    (event) => {
+      if (stopPropagation) {
+        event.stopPropagation();
+      }
+      void writeTextToClipboard(value);
+    },
+    [stopPropagation, value, writeTextToClipboard]
+  );
+  function onKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      if (stopPropagation) {
+        event.stopPropagation();
+      }
+      void writeTextToClipboard(value);
+    }
+  }
+  const baseContainerCSS = {
+    maxWidth: "100%",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    alignItems: "center",
+    boxSizing: "content-box",
+    cursor: "pointer"
+  };
+  const containerCSS = addLineClamp ? (
+    /* keep the icon on the same line when addLineClamp: */
+    _chunkZO52GP5Zcjs.extend.call(void 0, baseContainerCSS, { display: "inline-flex" })
+  ) : maxLines === 1 ? _chunkZO52GP5Zcjs.extend.call(void 0, baseContainerCSS, { whiteSpace: "nowrap", display: "inline-flex" }) : baseContainerCSS;
+  return canWriteToClipboard && value ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    StyledClipboardTextField,
+    {
+      as: tag,
+      onClick,
+      css: containerCSS,
+      role: "button",
+      tabIndex: 0,
+      onKeyDown,
+      children: [
+        icon && iconSide === "left" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkI6Y7IHF5cjs.Icon, { name: "Copy", width: 16, mr: 4 }) : null,
+        valueNode,
+        icon && iconSide === "right" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkI6Y7IHF5cjs.Icon, { name: "Copy", width: 16, ml: 4 }) : null
+      ]
+    }
+  ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledClipboardTextField, { as: tag, css: containerCSS, children: valueNode });
+}
+var StyledClipboardTextField = _styled2.default.span``;
+
+
+
+exports.ClipboardTextField = ClipboardTextField;

package/dist/chunk-G4KKDEZ4.cjs

@@ -0,0 +1,31 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkGFKY6YX2cjs = require('./chunk-GFKY6YX2.cjs');
+
+
+
+
+var _chunkYM5JDZDQcjs = require('./chunk-YM5JDZDQ.cjs');
+
+// src/components/SecretInput.tsx
+var _react = require('react');
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function SecretInput(_a) {
+  var rest = _chunkYM5JDZDQcjs.__objRest.call(void 0, _a, []);
+  const [showSecret, setShowSecret] = _react.useState.call(void 0, false);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkGFKY6YX2cjs.TextInput,
+    _chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, rest), {
+      type: showSecret ? void 0 : "password",
+      onClickIcon: () => setShowSecret(!showSecret),
+      icon: {
+        name: showSecret ? "NotEye" : "Eye",
+        width: 16
+      }
+    })
+  );
+}
+
+
+
+exports.SecretInput = SecretInput;

package/dist/chunk-G5IVQ4O3.js

@@ -0,0 +1,41 @@
+// src/utils/toReactNodes/nodes.tsx
+import { isObject } from "lodash-es";
+function isLinkNode(node) {
+  return Boolean(node && isObject(node) && "link" in node);
+}
+function isNextLinkNode(node) {
+  return Boolean(node && isObject(node) && "nextLink" in node);
+}
+function isIconNode(node) {
+  return Boolean(node && isObject(node) && "icon" in node);
+}
+function isCurrencyAmountNode(node) {
+  return Boolean(node && isObject(node) && "currencyAmount" in node);
+}
+function isTextNode(node) {
+  const allowedKeys = ["text", "onClick", "typography"];
+  return Boolean(
+    /* Exclude other nodes by ensuring only text node properties: */
+    node && isObject(node) && /* text is required: */
+    "text" in node && /* ensure the rest of the keys are allowed: */
+    Object.keys(node).every((key) => allowedKeys.includes(key))
+  );
+}
+var link = (link2) => ({ link: link2 });
+var nextLink = (nextLink2) => ({
+  nextLink: nextLink2
+});
+var currencyAmount = (currencyAmount2) => ({ currencyAmount: currencyAmount2 });
+var icon = (icon2) => ({ icon: icon2 });
+
+export {
+  isLinkNode,
+  isNextLinkNode,
+  isIconNode,
+  isCurrencyAmountNode,
+  isTextNode,
+  link,
+  nextLink,
+  currencyAmount,
+  icon
+};

package/dist/{chunk-EEB6DWY3.js → chunk-G6VXXZIN.js}

@@ -1,13 +1,13 @@
 import {
   SingleCodeInput
-} from "./chunk-E4YBYEWH.js";
+} from "./chunk-QHH6BGRE.js";
 import {
   textInputBorderColor
-} from "./chunk-RZMG2TID.js";
+} from "./chunk-W5NH2F3D.js";
 import {
   __spreadProps,
   __spreadValues
-} from "./chunk-LOPKRCGI.js";
+} from "./chunk-CWMXXUWU.js";
 
 // src/components/CodeInput/CodeInput.tsx
 import styled from "@emotion/styled";
@@ -59,7 +59,7 @@ function CodeInput({
     [getInputId, autoFocus]
   );
   const [inputState, setInputState] = useState(
-    Array(codeLength).fill(0).reduce((acc, item, i) => {
+    Array(codeLength).fill(0).reduce((acc, _, i) => {
       return __spreadProps(__spreadValues({}, acc), {
         [getInputId(i)]: {
           value: ""
@@ -252,7 +252,7 @@ function CodeInput({
             if (isMobileSafari && event.nativeEvent instanceof CustomEvent) {
               autofillValuesRef.current += event.target.value;
               if (autofillValuesRef.current.length === codeLength) {
-                const newState = Array(codeLength).fill(0).reduce((acc, item, i2) => {
+                const newState = Array(codeLength).fill(0).reduce((acc, _, i2) => {
                   return __spreadProps(__spreadValues({}, acc), {
                     [getInputId(i2)]: {
                       value: autofillValuesRef.current[i2]
@@ -266,7 +266,7 @@ function CodeInput({
                 autofillValuesRef.current = "";
               }
             } else if (isMobile && isChrome && event.target.value.length === codeLength) {
-              const newState = Array(codeLength).fill(0).reduce((acc, item, i2) => {
+              const newState = Array(codeLength).fill(0).reduce((acc, _, i2) => {
                 return __spreadProps(__spreadValues({}, acc), {
                   [getInputId(i2)]: {
                     value: event.target.value[i2]

package/dist/{chunk-DBB5TKTS.cjs → chunk-GFKY6YX2.cjs}

@@ -1,56 +1,68 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkYZVHWN44cjs = require('./chunk-YZVHWN44.cjs');
+var _chunkVSBIQ3WKcjs = require('./chunk-VSBIQ3WK.cjs');
 
 
 
 
 
 
-var _chunkKLC2OBTGcjs = require('./chunk-KLC2OBTG.cjs');
+var _chunkNVVAOGNLcjs = require('./chunk-NVVAOGNL.cjs');
 
 
-var _chunkZBBVZQKJcjs = require('./chunk-ZBBVZQKJ.cjs');
+var _chunkUN4FMYEQcjs = require('./chunk-UN4FMYEQ.cjs');
 
 
-var _chunkVNFSKZW2cjs = require('./chunk-VNFSKZW2.cjs');
+var _chunk7QXYBPSJcjs = require('./chunk-7QXYBPSJ.cjs');
 
 
-var _chunkLZ24FX6Ccjs = require('./chunk-LZ24FX6C.cjs');
+var _chunk5OP23S3Qcjs = require('./chunk-5OP23S3Q.cjs');
 
 
-var _chunkBOBYW7PPcjs = require('./chunk-BOBYW7PP.cjs');
+var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
 
 
-var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
+var _chunkM72EXGIScjs = require('./chunk-M72EXGIS.cjs');
+
 
 
+var _chunkI6Y7IHF5cjs = require('./chunk-I6Y7IHF5.cjs');
 
-var _chunkBY47I7ZPcjs = require('./chunk-BY47I7ZP.cjs');
 
+var _chunk23NA5VW6cjs = require('./chunk-23NA5VW6.cjs');
 
-var _chunkPYL3O7AFcjs = require('./chunk-PYL3O7AF.cjs');
 
+var _chunkJX6HEEEQcjs = require('./chunk-JX6HEEEQ.cjs');
 
-var _chunkWTHHP7G2cjs = require('./chunk-WTHHP7G2.cjs');
 
 
-var _chunkLKKJVJCGcjs = require('./chunk-LKKJVJCG.cjs');
+var _chunkYM5JDZDQcjs = require('./chunk-YM5JDZDQ.cjs');
 
 // src/components/TextInput.tsx
 var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
 var _jsxruntime = require('@emotion/react/jsx-runtime');
 var selectLeftOffset = 10;
-function TextInput(props) {
+var iconSides = ["left", "right"];
+var iconOffsets = ["small", "large"];
+var iconWidths = [8, 12, 16];
+function withDefaults(textInputProps) {
+  return _chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, textInputProps), {
+    width: textInputProps.width || "full",
+    type: textInputProps.type || "text",
+    disabled: Boolean(textInputProps.disabled),
+    typography: _chunkYM5JDZDQcjs.__spreadValues.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, _chunkNVVAOGNLcjs.defaultTextInputTypography), textInputProps.typography)
+  });
+}
+function TextInput(textInputProps) {
   var _a, _b;
+  const props = withDefaults(textInputProps);
   const [focused, setFocused] = _react.useState.call(void 0, false);
   const inputRef = props.inputRef || _react2.default.createRef();
   const ref = props.inputRefCb || inputRef;
   if (props.inputRefCb && !props.inputRef) {
     console.warn("TextInput: inputRef should be provided with inputRefCb.");
   }
-  const typography = _chunkLKKJVJCGcjs.__spreadValues.call(void 0, _chunkLKKJVJCGcjs.__spreadValues.call(void 0, {}, _chunkKLC2OBTGcjs.defaultTextInputTypography), props.typography);
   const handleKeyDown = (e) => {
     if (e.key === "Enter" && props.onEnter) {
       props.onEnter();
@@ -62,63 +74,67 @@ function TextInput(props) {
   const iconCenterOffset = ((_b = props.icon) == null ? void 0 : _b.offset) === "large" ? 26 : 18;
   const iconOffset = iconCenterOffset - iconWidth / 2;
   const iconTextOffset = iconCenterOffset === 18 ? 4 : 14;
+  const textInputWidth = props.width === "short" ? "250px" : "100%";
   let paddingLeftPx;
   if (props.icon && !isIconRight) {
     paddingLeftPx = iconOffset + iconWidth + iconTextOffset;
-  } else if (props.select && typeof props.select.width === "number") {
+  } else if (props.select) {
     paddingLeftPx = selectLeftOffset + props.select.width + 5;
   }
-  let input = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    Input,
-    {
-      disabled: Boolean(props.disabled),
-      maxLength: props.maxLength,
-      inputMode: props.inputMode,
-      pattern: props.pattern,
-      onBlur: () => {
-        setFocused(false);
-        if (props.onBlur) {
-          props.onBlur();
-        }
-      },
-      onChange: (e) => {
-        e.target.setCustomValidity("");
-        props.onChange(e.target.value, e);
-      },
-      onFocus: () => {
-        setFocused(true);
-        if (props.onFocus) {
-          props.onFocus();
-        }
-      },
-      onKeyDown: (e) => {
-        if (props.onKeyDown) {
-          props.onKeyDown(e.key, e);
-        }
-        handleKeyDown(e);
-      },
-      id: props.id,
-      onPaste: props.onPaste,
-      placeholder: props.placeholder,
-      ref,
-      name: props.name,
-      type: props.type || "text",
-      value: props.value,
-      paddingLeftPx,
-      paddingRightPx: isIconRight ? 28 : void 0,
-      hasError,
-      "data-test-id": props.testId,
-      typography,
-      autoComplete: props.autoComplete === "off" ? "new-password" : props.autoComplete,
-      onBeforeInput: (e) => {
-        if (props.onBeforeInput) {
-          const event = e;
-          props.onBeforeInput(event);
-        }
-      },
-      borderRadius: props.borderRadius
-    }
-  );
+  let input = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, InputContainer, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      Input,
+      {
+        disabled: props.disabled,
+        maxLength: props.maxLength,
+        inputMode: props.inputMode,
+        pattern: props.pattern,
+        onBlur: () => {
+          setFocused(false);
+          if (props.onBlur) {
+            props.onBlur();
+          }
+        },
+        onChange: (e) => {
+          e.target.setCustomValidity("");
+          props.onChange(e.target.value, e);
+        },
+        onFocus: () => {
+          setFocused(true);
+          if (props.onFocus) {
+            props.onFocus();
+          }
+        },
+        onKeyDown: (e) => {
+          if (props.onKeyDown) {
+            props.onKeyDown(e.key, e);
+          }
+          handleKeyDown(e);
+        },
+        id: props.id,
+        onPaste: props.onPaste,
+        placeholder: props.placeholder,
+        ref,
+        name: props.name,
+        type: props.type,
+        value: props.value,
+        paddingLeftPx,
+        paddingRightPx: isIconRight ? 28 : void 0,
+        hasError,
+        "data-test-id": props.testId,
+        typography: props.typography,
+        autoComplete: props.autoComplete === "off" ? "new-password" : props.autoComplete,
+        onBeforeInput: (e) => {
+          if (props.onBeforeInput) {
+            const event = e;
+            props.onBeforeInput(event);
+          }
+        },
+        borderRadius: props.borderRadius
+      }
+    ),
+    props.rightButtonText && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RightButtonAligner, { iconOffset, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RightButton, { onClick: props.onRightButtonClick, children: props.rightButtonText }) })
+  ] });
   if (props.icon) {
     input = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, WithIcon, { hasError, withFocus: focused, children: [
       isIconRight ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: input }) : null,
@@ -131,34 +147,23 @@ function TextInput(props) {
           iconOffset,
           focused,
           hasValue: Boolean(props.value),
-          colorProp: typography.color,
-          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkBY47I7ZPcjs.Icon, { name: props.icon.name, width: iconWidth })
+          colorProp: props.typography.color,
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkI6Y7IHF5cjs.Icon, { name: props.icon.name, width: iconWidth })
         }
       ),
-      isIconRight ? null : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: input }),
-      props.rightButtonText && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        TextInputIconContainer,
-        {
-          isIconRight: true,
-          iconOffset,
-          hasValue: Boolean(props.value),
-          focused,
-          colorProp: typography.color,
-          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RightButton, { onClick: props.onRightButtonClick, children: props.rightButtonText })
-        }
-      )
+      isIconRight ? null : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: input })
     ] });
   }
   const hintTooltipId = props.hintTooltip ? `${props.id || "input"}-hint-tooltip` : void 0;
   const { select } = props;
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, InputContainer, { children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, StyledTextInput, { width: textInputWidth, children: [
     props.label ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TextInputLabel, { hasError, children: props.label }) : null,
     select && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       TextInputSelect,
       {
         value: select.value,
         widthProp: select.width,
-        typography,
+        typography: props.typography,
         onChange: (event) => {
           var _a2;
           select.onChange(event.target.value);
@@ -169,23 +174,18 @@ function TextInput(props) {
     ),
     input,
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkKLC2OBTGcjs.InputSubtext,
+      _chunkNVVAOGNLcjs.InputSubtext,
       {
         text: props.error || props.hint,
         hasError,
         tooltipId: hintTooltipId
       }
     ),
-    props.hintTooltip ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLZ24FX6Ccjs.Tooltip, { id: hintTooltipId, content: props.hintTooltip, place: "right" }) : null
+    props.hintTooltip ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5OP23S3Qcjs.Tooltip, { id: hintTooltipId, content: props.hintTooltip, place: "right" }) : null
   ] });
 }
-TextInput.defaultProps = {
-  disabled: false,
-  autoComplete: void 0,
-  hint: null
-};
 var TextInputSelect = _styled2.default.select`
-  ${({ typography, theme }) => _chunkZBBVZQKJcjs.applyTypography.call(void 0, theme, typography.type, typography.size, typography.color)}
+  ${({ typography, theme }) => _chunkUN4FMYEQcjs.applyTypography.call(void 0, theme, typography.type, typography.size, typography.color)}
   position: absolute;
   z-index: ${_chunkZU72XWNEcjs.z.textInput + 1};
   border: none;
@@ -196,14 +196,14 @@ var TextInputSelect = _styled2.default.select`
   width: ${({ widthProp }) => `${widthProp}px`};
 `;
 var WithIcon = _styled2.default.div`
-  ${_chunkPYL3O7AFcjs.standardBorderRadius.call(void 0, 8)}
+  ${_chunk23NA5VW6cjs.standardBorderRadius.call(void 0, 8)}
   position: relative;
 
   input {
     padding-right: 34px;
   }
 
-  & ${_chunkBY47I7ZPcjs.IconContainer.toString()} {
+  & ${_chunkI6Y7IHF5cjs.IconContainer.toString()} {
     z-index: ${_chunkZU72XWNEcjs.z.textInput + 1};
   }
 `;
@@ -217,24 +217,33 @@ var TextInputIconContainer = _styled2.default.div`
   display: flex;
   align-items: center;
   cursor: ${({ onClick }) => onClick ? "pointer" : "auto"};
-  color: ${({ focused, hasValue, theme, colorProp }) => focused || hasValue ? _chunkWTHHP7G2cjs.getFontColor.call(void 0, theme, colorProp) : _chunkKLC2OBTGcjs.textInputPlaceholderColor.call(void 0, { theme })};
+  color: ${({ focused, hasValue, theme, colorProp }) => focused || hasValue ? _chunkJX6HEEEQcjs.getFontColor.call(void 0, theme, colorProp) : _chunkNVVAOGNLcjs.textInputPlaceholderColor.call(void 0, { theme })};
 `;
 var Input = _styled2.default.input`
-  ${_chunkKLC2OBTGcjs.textInputStyle};
+  ${_chunkNVVAOGNLcjs.textInputStyle};
 
   // disable autofill styles in chrome https://stackoverflow.com/a/68240841/9808766
   &:-webkit-autofill,
   &:-webkit-autofill:focus,
   &:-internal-autofill-selected,
   &:-internal-autofill-selected:focus {
-    background-color: ${({ theme, disabled }) => theme.bg} !important;
+    background-color: ${({ theme }) => theme.bg} !important;
     color: ${({ theme }) => theme.text} !important;
     transition:
       background-color 600000s 0s,
       color 600000s 0s !important;
   }
 `;
-var RightButton = _styled2.default.call(void 0, _chunkBOBYW7PPcjs.UnstyledButton)`
+var RightButtonAligner = _styled2.default.div`
+  position: absolute;
+  top: 0;
+  right: ${({ iconOffset }) => iconOffset}px;
+  z-index: ${_chunkZU72XWNEcjs.z.textInput + 1};
+  bottom: 0;
+  display: flex;
+  align-items: center;
+`;
+var RightButton = _styled2.default.call(void 0, _chunk7QXYBPSJcjs.UnstyledButton)`
   border-radius: 4px;
   border: none;
   background-color: ${({ theme }) => theme.vlcNeutral};
@@ -244,7 +253,7 @@ var RightButton = _styled2.default.call(void 0, _chunkBOBYW7PPcjs.UnstyledButton
   padding: 8px 10px;
 `;
 var TextInputLabel = _styled2.default.label`
-  ${_chunkPYL3O7AFcjs.standardBorderRadius.call(void 0, 8)}
+  ${_chunk23NA5VW6cjs.standardBorderRadius.call(void 0, 8)}
   font-size: 10px;
   position: absolute;
   z-index: ${_chunkZU72XWNEcjs.z.textInput + 1};
@@ -256,7 +265,7 @@ var TextInputLabel = _styled2.default.label`
   top: -10px;
 `;
 var TextInputHalfRow = _styled2.default.div`
-  margin-top: ${_chunkKLC2OBTGcjs.inputSpacingPx}px;
+  margin-top: ${_chunkNVVAOGNLcjs.inputSpacingPx}px;
   display: flex;
   justify-content: space-between;
   gap: 16px;
@@ -264,28 +273,34 @@ var TextInputHalfRow = _styled2.default.div`
     width: 50%;
   }
 `;
-var InputContainer = _styled2.default.div`
-  width: 100%;
+var StyledTextInput = _styled2.default.div`
+  width: ${({ width }) => width};
   position: relative;
 
   /* eg forms, should be left consistent: */
   & + & {
-    margin-top: ${_chunkKLC2OBTGcjs.inputSpacingPx}px;
+    margin-top: ${_chunkNVVAOGNLcjs.inputSpacingPx}px;
   }
 
   ${TextInputHalfRow.toString()} & + & {
     margin-top: 0;
   }
 
-  ${_chunkVNFSKZW2cjs.CheckboxContainer.toString()} + &,
-  ${_chunkYZVHWN44cjs.ToggleContainer.toString()} + &,
-  & + ${_chunkVNFSKZW2cjs.CheckboxContainer.toString()},
-  & + ${_chunkYZVHWN44cjs.ToggleContainer.toString()} {
-    margin-top: ${_chunkKLC2OBTGcjs.inputSpacingPx}px;
+  ${_chunkM72EXGIScjs.CheckboxContainer.toString()} + &,
+  ${_chunkVSBIQ3WKcjs.ToggleContainer.toString()} + &,
+  & + ${_chunkM72EXGIScjs.CheckboxContainer.toString()},
+  & + ${_chunkVSBIQ3WKcjs.ToggleContainer.toString()} {
+    margin-top: ${_chunkNVVAOGNLcjs.inputSpacingPx}px;
   }
 `;
+var InputContainer = _styled2.default.div`
+  position: relative;
+`;
+
+
+
 
 
 
 
-exports.TextInput = TextInput; exports.TextInputHalfRow = TextInputHalfRow;
+exports.iconSides = iconSides; exports.iconOffsets = iconOffsets; exports.iconWidths = iconWidths; exports.TextInput = TextInput; exports.TextInputHalfRow = TextInputHalfRow;