@soul-refiner/design-system 2.0.1-alpha.1 → 2.0.1

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

@@ -1,16 +1,75 @@
 "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 strict';
+
+var React = require('react');
+var styled = require('styled-components');
+var colors = require('../../../common/colors.js');
+var box = require('../../atoms/box/box.js');
+var paragraph = require('../../atoms/typography/paragraph.js');
+var checkmark_circle = require('../../../icons/basic/checkmark_circle.js');
+var checkmarks = require('../../../icons/basic/checkmarks.js');
+var close = require('../../../icons/basic/close.js');
+var minus_circle = require('../../../icons/basic/minus_circle.js');
+var pause = require('../../../icons/audio_video/pause.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+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__default.default.createElement(close.Close, { size: 24, color: color })) : isComplete ? (React__default.default.createElement(checkmarks.Checkmarks, { size: 24, color: color })) : (React__default.default.createElement(pause.Pause, { size: 24, color: color }));
+    return (React__default.default.createElement(box.Box, { "$align": "center", "$dir": "row", "$gap": 16, sx: sx },
+        isDetailed && (React__default.default.createElement(IconWrapper, { "$completedDegree": Math.round(percent * 3.6), "$gradientColors": gradientColors },
+            React__default.default.createElement(IconInnerWrapper, { "$bg": gradientColors.bg }, icon))),
+        React__default.default.createElement(box.Box, { "$dir": "column", "$flex": 1, "$gap": 8 },
+            React__default.default.createElement(box.Box, null,
+                title && (React__default.default.createElement(paragraph.P, { "$color": "grey-2", "$fontSize": 14, "$lineHeight": 20 }, title)),
+                isComplete && (React__default.default.createElement(checkmark_circle.CheckmarkCircle, { color: "green-3", size: 24, sx: "margin-left: auto;" })),
+                hasError && (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[color], "$percent": percent })),
+            subtitle && (React__default.default.createElement(paragraph.P, { "$color": "grey-4", "$fontSize": 12, "$lineHeight": 16 }, subtitle))),
+        isDetailed && (React__default.default.createElement(paragraph.P, { "$color": "grey-4", "$textAlign": "center", sx: "width: 72px;" }, displayPercent))));
+};
+const BarWrapper = styled.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.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.styled.div `
   position: relative;
   display: block;
   width: 45px;
@@ -21,19 +80,22 @@
   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.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};
+`;
+
+exports.Progress = Progress;

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

@@ -1,5 +1,37 @@
 "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 strict';
+
+var React = require('react');
+var styled = require('styled-components');
+var styles = require('../../../common/styles.js');
+var button = require('../../actions/button/button.js');
+var paragraph = require('../../atoms/typography/paragraph.js');
+var alert_circle = require('../../../icons/notifications/alert_circle.js');
+var alert_octogon = require('../../../icons/notifications/alert_octogon.js');
+var alert_triangle = require('../../../icons/notifications/alert_triangle.js');
+var close = require('../../../icons/basic/close.js');
+var information = require('../../../icons/notifications/information.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const Toast = ({ content, href, onClose, type, isAnimated = false, animationDuration, }) => {
+    const iconLookup = {
+        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": type, "$isAnimated": isAnimated },
+        iconLookup[type],
+        React__default.default.createElement(paragraph.P, { as: "span" }, content),
+        href && (React__default.default.createElement(paragraph.P, { sx: "padding-left: 8px;", as: "a", href: href, "$color": "primary-blue-2" }, "View")),
+        !isAnimated && (React__default.default.createElement(button.Button, { icon: React__default.default.createElement(close.Close, { size: 24 }), onClick: onClose, type: "special" })),
+        isAnimated && (React__default.default.createElement(ToastProgress, { "$animationDuration": animationDuration || 4 },
+            React__default.default.createElement("div", { className: `toast-progress-bar ${type}` })))));
+};
+const ToastProgress = styled.styled.div `
   position: absolute;
   bottom: 0;
   left: 0;
@@ -9,7 +41,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,8 +68,10 @@
       width: 0%;
     }
   }
-`,Wrapper=styled.styled.output`
-  ${({$isAnimated:e})=>!e&&`
+`;
+const Wrapper = styled.styled.output `
+  ${({ $isAnimated }) => !$isAnimated &&
+    `
       position: fixed;
       bottom: 24px;
       right: 24px;`}
