@lightsparkdev/ui 1.0.11 → 1.0.13

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @lightsparkdev/ui
 
+## 1.0.13
+
+### Patch Changes
+
+- e75da7c: - fix button backgrounds
+  - fix secondary button theme
+  - update button paddingYs
+- e75da7c: - Allow any icon width with default set in Button
+  - Allow "auto" as Button margin value
+  - Add topLeftIcon prop to Modal
+  - Update Modal to use setDefaultReactNodesTypography
+  - Add onClick prop to typography components
+  - Fix issue where onClick was always added to text nodes
+  - Add CardFormNearButtonColumn for alternative close Button spacing in CardForm
+
+## 1.0.12
+
+### Patch Changes
+
+- f148f37: - update ClipboardTextField
+  - Fix line height typography
+  - Enable single defaultTypography argument for setDefaultTypography
+  - Move CardForm description typography to theme
+  - Add typed iconProps to Icon
+  - add padding and outline props to TextInput
+  - add button active and hover colors
+  - add Inter font for uma auth sdk themes
+  - add floating Drawer kind and adjust closeButton size
+  - add path props to most icons
+  - add new icons
+  - add icon object prop instead of icon name to Button
+- Updated dependencies [f148f37]
+  - @lightsparkdev/core@1.2.5
+
 ## 1.0.11
 
 ### Patch Changes

package/dist/{chunk-CTPC457D.js → chunk-24LPJJHJ.js}

@@ -1,6 +1,10 @@
 // src/icons/Notebook.tsx
 import { jsx } from "@emotion/react/jsx-runtime";
-function Notebook() {
+function Notebook({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
   return /* @__PURE__ */ jsx(
     "svg",
     {
@@ -13,9 +17,9 @@ function Notebook() {
         {
           d: "M5.3998 1H2.5998C2.15798 1 1.7998 1.35818 1.7998 1.8V14.2C1.7998 14.6418 2.15798 15 2.5998 15H5.3998M5.3998 1H13.3998C13.8416 1 14.1998 1.35818 14.1998 1.8V14.2C14.1998 14.6418 13.8416 15 13.3998 15H5.3998M5.3998 1V15M8.5998 4.6H10.9998M8.5998 7.8H10.9998",
           stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
+          strokeWidth,
+          strokeLinecap,
+          strokeLinejoin
         }
       )
     }

package/dist/{chunk-G2ZTK5RI.cjs → chunk-2DRWZCMM.cjs}

@@ -1,6 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/AnchorLink.tsx
 var _jsxruntime = require('@emotion/react/jsx-runtime');
-function AnchorLink() {
+function AnchorLink({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "svg",
     {
@@ -13,9 +17,9 @@ function AnchorLink() {
         {
           d: "M7.49989 12.5L12.4998 7.50004M6.24989 8.75003L4.99989 10.0001C3.61923 11.3808 3.61925 13.6193 4.99992 15V15C6.38064 16.3807 8.61924 16.3807 9.99993 14.9999L11.2498 13.7499M13.7498 11.25L14.9999 9.99994C16.3805 8.61924 16.3805 6.3807 14.9998 5.00001V5.00001C13.6191 3.6193 11.3805 3.61931 9.99984 5.00004L8.74987 6.25005",
           stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
+          strokeWidth,
+          strokeLinecap,
+          strokeLinejoin
         }
       )
     }

package/dist/{chunk-C4KD255H.js → chunk-2I6GN3DP.js}

@@ -1,6 +1,6 @@
 import {
   TextInput
-} from "./chunk-KIE5GR5E.js";
+} from "./chunk-SUFXV4SF.js";
 import {
   __objRest,
   __spreadProps,

package/dist/{chunk-ZPYKQFT2.js → chunk-2KOU5SKP.js}

@@ -1,22 +1,22 @@
 import {
   Pill
-} from "./chunk-DMGDCXCZ.js";
-import {
-  useClipboard
-} from "./chunk-NFQP7P3D.js";
+} from "./chunk-JA2CQPTC.js";
 import {
   TextInput
-} from "./chunk-KIE5GR5E.js";
+} from "./chunk-SUFXV4SF.js";
 import {
   InputSubtext,
   inputBlockStyle
-} from "./chunk-UGHP4KVZ.js";
+} from "./chunk-P2OCWRMQ.js";
 import {
   UnstyledButton
-} from "./chunk-7SNXBUCU.js";
+} from "./chunk-ZP6BJB4X.js";
+import {
+  useClipboard
+} from "./chunk-NFQP7P3D.js";
 import {
   Icon
-} from "./chunk-NCLVA6JY.js";
+} from "./chunk-DV6LJQJW.js";
 import {
   useBreakpoints
 } from "./chunk-JSGRNWSB.js";

package/dist/chunk-2LRIRGH3.cjs

@@ -0,0 +1,31 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/CalendarClock.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function CalendarClock({
+  strokeWidth = "2",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "100%",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "path",
+        {
+          d: "M7.08337 16.6667H4.16671C3.70647 16.6667 3.33337 16.2936 3.33337 15.8333V5C3.33337 4.53977 3.70647 4.16667 4.16671 4.16667H15.8334C16.2936 4.16667 16.6667 4.53977 16.6667 5V7.08333M6.66671 4.16667V2.5M13.3334 4.16667V2.5M14.1667 12.5002V14.1666L15.4167 15.4168M12.5728 10.3182C14.6985 9.43767 17.1346 10.4473 18.0152 12.573C18.8957 14.6986 17.886 17.1346 15.7603 18.0152C13.6346 18.8957 11.1985 17.886 10.318 15.7603C9.43812 13.6354 10.4471 11.1987 12.5728 10.3182Z",
+          stroke: "currentColor",
+          strokeWidth,
+          strokeLinecap,
+          strokeLinejoin
+        }
+      )
+    }
+  );
+}
+
+
+
+exports.CalendarClock = CalendarClock;

