@ultraviolet/ui 1.28.0 → 1.29.0

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

@@ -3,20 +3,14 @@ import { jsx } from '@emotion/react/jsx-runtime';
 
 const StyledBody = /*#__PURE__*/_styled("div", {
   target: "e1wm4no70"
-})("display:flex;flex-direction:column;gap:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.space['2'];
-}, ";");
-const Body = _ref2 => {
-  let {
-    children
-  } = _ref2;
-  return jsx(StyledBody, {
-    role: "rowgroup",
-    children: children
-  });
-};
+})("display:flex;flex-direction:column;gap:", ({
+  theme
+}) => theme.space['2'], ";");
+const Body = ({
+  children
+}) => jsx(StyledBody, {
+  role: "rowgroup",
+  children: children
+});
 
 export { Body };

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

@@ -13,13 +13,12 @@ const StyledCell = /*#__PURE__*/_styled("div", {
   styles: "display:flex;justify-content:center;flex-direction:column;min-height:60px",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-const Cell = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    children,
-    className,
-    preventClick,
-    'data-testid': dataTestid
-  } = _ref;
+const Cell = /*#__PURE__*/forwardRef(({
+  children,
+  className,
+  preventClick,
+  'data-testid': dataTestid
+}, ref) => {
   const handleClick = event => {
     if (preventClick) {
       event.stopPropagation();

package/dist/src/components/List/HeaderCell.js

@@ -12,12 +12,9 @@ const ArrowUpIcon = /*#__PURE__*/_styled(Icon, {
 })();
 const StyledIconContainer = /*#__PURE__*/_styled(Stack, {
   target: "e1q5cnom1"
-})("color:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.colors.neutral.text;
-}, ";&[aria-disabled='true']{cursor:not-allowed;}");
+})("color:", ({
+  theme
+}) => theme.colors.neutral.text, ";&[aria-disabled='true']{cursor:not-allowed;}");
 const SortIcon = () => jsxs(StyledIconContainer, {
   children: [jsx(ArrowUpIcon, {
     name: "arrow-up",
@@ -29,56 +26,31 @@ const SortIcon = () => jsxs(StyledIconContainer, {
 });
 const StyledHeaderCell = /*#__PURE__*/_styled("div", {
   target: "e1q5cnom0"
-})("display:flex;text-align:left;flex-direction:row;align-items:center;font-size:", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.typography.bodySmall.fontSize;
-}, ";font-weight:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.typography.bodySmall.weight;
-}, ";font-family:", _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.typography.bodySmall.fontFamily;
-}, ";color:", _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.colors.neutral.text;
-}, ";gap:", _ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return theme.space['1'];
-}, ";&[role*='button']{cursor:pointer;user-select:none;}&[aria-sort]{color:", _ref7 => {
-  let {
-    theme
-  } = _ref7;
-  return theme.colors.primary.text;
-}, ";}&[aria-sort='ascending'] ", ArrowUpIcon, "{color:", _ref8 => {
-  let {
-    theme
-  } = _ref8;
-  return theme.colors.primary.text;
-}, ";}&[aria-sort='descending'] ", ArrowDownIcon, "{color:", _ref9 => {
-  let {
-    theme
-  } = _ref9;
-  return theme.colors.primary.text;
-}, ";}");
-const HeaderCell = _ref10 => {
-  let {
-    children,
-    isOrdered,
-    orderDirection,
-    onOrder,
-    className,
-    info
-  } = _ref10;
+})("display:flex;text-align:left;flex-direction:row;align-items:center;font-size:", ({
+  theme
+}) => theme.typography.bodySmall.fontSize, ";font-weight:", ({
+  theme
+}) => theme.typography.bodySmall.weight, ";font-family:", ({
+  theme
+}) => theme.typography.bodySmall.fontFamily, ";color:", ({
+  theme
+}) => theme.colors.neutral.text, ";gap:", ({
+  theme
+}) => theme.space['1'], ";&[role*='button']{cursor:pointer;user-select:none;}&[aria-sort]{color:", ({
+  theme
+}) => theme.colors.primary.text, ";}&[aria-sort='ascending'] ", ArrowUpIcon, "{color:", ({
+  theme
+}) => theme.colors.primary.text, ";}&[aria-sort='descending'] ", ArrowDownIcon, "{color:", ({
+  theme
+}) => theme.colors.primary.text, ";}");
+const HeaderCell = ({
+  children,
+  isOrdered,
+  orderDirection,
+  onOrder,
+  className,
+  info
+}) => {
   let order;
   if (isOrdered && orderDirection === 'asc') {
     order = 'ascending';

package/dist/src/components/List/HeaderRow.js

@@ -6,22 +6,15 @@ import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 
 const StyledHeaderRow = /*#__PURE__*/_styled("div", {
   target: "epvvdb70"
-})("column-gap:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.space['2'];
-}, ";padding:0 ", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.space['2'];
-}, ";");
-const HeaderRow = _ref3 => {
-  let {
-    children,
-    hasSelectAllColumn
-  } = _ref3;
+})("column-gap:", ({
+  theme
+}) => theme.space['2'], ";padding:0 ", ({
+  theme
+}) => theme.space['2'], ";");
+const HeaderRow = ({
+  children,
+  hasSelectAllColumn
+}) => {
   const {
     allRowSelectValue,
     selectAll,

package/dist/src/components/List/ListContext.js

@@ -2,12 +2,11 @@ import { useContext, createContext, useState, useCallback, useMemo } from 'react
 import { jsx } from '@emotion/react/jsx-runtime';
 
 const ListContext = /*#__PURE__*/createContext(undefined);
-const ListProvider = _ref => {
-  let {
-    children,
-    autoCollapse,
-    selectable
-  } = _ref;
+const ListProvider = ({
+  children,
+  autoCollapse,
+  selectable
+}) => {
   const [expandedRowIds, setExpandedRowIds] = useState({});
   const [selectedRowIds, setSelectedRowIds] = useState({});
   const registerExpandableRow = useCallback(rowId => {

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

@@ -9,61 +9,32 @@ import { jsxs, jsx } 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 ExpandableWrapper = /*#__PURE__*/_styled("div", {
   target: "ei4uyz12"
-})("grid-column:1/-1;grid-column-start:1;border-top:1px solid ", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.colors.neutral.border;
-}, ";margin:0 -", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.space['2'];
-}, ";padding:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.space['2'];
-}, ";cursor:auto;");
+})("grid-column:1/-1;grid-column-start:1;border-top:1px solid ", ({
+  theme
+}) => theme.colors.neutral.border, ";margin:0 -", ({
+  theme
+}) => theme.space['2'], ";padding:", ({
+  theme
+}) => theme.space['2'], ";cursor:auto;");
 const StyledRow = /*#__PURE__*/_styled('div', {
   shouldForwardProp: prop => !['sentiment'].includes(prop),
   target: "ei4uyz11"
-})("position:relative;border:1px solid ", _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.colors.neutral.border;
-}, ";border-radius:", _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.radii.default;
-}, ";transition:box-shadow 200ms ease,border-color 200ms ease;box-shadow:none;background-color:", _ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return theme.colors.neutral.background;
-}, ";font-size:", _ref7 => {
-  let {
-    theme
-  } = _ref7;
-  return theme.typography.bodySmall.fontSize;
-}, ";column-gap:", _ref8 => {
-  let {
-    theme
-  } = _ref8;
-  return theme.space['2'];
-}, ";padding:0 ", _ref9 => {
-  let {
-    theme
-  } = _ref9;
-  return theme.space['2'];
-}, ";&[role='button row']{cursor:pointer;}", _ref10 => {
-  let {
-    theme,
-    sentiment
-  } = _ref10;
-  return `
+})("position:relative;border:1px solid ", ({
+  theme
+}) => theme.colors.neutral.border, ";border-radius:", ({
+  theme
+}) => theme.radii.default, ";transition:box-shadow 200ms ease,border-color 200ms ease;box-shadow:none;background-color:", ({
+  theme
+}) => theme.colors.neutral.background, ";font-size:", ({
+  theme
+}) => theme.typography.bodySmall.fontSize, ";column-gap:", ({
+  theme
+}) => theme.space['2'], ";padding:0 ", ({
+  theme
+}) => theme.space['2'], ";&[role='button row']{cursor:pointer;}", ({
+  theme,
+  sentiment
+}) => `
     color: ${theme.colors[sentiment].text};
     border-color: ${theme.colors[sentiment].border};
     background-color: ${theme.colors[sentiment].background};
@@ -76,33 +47,17 @@ const StyledRow = /*#__PURE__*/_styled('div', {
           box-shadow: ${theme.shadows.hoverPrimary};
         }
         ` : ''}
-  `;
-}, " &[data-highlight='true']{border-color:", _ref11 => {
-  let {
-    theme
-  } = _ref11;
-  return theme.colors.primary.border;
-}, ";box-shadow:", _ref12 => {
-  let {
-    theme
-  } = _ref12;
-  return theme.shadows.hoverPrimary;
-}, ";}&[aria-disabled='true']{border:1px solid ", _ref13 => {
-  let {
-    theme
-  } = _ref13;
-  return theme.colors.neutral.borderDisabled;
-}, ";background-color:", _ref14 => {
-  let {
-    theme
-  } = _ref14;
-  return theme.colors.neutral.backgroundDisabled;
-}, ";color:", _ref15 => {
-  let {
-    theme
-  } = _ref15;
-  return theme.colors.neutral.textDisabled;
-}, ";cursor:not-allowed;}& [data-visibility='hover']{opacity:0;}&:hover:not([aria-disabled='true']) [data-visibility='hover']{opacity:1;}");
+  `, " &[data-highlight='true']{border-color:", ({
+  theme
+}) => theme.colors.primary.border, ";box-shadow:", ({
+  theme
+}) => theme.shadows.hoverPrimary, ";}&[aria-disabled='true']{border:1px solid ", ({
+  theme
+}) => theme.colors.neutral.borderDisabled, ";background-color:", ({
+  theme
+}) => theme.colors.neutral.backgroundDisabled, ";color:", ({
+  theme
+}) => theme.colors.neutral.textDisabled, ";cursor:not-allowed;}& [data-visibility='hover']{opacity:0;}&:hover:not([aria-disabled='true']) [data-visibility='hover']{opacity:1;}");
 const StyledCheckboxContainer = /*#__PURE__*/_styled("div", {
   target: "ei4uyz10"
 })(process.env.NODE_ENV === "production" ? {
@@ -113,17 +68,16 @@ const StyledCheckboxContainer = /*#__PURE__*/_styled("div", {
   styles: "display:flex",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-const Row = /*#__PURE__*/forwardRef((_ref16, ref) => {
-  let {
-    children,
-    id,
-    expandable,
-    disabled,
-    selectDisabled,
-    sentiment = 'neutral',
-    className,
-    'data-testid': dataTestid
-  } = _ref16;
+const Row = /*#__PURE__*/forwardRef(({
+  children,
+  id,
+  expandable,
+  disabled,
+  selectDisabled,
+  sentiment = 'neutral',
+  className,
+  'data-testid': dataTestid
+}, ref) => {
   const {
     allRowSelectValue,
     selectable,

package/dist/src/components/List/SelectBar.js

@@ -7,12 +7,9 @@ import { jsx } 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 StyledActionBar = /*#__PURE__*/_styled(ActionBar, {
   target: "eo69e461"
-})("display:flex;align-items:center;padding:0 ", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.space['1'];
-}, ";");
+})("display:flex;align-items:center;padding:0 ", ({
+  theme
+}) => theme.space['1'], ";");
 const FlexDiv = /*#__PURE__*/_styled("div", {
   target: "eo69e460"
 })(process.env.NODE_ENV === "production" ? {
@@ -23,13 +20,12 @@ const FlexDiv = /*#__PURE__*/_styled("div", {
   styles: "flex:1",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-function SelectBar(_ref2) {
-  let {
-    children,
-    data,
-    idKey,
-    className
-  } = _ref2;
+function SelectBar({
+  children,
+  data,
+  idKey,
+  className
+}) {
   const {
     selectedRowIds,
     unselectAll

package/dist/src/components/List/SkeletonRows.js

@@ -25,12 +25,11 @@ const StyledSkeleton = /*#__PURE__*/_styled(Skeleton, {
   styles: "width:80%;max-width:100%",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-const SkeletonRows = _ref => {
-  let {
-    selectable,
-    rows,
-    cols
-  } = _ref;
+const SkeletonRows = ({
+  selectable,
+  rows,
+  cols
+}) => {
   const rowArray = Array.from({
     length: rows
   }, (_, index) => index);

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

@@ -14,31 +14,21 @@ import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 const StyledList = /*#__PURE__*/_styled('div', {
   shouldForwardProp: prop => !['template'].includes(prop),
   target: "ef5qi0"
-})("display:flex;flex-flow:column nowrap;width:100%;gap:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.space['1'];
-}, ";[role='row'],[role='button row']{display:grid;width:100%;grid-template-columns:", _ref2 => {
-  let {
-    template
-  } = _ref2;
-  return template;
-}, ";align-items:center;}");
-const BaseList = /*#__PURE__*/forwardRef((_ref3, ref) => {
-  let {
-    selectable = false,
-    columns,
-    children,
-    loading,
-    autoCollapse = false
-  } = _ref3;
-  const computeTemplate = `${selectable ? `${SELECTABLE_CHECKBOX_SIZE}px ` : ''}${columns.map(_ref4 => {
-    let {
-      width
-    } = _ref4;
-    return width ?? 'minmax(0, 1fr)';
-  }).join(' ')}`;
+})("display:flex;flex-flow:column nowrap;width:100%;gap:", ({
+  theme
+}) => theme.space['1'], ";[role='row'],[role='button row']{display:grid;width:100%;grid-template-columns:", ({
+  template
+}) => template, ";align-items:center;}");
+const BaseList = /*#__PURE__*/forwardRef(({
+  selectable = false,
+  columns,
+  children,
+  loading,
+  autoCollapse = false
+}, ref) => {
+  const computeTemplate = `${selectable ? `${SELECTABLE_CHECKBOX_SIZE}px ` : ''}${columns.map(({
+    width
+  }) => width ?? 'minmax(0, 1fr)').join(' ')}`;
   return jsx(ListProvider, {
     selectable: selectable,
     autoCollapse: autoCollapse,

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

@@ -10,11 +10,9 @@ const HALF_VIEWBOX_HEIGHT = VIEWBOX_HEIGHT / 2;
 const StyledSvg = /*#__PURE__*/_styled('svg', {
   shouldForwardProp: prop => !['active'].includes(prop),
   target: "e1y1n78x1"
-})(_ref2 => {
-  let {
-    active
-  } = _ref2;
-  return active ? `
+})(({
+  active
+}) => active ? `
         animation: spin 0.75s linear infinite;
 
         @keyframes spin {
@@ -25,18 +23,14 @@ const StyledSvg = /*#__PURE__*/_styled('svg', {
             transform: rotate(360deg);
           }
         }
-      ` : '';
-}, ";");
+      ` : '', ";");
 const Text = /*#__PURE__*/_styled('text', {
   shouldForwardProp: prop => !['color'].includes(prop),
   target: "e1y1n78x0"
-})("fill:", _ref3 => {
-  let {
-    theme,
-    color
-  } = _ref3;
-  return theme.colors[color]?.backgroundStrong || color;
-}, ";font-size:26px;dominant-baseline:middle;text-anchor:middle;");
+})("fill:", ({
+  theme,
+  color
+}) => theme.colors[color]?.backgroundStrong || color, ";font-size:26px;dominant-baseline:middle;text-anchor:middle;");
 
 /**
  * Loader is a circular progress indicator that can be used to indicate that an action is being performed.
@@ -49,17 +43,16 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "transition:stroke-dashoffset 0.5s ease 0s",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-const Loader = _ref4 => {
-  let {
-    percentage = 20,
-    text,
-    size = 40,
-    strokeWidth = 16,
-    color = 'primary',
-    trailColor = 'neutral',
-    active = false,
-    label = 'Loading'
-  } = _ref4;
+const Loader = ({
+  percentage = 20,
+  text,
+  size = 40,
+  strokeWidth = 16,
+  color = 'primary',
+  trailColor = 'neutral',
+  active = false,
+  label = 'Loading'
+}) => {
   const theme = useTheme();
   const circleRadius = HALF_VIEWBOX_HEIGHT - strokeWidth / 2;
   const boundedPercentage = Math.min(Math.max(percentage, 0), 100) / 100;

package/dist/src/components/Menu/Item.js

@@ -3,14 +3,12 @@ import { forwardRef } from 'react';
 import { Tooltip } from '../Tooltip/index.js';
 import { jsx } from '@emotion/react/jsx-runtime';
 
-const itemCoreStyle = _ref => {
-  let {
-    theme,
-    borderless,
-    sentiment,
-    disabled
-  } = _ref;
-  return `
+const itemCoreStyle = ({
+  theme,
+  borderless,
+  sentiment,
+  disabled
+}) => `
   display: inline-block;
   font-size: ${theme.typography.bodySmall.fontSize};
   line-height: ${theme.typography.bodySmall.lineHeight};
@@ -37,53 +35,45 @@ const itemCoreStyle = _ref => {
             }
           }`}
   `;
-};
 const StyledItem = /*#__PURE__*/_styled('button', {
   shouldForwardProp: prop => !['borderless', 'sentiment'].includes(prop),
   target: "e10f690h1"
-})(_ref2 => {
-  let {
-    theme,
-    borderless,
-    sentiment,
-    disabled
-  } = _ref2;
-  return itemCoreStyle({
-    theme,
-    borderless,
-    sentiment,
-    disabled
-  });
-}, " background:none;");
+})(({
+  theme,
+  borderless,
+  sentiment,
+  disabled
+}) => itemCoreStyle({
+  theme,
+  borderless,
+  sentiment,
+  disabled
+}), " background:none;");
 const StyledLinkItem = /*#__PURE__*/_styled('a', {
   shouldForwardProp: prop => !['borderless', 'sentiment'].includes(prop),
   target: "e10f690h0"
-})(_ref3 => {
-  let {
-    theme,
-    borderless,
-    sentiment,
-    disabled
-  } = _ref3;
-  return itemCoreStyle({
-    theme,
-    borderless,
-    sentiment,
-    disabled
-  });
-}, " text-decoration:none;&:focus{text-decoration:none;}");
-const Item = /*#__PURE__*/forwardRef((_ref4, ref) => {
-  let {
-    borderless = false,
-    disabled = false,
-    onClick,
-    sentiment = 'neutral',
-    href,
-    children,
-    tooltip,
-    className,
-    'data-testid': dataTestId
-  } = _ref4;
+})(({
+  theme,
+  borderless,
+  sentiment,
+  disabled
+}) => itemCoreStyle({
+  theme,
+  borderless,
+  sentiment,
+  disabled
+}), " text-decoration:none;&:focus{text-decoration:none;}");
+const Item = /*#__PURE__*/forwardRef(({
+  borderless = false,
+  disabled = false,
+  onClick,
+  sentiment = 'neutral',
+  href,
+  children,
+  tooltip,
+  className,
+  'data-testid': dataTestId
+}, ref) => {
   if (href && !disabled) {
     return jsx(Tooltip, {
       text: tooltip,