@@ -54,12 +88,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,4 +121,6 @@
   }
 
   ${styles.Styles.flex}
-`;exports.Toast=Toast;
+`;
+
+exports.Toast = Toast;

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

@@ -1,2 +1,35 @@
 "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 strict';
+
+var React = require('react');
+var reactTooltip = require('react-tooltip');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const Tooltip = ({ children, content, place = 'top' }) => {
+    const id = React__default.default.useId();
+    return (React__default.default.createElement(React__default.default.Fragment, null,
+        React__default.default.createElement(reactTooltip.Tooltip, { 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__default.default.Children.map(children, (child) => {
+            return (React__default.default.isValidElement(child) &&
+                React__default.default.cloneElement(child, {
+                    'data-tooltip-id': id,
+                    'data-tooltip-content': content,
+                }));
+        })));
+};
+
+exports.Tooltip = Tooltip;

package/dist/components/iconography/avatar/avatar.js

@@ -1,17 +1,111 @@
 "use client";
-"use strict";var React=require("react"),Image=require("next/image"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),heading=require("../../atoms/typography/heading.js"),paragraph=require("../../atoms/typography/paragraph.js"),approved=require("./icons/approved.js"),busy=require("./icons/busy.js"),declined=require("./icons/declined.js"),_default=require("./icons/default.js"),focus=require("./icons/focus.js"),locked=require("./icons/locked.js"),offline=require("./icons/offline.js"),online=require("./icons/online.js"),subscribed=require("./icons/subscribed.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),Image__default=_interopDefaultCompat(Image);const iconReference={approved:approved.Approved,busy:busy.Busy,declined:declined.Declined,focus:focus.Focus,locked:locked.Locked,none:()=>React__default.default.createElement(React__default.default.Fragment,null),online:online.Online,offline:offline.Offline,subscribed:subscribed.Subscribed},iconSize={96:18,72:18,64:18,56:15,48:15,40:15,36:14,32:14,24:12,16:8},iconOffsetX={96:-23,72:-21,64:-20,56:-16,48:-15,40:-13,36:-12,32:-12,24:-10,16:-8},iconOffsetY={96:5,72:3,64:2,56:1,48:0,40:-2,36:-2,32:-2,24:-2,16:-1},fallbackImgData="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",fallBackImgSrc="data:image/png;base64,"+fallbackImgData,Avatar=({as:e="button",href:t,image:a,fallbackImg:l=fallBackImgSrc,size:i=64,status:r,subtitle:n,sx:o,textPosition:d="left",title:s,tooltipContent:u,tooltipSx:f,...A})=>{const[c,I]=React__default.default.useState(!1);r=iconReference?.[r??"none"];return React__default.default.createElement(box.Box,{$align:"center",$gap:18,sx:`
+'use strict';
+
+var React = require('react');
+var Image = require('next/image');
+var styled = require('styled-components');
+var box = require('../../atoms/box/box.js');
+var heading = require('../../atoms/typography/heading.js');
+var paragraph = require('../../atoms/typography/paragraph.js');
+var approved = require('./icons/approved.js');
+var busy = require('./icons/busy.js');
+var declined = require('./icons/declined.js');
+var _default = require('./icons/default.js');
+var focus = require('./icons/focus.js');
+var locked = require('./icons/locked.js');
+var offline = require('./icons/offline.js');
+var online = require('./icons/online.js');
+var subscribed = require('./icons/subscribed.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var Image__default = /*#__PURE__*/_interopDefaultCompat(Image);
+
+/**
+ * Lookup tables for sizes
+ */
+const iconReference = {
+    approved: approved.Approved,
+    busy: busy.Busy,
+    declined: declined.Declined,
+    focus: focus.Focus,
+    locked: locked.Locked,
+    none: () => React__default.default.createElement(React__default.default.Fragment, null),
+    online: online.Online,
+    offline: offline.Offline,
+    subscribed: subscribed.Subscribed,
+};
+const iconSize = {
+    '96': 18,
+    '72': 18,
+    '64': 18,
+    '56': 15,
+    '48': 15,
+    '40': 15,
+    '36': 14,
+    '32': 14,
+    '24': 12,
+    '16': 8,
+};
+const iconOffsetX = {
+    '96': -23,
+    '72': -21,
+    '64': -20,
+    '56': -16,
+    '48': -15,
+    '40': -13,
+    '36': -12,
+    '32': -12,
+    '24': -10,
+    '16': -8,
+};
+const iconOffsetY = {
+    '96': 5,
+    '72': 3,
+    '64': 2,
+    '56': 1,
+    '48': 0,
+    '40': -2,
+    '36': -2,
+    '32': -2,
+    '24': -2,
+    '16': -1,
+};
+const fallbackImgData = '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';
+const fallBackImgSrc = `data:image/png;base64,${fallbackImgData}`;
+/**
+ *
+ * Avatar
+ */
+const Avatar = ({ as = 'button', href, image, fallbackImg = fallBackImgSrc, size = 64, status, subtitle, sx, textPosition = 'left', title, tooltipContent, tooltipSx, ...rest }) => {
+    const [displayDefault, setDisplayDefault] = React__default.default.useState(false);
+    const Icon = iconReference?.[status ?? 'none'];
+    return (React__default.default.createElement(box.Box, { "$align": "center", "$gap": 18, sx: `
         position: relative; 
         &:hover {
           .tooltipContainer {
             display: flex;
           }
         }
-        ${o}
-      `,...A},React__default.default.createElement(Container,{as:e,$size:i,href:t},!c&&React__default.default.createElement(Image__default.default,{alt:"avatar image",height:i,onError:()=>I(!0),quality:100,sizes:"96 | 72 | 64 | 56 | 48 | 40 | 36 | 32 | 24 | 16",src:a??l,width:i}),c&&React__default.default.createElement(_default.Default,null),React__default.default.createElement("div",null,React__default.default.createElement(r,null))),(s||n)&&React__default.default.createElement(TextContainer,{$textPosition:d},s&&React__default.default.createElement(heading.H,{as:"h3",$bold:!0,$color:"grey-2",$textClampLines:1,sx:"font-size: 26px;"},s),n&&React__default.default.createElement(paragraph.P,{$color:"grey-4",$textClampLines:1},n)),u&&React__default.default.createElement(TooltipContainer,{className:"tooltipContainer",$sx:f},u))},Container=(Avatar.displayName="Avatar",styled.styled.div`
+        ${sx}
+      `, ...rest },
+        React__default.default.createElement(Container, { as: as, "$size": size, href: href },
+            !displayDefault && (React__default.default.createElement(Image__default.default, { alt: "avatar image", height: size, onError: () => setDisplayDefault(true), quality: 100, sizes: "96 | 72 | 64 | 56 | 48 | 40 | 36 | 32 | 24 | 16", src: image ?? fallbackImg, width: size })),
+            displayDefault && React__default.default.createElement(_default.Default, null),
+            React__default.default.createElement("div", null,
+                React__default.default.createElement(Icon, null))),
+        (title || subtitle) && (React__default.default.createElement(TextContainer, { "$textPosition": textPosition },
+            title && (React__default.default.createElement(heading.H, { as: "h3", "$bold": true, "$color": "grey-2", "$textClampLines": 1, sx: "font-size: 26px;" }, title)),
+            subtitle && (React__default.default.createElement(paragraph.P, { "$color": "grey-4", "$textClampLines": 1 }, subtitle)))),
+        tooltipContent && (React__default.default.createElement(TooltipContainer, { className: "tooltipContainer", "$sx": tooltipSx }, tooltipContent))));
+};
+Avatar.displayName = 'Avatar';
+const Container = styled.styled.div `
   flex-shrink: 0;
   display: flex;
   flex-flow: row nowrap;
-  cursor: ${({as:e})=>!e||"a"!==e&&"button"!==e?"initial":"pointer"};
+  cursor: ${({ as }) => as && (as === 'a' || as === 'button') ? 'pointer' : 'initial'};
   padding: 0px;
   border: 0px;
   position: relative;
@@ -24,24 +118,26 @@
     overflow: hidden;
     object-fit: cover;
 
-    ${({$size:e})=>`
-    width: ${e}px;
-    height: ${e}px;
+    ${({ $size }) => `
+    width: ${$size}px;
+    height: ${$size}px;
     `}
   }
 
   div > svg {
     position: relative;
-    width: ${({$size:e})=>iconSize[""+e]}px;
-    margin-left: ${({$size:e})=>iconOffsetX[""+e]}px;
-    top: ${({$size:e})=>iconOffsetY[""+e]}px;
+    width: ${({ $size }) => iconSize[`${$size}`]}px;
+    margin-left: ${({ $size }) => iconOffsetX[`${$size}`]}px;
+    top: ${({ $size }) => iconOffsetY[`${$size}`]}px;
   }
-`),TextContainer=styled.styled.div`
+`;
+const TextContainer = styled.styled.div `
   display: flex;
   flex-flow: column nowrap;
   gap: 4px;
-  order: ${({$textPosition:e})=>"left"===e?-1:1};
-`,TooltipContainer=styled.styled.div`
+  order: ${({ $textPosition }) => ($textPosition === 'left' ? -1 : 1)};
+`;
+const TooltipContainer = styled.styled.div `
   display: none;
   position: absolute;
   top: 100%;
@@ -49,23 +145,46 @@
   background-color: var(--color-white);
   border-radius: 24px;
   box-shadow: var(--elevation-2);
-  ${({$sx:e})=>e||""}
-`,Group=({children:e,numDisplayed:t,total:a})=>{let l=0;e=React__default.default.Children.map(e,(e,t)=>React__default.default.isValidElement(e)&&"Avatar"===e.type.displayName?(l=e.props.size,React__default.default.createElement(AvatarWrapper,{$index:t},e)):null).slice(0,t);return e.push(React__default.default.createElement(Total,{$index:e.length+1,$size:l},React__default.default.createElement(paragraph.P,{$fontSize:11,$lineHeight:20},"+",a-t))),React__default.default.createElement(box.Box,null,e)},AvatarWrapper=(Group.displayName="Avatar.Group",Avatar.Group=Group,styled.styled.div`
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const Group = ({ children, numDisplayed, total }) => {
+    let size = 0;
+    // filter out ReactNodes and ReactElements that are not Avatars
+    const displayedElements = React__default.default.Children.map(children, (child, index) => {
+        if (React__default.default.isValidElement(child) &&
+            child.type.displayName === 'Avatar') {
+            size = child.props.size;
+            return React__default.default.createElement(AvatarWrapper, { "$index": index }, child);
+        }
+        return null;
+    }).slice(0, numDisplayed);
+    displayedElements.push(React__default.default.createElement(Total, { "$index": displayedElements.length + 1, "$size": size },
+        React__default.default.createElement(paragraph.P, { "$fontSize": 11, "$lineHeight": 20 },
+            "+",
+            total - numDisplayed)));
+    return React__default.default.createElement(box.Box, null, displayedElements);
+};
+Group.displayName = 'Avatar.Group';
+Avatar.Group = Group;
+const AvatarWrapper = styled.styled.div `
   position: relative;
-  z-index: ${({$index:e})=>"-"+e};
+  z-index: ${({ $index }) => `-${$index}`};
   border-radius: 50%;
   border: 2px solid var(--color-white);
   margin-right: -8px;
-`),Total=styled.styled.div`
+`;
+const Total = styled.styled.div `
   position: relative;
-  z-index: ${({$index:e})=>"-"+e};
+  z-index: ${({ $index }) => `-${$index}`};
   display: flex;
   justify-content: center;
   align-items: center;
-  ${({$size:e})=>`
-    width: ${e}px;
-    height: ${e}px;
+  ${({ $size }) => `
+    width: ${$size}px;
+    height: ${$size}px;
   `}
   border-radius: 50%;
   background-color: var(--color-grey-9);