package/dist/chunk-2Q7NWUOL.cjs

@@ -0,0 +1,40 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/SparklesSoft.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function SparklesSoft({
+  strokeWidth = "2",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "100%",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "path",
+          {
+            d: "M19 13C14.0987 13.4243 11.4243 16.0987 11 21C10.5578 16.0225 7.89737 13.5547 3 13C7.97478 12.4262 10.4262 9.97478 11 5C11.5547 9.89737 14.0225 12.5578 19 13Z",
+            stroke: "currentColor",
+            strokeWidth,
+            strokeLinecap,
+            strokeLinejoin
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "path",
+          {
+            d: "M18.8864 2.34512C18.8642 2.14869 18.6981 2.0002 18.5004 2C18.3027 1.9998 18.1363 2.14794 18.1137 2.34433C18.0082 3.25861 17.7367 3.88584 17.3113 4.31127C16.8858 4.7367 16.2586 5.00822 15.3443 5.11367C15.1479 5.13632 14.9998 5.30271 15 5.5004C15.0002 5.69809 15.1487 5.86417 15.3451 5.88642C16.2439 5.98823 16.8855 6.25969 17.3217 6.68804C17.7556 7.11407 18.0322 7.74041 18.1126 8.64552C18.1305 8.84634 18.2988 9.00023 18.5004 9C18.702 8.99977 18.8701 8.84551 18.8874 8.64465C18.9645 7.75483 19.2409 7.11438 19.6776 6.67764C20.1144 6.24091 20.7548 5.96446 21.6446 5.88744C21.8455 5.87005 21.9998 5.70205 22 5.50044C22.0002 5.29883 21.8463 5.13048 21.6455 5.11264C20.7404 5.03224 20.1141 4.75557 19.688 4.3217C19.2597 3.88545 18.9882 3.24394 18.8864 2.34512Z",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+}
+
+
+
+exports.SparklesSoft = SparklesSoft;

package/dist/{chunk-JHLQJQAH.js → chunk-2RHSNVOP.js}

@@ -4,10 +4,10 @@ import {
 import {
   rootFontSizeRems,
   standardLineHeightEms
-} from "./chunk-YBJVTNAP.js";
+} from "./chunk-POGNK25N.js";
 import {
   useThemeBg
-} from "./chunk-HYUF4RXZ.js";
+} from "./chunk-N4C6SL6K.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";
@@ -18,8 +18,18 @@ import { useEffect } from "react";
 import "react-tooltip/dist/react-tooltip.css";
 import "./static/fonts.css";
 import { jsx } from "@emotion/react/jsx-runtime";
+var getFontImport = (theme) => {
+  switch (theme.typography.fontFamilies.main) {
+    case "Inter":
+      return `@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');`;
+    case "Manrope":
+      return `@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");`;
+    default:
+      return "";
+  }
+};
 var globalComponentStyles = ({ theme }) => css`
-  @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+  ${getFontImport(theme)};
 
   html {
     font-size: ${rootFontSizeRems}rem;

package/dist/{chunk-GEFRH7G5.js → chunk-2UBMGY7N.js}

@@ -1,13 +1,13 @@
 import {
   Pill
-} from "./chunk-DMGDCXCZ.js";
+} from "./chunk-JA2CQPTC.js";
 import {
   InputSubtext,
   inputBlockStyle
-} from "./chunk-UGHP4KVZ.js";
+} from "./chunk-P2OCWRMQ.js";
 import {
   Icon
-} from "./chunk-NCLVA6JY.js";
+} from "./chunk-DV6LJQJW.js";
 
 // src/components/FileInput.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-YPCTBP2X.cjs → chunk-2ZQXX5QN.cjs}

@@ -1,6 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/Person.tsx
 var _jsxruntime = require('@emotion/react/jsx-runtime');
-function Person() {
+function Person({
+  strokeWidth = "1.5",
+  strokeLinejoin = "round"
+}) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "svg",
     {
@@ -14,8 +17,8 @@ function Person() {
           {
             d: "M15.7485 6.5C15.7485 8.57107 14.0696 10.25 11.9985 10.25C9.92747 10.25 8.24854 8.57107 8.24854 6.5C8.24854 4.42893 9.92747 2.75 11.9985 2.75C14.0696 2.75 15.7485 4.42893 15.7485 6.5Z",
             stroke: "currentColor",
-            strokeWidth: "1.5",
-            strokeLinejoin: "round"
+            strokeWidth,
+            strokeLinejoin
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -23,8 +26,8 @@ function Person() {
           {
             d: "M11.9985 13.25C8.20293 13.25 5.43245 15.7735 4.67009 19.1657C4.54089 19.7406 5.0077 20.25 5.59696 20.25H18.4001C18.9894 20.25 19.4562 19.7406 19.327 19.1657C18.5646 15.7735 15.7941 13.25 11.9985 13.25Z",
             stroke: "currentColor",
-            strokeWidth: "1.5",
-            strokeLinejoin: "round"
+            strokeWidth,
+            strokeLinejoin
           }
         )
       ]

package/dist/{chunk-VDL5FG27.cjs → chunk-3CC6QLHR.cjs}

@@ -1,6 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/Envelope.tsx
 var _jsxruntime = require('@emotion/react/jsx-runtime');
-function Envelope() {
+function Envelope({
+  strokeWidth = "3",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "svg",
     {
@@ -13,9 +17,9 @@ function Envelope() {
         {
           d: "M35.0027 15.417C30.8238 18.5565 25.6293 20.417 20.0002 20.417C14.371 20.417 9.17645 18.5565 4.99773 15.417M4.5835 7.91699H35.4168V32.0837H4.5835V7.91699Z",
           stroke: "currentColor",
-          strokeWidth: "3",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
+          strokeWidth,
+          strokeLinecap,
+          strokeLinejoin
         }
       )
     }

package/dist/{chunk-XTLPMH2Q.cjs → chunk-3ENUNXXT.cjs}

@@ -1,6 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/DollarManropeSmall.tsx
 var _jsxruntime = require('@emotion/react/jsx-runtime');
-function DollarManropeSmall() {
+function DollarManropeSmall({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "svg",
     {
@@ -13,9 +17,9 @@ function DollarManropeSmall() {
         {
           d: "M10.0005 3.3291V1.84668M10.0005 16.6709V18.1533M13.5318 5.55273C12.8269 4.66654 11.5095 4.07031 10.0005 4.07031H9.54754C7.5462 4.07031 5.92383 5.25023 5.92383 6.70572V6.81886C5.92383 7.85997 6.7326 8.81163 8.01298 9.27722L11.9881 10.7227C13.2685 11.1883 14.0771 12.14 14.0771 13.1811C14.0771 14.699 12.3852 15.9296 10.2978 15.9296H10.0005C8.4915 15.9296 7.17414 15.3334 6.46921 14.4472",
           stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
+          strokeWidth,
+          strokeLinecap,
+          strokeLinejoin
         }
       )
     }

package/dist/{chunk-O64MW4Z4.cjs → chunk-3NRRDBJN.cjs}

@@ -1,38 +1,38 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkDOP5TYRDcjs = require('./chunk-DOP5TYRD.cjs');
+var _chunkUPJ6PK46cjs = require('./chunk-UPJ6PK46.cjs');
 
 
 
 
 
 
-var _chunkBCPM2M3Ycjs = require('./chunk-BCPM2M3Y.cjs');
+var _chunkITH4PPTTcjs = require('./chunk-ITH4PPTT.cjs');
 
 
-var _chunkWVBMQP6Ocjs = require('./chunk-WVBMQP6O.cjs');
+var _chunkJBO3HA6Gcjs = require('./chunk-JBO3HA6G.cjs');
 
 
-var _chunkA3WQPTLFcjs = require('./chunk-A3WQPTLF.cjs');
+var _chunkLH7M4OGRcjs = require('./chunk-LH7M4OGR.cjs');
 
 
 var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
 
 
-var _chunkUL73AXJPcjs = require('./chunk-UL73AXJP.cjs');
+var _chunkYSH2UK2Bcjs = require('./chunk-YSH2UK2B.cjs');
 
 
 
-var _chunkUMU7TYANcjs = require('./chunk-UMU7TYAN.cjs');
+var _chunkORWZTMF2cjs = require('./chunk-ORWZTMF2.cjs');
 
 
-var _chunkOQEP7VDDcjs = require('./chunk-OQEP7VDD.cjs');
+var _chunkD262WAOVcjs = require('./chunk-D262WAOV.cjs');
 
 
-var _chunkSZSK5ISJcjs = require('./chunk-SZSK5ISJ.cjs');
+var _chunkQK32JW3Ncjs = require('./chunk-QK32JW3N.cjs');
 
 
-var _chunk7EIZIKLRcjs = require('./chunk-7EIZIKLR.cjs');
+var _chunk6DWDBCUJcjs = require('./chunk-6DWDBCUJ.cjs');
 
 
 
@@ -51,7 +51,7 @@ function withDefaults(textInputProps) {
     width: textInputProps.width || "full",
     type: textInputProps.type || "text",
     disabled: Boolean(textInputProps.disabled),
-    typography: _chunkYM5JDZDQcjs.__spreadValues.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, _chunkBCPM2M3Ycjs.defaultTextInputTypography), textInputProps.typography)
+    typography: _chunkYM5JDZDQcjs.__spreadValues.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, _chunkITH4PPTTcjs.defaultTextInputTypography), textInputProps.typography)
   });
 }
 function TextInput(textInputProps) {
@@ -76,11 +76,27 @@ function TextInput(textInputProps) {
   const iconTextOffset = iconCenterOffset === 18 ? 4 : 14;
   const textInputWidth = props.width === "short" ? "250px" : "100%";
   let paddingLeftPx;
-  if (props.icon && !isIconRight) {
+  if (typeof props.paddingX === "number") {
+    if (isIconRight) {
+      paddingLeftPx = props.paddingX;
+    } else {
+      paddingLeftPx = props.paddingX + iconWidth + iconTextOffset;
+    }
+  } else if (props.icon && !isIconRight) {
     paddingLeftPx = iconOffset + iconWidth + iconTextOffset;
   } else if (props.select) {
     paddingLeftPx = selectLeftOffset + props.select.width + 5;
   }
+  let paddingRightPx;
+  if (typeof props.paddingX === "number") {
+    if (isIconRight) {
+      paddingRightPx = iconTextOffset + iconWidth + props.paddingX;
+    } else {
+      paddingRightPx = props.paddingX;
+    }
+  } else if (isIconRight) {
+    paddingRightPx = 28;
+  }
   let input = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, InputContainer, { children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       Input,
@@ -119,7 +135,11 @@ function TextInput(textInputProps) {
         type: props.type,
         value: props.value,
         paddingLeftPx,
-        paddingRightPx: isIconRight ? 28 : void 0,
+        paddingRightPx,
+        paddingTopPx: props.paddingY,
+        paddingBottomPx: props.paddingY,
+        activeOutline: props.activeOutline,
+        activeOutlineColor: props.activeOutlineColor,
         hasError,
         "data-test-id": props.testId,
         typography: props.typography,
@@ -144,11 +164,11 @@ function TextInput(textInputProps) {
           onClick: props.onClickIcon ? props.onClickIcon : () => {
           },
           isIconRight,
-          iconOffset,
+          iconOffset: typeof props.paddingX === "number" ? props.paddingX : iconOffset,
           focused,
           hasValue: Boolean(props.value),
           colorProp: props.typography.color,
-          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUMU7TYANcjs.Icon, { name: props.icon.name, width: iconWidth })
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkORWZTMF2cjs.Icon, { name: props.icon.name, width: iconWidth })
         }
       ),
       isIconRight ? null : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: input })
@@ -174,18 +194,18 @@ function TextInput(textInputProps) {
     ),
     input,
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkBCPM2M3Ycjs.InputSubtext,
+      _chunkITH4PPTTcjs.InputSubtext,
       {
         text: props.error || props.hint,
         hasError,
         tooltipId: hintTooltipId
       }
     ),
-    props.hintTooltip ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkA3WQPTLFcjs.Tooltip, { id: hintTooltipId, content: props.hintTooltip, place: "right" }) : null
+    props.hintTooltip ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLH7M4OGRcjs.Tooltip, { id: hintTooltipId, content: props.hintTooltip, place: "right" }) : null
   ] });
 }
 var TextInputSelect = _styled2.default.select`
-  ${({ typography, theme }) => _chunkSZSK5ISJcjs.applyTypography.call(void 0, theme, typography.type, typography.size, typography.color)}
+  ${({ typography, theme }) => _chunkQK32JW3Ncjs.applyTypography.call(void 0, theme, typography.type, typography.size, typography.color)}
   position: absolute;
   z-index: ${_chunkZU72XWNEcjs.z.textInput + 1};
   border: none;
@@ -196,14 +216,10 @@ var TextInputSelect = _styled2.default.select`
   width: ${({ widthProp }) => `${widthProp}px`};
 `;
 var WithIcon = _styled2.default.div`
-  ${_chunkOQEP7VDDcjs.standardBorderRadius.call(void 0, 8)}
+  ${_chunkD262WAOVcjs.standardBorderRadius.call(void 0, 8)}
   position: relative;
 
-  input {
-    padding-right: 34px;
-  }
-
-  & ${_chunkUMU7TYANcjs.IconContainer.toString()} {
+  & ${_chunkORWZTMF2cjs.IconContainer.toString()} {
     z-index: ${_chunkZU72XWNEcjs.z.textInput + 1};
   }
 `;
@@ -217,10 +233,10 @@ var TextInputIconContainer = _styled2.default.div`
   display: flex;
   align-items: center;
   cursor: ${({ onClick }) => onClick ? "pointer" : "auto"};
-  color: ${({ focused, hasValue, theme, colorProp }) => focused || hasValue ? _chunk7EIZIKLRcjs.getFontColor.call(void 0, theme, colorProp) : _chunkBCPM2M3Ycjs.textInputPlaceholderColor.call(void 0, { theme })};
+  color: ${({ focused, hasValue, theme, colorProp }) => focused || hasValue ? _chunk6DWDBCUJcjs.getFontColor.call(void 0, theme, colorProp) : _chunkITH4PPTTcjs.textInputPlaceholderColor.call(void 0, { theme })};
 `;
 var Input = _styled2.default.input`
-  ${_chunkBCPM2M3Ycjs.textInputStyle};
+  ${_chunkITH4PPTTcjs.textInputStyle};
 
   // disable autofill styles in chrome https://stackoverflow.com/a/68240841/9808766
   &:-webkit-autofill,
@@ -243,7 +259,7 @@ var RightButtonAligner = _styled2.default.div`
   display: flex;
   align-items: center;
 `;
-var RightButton = _styled2.default.call(void 0, _chunkWVBMQP6Ocjs.UnstyledButton)`
+var RightButton = _styled2.default.call(void 0, _chunkJBO3HA6Gcjs.UnstyledButton)`
   border-radius: 4px;
   border: none;
   background-color: ${({ theme }) => theme.vlcNeutral};
@@ -253,7 +269,7 @@ var RightButton = _styled2.default.call(void 0, _chunkWVBMQP6Ocjs.UnstyledButton
   padding: 8px 10px;
 `;
 var TextInputLabel = _styled2.default.label`
-  ${_chunkOQEP7VDDcjs.standardBorderRadius.call(void 0, 8)}
+  ${_chunkD262WAOVcjs.standardBorderRadius.call(void 0, 8)}
   font-size: 10px;
   position: absolute;
   z-index: ${_chunkZU72XWNEcjs.z.textInput + 1};
@@ -265,7 +281,7 @@ var TextInputLabel = _styled2.default.label`
   top: -10px;
 `;
 var TextInputHalfRow = _styled2.default.div`
-  margin-top: ${_chunkBCPM2M3Ycjs.inputSpacingPx}px;
+  margin-top: ${_chunkITH4PPTTcjs.inputSpacingPx}px;
   display: flex;
   justify-content: space-between;
   gap: 16px;
@@ -279,18 +295,18 @@ var StyledTextInput = _styled2.default.div`
 
   /* eg forms, should be left consistent: */
   & + & {
-    margin-top: ${_chunkBCPM2M3Ycjs.inputSpacingPx}px;
+    margin-top: ${_chunkITH4PPTTcjs.inputSpacingPx}px;
   }
 
   ${TextInputHalfRow.toString()} & + & {
     margin-top: 0;
   }
 
-  ${_chunkUL73AXJPcjs.CheckboxContainer.toString()} + &,
-  ${_chunkDOP5TYRDcjs.ToggleContainer.toString()} + &,
-  & + ${_chunkUL73AXJPcjs.CheckboxContainer.toString()},
-  & + ${_chunkDOP5TYRDcjs.ToggleContainer.toString()} {
-    margin-top: ${_chunkBCPM2M3Ycjs.inputSpacingPx}px;
+  ${_chunkYSH2UK2Bcjs.CheckboxContainer.toString()} + &,
+  ${_chunkUPJ6PK46cjs.ToggleContainer.toString()} + &,
+  & + ${_chunkYSH2UK2Bcjs.CheckboxContainer.toString()},
+  & + ${_chunkUPJ6PK46cjs.ToggleContainer.toString()} {
+    margin-top: ${_chunkITH4PPTTcjs.inputSpacingPx}px;
   }
 `;
 var InputContainer = _styled2.default.div`

package/dist/{chunk-H3Z7VJF4.cjs → chunk-3RSPLU4N.cjs}

@@ -1,6 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/Code.tsx
 var _jsxruntime = require('@emotion/react/jsx-runtime');
-function Code() {
+function Code({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "svg",
     {
@@ -13,9 +17,9 @@ function Code() {
         {
           d: "M3.85714 3.37502L0.75 7.00002L3.85714 10.625M12.1429 3.37502L15.25 7.00002L12.1429 10.625M9.55357 1.30359L6.44643 12.6964",
           stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
+          strokeWidth,
+          strokeLinecap,
+          strokeLinejoin
         }
       )
     }

package/dist/{chunk-MPUHSMAP.js → chunk-3V2URSII.js}

@@ -1,12 +1,12 @@
 import {
   getPropDefaultsBase
-} from "./chunk-BVEHA6GI.js";
+} from "./chunk-76FQY6HX.js";
 import {
   typographyStyles
-} from "./chunk-X5SBSJ3Z.js";
+} from "./chunk-F3HU3LG5.js";
 import {
   applyTypography
-} from "./chunk-FH6BM3M7.js";
+} from "./chunk-TLFK5GBE.js";
 import {
   __objRest,
   __spreadProps,

package/dist/{chunk-QYALA36I.js → chunk-3XDBPCS7.js}

@@ -1,12 +1,12 @@
 import {
   getPropDefaultsBase
-} from "./chunk-BVEHA6GI.js";
+} from "./chunk-76FQY6HX.js";
 import {
   typographyStyles
-} from "./chunk-X5SBSJ3Z.js";
+} from "./chunk-F3HU3LG5.js";
 import {
   applyTypography
-} from "./chunk-FH6BM3M7.js";
+} from "./chunk-TLFK5GBE.js";
 import {
   __objRest,
   __spreadProps,

package/dist/{chunk-43LGFT5G.cjs → chunk-3XHBIFRP.cjs}

@@ -1,6 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/Search.tsx
 var _jsxruntime = require('@emotion/react/jsx-runtime');
-function Search() {
+function Search({
+  strokeWidth = "2",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "svg",
     {
@@ -14,9 +18,9 @@ function Search() {
         {
           d: "M10.9972 10.9512C9.78136 12.1281 8.12781 12.6667 6.83333 12.6667C4.5 12.6667 1 10.9167 1 6.83333C1 2.75 4.5 1 6.83333 1C9.16667 1 12.6667 2.75 12.6667 6.83333C12.6667 8.65133 11.9729 10.0068 10.9972 10.9512ZM10.9972 10.9512L15 15",
           stroke: "#404040",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
+          strokeWidth,
+          strokeLinecap,
+          strokeLinejoin
         }
       )
     }