@ultraviolet/ui 1.28.0 → 1.29.0

package/dist/src/components/GlobalAlert/GlobalAlertLink.js

@@ -2,19 +2,18 @@ import { useTheme } from '@emotion/react';
 import { Link } from '../Link/index.js';
 import { jsx } from '@emotion/react/jsx-runtime';
 
-const GlobalAlertLink = _ref => {
-  let {
-    children,
-    href,
-    target,
-    download,
-    rel,
-    className,
-    onClick,
-    'aria-label': ariaLabel,
-    oneLine = false,
-    'data-testid': dataTestId
-  } = _ref;
+const GlobalAlertLink = ({
+  children,
+  href,
+  target,
+  download,
+  rel,
+  className,
+  onClick,
+  'aria-label': ariaLabel,
+  oneLine = false,
+  'data-testid': dataTestId
+}) => {
   const {
     theme
   } = useTheme();

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

@@ -12,42 +12,29 @@ const CloseButton = /*#__PURE__*/_styled(Button, {
 })("background:none;position:absolute;right:", SIZE_HEIGHT.xsmall, "px;&:hover,&:focus,&:active{background:none;}");
 const Container = /*#__PURE__*/_styled(Stack, {
   target: "ewvyccp0"
-})("width:100%;height:56px;padding:0 ", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.space['2'];
-}, ";&[data-variant='info']{background-color:", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.colors.info.backgroundStrong;
-}, ";}&[data-variant='danger']{background-color:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.colors.danger.backgroundStrong;
-}, ";}&[data-variant='promotional']{background:", _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.colors.other.gradients.background.aqua;
-}, ";}");
+})("width:100%;height:56px;padding:0 ", ({
+  theme
+}) => theme.space['2'], ";&[data-variant='info']{background-color:", ({
+  theme
+}) => theme.colors.info.backgroundStrong, ";}&[data-variant='danger']{background-color:", ({
+  theme
+}) => theme.colors.danger.backgroundStrong, ";}&[data-variant='promotional']{background:", ({
+  theme
+}) => theme.colors.other.gradients.background.aqua, ";}");
 /**
  * GlobalAlert is a component that is used to display a global alert message.
  * It has its own internal state and can be closed by clicking on the close button.
  */
