@lightsparkdev/ui 1.0.12 → 1.0.14

package/dist/{chunk-RUJJ7EDO.cjs → chunk-3RNPU5L4.cjs}

@@ -1,12 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkAL5EN3OScjs = require('./chunk-AL5EN3OS.cjs');
+var _chunkX6FYQTZ6cjs = require('./chunk-X6FYQTZ6.cjs');
 
 
-var _chunkSP3BMGMUcjs = require('./chunk-SP3BMGMU.cjs');
+var _chunkNAFB5UYYcjs = require('./chunk-NAFB5UYY.cjs');
 
 
-var _chunk6PQGI7PYcjs = require('./chunk-6PQGI7PY.cjs');
+var _chunkYWBNVZS7cjs = require('./chunk-YWBNVZS7.cjs');
 
 
 var _chunkEZNRFABOcjs = require('./chunk-EZNRFABO.cjs');
@@ -14,19 +14,19 @@ var _chunkEZNRFABOcjs = require('./chunk-EZNRFABO.cjs');
 
 
 
-var _chunkAIJ4JHXBcjs = require('./chunk-AIJ4JHXB.cjs');
+var _chunkWIIDMFXRcjs = require('./chunk-WIIDMFXR.cjs');
 
 
-var _chunkRROZ5XYPcjs = require('./chunk-RROZ5XYP.cjs');
+var _chunkZFJVBBROcjs = require('./chunk-ZFJVBBRO.cjs');
 
 
 
-var _chunkSWQDRB3Acjs = require('./chunk-SWQDRB3A.cjs');
+var _chunkRUDXRW4Rcjs = require('./chunk-RUDXRW4R.cjs');
 
 
 
 
-var _chunkRBWRQTGBcjs = require('./chunk-RBWRQTGB.cjs');
+var _chunk5YGED5IJcjs = require('./chunk-5YGED5IJ.cjs');
 
 
 var _chunkKW3JYLRIcjs = require('./chunk-KW3JYLRI.cjs');