-`;exports.Avatar=Avatar;
+`;
+
+exports.Avatar = Avatar;

package/dist/components/iconography/avatar/icons/approved.js

@@ -1 +1,14 @@
-"use strict";var React=require("react");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Approved=()=>React__default.default.createElement("svg",{fill:"none",viewBox:"0 0 18 18"},React__default.default.createElement("rect",{width:"16",height:"16",x:"1",y:"1",fill:"#09B3A1",rx:"8"}),React__default.default.createElement("path",{fill:"#fff",d:"M6.485 8.521a1.1 1.1 0 1 0-1.555 1.555l2.199 2.199a1.1 1.1 0 0 0 1.555 0l4.398-4.398a1.1 1.1 0 0 0-1.555-1.555l-3.62 3.62-1.422-1.421Z"}),React__default.default.createElement("rect",{width:"16",height:"16",x:"1",y:"1",stroke:"#F8F9F9",strokeWidth:"2",rx:"8"}));exports.Approved=Approved;
+'use strict';
+
+var React = require('react');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const Approved = () => (React__default.default.createElement("svg", { fill: "none", viewBox: "0 0 18 18" },
+    React__default.default.createElement("rect", { width: "16", height: "16", x: "1", y: "1", fill: "#09B3A1", rx: "8" }),
+    React__default.default.createElement("path", { fill: "#fff", d: "M6.485 8.521a1.1 1.1 0 1 0-1.555 1.555l2.199 2.199a1.1 1.1 0 0 0 1.555 0l4.398-4.398a1.1 1.1 0 0 0-1.555-1.555l-3.62 3.62-1.422-1.421Z" }),
+    React__default.default.createElement("rect", { width: "16", height: "16", x: "1", y: "1", stroke: "#F8F9F9", strokeWidth: "2", rx: "8" })));
+
+exports.Approved = Approved;

