@ultraviolet/ui 1.28.0 → 1.29.0

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

@@ -7,137 +7,95 @@ import { jsx, jsxs } 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 Container = /*#__PURE__*/_styled("div", {
-  target: "e1s5n3hj2"
-})("display:inline-flex;flex-direction:column;align-items:start;padding:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.space['2'];
-}, ";border-radius:", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.radii.default;
-}, ";transition:border-color 200ms ease,box-shadow 200ms ease;cursor:pointer;background:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.colors.neutral.background;
-}, ";border:1px solid ", _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.colors.neutral.border;
-}, ";color:", _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.colors.neutral.text;
-}, ";&[data-checked='true']{border:1px solid ", _ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return theme.colors.primary.border;
-}, ";}&[data-error='true']{border:1px solid ", _ref7 => {
-  let {
-    theme
-  } = _ref7;
-  return theme.colors.danger.border;
-}, ";}&[data-disabled='true']{border:1px solid ", _ref8 => {
-  let {
-    theme
-  } = _ref8;
-  return theme.colors.neutral.borderDisabled;
-}, ";color:", _ref9 => {
-  let {
-    theme
-  } = _ref9;
-  return theme.colors.neutral.textDisabled;
-}, ";background:", _ref10 => {
-  let {
-    theme
-  } = _ref10;
-  return theme.colors.neutral.backgroundDisabled;
-}, ";cursor:not-allowed;}&:hover,&:focus-within,&:active{&:not([data-error='true']):not([data-disabled='true']){border:1px solid ", _ref11 => {
-  let {
-    theme
-  } = _ref11;
-  return theme.colors.primary.border;
-}, ";&[data-cheked='false']{box-shadow:", _ref12 => {
-  let {
-    theme
-  } = _ref12;
-  return theme.shadows.hoverPrimary;
-}, ";}}}");
+  target: "e1s5n3hj3"
+})("display:inline-flex;flex-direction:column;align-items:start;padding:", ({
+  theme
+}) => theme.space['2'], ";border-radius:", ({
+  theme
+}) => theme.radii.default, ";transition:border-color 200ms ease,box-shadow 200ms ease;cursor:pointer;background:", ({
+  theme
+}) => theme.colors.neutral.background, ";border:1px solid ", ({
+  theme
+}) => theme.colors.neutral.border, ";color:", ({
+  theme
+}) => theme.colors.neutral.text, ";&[data-checked='true']{border:1px solid ", ({
+  theme
+}) => theme.colors.primary.border, ";}&[data-error='true']{border:1px solid ", ({
+  theme
+}) => theme.colors.danger.border, ";}&[data-disabled='true']{border:1px solid ", ({
+  theme
+}) => theme.colors.neutral.borderDisabled, ";color:", ({
+  theme
+}) => theme.colors.neutral.textDisabled, ";background:", ({
+  theme
+}) => theme.colors.neutral.backgroundDisabled, ";cursor:not-allowed;}&:hover,&:focus-within,&:active{&:not([data-error='true']):not([data-disabled='true']){border:1px solid ", ({
+  theme
+}) => theme.colors.primary.border, ";&[data-cheked='false']{box-shadow:", ({
+  theme
+}) => theme.shadows.hoverPrimary, ";}}}");
 const StyledElement = /*#__PURE__*/_styled('div', {
   shouldForwardProp: prop => !['showTick', 'hasLabel'].includes(prop),
+  target: "e1s5n3hj2"
+})("display:inline-flex;align-items:start;&[data-checked='true']{color:", ({
+  theme
+}) => theme.colors.primary.text, ";}&[data-error='true']{color:", ({
+  theme
+}) => theme.colors.danger.text, ";}&[aria-disabled='true']{color:", ({
+  theme
+}) => theme.colors.neutral.textDisabled, ";}input+svg{", ({
+  showTick
+}) => !showTick ? `display: none;` : null, ";}label{", ({
+  showTick,
+  hasLabel
+}) => !showTick && !hasLabel ? `display: none;` : null, ";}");
+const OverloadedRadio = /*#__PURE__*/StyledElement.withComponent(Radio, {
+  target: "e1s5n3hj4"
+});
+const StyledRadio = /*#__PURE__*/_styled(OverloadedRadio, {
   target: "e1s5n3hj1"
-})("display:inline-flex;align-items:start;&[data-checked='true']{color:", _ref13 => {
-  let {
-    theme
-  } = _ref13;
-  return theme.colors.primary.text;
-}, ";}&[data-error='true']{color:", _ref14 => {
-  let {
-    theme
-  } = _ref14;
-  return theme.colors.danger.text;
-}, ";}&[aria-disabled='true']{color:", _ref15 => {
-  let {
-    theme
-  } = _ref15;
-  return theme.colors.neutral.textDisabled;
-}, ";}input+svg{", _ref16 => {
-  let {
-    showTick
-  } = _ref16;
-  return !showTick ? `display: none;` : null;
-}, ";}label{", _ref17 => {
-  let {
-    showTick,
-    hasLabel
-  } = _ref17;
-  return !showTick && !hasLabel ? `display: none;` : null;
-}, ";}");
-const StyledRadio = /*#__PURE__*/StyledElement.withComponent(Radio, {
-  target: "e1s5n3hj3"
+})(process.env.NODE_ENV === "production" ? {
+  name: "je8g23",
+  styles: "pointer-events:none"
+} : {
+  name: "je8g23",
+  styles: "pointer-events:none",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 const OverloadedCheckbox = /*#__PURE__*/StyledElement.withComponent(Checkbox, {
-  target: "e1s5n3hj4"
+  target: "e1s5n3hj5"
 });
 const StyledCheckbox = /*#__PURE__*/_styled(OverloadedCheckbox, {
   target: "e1s5n3hj0"
 })(process.env.NODE_ENV === "production" ? {
-  name: "qxc5j0",
-  styles: "label{width:100%;}"
+  name: "1wopizl",
+  styles: "label{width:100%;}pointer-events:none"
 } : {
-  name: "qxc5j0",
-  styles: "label{width:100%;}",
+  name: "1wopizl",
+  styles: "label{width:100%;}pointer-events:none",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 /**
  * SelectableCard is a component that can be used to create a radio or checkbox card.
  * It can be used to create a list of selectable items or a single selectable item.
  */
-const SelectableCard = /*#__PURE__*/forwardRef((_ref18, ref) => {
-  let {
-    name,
-    value,
-    onChange,
-    showTick = false,
-    type = 'radio',
-    checked = false,
-    disabled = false,
-    children,
-    className,
-    isError,
-    onFocus,
-    onBlur,
-    tooltip,
-    id,
-    label,
-    'data-testid': dataTestId
-  } = _ref18;
+const SelectableCard = /*#__PURE__*/forwardRef(({
+  name,
+  value,
+  onChange,
+  showTick = false,
+  type = 'radio',
+  checked = false,
+  disabled = false,
+  children,
+  className,
+  isError,
+  onFocus,
+  onBlur,
+  tooltip,
+  id,
+  label,
+  'data-testid': dataTestId
+}, ref) => {
   const innerRef = useRef(null);
   return jsx(Tooltip, {
     text: tooltip,

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

@@ -5,90 +5,69 @@ import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 const StyledIconWrapper = /*#__PURE__*/_styled('div', {
   shouldForwardProp: prop => !['direction'].includes(prop),
   target: "e1d1zom92"
-})("display:flex;flex-direction:", _ref => {
-  let {
-    direction
-  } = _ref;
-  return direction === 'vertical' ? 'column' : 'row';
-}, ";align-items:center;");
+})("display:flex;flex-direction:", ({
+  direction
+}) => direction === 'vertical' ? 'column' : 'row', ";align-items:center;");
 const StyledIcon = /*#__PURE__*/_styled(Icon, {
   target: "e1d1zom91"
-})("fill:", _ref2 => {
-  let {
-    color,
-    theme
-  } = _ref2;
-  return theme.colors[color].border;
-}, ";");
+})("fill:", ({
+  color,
+  theme
+}) => theme.colors[color].border, ";");
 const StyledHr = /*#__PURE__*/_styled('hr', {
   shouldForwardProp: prop => !['direction', 'thickness', 'color', 'hasIcon'].includes(prop),
   target: "e1d1zom90"
-})("margin:0;border:0;width:", _ref3 => {
-  let {
-    direction,
-    thickness = 1
-  } = _ref3;
-  return direction === 'vertical' ? `${thickness}px` : 'auto';
-}, ";height:", _ref4 => {
-  let {
-    direction,
-    thickness = 1
-  } = _ref4;
-  return direction === 'horizontal' ? `${thickness}px` : 'auto';
-}, ";flex-shrink:0;background-color:", _ref5 => {
-  let {
-    theme,
-    color
-  } = _ref5;
-  return theme.colors[color].border;
-}, ";", _ref6 => {
-  let {
-    hasIcon
-  } = _ref6;
-  return hasIcon && `flex: 1;`;
-}, ";");
+})("margin:0;border:0;width:", ({
+  direction,
+  thickness = 1
+}) => direction === 'vertical' ? `${thickness}px` : 'auto', ";height:", ({
+  direction,
+  thickness = 1
+}) => direction === 'horizontal' ? `${thickness}px` : 'auto', ";flex-shrink:0;background-color:", ({
+  theme,
+  color
+}) => theme.colors[color].border, ";", ({
+  hasIcon
+}) => hasIcon && `flex: 1;`, ";");
 /**
  * Separator component used to separate content with a horizontal or vertical line.
  */
-const Separator = _ref7 => {
-  let {
-    direction = 'horizontal',
-    thickness = 1,
-    color = 'neutral',
-    icon,
-    className,
-    'data-testid': dataTestId
-  } = _ref7;
-  return icon ? jsxs(StyledIconWrapper, {
-    role: "separator",
-    "aria-orientation": direction,
+const Separator = ({
+  direction = 'horizontal',
+  thickness = 1,
+  color = 'neutral',
+  icon,
+  className,
+  'data-testid': dataTestId
+}) => icon ? jsxs(StyledIconWrapper, {
+  role: "separator",
+  "aria-orientation": direction,
+  direction: direction,
+  className: className,
+  "data-testid": dataTestId,
+  children: [jsx(StyledHr, {
     direction: direction,
-    className: className,
-    "data-testid": dataTestId,
-    children: [jsx(StyledHr, {
-      direction: direction,
-      thickness: thickness,
-      color: color,
-      hasIcon: true
-    }), jsx(StyledIcon, {
-      name: icon,
-      size: 24,
-      color: color
-    }), jsx(StyledHr, {
-      direction: direction,
-      thickness: thickness,
-      color: color,
-      hasIcon: true
-    })]
-  }) : jsx(StyledHr, {
-    role: "separator",
-    "aria-orientation": direction,
+    thickness: thickness,
+    color: color,
+    hasIcon: true
+  }), jsx(StyledIcon, {
+    name: icon,
+    size: 24,
+    color: color
+  }), jsx(StyledHr, {
     direction: direction,
     thickness: thickness,
     color: color,
-    className: className,
-    "data-testid": dataTestId
-  });
-};
+    hasIcon: true
+  })]
+}) : jsx(StyledHr, {
+  role: "separator",
+  "aria-orientation": direction,
+  direction: direction,
+  thickness: thickness,
+  color: color,
+  className: className,
+  "data-testid": dataTestId
+});
 
 export { Separator };

package/dist/src/components/Skeleton/Block.js

@@ -6,48 +6,30 @@ import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 
 const StyledLine = /*#__PURE__*/_styled("li", {
   target: "ez87ex11"
-})("display:flex;align-items:center;padding:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return `${theme.space['3']} ${theme.space['2']}`;
-}, ";");
+})("display:flex;align-items:center;padding:", ({
+  theme
+}) => `${theme.space['3']} ${theme.space['2']}`, ";");
 const StyledList = /*#__PURE__*/_styled("ul", {
   target: "ez87ex10"
-})("min-height:200px;width:100%;height:100%;padding:", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.space['2'];
-}, ";border:1px solid ", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.colors.neutral.borderWeak;
-}, ";border-radius:", _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.radii.default;
-}, ";margin:0;>", StyledLine, ":not(:last-child){border-bottom:1px solid ", _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.colors.neutral.border;
-}, ";}");
-const Block = _ref6 => {
-  let {
-    length = 3
-  } = _ref6;
-  return jsx(StyledList, {
-    children: Array.from({
-      length
-    }, (_, i) => jsx(Fragment, {
-      children: jsxs(StyledLine, {
-        children: [jsx(IconSkeleton, {}), jsx(Line, {})]
-      })
-    }, `skeleton-block-${i}`))
-  });
-};
+})("min-height:200px;width:100%;height:100%;padding:", ({
+  theme
+}) => theme.space['2'], ";border:1px solid ", ({
+  theme
+}) => theme.colors.neutral.borderWeak, ";border-radius:", ({
+  theme
+}) => theme.radii.default, ";margin:0;>", StyledLine, ":not(:last-child){border-bottom:1px solid ", ({
+  theme
+}) => theme.colors.neutral.border, ";}");
+const Block = ({
+  length = 3
+}) => jsx(StyledList, {
+  children: Array.from({
+    length
+  }, (_, i) => jsx(Fragment, {
+    children: jsxs(StyledLine, {
+      children: [jsx(IconSkeleton, {}), jsx(Line, {})]
+    })
+  }, `skeleton-block-${i}`))
+});
 
 export { Block };