@@ -65,7 +65,7 @@ function Table({
   emptyState,
   clipboardCallbacks
 }) {
-  const navigate = _chunkRBWRQTGBcjs.useNavigate.call(void 0, );
+  const navigate = _chunk5YGED5IJcjs.useNavigate.call(void 0, );
   const { canWriteToClipboard, writeTextToClipboard } = _chunkEZNRFABOcjs.useClipboard.call(void 0, clipboardCallbacks);
   const onClickCopy = _react3.useCallback.call(void 0, 
     (value) => (event) => {
@@ -79,7 +79,7 @@ function Table({
       Header: typeof column.Header === "string" ? column.Header : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
         column.Header.name,
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkAL5EN3OScjs.InfoIconTooltip,
+          _chunkX6FYQTZ6cjs.InfoIconTooltip,
           {
             id: `tooltip-${column.Header.name}`,
             content: column.Header.tooltip || "",
@@ -92,7 +92,7 @@ function Table({
         let content = value;
         let icon = null;
         if (isObjectCell(value)) {
-          icon = value.icon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRROZ5XYPcjs.Icon, { name: value.icon, width: 14, mr: 4, color: "c4Neutral" }) : null;
+          icon = value.icon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZFJVBBROcjs.Icon, { name: value.icon, width: 14, mr: 4, color: "c4Neutral" }) : null;
           if (isMultilineCell(value)) {
             content = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, LineClampSpan, { children: [
               icon,
@@ -112,7 +112,7 @@ function Table({
               onClick: onClickCopy(value.text),
               role: "button",
               tabIndex: 0,
-              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRROZ5XYPcjs.Icon, { name: "Copy", width: 16, mr: 12 })
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZFJVBBROcjs.Icon, { name: "Copy", width: 16, mr: 12 })
             }
           );
           return value.link ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, LinkClipboardCell, { children: [
@@ -126,7 +126,7 @@ function Table({
                   e.stopPropagation();
                 },
                 children: [
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRROZ5XYPcjs.Icon, { name: "LinkIcon", width: 12 }),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZFJVBBROcjs.Icon, { name: "LinkIcon", width: 12 }),
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LinkCellContent, { children: content })
                 ]
               }
@@ -134,7 +134,7 @@ function Table({
             copyButton
           ] }) : value.to ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, HoverableCellWrapper, { children: [
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-              _chunkRBWRQTGBcjs.Link,
+              _chunk5YGED5IJcjs.Link,
               {
                 to: value.to,
                 params: value.toParams,
@@ -160,12 +160,12 @@ function Table({
                 e.stopPropagation();
               },
               children: [
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRROZ5XYPcjs.Icon, { name: "LinkIcon", width: 12 }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZFJVBBROcjs.Icon, { name: "LinkIcon", width: 12 }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LinkCellContent, { children: content })
               ]
             }
           ) : value.to ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, HoverableCellWrapper, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-            _chunkRBWRQTGBcjs.Link,
+            _chunk5YGED5IJcjs.Link,
             {
               to: value.to,
               params: value.toParams,
@@ -190,7 +190,7 @@ function Table({
           return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, HoverableCellWrapper, { children: [
             icon,
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _chunk6PQGI7PYcjs.ClipboardTextField,
+              _chunkYWBNVZS7cjs.ClipboardTextField,
               {
                 value: value.text,
                 elide: maxChars ? {
@@ -220,7 +220,7 @@ function Table({
       if ((onClickRowResult == null ? void 0 : onClickRowResult.link) || (onClickRowResult == null ? void 0 : onClickRowResult.to) && newTabKey) {
         let link = onClickRowResult == null ? void 0 : onClickRowResult.link;
         if (!link) {
-          link = _chunkRBWRQTGBcjs.replaceParams.call(void 0, onClickRowResult.to, onClickRowResult.params);
+          link = _chunk5YGED5IJcjs.replaceParams.call(void 0, onClickRowResult.to, onClickRowResult.params);
         }
         const target = newTabKey ? "_blank" : void 0;
         window.open(link, target);
@@ -277,13 +277,13 @@ function Table({
       }))
     ] })),
     emptyState,
-    loading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkSP3BMGMUcjs.Loading, {})
+    loading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNAFB5UYYcjs.Loading, {})
   ] });
 }
 var TableWrapper = _styled2.default.div`
   position: relative;
   min-height: 300px;
-  ${_chunkAIJ4JHXBcjs.overflowAutoWithoutScrollbars}
+  ${_chunkWIIDMFXRcjs.overflowAutoWithoutScrollbars}
 `;
 var hoverCellStyles = _react.css`
   cursor: pointer;
@@ -323,7 +323,7 @@ var CopyButton = _styled2.default.span`
   display: inline-table;
 `;
 var LineClampSpan = _styled2.default.span`
-  ${_chunkAIJ4JHXBcjs.lineClamp.call(void 0, 2)}
+  ${_chunkWIIDMFXRcjs.lineClamp.call(void 0, 2)}
 `;
 var cellPaddingPx = 15;
 var StyledTable = _styled2.default.table`
@@ -332,16 +332,16 @@ var StyledTable = _styled2.default.table`
   width: 100%;
 
   ${_chunkKW3JYLRIcjs.bp.lg(`
-    padding-left: ${_chunkSWQDRB3Acjs.standardContentInset.lgPx}px;
-    padding-right: ${_chunkSWQDRB3Acjs.standardContentInset.lgPx}px;
+    padding-left: ${_chunkRUDXRW4Rcjs.standardContentInset.lgPx}px;
+    padding-right: ${_chunkRUDXRW4Rcjs.standardContentInset.lgPx}px;
   `)}
   ${_chunkKW3JYLRIcjs.bp.sm(`
-    padding-left: ${_chunkSWQDRB3Acjs.standardContentInset.smPx}px;
-    padding-right: ${_chunkSWQDRB3Acjs.standardContentInset.smPx}px;
+    padding-left: ${_chunkRUDXRW4Rcjs.standardContentInset.smPx}px;
+    padding-right: ${_chunkRUDXRW4Rcjs.standardContentInset.smPx}px;
   `)}
   ${_chunkKW3JYLRIcjs.bp.minSmMaxLg(`
-    padding-left: ${_chunkSWQDRB3Acjs.standardContentInset.minSmMaxLgPx}px;
-    padding-right: ${_chunkSWQDRB3Acjs.standardContentInset.minSmMaxLgPx}px;
+    padding-left: ${_chunkRUDXRW4Rcjs.standardContentInset.minSmMaxLgPx}px;
+    padding-right: ${_chunkRUDXRW4Rcjs.standardContentInset.minSmMaxLgPx}px;
   `)}
 
   th {
@@ -365,8 +365,8 @@ var StyledTable = _styled2.default.table`
     cursor: ${({ clickable }) => clickable ? "pointer" : "default"};
     position: relative;
 
-    &:hover td:first-child:before ${_chunkAIJ4JHXBcjs.ignoreSSRWarning} {
-      ${_chunkSWQDRB3Acjs.standardBorderRadius.call(void 0, 16)}
+    &:hover td:first-child:before ${_chunkWIIDMFXRcjs.ignoreSSRWarning} {
+      ${_chunkRUDXRW4Rcjs.standardBorderRadius.call(void 0, 16)}
       content: "";
       position: absolute;
       /* Position offsets inside trs do not properly follow relatively positioned

package/dist/{chunk-KN5BA5GV.js → chunk-4COBLNXX.js}

@@ -1,9 +1,9 @@
 import {
   GlobalStyles
-} from "./chunk-X4AII3DN.js";
+} from "./chunk-O25FTPZF.js";
 import {
   themes
-} from "./chunk-HCKCJR5Y.js";
+} from "./chunk-QNPCRFUV.js";
 
 // src/components/LightsparkProvider.tsx
 import { ThemeProvider } from "@emotion/react";

package/dist/{chunk-WUPMVX4G.js → chunk-4EXNT44R.js}

@@ -1,37 +1,37 @@
 import {
   Loading
-} from "./chunk-24B3POUB.js";
+} from "./chunk-XDZPMJZG.js";
 import {
   UnstyledButton
-} from "./chunk-HGKK6OQJ.js";
+} from "./chunk-I5WDNJY3.js";
 import {
   Tooltip
-} from "./chunk-CIPNSK37.js";
+} from "./chunk-XADWD755.js";
 import {
   Icon
-} from "./chunk-OFZVJPBJ.js";
+} from "./chunk-RMZQSXO2.js";
 import {
   getFocusOutline
-} from "./chunk-4H7CTVLY.js";
+} from "./chunk-RNCUEVKR.js";
 import {
   Link
-} from "./chunk-PVEDEZJZ.js";
+} from "./chunk-UUKJNNJ5.js";
 import {
   renderTypography
-} from "./chunk-OUVY3GFY.js";
+} from "./chunk-EFEPUABF.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
 import {
   applyTypography
-} from "./chunk-XTOBN7SG.js";
+} from "./chunk-XBZNPA3L.js";
 import {
   getBackgroundColor,
   isThemeOrColorKey
-} from "./chunk-HCKCJR5Y.js";
+} from "./chunk-QNPCRFUV.js";
 import {
   TokenSize
-} from "./chunk-AZSSORPU.js";
+} from "./chunk-EWNQ3Z3L.js";
 import {
   __objRest,
   __spreadProps,
@@ -56,7 +56,8 @@ var buttonKinds = [
   "linkLight",
   "danger",
   "warning",
-  "tertiary"
+  "tertiary",
+  "quaternary"
 ];
 var roundPaddingsX = {
   [TokenSize.ExtraSmall]: 10,
@@ -207,7 +208,7 @@ function Button(props) {
     borderRadius
   } = resolveProps(props, theme);
   const tooltipId = useRef(uniqueId());
-  const iconSize = size === "ExtraSmall" ? 12 : 16;
+  const defaultIconWidth = size === "ExtraSmall" ? 12 : 16;
   let currentIcon = null;
   if (loading) {
     currentIcon = /* @__PURE__ */ jsx(
@@ -217,7 +218,7 @@ function Button(props) {
         text,
         typography,
         kind,
-        children: /* @__PURE__ */ jsx(Loading, { size: iconSize, center: false, kind: loadingKind })
+        children: /* @__PURE__ */ jsx(Loading, { size: defaultIconWidth, center: false, kind: loadingKind })
       }
     );
   } else if (icon) {
@@ -228,7 +229,13 @@ function Button(props) {
         text,
         typography,
         kind,
-        children: /* @__PURE__ */ jsx(Icon, __spreadProps(__spreadValues({}, icon), { width: iconSize, color: typography.color }))
+        children: /* @__PURE__ */ jsx(
+          Icon,
+          __spreadProps(__spreadValues({}, icon), {
+            width: icon.width || defaultIconWidth,
+            color: typography.color
+          })
+        )
       }
     );
   }
@@ -284,11 +291,10 @@ function Button(props) {
     isLoading: loading,
     disabled: disabled || loading,
     css: {
-      marginTop: mt ? `${mt}px` : void 0,
-      marginLeft: ml ? `${ml}px` : void 0
+      marginTop: mt ? typeof mt === "number" ? `${mt}px` : "auto" : void 0,
+      marginLeft: ml ? typeof ml === "number" ? `${ml}px` : "auto" : void 0
     },
     newTab,
-    text,
     borderRadius,
     zIndex
   };
@@ -381,6 +387,9 @@ var buttonStyle = ({
   `;
 };
 var ButtonIcon = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
   ${({ iconSide, kind, typography }) => `${iconSide}: ${getPaddingX(typography.size, kind, false)}px;`}
 `;
 var StyledButton = styled(UnstyledButton)`

package/dist/{chunk-H4K2ZEF4.js → chunk-4JIHSBUL.js}

@@ -1,62 +1,68 @@
 import {
   Headline
-} from "./chunk-QVOEB2KR.js";
+} from "./chunk-KH6LR2RB.js";
 import {
   StyledSelect
-} from "./chunk-PEOEIN2Q.js";
+} from "./chunk-CARJHSRB.js";
 import {
   StyledFileInput
-} from "./chunk-OPQ3OYOA.js";
+} from "./chunk-TTOEZCKH.js";
+import {
+  Spacing
+} from "./chunk-E5DUKMCU.js";
 import {
   TextInputHalfRow
-} from "./chunk-4RHUIDWO.js";
+} from "./chunk-M5VGKEOK.js";
 import {
   ToggleContainer
-} from "./chunk-LXPA6OZD.js";
+} from "./chunk-RW5RZAVN.js";
 import {
   formButtonTopMarginStyle,
   inputSpacingPx
-} from "./chunk-IAGH4CKJ.js";
+} from "./chunk-GEE2G7BL.js";
 import {
   StyledButtonRow
-} from "./chunk-Z6TZF3W2.js";
+} from "./chunk-JYEUBM2E.js";
 import {
   ButtonSelector
-} from "./chunk-WUPMVX4G.js";
+} from "./chunk-4EXNT44R.js";
 import {
   LoadingWrapper
-} from "./chunk-24B3POUB.js";
+} from "./chunk-XDZPMJZG.js";
 import {
   Checkbox
-} from "./chunk-PWLKDT2K.js";
+} from "./chunk-SPIRL6S7.js";
 import {
   toReactNodesWithTypographyMap
-} from "./chunk-RT7X3ZOO.js";
+} from "./chunk-6GJZZ2PX.js";
 import {
   toReactNodes
-} from "./chunk-SOGADTSR.js";
+} from "./chunk-3NZOR3KT.js";
 import {
   icon
 } from "./chunk-FZUV52PP.js";
 import {
   ClipboardTextField
-} from "./chunk-FC3BTZUR.js";
+} from "./chunk-H3AKZTZT.js";
 import {
   pxToRems
-} from "./chunk-AV62WHL7.js";
+} from "./chunk-A4MP3LYH.js";
 import {
   mcBold,
   standardBorderRadius,
   standardCardShadow,
   standardCardShadowHard,
   standardContentInset
-} from "./chunk-4H7CTVLY.js";
+} from "./chunk-RNCUEVKR.js";
 import {
   Link
-} from "./chunk-PVEDEZJZ.js";
+} from "./chunk-UUKJNNJ5.js";
+import {
+  select
+} from "./chunk-YMNSXZ5D.js";
 import {
   getColor
-} from "./chunk-HCKCJR5Y.js";
+} from "./chunk-QNPCRFUV.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";
@@ -277,6 +283,12 @@ var CardFormFieldLabel = styled.label`
     margin-top: ${fieldLabelMarginPx}px;
   }
 `;
+var CardFormNearButtonColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  gap: ${Spacing.px.sm};
+`;
 function CardFormDataFieldValue({ text }) {
   return /* @__PURE__ */ jsx(StyledCardFormDataFieldValue, { children: /* @__PURE__ */ jsx(ClipboardTextField, { value: text, icon: true, iconSide: "right" }) });
 }
@@ -417,7 +429,7 @@ var StyledCardFormStyle = ({
         margin-top: 24px;
       }
 
-      & > ${ButtonSelector()} {
+      & > ${ButtonSelector()}, & > ${select(CardFormNearButtonColumn)} {
         ${formButtonTopMarginStyle}
       }
     }
@@ -498,6 +510,7 @@ export {
   CardForm,
   CardFormButtonRow,
   CardFormFieldLabel,
+  CardFormNearButtonColumn,
   CardFormDataFieldValue,
   CardFormFullWidth,
   CardFormFullTopContent,

package/dist/{chunk-DDRYWSRC.cjs → chunk-4NV7CLNV.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _chunkAIJ4JHXBcjs = require('./chunk-AIJ4JHXB.cjs');
+var _chunkWIIDMFXRcjs = require('./chunk-WIIDMFXR.cjs');
 
 // src/components/StatusIndicator.tsx
 var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
@@ -15,7 +15,7 @@ function StatusIndicator({
 }
 var StyledStatusIndicator = _styled2.default.div`
   color: ${({ theme, color }) => theme[color]};
-  font-size: ${({ size }) => _chunkAIJ4JHXBcjs.pxToRems.call(void 0, size)};
+  font-size: ${({ size }) => _chunkWIIDMFXRcjs.pxToRems.call(void 0, size)};
   font-weight: ${({ fontWeight }) => fontWeight};
 `;
 

package/dist/{chunk-B5GAL6FT.cjs → chunk-4W77EYO7.cjs}

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkCBPXRCT4cjs = require('./chunk-CBPXRCT4.cjs');
+var _chunkKTXJ54RRcjs = require('./chunk-KTXJ54RR.cjs');
 
 
 
-var _chunkYFRUEGETcjs = require('./chunk-YFRUEGET.cjs');
+var _chunkSL5VIBXUcjs = require('./chunk-SL5VIBXU.cjs');
 
 
 
@@ -13,12 +13,12 @@ var _chunkYM5JDZDQcjs = require('./chunk-YM5JDZDQ.cjs');
 // src/components/typography/Body.tsx
 var _jsxruntime = require('@emotion/react/jsx-runtime');
 function Body(props) {
-  const propsWithDefaults = _chunkYFRUEGETcjs.getPropDefaults.call(void 0, props);
+  const propsWithDefaults = _chunkSL5VIBXUcjs.getPropDefaults.call(void 0, props);
   let reactNodes = props.children || null;
   if (props.content) {
-    reactNodes = _chunkCBPXRCT4cjs.toReactNodes.call(void 0, props.content);
+    reactNodes = _chunkKTXJ54RRcjs.toReactNodes.call(void 0, props.content);
   }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYFRUEGETcjs.StyledBody, _chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, propsWithDefaults), { children: reactNodes }));
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkSL5VIBXUcjs.StyledBody, _chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, propsWithDefaults), { children: reactNodes }));
 }
 
 

package/dist/{chunk-HAXWNU7K.cjs → chunk-4YTADDBX.cjs}

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkKHCCPRY7cjs = require('./chunk-KHCCPRY7.cjs');
+var _chunkBVRNVECAcjs = require('./chunk-BVRNVECA.cjs');
 
 
-var _chunkKOU32XJ2cjs = require('./chunk-KOU32XJ2.cjs');
+var _chunkLHZFHS6Ucjs = require('./chunk-LHZFHS6U.cjs');
 
 
 
@@ -25,7 +25,7 @@ function SatoshiInput(_a) {
   ]);
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react.Fragment, { children: [
     label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkKHCCPRY7cjs.SatoshiInputLabel,
+      _chunkBVRNVECAcjs.SatoshiInputLabel,
       {
         text: label.text,
         availableSats: label.availableSats,
@@ -33,7 +33,7 @@ function SatoshiInput(_a) {
       }
     ),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkKOU32XJ2cjs.CommaNumberInput_default,
+      _chunkLHZFHS6Ucjs.CommaNumberInput_default,
       _chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {
         placeholder: "SATs"
       }, rest), {

package/dist/{chunk-5SJB7TBQ.js → chunk-56E2UGCA.js}

@@ -8,7 +8,11 @@ function Flex({
   column = false,
   children,
   onClick,
-  as = "div"
+  as = "div",
+  overflow,
+  whiteSpace,
+  mr,
+  ml
 }) {
   const justify = justifyProp ? justifyProp : center ? "center" : "flex-start";
   const align = alignProp ? alignProp : center ? "center" : "flex-start";
@@ -21,17 +25,26 @@ function Flex({
       as,
       onClick,
       cursorProp: onClick ? "pointer" : "unset",
+      overflowProp: overflow,
+      whiteSpace,
+      mr,
+      ml,
       children
     }
   );
 }
 var StyledFlex = styled.div`
   display: flex;
+  text-overflow: ellipsis;
 
   ${({ column }) => column && `flex-direction: column;`}
   ${({ justify }) => `justify-content: ${justify};`}
   ${({ align }) => `align-items: ${align};`}
   ${({ cursorProp }) => `cursor: ${cursorProp};`}
+  ${({ overflowProp }) => overflowProp ? `overflow: ${overflowProp}; max-width: 100%;` : ""}
+  ${({ whiteSpace }) => whiteSpace ? `white-space: ${whiteSpace};` : ""}
+  ${({ mr }) => mr ? `margin-right: ${typeof mr === "number" ? `${mr}px` : mr};` : ""}
+  ${({ ml }) => ml ? `margin-left: ${typeof ml === "number" ? `${ml}px` : ml};` : ""}
 `;
 
 export {