@soul-refiner/design-system 2.5.0-alpha.4 → 2.5.0-alpha.6

package/dist/components/feedback/banner/index.js

@@ -0,0 +1 @@
+export { Banner } from './banner';

package/dist/components/feedback/chip/chip.js

@@ -1,11 +1,70 @@
-"use client";
-"use strict";var React=require("react"),styled=require("styled-components"),close=require("../../../icons/basic/close.js");function _interopDefaultCompat(r){return r&&"object"==typeof r&&"default"in r?r:{default:r}}var React__default=_interopDefaultCompat(React);const colorLookup={"primary-blue":{primary:"var(--color-primary-blue-2)",secondary:"var(--color-white)",text:"var(--color-white)"},blue:{primary:"var(--color-blue-9)",secondary:"var(--color-blue-5)",text:"var(--color-grey-4)"},green:{primary:"var(--color-green-9)",secondary:"var(--color-green-5)",text:"var(--color-grey-4)"},grey:{primary:"var(--color-grey-9)",secondary:"var(--color-grey-4)",text:"var(--color-grey-4)"},orange:{primary:"var(--color-orange-9)",secondary:"var(--color-orange-5)",text:"var(--color-grey-4)"},purple:{primary:"var(--color-purple-9)",secondary:"var(--color-purple-5)",text:"var(--color-grey-4)"},red:{primary:"var(--color-red-9)",secondary:"var(--color-red-5)",text:"var(--color-grey-4)"},turquoise:{primary:"var(--color-turquoise-9)",secondary:"var(--color-turquoise-5)",text:"var(--color-grey-4)"},yellow:{primary:"var(--color-yellow-9)",secondary:"var(--color-yellow-9)",text:"var(--color-grey-4)"}},Chip=({children:r,color:o,dot:e,onDismiss:t,size:a})=>{var l=colorLookup[o].primary,c=colorLookup[o].text,o=colorLookup[o].secondary;return React__default.default.createElement(Component,{$bgColor:l,$size:a,$textColor:c},e&&React__default.default.createElement(Dot,{$secondaryColor:o}),r,t&&React__default.default.createElement(close.Close,{size:16,onClick:t}))},Component=styled.styled.div`
+'use client';
+import React from 'react';
+import { styled } from 'styled-components';
+import { Close } from '../../../icons/basic/close';
+const colorLookup = {
+    'primary-blue': {
+        primary: 'var(--color-primary-blue-2)',
+        secondary: 'var(--color-white)',
+        text: 'var(--color-white)',
+    },
+    blue: {
+        primary: 'var(--color-blue-9)',
+        secondary: 'var(--color-blue-5)',
+        text: 'var(--color-grey-4)',
+    },
+    green: {
+        primary: 'var(--color-green-9)',
+        secondary: 'var(--color-green-5)',
+        text: 'var(--color-grey-4)',
+    },
+    grey: {
+        primary: 'var(--color-grey-9)',
+        secondary: 'var(--color-grey-4)',
+        text: 'var(--color-grey-4)',
+    },
+    orange: {
+        primary: 'var(--color-orange-9)',
+        secondary: 'var(--color-orange-5)',
+        text: 'var(--color-grey-4)',
+    },
+    purple: {
+        primary: 'var(--color-purple-9)',
+        secondary: 'var(--color-purple-5)',
+        text: 'var(--color-grey-4)',
+    },
+    red: {
+        primary: 'var(--color-red-9)',
+        secondary: 'var(--color-red-5)',
+        text: 'var(--color-grey-4)',
+    },
+    turquoise: {
+        primary: 'var(--color-turquoise-9)',
+        secondary: 'var(--color-turquoise-5)',
+        text: 'var(--color-grey-4)',
+    },
+    yellow: {
+        primary: 'var(--color-yellow-9)',
+        secondary: 'var(--color-yellow-9)',
+        text: 'var(--color-grey-4)',
+    },
+};
+export const Chip = ({ children, color, dot, onDismiss, size }) => {
+    const bgColor = colorLookup[color].primary;
+    const textColor = colorLookup[color].text;
+    const dotColor = colorLookup[color].secondary;
+    return (React.createElement(Component, { "$bgColor": bgColor, "$size": size, "$textColor": textColor },
+        dot && React.createElement(Dot, { "$secondaryColor": dotColor }),
+        children,
+        onDismiss && React.createElement(Close, { size: 16, onClick: onDismiss })));
+};
+const Component = styled.div `
   display: flex;
   align-items: center;
   gap: 8px;
   border-radius: 32px;