package/dist/src/components/Skeleton/Blocks.js

@@ -5,48 +5,30 @@ import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 
 const StyledContainer = /*#__PURE__*/_styled("div", {
   target: "esrnljb1"
-})("display:grid;grid-template-columns:repeat(", _ref => {
-  let {
-    col
-  } = _ref;
-  return col;
-}, ", 1fr);gap:", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.space['2'];
-}, ";");
+})("display:grid;grid-template-columns:repeat(", ({
+  col
+}) => col, ", 1fr);gap:", ({
+  theme
+}) => theme.space['2'], ";");
 const Block = /*#__PURE__*/_styled("div", {
   target: "esrnljb0"
-})("width:100%;display:flex;align-items:center;padding:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return `${theme.space['1']} ${theme.space['2']}`;
-}, ";border:1px solid ", _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.colors.neutral.borderWeak;
-}, ";border-radius:", _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.radii.default;
-}, ";overflow:hidden;");
-const Blocks = _ref6 => {
-  let {
-    col = 4,
-    length = 8
-  } = _ref6;
-  return jsx(StyledContainer, {
-    col: col,
-    children: Array.from({
-      length
-    }, (_, i) => jsxs(Block, {
-      children: [jsx(IconSkeleton, {}), jsx(Line, {})]
-    }, `skeleton-blocks-${i}`))
-  });
-};
+})("width:100%;display:flex;align-items:center;padding:", ({
+  theme
+}) => `${theme.space['1']} ${theme.space['2']}`, ";border:1px solid ", ({
+  theme
+}) => theme.colors.neutral.borderWeak, ";border-radius:", ({
+  theme
+}) => theme.radii.default, ";overflow:hidden;");
+const Blocks = ({
+  col = 4,
+  length = 8
+}) => jsx(StyledContainer, {
+  col: col,
+  children: Array.from({
+    length
+  }, (_, i) => jsxs(Block, {
+    children: [jsx(IconSkeleton, {}), jsx(Line, {})]
+  }, `skeleton-blocks-${i}`))
+});
 
 export { Blocks };

