@lightsparkdev/ui 1.0.11 → 1.0.13

package/dist/chunk-NVEDOY6M.js

@@ -0,0 +1,158 @@
+import {
+  useClipboard
+} from "./chunk-NFQP7P3D.js";
+import {
+  lineClamp
+} from "./chunk-4ZUB5ENE.js";
+import {
+  Icon
+} from "./chunk-DV6LJQJW.js";
+import {
+  applyTypography
+} from "./chunk-TLFK5GBE.js";
+import {
+  elide
+} from "./chunk-EDN2QDCB.js";
+import {
+  getLineHeightNumberForTypographyType
+} from "./chunk-AZSSORPU.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-CWMXXUWU.js";
+
+// src/components/ClipboardTextField.tsx
+import { useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import { useCallback } from "react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function ClipboardTextField({
+  value,
+  icon,
+  id,
+  stopPropagation,
+  maxLines,
+  elide: elideArgs,
+  wordBreakAll = false,
+  tag = "span",
+  iconSide = "left",
+  iconColor: iconColorProp,
+  typography,
+  clipboardCallbacks
+}) {
+  const theme = useTheme();
+  const { canWriteToClipboard, writeTextToClipboard } = useClipboard(clipboardCallbacks);
+  const addLineClamp = Boolean(maxLines && maxLines > 1);
+  const displayValue = elideArgs ? elide(value, elideArgs) : value;
+  const valueNode = /* @__PURE__ */ jsx(
+    ClipboardTextFieldValue,
+    {
+      wordBreakAll,
+      typography,
+      addLineClamp,
+      maxLines,
+      children: displayValue
+    }
+  );
+  const onClick = useCallback(
+    (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 commonProps = {
+    as: tag,
+    id,
+    addLineClamp,
+    maxLines
+  };
+  const typographyType = (typography == null ? void 0 : typography.type) || "Body";
+  const typographySize = (typography == null ? void 0 : typography.size) || "ExtraSmall";
+  const lineHeight = getLineHeightNumberForTypographyType(
+    typographyType,
+    typographySize,
+    theme
+  );
+  const iconColor = iconColorProp || (typography == null ? void 0 : typography.color) || "inherit";
+  return canWriteToClipboard && value ? /* @__PURE__ */ jsxs(
+    StyledClipboardTextField,
+    __spreadProps(__spreadValues({
+      onClick,
+      role: "button",
+      tabIndex: 0,
+      onKeyDown
+    }, commonProps), {
+      children: [
+        icon && iconSide === "left" ? /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: "Copy",
+            width: lineHeight * 0.7,
+            mr: lineHeight * 0.3,
+            color: iconColor
+          }
+        ) : null,
+        valueNode,
+        icon && iconSide === "right" ? /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: "Copy",
+            width: lineHeight * 0.7,
+            ml: lineHeight * 0.3,
+            color: iconColor
+          }
+        ) : null
+      ]
+    })
+  ) : /* @__PURE__ */ jsx(StyledClipboardTextField, __spreadProps(__spreadValues({}, commonProps), { children: valueNode }));
+}
+var StyledClipboardTextField = styled.span`
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  align-items: center;
+  box-sizing: content-box;
+  cursor: pointer;
+
+  ${({ addLineClamp, maxLines }) => (
+  /* keep the icon on the same line when addLineClamp: */
+  addLineClamp || maxLines === 1 ? "display: inline-flex;" : ""
+)}
+
+  ${({ maxLines }) => maxLines === 1 ? "white-space: nowrap;" : ""}
+`;
+var ClipboardTextFieldValue = styled.span`
+  flex: 1;
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  word-break: ${({ wordBreakAll }) => wordBreakAll ? "break-all" : "normal"};
+  vertical-align: middle;
+
+  ${({ addLineClamp, maxLines }) => addLineClamp && maxLines ? `
+        ${lineClamp(maxLines).styles}
+        align-self: baseline;
+      ` : ""}
+
+  ${({ theme, typography }) => applyTypography(
+  theme,
+  (typography == null ? void 0 : typography.type) || "Body",
+  (typography == null ? void 0 : typography.size) || "ExtraSmall",
+  (typography == null ? void 0 : typography.color) || "inherit"
+)}
+`;
+
+export {
+  ClipboardTextField
+};

