@ultraviolet/ui 1.28.0 → 1.29.1

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

@@ -4,79 +4,61 @@ import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 
 const Steps = /*#__PURE__*/_styled("ul", {
   target: "ewuati22"
-})("list-style:none;padding-left:0;text-align:left;display:flex;flex-direction:column;gap:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.space['3'];
-}, ";font-size:16px;");
+})("list-style:none;padding-left:0;text-align:left;display:flex;flex-direction:column;gap:", ({
+  theme
+}) => theme.space['3'], ";font-size:16px;");
 const Step = /*#__PURE__*/_styled('li', {
   shouldForwardProp: prop => !['disabled'].includes(prop),
   target: "ewuati21"
-})("display:flex;align-items:flex-start;gap:1rem;justify-content:center;color:", _ref2 => {
-  let {
-    theme,
-    disabled
-  } = _ref2;
-  return disabled ? theme.colors.neutral.textDisabled : theme.colors.neutral.textStrong;
-}, ";");
+})("display:flex;align-items:flex-start;gap:1rem;justify-content:center;color:", ({
+  theme,
+  disabled
+}) => disabled ? theme.colors.neutral.textDisabled : theme.colors.neutral.textStrong, ";");
 const StyledDiv = /*#__PURE__*/_styled('div', {
   shouldForwardProp: prop => !['size'].includes(prop),
   target: "ewuati20"
-})("flex:1;margin:auto;line-height:", _ref3 => {
-  let {
-    size
-  } = _ref3;
-  return size === 'medium' ? '32px' : '24px';
-}, ";font-size:", _ref4 => {
-  let {
-    size
-  } = _ref4;
-  return size === 'medium' ? '24px' : '16px';
-}, ";");
-const Item = _ref5 => {
-  let {
-    bulletText,
-    bulletIcon,
-    sentiment,
-    children,
-    size = 'medium',
-    disabled = false,
-    className
-  } = _ref5;
-  return jsxs(Step, {
-    disabled: disabled,
-    className: className,
-    children: [bulletIcon ? jsx(Bullet, {
-      icon: bulletIcon,
-      size: size,
-      sentiment: disabled ? 'disabled' : sentiment
-    }) : null, bulletText ? jsx(Bullet, {
-      text: bulletText,
-      size: size,
-      sentiment: disabled ? 'disabled' : sentiment
-    }) : null, jsx(StyledDiv, {
-      size: size,
-      children: children
-    })]
-  });
-};
+})("flex:1;margin:auto;line-height:", ({
+  size
+}) => size === 'medium' ? '32px' : '24px', ";font-size:", ({
+  size
+}) => size === 'medium' ? '24px' : '16px', ";");
+const Item = ({
+  bulletText,
+  bulletIcon,
+  sentiment,
+  children,
+  size = 'medium',
+  disabled = false,
+  className
+}) => jsxs(Step, {
+  disabled: disabled,
+  className: className,
+  children: [bulletIcon ? jsx(Bullet, {
+    icon: bulletIcon,
+    size: size,
+    sentiment: disabled ? 'disabled' : sentiment
+  }) : null, bulletText ? jsx(Bullet, {
+    text: bulletText,
+    size: size,
+    sentiment: disabled ? 'disabled' : sentiment
+  }) : null, jsx(StyledDiv, {
+    size: size,
+    children: children
+  })]
+});
 /**
  * StepList component is used to display a list of steps.
  * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
-const StepList = _ref6 => {
-  let {
-    children,
-    className,
-    'data-testid': dataTestId
-  } = _ref6;
-  return jsx(Steps, {
-    className: className,
-    "data-testid": dataTestId,
-    children: children
-  });
-};
+const StepList = ({
+  children,
+  className,
+  'data-testid': dataTestId
+}) => jsx(Steps, {
+  className: className,
+  "data-testid": dataTestId,
+  children: children
+});
 StepList.Item = Item;
 
 export { StepList };

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

@@ -31,145 +31,90 @@ const StyledStepContainer = /*#__PURE__*/_styled("div", {
 });
 const StyledText = /*#__PURE__*/_styled(Text, {
   target: "e19ft7rb3"
-})("margin-top:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.space['1'];
-}, ";");
+})("margin-top:", ({
+  theme
+}) => theme.space['1'], ";");
 const StyledBullet = /*#__PURE__*/_styled(Bullet, {
   target: "e19ft7rb2"
-})("margin-top:", _ref2 => {
-  let {
-    theme,
-    size
-  } = _ref2;
-  return size === 'small' ? theme.space['0.5'] : 0;
-}, ";");
+})("margin-top:", ({
+  theme,
+  size
+}) => size === 'small' ? theme.space['0.5'] : 0, ";");
 const loadingStyle = /*#__PURE__*/css("animation:", loadingAnimation, " 1s linear infinite;");
 const StyledLine = /*#__PURE__*/_styled("div", {
   target: "e19ft7rb1"
-})("border-radius:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.radii.default;
-}, ";flex-grow:1;border-radius:", _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.radii.default;
-}, ";background-color:", _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.colors.neutral.backgroundStrong;
-}, ";position:relative;::after{content:'';position:absolute;left:0;top:0;height:100%;border-radius:", _ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return theme.radii.default;
-}, ";background-color:", _ref7 => {
-  let {
-    theme
-  } = _ref7;
-  return theme.colors.primary.backgroundStrong;
-}, ";", _ref8 => {
-  let {
-    temporal
-  } = _ref8;
-  return temporal === 'previous' && `width: 100%;`;
-}, " ", _ref9 => {
-  let {
-    temporal,
-    animated
-  } = _ref9;
-  return temporal === 'current' && animated && loadingStyle;
-}, ";}");
+})("border-radius:", ({
+  theme
+}) => theme.radii.default, ";flex-grow:1;border-radius:", ({
+  theme
+}) => theme.radii.default, ";background-color:", ({
+  theme
+}) => theme.colors.neutral.backgroundStrong, ";position:relative;::after{content:'';position:absolute;left:0;top:0;height:100%;border-radius:", ({
+  theme
+}) => theme.radii.default, ";background-color:", ({
+  theme
+}) => theme.colors.primary.backgroundStrong, ";", ({
+  temporal
+}) => temporal === 'previous' && `width: 100%;`, " ", ({
+  temporal,
+  animated
+}) => temporal === 'current' && animated && loadingStyle, ";}");
 const StyledContainer = /*#__PURE__*/_styled("div", {
   target: "e19ft7rb0"
-})("display:flex;flex-direction:row;justify-content:center;align-items:flex-start;gap:0 ", _ref10 => {
-  let {
-    theme
-  } = _ref10;
-  return theme.space['1'];
-}, ";gap:", _ref11 => {
-  let {
-    theme,
-    labelPosition,
-    size
-  } = _ref11;
-  return size === 'medium' && labelPosition === 'bottom' ? theme.space['0'] : theme.space['1'];
-}, ";", StyledStepContainer, "{display:flex;flex-direction:", _ref12 => {
-  let {
-    labelPosition
-  } = _ref12;
-  return labelPosition === 'bottom' ? 'column' : 'row';
-}, ";align-items:", _ref13 => {
-  let {
-    labelPosition
-  } = _ref13;
-  return labelPosition === 'bottom' ? 'center' : 'baseline';
-}, ";gap:", _ref14 => {
-  let {
-    theme,
-    labelPosition
-  } = _ref14;
-  return labelPosition === 'bottom' ? theme.space['0.5'] : theme.space['1'];
-}, ";white-space:nowrap;}", StyledLine, "{height:", _ref15 => {
-  let {
-    size
-  } = _ref15;
-  return LINE_HEIGHT_SIZES[size];
-}, "px;margin-top:", _ref16 => {
-  let {
-    theme
-  } = _ref16;
-  return theme.space['2'];
-}, ";margin-bottom:", _ref17 => {
-  let {
-    theme
-  } = _ref17;
-  return theme.space['2'];
-}, ";}");
-const StepperNumbers = _ref18 => {
-  let {
-    temporal,
-    children,
-    CurrentStep,
-    size = 'medium'
-  } = _ref18;
-  return jsxs(StyledStepContainer, {
-    children: [jsx(StyledBullet, {
-      sentiment: temporal === 'next' ? 'neutral' : 'primary',
-      ...(temporal === 'previous' ? {
-        icon: 'check'
-      } : {
-        text: CurrentStep.toString()
-      }),
-      prominence: temporal !== 'current' ? 'default' : 'strong',
-      size: size
-    }), jsx(StyledText, {
-      as: "span",
-      variant: size === 'medium' ? 'body' : 'bodySmall',
-      prominence: temporal === 'next' ? 'weak' : 'default',
-      children: children
-    })]
-  });
-};
+})("display:flex;flex-direction:row;justify-content:center;align-items:flex-start;gap:0 ", ({
+  theme
+}) => theme.space['1'], ";gap:", ({
+  theme,
+  labelPosition,
+  size
+}) => size === 'medium' && labelPosition === 'bottom' ? theme.space['0'] : theme.space['1'], ";", StyledStepContainer, "{display:flex;flex-direction:", ({
+  labelPosition
+}) => labelPosition === 'bottom' ? 'column' : 'row', ";align-items:", ({
+  labelPosition
+}) => labelPosition === 'bottom' ? 'center' : 'baseline', ";gap:", ({
+  theme,
+  labelPosition
+}) => labelPosition === 'bottom' ? theme.space['0.5'] : theme.space['1'], ";white-space:nowrap;}", StyledLine, "{height:", ({
+  size
+}) => LINE_HEIGHT_SIZES[size], "px;margin-top:", ({
+  theme
+}) => theme.space['2'], ";margin-bottom:", ({
+  theme
+}) => theme.space['2'], ";}");
+const StepperNumbers = ({
+  temporal,
+  children,
+  CurrentStep,
+  size = 'medium'
+}) => jsxs(StyledStepContainer, {
+  children: [jsx(StyledBullet, {
+    sentiment: temporal === 'next' ? 'neutral' : 'primary',
+    ...(temporal === 'previous' ? {
+      icon: 'check'
+    } : {
+      text: CurrentStep.toString()
+    }),
+    prominence: temporal !== 'current' ? 'default' : 'strong',
+    size: size
+  }), jsx(StyledText, {
+    as: "span",
+    variant: size === 'medium' ? 'body' : 'bodySmall',
+    prominence: temporal === 'next' ? 'weak' : 'default',
+    children: children
+  })]
+});
 /**
  * Stepper component to show the progress of a process in a linear way.
  */