package/dist/components/iconography/avatar/icons/busy.js

@@ -1 +1,14 @@
-"use strict";var React=require("react");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Busy=()=>React__default.default.createElement("svg",{fill:"none",viewBox:"0 0 18 18"},React__default.default.createElement("rect",{width:"16",height:"16",x:"1",y:"1",fill:"#F34436",rx:"8"}),React__default.default.createElement("path",{fill:"#fff",d:"m7.839 5.526 4.622 4.622c.33.33.33.825 0 1.155l-1.156 1.155a.798.798 0 0 1-1.155 0L5.528 7.838a.798.798 0 0 1 0-1.156l1.156-1.155a.798.798 0 0 1 1.155 0Z"}),React__default.default.createElement("rect",{width:"16",height:"16",x:"1",y:"1",stroke:"#F8F9F9",strokeWidth:"2",rx:"8"}));exports.Busy=Busy;
+'use strict';
+
+var React = require('react');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const Busy = () => (React__default.default.createElement("svg", { fill: "none", viewBox: "0 0 18 18" },
+    React__default.default.createElement("rect", { width: "16", height: "16", x: "1", y: "1", fill: "#F34436", rx: "8" }),
+    React__default.default.createElement("path", { fill: "#fff", d: "m7.839 5.526 4.622 4.622c.33.33.33.825 0 1.155l-1.156 1.155a.798.798 0 0 1-1.155 0L5.528 7.838a.798.798 0 0 1 0-1.156l1.156-1.155a.798.798 0 0 1 1.155 0Z" }),
+    React__default.default.createElement("rect", { width: "16", height: "16", x: "1", y: "1", stroke: "#F8F9F9", strokeWidth: "2", rx: "8" })));
+
+exports.Busy = Busy;

