@ultraviolet/plus 0.5.5 → 0.5.7

package/README.md

@@ -18,7 +18,6 @@ $ pnpm add @ultraviolet/plus
 
 Checkout our [documentation website](https://storybook.ultraviolet.scaleway.com/).
 
-
 ## Contributing
 
 📝 You can participate in the development and [start contributing](/CONTRIBUTING.md) to it.

package/dist/@ultraviolet/icons/dist/components/Icon/index.js

@@ -334,10 +334,9 @@ const customViewBoxes = [{
   icons: ['expand'],
   viewBox: '0 0 20 14'
 }];
-const sizeStyles = _ref => {
-  let {
-    size
-  } = _ref;
+const sizeStyles = ({
+  size
+}) => {
   const pxSize = typeof size === 'number' && !Number.isNaN(size) ? `${size}px` : size;
   return /*#__PURE__*/css("height:", pxSize, ";width:", pxSize, ";min-width:", pxSize, ";min-height:", pxSize, ";");
 };
@@ -350,13 +349,12 @@ const PROMINENCES = {
 const StyledIcon = /*#__PURE__*/_styled('svg', {
   shouldForwardProp: prop => !['size', 'color', 'prominence', 'disabled'].includes(prop),
   target: "e1gt4cfo0"
-})("vertical-align:middle;fill:", _ref2 => {
-  let {
-    theme,
-    color,
-    prominence,
-    disabled
-  } = _ref2;
+})("vertical-align:middle;fill:", ({
+  theme,
+  color,
+  prominence,
+  disabled
+}) => {
   // stronger is available only for neutral color
   const definedProminence = color !== 'neutral' && prominence === 'stronger' ? capitalize$1(PROMINENCES.default) : capitalize$1(PROMINENCES[prominence]);
   theme.colors[color];
@@ -366,19 +364,18 @@ const StyledIcon = /*#__PURE__*/_styled('svg', {
 /**
  * Icon component is our set of system icons in the design system. All of them are SVGs.
  */
-const Icon = /*#__PURE__*/forwardRef((_ref3, ref) => {
-  let {
-    name = 'alert',
-    color = 'currentColor',
-    size = '1em',
-    prominence = 'default',
-    className,
-    'data-testid': dataTestId,
-    stroke,
-    cursor,
-    strokeWidth,
-    disabled
-  } = _ref3;
+const Icon = /*#__PURE__*/forwardRef(({
+  name = 'alert',
+  color = 'currentColor',
+  size = '1em',
+  prominence = 'default',
+  className,
+  'data-testid': dataTestId,
+  stroke,
+  cursor,
+  strokeWidth,
+  disabled
+}, ref) => {
   const render = ICONS[name] || ICONS.alert;
   const defaultViewBox = useMemo(() => customViewBoxes.find(vB => vB.icons.includes(name))?.viewBox ?? '0 0 24 24', [name]);
   return jsx(StyledIcon, {

package/dist/index.d.ts

@@ -216,7 +216,7 @@ declare const EstimateCost: {
     ({ description, alert, alertVariant, defaultTimeUnit, timeUnits, hideOverlay, disableOverlayLeft, disableOverlayRight, hideTimeUnit, hideTotal, discount, OverlayRight, OverlayLeft, isBeta, commitmentFees, commitmentFeesContent, monthlyFees, monthlyFeesLabel, monthlyFeesContent, overlayUnit, children, locales, numberLocales, currency, }: EstimateCostProps): _emotion_react_jsx_runtime.JSX.Element;
     LineThrough: _emotion_styled.StyledComponent<{
         theme?: _emotion_react.Theme | undefined;
-        as?: react.ElementType<any> | undefined;
+        as?: react.ElementType<any, keyof react.JSX.IntrinsicElements> | undefined;
     } & {
         isActive?: boolean | undefined;
     }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
@@ -284,7 +284,7 @@ declare const EstimateCost: {
     }) => _emotion_react_jsx_runtime.JSX.Element | null;
     Image: _emotion_styled.StyledComponent<{
         theme?: _emotion_react.Theme | undefined;
-        as?: react.ElementType<any> | undefined;
+        as?: react.ElementType<any, keyof react.JSX.IntrinsicElements> | undefined;
     }, react.DetailedHTMLProps<react.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
     Region: ({ label, image, shouldBeHidden, priceText, animated, isFirstElement, isLastElement, productsCallback, iteration, discount, noBorder, noPrice, }: {
         shouldBeHidden?: boolean | undefined;

package/dist/src/components/CodeEditor/CodeEditor.js

@@ -7,52 +7,40 @@ import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 
 const StyledText = /*#__PURE__*/_styled(Text, {
   target: "e13pskxy0"
-})("background-color:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.colors.neutral.backgroundStrong;
-}, ";padding:", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return `${theme.space['1']} ${theme.space['2']}`;
-}, ";border-radius:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.radii.default;
-}, ";width:100%;");
-const CodeEditor = _ref4 => {
-  let {
-    title,
-    value,
-    onChange,
-    extensions = 'javascript',
-    onBlur,
-    height,
-    readOnly
-  } = _ref4;
-  return jsxs("div", {
-    children: [title ? jsx(StyledText, {
-      as: "h3",
-      variant: "headingSmall",
-      children: title
-    }) : null, jsx(CodeMirror, {
-      readOnly: readOnly,
-      width: "100%",
-      height: height,
-      theme: material,
-      onChange: onChange,
-      value: value,
-      extensions: [langs[extensions]()],
-      onBlur: onBlur,
-      basicSetup: {
-        highlightActiveLine: false,
-        highlightActiveLineGutter: false
-      }
-    })]
-  });
-};
+})("background-color:", ({
+  theme
+}) => theme.colors.neutral.backgroundStrong, ";padding:", ({
+  theme
+}) => `${theme.space['1']} ${theme.space['2']}`, ";border-radius:", ({
+  theme
+}) => theme.radii.default, ";width:100%;");
+const CodeEditor = ({
+  title,
+  value,
+  onChange,
+  extensions = 'javascript',
+  onBlur,
+  height,
+  readOnly
+}) => jsxs("div", {
+  children: [title ? jsx(StyledText, {
+    as: "h3",
+    variant: "headingSmall",
+    children: title
+  }) : null, jsx(CodeMirror, {
+    readOnly: readOnly,
+    width: "100%",
+    height: height,
+    theme: material,
+    onChange: onChange,
+    value: value,
+    extensions: [langs[extensions]()],
+    onBlur: onBlur,
+    basicSetup: {
+      highlightActiveLine: false,
+      highlightActiveLineGutter: false
+    }
+  })]
+});
 
 export { CodeEditor };

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

@@ -5,57 +5,42 @@ import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 const SkeletonImage = /*#__PURE__*/_styled(Skeleton$1, {
   shouldForwardProp: prop => !['height', 'width', 'direction'].includes(prop),
   target: "e1wwr9dc1"
-})("border-radius:", _ref => {
-  let {
-    theme,
-    direction
-  } = _ref;
-  return `${direction === 'column' ? `${theme.radii.default} ${theme.radii.default} 0 0` : `${theme.radii.default} 0 0 ${theme.radii.default}`}`;
-}, ";width:", _ref2 => {
-  let {
-    width
-  } = _ref2;
-  return width;
-}, ";height:", _ref3 => {
-  let {
-    height
-  } = _ref3;
-  return height;
-}, ";");
+})("border-radius:", ({
+  theme,
+  direction
+}) => `${direction === 'column' ? `${theme.radii.default} ${theme.radii.default} 0 0` : `${theme.radii.default} 0 0 ${theme.radii.default}`}`, ";width:", ({
+  width
+}) => width, ";height:", ({
+  height
+}) => height, ";");
 const StyledStack = /*#__PURE__*/_styled(Stack, {
   target: "e1wwr9dc0"
-})("padding:", _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.space['3'];
-}, ";");
-const Skeleton = _ref5 => {
-  let {
-    direction
-  } = _ref5;
-  return jsxs(Stack, {
-    direction: direction,
-    children: [jsx(SkeletonImage, {
-      variant: "square",
-      height: direction === 'column' ? '120px' : 'unset',
-      width: direction === 'row' ? '220px' : undefined,
-      direction: direction
-    }), jsxs(StyledStack, {
-      gap: 2,
-      children: [jsx(Skeleton$1, {
-        variant: "line"
-      }), jsx(Skeleton$1, {
-        variant: "line"
-      }), jsx(Skeleton$1, {
-        variant: "line"
-      }), jsx(Skeleton$1, {
-        variant: "line"
-      }), jsx(Skeleton$1, {
-        variant: "line"
-      })]
+})("padding:", ({
+  theme
+}) => theme.space['3'], ";");
+const Skeleton = ({
+  direction
+}) => jsxs(Stack, {
+  direction: direction,
+  children: [jsx(SkeletonImage, {
+    variant: "square",
+    height: direction === 'column' ? '120px' : 'unset',
+    width: direction === 'row' ? '220px' : undefined,
+    direction: direction
+  }), jsxs(StyledStack, {
+    gap: 2,
+    children: [jsx(Skeleton$1, {
+      variant: "line"
+    }), jsx(Skeleton$1, {
+      variant: "line"
+    }), jsx(Skeleton$1, {
+      variant: "line"
+    }), jsx(Skeleton$1, {
+      variant: "line"
+    }), jsx(Skeleton$1, {
+      variant: "line"
     })]
-  });
-};
+  })]
+});
 
 export { Skeleton };

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

@@ -9,94 +9,55 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 const activeStyle = theme => /*#__PURE__*/css("&:hover{border:1px solid ", theme.colors.primary.borderHover, ";box-shadow:", theme.shadows.defaultShadow, ";cursor:pointer;}");
 const Card = /*#__PURE__*/_styled("div", {
   target: "e2ipnt5"
-})("display:block;text-align:left;padding:0;color:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.colors.neutral.text;
-}, ";text-decoration:none;border:1px solid ", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.colors.neutral.border;
-}, ";border-radius:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.radii.default;
-}, ";background:", _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.colors.neutral.background;
-}, ";", _ref5 => {
-  let {
-    onClick,
-    href,
-    theme
-  } = _ref5;
-  return onClick || href ? activeStyle(theme) : null;
-}, ";overflow-wrap:break-word;");
+})("display:block;text-align:left;padding:0;color:", ({
+  theme
+}) => theme.colors.neutral.text, ";text-decoration:none;border:1px solid ", ({
+  theme
+}) => theme.colors.neutral.border, ";border-radius:", ({
+  theme
+}) => theme.radii.default, ";background:", ({
+  theme
+}) => theme.colors.neutral.background, ";", ({
+  onClick,
+  href,
+  theme
+}) => onClick || href ? activeStyle(theme) : null, ";overflow-wrap:break-word;");
 const IconContainer = /*#__PURE__*/_styled("div", {
   target: "e2ipnt4"
-})("display:flex;width:fit-content;background:", _ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return theme.colors.neutral.backgroundWeak;
-}, ";padding:", _ref7 => {
-  let {
-    theme
-  } = _ref7;
-  return theme.space['1'];
-}, ";border-radius:", _ref8 => {
-  let {
-    theme
-  } = _ref8;
-  return theme.radii.default;
-}, ";");
+})("display:flex;width:fit-content;background:", ({
+  theme
+}) => theme.colors.neutral.backgroundWeak, ";padding:", ({
+  theme
+}) => theme.space['1'], ";border-radius:", ({
+  theme
+}) => theme.radii.default, ";");
 const StyledIconStack = /*#__PURE__*/_styled(Stack, {
   shouldForwardProp: prop => prop !== 'direction',
   target: "e2ipnt3"
-})("padding:", _ref9 => {
-  let {
-    theme,
-    direction
-  } = _ref9;
-  return direction === 'column' ? `0 ${theme.space['3']} ${theme.space['3']} ${theme.space['3']}` : `${theme.space['3']} ${theme.space['3']} ${theme.space['3']} 0`;
-}, ";");
+})("padding:", ({
+  theme,
+  direction
+}) => direction === 'column' ? `0 ${theme.space['3']} ${theme.space['3']} ${theme.space['3']}` : `${theme.space['3']} ${theme.space['3']} ${theme.space['3']} 0`, ";");
 const SubContainer = /*#__PURE__*/_styled(Stack, {
   shouldForwardProp: prop => !['direction', 'href'].includes(prop),
   target: "e2ipnt2"
-})("padding:", _ref10 => {
-  let {
-    theme,
-    direction
-  } = _ref10;
-  return direction === 'column' ? `${theme.space['3']} ${theme.space['3']} 0 ${theme.space['3']}` : `${theme.space['3']} 0 ${theme.space['3']} ${theme.space['3']}`;
-}, ";padding:", _ref11 => {
-  let {
-    theme,
-    href
-  } = _ref11;
-  return !href ? `${theme.space['3']}` : null;
-}, ";height:fit-content;");
+})("padding:", ({
+  theme,
+  direction
+}) => direction === 'column' ? `${theme.space['3']} ${theme.space['3']} 0 ${theme.space['3']}` : `${theme.space['3']} 0 ${theme.space['3']} ${theme.space['3']}`, ";padding:", ({
+  theme,
+  href
+}) => !href ? `${theme.space['3']}` : null, ";height:fit-content;");
 const Image = /*#__PURE__*/_styled('img', {
   shouldForwardProp: prop => !['direction', 'subContainerHeight'].includes(prop),
   target: "e2ipnt1"
-})("object-fit:cover;border-radius:", _ref12 => {
-  let {
-    theme,
-    direction
-  } = _ref12;
-  return `${direction === 'column' ? `${theme.radii.default} ${theme.radii.default} 0 0` : `${theme.radii.default} 0 0 ${theme.radii.default}`}`;
-}, ";", _ref13 => {
-  let {
-    direction,
-    subContainerHeight
-  } = _ref13;
-  return direction === 'row' ? `max-height: ${subContainerHeight}px` : null;
-}, ";");
+})("object-fit:cover;border-radius:", ({
+  theme,
+  direction
+}) => `${direction === 'column' ? `${theme.radii.default} ${theme.radii.default} 0 0` : `${theme.radii.default} 0 0 ${theme.radii.default}`}`, ";", ({
+  direction,
+  subContainerHeight
+}) => direction === 'row' ? `max-height: ${subContainerHeight}px` : null, ";");
 const FullHeightStack = /*#__PURE__*/_styled(Stack, {
   target: "e2ipnt0"
 })(process.env.NODE_ENV === "production" ? {
@@ -112,21 +73,20 @@ const FullHeightStack = /*#__PURE__*/_styled(Stack, {
  * It can take different directions to display the image and the content. You can also add more content
  * by passing children.
  */
-const ContentCard = /*#__PURE__*/forwardRef((_ref14, ref) => {
-  let {
-    image,
-    direction = 'column',
-    icon,
-    subtitle,
-    title,
-    description,
-    children,
-    href,
-    target = '_blank',
-    onClick,
-    loading,
-    className
-  } = _ref14;
+const ContentCard = /*#__PURE__*/forwardRef(({
+  image,
+  direction = 'column',
+  icon,
+  subtitle,
+  title,
+  description,
+  children,
+  href,
+  target = '_blank',
+  onClick,
+  loading,
+  className
+}, ref) => {
   const subContainerRef = /*#__PURE__*/createRef();
   const [subContainerHeight, setSubContainerHeight] = useState(subContainerRef?.current?.offsetHeight);
   const Container = useMemo(() => {

package/dist/src/components/ContentCardGroup/Card.js

@@ -17,65 +17,32 @@ const StyledStack = /*#__PURE__*/_styled(Stack, {
 });
 const IconWrapper = /*#__PURE__*/_styled("div", {
   target: "eqcw8nr2"
-})("display:inline-flex;background:", _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.colors.neutral.backgroundWeak;
-}, ";padding:", _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.space['1'];
-}, ";border-radius:", _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.radii.default;
-}, ";");
+})("display:inline-flex;background:", ({
+  theme
+}) => theme.colors.neutral.backgroundWeak, ";padding:", ({
+  theme
+}) => theme.space['1'], ";border-radius:", ({
+  theme
+}) => theme.radii.default, ";");
 const StyledWrapper = /*#__PURE__*/_styled("a", {
   target: "eqcw8nr1"
-})("padding:", _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.space['3'];
-}, ";text-decoration:none;height:100%;&:not(:first-child){border-top:1px solid ", _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.colors.neutral.border;
-}, ";}&:first-child{border-radius:", _ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return theme.radii.default;
-}, " ", _ref7 => {
-  let {
-    theme
-  } = _ref7;
-  return theme.radii.default;
-}, " 0 0;}&:last-child{border-radius:0 0 ", _ref8 => {
-  let {
-    theme
-  } = _ref8;
-  return theme.radii.default;
-}, " ", _ref9 => {
-  let {
-    theme
-  } = _ref9;
-  return theme.radii.default;
-}, ";}& ", IconWrapper, "{background:", _ref10 => {
-  let {
-    theme
-  } = _ref10;
-  return theme.colors.neutral.backgroundWeak;
-}, ";}&:hover{background:", _ref11 => {
-  let {
-    theme
-  } = _ref11;
-  return theme.colors.neutral.backgroundHover;
-}, ";& ", IconWrapper, "{background:none;}}");
+})("padding:", ({
+  theme
+}) => theme.space['3'], ";text-decoration:none;height:100%;&:not(:first-child){border-top:1px solid ", ({
+  theme
+}) => theme.colors.neutral.border, ";}&:first-child{border-radius:", ({
+  theme
+}) => theme.radii.default, " ", ({
+  theme
+}) => theme.radii.default, " 0 0;}&:last-child{border-radius:0 0 ", ({
+  theme
+}) => theme.radii.default, " ", ({
+  theme
+}) => theme.radii.default, ";}& ", IconWrapper, "{background:", ({
+  theme
+}) => theme.colors.neutral.backgroundWeak, ";}&:hover{background:", ({
+  theme
+}) => theme.colors.neutral.backgroundHover, ";& ", IconWrapper, "{background:none;}}");
 const FullHeightStack = /*#__PURE__*/_styled(Stack, {
   target: "eqcw8nr0"
 })(process.env.NODE_ENV === "production" ? {
@@ -86,56 +53,53 @@ const FullHeightStack = /*#__PURE__*/_styled(Stack, {
   styles: "height:100%",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-const Card = /*#__PURE__*/forwardRef((_ref12, ref) => {
-  let {
-    title,
-    subtitle,
-    description,
-    children,
-    href,
-    target = '_blank'
-  } = _ref12;
-  return jsx(StyledWrapper, {
-    href: href,
-    target: target,
-    ref: ref,
-    children: jsxs(FullHeightStack, {
-      direction: "row",
-      gap: 2,
-      alignItems: "center",
-      justifyContent: "space-between",
-      children: [jsxs(StyledStack, {
-        gap: "0.5",
-        children: [jsxs("div", {
-          children: [subtitle ? jsx(Text, {
-            as: "h5",
-            variant: "caption",
-            prominence: "weak",
-            sentiment: "neutral",
-            oneLine: true,
-            children: subtitle
-          }) : null, jsx(Text, {
-            as: "h3",
-            variant: "bodyStrong",
-            sentiment: "neutral",
-            oneLine: true,
-            children: title
-          })]
-        }), description ? jsx(Text, {
-          as: "p",
-          variant: "bodySmall",
+const Card = /*#__PURE__*/forwardRef(({
+  title,
+  subtitle,
+  description,
+  children,
+  href,
+  target = '_blank'
+}, ref) => jsx(StyledWrapper, {
+  href: href,
+  target: target,
+  ref: ref,
+  children: jsxs(FullHeightStack, {
+    direction: "row",
+    gap: 2,
+    alignItems: "center",
+    justifyContent: "space-between",
+    children: [jsxs(StyledStack, {
+      gap: "0.5",
+      children: [jsxs("div", {
+        children: [subtitle ? jsx(Text, {
+          as: "h5",
+          variant: "caption",
+          prominence: "weak",
           sentiment: "neutral",
           oneLine: true,
-          children: description
-        }) : null, children]
-      }), jsx(IconWrapper, {
-        children: jsx(Icon, {
-          name: "open-in-new",
-          color: "neutral"
-        })
-      })]
-    })
-  });
-});
+          children: subtitle
+        }) : null, jsx(Text, {
+          as: "h3",
+          variant: "bodyStrong",
+          sentiment: "neutral",
+          oneLine: true,
+          children: title
+        })]
+      }), description ? jsx(Text, {
+        as: "p",
+        variant: "bodySmall",
+        sentiment: "neutral",
+        oneLine: true,
+        children: description
+      }) : null, children]
+    }), jsx(IconWrapper, {
+      children: jsx(Icon, {
+        name: "open-in-new",
+        color: "neutral"
+      })
+    })]
+  })
+}));
 
 export { Card };