-const GlobalAlert = _ref5 => {
-  let {
-    children,
-    variant = 'info',
-    onClose,
-    closable = true,
-    buttonText,
-    onClickButton,
-    className,
-    'data-testid': dataTestId
-  } = _ref5;
+const GlobalAlert = ({
+  children,
+  variant = 'info',
+  onClose,
+  closable = true,
+  buttonText,
+  onClickButton,
+  className,
+  'data-testid': dataTestId
+}) => {
   const {
     theme
   } = useTheme();

package/dist/src/components/LineChart/CustomLegend.js

@@ -30,18 +30,15 @@ const StyledText = /*#__PURE__*/_styled(Text, {
   styles: "text-align:right;flex:1;min-width:72px;align-self:center",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-const Cell = _ref => {
-  let {
-    value,
-    variant
-  } = _ref;
-  return jsx(StyledText, {
-    variant: variant,
-    color: "neutral",
-    as: "span",
-    children: value
-  });
-};
+const Cell = ({
+  value,
+  variant
+}) => jsx(StyledText, {
+  variant: variant,
+  color: "neutral",
+  as: "span",
+  children: value
+});
 const CellValueContainer = /*#__PURE__*/_styled("div", {
   target: "erndk5t2"
 })(process.env.NODE_ENV === "production" ? {
@@ -65,83 +62,77 @@ const LongContainer = /*#__PURE__*/_styled("div", {
 const noop = value => value.toString();
 const StyledContainer = /*#__PURE__*/_styled("div", {
   target: "erndk5t0"
-})("margin-top:", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.space[2];
-}, ";");
-const CustomLegend = _ref3 => {
-  let {
-    axisTransformer = noop,
-    data,
-    selected,
-    setSelected,
-    className,
-    'data-testid': dataTestId
-  } = _ref3;
-  return jsxs(StyledContainer, {
-    className: className,
-    "data-testid": dataTestId,
-    children: [jsxs("div", {
-      css: styles.head,
-      children: [jsx(LongContainer, {
-        children: "Legend"
-      }), jsx(Cell, {
-        variant: "body",
-        value: "Minimum"
-      }), jsx(Cell, {
-        variant: "body",
-        value: "Maximum"
-      }), jsx(Cell, {
-        variant: "body",
-        value: "Average"
-      }), jsx(Cell, {
-        variant: "body",
-        value: "Current"
-      })]
-    }), jsx("div", {
-      css: styles.body,
-      children: data?.map((row, index) => {
-        const values = row.data.map(val => val.y);
-        const labelIndexed = `${row.id}${index}`;
-        const id = row.id.toString();
-        return jsxs("div", {
-          css: styles.row,
-          children: [jsx(LongContainer, {
-            children: jsx(Checkbox, {
-              checked: selected.includes(labelIndexed),
-              name: id,
-              onChange: () => setSelected([...getSelected(id, index, selected)]),
-              children: jsxs(CellValueContainer, {
-                children: [jsx(Text, {
-                  as: "span",
-                  variant: "bodySmall",
-                  sentiment: "neutral",
-                  children: row?.['label']
-                }), jsx("div", {
-                  "data-testid": `label-${id}`,
-                  css: styles.legend(index)
-                })]
-              })
-            })
-          }), jsx(Cell, {
-            variant: "bodySmall",
-            value: axisTransformer(getMin(values))
-          }), jsx(Cell, {
-            variant: "bodySmall",
-            value: axisTransformer(getMax(values))
-          }), jsx(Cell, {
-            variant: "bodySmall",
-            value: axisTransformer(getAverage(values))
-          }), jsx(Cell, {
-            variant: "bodySmall",
-            value: axisTransformer(getCurrent(values))
-          })]
-        }, labelIndexed);
-      })
+})("margin-top:", ({
+  theme
+}) => theme.space[2], ";");
+const CustomLegend = ({
+  axisTransformer = noop,
+  data,
+  selected,
+  setSelected,
+  className,
+  'data-testid': dataTestId
+}) => jsxs(StyledContainer, {
+  className: className,
+  "data-testid": dataTestId,
+  children: [jsxs("div", {
+    css: styles.head,
+    children: [jsx(LongContainer, {
+      children: "Legend"
+    }), jsx(Cell, {
+      variant: "body",
+      value: "Minimum"
+    }), jsx(Cell, {
+      variant: "body",
+      value: "Maximum"
+    }), jsx(Cell, {
+      variant: "body",
+      value: "Average"
+    }), jsx(Cell, {
+      variant: "body",
+      value: "Current"
     })]
-  });
-};
+  }), jsx("div", {
+    css: styles.body,
+    children: data?.map((row, index) => {
+      const values = row.data.map(val => val.y);
+      const labelIndexed = `${row.id}${index}`;
+      const id = row.id.toString();
+      return jsxs("div", {
+        css: styles.row,
+        children: [jsx(LongContainer, {
+          children: jsx(Checkbox, {
+            checked: selected.includes(labelIndexed),
+            name: id,
+            onChange: () => setSelected([...getSelected(id, index, selected)]),
+            children: jsxs(CellValueContainer, {
+              children: [jsx(Text, {
+                as: "span",
+                variant: "bodySmall",
+                sentiment: "neutral",
+                children: row?.['label']
+              }), jsx("div", {
+                "data-testid": `label-${id}`,
+                css: styles.legend(index)
+              })]
+            })
+          })
+        }), jsx(Cell, {
+          variant: "bodySmall",
+          value: axisTransformer(getMin(values))
+        }), jsx(Cell, {
+          variant: "bodySmall",
+          value: axisTransformer(getMax(values))
+        }), jsx(Cell, {
+          variant: "bodySmall",
+          value: axisTransformer(getAverage(values))
+        }), jsx(Cell, {
+          variant: "bodySmall",
+          value: axisTransformer(getCurrent(values))
+        })]
+      }, labelIndexed);
+    })
+  })]
+});
 
 export { CustomLegend };

package/dist/src/components/LineChart/Tooltip.js

@@ -4,55 +4,40 @@ import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 
 const LineTooltipContainer = /*#__PURE__*/_styled("div", {
   target: "e11niu3b1"
-})("display:flex;background:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.colors.neutral.backgroundStronger;
-}, ";border-radius:", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.radii.small;
-}, ";box-shadow:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.shadows.tooltip;
-}, ";padding:5px 9px;align-items:center;");
+})("display:flex;background:", ({
+  theme
+}) => theme.colors.neutral.backgroundStronger, ";border-radius:", ({
+  theme
+}) => theme.radii.small, ";box-shadow:", ({
+  theme
+}) => theme.shadows.tooltip, ";padding:5px 9px;align-items:center;");
 const LineColorSquare = /*#__PURE__*/_styled("span", {
   target: "e11niu3b0"
-})("display:block;width:12px;height:12px;background:", _ref4 => {
-  let {
-    color
-  } = _ref4;
-  return color;
-}, ";margin-right:12px;");
-const LineChartTooltip = _ref5 => {
-  let {
-    point
-  } = _ref5;
-  return jsxs(LineTooltipContainer, {
-    children: [jsx("div", {
-      children: jsx(LineColorSquare, {
-        color: point.serieColor
-      })
-    }), jsxs("div", {
-      children: [jsx(Text, {
-        variant: "bodyStronger",
-        sentiment: "neutral",
-        prominence: "stronger",
-        as: "div",
-        children: point.data.yFormatted
-      }), jsx(Text, {
-        variant: "bodySmall",
-        sentiment: "neutral",
-        prominence: "stronger",
-        as: "div",
-        children: point.data.xFormatted
-      })]
+})("display:block;width:12px;height:12px;background:", ({
+  color
+}) => color, ";margin-right:12px;");
+const LineChartTooltip = ({
+  point
+}) => jsxs(LineTooltipContainer, {
+  children: [jsx("div", {
+    children: jsx(LineColorSquare, {
+      color: point.serieColor
+    })
+  }), jsxs("div", {
+    children: [jsx(Text, {
+      variant: "bodyStronger",
+      sentiment: "neutral",
+      prominence: "stronger",
+      as: "div",
+      children: point.data.yFormatted
+    }), jsx(Text, {
+      variant: "bodySmall",
+      sentiment: "neutral",
+      prominence: "stronger",
+      as: "div",
+      children: point.data.xFormatted
     })]
-  });
-};
+  })]
+});
 
 export { LineChartTooltip };

package/dist/src/components/LineChart/helpers.js

@@ -4,64 +4,29 @@ const parse = data => {
   if (data instanceof Date) return data.getTime();
   return 0;
 };
-const getMin = function (values) {
-  if (values === void 0) {
-    values = [];
-  }
-  return values.length ? Math.min(...values.map(parse)) : 0;
-};
-const getMax = function (values) {
-  if (values === void 0) {
-    values = [];
-  }
-  return values.length ? Math.max(...values.map(parse)) : 0;
-};
-const getAverage = function (values) {
-  if (values === void 0) {
-    values = [];
-  }
-  return values.length ? Math.round(values.reduce((sum, curr) => sum + parse(curr), 0) / values.length * 100) / 100 : 0;
-};
+const getMin = (values = []) => values.length ? Math.min(...values.map(parse)) : 0;
+const getMax = (values = []) => values.length ? Math.max(...values.map(parse)) : 0;
+const getAverage = (values = []) => values.length ? Math.round(values.reduce((sum, curr) => sum + parse(curr), 0) / values.length * 100) / 100 : 0;
 const getMaxChartValue = preppedData => {
   if (!preppedData?.length) return 0;
-  const maximum = Math.max(...preppedData.map(_ref => {
-    let {
-      data
-    } = _ref;
-    return getMax(data.map(_ref2 => {
-      let {
-        y
-      } = _ref2;
-      return y || 0;
-    }));
-  }));
+  const maximum = Math.max(...preppedData.map(({
+    data
+  }) => getMax(data.map(({
+    y
+  }) => y || 0))));
   return Math.ceil(maximum + maximum * 0.1);
 };
 const getMinChartValue = preppedData => {
   if (!preppedData?.length) return 0;
-  const minimum = Math.min(...preppedData.map(_ref3 => {
-    let {
-      data
-    } = _ref3;
-    return getMin(data.map(_ref4 => {
-      let {
-        y
-      } = _ref4;
-      return y || 0;
-    }));
-  }));
+  const minimum = Math.min(...preppedData.map(({
+    data
+  }) => getMin(data.map(({
+    y
+  }) => y || 0))));
   return Math.floor(minimum - minimum * 0.1);
 };
-const getCurrent = function (values) {
-  if (values === void 0) {
-    values = [];
-  }
-  return values.length ? values[values.length - 1] : 0;
-};
-const getSelected = function (label, index, selected) {
-  if (selected === void 0) {
-    selected = [];
-  }
+const getCurrent = (values = []) => values.length ? values[values.length - 1] : 0;
+const getSelected = (label, index, selected = []) => {
   const labelIndexed = label + index.toString();
   const found = selected.indexOf(labelIndexed);
   if (found > -1) {

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

@@ -30,21 +30,20 @@ const DEFAULT_CHARTPROPS = {};
  * See https://nivo.rocks/line/ for more information.
  * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
-const LineChart = _ref => {
-  let {
-    height = '537px',
-    // to maintain aspect ratio based on our standard 1074px width
-    margin = DEFAULT_MARGIN,
-    xScale = DEFAULT_XSCALE,
-    yScale = DEFAULT_YSCALE,
-    data,
-    withLegend = false,
-    axisFormatters,
-    pointFormatters,
-    tickValues,
-    chartProps = DEFAULT_CHARTPROPS,
-    'data-testid': dataTestId
-  } = _ref;
+const LineChart = ({
+  height = '537px',
+  // to maintain aspect ratio based on our standard 1074px width
+  margin = DEFAULT_MARGIN,
+  xScale = DEFAULT_XSCALE,
+  yScale = DEFAULT_YSCALE,
+  data,
+  withLegend = false,
+  axisFormatters,
+  pointFormatters,
+  tickValues,
+  chartProps = DEFAULT_CHARTPROPS,
+  'data-testid': dataTestId
+}) => {
   const theme = useTheme();
   const dataset = {
     datasets: data?.map(d => ({
@@ -66,28 +65,19 @@ const LineChart = _ref => {
     fontSize: 12,
     textColor: theme.colors.neutral.textWeak
   };
-  const [selected, setSelected] = useState(dataset.datasets?.map((_ref2, index) => {
-    let {
-      id
-    } = _ref2;
-    return `${id}${index}`;
-  }));
-  const finalData = dataset.datasets?.filter((_ref3, index) => {
-    let {
-      id
-    } = _ref3;
-    return selected ? selected.includes(`${id}${index}`) : false;
-  });
+  const [selected, setSelected] = useState(dataset.datasets?.map(({
+    id
+  }, index) => `${id}${index}`));
+  const finalData = dataset.datasets?.filter(({
+    id
+  }, index) => selected ? selected.includes(`${id}${index}`) : false);
   useEffect(() => {
     if (selected !== undefined) {
       return;
     }
-    setSelected(dataset.datasets?.map((_ref4, index) => {
-      let {
-        id
-      } = _ref4;
-      return `${id}${index}`;
-    }));
+    setSelected(dataset.datasets?.map(({
+      id
+    }, index) => `${id}${index}`));
   }, [dataset.datasets, selected]);
   const localColors = getLegendColor(theme);
   return jsxs(Fragment, {

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

@@ -20,43 +20,32 @@ const BLANK_TARGET_ICON_SIZE = 14;
 const TRANSITION_DURATION = 250;
 const StyledExternalIconContainer = /*#__PURE__*/_styled("span", {
   target: "e1afnb7a1"
-})("display:inline-flex;padding-bottom:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.space['0.5'];
-}, ";");
+})("display:inline-flex;padding-bottom:", ({
+  theme
+}) => theme.space['0.5'], ";");
 const StyledLink = /*#__PURE__*/_styled('a', {
   shouldForwardProp: prop => !['sentiment', 'iconPosition', 'as', 'oneLine'].includes(prop),
   target: "e1afnb7a0"
-})("background-color:transparent;border:none;padding:0;color:", _ref2 => {
-  let {
-    theme,
-    sentiment,
-    prominence
-  } = _ref2;
+})("background-color:transparent;border:none;padding:0;color:", ({
+  theme,
+  sentiment,
+  prominence
+}) => {
   const definedProminence = capitalize(PROMINENCES[prominence ?? 'default']);
   theme.colors[sentiment];
   const text = `text${definedProminence}`;
   return theme.colors[sentiment]?.[text] ?? theme.colors.neutral.text;
-}, ";text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;text-decoration-color:transparent;display:inline-flex;flex-direction:row;align-items:center;transition:text-decoration-color ", TRANSITION_DURATION, "ms ease-out;", StyledIcon, "{transition:transform ", TRANSITION_DURATION, "ms ease-out;}gap:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.space['1'];
-}, ";position:relative;cursor:pointer;>*{pointer-events:none;}", _ref4 => {
-  let {
-    oneLine
-  } = _ref4;
-  return oneLine ? `white-space: nowrap;
+}, ";text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;text-decoration-color:transparent;display:inline-flex;flex-direction:row;align-items:center;transition:text-decoration-color ", TRANSITION_DURATION, "ms ease-out;", StyledIcon, "{transition:transform ", TRANSITION_DURATION, "ms ease-out;}gap:", ({
+  theme
+}) => theme.space['1'], ";position:relative;cursor:pointer;>*{pointer-events:none;}", ({
+  oneLine
+}) => oneLine ? `white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-    display: block;` : 'width: fit-content;';
-}, " ", _ref5 => {
-  let {
-    size,
-    theme
-  } = _ref5;
+    display: block;` : 'width: fit-content;', " ", ({
+  size,
+  theme
+}) => {
   const variant = size === 'small' ? 'bodySmallStrong' : 'bodyStrong';
   return `
       font-size: ${theme.typography[variant].fontSize};
@@ -67,53 +56,45 @@ const StyledLink = /*#__PURE__*/_styled('a', {
       paragraph-spacing: ${theme.typography[variant].paragraphSpacing};
       text-case: ${theme.typography[variant].textCase};
     `;
-}, " &:hover,&:focus{outline:none;text-decoration:underline;text-decoration-thickness:1px;", _ref6 => {
-  let {
-    theme,
-    sentiment,
-    prominence
-  } = _ref6;
+}, " &:hover,&:focus{outline:none;text-decoration:underline;text-decoration-thickness:1px;", ({
+  theme,
+  sentiment,
+  prominence
+}) => {
   const definedProminence = capitalize(PROMINENCES[prominence ?? 'default']);
   theme.colors[sentiment];
   const text = `text${definedProminence}Hover`;
   return `
         color: ${theme.colors[sentiment]?.[text] ?? theme.colors.neutral.textHover};
         text-decoration-color: ${theme.colors[sentiment]?.[text] ?? theme.colors.neutral.textHover};`;
-}, ";", StyledIcon, "{transform:", _ref7 => {
-  let {
-    theme,
-    iconPosition
-  } = _ref7;
-  return iconPosition === 'left' ? `translate(${theme.space['0.5']}, 0)` : `translate(-${theme.space['0.5']}, 0)`;
-}, ";}}&[data-variant='inline']{text-decoration:underline;text-decoration-thickness:1px;}&:hover::after,&:focus::after{background-color:", _ref8 => {
-  let {
-    theme,
-    sentiment
-  } = _ref8;
-  return theme.colors[sentiment]?.text ?? theme.colors.neutral.text;
-}, ";}&:active{text-decoration-thickness:2px;}");
+}, ";", StyledIcon, "{transform:", ({
+  theme,
+  iconPosition
+}) => iconPosition === 'left' ? `translate(${theme.space['0.5']}, 0)` : `translate(-${theme.space['0.5']}, 0)`, ";}}&[data-variant='inline']{text-decoration:underline;text-decoration-thickness:1px;}&:hover::after,&:focus::after{background-color:", ({
+  theme,
+  sentiment
+}) => theme.colors[sentiment]?.text ?? theme.colors.neutral.text, ";}&:active{text-decoration-thickness:2px;}");
 
 /**
  * Link is a component used to navigate between pages or to external websites.
  */
-const Link = /*#__PURE__*/forwardRef((_ref9, ref) => {
-  let {
-    children,
-    href,
-    target,
-    download,
-    sentiment = 'info',
-    prominence,
-    size = 'large',
-    iconPosition,
-    rel,
-    className,
-    onClick,
-    'aria-label': ariaLabel,
-    oneLine = false,
-    'data-testid': dataTestId,
-    variant = 'standalone'
-  } = _ref9;
+const Link = /*#__PURE__*/forwardRef(({
+  children,
+  href,
+  target,
+  download,
+  sentiment = 'info',
+  prominence,
+  size = 'large',
+  iconPosition,
+  rel,
+  className,
+  onClick,
+  'aria-label': ariaLabel,
+  oneLine = false,
+  'data-testid': dataTestId,
+  variant = 'standalone'
+}, ref) => {
   const isBlank = target === '_blank';
   const computedRel = rel || (isBlank ? 'noopener noreferrer' : undefined);
   const [isTruncated, setIsTruncated] = useState(false);