@ultraviolet/plus 0.5.4 → 0.5.6

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

@@ -5,6 +5,9 @@ import capitalize$1 from '../../utils/capitalize.js';
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 
 const ICONS = {
+  address: () => jsx("path", {
+    d: "M7.66667 4C8.10869 4 8.53262 4.17559 8.84518 4.48816C9.15774 4.80072 9.33333 5.22464 9.33333 5.66667C9.33333 5.88554 9.29022 6.10226 9.20647 6.30447C9.12271 6.50668 8.99994 6.69041 8.84518 6.84518C8.69041 6.99994 8.50668 7.12271 8.30447 7.20647C8.10226 7.29022 7.88554 7.33333 7.66667 7.33333C7.22464 7.33333 6.80072 7.15774 6.48816 6.84518C6.17559 6.53262 6 6.10869 6 5.66667C6 5.22464 6.17559 4.80072 6.48816 4.48816C6.80072 4.17559 7.22464 4 7.66667 4ZM7.66667 1C8.90434 1 10.0913 1.49167 10.9665 2.36683C11.8417 3.242 12.3333 4.42899 12.3333 5.66667C12.3333 9.16667 7.66667 14.3333 7.66667 14.3333C7.66667 14.3333 3 9.16667 3 5.66667C3 4.42899 3.49167 3.242 4.36683 2.36683C5.242 1.49167 6.42899 1 7.66667 1ZM7.66667 2.33333C6.78261 2.33333 5.93477 2.68452 5.30964 3.30964C4.68452 3.93477 4.33333 4.78261 4.33333 5.66667C4.33333 6.33333 4.33333 7.66667 7.66667 12.14C11 7.66667 11 6.33333 11 5.66667C11 4.78261 10.6488 3.93477 10.0237 3.30964C9.39857 2.68452 8.55072 2.33333 7.66667 2.33333Z"
+  }),
   alert: () => jsx("path", {
     d: "M11 15H13V17H11V15ZM11 7H13V13H11V7ZM12 2C6.47 2 2 6.5 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 20C9.87827 20 7.84344 19.1571 6.34315 17.6569C4.84285 16.1566 4 14.1217 4 12C4 9.87827 4.84285 7.84344 6.34315 6.34315C7.84344 4.84285 9.87827 4 12 4C14.1217 4 16.1566 4.84285 17.6569 6.34315C19.1571 7.84344 20 9.87827 20 12C20 14.1217 19.1571 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20Z"
   }),
@@ -319,7 +322,7 @@ const ICONS = {
   })
 };
 const customViewBoxes = [{
-  icons: ['arrow-left-double', 'arrow-right-double', 'arrow-left', 'arrow-right', 'arrow-down', 'arrow-up', 'credentials', 'logout', 'organization', 'privacy', 'profile', 'support', 'switch_orga', 'credit-card', 'progress-check', 'id', 'reboot'],
+  icons: ['address', 'arrow-left-double', 'arrow-right-double', 'arrow-left', 'arrow-right', 'arrow-down', 'arrow-up', 'credentials', 'logout', 'organization', 'privacy', 'profile', 'support', 'switch_orga', 'credit-card', 'progress-check', 'id', 'reboot'],
   viewBox: '0 0 16 16'
 }, {
   icons: ['members'],
@@ -331,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, ";");
 };
@@ -347,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];
@@ -363,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

@@ -235,7 +235,7 @@ declare const EstimateCost: {
         iteration?: Iteration | undefined;
         label?: ReactNode;
         labelTextVariant?: "body" | "caption" | "code" | "heading" | "bodySmall" | "bodySmallStrong" | "bodySmallStronger" | "bodyStrong" | "bodyStronger" | "captionSmall" | "captionSmallStrong" | "captionSmallStronger" | "captionStrong" | "captionStronger" | "headingLarge" | "headingSmall" | undefined;
-        labelTextProminence?: "strong" | "default" | "stronger" | "weak" | undefined;
+        labelTextProminence?: "strong" | "weak" | "default" | "stronger" | undefined;
         longFractionDigits?: boolean | undefined;
         maxAmount?: number | undefined;
         monthlyPrice?: number | 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 };