-  background-color: ${({$bgColor:r})=>r};
-  color: ${({$textColor:r})=>r};
+  background-color: ${({ $bgColor }) => $bgColor};
+  color: ${({ $textColor }) => $textColor};
   font-family: var(--font-inter);
   user-select: none;
 
@@ -13,18 +72,23 @@
     fill: currentColor;
     cursor: pointer;
   }
-  ${({$size:r})=>"small"===r?`
+  ${({ $size }) => $size === 'small'
+    ? // small
+        `
     padding: 4px 16px;
     font-size: 12px;
     line-height: 16px;
-    font-weight: 500;`:`
+    font-weight: 500;`
+    : // large
+        `
     padding: 8px 16px;
     font-size: 14px;
     line-height: 20px;
     font-weight: 600;`}
-`,Dot=styled.styled.div`
+`;
+const Dot = styled.div `
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background-color: ${({$secondaryColor:r})=>r};
-`;exports.Chip=Chip;
+  background-color: ${({ $secondaryColor }) => $secondaryColor};
+`;

package/dist/components/feedback/chip/index.js

@@ -0,0 +1 @@
+export { Chip } from './chip';

package/dist/components/feedback/index.js

@@ -0,0 +1,8 @@
+export { Badge } from './badge';
+export { Banner } from './banner';
+export { Loader } from './loader';
+export { Notification } from './notification';
+export { Progress } from './progress';
+export { Toast } from './toast';
+export { Tooltip } from './tooltip';
+export { AnimatedToast } from './animated_toast';

package/dist/components/feedback/loader/index.js

@@ -0,0 +1 @@
+export { Loader } from './loader';

package/dist/components/feedback/loader/loader.js

@@ -1,20 +1,34 @@
-"use client";
-"use strict";var React=require("react"),styled=require("styled-components"),colors=require("../../../common/colors.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),styled__default=_interopDefaultCompat(styled);const Loader=({color:e="grey-1",inline:t,size:r=16,sx:o})=>{let a=3;return 96<r?a=10:47<r?a=5:23<r&&(a=4),React__default.default.createElement(Component,{$borderWidth:a,$color:e,$inline:!!t,$size:r,$sx:o})},spin=styled.keyframes`
+'use client';
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+import { colorReference } from '../../../common/colors';
+export const Loader = ({ color = 'grey-1', inline, size = 16, sx, }) => {
+    let borderWidth = 3;
+    if (size > 96)
+        borderWidth = 10;
+    else if (size > 47)
+        borderWidth = 5;
+    else if (size > 23)
+        borderWidth = 4;
+    return (React.createElement(Component, { "$borderWidth": borderWidth, "$color": color, "$inline": !!inline, "$size": size, "$sx": sx }));
+};
+const spin = keyframes `
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
-`,Component=styled__default.default.div`
+`;
+const Component = styled.div `
   border: 2px solid transparent;
   border-radius: 50%;
   animation: ${spin} 0.8s linear infinite;
 
-  border-width: ${({$borderWidth:e})=>e+"px"};
-  border-color: ${({$color:e})=>colors.colorReference[e]};
+  border-width: ${({ $borderWidth }) => `${$borderWidth}px`};
+  border-color: ${({ $color }) => colorReference[$color]};
   border-top-color: transparent;
 
-  ${({$size:e})=>`
-    height: ${e}px;
-    width: ${e}px;
+  ${({ $size }) => `
+    height: ${$size}px;
+    width: ${$size}px;
   `}
 
-  ${({$sx:e})=>e||""};
-`;exports.Loader=Loader;
+  ${({ $sx }) => ($sx ? $sx : '')};
+`;

package/dist/components/feedback/notification/index.js

@@ -0,0 +1 @@
+export { Notification } from './notification';

package/dist/components/feedback/notification/notification.js

@@ -1,18 +1,62 @@
-"use client";
-"use strict";var React=require("react"),styled=require("styled-components"),styles=require("../../../common/styles.js"),box=require("../../atoms/box/box.js"),button=require("../../actions/button/button.js"),paragraph=require("../../atoms/typography/paragraph.js"),alert_circle=require("../../../icons/notifications/alert_circle.js"),alert_octogon=require("../../../icons/notifications/alert_octogon.js"),alert_triangle=require("../../../icons/notifications/alert_triangle.js"),close=require("../../../icons/basic/close.js"),information=require("../../../icons/notifications/information.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Notification=({content:e,href:t,onClose:r,sx:a,title:o,type:l})=>{var i={error:React__default.default.createElement(alert_octogon.AlertOctogon,{size:24}),info:React__default.default.createElement(information.Information,{size:24}),success:React__default.default.createElement(alert_circle.AlertCircle,{size:24}),warning:React__default.default.createElement(alert_triangle.AlertTriangle,{size:24})};return React__default.default.createElement(Wrapper,{as:t?"a":"output",href:t,$dir:"column",$gap:8,$sx:a,$type:l},React__default.default.createElement(box.Box,{$dir:"row",$gap:8,$flex:1},i[l],React__default.default.createElement(paragraph.P,{as:"span",$semiBold:!0},o),r&&React__default.default.createElement(button.Button,{icon:React__default.default.createElement(close.Close,{size:24}),onClick:r,sx:"margin-left: auto;",type:"special"})),React__default.default.createElement(box.Box,{$align:"center",$dir:"row",$gap:4},React__default.default.createElement(paragraph.P,{as:"span",sx:"padding-left: 32px;"},e)))},Wrapper=styled.styled.output`
+'use client';
+import React from 'react';
+import { styled } from 'styled-components';
+import { Styles } from '../../../common/styles';
+import { Box } from '../../../components/atoms/box/box';
+import { Button } from '../../../components/actions/button/button';
+import { P } from '../../../components/atoms/typography/paragraph';
+import { AlertCircle } from '../../../icons/notifications/alert_circle';
+import { AlertOctogon } from '../../../icons/notifications/alert_octogon';
+import { AlertTriangle } from '../../../icons/notifications/alert_triangle';
+import { Close } from '../../../icons/basic/close';
+import { Information } from '../../../icons/notifications/information';
+export const Notification = ({ content, href, onClose, sx, title, type, }) => {
+    const iconLookup = {
+        error: React.createElement(AlertOctogon, { size: 24 }),
+        info: React.createElement(Information, { size: 24 }),
+        success: React.createElement(AlertCircle, { size: 24 }),
+        warning: React.createElement(AlertTriangle, { size: 24 }),
+    };
+    return (React.createElement(Wrapper, { as: href ? 'a' : 'output', href: href, "$dir": "column", "$gap": 8, "$sx": sx, "$type": type },
+        React.createElement(Box, { "$dir": "row", "$gap": 8, "$flex": 1 },
+            iconLookup[type],
+            React.createElement(P, { as: "span", "$semiBold": true }, title),
+            onClose && (React.createElement(Button, { icon: React.createElement(Close, { size: 24 }), onClick: onClose, sx: "margin-left: auto;", type: "special" }))),
+        React.createElement(Box, { "$align": "center", "$dir": "row", "$gap": 4 },
+            React.createElement(P, { as: "span", sx: "padding-left: 32px;" }, content))));
+};
+const Wrapper = styled.output `
   text-decoration: none;
   width: 100%;
   box-sizing: border-box;
   padding: 16px;
   display: flex;
-  background-color: ${({$type:e})=>"error"===e?"var(--color-red-9)":"info"===e?"var(--color-blue-9)":"success"===e?"var(--color-green-9)":"var(--color-orange-9)"};
+  background-color: ${({ $type }) => $type === 'error'
+    ? 'var(--color-red-9)'
+    : $type === 'info'
+        ? 'var(--color-blue-9)'
+        : $type === 'success'
+            ? 'var(--color-green-9)'
+            : 'var(--color-orange-9)'};
   border: 1px solid
-    ${({$type:e})=>"error"===e?"var(--color-red-8)":"info"===e?"var(--color-blue-8)":"success"===e?"var(--color-green-8)":"var(--color-orange-8)"};
+    ${({ $type }) => $type === 'error'
+    ? 'var(--color-red-8)'
+    : $type === 'info'
+        ? 'var(--color-blue-8)'
+        : $type === 'success'
+            ? 'var(--color-green-8)'
+            : 'var(--color-orange-8)'};
   box-shadow: var(--elevation-2);
   border-radius: var(--small);
 
   & > div > svg {
-    fill: ${({$type:e})=>"error"===e?"var(--color-red-4)":"info"===e?"var(--color-blue-4)":"success"===e?"var(--color-green-3)":"var(--color-orange-5)"};
+    fill: ${({ $type }) => $type === 'error'
+    ? 'var(--color-red-4)'
+    : $type === 'info'
+        ? 'var(--color-blue-4)'
+        : $type === 'success'
+            ? 'var(--color-green-3)'
+            : 'var(--color-orange-5)'};
   }
 
   button > svg {
@@ -29,6 +73,6 @@
     margin-left: auto;
   }
 
-  ${styles.Styles.flex}
-  ${({$sx:e})=>e||""}
-`;exports.Notification=Notification;
+  ${Styles.flex}
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;

package/dist/components/feedback/progress/index.js

@@ -0,0 +1 @@
+export { Progress } from './progress';

package/dist/components/feedback/progress/progress.js

@@ -1,16 +1,68 @@
-"use client";
-"use strict";var React=require("react"),styled=require("styled-components"),colors=require("../../../common/colors.js"),box=require("../../atoms/box/box.js"),paragraph=require("../../atoms/typography/paragraph.js"),checkmark_circle=require("../../../icons/basic/checkmark_circle.js"),checkmarks=require("../../../icons/basic/checkmarks.js"),close=require("../../../icons/basic/close.js"),minus_circle=require("../../../icons/basic/minus_circle.js"),pause=require("../../../icons/audio_video/pause.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Progress=({hasError:e,progress:r,subtitle:t,sx:a,title:o,type:l})=>{var c=!e&&99<r,l="detailed"===l,r=e||c?100:r,i=e?"-":r+"%",d=e?"red-4":c?"green-3":"primary-blue-2",s=e?{start:"var(--color-red-6)",end:"var(--color-red-4)",empty:"var(--color-red-8)",bg:"var(--color-red-9)"}:c?{start:"var(--color-green-5)",end:"var(--color-green-3)",empty:"var(--color-green-8)",bg:"var(--color-green-9)"}:{start:"#abcfed",end:"var(--color-primary-blue-2)",empty:"var(--color-primary-blue-3)",bg:"var(--color-primary-blue-4)"},n=e?React__default.default.createElement(close.Close,{size:24,color:d}):c?React__default.default.createElement(checkmarks.Checkmarks,{size:24,color:d}):React__default.default.createElement(pause.Pause,{size:24,color:d});return React__default.default.createElement(box.Box,{$align:"center",$dir:"row",$gap:16,sx:a},l&&React__default.default.createElement(IconWrapper,{$completedDegree:Math.round(3.6*r),$gradientColors:s},React__default.default.createElement(IconInnerWrapper,{$bg:s.bg},n)),React__default.default.createElement(box.Box,{$dir:"column",$flex:1,$gap:8},React__default.default.createElement(box.Box,null,o&&React__default.default.createElement(paragraph.P,{$color:"grey-2",$fontSize:14,$lineHeight:20},o),c&&React__default.default.createElement(checkmark_circle.CheckmarkCircle,{color:"green-3",size:24,sx:"margin-left: auto;"}),e&&React__default.default.createElement(minus_circle.MinusCircle,{color:"red-4",size:24,sx:"margin-left: auto;"})),React__default.default.createElement(BarWrapper,null,React__default.default.createElement(Bar,{$color:colors.colorReference[d],$percent:r})),t&&React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:12,$lineHeight:16},t)),l&&React__default.default.createElement(paragraph.P,{$color:"grey-4",$textAlign:"center",sx:"width: 72px;"},i))},BarWrapper=styled.styled.div`
+'use client';
+import React from 'react';
+import { styled } from 'styled-components';
+import { colorReference } from '../../../common/colors';
+import { Box } from '../../../components/atoms/box/box';
+import { P } from '../../../components/atoms/typography/paragraph';
+import { CheckmarkCircle } from '../../../icons/basic/checkmark_circle';
+import { Checkmarks } from '../../../icons/basic/checkmarks';
+import { Close } from '../../../icons/basic/close';
+import { MinusCircle } from '../../../icons/basic/minus_circle';
+import { Pause } from '../../../icons/audio_video/pause';
+export const Progress = ({ hasError, progress, subtitle, sx, title, type, }) => {
+    const isComplete = !hasError && progress > 99;
+    const isDetailed = type === 'detailed';
+    const percent = hasError || isComplete ? 100 : progress;
+    const displayPercent = hasError ? '-' : percent + '%';
+    const color = hasError ? 'red-4' : isComplete ? 'green-3' : 'primary-blue-2';
+    const gradientColors = hasError
+        ? {
+            start: 'var(--color-red-6)',
+            end: 'var(--color-red-4)',
+            empty: 'var(--color-red-8)',
+            bg: 'var(--color-red-9)',
+        }
+        : isComplete
+            ? {
+                start: 'var(--color-green-5)',
+                end: 'var(--color-green-3)',
+                empty: 'var(--color-green-8)',
+                bg: 'var(--color-green-9)',
+            }
+            : {
+                start: '#abcfed',
+                end: 'var(--color-primary-blue-2)',
+                empty: 'var(--color-primary-blue-3)',
+                bg: 'var(--color-primary-blue-4)',
+            };
+    const icon = hasError ? (React.createElement(Close, { size: 24, color: color })) : isComplete ? (React.createElement(Checkmarks, { size: 24, color: color })) : (React.createElement(Pause, { size: 24, color: color }));
+    return (React.createElement(Box, { "$align": "center", "$dir": "row", "$gap": 16, sx: sx },
+        isDetailed && (React.createElement(IconWrapper, { "$completedDegree": Math.round(percent * 3.6), "$gradientColors": gradientColors },
+            React.createElement(IconInnerWrapper, { "$bg": gradientColors.bg }, icon))),
+        React.createElement(Box, { "$dir": "column", "$flex": 1, "$gap": 8 },
+            React.createElement(Box, null,
+                title && (React.createElement(P, { "$color": "grey-2", "$fontSize": 14, "$lineHeight": 20 }, title)),
+                isComplete && (React.createElement(CheckmarkCircle, { color: "green-3", size: 24, sx: "margin-left: auto;" })),
+                hasError && (React.createElement(MinusCircle, { color: "red-4", size: 24, sx: "margin-left: auto;" }))),
+            React.createElement(BarWrapper, null,
+                React.createElement(Bar, { "$color": colorReference[color], "$percent": percent })),
+            subtitle && (React.createElement(P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16 }, subtitle))),
+        isDetailed && (React.createElement(P, { "$color": "grey-4", "$textAlign": "center", sx: "width: 72px;" }, displayPercent))));
+};
+const BarWrapper = styled.div `
   position: relative;
   width: 100%;
   height: 12px;
   border-radius: 32px;
   background-color: var(--color-grey-8);
-`,Bar=styled.styled.div`
-  width: ${({$percent:e})=>e}%;
+`;
+const Bar = styled.div `
+  width: ${({ $percent }) => $percent}%;
   height: 12px;
-  background-color: ${({$color:e})=>e};
+  background-color: ${({ $color }) => $color};
   border-radius: 32px;
-`,IconWrapper=styled.styled.div`
+`;
+const IconWrapper = styled.div `
   position: relative;
   display: block;
   width: 45px;
@@ -21,19 +73,20 @@
   border-radius: 50%;
   flex-shrink: 0;
   background: conic-gradient(
-    ${({$gradientColors:e})=>e.start},
-    ${({$gradientColors:e})=>e.end}
-      ${({$completedDegree:e})=>e}deg,
-    ${({$gradientColors:e})=>e.empty}
-      ${({$completedDegree:e})=>e}deg 360deg
+    ${({ $gradientColors }) => $gradientColors.start},
+    ${({ $gradientColors }) => $gradientColors.end}
+      ${({ $completedDegree }) => $completedDegree}deg,
+    ${({ $gradientColors }) => $gradientColors.empty}
+      ${({ $completedDegree }) => $completedDegree}deg 360deg
   );
-  border: 1px solid ${({$gradientColors:e})=>e.bg};
-`,IconInnerWrapper=styled.styled.div`
+  border: 1px solid ${({ $gradientColors }) => $gradientColors.bg};
+`;
+const IconInnerWrapper = styled.div `
   display: flex;
   justify-content: center;
   align-items: center;
   height: 39px;
   width: 39px;
   border-radius: 50%;
-  background-color: ${({$bg:e})=>e};
-`;exports.Progress=Progress;
+  background-color: ${({ $bg }) => $bg};
+`;

package/dist/components/feedback/toast/index.js

@@ -0,0 +1 @@
+export { Toast } from './toast';

package/dist/components/feedback/toast/toast.js

@@ -1,5 +1,30 @@
-"use client";
-"use strict";var React=require("react"),styled=require("styled-components"),styles=require("../../../common/styles.js"),button=require("../../actions/button/button.js"),paragraph=require("../../atoms/typography/paragraph.js"),alert_circle=require("../../../icons/notifications/alert_circle.js"),alert_octogon=require("../../../icons/notifications/alert_octogon.js"),alert_triangle=require("../../../icons/notifications/alert_triangle.js"),close=require("../../../icons/basic/close.js"),information=require("../../../icons/notifications/information.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Toast=({content:e,href:r,onClose:t,type:a,isAnimated:o=!1,animationDuration:s})=>{var i={error:React__default.default.createElement(alert_octogon.AlertOctogon,{size:24}),info:React__default.default.createElement(information.Information,{size:24}),success:React__default.default.createElement(alert_circle.AlertCircle,{size:24}),warning:React__default.default.createElement(alert_triangle.AlertTriangle,{size:24})};return React__default.default.createElement(Wrapper,{as:"output",$align:"center",$dir:"row",$gap:8,$type:a,$isAnimated:o},i[a],React__default.default.createElement(paragraph.P,{as:"span"},e),r&&React__default.default.createElement(paragraph.P,{sx:"padding-left: 8px;",as:"a",href:r,$color:"primary-blue-2"},"View"),!o&&React__default.default.createElement(button.Button,{icon:React__default.default.createElement(close.Close,{size:24}),onClick:t,type:"special"}),o&&React__default.default.createElement(ToastProgress,{$animationDuration:s||4},React__default.default.createElement("div",{className:"toast-progress-bar "+a})))},ToastProgress=styled.styled.div`
+'use client';
+import React from 'react';
+import { styled } from 'styled-components';
+import { Styles } from '../../../common/styles';
+import { Button } from '../../../components/actions/button/button';
+import { P } from '../../../components/atoms/typography/paragraph';
+import { AlertCircle } from '../../../icons/notifications/alert_circle';
+import { AlertOctogon } from '../../../icons/notifications/alert_octogon';
+import { AlertTriangle } from '../../../icons/notifications/alert_triangle';
+import { Close } from '../../../icons/basic/close';
+import { Information } from '../../../icons/notifications/information';
+export const Toast = ({ content, href, onClose, type, isAnimated = false, animationDuration, }) => {
+    const iconLookup = {
+        error: React.createElement(AlertOctogon, { size: 24 }),
+        info: React.createElement(Information, { size: 24 }),
+        success: React.createElement(AlertCircle, { size: 24 }),
+        warning: React.createElement(AlertTriangle, { size: 24 }),
+    };
+    return (React.createElement(Wrapper, { as: "output", "$align": "center", "$dir": "row", "$gap": 8, "$type": type, "$isAnimated": isAnimated },
+        iconLookup[type],
+        React.createElement(P, { as: "span" }, content),
+        href && (React.createElement(P, { sx: "padding-left: 8px;", as: "a", href: href, "$color": "primary-blue-2" }, "View")),
+        !isAnimated && (React.createElement(Button, { icon: React.createElement(Close, { size: 24 }), onClick: onClose, type: "special" })),
+        isAnimated && (React.createElement(ToastProgress, { "$animationDuration": animationDuration || 4 },
+            React.createElement("div", { className: `toast-progress-bar ${type}` })))));
+};
+const ToastProgress = styled.div `
   position: absolute;
   bottom: 0;
   left: 0;
@@ -9,7 +34,7 @@
 
   .toast-progress-bar {
     height: 100%;
-    ${({$animationDuration:e})=>`animation: progress-bar ${e}s linear forwards`};
+    ${({ $animationDuration }) => `animation: progress-bar ${$animationDuration}s linear forwards`};
   }
 
   .toast-progress-bar.success {
@@ -36,10 +61,12 @@
       width: 0%;
     }
   }
-`,Wrapper=styled.styled.output`
+`;
+const Wrapper = styled.output `
   background: white;
 
-  ${({$isAnimated:e})=>!e&&`
+  ${({ $isAnimated }) => !$isAnimated &&
+    `
       position: fixed;
       bottom: 24px;
       right: 24px;`}
@@ -55,12 +82,24 @@
     left: 0px;
     width: 4px;
     height: 100%;
-    background-color: ${({$type:e})=>"error"===e?"var(--color-red-4)":"info"===e?"var(--color-blue-4)":"success"===e?"var(--color-green-3)":"var(--color-orange-5)"};
+    background-color: ${({ $type }) => $type === 'error'
+    ? 'var(--color-red-4)'
+    : $type === 'info'
+        ? 'var(--color-blue-4)'
+        : $type === 'success'
+            ? 'var(--color-green-3)'
+            : 'var(--color-orange-5)'};
     border-radius: 8px 0px 0px 8px;
   }
 
   & > svg {
-    fill: ${({$type:e})=>"error"===e?"var(--color-red-4)":"info"===e?"var(--color-blue-4)":"success"===e?"var(--color-green-3)":"var(--color-orange-5)"};
+    fill: ${({ $type }) => $type === 'error'
+    ? 'var(--color-red-4)'
+    : $type === 'info'
+        ? 'var(--color-blue-4)'
+        : $type === 'success'
+            ? 'var(--color-green-3)'
+            : 'var(--color-orange-5)'};
   }
 
   a {
@@ -75,5 +114,5 @@
     margin-left: auto;
   }
 
-  ${styles.Styles.flex}
-`;exports.Toast=Toast;
+  ${Styles.flex}
+`;

package/dist/components/feedback/tooltip/index.js

@@ -0,0 +1 @@
+export { Tooltip } from './tooltip';

package/dist/components/feedback/tooltip/tooltip.js

@@ -1,2 +1,26 @@
-"use client";
-"use strict";var React=require("react"),reactTooltip=require("react-tooltip");function _interopDefaultCompat(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var React__default=_interopDefaultCompat(React);const Tooltip=({children:t,content:e,place:a="top"})=>{const l=React__default.default.useId();return React__default.default.createElement(React__default.default.Fragment,null,React__default.default.createElement(reactTooltip.Tooltip,{id:l,place:a,style:{fontFamily:"Inter",fontSize:"12px",fontWeight:400,lineHeight:"150%",textAlign:"center",padding:"8px",maxWidth:"280px",backgroundColor:"var(--color-grey-3)",boxShadow:"var(--elevation-2)",borderRadius:"4px"}}),React__default.default.Children.map(t,t=>React__default.default.isValidElement(t)&&React__default.default.cloneElement(t,{"data-tooltip-id":l,"data-tooltip-content":e})))};exports.Tooltip=Tooltip;
+'use client';
+import React from 'react';
+import { Tooltip as ReactTooltip } from 'react-tooltip';
+export const Tooltip = ({ children, content, place = 'top' }) => {
+    const id = React.useId();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ReactTooltip, { id: id, place: place, style: {
+                fontFamily: 'Inter',
+                fontSize: '12px',
+                fontWeight: 400,
+                lineHeight: '150%',
+                textAlign: 'center',
+                padding: '8px',
+                maxWidth: '280px',
+                backgroundColor: 'var(--color-grey-3)',
+                boxShadow: 'var(--elevation-2)',
+                borderRadius: '4px',
+            } }),
+        React.Children.map(children, (child) => {
+            return (React.isValidElement(child) &&
+                React.cloneElement(child, {
+                    'data-tooltip-id': id,
+                    'data-tooltip-content': content,
+                }));
+        })));
+};