package/dist/{chunk-Y7W6NEED.js → chunk-O35HQFRI.js}

@@ -1,57 +1,57 @@
 import {
   Table
-} from "./chunk-XSE73A6Q.js";
+} from "./chunk-WC32NKES.js";
+import {
+  StringFilter,
+  getDefaultStringFilterState,
+  isStringFilterState
+} from "./chunk-ZSDLJZIK.js";
+import {
+  BooleanFilter,
+  getDefaultBooleanFilterState
+} from "./chunk-R2ARHEHI.js";
 import {
   DateFilter,
   getDefaultDateFilterState
-} from "./chunk-UTST75JR.js";
+} from "./chunk-HZ47L6US.js";
 import {
   EnumFilter,
   getDefaultEnumFilterState,
   isEnumFilterState
-} from "./chunk-4IR6IRNW.js";
+} from "./chunk-NTMO44CD.js";
 import {
   IdFilter,
   getDefaultIdFilterState,
   isIdFilterState
-} from "./chunk-L2APWDV2.js";
-import {
-  Popover
-} from "./chunk-XWH5OMCO.js";
-import {
-  StringFilter,
-  getDefaultStringFilterState,
-  isStringFilterState
-} from "./chunk-6NM6IXYH.js";
-import {
-  BooleanFilter,
-  getDefaultBooleanFilterState
-} from "./chunk-6B5ZLUMZ.js";
+} from "./chunk-KMVQQOJ3.js";
 import {
   LabelModerate
-} from "./chunk-YLERYYWF.js";
+} from "./chunk-XKCJPDD3.js";
+import {
+  Popover
+} from "./chunk-4CC2CDQS.js";
 import {
   Label
-} from "./chunk-BYSPGS6B.js";
+} from "./chunk-FZCKVTNU.js";
 import {
   Dropdown
-} from "./chunk-VAQBWNQQ.js";
+} from "./chunk-K3G4NMAH.js";
 import {
   Spacing
 } from "./chunk-E5DUKMCU.js";
 import {
   TextIconAligner
-} from "./chunk-PGBN4QPX.js";
+} from "./chunk-TJWGKORO.js";
 import {
   CardPageFullWidth
-} from "./chunk-KCCJEYLC.js";
+} from "./chunk-76YDQNQA.js";
 import {
   Button,
   StyledButton
-} from "./chunk-LQKIJF4I.js";
+} from "./chunk-4U3AAKMA.js";
 import {
   standardContentInset
-} from "./chunk-YBJVTNAP.js";
+} from "./chunk-POGNK25N.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";
@@ -398,7 +398,7 @@ function DataManagerTable(props) {
         {
           text: `Filter${numFiltersApplied > 0 ? ` | ${numFiltersApplied}` : ""}`,
           paddingY: "short",
-          icon: "Sort",
+          icon: { name: "Sort" },
           typography: { color: "c6Neutral" },
           onClick: () => setShowFilterPopover(!showFilterPopover)
         }

package/dist/{chunk-GJAG2D3Y.js → chunk-OAA7QSMX.js}

@@ -1,6 +1,10 @@
 // src/icons/PaperPlane.tsx
 import { jsx } from "@emotion/react/jsx-runtime";
-function PaperPlane() {
+function PaperPlane({
+  strokeWidth = "1",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
   return /* @__PURE__ */ jsx(
     "svg",
     {
@@ -13,8 +17,9 @@ function PaperPlane() {
         {
           d: "M5.10092 6.89819L6.93999 5.06257M11.5 0.5L0.5 4.16667L5.08333 6.91667L7.83333 11.5L11.5 0.5Z",
           stroke: "currentColor",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
+          strokeWidth,
+          strokeLinecap,
+          strokeLinejoin
         }
       )
     }

package/dist/{chunk-7ZMAKSA7.js → chunk-OAGVIKRU.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-H2TSUAW4.js → chunk-OBBLAFLK.js}

@@ -1,9 +1,9 @@
 import {
   standardBorderRadius
-} from "./chunk-YBJVTNAP.js";
+} from "./chunk-POGNK25N.js";
 import {
   themeOr
-} from "./chunk-HYUF4RXZ.js";
+} from "./chunk-N4C6SL6K.js";
 
 // src/components/ProgressBar.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-E6A3UWLO.js → chunk-OBHZUSJY.js}

@@ -1,15 +1,15 @@
 import {
   InfoIconTooltip
-} from "./chunk-NHRJSG5K.js";
+} from "./chunk-BXJM6PXH.js";
 import {
   Label
-} from "./chunk-UGHP4KVZ.js";
+} from "./chunk-P2OCWRMQ.js";
 import {
   link
-} from "./chunk-G5IVQ4O3.js";
+} from "./chunk-FZUV52PP.js";
 import {
   Icon
-} from "./chunk-NCLVA6JY.js";
+} from "./chunk-DV6LJQJW.js";
 import {
   addCommasToDigits
 } from "./chunk-EDN2QDCB.js";

