@ultraviolet/ui 1.28.0 → 1.29.0

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

@@ -14,218 +14,95 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 const PREFIX = '.react-datepicker';
 const StyledSeparator = /*#__PURE__*/_styled(Separator, {
   target: "e1bm75lk3"
-})("margin:0 ", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.space['1'];
-}, ";height:100%;");
+})("margin:0 ", ({
+  theme
+}) => theme.space['1'], ";height:100%;");
 const StyledWrapper = /*#__PURE__*/_styled("div", {
   target: "e1bm75lk2"
-})("width:100%;div", PREFIX, "-wrapper{display:block;}div", PREFIX, "__input-container{display:block;}div", PREFIX, "__triangle{display:none;}div", PREFIX, "__month-container{padding:16px;}", PREFIX, "-popper{z-index:1000;}.calendar{font-family:", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.typography.body.fontFamily;
-}, ";border-color:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.colors.neutral.borderWeak;
-}, ";background-color:", _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.colors.neutral.backgroundWeakElevated;
-}, ";", PREFIX, "__header{color:", _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.colors.neutral.text;
-}, ";background-color:", _ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return theme.colors.neutral.backgroundWeakElevated;
-}, ";border-bottom:none;text-align:inherit;display:block;padding-top:0;position:inherit;}", PREFIX, "__triangle{border-bottom-color:", _ref7 => {
-  let {
-    theme
-  } = _ref7;
-  return theme.colors.neutral.backgroundWeak;
-}, ";}", PREFIX, "__month{margin:0;}", PREFIX, "__day-names{margin-top:8px;}", PREFIX, "__day-name{font-family:", _ref8 => {
-  let {
-    theme
-  } = _ref8;
-  return theme.typography.bodySmallStrong.fontFamily;
-}, ";color:", _ref9 => {
-  let {
-    theme
-  } = _ref9;
-  return theme.colors.neutral.text;
-}, ";font-weight:", _ref10 => {
-  let {
-    theme
-  } = _ref10;
-  return theme.typography.bodySmallStrong.weight;
-}, ";font-size:", _ref11 => {
-  let {
-    theme
-  } = _ref11;
-  return theme.typography.bodySmallStrong.fontSize;
-}, ";line-height:", _ref12 => {
-  let {
-    theme
-  } = _ref12;
-  return theme.typography.bodySmallStrong.lineHeight;
-}, ";text-align:center;margin:3px;text-transform:capitalize;}", PREFIX, "__day{color:", _ref13 => {
-  let {
-    theme
-  } = _ref13;
-  return theme.colors.neutral.textWeak;
-}, ";font-size:", _ref14 => {
-  let {
-    theme
-  } = _ref14;
-  return theme.typography.body.fontSize;
-}, ";width:1.7rem;height:1.7rem;margin-left:3px;margin-right:3px;}", PREFIX, "__day--selected{color:", _ref15 => {
-  let {
-    theme
-  } = _ref15;
-  return theme.colors.primary.textStrong;
-}, ";background-color:", _ref16 => {
-  let {
-    theme
-  } = _ref16;
-  return theme.colors.primary.backgroundStrong;
-}, ";&[aria-disabled='true'],&:disabled{color:", _ref17 => {
-  let {
-    theme
-  } = _ref17;
-  return theme.colors.primary.textStrongDisabled;
-}, ";background-color:", _ref18 => {
-  let {
-    theme
-  } = _ref18;
-  return theme.colors.primary.backgroundStrongDisabled;
-}, ";}}", PREFIX, "__day--in-selecting-range{color:", _ref19 => {
-  let {
-    theme
-  } = _ref19;
-  return theme.colors.primary.text;
-}, ";background-color:", _ref20 => {
-  let {
-    theme
-  } = _ref20;
-  return theme.colors.primary.background;
-}, ";&[aria-disabled='true'],&:disabled{color:", _ref21 => {
-  let {
-    theme
-  } = _ref21;
-  return theme.colors.primary.textDisabled;
-}, ";background-color:", _ref22 => {
-  let {
-    theme
-  } = _ref22;
-  return theme.colors.primary.backgroundDisabled;
-}, ";}}", PREFIX, "__day--in-range{color:", _ref23 => {
-  let {
-    theme
-  } = _ref23;
-  return theme.colors.primary.text;
-}, ";background-color:", _ref24 => {
-  let {
-    theme
-  } = _ref24;
-  return theme.colors.primary.background;
-}, ";&[aria-disabled='true'],&:disabled{color:", _ref25 => {
-  let {
-    theme
-  } = _ref25;
-  return theme.colors.primary.textDisabled;
-}, ";background-color:", _ref26 => {
-  let {
-    theme
-  } = _ref26;
-  return theme.colors.primary.backgroundDisabled;
-}, ";}}", PREFIX, "__day--range-start{color:", _ref27 => {
-  let {
-    theme
-  } = _ref27;
-  return theme.colors.primary.textStrong;
-}, ";background-color:", _ref28 => {
-  let {
-    theme
-  } = _ref28;
-  return theme.colors.primary.backgroundStrong;
-}, ";&[aria-disabled='true'],&:disabled{color:", _ref29 => {
-  let {
-    theme
-  } = _ref29;
-  return theme.colors.primary.textStrongDisabled;
-}, ";background-color:", _ref30 => {
-  let {
-    theme
-  } = _ref30;
-  return theme.colors.primary.backgroundStrongDisabled;
-}, ";}}", PREFIX, "__day--range-end{color:", _ref31 => {
-  let {
-    theme
-  } = _ref31;
-  return theme.colors.primary.textStrong;
-}, ";background-color:", _ref32 => {
-  let {
-    theme
-  } = _ref32;
-  return theme.colors.primary.backgroundStrong;
-}, ";&[aria-disabled='true'],&:disabled{color:", _ref33 => {
-  let {
-    theme
-  } = _ref33;
-  return theme.colors.primary.textStrongDisabled;
-}, ";background-color:", _ref34 => {
-  let {
-    theme
-  } = _ref34;
-  return theme.colors.primary.backgroundStrongDisabled;
-}, ";}}", PREFIX, "__day--keyboard-selected{color:", _ref35 => {
-  let {
-    theme
-  } = _ref35;
-  return theme.colors.primary.textStrong;
-}, ";background-color:", _ref36 => {
-  let {
-    theme
-  } = _ref36;
-  return theme.colors.primary.backgroundStrong;
-}, ";}", PREFIX, "__day:hover{color:", _ref37 => {
-  let {
-    theme
-  } = _ref37;
-  return theme.colors.neutral.textHover;
-}, ";background-color:", _ref38 => {
-  let {
-    theme
-  } = _ref38;
-  return theme.colors.neutral.backgroundHover;
-}, ";}", PREFIX, "__day--disabled{color:", _ref39 => {
-  let {
-    theme
-  } = _ref39;
-  return theme.colors.neutral.textDisabled;
-}, ";}", PREFIX, "__day--disabled:hover{color:", _ref40 => {
-  let {
-    theme
-  } = _ref40;
-  return theme.colors.neutral.textDisabled;
-}, ";background-color:transparent;}}");
+})("width:100%;div", PREFIX, "-wrapper{display:block;}div", PREFIX, "__input-container{display:block;}div", PREFIX, "__triangle{display:none;}div", PREFIX, "__month-container{padding:16px;}", PREFIX, "-popper{z-index:1000;}.calendar{font-family:", ({
+  theme
+}) => theme.typography.body.fontFamily, ";border-color:", ({
+  theme
+}) => theme.colors.neutral.borderWeak, ";background-color:", ({
+  theme
+}) => theme.colors.neutral.backgroundWeakElevated, ";", PREFIX, "__header{color:", ({
+  theme
+}) => theme.colors.neutral.text, ";background-color:", ({
+  theme
+}) => theme.colors.neutral.backgroundWeakElevated, ";border-bottom:none;text-align:inherit;display:block;padding-top:0;position:inherit;}", PREFIX, "__triangle{border-bottom-color:", ({
+  theme
+}) => theme.colors.neutral.backgroundWeak, ";}", PREFIX, "__month{margin:0;}", PREFIX, "__day-names{margin-top:8px;}", PREFIX, "__day-name{font-family:", ({
+  theme
+}) => theme.typography.bodySmallStrong.fontFamily, ";color:", ({
+  theme
+}) => theme.colors.neutral.text, ";font-weight:", ({
+  theme
+}) => theme.typography.bodySmallStrong.weight, ";font-size:", ({
+  theme
+}) => theme.typography.bodySmallStrong.fontSize, ";line-height:", ({
+  theme
+}) => theme.typography.bodySmallStrong.lineHeight, ";text-align:center;margin:3px;text-transform:capitalize;}", PREFIX, "__day{color:", ({
+  theme
+}) => theme.colors.neutral.textWeak, ";font-size:", ({
+  theme
+}) => theme.typography.body.fontSize, ";width:1.7rem;height:1.7rem;margin-left:3px;margin-right:3px;}", PREFIX, "__day--selected{color:", ({
+  theme
+}) => theme.colors.primary.textStrong, ";background-color:", ({
+  theme
+}) => theme.colors.primary.backgroundStrong, ";&[aria-disabled='true'],&:disabled{color:", ({
+  theme
+}) => theme.colors.primary.textStrongDisabled, ";background-color:", ({
+  theme
+}) => theme.colors.primary.backgroundStrongDisabled, ";}}", PREFIX, "__day--in-selecting-range{color:", ({
+  theme
+}) => theme.colors.primary.text, ";background-color:", ({
+  theme
+}) => theme.colors.primary.background, ";&[aria-disabled='true'],&:disabled{color:", ({
+  theme
+}) => theme.colors.primary.textDisabled, ";background-color:", ({
+  theme
+}) => theme.colors.primary.backgroundDisabled, ";}}", PREFIX, "__day--in-range{color:", ({
+  theme
+}) => theme.colors.primary.text, ";background-color:", ({
+  theme
+}) => theme.colors.primary.background, ";&[aria-disabled='true'],&:disabled{color:", ({
+  theme
+}) => theme.colors.primary.textDisabled, ";background-color:", ({
+  theme
+}) => theme.colors.primary.backgroundDisabled, ";}}", PREFIX, "__day--range-start{color:", ({
+  theme
+}) => theme.colors.primary.textStrong, ";background-color:", ({
+  theme
+}) => theme.colors.primary.backgroundStrong, ";&[aria-disabled='true'],&:disabled{color:", ({
+  theme
+}) => theme.colors.primary.textStrongDisabled, ";background-color:", ({
+  theme
+}) => theme.colors.primary.backgroundStrongDisabled, ";}}", PREFIX, "__day--range-end{color:", ({
+  theme
+}) => theme.colors.primary.textStrong, ";background-color:", ({
+  theme
+}) => theme.colors.primary.backgroundStrong, ";&[aria-disabled='true'],&:disabled{color:", ({
+  theme
+}) => theme.colors.primary.textStrongDisabled, ";background-color:", ({
+  theme
+}) => theme.colors.primary.backgroundStrongDisabled, ";}}", PREFIX, "__day--keyboard-selected{color:", ({
+  theme
+}) => theme.colors.primary.textStrong, ";background-color:", ({
+  theme
+}) => theme.colors.primary.backgroundStrong, ";}", PREFIX, "__day:hover{color:", ({
+  theme
+}) => theme.colors.neutral.textHover, ";background-color:", ({
+  theme
+}) => theme.colors.neutral.backgroundHover, ";}", PREFIX, "__day--disabled{color:", ({
+  theme
+}) => theme.colors.neutral.textDisabled, ";}", PREFIX, "__day--disabled:hover{color:", ({
+  theme
+}) => theme.colors.neutral.textDisabled, ";background-color:transparent;}}");
 const StyledIconContainer = /*#__PURE__*/_styled("div", {
   target: "e1bm75lk1"
-})("padding:", _ref41 => {
-  let {
-    theme
-  } = _ref41;
-  return theme.space['1'];
-}, ";position:absolute;display:flex;align-items:center;right:0;top:0;height:48px;");
+})("padding:", ({
+  theme
+}) => theme.space['1'], ";position:absolute;display:flex;align-items:center;right:0;top:0;height:48px;");
 const StyledText = /*#__PURE__*/_styled(Text, {
   target: "e1bm75lk0"
 })(process.env.NODE_ENV === "production" ? {
@@ -242,29 +119,28 @@ const DEFAULT_FORMAT = value => value instanceof Date ? value.toISOString() : va
  * DateInput is a wrapper around react-datepicker that provides a consistent look and feel with the rest of the Ultraviolet UI.
  * See https://reactdatepicker.com/ for more information.
  */
-const DateInput = _ref42 => {
-  let {
-    autoFocus = false,
-    disabled = false,
-    error,
-    format = DEFAULT_FORMAT,
-    label,
-    locale,
-    maxDate,
-    minDate,
-    startDate,
-    endDate,
-    name,
-    onBlur,
-    onChange,
-    onFocus,
-    required = false,
-    excludeDates,
-    value,
-    selectsRange,
-    className,
-    'data-testid': dataTestId
-  } = _ref42;
+const DateInput = ({
+  autoFocus = false,
+  disabled = false,
+  error,
+  format = DEFAULT_FORMAT,
+  label,
+  locale,
+  maxDate,
+  minDate,
+  startDate,
+  endDate,
+  name,
+  onBlur,
+  onChange,
+  onFocus,
+  required = false,
+  excludeDates,
+  value,
+  selectsRange,
+  className,
+  'data-testid': dataTestId
+}) => {
   // Linked to: https://github.com/Hacker0x01/react-datepicker/issues/3834
   const ReactDatePicker = DatePicker.default ?? DatePicker;
   const localeCode = (typeof locale === 'string' ? locale : locale?.code) ?? 'en-GB';
@@ -318,43 +194,40 @@ const DateInput = _ref42 => {
         maxDate: maxDate,
         startDate: startDate,
         endDate: endDate,
-        renderCustomHeader: _ref43 => {
-          let {
-            date,
-            decreaseMonth,
-            increaseMonth,
-            prevMonthButtonDisabled,
-            nextMonthButtonDisabled
-          } = _ref43;
-          return jsxs(Stack, {
-            direction: "row",
-            alignItems: "center",
-            justifyContent: "space-between",
-            gap: 3,
-            children: [jsx(Button, {
-              size: "small",
-              icon: "arrow-left",
-              sentiment: "neutral",
-              variant: "ghost",
-              onClick: decreaseMonth,
-              disabled: prevMonthButtonDisabled
-            }), jsx(StyledText, {
-              variant: "bodyStrong",
-              as: "p",
-              children: new Date(date).toLocaleString(localeCode, {
-                month: 'long',
-                year: 'numeric'
-              })
-            }), jsx(Button, {
-              size: "small",
-              icon: "arrow-right",
-              sentiment: "neutral",
-              variant: "ghost",
-              onClick: increaseMonth,
-              disabled: nextMonthButtonDisabled
-            })]
-          });
-        }
+        renderCustomHeader: ({
+          date,
+          decreaseMonth,
+          increaseMonth,
+          prevMonthButtonDisabled,
+          nextMonthButtonDisabled
+        }) => jsxs(Stack, {
+          direction: "row",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: 3,
+          children: [jsx(Button, {
+            size: "small",
+            icon: "arrow-left",
+            sentiment: "neutral",
+            variant: "ghost",
+            onClick: decreaseMonth,
+            disabled: prevMonthButtonDisabled
+          }), jsx(StyledText, {
+            variant: "bodyStrong",
+            as: "p",
+            children: new Date(date).toLocaleString(localeCode, {
+              month: 'long',
+              year: 'numeric'
+            })
+          }), jsx(Button, {
+            size: "small",
+            icon: "arrow-right",
+            sentiment: "neutral",
+            variant: "ghost",
+            onClick: increaseMonth,
+            disabled: nextMonthButtonDisabled
+          })]
+        })
       })
     })]
   });

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