package/dist/src/components/Skeleton/BoxWithIcon.js

@@ -5,43 +5,28 @@ import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 
 const StyledContainer = /*#__PURE__*/_styled("div", {
   target: "e18cng8b1"
-})("display:grid;grid-template-columns:repeat(", _ref => {
-  let {
-    col
-  } = _ref;
-  return col;
-}, ", 1fr);gap:", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.space['2'];
-}, ";");
+})("display:grid;grid-template-columns:repeat(", ({
+  col
+}) => col, ", 1fr);gap:", ({
+  theme
+}) => theme.space['2'], ";");
 const Block = /*#__PURE__*/_styled("div", {
   target: "e18cng8b0"
-})("height:130px;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;border:1px solid ", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.colors.neutral.borderWeak;
-}, ";border-radius:", _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.radii.default;
-}, ";overflow:hidden;");
-const BoxWithIcon = _ref5 => {
-  let {
-    col = 4,
-    length = 8
-  } = _ref5;
-  return jsx(StyledContainer, {
-    col: col,
-    children: Array.from({
-      length
-    }, (_, i) => jsxs(Block, {
-      children: [jsx(IconSkeleton, {}), jsx(Line, {})]
-    }, `skeleton-box-${i}`))
-  });
-};
+})("height:130px;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;border:1px solid ", ({
+  theme
+}) => theme.colors.neutral.borderWeak, ";border-radius:", ({
+  theme
+}) => theme.radii.default, ";overflow:hidden;");
+const BoxWithIcon = ({
+  col = 4,
+  length = 8
+}) => jsx(StyledContainer, {
+  col: col,
+  children: Array.from({
+    length
+  }, (_, i) => jsxs(Block, {
+    children: [jsx(IconSkeleton, {}), jsx(Line, {})]
+  }, `skeleton-box-${i}`))
+});
 
 export { BoxWithIcon };