package/dist/{chunk-DHL27UIK.cjs → chunk-OHVWRWH5.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkC7EMB4JVcjs = require('./chunk-C7EMB4JV.cjs');
+var _chunkMABO6YJKcjs = require('./chunk-MABO6YJK.cjs');
 
 
 var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
@@ -30,7 +30,7 @@ function Radio({
         onChange: handleRadioClick
       }
     ),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkC7EMB4JVcjs.Label, { children: option.label })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkMABO6YJKcjs.Label, { children: option.label })
   ] }, option.label)) });
 }
 var RadioContainer = _styled2.default.div`

package/dist/{chunk-TSYLKHL2.js → chunk-OJOYEIU2.js}

@@ -1,6 +1,10 @@
 // src/icons/Code.tsx
 import { jsx } from "@emotion/react/jsx-runtime";
-function Code() {
+function Code({
+  strokeWidth = "1.5",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
   return /* @__PURE__ */ jsx(
     "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-KX3WMRSO.js → chunk-OJSXSEA4.js}

@@ -1,6 +1,10 @@
 // src/icons/Dollar.tsx
 import { jsx } from "@emotion/react/jsx-runtime";
-function Dollar() {
+function Dollar({
+  strokeWidth = "1.125",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
   return /* @__PURE__ */ jsx(
     "svg",
     {
@@ -13,9 +17,9 @@ function Dollar() {
         {
           d: "M7.90922 2.61607H5.00156M5.00156 2.61607H3.57422C2.26039 2.61607 1.19531 3.48552 1.19531 4.55804C1.19531 5.63055 2.26039 6.5 3.57422 6.5H5.00156M5.00156 2.61607V1.0625M5.00156 2.61607V6.5M5.00156 6.5H6.42891C7.74274 6.5 8.80781 7.36945 8.80781 8.44196C8.80781 9.51448 7.74274 10.3839 6.42891 10.3839H5.00156M5.00156 6.5V10.3839M5.00156 10.3839H1.61833M5.00156 10.3839V11.9375",
           stroke: "currentColor",
-          strokeWidth: "1.125",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
+          strokeWidth,
+          strokeLinecap,
+          strokeLinejoin
         }
       )
     }

package/dist/{chunk-7Q6ORFK3.cjs → chunk-OMCXUPHV.cjs}

@@ -1,12 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkIRHZP2Z7cjs = require('./chunk-IRHZP2Z7.cjs');
+var _chunk5Y5GUICOcjs = require('./chunk-5Y5GUICO.cjs');
 
 
-var _chunkOVJZVL57cjs = require('./chunk-OVJZVL57.cjs');
+var _chunkUBC75VRUcjs = require('./chunk-UBC75VRU.cjs');
 
 
-var _chunkSZSK5ISJcjs = require('./chunk-SZSK5ISJ.cjs');
+var _chunkQK32JW3Ncjs = require('./chunk-QK32JW3N.cjs');
 
 
 
@@ -21,11 +21,11 @@ function LabelModerateString(props) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledLabelModerate, _chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, rest), { children }));
 }
 function getPropDefaults(props) {
-  return _chunkIRHZP2Z7cjs.getPropDefaultsBase.call(void 0, props, { as: props.tag || "span" });
+  return _chunk5Y5GUICOcjs.getPropDefaultsBase.call(void 0, props, { as: props.tag || "span" });
 }
 var StyledLabelModerate = _styled2.default.span`