package/dist/components/iconography/avatar/icons/declined.js

@@ -1 +1,14 @@
-"use strict";var React=require("react");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Declined=()=>React__default.default.createElement("svg",{fill:"none",viewBox:"0 0 18 18"},React__default.default.createElement("rect",{width:"16",height:"16",x:"1",y:"1",fill:"#F34436",rx:"8"}),React__default.default.createElement("path",{fill:"#fff",d:"M10.47 9.015 12 7.479c.402-.404.4-1.056-.005-1.457a1.034 1.034 0 0 0-1.46.005L9.013 7.555 7.464 6.003A1.034 1.034 0 0 0 6.004 6 1.028 1.028 0 0 0 6 7.457l1.556 1.559-1.522 1.528c-.402.403-.4 1.056.004 1.457.404.4 1.058.399 1.46-.005l1.515-1.52 1.486 1.489a1.034 1.034 0 0 0 1.46.003 1.028 1.028 0 0 0 .003-1.457L10.47 9.015Z"}),React__default.default.createElement("rect",{width:"16",height:"16",x:"1",y:"1",stroke:"#F8F9F9",strokeWidth:"2",rx:"8"}));exports.Declined=Declined;
+'use strict';
+
+var React = require('react');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const Declined = () => (React__default.default.createElement("svg", { fill: "none", viewBox: "0 0 18 18" },
+    React__default.default.createElement("rect", { width: "16", height: "16", x: "1", y: "1", fill: "#F34436", rx: "8" }),
+    React__default.default.createElement("path", { fill: "#fff", d: "M10.47 9.015 12 7.479c.402-.404.4-1.056-.005-1.457a1.034 1.034 0 0 0-1.46.005L9.013 7.555 7.464 6.003A1.034 1.034 0 0 0 6.004 6 1.028 1.028 0 0 0 6 7.457l1.556 1.559-1.522 1.528c-.402.403-.4 1.056.004 1.457.404.4 1.058.399 1.46-.005l1.515-1.52 1.486 1.489a1.034 1.034 0 0 0 1.46.003 1.028 1.028 0 0 0 .003-1.457L10.47 9.015Z" }),
+    React__default.default.createElement("rect", { width: "16", height: "16", x: "1", y: "1", stroke: "#F8F9F9", strokeWidth: "2", rx: "8" })));
+
+exports.Declined = Declined;