package/dist/src/components/Skeleton/Donut.js

@@ -19,12 +19,9 @@ const StyledSVG = /*#__PURE__*/_styled("svg", {
 })("height:", CIRCLE_SIZE, "px;width:", CIRCLE_SIZE, "px;transform:rotate(-90deg);");
 const StyledCircle = /*#__PURE__*/_styled("circle", {
   target: "e1bu753f1"
-})("transform-origin:50% 50%;stroke:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.colors.neutral.borderWeak;
-}, ";stroke-width:18;stroke-linecap:butt;fill:none;");
+})("transform-origin:50% 50%;stroke:", ({
+  theme
+}) => theme.colors.neutral.borderWeak, ";stroke-width:18;stroke-linecap:butt;fill:none;");
 const LineList = /*#__PURE__*/_styled("ul", {
   target: "e1bu753f0"
 })(process.env.NODE_ENV === "production" ? {

package/dist/src/components/Skeleton/IconSkeleton.js

@@ -2,36 +2,18 @@ import _styled from '@emotion/styled/base';
 
 const IconSkeleton = /*#__PURE__*/_styled("div", {
   target: "e1kubpd30"
-})("margin-right:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.space['1'];
-}, ";width:", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.space['4'];
-}, ";height:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.space['4'];
-}, ";min-width:", _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.space['4'];
-}, ";border-radius:", _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.radii.large;
-}, ";background-color:", _ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return theme.colors.neutral.borderWeak;
-}, ";");
+})("margin-right:", ({
+  theme
+}) => theme.space['1'], ";width:", ({
+  theme
+}) => theme.space['4'], ";height:", ({
+  theme
+}) => theme.space['4'], ";min-width:", ({
+  theme
+}) => theme.space['4'], ";border-radius:", ({
+  theme
+}) => theme.radii.large, ";background-color:", ({
+  theme
+}) => theme.colors.neutral.borderWeak, ";");
 
 export { IconSkeleton };

package/dist/src/components/Skeleton/Line.js

@@ -4,16 +4,10 @@ const sizes = [80, 120, 160, 200];
 const randomSize = () => sizes[Math.floor(Math.random() * sizes.length)];
 const Line = /*#__PURE__*/_styled("div", {
   target: "e1denkbe0"
-})("height:12px;width:", () => randomSize(), "px;max-width:100%;border-radius:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.radii.large;
-}, ";background-color:", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.colors.neutral.borderWeak;
-}, ";");
+})("height:12px;width:", () => randomSize(), "px;max-width:100%;border-radius:", ({
+  theme
+}) => theme.radii.large, ";background-color:", ({
+  theme
+}) => theme.colors.neutral.borderWeak, ";");
 
 export { Line };