@ultraviolet/ui 1.27.3 → 1.29.0

package/dist/src/components/Popup/index.js

@@ -14,80 +14,38 @@ function noop() {}
 const StyledPopup = /*#__PURE__*/_styled('div', {
   shouldForwardProp: prop => !['maxWidth', 'positions', 'reverseAnimation', 'maxHeight', 'animationDuration', 'isDialog'].includes(prop),
   target: "e4h1g861"
-})("background:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.colors.neutral.backgroundStronger;
-}, ";color:", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.colors.neutral.textStronger;
-}, ";border-radius:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.radii.default;
-}, ";padding:", _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return `${theme.space['0.5']} ${theme.space['1']}`;
-}, ";text-align:center;position:absolute;max-width:", _ref5 => {
-  let {
-    maxWidth
-  } = _ref5;
-  return typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth;
-}, ";max-height:", _ref6 => {
-  let {
-    maxHeight
-  } = _ref6;
-  return typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;
-}, ";overflow:", _ref7 => {
-  let {
-    maxHeight
-  } = _ref7;
-  return maxHeight ? 'auto' : undefined;
-}, ";overflow-wrap:break-word;font-size:0.8rem;inset:0 auto auto 0;top:0;left:0;z-index:1;transform:", _ref8 => {
-  let {
-    positions
-  } = _ref8;
-  return positions.popupPosition;
-}, ";animation:", _ref9 => {
-  let {
-    positions,
-    reverseAnimation,
-    maxHeight,
-    animationDuration
-  } = _ref9;
-  return maxHeight || animationDuration === 0 || animationDuration === undefined ? undefined : /*#__PURE__*/css(animationDuration, "ms ", !reverseAnimation ? animation(positions) : exitAnimation(positions), " forwards;");
-}, ";&[data-has-arrow='true']{&::after{content:' ';position:absolute;top:", _ref10 => {
-  let {
-    positions
-  } = _ref10;
-  return positions.arrowTop;
-}, "px;left:", _ref11 => {
-  let {
-    positions
-  } = _ref11;
-  return positions.arrowLeft;
-}, "px;transform:", _ref12 => {
-  let {
-    positions
-  } = _ref12;
-  return positions.arrowTransform;
-}, " rotate(", _ref13 => {
-  let {
-    positions
-  } = _ref13;
-  return positions.rotate;
-}, "deg);margin-left:-", ARROW_WIDTH, "px;border-width:", ARROW_WIDTH, "px;border-style:solid;border-color:", _ref14 => {
-  let {
-    theme
-  } = _ref14;
-  return theme.colors.neutral.backgroundStronger;
-}, " transparent transparent transparent;pointer-events:none;}}");
+})("background:", ({
+  theme
+}) => theme.colors.neutral.backgroundStronger, ";color:", ({
+  theme
+}) => theme.colors.neutral.textStronger, ";border-radius:", ({
+  theme
+}) => theme.radii.default, ";padding:", ({
+  theme
+}) => `${theme.space['0.5']} ${theme.space['1']}`, ";text-align:center;position:absolute;max-width:", ({
+  maxWidth
+}) => typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth, ";max-height:", ({
+  maxHeight
+}) => typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight, ";overflow:", ({
+  maxHeight
+}) => maxHeight ? 'auto' : undefined, ";overflow-wrap:break-word;font-size:0.8rem;inset:0 auto auto 0;top:0;left:0;z-index:1;transform:", ({
+  positions
+}) => positions.popupPosition, ";animation:", ({
+  positions,
+  reverseAnimation,
+  maxHeight,
+  animationDuration
+}) => maxHeight || animationDuration === 0 || animationDuration === undefined ? undefined : /*#__PURE__*/css(animationDuration, "ms ", !reverseAnimation ? animation(positions) : exitAnimation(positions), " forwards;"), ";&[data-has-arrow='true']{&::after{content:' ';position:absolute;top:", ({
+  positions
+}) => positions.arrowTop, "px;left:", ({
+  positions
+}) => positions.arrowLeft, "px;transform:", ({
+  positions
+}) => positions.arrowTransform, " rotate(", ({
+  positions
+}) => positions.rotate, "deg);margin-left:-", ARROW_WIDTH, "px;border-width:", ARROW_WIDTH, "px;border-style:solid;border-color:", ({
+  theme
+}) => theme.colors.neutral.backgroundStronger, " transparent transparent transparent;pointer-events:none;}}");
 const StyledChildrenContainer = /*#__PURE__*/_styled("div", {
   target: "e4h1g860"
 })(process.env.NODE_ENV === "production" ? {
@@ -101,30 +59,29 @@ const StyledChildrenContainer = /*#__PURE__*/_styled("div", {
 /**
  * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
-const Popup = /*#__PURE__*/forwardRef((_ref15, ref) => {
-  let {
-    children,
-    text = '',
-    placement = 'auto',
-    id,
-    className,
-    containerFullWidth,
-    maxWidth = 232,
-    maxHeight,
-    visible,
-    innerRef,
-    role = 'popup',
-    'data-testid': dataTestId,
-    hasArrow = true,
-    onClose,
-    tabIndex = 0,
-    onKeyDown,
-    'aria-haspopup': ariaHasPopup,
-    hideOnClickOutside = false,
-    needDebounce = true,
-    disableAnimation = false,
-    portalTarget
-  } = _ref15;
+const Popup = /*#__PURE__*/forwardRef(({
+  children,
+  text = '',
+  placement = 'auto',
+  id,
+  className,
+  containerFullWidth,
+  maxWidth = 232,
+  maxHeight,
+  visible,
+  innerRef,
+  role = 'popup',
+  'data-testid': dataTestId,
+  hasArrow = true,
+  onClose,
+  tabIndex = 0,
+  onKeyDown,
+  'aria-haspopup': ariaHasPopup,
+  hideOnClickOutside = false,
+  needDebounce = true,
+  disableAnimation = false,
+  portalTarget
+}, ref) => {
   const childrenRef = useRef(null);
   useImperativeHandle(innerRef, () => childrenRef.current);
   const innerPopupRef = useRef(null);
@@ -244,8 +201,8 @@ const Popup = /*#__PURE__*/forwardRef((_ref15, ref) => {
         // We want to detect scroll and resize in order to recompute positions of popup
         // Adding true as third parameter to event listener will detect nested scrolls.
         window.addEventListener('scroll', onWindowChangeDetected, true);
-        window.addEventListener('resize', onWindowChangeDetected, true);
       }
+      window.addEventListener('resize', onWindowChangeDetected, true);
     }
     return () => {
       window.removeEventListener('scroll', onWindowChangeDetected, true);

package/dist/src/components/ProgressBar/index.js

@@ -13,63 +13,45 @@ const shineAnimation = keyframes`
 `;
 const StyledProgressContainer = /*#__PURE__*/_styled("div", {
   target: "e1b95x8r2"
-})("overflow:hidden;position:relative;height:4px;margin-left:0;margin-right:0;border-radius:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.radii.default;
-}, ";background-color:", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.colors.neutral.backgroundStrong;
-}, ";");
+})("overflow:hidden;position:relative;height:4px;margin-left:0;margin-right:0;border-radius:", ({
+  theme
+}) => theme.radii.default, ";background-color:", ({
+  theme
+}) => theme.colors.neutral.backgroundStrong, ";");
 const StyledProgress = /*#__PURE__*/_styled("div", {
   target: "e1b95x8r1"
 })("position:absolute;top:0;left:0;bottom:0;width:25%;opacity:0.8;background:linear-gradient(\n    90deg,\n    rgba(255, 255, 255, 0),\n    rgba(255, 255, 255, 0.3),\n    rgba(255, 255, 255, 0.4),\n    rgba(255, 255, 255, 0.3),\n    rgba(255, 255, 255, 0)\n  );animation:", shineAnimation, " 1s linear infinite;");
 const StyledFilled = /*#__PURE__*/_styled('div', {
   shouldForwardProp: prop => !['sentiment', 'value'].includes(prop),
   target: "e1b95x8r0"
-})("border-radius:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.radii.default;
-}, ";position:absolute;top:0;left:0;bottom:0;background-color:", _ref4 => {
-  let {
-    theme,
-    sentiment
-  } = _ref4;
-  return theme.colors[sentiment].backgroundStrong ?? 'inherit';
-}, ";transition:0.3s width;width:", _ref5 => {
-  let {
-    value
-  } = _ref5;
-  return Math.max(0, Math.min(100, value));
-}, "%;");
+})("border-radius:", ({
+  theme
+}) => theme.radii.default, ";position:absolute;top:0;left:0;bottom:0;background-color:", ({
+  theme,
+  sentiment
+}) => theme.colors[sentiment].backgroundStrong ?? 'inherit', ";transition:0.3s width;width:", ({
+  value
+}) => Math.max(0, Math.min(100, value)), "%;");
 /**
  * Progress bar component to display progress of a task. Can be used to display progress of a form or a loading state.
  */
-const ProgressBar = _ref6 => {
-  let {
-    progress = false,
-    value = 0,
-    sentiment = 'primary',
-    className,
-    'data-testid': dataTestId
-  } = _ref6;
-  return jsx(StyledProgressContainer, {
-    role: "progressbar",
-    "aria-valuenow": value,
-    "aria-valuemin": 0,
-    "aria-valuemax": 100,
-    className: className,
-    "data-testid": dataTestId,
-    children: progress ? jsx(StyledProgress, {}) : jsx(StyledFilled, {
-      sentiment: sentiment,
-      value: value
-    })
-  });
-};
+const ProgressBar = ({
+  progress = false,
+  value = 0,
+  sentiment = 'primary',
+  className,
+  'data-testid': dataTestId
+}) => jsx(StyledProgressContainer, {
+  role: "progressbar",
+  "aria-valuenow": value,
+  "aria-valuemin": 0,
+  "aria-valuemax": 100,
+  className: className,
+  "data-testid": dataTestId,
+  children: progress ? jsx(StyledProgress, {}) : jsx(StyledFilled, {
+    sentiment: sentiment,
+    value: value
+  })
+});
 
 export { ProgressBar };

package/dist/src/components/Radio/index.js

@@ -5,12 +5,13 @@ import { Text } from '../Text/index.js';
 import { Tooltip } from '../Tooltip/index.js';
 import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const SIZE = 24;
 const InnerCircleRing = /*#__PURE__*/_styled("circle", {
-  target: "ehkrmld5"
+  target: "ehkrmld6"
 })();
 const RadioMark = /*#__PURE__*/_styled("circle", {
-  target: "ehkrmld4"
+  target: "ehkrmld5"
 })();
 const RadioMarkedIcon = () => jsxs("g", {
   children: [jsx("circle", {
@@ -29,135 +30,91 @@ const RadioMarkedIcon = () => jsxs("g", {
   })]
 });
 const Ring = /*#__PURE__*/_styled("svg", {
-  target: "ehkrmld3"
-})("height:", SIZE, "px;width:", SIZE, "px;min-width:", SIZE, "px;min-height:", SIZE, "px;border-radius:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.radii.circle;
-}, ";fill:", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.colors.neutral.border;
-}, ";", InnerCircleRing, "{fill:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.colors.neutral.background;
-}, ";}");
+  target: "ehkrmld4"
+})("height:", SIZE, "px;width:", SIZE, "px;min-width:", SIZE, "px;min-height:", SIZE, "px;border-radius:", ({
+  theme
+}) => theme.radii.circle, ";fill:", ({
+  theme
+}) => theme.colors.neutral.border, ";", InnerCircleRing, "{fill:", ({
+  theme
+}) => theme.colors.neutral.background, ";}");
 const RadioInput = /*#__PURE__*/_styled("input", {
-  target: "ehkrmld2"
-})("cursor:pointer;position:absolute;height:", SIZE, "px;width:", SIZE, "px;opacity:0;white-space:nowrap;border-width:0;&+", Ring, "{", RadioMark, "{transform-origin:center;transition:200ms transform ease-in-out;transform:scale(0);}}&:checked+svg{", RadioMark, "{transform:scale(1);}}&:checked[aria-disabled='false'][aria-invalid='false']+", Ring, "{fill:", _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.colors.primary.backgroundStrong;
-}, ";}&[aria-invalid='true']:not([aria-disabled='true'])+", Ring, "{fill:", _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.colors.danger.backgroundStrong;
-}, ";}&[aria-disabled='false']:active+", Ring, "{background-color:#5e127e40;fill:", _ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return theme.colors.primary.backgroundStrong;
-}, ";", InnerCircleRing, "{fill:", _ref7 => {
-  let {
-    theme
-  } = _ref7;
-  return theme.colors.primary.background;
-}, ";}}&[aria-disabled='false']:focus-visible+", Ring, "{outline:-webkit-focus-ring-color auto 1px;}&[aria-invalid='true']:focus+", Ring, "{background-color:#f91b6c40;fill:", _ref8 => {
-  let {
-    theme
-  } = _ref8;
-  return theme.colors.danger.backgroundStrong;
-}, ";", InnerCircleRing, "{fill:", _ref9 => {
-  let {
-    theme
-  } = _ref9;
-  return theme.colors.danger.background;
-}, ";}}");
+  target: "ehkrmld3"
+})("cursor:pointer;position:absolute;height:", SIZE, "px;width:", SIZE, "px;opacity:0;white-space:nowrap;border-width:0;&+", Ring, "{", RadioMark, "{transform-origin:center;transition:200ms transform ease-in-out;transform:scale(0);}}&:checked+svg{", RadioMark, "{transform:scale(1);}}&:checked[aria-disabled='false'][aria-invalid='false']+", Ring, "{fill:", ({
+  theme
+}) => theme.colors.primary.backgroundStrong, ";}&[aria-invalid='true']:not([aria-disabled='true'])+", Ring, "{fill:", ({
+  theme
+}) => theme.colors.danger.backgroundStrong, ";}&[aria-disabled='false']:active+", Ring, "{background-color:#5e127e40;fill:", ({
+  theme
+}) => theme.colors.primary.backgroundStrong, ";", InnerCircleRing, "{fill:", ({
+  theme
+}) => theme.colors.primary.background, ";}}&[aria-disabled='false']:focus-visible+", Ring, "{outline:-webkit-focus-ring-color auto 1px;}&[aria-invalid='true']:focus+", Ring, "{background-color:#f91b6c40;fill:", ({
+  theme
+}) => theme.colors.danger.backgroundStrong, ";", InnerCircleRing, "{fill:", ({
+  theme
+}) => theme.colors.danger.background, ";}}");
 const RadioContainer = /*#__PURE__*/_styled("div", {
+  target: "ehkrmld2"
+})("position:relative;display:flex;flex:1;align-items:flex-start;gap:", ({
+  theme
+}) => theme.space['1'], ";&[aria-disabled='false'],&[aria-disabled='false']>label{cursor:pointer;}&[aria-disabled='true'][data-checked='false']{color:", ({
+  theme
+}) => theme.colors.neutral.textDisabled, ";}:hover[aria-disabled='false']{", RadioInput, "+", Ring, "{fill:", ({
+  theme
+}) => theme.colors.primary.border, ";", InnerCircleRing, "{fill:", ({
+  theme
+}) => theme.colors.primary.backgroundHover, ";}}", RadioInput, "[aria-invalid='true']+", Ring, "{fill:", ({
+  theme
+}) => theme.colors.danger.border, ";", InnerCircleRing, "{fill:", ({
+  theme
+}) => theme.colors.danger.backgroundHover, ";}}}&[aria-disabled='true']{cursor:not-allowed;&>label,", RadioInput, "{cursor:not-allowed;}", Ring, "{fill:", ({
+  theme
+}) => theme.colors.neutral.borderDisabled, ";cursor:not-allowed;", InnerCircleRing, "{fill:", ({
+  theme
+}) => theme.colors.neutral.backgroundDisabled, ";}}}");
+const StyledLabel = /*#__PURE__*/_styled("label", {
   target: "ehkrmld1"
-})("position:relative;display:flex;align-items:flex-start;gap:", _ref10 => {
-  let {
-    theme
-  } = _ref10;
-  return theme.space['1'];
-}, ";&[aria-disabled='false'],&[aria-disabled='false']>label{cursor:pointer;}&[aria-disabled='true'][data-checked='false']{color:", _ref11 => {
-  let {
-    theme
-  } = _ref11;
-  return theme.colors.neutral.textDisabled;
-}, ";}:hover[aria-disabled='false']{", RadioInput, "+", Ring, "{fill:", _ref12 => {
-  let {
-    theme
-  } = _ref12;
-  return theme.colors.primary.border;
-}, ";", InnerCircleRing, "{fill:", _ref13 => {
-  let {
-    theme
-  } = _ref13;
-  return theme.colors.primary.backgroundHover;
-}, ";}}", RadioInput, "[aria-invalid='true']+", Ring, "{fill:", _ref14 => {
-  let {
-    theme
-  } = _ref14;
-  return theme.colors.danger.border;
-}, ";", InnerCircleRing, "{fill:", _ref15 => {
-  let {
-    theme
-  } = _ref15;
-  return theme.colors.danger.backgroundHover;
-}, ";}}}&[aria-disabled='true']{cursor:not-allowed;&>label,", RadioInput, "{cursor:not-allowed;}", Ring, "{fill:", _ref16 => {
-  let {
-    theme
-  } = _ref16;
-  return theme.colors.neutral.borderDisabled;
-}, ";cursor:not-allowed;", InnerCircleRing, "{fill:", _ref17 => {
-  let {
-    theme
-  } = _ref17;
-  return theme.colors.neutral.backgroundDisabled;
-}, ";}}}");
+})(process.env.NODE_ENV === "production" ? {
+  name: "82a6rk",
+  styles: "flex:1"
+} : {
+  name: "82a6rk",
+  styles: "flex:1",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 const MargedText = /*#__PURE__*/_styled(Text, {
   target: "ehkrmld0"
-})("margin-left:", _ref18 => {
-  let {
-    theme
-  } = _ref18;
-  return theme.space['4'];
-}, ";");
+})("margin-left:", ({
+  theme
+}) => theme.space['4'], ";");
 /**
  * Radio component is used to select a single option from a list of options. It is a type of input component.
  */
