@ultraviolet/ui 1.28.0 → 1.29.0

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

@@ -25,36 +25,27 @@ const StyledLine = /*#__PURE__*/_styled("div", {
 });
 const StyledList = /*#__PURE__*/_styled("ul", {
   target: "e639qnr0"
-})("list-style:none;padding:0;margin:0;>", StyledItem, ":nth-of-type(even){background-color:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.colors.neutral.backgroundDisabled;
-}, ";}");
-const Item = _ref2 => {
-  let {
-    col = 3
-  } = _ref2;
-  return jsx(StyledItem, {
-    children: Array.from({
-      length: col
-    }, (_, i) => jsx(StyledLine, {
-      children: jsx(Line, {})
-    }, `skeleton-list-col-${i}`))
-  });
-};
-const List = _ref3 => {
-  let {
-    length = 3,
-    col = 3
-  } = _ref3;
-  return jsx(StyledList, {
-    children: Array.from({
-      length
-    }, (_, i) => jsx(Item, {
-      col: col
-    }, `skeleton-list-${i}`))
-  });
-};
+})("list-style:none;padding:0;margin:0;>", StyledItem, ":nth-of-type(even){background-color:", ({
+  theme
+}) => theme.colors.neutral.backgroundDisabled, ";}");
+const Item = ({
+  col = 3
+}) => jsx(StyledItem, {
+  children: Array.from({
+    length: col
+  }, (_, i) => jsx(StyledLine, {
+    children: jsx(Line, {})
+  }, `skeleton-list-col-${i}`))
+});
+const List = ({
+  length = 3,
+  col = 3
+}) => jsx(StyledList, {
+  children: Array.from({
+    length
+  }, (_, i) => jsx(Item, {
+    col: col
+  }, `skeleton-list-${i}`))
+});
 
 export { List };

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

@@ -3,55 +3,34 @@ import { jsx } from '@emotion/react/jsx-runtime';
 
 const StyledContainer = /*#__PURE__*/_styled("div", {
   target: "e1yrvvrg2"
-})("height:277px;display:grid;grid-template-columns:repeat(", _ref => {
-  let {
-    length
-  } = _ref;
-  return length;
-}, ", 1fr);gap:", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.space['2'];
-}, ";overflow:auto;");
+})("height:277px;display:grid;grid-template-columns:repeat(", ({
+  length
+}) => length, ", 1fr);gap:", ({
+  theme
+}) => theme.space['2'], ";overflow:auto;");
 const StyledCard = /*#__PURE__*/_styled("div", {
   target: "e1yrvvrg1"
-})("border:1px solid ", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.colors.neutral.borderWeak;
-}, ";border-radius:", _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.radii.default;
-}, ";width:239px;height:261px;overflow:hidden;");
+})("border:1px solid ", ({
+  theme
+}) => theme.colors.neutral.borderWeak, ";border-radius:", ({
+  theme
+}) => theme.radii.default, ";width:239px;height:261px;overflow:hidden;");
 const StyledBanner = /*#__PURE__*/_styled("div", {
   target: "e1yrvvrg0"
-})("border:1px solid ", _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.colors.neutral.borderWeak;
-}, ";background-color:", _ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return theme.colors.neutral.borderWeak;
-}, ";width:100%;height:33%;");
-const Slider = _ref7 => {
-  let {
-    length = 4
-  } = _ref7;
-  return jsx(StyledContainer, {
-    length: length,
-    children: Array.from({
-      length
-    }, (_, i) => jsx(StyledCard, {
-      children: jsx(StyledBanner, {})
-    }, `skeleton-slider-card-${i}`))
-  });
-};
+})("border:1px solid ", ({
+  theme
+}) => theme.colors.neutral.borderWeak, ";background-color:", ({
+  theme
+}) => theme.colors.neutral.borderWeak, ";width:100%;height:33%;");
+const Slider = ({
+  length = 4
+}) => jsx(StyledContainer, {
+  length: length,
+  children: Array.from({
+    length
+  }, (_, i) => jsx(StyledCard, {
+    children: jsx(StyledBanner, {})
+  }, `skeleton-slider-card-${i}`))
+});
 
 export { Slider };

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

@@ -2,11 +2,8 @@ import _styled from '@emotion/styled/base';
 
 const Square = /*#__PURE__*/_styled("div", {
   target: "e1uz28830"
-})("height:100%;width:100%;max-width:100%;background-color:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.colors.neutral.borderWeak;
-}, ";");
+})("height:100%;width:100%;max-width:100%;background-color:", ({
+  theme
+}) => theme.colors.neutral.borderWeak, ";");
 
 export { Square };

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