-const Stepper = _ref19 => {
-  let {
-    children,
-    selected = 0,
-    animated = false,
-    className,
-    labelPosition = 'bottom',
-    size = 'medium',
-    'data-testid': dataTestId
-  } = _ref19;
+const Stepper = ({
+  children,
+  selected = 0,
+  animated = false,
+  className,
+  labelPosition = 'bottom',
+  size = 'medium',
+  'data-testid': dataTestId
+}) => {
   const lastStep = Children.count(children) - 1;
   return jsx(StyledContainer, {
     className: className,

package/dist/src/components/SwitchButton/FocusOverlay.js

@@ -6,29 +6,19 @@ const FOCUS_OVERLAY_SCALE_RATIO = 6;
 const FOCUS_OVERLAY_PIXEL_RIGHT_OFFSET = 8;
 const StyledDiv = /*#__PURE__*/_styled("div", {
   target: "etutiin0"
-})("position:absolute;height:calc(100% - ", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.space['1'];
-}, ");border-radius:", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.radii.default;
-}, ";background:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.colors.primary.backgroundStrong;
-}, ";transform-origin:left center;transition:all 200ms ease-in-out;&[data-focusposition='right']{transform-origin:right center;}");
-const FocusOverlay = _ref4 => {
-  let {
-    focusPosition,
-    rightCardWidth,
-    leftCardWidth,
-    hasMouseDown
-  } = _ref4;
+})("position:absolute;height:calc(100% - ", ({
+  theme
+}) => theme.space['1'], ");border-radius:", ({
+  theme
+}) => theme.radii.default, ";background:", ({
+  theme
+}) => theme.colors.primary.backgroundStrong, ";transform-origin:left center;transition:all 200ms ease-in-out;&[data-focusposition='right']{transform-origin:right center;}");
+const FocusOverlay = ({
+  focusPosition,
+  rightCardWidth,
+  leftCardWidth,
+  hasMouseDown
+}) => {
   const translateXValue = useMemo(() => focusPosition === 'left' ? 0 : leftCardWidth + FOCUS_OVERLAY_PIXEL_RIGHT_OFFSET, [focusPosition, leftCardWidth]);
   const getScaleXValue = () => {
     if (!hasMouseDown || !leftCardWidth || !rightCardWidth) return 1;

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

@@ -7,71 +7,43 @@ import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 
 const StyledBorderedBox = /*#__PURE__*/_styled("div", {
   target: "e4ryteh1"
-})("border:1px solid ", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.colors.neutral.border;
-}, ";border-radius:", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.radii.default;
-}, ";padding:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.space['0.5'];
-}, ";display:flex;gap:", _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.space['1'];
-}, ";position:relative;");
+})("border:1px solid ", ({
+  theme
+}) => theme.colors.neutral.border, ";border-radius:", ({
+  theme
+}) => theme.radii.default, ";padding:", ({
+  theme
+}) => theme.space['0.5'], ";display:flex;gap:", ({
+  theme
+}) => theme.space['1'], ";position:relative;");
 const StyledSelectableCard = /*#__PURE__*/_styled(SelectableCard, {
   target: "e4ryteh0"
-})("border:none;height:40px;padding:", _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.space['1'];
-}, " ", _ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return theme.space['2'];
-}, ";font-weight:", _ref7 => {
-  let {
-    theme
-  } = _ref7;
-  return theme.typography.bodyStrong.weight;
-}, ";justify-content:center;align-items:center;transition:all 200ms ease-in-out;&:hover,&:focus-within,&:active{box-shadow:none;border:none;&:not([data-error='true'][data-disabled='true']){border:none;}}&[data-checked='true']{border:none;}&[data-checked='true'] label{color:", _ref8 => {
-  let {
-    theme
-  } = _ref8;
-  return theme.colors.primary.textStrong;
-}, ";}&:not([data-checked='true']) label{&:hover{color:", _ref9 => {
-  let {
-    theme
-  } = _ref9;
-  return theme.colors.primary.text;
-}, ";}}");
+})("border:none;height:40px;padding:", ({
+  theme
+}) => theme.space['1'], " ", ({
+  theme
+}) => theme.space['2'], ";font-weight:", ({
+  theme
+}) => theme.typography.bodyStrong.weight, ";justify-content:center;align-items:center;transition:all 200ms ease-in-out;&:hover,&:focus-within,&:active{box-shadow:none;border:none;&:not([data-error='true'][data-disabled='true']){border:none;}}&[data-checked='true']{border:none;}&[data-checked='true'] label{color:", ({
+  theme
+}) => theme.colors.primary.textStrong, ";}&:not([data-checked='true']) label{&:hover{color:", ({
+  theme
+}) => theme.colors.primary.text, ";}}");
 /**
  * SwitchButton is a component that allows the user to select between two options.
  */