@@ -28,100 +28,85 @@ const CenteredText = /*#__PURE__*/_styled(Text, {
 const Container = /*#__PURE__*/_styled(Stack, {
   shouldForwardProp: prop => !['size', 'bordered'].includes(prop),
   target: "e1m66ceh1"
-})("max-width:", _ref => {
-  let {
-    size
-  } = _ref;
-  return CONTAINER_SIZES[size];
-}, "px;margin:0 auto;", _ref2 => {
-  let {
-    size
-  } = _ref2;
-  return size === 'large' ? 'padding: 0 140px' : null;
-}, ";", _ref3 => {
-  let {
-    theme,
-    bordered
-  } = _ref3;
-  return bordered ? `
+})("max-width:", ({
+  size
+}) => CONTAINER_SIZES[size], "px;margin:0 auto;", ({
+  size
+}) => size === 'large' ? 'padding: 0 140px' : null, ";", ({
+  theme,
+  bordered
+}) => bordered ? `
     border: 1px solid ${theme.colors.neutral.border};
     border-radius: ${theme.radii.default};
-    ` : null;
-}, ";");
+    ` : null, ";");
 const StyledStack = /*#__PURE__*/_styled(Stack, {
   target: "e1m66ceh0"
-})("padding:", _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.space['5'];
-}, ";");
+})("padding:", ({
+  theme
+}) => theme.space['5'], ";");
 /**
  * EmptyState component is used to display a message when there is no data to show.
  */