@@ -31,32 +31,17 @@ const StyledContainer = /*#__PURE__*/_styled("div", {
 });
 const StyledDiv = /*#__PURE__*/_styled("div", {
   target: "e183x2r80"
-})("position:absolute;top:0;height:100%;width:25%;opacity:0.8;background:linear-gradient(\n    90deg,\n    ", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.colors.neutral.backgroundWeak;
-}, "00,\n    ", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.colors.neutral.backgroundWeak;
-}, "4D,\n    ", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.colors.neutral.backgroundWeak;
-}, "66,\n    ", _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.colors.neutral.backgroundWeak;
-}, "4D,\n    ", _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.colors.neutral.backgroundWeak;
-}, "00\n  );animation:", shineAnimation, " 1s linear infinite;animation-direction:alternate;@media (prefers-reduced-motion: reduce){animation:unset;}");
+})("position:absolute;top:0;height:100%;width:25%;opacity:0.8;background:linear-gradient(\n    90deg,\n    ", ({
+  theme
+}) => theme.colors.neutral.backgroundWeak, "00,\n    ", ({
+  theme
+}) => theme.colors.neutral.backgroundWeak, "4D,\n    ", ({
+  theme
+}) => theme.colors.neutral.backgroundWeak, "66,\n    ", ({
+  theme
+}) => theme.colors.neutral.backgroundWeak, "4D,\n    ", ({
+  theme
+}) => theme.colors.neutral.backgroundWeak, "00\n  );animation:", shineAnimation, " 1s linear infinite;animation-direction:alternate;@media (prefers-reduced-motion: reduce){animation:unset;}");
 const variants = {
   block: Block,
   blocks: Blocks,
@@ -72,13 +57,12 @@ const variants = {
  * It is used to provide a better user experience by showing a temporary placeholder reflecting the dimensions of the
  * content that will eventually be loaded on the screen.
  */
-const Skeleton = _ref6 => {
-  let {
-    variant = 'blocks',
-    length,
-    col,
-    className
-  } = _ref6;
+const Skeleton = ({
+  variant = 'blocks',
+  length,
+  col,
+  className
+}) => {
   const Component = variants[variant];
   return jsxs(StyledContainer, {
     className: className,

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

@@ -12,43 +12,26 @@ const LINES_BREAK_REGEX = /\r\n|\r|\n/;
 const PreText = /*#__PURE__*/_styled(Text, {
   shouldForwardProp: prop => !['multiline', 'hasShowMoreButton', 'showMore'].includes(prop),
   target: "e1q0gj908"
-})("margin:0;padding:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.space['2'];
-}, ";padding-right:", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.space['9'];
-}, ";overflow-x:", _ref3 => {
-  let {
-    hasShowMoreButton,
-    showMore
-  } = _ref3;
-  return hasShowMoreButton && !showMore ? 'hidden' : 'auto';
-}, ";overflow-y:hidden;", _ref4 => {
-  let {
-    multiline
-  } = _ref4;
-  return !multiline ? 'white-space: nowrap;' : '';
-}, " height:auto;counter-reset:section;");
+})("margin:0;padding:", ({
+  theme
+}) => theme.space['2'], ";padding-right:", ({
+  theme
+}) => theme.space['9'], ";overflow-x:", ({
+  hasShowMoreButton,
+  showMore
+}) => hasShowMoreButton && !showMore ? 'hidden' : 'auto', ";overflow-y:hidden;", ({
+  multiline
+}) => !multiline ? 'white-space: nowrap;' : '', " height:auto;counter-reset:section;");
 const StyledSpan = /*#__PURE__*/_styled('span', {
   shouldForwardProp: prop => !['linePrefix', 'multiline', 'prefix'].includes(prop),
   target: "e1q0gj907"
-})("display:block;&:after{content:'';", _ref5 => {
-  let {
-    theme,
-    multiline
-  } = _ref5;
-  return multiline ? `padding: ${theme.space['4']}` : `padding-right: ${theme.space['8']}`;
-}, ";}", _ref6 => {
-  let {
-    prefix,
-    theme
-  } = _ref6;
-  return prefix ? `
+})("display:block;&:after{content:'';", ({
+  theme,
+  multiline
+}) => multiline ? `padding: ${theme.space['4']}` : `padding-right: ${theme.space['8']}`, ";}", ({
+  prefix,
+  theme
+}) => prefix ? `
     &:before {
       color: ${theme.colors.neutral.textWeak};
       width: ${prefix === 'lines' ? '35px' : ''};
@@ -58,27 +41,17 @@ const StyledSpan = /*#__PURE__*/_styled('span', {
       content: ${prefix === 'lines' ? 'counter(section)' : "'$'"};
       padding-right: ${theme.space['1']};
     }
-  ` : null;
-}, ";");
+  ` : null, ";");
 const Container = /*#__PURE__*/_styled('div', {
   shouldForwardProp: prop => !['multiline'].includes(prop),
   target: "e1q0gj906"
-})("position:relative;display:flex;justify-content:start;max-width:100%;", _ref7 => {
-  let {
-    multiline
-  } = _ref7;
-  return multiline ? 'width: 100%;' : '';
-}, " background:", _ref8 => {
-  let {
-    theme
-  } = _ref8;
-  return theme.colors.neutral.backgroundWeak;
-}, ";border-radius:", _ref9 => {
-  let {
-    theme
-  } = _ref9;
-  return theme.radii.default;
-}, ";");
+})("position:relative;display:flex;justify-content:start;max-width:100%;", ({
+  multiline
+}) => multiline ? 'width: 100%;' : '', " background:", ({
+  theme
+}) => theme.colors.neutral.backgroundWeak, ";border-radius:", ({
+  theme
+}) => theme.radii.default, ";");
 const StyledStack = /*#__PURE__*/_styled(Stack, {
   target: "e1q0gj905"
 })(process.env.NODE_ENV === "production" ? {
@@ -92,53 +65,32 @@ const StyledStack = /*#__PURE__*/_styled(Stack, {
 const ButtonContainer = /*#__PURE__*/_styled('div', {
   shouldForwardProp: prop => !['multiline'].includes(prop),
   target: "e1q0gj904"
-})("position:absolute;top:0;right:0;padding:", _ref10 => {
-  let {
-    theme,
-    multiline
-  } = _ref10;
-  return `${theme.space[multiline ? '2' : '1']} ${theme.space['2']} 0 0`;
-}, ";background:", _ref11 => {
-  let {
-    theme
-  } = _ref11;
-  return theme.colors.neutral.backgroundWeak;
-}, ";border-radius:", _ref12 => {
-  let {
-    theme
-  } = _ref12;
-  return theme.radii.default;
-}, ";border:2px solid transparent;", _ref13 => {
-  let {
-    multiline,
-    theme
-  } = _ref13;
-  return !multiline ? `box-shadow: -27px 0 19px -11px ${theme.colors.neutral.backgroundWeak}` : '';
-}, ";");
+})("position:absolute;top:0;right:0;padding:", ({
+  theme,
+  multiline
+}) => `${theme.space[multiline ? '2' : '1']} ${theme.space['2']} 0 0`, ";background:", ({
+  theme
+}) => theme.colors.neutral.backgroundWeak, ";border-radius:", ({
+  theme
+}) => theme.radii.default, ";border:2px solid transparent;", ({
+  multiline,
+  theme
+}) => !multiline ? `box-shadow: -27px 0 19px -11px ${theme.colors.neutral.backgroundWeak}` : '', ";");
 const ShowMoreContainer = /*#__PURE__*/_styled('div', {
   shouldForwardProp: prop => !['showMore'].includes(prop),
   target: "e1q0gj903"
-})("width:100%;box-shadow:", _ref14 => {
-  let {
-    theme,
-    showMore
-  } = _ref14;
-  return !showMore ? `0px -22px 19px -6px
-    ${theme.colors.neutral.backgroundWeak}` : 'none';
-}, ";");
+})("width:100%;box-shadow:", ({
+  theme,
+  showMore
+}) => !showMore ? `0px -22px 19px -6px
+    ${theme.colors.neutral.backgroundWeak}` : 'none', ";");
 const StyledButton = /*#__PURE__*/_styled("button", {
   target: "e1q0gj902"
-})("width:100%;background:none;border:none;padding:", _ref15 => {
-  let {
-    theme
-  } = _ref15;
-  return theme.space['2'];
-}, ";padding-top:", _ref16 => {
-  let {
-    theme
-  } = _ref16;
-  return theme.space['1'];
-}, ";cursor:pointer;");
+})("width:100%;background:none;border:none;padding:", ({
+  theme
+}) => theme.space['2'], ";padding-top:", ({
+  theme
+}) => theme.space['1'], ";cursor:pointer;");
 const AlignCenterText = /*#__PURE__*/_styled(Text, {
   target: "e1q0gj901"
 })(process.env.NODE_ENV === "production" ? {
@@ -152,53 +104,46 @@ const AlignCenterText = /*#__PURE__*/_styled(Text, {
 const AnimatedArrowIcon = /*#__PURE__*/_styled(Icon, {
   shouldForwardProp: prop => !['showMore'].includes(prop),
   target: "e1q0gj900"
-})("transform:", _ref17 => {
-  let {
-    showMore
-  } = _ref17;
-  return showMore ? 'rotate(180deg)' : 'rotate(0deg)';
-}, ";transform-origin:center;transition:transform 300ms ease-in-out;");
-const CodeContent = _ref18 => {
-  let {
-    children,
-    prefix,
-    multiline,
-    showMore,
-    hasShowMoreButton,
-    lines
-  } = _ref18;
-  return jsx(PreText, {
-    as: "pre",
-    variant: "code",
-    multiline: multiline,
-    hasShowMoreButton: hasShowMoreButton,
-    showMore: showMore,
-    children: multiline ? Children.map(lines, child => jsx(StyledSpan, {
-      multiline: true,
-      prefix: prefix,
-      children: child
-    })) : jsx(StyledSpan, {
-      prefix: prefix,
-      children: children
-    })
-  });
-};
+})("transform:", ({
+  showMore
+}) => showMore ? 'rotate(180deg)' : 'rotate(0deg)', ";transform-origin:center;transition:transform 300ms ease-in-out;");
+const CodeContent = ({
+  children,
+  prefix,
+  multiline,
+  showMore,
+  hasShowMoreButton,
+  lines
+}) => jsx(PreText, {
+  as: "pre",
+  variant: "code",
+  multiline: multiline,
+  hasShowMoreButton: hasShowMoreButton,
+  showMore: showMore,
+  children: multiline ? Children.map(lines, child => jsx(StyledSpan, {
+    multiline: true,
+    prefix: prefix,
+    children: child
+  })) : jsx(StyledSpan, {
+    prefix: prefix,
+    children: children
+  })
+});
 /**
  * Snippet component is used to display code snippets with the ability to copy the code.
  * It also has the ability to show/hide the code snippet if it has more than 4 lines.
  */
-const Snippet = _ref19 => {
-  let {
-    children,
-    copyText,
-    copiedText,
-    showText = 'Show',
-    hideText = 'Hide',
-    prefix,
-    className,
-    'data-testid': dataTestId,
-    initiallyExpanded
-  } = _ref19;
+const Snippet = ({
+  children,
+  copyText,
+  copiedText,
+  showText = 'Show',
+  hideText = 'Hide',
+  prefix,
+  className,
+  'data-testid': dataTestId,
+  initiallyExpanded
+}) => {
   const [showMore, setShowMore] = useReducer(value => !value, initiallyExpanded ?? false);
   const lines = children.split(LINES_BREAK_REGEX).filter(Boolean);
   const numberOfLines = lines.length;

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

@@ -7,18 +7,16 @@ import _styled from '@emotion/styled/base';
 const Stack = /*#__PURE__*/_styled('div', {
   shouldForwardProp: prop => !['gap', 'direction', 'alignItems', 'justifyContent', 'wrap', 'width'].includes(prop),
   target: "ehpbis70"
-})("display:flex;", _ref => {
-  let {
-    theme,
-    gap = 0,
-    direction = 'column',
-    alignItems = 'normal',
-    justifyContent = 'normal',
-    wrap = 'nowrap',
-    width,
-    flex
-  } = _ref;
-  return `
+})("display:flex;", ({
+  theme,
+  gap = 0,
+  direction = 'column',
+  alignItems = 'normal',
+  justifyContent = 'normal',
+  wrap = 'nowrap',
+  width,
+  flex
+}) => `
     gap: ${theme.space[gap]};
     flex-direction: ${direction};
     align-items: ${alignItems};
@@ -26,7 +24,6 @@ const Stack = /*#__PURE__*/_styled('div', {
     flex-wrap: ${typeof wrap === 'boolean' ? 'wrap' : wrap};
     ${flex ? `flex: ${flex};` : ''}
     ${width ? `width: ${width};` : ''}
-  `;
-}, ";");
+  `, ";");
 
 export { Stack };

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

@@ -6,99 +6,69 @@ import { ping } from '../../utils/animations.js';
 const HEIGHT = '10px';
 const WIDTH = '10px';
 const sentiments = {
-  danger: _ref => {
-    let {
-      theme
-    } = _ref;
-    return `
+  danger: ({
+    theme
+  }) => `
       background-color: ${theme.colors.danger.backgroundStrong};
-    `;
-  },
-  info: _ref2 => {
-    let {
-      theme
-    } = _ref2;
-    return `
+    `,
+  info: ({
+    theme
+  }) => `
       background-color: ${theme.colors.info.backgroundStrong};
-    `;
-  },
-  neutral: _ref3 => {
-    let {
-      theme
-    } = _ref3;
-    return `
+    `,
+  neutral: ({
+    theme
+  }) => `
       background-color: ${theme.colors.neutral.backgroundStronger};
-    `;
-  },
-  success: _ref4 => {
-    let {
-      theme
-    } = _ref4;
-    return `
+    `,
+  success: ({
+    theme
+  }) => `
       background-color: ${theme.colors.success.backgroundStrong};
-    `;
-  },
-  warning: _ref5 => {
-    let {
-      theme
-    } = _ref5;
-    return `
+    `,
+  warning: ({
+    theme
+  }) => `
       background-color: ${theme.colors.warning.backgroundStrong};
-    `;
-  }
+    `
 };
 const StyledCircle = /*#__PURE__*/_styled("span", {
   target: "eny0xmn2"
-})("display:inline-block;width:", WIDTH, ";height:", HEIGHT, ";border-radius:", _ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return theme.radii.circle;
-}, ";", _ref7 => {
-  let {
-    sentiment
-  } = _ref7;
-  return sentiments[sentiment];
-}, ";");
+})("display:inline-block;width:", WIDTH, ";height:", HEIGHT, ";border-radius:", ({
+  theme
+}) => theme.radii.circle, ";", ({
+  sentiment
+}) => sentiments[sentiment], ";");
 const StyledAnimatedCircle = /*#__PURE__*/_styled("span", {
   target: "eny0xmn1"
-})("position:absolute;width:", WIDTH, ";height:", HEIGHT, ";opacity:0.75;border-radius:", _ref8 => {
-  let {
-    theme
-  } = _ref8;
-  return theme.radii.circle;
-}, ";animation:", ping, " 1.1s cubic-bezier(0, 0, 0.2, 1) infinite;", _ref9 => {
-  let {
-    sentiment
-  } = _ref9;
-  return sentiments[sentiment];
-}, ";");
+})("position:absolute;width:", WIDTH, ";height:", HEIGHT, ";opacity:0.75;border-radius:", ({
+  theme
+}) => theme.radii.circle, ";animation:", ping, " 1.1s cubic-bezier(0, 0, 0.2, 1) infinite;", ({
+  sentiment
+}) => sentiments[sentiment], ";");
 const Container = /*#__PURE__*/_styled("span", {
   target: "eny0xmn0"
 })("display:flex;width:", WIDTH, ";height:", HEIGHT, ";");
 /**
  * Status component used to display a colored circle with a tooltip for additional information.
  */
-const Status = _ref10 => {
-  let {
-    animated = false,
-    className,
-    tooltip,
-    sentiment,
-    'data-testid': dataTestId
-  } = _ref10;
-  return jsx(Tooltip, {
-    text: tooltip,
-    children: jsxs(Container, {
-      className: className,
-      "data-testid": dataTestId,
-      children: [animated ? jsx(StyledAnimatedCircle, {
-        sentiment: sentiment
-      }) : null, jsx(StyledCircle, {
-        sentiment: sentiment
-      })]
-    })
-  });
-};
+const Status = ({
+  animated = false,
+  className,
+  tooltip,
+  sentiment,
+  'data-testid': dataTestId
+}) => jsx(Tooltip, {
+  text: tooltip,
+  children: jsxs(Container, {
+    className: className,
+    "data-testid": dataTestId,
+    children: [animated ? jsx(StyledAnimatedCircle, {
+      sentiment: sentiment
+    }) : null, jsx(StyledCircle, {
+      sentiment: sentiment
+    })]
+  })
+});
 
 export { Status };