-const SwitchButton = _ref10 => {
-  let {
-    value,
-    onChange,
-    onFocus,
-    onBlur,
-    name,
-    leftButton,
-    rightButton,
-    tooltip,
-    className,
-    'data-testid': dataTestId
-  } = _ref10;
+const SwitchButton = ({
+  value,
+  onChange,
+  onFocus,
+  onBlur,
+  name,
+  leftButton,
+  rightButton,
+  tooltip,
+  className,
+  'data-testid': dataTestId
+}) => {
   const leftButtonRef = useRef(null);
   const rightButtonRef = useRef(null);
   const [leftCardWidth, setLeftCardWidth] = useState();
@@ -114,7 +86,8 @@ const SwitchButton = _ref10 => {
           onBlur: onBlur,
           onFocus: onFocus,
           "data-checked": localValue === leftButton.value,
-          label: leftButton.label
+          label: leftButton.label,
+          "data-testid": dataTestId ? `${dataTestId}-left` : undefined
         }), jsx(StyledSelectableCard, {
           ref: rightButtonRef,
           name: name,
@@ -124,7 +97,8 @@ const SwitchButton = _ref10 => {
           onBlur: onBlur,
           onFocus: onFocus,
           "data-checked": localValue === rightButton.value,
-          label: rightButton.label
+          label: rightButton.label,
+          "data-testid": dataTestId ? `${dataTestId}-right` : undefined
         })]
       })
     })