-  ${({ theme, size, colorProp }) => _chunkSZSK5ISJcjs.applyTypography.call(void 0, theme, "Label Moderate", size, colorProp)}
-  ${_chunkOVJZVL57cjs.typographyStyles}
+  ${({ theme, size, colorProp }) => _chunkQK32JW3Ncjs.applyTypography.call(void 0, theme, "Label Moderate", size, colorProp)}
+  ${_chunkUBC75VRUcjs.typographyStyles}
 `;
 
 

package/dist/{chunk-ZQ5CXXIE.js → chunk-ON3L4ZE6.js}

@@ -1,9 +1,9 @@
 import {
   SingleCodeInput
-} from "./chunk-OAU5Z4HG.js";
+} from "./chunk-E572HEDP.js";
 import {
   textInputBorderColor
-} from "./chunk-UGHP4KVZ.js";
+} from "./chunk-P2OCWRMQ.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/{chunk-UMU7TYAN.cjs → chunk-ORWZTMF2.cjs}

@@ -1,22 +1,23 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkB5JDB6M7cjs = require('./chunk-B5JDB6M7.cjs');
+var _chunkH6XTEIHQcjs = require('./chunk-H6XTEIHQ.cjs');
 
 
 
 var _chunkKS6GHRZIcjs = require('./chunk-KS6GHRZI.cjs');
 
 
-var _chunkOQEP7VDDcjs = require('./chunk-OQEP7VDD.cjs');
+var _chunkD262WAOVcjs = require('./chunk-D262WAOV.cjs');
 
 
 var _chunk7PRNB5U5cjs = require('./chunk-7PRNB5U5.cjs');
 
 
-var _chunk7EIZIKLRcjs = require('./chunk-7EIZIKLR.cjs');
+var _chunk6DWDBCUJcjs = require('./chunk-6DWDBCUJ.cjs');
 
 // src/components/Icon/Icon.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');
 function Icon({
   className,
@@ -27,13 +28,15 @@ function Icon({
   mr: mrProp = 0,
   ml: mlProp = 0,
   color = void 0,
-  verticalAlign = "middle"
+  verticalAlign = "middle",
+  iconProps
 }) {
-  const IconComponent = _chunkB5JDB6M7cjs.icons_exports[name] || null;
-  const w = parseFloat((width / _chunkOQEP7VDDcjs.rootFontSizePx).toFixed(2));
-  const mr = typeof mrProp === "number" ? `${parseFloat((mrProp / _chunkOQEP7VDDcjs.rootFontSizePx).toFixed(2))}em` : mrProp;
-  const ml = typeof mlProp === "number" ? `${parseFloat((mlProp / _chunkOQEP7VDDcjs.rootFontSizePx).toFixed(2))}em` : mlProp;
-  const va = typeof verticalAlign === "string" ? verticalAlign : parseFloat((verticalAlign / _chunkOQEP7VDDcjs.rootFontSizePx).toFixed(2));
+  const IconComponent = _chunkH6XTEIHQcjs.iconMap[name];
+  const w = parseFloat((width / _chunkD262WAOVcjs.rootFontSizePx).toFixed(2));
+  const mr = typeof mrProp === "number" ? `${parseFloat((mrProp / _chunkD262WAOVcjs.rootFontSizePx).toFixed(2))}em` : mrProp;
+  const ml = typeof mlProp === "number" ? `${parseFloat((mlProp / _chunkD262WAOVcjs.rootFontSizePx).toFixed(2))}em` : mlProp;
+  const va = typeof verticalAlign === "string" ? verticalAlign : parseFloat((verticalAlign / _chunkD262WAOVcjs.rootFontSizePx).toFixed(2));
+  const icon = _react2.default.createElement(IconComponent, iconProps, null);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     IconContainer,
     {
@@ -45,7 +48,7 @@ function Icon({
       verticalAlign: va,
       fontColor: color,
       "data-tutorial-tip": tutorialStep == null ? void 0 : tutorialStep.toString(),
-      children: IconComponent ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, IconComponent, {}) : null
+      children: icon
     }
   );
 }
@@ -63,10 +66,10 @@ var IconContainer = _styled2.default.span`
   vertical-align: ${({ verticalAlign }) => _chunk7PRNB5U5cjs.isString.call(void 0, verticalAlign) ? verticalAlign : `${verticalAlign}em`};
 
   ${({ theme, fontColor }) => {
-  const color = _chunk7EIZIKLRcjs.getFontColor.call(void 0, theme, fontColor, "inherit");
+  const color = _chunk6DWDBCUJcjs.getFontColor.call(void 0, theme, fontColor, "inherit");
   return `
     svg, path {
-      color: ${_chunk7EIZIKLRcjs.getFontColor.call(void 0, theme, fontColor, "inherit")};
+      color: ${_chunk6DWDBCUJcjs.getFontColor.call(void 0, theme, fontColor, "inherit")};
 
       /* 
         Provide a way for an SVG to invert relative to a specified color for
@@ -80,10 +83,10 @@ var IconContainer = _styled2.default.span`
       */
 
       .${_chunkKS6GHRZIcjs.invertFillColor} {
-        fill: ${fontColor ? theme.hcNeutralFromBg(color) : "currentColor"};
+        fill: ${color ? theme.hcNeutralFromBg(color) : "currentColor"};
       }
       .${_chunkKS6GHRZIcjs.invertStrokeColor} {
-        stroke: ${fontColor ? theme.hcNeutralFromBg(color) : "currentColor"};
+        stroke: ${color ? theme.hcNeutralFromBg(color) : "currentColor"};
       }
     }
   `;

package/dist/{chunk-V5GQM24U.js → chunk-OTVNFRHW.js}

@@ -1,6 +1,14 @@
+import {
+  invertStrokeColor
+} from "./chunk-VI6WTKMV.js";
+
 // src/icons/CircleCheck.tsx
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
-function CircleCheck() {
+function CircleCheck({
+  strokeWidth = "1.14286",
+  strokeLinecap = "butt",
+  strokeLinejoin = "miter"
+}) {
   return /* @__PURE__ */ jsxs(
     "svg",
     {
@@ -14,8 +22,10 @@ function CircleCheck() {
           "path",
           {
             d: "M4.57153 7.98591L6.65379 10.0682C6.65379 10.0682 9.08556 7.6364 11.0076 5.71436",
-            stroke: "black",
-            strokeWidth: "1.14286"
+            className: invertStrokeColor,
+            strokeWidth,
+            strokeLinecap,
+            strokeLinejoin
           }
         )
       ]

package/dist/{chunk-UGHP4KVZ.js → chunk-P2OCWRMQ.js}

@@ -4,13 +4,14 @@ import {
 import {
   standardBorderRadius,
   subtext
-} from "./chunk-YBJVTNAP.js";
+} from "./chunk-POGNK25N.js";
 import {
   applyTypography
-} from "./chunk-FH6BM3M7.js";
+} from "./chunk-TLFK5GBE.js";
 import {
+  getColor,
   themeOr
-} from "./chunk-HYUF4RXZ.js";
+} from "./chunk-N4C6SL6K.js";
 
 // src/styles/fields.tsx
 import { css } from "@emotion/react";
@@ -56,14 +57,26 @@ var textInputBorderColorFocused = ({ theme }) => themeOr(theme.hcNeutral, theme.
 var textInputActiveStyles = ({
   theme,
   paddingLeftPx,
-  paddingRightPx
-}) => css`
-  border-color: ${textInputBorderColorFocused({ theme })};
-  border-width: 2px;
-  padding: ${textInputPaddingPx - 1}px;
-  ${paddingLeftPx ? `padding-left: ${paddingLeftPx - 1}px;` : ""}
-  ${paddingRightPx ? `padding-right: ${paddingRightPx - 1}px;` : ""}
-`;
+  paddingRightPx,
+  activeOutline,
+  activeOutlineColor
+}) => {
+  if (activeOutline) {
+    const outlineColor = activeOutlineColor ? getColor(theme, activeOutlineColor) : textInputBorderColorFocused({ theme });
+    return css`
+      outline: 2px solid ${outlineColor};
+      outline-offset: 2px;
+      caret-color: ${outlineColor};
+    `;
+  }
+  return css`
+    border-color: ${textInputBorderColorFocused({ theme })};
+    border-width: 2px;
+    padding: ${textInputPaddingPx - 1}px;
+    ${paddingLeftPx ? `padding-left: ${paddingLeftPx - 1}px;` : ""}
+    ${paddingRightPx ? `padding-right: ${paddingRightPx - 1}px;` : ""}
+  `;
+};
 var defaultTextInputTypography = {
   type: "Body",
   size: "Small",
@@ -76,6 +89,10 @@ var textInputStyle = ({
   hasError,
   paddingLeftPx,
   paddingRightPx,
+  paddingTopPx,
+  paddingBottomPx,
+  activeOutline,
+  activeOutlineColor,
   typography,
   borderRadius
 }) => {
@@ -93,6 +110,8 @@ var textInputStyle = ({
   padding: ${textInputPaddingPx - (hasError ? 1 : 0)}px;
   ${paddingLeftPx ? `padding-left: ${paddingLeftPx - (hasError ? 1 : 0)}px;` : ""}
   ${paddingRightPx ? `padding-right: ${paddingRightPx - (hasError ? 1 : 0)}px;` : ""}
+  ${paddingTopPx ? `padding-top: ${paddingTopPx - (hasError ? 1 : 0)}px;` : ""}
+  ${paddingBottomPx ? `padding-bottom: ${paddingBottomPx - (hasError ? 1 : 0)}px;` : ""}
   border-style: solid;
   border-width: ${hasError ? "2" : "1"}px;
   border-color: ${hasError ? theme.danger : textInputBorderColor({ theme })};
@@ -112,10 +131,22 @@ var textInputStyle = ({
   &:focus,
   &:active,
   &:has(:focus) {
-    ${textInputActiveStyles({ theme, paddingLeftPx, paddingRightPx })}
+    ${textInputActiveStyles({
+    theme,
+    paddingLeftPx,
+    paddingRightPx,
+    activeOutline,
+    activeOutlineColor
+  })}
   }
 
-  ${active && textInputActiveStyles({ theme, paddingLeftPx, paddingRightPx })}
+  ${active && textInputActiveStyles({
+    theme,
+    paddingLeftPx,
+    paddingRightPx,
+    activeOutline,
+    activeOutlineColor
+  })}
 
   &::placeholder {
     color: ${textInputPlaceholderColor({ theme })};