package/dist/components/iconography/avatar/icons/default.js

@@ -1 +1,13 @@
-"use strict";var React=require("react");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Default=()=>React__default.default.createElement("svg",{viewBox:"0 0 228 228",fill:"none",xmlns:"http://www.w3.org/2000/svg"},React__default.default.createElement("rect",{width:"228",height:"228",fill:"#D0D2D6"}),React__default.default.createElement("path",{d:"M114 114C104.513 114 96.3906 110.622 89.6344 103.866C82.8781 97.1094 79.5 88.9875 79.5 79.5C79.5 70.0125 82.8781 61.8906 89.6344 55.1344C96.3906 48.3781 104.513 45 114 45C123.488 45 131.609 48.3781 138.366 55.1344C145.122 61.8906 148.5 70.0125 148.5 79.5C148.5 88.9875 145.122 97.1094 138.366 103.866C131.609 110.622 123.488 114 114 114ZM45 183V158.85C45 153.963 46.2593 149.469 48.7778 145.369C51.2905 141.275 54.6312 138.15 58.8 135.994C67.7125 131.538 76.7688 128.194 85.9688 125.963C95.1688 123.738 104.513 122.625 114 122.625C123.488 122.625 132.831 123.738 142.031 125.963C151.231 128.194 160.288 131.538 169.2 135.994C173.369 138.15 176.71 141.275 179.222 145.369C181.741 149.469 183 153.963 183 158.85V183H45Z",fill:"white"}));exports.Default=Default;
+'use strict';
+
+var React = require('react');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const Default = () => (React__default.default.createElement("svg", { viewBox: "0 0 228 228", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React__default.default.createElement("rect", { width: "228", height: "228", fill: "#D0D2D6" }),
+    React__default.default.createElement("path", { d: "M114 114C104.513 114 96.3906 110.622 89.6344 103.866C82.8781 97.1094 79.5 88.9875 79.5 79.5C79.5 70.0125 82.8781 61.8906 89.6344 55.1344C96.3906 48.3781 104.513 45 114 45C123.488 45 131.609 48.3781 138.366 55.1344C145.122 61.8906 148.5 70.0125 148.5 79.5C148.5 88.9875 145.122 97.1094 138.366 103.866C131.609 110.622 123.488 114 114 114ZM45 183V158.85C45 153.963 46.2593 149.469 48.7778 145.369C51.2905 141.275 54.6312 138.15 58.8 135.994C67.7125 131.538 76.7688 128.194 85.9688 125.963C95.1688 123.738 104.513 122.625 114 122.625C123.488 122.625 132.831 123.738 142.031 125.963C151.231 128.194 160.288 131.538 169.2 135.994C173.369 138.15 176.71 141.275 179.222 145.369C181.741 149.469 183 153.963 183 158.85V183H45Z", fill: "white" })));
+
+exports.Default = Default;

package/dist/components/iconography/avatar/icons/focus.js

@@ -1 +1,14 @@
-"use strict";var React=require("react");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Focus=()=>React__default.default.createElement("svg",{fill:"none",viewBox:"0 0 18 18"},React__default.default.createElement("rect",{width:"16",height:"16",x:"1",y:"1",fill:"#fff",rx:"8"}),React__default.default.createElement("path",{fill:"#A246C1",d:"M9 16A7 7 0 1 1 9 2a7 7 0 0 1 0 14Zm0-2.333a4.667 4.667 0 1 0 0-9.334 4.667 4.667 0 0 0 0 9.334Zm0-2.334a2.333 2.333 0 1 1 0-4.666 2.333 2.333 0 0 1 0 4.666Z"}),React__default.default.createElement("rect",{width:"16",height:"16",x:"1",y:"1",stroke:"#F8F9F9",strokeWidth:"2",rx:"8"}));exports.Focus=Focus;
+'use strict';
+
+var React = require('react');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const Focus = () => (React__default.default.createElement("svg", { fill: "none", viewBox: "0 0 18 18" },
+    React__default.default.createElement("rect", { width: "16", height: "16", x: "1", y: "1", fill: "#fff", rx: "8" }),
+    React__default.default.createElement("path", { fill: "#A246C1", d: "M9 16A7 7 0 1 1 9 2a7 7 0 0 1 0 14Zm0-2.333a4.667 4.667 0 1 0 0-9.334 4.667 4.667 0 0 0 0 9.334Zm0-2.334a2.333 2.333 0 1 1 0-4.666 2.333 2.333 0 0 1 0 4.666Z" }),
+    React__default.default.createElement("rect", { width: "16", height: "16", x: "1", y: "1", stroke: "#F8F9F9", strokeWidth: "2", rx: "8" })));
+
+exports.Focus = Focus;

package/dist/components/iconography/avatar/icons/locked.js

@@ -1 +1,14 @@
-"use strict";var React=require("react");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Locked=()=>React__default.default.createElement("svg",{fill:"none",viewBox:"0 0 18 18"},React__default.default.createElement("rect",{width:"16",height:"16",x:"1",y:"1",fill:"#B3B7BC",rx:"8"}),React__default.default.createElement("path",{fill:"#4A4F55",d:"M9.023 4.594H8.98c-1.221 0-2.21.973-2.21 2.175V7.89h1.116V6.78c0-.6.494-1.087 1.105-1.087h.022c.61 0 1.105.486 1.105 1.087v1.11h1.116V6.77c0-1.203-.989-2.176-2.21-2.176ZM6.77 7.89h1.116V8.99H6.769V7.89Zm3.348 0h1.116V8.99h-1.116V7.89Zm0 1.099H6.77c-.616 0-1.116.492-1.116 1.099v1.648c0 .91.742 1.648 1.655 1.648h3.386c.914 0 1.655-.732 1.655-1.648v-1.648c0-.607-.5-1.1-1.116-1.1h-1.116Z"}),React__default.default.createElement("rect",{width:"16",height:"16",x:"1",y:"1",stroke:"#F8F9F9",strokeWidth:"2",rx:"8"}));exports.Locked=Locked;
+'use strict';
+
+var React = require('react');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const Locked = () => (React__default.default.createElement("svg", { fill: "none", viewBox: "0 0 18 18" },
+    React__default.default.createElement("rect", { width: "16", height: "16", x: "1", y: "1", fill: "#B3B7BC", rx: "8" }),
+    React__default.default.createElement("path", { fill: "#4A4F55", d: "M9.023 4.594H8.98c-1.221 0-2.21.973-2.21 2.175V7.89h1.116V6.78c0-.6.494-1.087 1.105-1.087h.022c.61 0 1.105.486 1.105 1.087v1.11h1.116V6.77c0-1.203-.989-2.176-2.21-2.176ZM6.77 7.89h1.116V8.99H6.769V7.89Zm3.348 0h1.116V8.99h-1.116V7.89Zm0 1.099H6.77c-.616 0-1.116.492-1.116 1.099v1.648c0 .91.742 1.648 1.655 1.648h3.386c.914 0 1.655-.732 1.655-1.648v-1.648c0-.607-.5-1.1-1.116-1.1h-1.116Z" }),
+    React__default.default.createElement("rect", { width: "16", height: "16", x: "1", y: "1", stroke: "#F8F9F9", strokeWidth: "2", rx: "8" })));
+
+exports.Locked = Locked;

package/dist/components/iconography/avatar/icons/offline.js

@@ -1 +1,14 @@
-"use strict";var React=require("react");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Offline=()=>React__default.default.createElement("svg",{fill:"none",viewBox:"0 0 18 18"},React__default.default.createElement("rect",{width:"16",height:"16",x:"1",y:"1",fill:"#4A4F55",rx:"8"}),React__default.default.createElement("path",{fill:"#B3B7BC",d:"M9 12.3a3.3 3.3 0 1 0 0-6.6 3.3 3.3 0 0 0 0 6.6Z"}),React__default.default.createElement("rect",{width:"16",height:"16",x:"1",y:"1",stroke:"#F8F9F9",strokeWidth:"2",rx:"8"}));exports.Offline=Offline;
+'use strict';
+
+var React = require('react');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const Offline = () => (React__default.default.createElement("svg", { fill: "none", viewBox: "0 0 18 18" },
+    React__default.default.createElement("rect", { width: "16", height: "16", x: "1", y: "1", fill: "#4A4F55", rx: "8" }),
+    React__default.default.createElement("path", { fill: "#B3B7BC", d: "M9 12.3a3.3 3.3 0 1 0 0-6.6 3.3 3.3 0 0 0 0 6.6Z" }),
+    React__default.default.createElement("rect", { width: "16", height: "16", x: "1", y: "1", stroke: "#F8F9F9", strokeWidth: "2", rx: "8" })));
+
+exports.Offline = Offline;

package/dist/components/iconography/avatar/icons/online.js

@@ -1 +1,13 @@
-"use strict";var React=require("react");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Online=()=>React__default.default.createElement("svg",{fill:"none",viewBox:"0 0 18 18"},React__default.default.createElement("rect",{width:"16",height:"16",x:"1",y:"1",fill:"#3CC260",rx:"8"}),React__default.default.createElement("rect",{width:"16",height:"16",x:"1",y:"1",stroke:"#F8F9F9",strokeWidth:"2",rx:"8"}));exports.Online=Online;
+'use strict';
+
+var React = require('react');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const Online = () => (React__default.default.createElement("svg", { fill: "none", viewBox: "0 0 18 18" },
+    React__default.default.createElement("rect", { width: "16", height: "16", x: "1", y: "1", fill: "#3CC260", rx: "8" }),
+    React__default.default.createElement("rect", { width: "16", height: "16", x: "1", y: "1", stroke: "#F8F9F9", strokeWidth: "2", rx: "8" })));
+
+exports.Online = Online;