package/dist/src/components/Table/Body.js

@@ -1,12 +1,9 @@
 import { jsx } from '@emotion/react/jsx-runtime';
 
-const Body = _ref => {
-  let {
-    children
-  } = _ref;
-  return jsx("tbody", {
-    children: children
-  });
-};
+const Body = ({
+  children
+}) => jsx("tbody", {
+  children: children
+});
 
 export { Body };

package/dist/src/components/Table/Cell.js

@@ -3,25 +3,19 @@ import { jsx } from '@emotion/react/jsx-runtime';
 
 const StyledCell = /*#__PURE__*/_styled('td', {
   target: "e78o8ww0"
-})("padding:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.space['1'];
-}, ";font-size:14px;");
-const Cell = _ref2 => {
-  let {
-    children,
-    className,
-    colSpan,
-    rowSpan
-  } = _ref2;
-  return jsx(StyledCell, {
-    className: className,
-    colSpan: colSpan,
-    rowSpan: rowSpan,
-    children: children
-  });
-};
+})("padding:", ({
+  theme
+}) => theme.space['1'], ";font-size:14px;");
+const Cell = ({
+  children,
+  className,
+  colSpan,
+  rowSpan
+}) => jsx(StyledCell, {
+  className: className,
+  colSpan: colSpan,
+  rowSpan: rowSpan,
+  children: children
+});
 
 export { Cell };

package/dist/src/components/Table/Header.js

@@ -3,19 +3,13 @@ import { jsx } from '@emotion/react/jsx-runtime';
 
 const StyledHeader = /*#__PURE__*/_styled('thead', {
   target: "ekxedod0"
-})("border-bottom:1px solid ", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.colors.neutral.border;
-}, ";");
-const Header = _ref2 => {
-  let {
-    children
-  } = _ref2;
-  return jsx(StyledHeader, {
-    children: children
-  });
-};
+})("border-bottom:1px solid ", ({
+  theme
+}) => theme.colors.neutral.border, ";");
+const Header = ({
+  children
+}) => jsx(StyledHeader, {
+  children: children
+});
 
 export { Header };