-const Radio = /*#__PURE__*/forwardRef((_ref19, ref) => {
-  let {
-    checked = false,
-    onChange,
-    onFocus,
-    onBlur,
-    disabled = false,
-    error,
-    name,
-    value,
-    label,
-    helper,
-    className,
-    autoFocus,
-    onKeyDown,
-    tooltip,
-    'aria-label': ariaLabel,
-    'data-testid': dataTestId
-  } = _ref19;
+const Radio = /*#__PURE__*/forwardRef(({
+  checked = false,
+  onChange,
+  onFocus,
+  onBlur,
+  disabled = false,
+  error,
+  name,
+  value,
+  label,
+  helper,
+  className,
+  autoFocus,
+  onKeyDown,
+  tooltip,
+  'aria-label': ariaLabel,
+  'data-testid': dataTestId
+}, ref) => {
   const id = useId();
   const computedName = name ?? id;
   return jsx(Tooltip, {
     text: tooltip,
     children: jsxs(Stack, {
       gap: 0.5,
+      width: "100%",
       children: [jsxs(RadioContainer, {
         "aria-disabled": disabled,
         className: className,
@@ -183,7 +140,7 @@ const Radio = /*#__PURE__*/forwardRef((_ref19, ref) => {
         }), jsx(Ring, {
           viewBox: "0 0 24 24",
           children: jsx(RadioMarkedIcon, {})
-        }), label ? jsx("label", {
+        }), label ? jsx(StyledLabel, {
           htmlFor: `${computedName}-${value}`,
           children: label
         }) : null]

package/dist/src/components/RadioGroup/index.js

@@ -8,21 +8,20 @@ import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const RadioGroupContext = /*#__PURE__*/createContext(undefined);
-const RadioGroupRadio = _ref => {
-  let {
-    onFocus,
-    onBlur,
-    disabled,
-    error,
-    name,
-    value,
-    label,
-    helper,
-    className,
-    autoFocus,
-    onKeyDown,
-    'data-testid': dataTestId
-  } = _ref;
+const RadioGroupRadio = ({
+  onFocus,
+  onBlur,
+  disabled,
+  error,
+  name,
+  value,
+  label,
+  helper,
+  className,
+  autoFocus,
+  onKeyDown,
+  'data-testid': dataTestId
+}) => {
   const context = useContext(RadioGroupContext);
   if (!context) {
     throw new Error('RadioGroup.Radio can only be used inside a RadioGroup');
@@ -73,19 +72,18 @@ const StyledRequiredIcon = /*#__PURE__*/_styled(Icon, {
 /**
  * RadioGroup is a component that allows users to select one option from a list of options using radio.
  */
-const RadioGroup = _ref2 => {
-  let {
-    legend,
-    value,
-    className,
-    helper,
-    error,
-    direction = 'column',
-    children,
-    onChange,
-    name,
-    required = false
-  } = _ref2;
+const RadioGroup = ({
+  legend,
+  value,
+  className,
+  helper,
+  error,
+  direction = 'column',
+  children,
+  onChange,
+  name,
+  required = false
+}) => {
   const contextValue = useMemo(() => ({
     groupName: name,
     groupValue: value,

package/dist/src/components/Row/index.js

@@ -4,44 +4,38 @@ import { jsx } from '@emotion/react/jsx-runtime';
 const StyledRow = /*#__PURE__*/_styled('div', {
   shouldForwardProp: prop => !['templateColumns', 'gap', 'alignItems', 'justifyContent'].includes(prop),
   target: "e3f5lzv0"
-})("display:grid;", _ref => {
-  let {
-    theme,
-    gap,
-    alignItems = 'normal',
-    templateColumns,
-    justifyContent = 'normal'
-  } = _ref;
-  return `
+})("display:grid;", ({
+  theme,
+  gap,
+  alignItems = 'normal',
+  templateColumns,
+  justifyContent = 'normal'
+}) => `
     grid-template-columns: ${templateColumns};
     ${gap ? `gap: ${theme.space[gap]};` : ''}
     align-items: ${alignItems};
     justify-content: ${justifyContent};
-  `;
-}, ";");
+  `, ";");
 /**
  * Row component is a wrapper for grid layout.
  * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
-const Row = _ref2 => {
-  let {
-    className,
-    'data-testid': dataTestId,
-    children,
-    templateColumns,
-    alignItems,
-    justifyContent,
-    gap
-  } = _ref2;
-  return jsx(StyledRow, {
-    className: className,
-    "data-testid": dataTestId,
-    gap: gap,
-    templateColumns: templateColumns,
-    alignItems: alignItems,
-    justifyContent: justifyContent,
-    children: children
-  });
-};
+const Row = ({
+  className,
+  'data-testid': dataTestId,
+  children,
+  templateColumns,
+  alignItems,
+  justifyContent,
+  gap
+}) => jsx(StyledRow, {
+  className: className,
+  "data-testid": dataTestId,
+  gap: gap,
+  templateColumns: templateColumns,
+  alignItems: alignItems,
+  justifyContent: justifyContent,
+  children: children
+});
 
 export { Row, StyledRow };