@ultraviolet/ui 1.28.0 → 1.29.0

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

@@ -4,60 +4,45 @@ import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 
 const BarToolTipContainer = /*#__PURE__*/_styled("div", {
   target: "e1ilr3nn1"
-})("display:flex;background:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.colors.neutral.backgroundWeakElevated;
-}, ";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.backgroundWeakElevated, ";border-radius:", ({
+  theme
+}) => theme.radii.small, ";box-shadow:", ({
+  theme
+}) => theme.shadows.tooltip, ";padding:5px 9px;align-items:center;");
 const BarColorSquare = /*#__PURE__*/_styled('span', {
   shouldForwardProp: prop => !['color'].includes(prop),
   target: "e1ilr3nn0"
-})("display:block;width:12px;height:12px;background:", _ref4 => {
-  let {
-    color
-  } = _ref4;
-  return color;
-}, ";margin-right:12px;");
-const BarChartToolTip = _ref5 => {
-  let {
-    formattedValue,
-    indexValue,
-    color,
-    className,
-    'data-testid': dataTestId
-  } = _ref5;
-  return jsxs(BarToolTipContainer, {
-    className: className,
-    "data-testid": dataTestId,
-    children: [jsx("div", {
-      children: jsx(BarColorSquare, {
-        color: color
-      })
-    }), jsxs("div", {
-      children: [jsx(Text, {
-        variant: "bodyStronger",
-        as: "p",
-        sentiment: "primary",
-        children: formattedValue
-      }), jsx(Text, {
-        variant: "bodySmall",
-        as: "p",
-        children: indexValue
-      })]
+})("display:block;width:12px;height:12px;background:", ({
+  color
+}) => color, ";margin-right:12px;");
+const BarChartToolTip = ({
+  formattedValue,
+  indexValue,
+  color,
+  className,
+  'data-testid': dataTestId
+}) => jsxs(BarToolTipContainer, {
+  className: className,
+  "data-testid": dataTestId,
+  children: [jsx("div", {
+    children: jsx(BarColorSquare, {
+      color: color
+    })
+  }), jsxs("div", {
+    children: [jsx(Text, {
+      variant: "bodyStronger",
+      as: "p",
+      sentiment: "primary",
+      children: formattedValue
+    }), jsx(Text, {
+      variant: "bodySmall",
+      as: "p",
+      children: indexValue
     })]
-  });
-};
+  })]
+});
 var BarChartTooltip = BarChartToolTip;
 
 export { BarChartTooltip as default };

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

@@ -20,20 +20,19 @@ const DEFAULT_KEYS = ['value'];
  * See https://nivo.rocks/bar/ for more information.
  * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
-const BarChart = _ref => {
-  let {
-    height = '537px',
-    // to maintain aspect ratio based on our standard 1074px width,
-    margin = DEFAULT_MARGIN,
-    data = DEFAULT_DATA,
-    axisFormatters = DEFAULT_AXISFORMATTER,
-    tickValues,
-    keys = DEFAULT_KEYS,
-    tooltipFunction,
-    chartProps,
-    className,
-    'data-testid': dataTestId
-  } = _ref;
+const BarChart = ({
+  height = '537px',
+  // to maintain aspect ratio based on our standard 1074px width,
+  margin = DEFAULT_MARGIN,
+  data = DEFAULT_DATA,
+  axisFormatters = DEFAULT_AXISFORMATTER,
+  tickValues,
+  keys = DEFAULT_KEYS,
+  tooltipFunction,
+  chartProps,
+  className,
+  'data-testid': dataTestId
+}) => {
   const theme = useTheme();
   const chartTheme = {
     axis: {

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

@@ -5,212 +5,113 @@ import { jsx } from '@emotion/react/jsx-runtime';
 
 const StyledBarWrapper = /*#__PURE__*/_styled("div", {
   target: "ezikjce2"
-})("width:0px;transition:width 500ms;background-color:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.colors.neutral.backgroundWeak;
-}, ";");
+})("width:0px;transition:width 500ms;background-color:", ({
+  theme
+}) => theme.colors.neutral.backgroundWeak, ";");
 const StyledBar = /*#__PURE__*/_styled("div", {
   target: "ezikjce1"
-})("height:50px;font-weight:600;color:", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.colors.neutral.backgroundWeak;
-}, ";font-size:14px;display:flex;align-items:center;padding:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.space[1];
-}, ";width:100%;white-space:nowrap;overflow:hidden;text-shadow:-1px 0 ", _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.colors.neutral.backgroundStronger;
-}, "B3,0 1px ", _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.colors.neutral.backgroundStronger;
-}, "B3,1px 0 ", _ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return theme.colors.neutral.backgroundStronger;
-}, "B3,0 -1px ", _ref7 => {
-  let {
-    theme
-  } = _ref7;
-  return theme.colors.neutral.backgroundStronger;
-}, "B3;");
+})("height:50px;font-weight:600;color:", ({
+  theme
+}) => theme.colors.neutral.backgroundWeak, ";font-size:14px;display:flex;align-items:center;padding:", ({
+  theme
+}) => theme.space[1], ";width:100%;white-space:nowrap;overflow:hidden;text-shadow:-1px 0 ", ({
+  theme
+}) => theme.colors.neutral.backgroundStronger, "B3,0 1px ", ({
+  theme
+}) => theme.colors.neutral.backgroundStronger, "B3,1px 0 ", ({
+  theme
+}) => theme.colors.neutral.backgroundStronger, "B3,0 -1px ", ({
+  theme
+}) => theme.colors.neutral.backgroundStronger, "B3;");
 const StyledContainer = /*#__PURE__*/_styled("div", {
   target: "ezikjce0"
-})("width:100%;display:flex;background-color:", _ref8 => {
-  let {
-    theme
-  } = _ref8;
-  return theme.colors.neutral.backgroundWeak;
-}, ";border-radius:", _ref9 => {
-  let {
-    theme
-  } = _ref9;
-  return theme.radii.default;
-}, ";box-shadow:", _ref10 => {
-  let {
-    theme
-  } = _ref10;
-  return theme.shadows.defaultShadow;
-}, ";overflow:hidden;", StyledBarWrapper, ":nth-child(5n+1){", _ref11 => {
-  let {
-    theme
-  } = _ref11;
-  return `background: linear-gradient(-45deg, ${theme.colors.neutral.backgroundWeak}1A 25%,
+})("width:100%;display:flex;background-color:", ({
+  theme
+}) => theme.colors.neutral.backgroundWeak, ";border-radius:", ({
+  theme
+}) => theme.radii.default, ";box-shadow:", ({
+  theme
+}) => theme.shadows.defaultShadow, ";overflow:hidden;", StyledBarWrapper, ":nth-child(5n+1){", ({
+  theme
+}) => `background: linear-gradient(-45deg, ${theme.colors.neutral.backgroundWeak}1A 25%,
       ${theme.colors.primary.backgroundStrong} 25%, ${theme.colors.primary.backgroundStrong} 50%,
       ${theme.colors.neutral.backgroundWeak}1A 50%, ${theme.colors.neutral.backgroundWeak}1A 75%, ${theme.colors.primary.backgroundStrong}
-       75%);`;
-}, " background-size:30px 30px;background-color:", _ref12 => {
-  let {
-    theme
-  } = _ref12;
-  return theme.colors.primary.backgroundStrong;
-}, ";}", StyledBarWrapper, ":nth-child(5n+2){background-color:", _ref13 => {
-  let {
-    theme
-  } = _ref13;
-  return theme.colors.primary.backgroundStrong;
-}, "D9;background-image:linear-gradient(\n        135deg,\n        ", _ref14 => {
-  let {
-    theme
-  } = _ref14;
-  return theme.colors.neutral.backgroundStrong;
-}, "33 25%,\n        transparent 25%\n      ),linear-gradient(\n        225deg,\n        ", _ref15 => {
-  let {
-    theme
-  } = _ref15;
-  return theme.colors.neutral.backgroundStrong;
-}, "33 25%,\n        transparent 25%\n      ),linear-gradient(\n        45deg,\n        ", _ref16 => {
-  let {
-    theme
-  } = _ref16;
-  return theme.colors.neutral.backgroundStrong;
-}, "33 25%,\n        transparent 25%\n      ),linear-gradient(\n        315deg,\n        ", _ref17 => {
-  let {
-    theme
-  } = _ref17;
-  return theme.colors.neutral.backgroundStrong;
-}, "33 25%,\n        ", _ref18 => {
-  let {
-    theme
-  } = _ref18;
-  return theme.colors.primary.backgroundStrong;
-}, "12 25%\n      );background-position:10px 0,10px 0,0 0,0 0;background-size:10px 10px;background-repeat:repeat;}", StyledBarWrapper, ":nth-child(5n+3){", _ref19 => {
-  let {
-    theme
-  } = _ref19;
-  return `background: linear-gradient(-45deg, ${theme.colors.neutral.backgroundWeak}1A 25%,
+       75%);`, " background-size:30px 30px;background-color:", ({
+  theme
+}) => theme.colors.primary.backgroundStrong, ";}", StyledBarWrapper, ":nth-child(5n+2){background-color:", ({
+  theme
+}) => theme.colors.primary.backgroundStrong, "D9;background-image:linear-gradient(\n        135deg,\n        ", ({
+  theme
+}) => theme.colors.neutral.backgroundStrong, "33 25%,\n        transparent 25%\n      ),linear-gradient(\n        225deg,\n        ", ({
+  theme
+}) => theme.colors.neutral.backgroundStrong, "33 25%,\n        transparent 25%\n      ),linear-gradient(\n        45deg,\n        ", ({
+  theme
+}) => theme.colors.neutral.backgroundStrong, "33 25%,\n        transparent 25%\n      ),linear-gradient(\n        315deg,\n        ", ({
+  theme
+}) => theme.colors.neutral.backgroundStrong, "33 25%,\n        ", ({
+  theme
+}) => theme.colors.primary.backgroundStrong, "12 25%\n      );background-position:10px 0,10px 0,0 0,0 0;background-size:10px 10px;background-repeat:repeat;}", StyledBarWrapper, ":nth-child(5n+3){", ({
+  theme
+}) => `background: linear-gradient(-45deg, ${theme.colors.neutral.backgroundWeak}1A 25%,
       ${theme.colors.primary.backgroundStrong}4D 25%, ${theme.colors.primary.backgroundStrong}4D 50%,
       ${theme.colors.neutral.backgroundWeak}1A 50%, ${theme.colors.neutral.backgroundWeak}1A 75%, ${theme.colors.primary.backgroundStrong}4D
-       75%);`;
-}, " background-size:30px 30px;background-color:", _ref20 => {
-  let {
-    theme
-  } = _ref20;
-  return theme.colors.secondary.backgroundStrong;
-}, ";}", StyledBarWrapper, ":nth-child(5n+4){background-color:", _ref21 => {
-  let {
-    theme
-  } = _ref21;
-  return theme.colors.secondary.backgroundStrong;
-}, ";background-image:linear-gradient(\n        135deg,\n        ", _ref22 => {
-  let {
-    theme
-  } = _ref22;
-  return theme.colors.neutral.backgroundWeak;
-}, "33 25%,\n        transparent 25%\n      ),linear-gradient(\n        225deg,\n        ", _ref23 => {
-  let {
-    theme
-  } = _ref23;
-  return theme.colors.neutral.backgroundWeak;
-}, "33 25%,\n        transparent 25%\n      ),linear-gradient(\n        45deg,\n        ", _ref24 => {
-  let {
-    theme
-  } = _ref24;
-  return theme.colors.neutral.backgroundWeak;
-}, "33 25%,\n        transparent 25%\n      ),linear-gradient(\n        315deg,\n        ", _ref25 => {
-  let {
-    theme
-  } = _ref25;
-  return theme.colors.neutral.backgroundWeak;
-}, "33 25%,\n        ", _ref26 => {
-  let {
-    theme
-  } = _ref26;
-  return theme.colors.secondary.backgroundStrong;
-}, " 25%\n      );background-position:10px 0,10px 0,0 0,0 0;background-size:10px 10px;background-repeat:repeat;}", StyledBarWrapper, ":nth-child(5n+5){", _ref27 => {
-  let {
-    theme
-  } = _ref27;
-  return `background: linear-gradient(-45deg, ${theme.colors.neutral.backgroundWeak}40 25%,
+       75%);`, " background-size:30px 30px;background-color:", ({
+  theme
+}) => theme.colors.secondary.backgroundStrong, ";}", StyledBarWrapper, ":nth-child(5n+4){background-color:", ({
+  theme
+}) => theme.colors.secondary.backgroundStrong, ";background-image:linear-gradient(\n        135deg,\n        ", ({
+  theme
+}) => theme.colors.neutral.backgroundWeak, "33 25%,\n        transparent 25%\n      ),linear-gradient(\n        225deg,\n        ", ({
+  theme
+}) => theme.colors.neutral.backgroundWeak, "33 25%,\n        transparent 25%\n      ),linear-gradient(\n        45deg,\n        ", ({
+  theme
+}) => theme.colors.neutral.backgroundWeak, "33 25%,\n        transparent 25%\n      ),linear-gradient(\n        315deg,\n        ", ({
+  theme
+}) => theme.colors.neutral.backgroundWeak, "33 25%,\n        ", ({
+  theme
+}) => theme.colors.secondary.backgroundStrong, " 25%\n      );background-position:10px 0,10px 0,0 0,0 0;background-size:10px 10px;background-repeat:repeat;}", StyledBarWrapper, ":nth-child(5n+5){", ({
+  theme
+}) => `background: linear-gradient(-45deg, ${theme.colors.neutral.backgroundWeak}40 25%,
       ${theme.colors.secondary.backgroundStrong}40 25%, ${theme.colors.secondary.backgroundStrong}40 50%,
       ${theme.colors.neutral.backgroundWeak}40 50%, ${theme.colors.neutral.backgroundWeak}40 75%, ${theme.colors.secondary.backgroundStrong}40
-       75%);`;
-}, " background-size:30px 30px;background-color:", _ref28 => {
-  let {
-    theme
-  } = _ref28;
-  return theme.colors.secondary.backgroundStrong;
-}, "BF;}");
+       75%);`, " background-size:30px 30px;background-color:", ({
+  theme
+}) => theme.colors.secondary.backgroundStrong, "BF;}");
 
 /**
  * BarStack is a graphic component that is used to show data in one dimension.
  */
-const BarStack = _ref29 => {
-  let {
-    data,
-    total,
-    className,
-    'data-testid': dataTestId
-  } = _ref29;
-  const computedTotal = useMemo(() => total ?? data.reduce((acc, _ref30) => {
-    let {
-      value
-    } = _ref30;
-    return acc + value;
-  }, 0), [total, data]);
+const BarStack = ({
+  data,
+  total,
+  className,
+  'data-testid': dataTestId
+}) => {
+  const computedTotal = useMemo(() => total ?? data.reduce((acc, {
+    value
+  }) => acc + value, 0), [total, data]);
   return jsx(StyledContainer, {
     "data-testid": dataTestId,
     className: className,
-    children: data.map(_ref31 => {
-      let {
-        id,
-        value,
-        text,
-        onClick,
-        onDoubleClick,
-        onMouseEnter,
-        onMouseLeave,
-        onMouseDown,
-        onMouseUp,
-        tooltip
-      } = _ref31;
-      return jsx(StyledBarWrapper, {
-        style: {
-          width: `${value / computedTotal * 100}%`
-        },
-        children: tooltip ? jsx(Tooltip, {
-          id: `tooltip-${id}`,
-          text: tooltip,
-          children: jsx(StyledBar, {
-            onMouseDown: onMouseDown,
-            onMouseUp: onMouseUp,
-            onClick: onClick,
-            onDoubleClick: onDoubleClick,
-            onMouseEnter: onMouseEnter,
-            onMouseLeave: onMouseLeave,
-            children: text
-          })
-        }) : jsx(StyledBar, {
+    children: data.map(({
+      id,
+      value,
+      text,
+      onClick,
+      onDoubleClick,
+      onMouseEnter,
+      onMouseLeave,
+      onMouseDown,
+      onMouseUp,
+      tooltip
+    }) => jsx(StyledBarWrapper, {
+      style: {
+        width: `${value / computedTotal * 100}%`
+      },
+      children: tooltip ? jsx(Tooltip, {
+        id: `tooltip-${id}`,
+        text: tooltip,
+        children: jsx(StyledBar, {
           onMouseDown: onMouseDown,
           onMouseUp: onMouseUp,
           onClick: onClick,
@@ -219,8 +120,16 @@ const BarStack = _ref29 => {
           onMouseLeave: onMouseLeave,
           children: text
         })
-      }, id);
-    })
+      }) : jsx(StyledBar, {
+        onMouseDown: onMouseDown,
+        onMouseUp: onMouseUp,
+        onClick: onClick,
+        onDoubleClick: onDoubleClick,
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
+        children: text
+      })
+    }, id))
   });
 };
 

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

@@ -22,52 +22,42 @@ const StyledOl = /*#__PURE__*/_styled("ol", {
 });
 const ItemContainer = /*#__PURE__*/_styled("li", {
   target: "ej0p0s40"
-})("display:inline;&[aria-current='page']{color:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.colors.neutral.textWeak;
-}, ";}&:not(:last-child)::after{content:'\u203A';margin:0 8px;}", _ref2 => {
-  let {
-    onClick
-  } = _ref2;
-  return onClick ? `
+})("display:inline;&[aria-current='page']{color:", ({
+  theme
+}) => theme.colors.neutral.textWeak, ";}&:not(:last-child)::after{content:'\u203A';margin:0 8px;}", ({
+  onClick
+}) => onClick ? `
     cursor: pointer;
     &[aria-disabled="true"] {
       pointer-events: none;
     }
-` : ``;
-}, ";");
-const Item = _ref3 => {
-  let {
-    to,
-    children,
-    disabled = false,
-    'aria-current': ariaCurrent,
-    onClick,
-    step
-  } = _ref3;
-  return jsx(ItemContainer, {
-    "aria-disabled": disabled,
-    onClick: onClick ? event => onClick(event, step ?? -1) : undefined,
-    "aria-current": ariaCurrent,
-    children: to ? jsx(Link, {
-      sentiment: "primary",
-      href: to,
-      children: contractString(children)
-    }) : contractString(children)
-  });
-};
+` : ``, ";");
+const Item = ({
+  to,
+  children,
+  disabled = false,
+  'aria-current': ariaCurrent,
+  onClick,
+  step
+}) => jsx(ItemContainer, {
+  "aria-disabled": disabled,
+  onClick: onClick ? event => onClick(event, step ?? -1) : undefined,
+  "aria-current": ariaCurrent,
+  children: to ? jsx(Link, {
+    sentiment: "primary",
+    href: to,
+    children: contractString(children)
+  }) : contractString(children)
+});
 /**
  * Breadcrumbs component is used to display a navigation path with links to the parent pages.
  */
-const Breadcrumbs = _ref4 => {
-  let {
-    children,
-    selected: selectedProp,
-    className,
-    'data-testid': dataTestId
-  } = _ref4;
+const Breadcrumbs = ({
+  children,
+  selected: selectedProp,
+  className,
+  'data-testid': dataTestId
+}) => {
   const selected = selectedProp !== undefined ? selectedProp : Children.count(children) - 1;
   return jsx("nav", {
     "aria-label": "breadcrumb",

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

@@ -21,11 +21,10 @@ const sizes = {
     font-size: 14px;
   `
 };
-const sentimentStyles = _ref => {
-  let {
-    theme,
-    prominence
-  } = _ref;
+const sentimentStyles = ({
+  theme,
+  prominence
+}) => {
   const definedProminence = prominence === PROMINENCES.strong ? capitalize(PROMINENCES.strong) : '';
   const text = `text${definedProminence}`;
   const background = `background${definedProminence}`;
@@ -50,60 +49,48 @@ const sentimentStyles = _ref => {
     `
   };
 };
-const sizeStyles = _ref2 => {
-  let {
-    size
-  } = _ref2;
-  return sizes[size];
-};
+const sizeStyles = ({
+  size
+}) => sizes[size];
 const StyledContainer = /*#__PURE__*/_styled('div', {
   target: "e11loam60"
-})("display:inline-flex;border-radius:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.radii.circle;
-}, ";justify-content:center;align-items:center;", _ref4 => {
-  let {
-    theme,
-    prominence,
-    sentiment
-  } = _ref4;
-  return sentimentStyles({
-    theme,
-    prominence
-  })[sentiment];
-}, " ", sizeStyles, ";");
+})("display:inline-flex;border-radius:", ({
+  theme
+}) => theme.radii.circle, ";justify-content:center;align-items:center;", ({
+  theme,
+  prominence,
+  sentiment
+}) => sentimentStyles({
+  theme,
+  prominence
+})[sentiment], " ", sizeStyles, ";");
 /**
  * Bullet component is used to display a small icon or text with a colored background in a circle.
  */
-const Bullet = _ref5 => {
-  let {
-    className,
-    sentiment = 'neutral',
-    size = 'medium',
-    icon,
-    text,
-    tooltip,
-    tooltipBaseId,
-    'data-testid': dataTestId,
-    prominence = 'default'
-  } = _ref5;
-  return jsx(Tooltip, {
-    id: tooltipBaseId,
-    text: tooltip,
-    children: jsx(StyledContainer, {
-      sentiment: sentiment,
-      size: size,
-      className: className,
-      "data-testid": dataTestId,
-      prominence: prominence,
-      children: icon ? jsx(Icon, {
-        name: icon,
-        size: "50%"
-      }) : text
-    })
-  });
-};
+const Bullet = ({
+  className,
+  sentiment = 'neutral',
+  size = 'medium',
+  icon,
+  text,
+  tooltip,
+  tooltipBaseId,
+  'data-testid': dataTestId,
+  prominence = 'default'
+}) => jsx(Tooltip, {
+  id: tooltipBaseId,
+  text: tooltip,
+  children: jsx(StyledContainer, {
+    sentiment: sentiment,
+    size: size,
+    className: className,
+    "data-testid": dataTestId,
+    prominence: prominence,
+    children: icon ? jsx(Icon, {
+      name: icon,
+      size: "50%"
+    }) : text
+  })
+});
 
 export { Bullet, PROMINENCES };