-const EmptyState = _ref5 => {
-  let {
-    image,
-    title,
-    size = 'large',
-    description,
-    primaryButton,
-    secondaryButton,
-    learnMore,
-    className,
-    bordered,
-    children,
-    'data-testid': dataTestId
-  } = _ref5;
-  return jsx(Container, {
-    size: size,
-    bordered: bordered,
-    className: className,
-    "data-testid": dataTestId,
-    children: jsxs(StyledStack, {
-      gap: 3,
+const EmptyState = ({
+  image,
+  title,
+  size = 'large',
+  description,
+  primaryButton,
+  secondaryButton,
+  learnMore,
+  className,
+  bordered,
+  children,
+  'data-testid': dataTestId
+}) => jsx(Container, {
+  size: size,
+  bordered: bordered,
+  className: className,
+  "data-testid": dataTestId,
+  children: jsxs(StyledStack, {
+    gap: 3,
+    justifyContent: "center",
+    alignItems: "center",
+    children: [jsxs(Stack, {
+      gap: 2,
       justifyContent: "center",
       alignItems: "center",
-      children: [jsxs(Stack, {
-        gap: 2,
-        justifyContent: "center",
+      children: [image && typeof image === 'string' ? jsx("img", {
+        width: IMAGE_SIZES[size],
+        alt: "",
+        src: image
+      }) : image, jsxs(Stack, {
+        gap: 0.5,
         alignItems: "center",
-        children: [image && typeof image === 'string' ? jsx("img", {
-          width: IMAGE_SIZES[size],
-          alt: "",
-          src: image
-        }) : image, jsxs(Stack, {
-          gap: 0.5,
-          alignItems: "center",
-          children: [title ? jsx(CenteredText, {
-            as: "h2",
-            variant: "headingSmall",
-            prominence: "strong",
-            children: title
-          }) : null, jsx(CenteredText, {
-            as: "p",
-            variant: "body",
-            children: description
-          })]
+        children: [title ? jsx(CenteredText, {
+          as: "h2",
+          variant: "headingSmall",
+          prominence: "strong",
+          children: title
+        }) : null, jsx(CenteredText, {
+          as: "p",
+          variant: "body",
+          children: description
         })]
-      }), jsxs(Stack, {
+      })]
+    }), jsxs(Stack, {
+      gap: 2,
+      justifyContent: "center",
+      alignItems: "center",
+      children: [jsxs(Stack, {
+        direction: "row",
         gap: 2,
-        justifyContent: "center",
-        alignItems: "center",
-        children: [jsxs(Stack, {
-          direction: "row",
-          gap: 2,
-          children: [secondaryButton, primaryButton]
-        }), learnMore?.text ? jsx(Link, {
-          href: learnMore.link,
-          target: learnMore.target,
-          sentiment: "info",
-          iconPosition: "right",
-          children: learnMore.text
-        }) : null]
-      }), children]
-    })
-  });
-};
+        children: [secondaryButton, primaryButton]
+      }), learnMore?.text ? jsx(Link, {
+        href: learnMore.link,
+        target: learnMore.target,
+        sentiment: "info",
+        iconPosition: "right",
+        children: learnMore.text
+      }) : null]
+    }), children]
+  })
+});
 
 export { EmptyState };

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

@@ -7,32 +7,25 @@ const ANIMATION_DURATION = 300; // in ms
 const StyledExpandable = /*#__PURE__*/_styled('div', {
   shouldForwardProp: prop => !['opened', 'minHeight'].includes(prop),
   target: "e5hc7t70"
-})("transition:max-height ", ANIMATION_DURATION, "ms ease-out,opacity ", ANIMATION_DURATION, "ms ease-out;overflow:", _ref => {
-  let {
-    opened
-  } = _ref;
-  return opened ? 'visible' : 'hidden';
-}, ";height:auto;max-height:", _ref2 => {
-  let {
-    opened,
-    minHeight
-  } = _ref2;
-  return opened ? 'initial' : `${minHeight}px`;
-}, ";");
+})("transition:max-height ", ANIMATION_DURATION, "ms ease-out,opacity ", ANIMATION_DURATION, "ms ease-out;overflow:", ({
+  opened
+}) => opened ? 'visible' : 'hidden', ";height:auto;max-height:", ({
+  opened,
+  minHeight
+}) => opened ? 'initial' : `${minHeight}px`, ";");
 
 /**
  * The Expandable component is a dynamic React component that allows for the expansion of its children content
  * based on its height. The component comes with a sleek and smooth animation, providing a visually pleasing
  * user experience.
  */
-const Expandable = _ref3 => {
-  let {
-    children,
-    opened,
-    minHeight = 0,
-    className,
-    'data-testid': dataTestId
-  } = _ref3;
+const Expandable = ({
+  children,
+  opened,
+  minHeight = 0,
+  className,
+  'data-testid': dataTestId
+}) => {
   const [height, setHeight] = useState(null);
   const transitionTimer = useRef();
   const ref = useRef(null);