@shoplflow/base 0.22.0 → 0.22.1

package/dist/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var React3 = require('react');
-var styled5 = require('@emotion/styled');
+var styled6 = require('@emotion/styled');
 var framerMotion = require('framer-motion');
 var jsxRuntime = require('react/jsx-runtime');
 var reactDom$1 = require('react-dom');
@@ -34,7 +34,7 @@ function _interopNamespace(e) {
 }
 
 var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
-var styled5__default = /*#__PURE__*/_interopDefault(styled5);
+var styled6__default = /*#__PURE__*/_interopDefault(styled6);
 var Scrollbars__default = /*#__PURE__*/_interopDefault(Scrollbars);
 var ShoplAssets__namespace = /*#__PURE__*/_interopNamespace(ShoplAssets);
 var HadaAssets__namespace = /*#__PURE__*/_interopNamespace(HadaAssets);
@@ -179,7 +179,7 @@ var fadeInOut = {
     }
   }
 };
-var BackDropStyled = styled5__default.default(framerMotion.motion.div)`
+var BackDropStyled = styled6__default.default(framerMotion.motion.div)`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -210,7 +210,7 @@ var ModalHandlerContext = React3.createContext({
   removeModal: utils.noop
 });
 var ModalContext = React3.createContext([]);
-var SpaceMarginWrapper = styled5__default.default(framerMotion.motion.div)`
+var SpaceMarginWrapper = styled6__default.default(framerMotion.motion.div)`
   position: relative;
   display: flex;
   align-items: center;
@@ -509,7 +509,75 @@ exports.typographyTokens = {
   caption_700,
   caption_400
 };
-exports.StyledStack = styled5__default.default.div`
+var getSizeBySizeVariant = (size2) => {
+  switch (size2) {
+    case "XS":
+      return "18px";
+    case "S":
+      return "24px";
+    case "M":
+      return "32px";
+    case "L":
+      return "48px";
+    case "XL":
+      return "72px";
+    default:
+      return "32px";
+  }
+};
+var StyledAvatar = styled6__default.default.picture`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${({ sizeVar }) => getSizeBySizeVariant(sizeVar)};
+  height: ${({ sizeVar }) => getSizeBySizeVariant(sizeVar)};
+  position: relative;
+  overflow: hidden;
+  border-radius: 50%;
+`;
+var StyledAvatarContainer = styled6__default.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  height: fit-content;
+  position: relative;
+`;
+var StyledAvatarImage = styled6__default.default.img`
+  width: 100%;
+  height: 100%;
+`;
+var StyledAvatarBadge = styled6__default.default.div`
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  height: fit-content;
+  bottom: 0;
+  right: 0;
+`;
+
+// src/assets/mocks/AvatarNone.png
+var AvatarNone_default = "./AvatarNone-F5VQQNT7.png";
+var Avatar = (_a) => {
+  var _b = _a, { src, badge } = _b, rest = __objRest(_b, ["src", "badge"]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(StyledAvatarContainer, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(StyledAvatar, __spreadProps(__spreadValues({ "data-shoplflow": "Avatar" }, rest), { children: /* @__PURE__ */ jsxRuntime.jsx(StyledAvatarImage, { src: src != null ? src : AvatarNone_default }) })),
+    /* @__PURE__ */ jsxRuntime.jsx(StyledAvatarBadge, { children: badge })
+  ] });
+};
+exports.Avatar = Avatar;
+
+// src/components/Avatar/Avatar.types.ts
+exports.AvatarSizeVariants = {
+  XS: "XS",
+  S: "S",
+  M: "M",
+  L: "L",
+  XL: "XL"
+};
+exports.StyledStack = styled6__default.default.div`
   display: flex;
   width: ${({ width }) => width};
   height: ${({ height }) => height};
@@ -587,7 +655,7 @@ var setEllipsis = (maxLines) => {
     text-overflow: ellipsis;
   `;
 };
-var StyledText = styled5__default.default.span`
+var StyledText = styled6__default.default.span`
   display: ${({ display }) => display && display};
   align-items: center;
   color: ${({ color }) => color && exports.colorTokens[color]};
@@ -682,7 +750,7 @@ var getModalBodyTopBottomPadding = (isIncludeHeader) => {
     padding-bottom: 24px;
   `;
 };
-var Container = styled5__default.default.div`
+var Container = styled6__default.default.div`
   display: flex;
   flex-direction: column;
   border-radius: ${exports.borderRadiusTokens.borderRadius08};
@@ -696,7 +764,7 @@ var Container = styled5__default.default.div`
   width: ${({ sizeVar }) => getModalWidthFromSize(sizeVar)}px;
   max-width: ${({ sizeVar }) => getModalWidthFromSize(sizeVar)}px;
 `;
-var HeaderContainer = styled5__default.default.div`
+var HeaderContainer = styled6__default.default.div`
   display: flex;
   width: 100%;
   min-height: 64px;
@@ -705,7 +773,7 @@ var HeaderContainer = styled5__default.default.div`
   padding: 12px 16px 12px 24px;
   gap: 10px;
 `;
-var BodyContainer = styled5__default.default.div`
+var BodyContainer = styled6__default.default.div`
   display: flex;
   width: 100%;
   height: 100%;
@@ -717,7 +785,7 @@ var BodyContainer = styled5__default.default.div`
   flex: 1;
   ${({ isIncludeHeader }) => getModalBodyTopBottomPadding(isIncludeHeader)}
 `;
-var ModalBodyContainerInner = styled5__default.default.div`
+var ModalBodyContainerInner = styled6__default.default.div`
   display: grid;
   align-self: stretch;
   flex-direction: column;
@@ -726,7 +794,7 @@ var ModalBodyContainerInner = styled5__default.default.div`
   height: calc(100%);
   box-sizing: border-box;
 `;
-var ModalBodyContent = styled5__default.default.div`
+var ModalBodyContent = styled6__default.default.div`
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -734,7 +802,7 @@ var ModalBodyContent = styled5__default.default.div`
   padding: 0 24px;
   background: ${exports.colorTokens.neutral0};
 `;
-var FooterContainer = styled5__default.default.div`
+var FooterContainer = styled6__default.default.div`
   display: flex;
   width: 100%;
   flex-direction: row;
@@ -865,7 +933,7 @@ exports.Modal = {
   Body: ModalBody_default,
   Footer: ModalFooter_default
 };
-var SwitchContainer = styled5__default.default.div`
+var SwitchContainer = styled6__default.default.div`
   width: 32px;
   height: 32px;
   border-radius: 6px;
@@ -878,7 +946,7 @@ var SwitchContainer = styled5__default.default.div`
     background: ${({ isDisabled }) => !isDisabled && exports.colorTokens.neutral400_5};
   }
 `;
-var StyledSwitch = styled5__default.default.input`
+var StyledSwitch = styled6__default.default.input`
   appearance: none;
   border: none;
   border-radius: 12px;
@@ -999,7 +1067,11 @@ var getLineTypographyBySizeVar = (sizeVar) => {
       return "body2_400";
   }
 };
-var solidStyle = ({ isSelected, color, radius }) => react$1.css`
+var solidStyle = ({
+  isSelected,
+  color,
+  $radius
+}) => react$1.css`
   padding: 7px 12px;
   gap: 4px;
   background: ${exports.colorTokens.neutral150};
@@ -1011,7 +1083,7 @@ var solidStyle = ({ isSelected, color, radius }) => react$1.css`
     background: ${exports.colorTokens.neutral200};
   }
 
-  ${radius && react$1.css`
+  ${$radius && react$1.css`
     border-radius: ${exports.borderRadiusTokens.borderRadius16};
   `};
   ${isSelected && react$1.css`
@@ -1024,7 +1096,7 @@ var solidStyle = ({ isSelected, color, radius }) => react$1.css`
     }
   `};
 `;
-var StyledChip = styled5__default.default.button`
+var StyledChip = styled6__default.default.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1042,6 +1114,7 @@ var ChipToggle = (_a) => {
     isSelected,
     defaultSelected,
     color = "neutral600",
+    radius,
     styleVar = exports.ChipToggleStyleVariants.SOLID,
     sizeVar,
     leftSource,
@@ -1053,6 +1126,7 @@ var ChipToggle = (_a) => {
     "isSelected",
     "defaultSelected",
     "color",
+    "radius",
     "styleVar",
     "sizeVar",
     "leftSource",
@@ -1069,6 +1143,7 @@ var ChipToggle = (_a) => {
     StyledChip,
     __spreadProps(__spreadValues({}, rest), {
       color,
+      $radius: radius,
       isSelected: isToggled,
       styleVar,
       sizeVar,
@@ -1151,7 +1226,7 @@ var getStyleBySizeVar = (sizeVar) => {
       `;
   }
 };
-var StyledChipButton = styled5__default.default.button`
+var StyledChipButton = styled6__default.default.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1270,7 +1345,7 @@ var getStyleBySizeVar2 = (sizeVar) => {
       `;
   }
 };
-var StyledButton = styled5__default.default.button`
+var StyledButton = styled6__default.default.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1419,7 +1494,7 @@ var getStyleByStyleVar2 = (styleVar, color) => {
       `;
   }
 };
-var StyledIconButton = styled5__default.default.button`
+var StyledIconButton = styled6__default.default.button`
   display: flex;
   flex-shrink: 0;
   border-radius: ${exports.borderRadiusTokens.borderRadius06};
@@ -1485,7 +1560,7 @@ var alertStyle = react$1.css`
     fill: ${exports.colorTokens.red300};
   }
 `;
-var StyledCallout = styled5__default.default.div`
+var StyledCallout = styled6__default.default.div`
   display: flex;
   justify-content: flex-start;
   align-items: start;
@@ -1495,12 +1570,12 @@ var StyledCallout = styled5__default.default.div`
   ${({ styleVar }) => styleVar === "INFORMATION" && informationStyle}
   ${({ styleVar }) => styleVar === "ALERT" && alertStyle}
 `;
-var StyledCalloutIcon = styled5__default.default.svg`
+var StyledCalloutIcon = styled6__default.default.svg`
   display: flex;
   min-height: 20px;
   min-width: 20px;
 `;
-styled5__default.default.div`
+styled6__default.default.div`
   padding: 2px 0;
 `;
 var Callout = (_a) => {
@@ -1523,7 +1598,7 @@ exports.CalloutTypes = {
   INFORMATION: "INFORMATION",
   ALERT: "ALERT"
 };
-exports.StyledPopper = styled5__default.default.div`
+exports.StyledPopper = styled6__default.default.div`
   width: ${({ width }) => width != null ? width : "fit-content"};
   height: ${({ height }) => height && height};
 `;
@@ -1675,10 +1750,10 @@ exports.getDropdownIconSizeBySizeVar = (size2) => {
       `;
   }
 };
-exports.StyledDropdown = styled5__default.default.div`
+exports.StyledDropdown = styled6__default.default.div`
   width: ${({ width }) => width};
 `;
-exports.StyledDropdownContent = styled5__default.default.div`
+exports.StyledDropdownContent = styled6__default.default.div`
   display: flex;
   flex-direction: column;
   background: ${exports.colorTokens.neutral0};
@@ -1687,7 +1762,7 @@ exports.StyledDropdownContent = styled5__default.default.div`
   border-radius: 6px;
   box-shadow: ${exports.boxShadowTokens.dropShadow};
 `;
-exports.StyledDropdownButton = styled5__default.default.button`
+exports.StyledDropdownButton = styled6__default.default.button`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -1701,7 +1776,7 @@ exports.StyledDropdownButton = styled5__default.default.button`
       cursor: not-allowed;
     `}
 `;
-exports.DropdownButtonIcon = styled5__default.default(framerMotion.motion.div)`
+exports.DropdownButtonIcon = styled6__default.default(framerMotion.motion.div)`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1730,7 +1805,7 @@ var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled }) => {
   }
   return exports.colorTokens.neutral300;
 };
-var InputWrapper = styled5__default.default.label`
+var InputWrapper = styled6__default.default.label`
   display: flex;
   align-items: center;
   width: ${({ width }) => width != null ? width : "100%"};
@@ -1776,7 +1851,7 @@ var getIconSize = (size2) => {
       return "24px";
   }
 };
-exports.StyledIcon = styled5__default.default.svg`
+exports.StyledIcon = styled6__default.default.svg`
   width: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
   min-width: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
   height: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
@@ -1952,7 +2027,7 @@ exports.getFontStylesBySizeVar = (sizeVar) => {
       return "body1_400";
   }
 };
-exports.StyledMenu = styled5__default.default.li`
+exports.StyledMenu = styled6__default.default.li`
   display: flex;
   width: 100%;
   flex-direction: row;
@@ -2027,7 +2102,7 @@ exports.MenuSizeVariants = {
   S: "S",
   M: "M"
 };
-exports.StyledList = styled5__default.default.li`
+exports.StyledList = styled6__default.default.li`
   display: flex;
   flex-direction: row;
   width: 100%;
@@ -2042,7 +2117,7 @@ exports.StyledList = styled5__default.default.li`
     background: ${exports.colorTokens.neutral100};
   }
 `;
-exports.StyledText2Rows = styled5__default.default.div`
+exports.StyledText2Rows = styled6__default.default.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -2152,7 +2227,7 @@ var getColorsByStyleVariant = (styleVariant, color = "neutral700") => {
       `;
   }
 };
-var StyledTag = styled5__default.default.div`
+var StyledTag = styled6__default.default.div`
   display: flex;
   align-items: center;
   flex-direction: row;
@@ -2195,7 +2270,7 @@ exports.TagSizeVariants = {
   S: "S",
   M: "M"
 };
-var StyledInput = styled5__default.default.input`
+var StyledInput = styled6__default.default.input`
   padding: 4px 0 4px 12px;
   background-color: transparent;
   width: 100%;
@@ -2216,13 +2291,13 @@ var StyledInput = styled5__default.default.input`
     -moz-appearance: textfield;
   }
 `;
-var RightElementWrapper = styled5__default.default.div`
+var RightElementWrapper = styled6__default.default.div`
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 0 8px 0 0;
 `;
-var Wrapper = styled5__default.default.div`
+var Wrapper = styled6__default.default.div`
   display: flex;
   width: 100%;
   justify-content: flex-end;
@@ -2426,7 +2501,7 @@ var Input = React3.forwardRef(
   }
 );
 exports.Input = Input;
-exports.StyledInputButton = styled5__default.default.button`
+exports.StyledInputButton = styled6__default.default.button`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -2441,7 +2516,7 @@ exports.StyledInputButton = styled5__default.default.button`
       cursor: not-allowed;
     `}
 `;
-exports.StyledInputButtonContent = styled5__default.default.input`
+exports.StyledInputButtonContent = styled6__default.default.input`
   display: flex;
   width: 100%;
   border: none;
@@ -2517,7 +2592,7 @@ var InputButton = React3.forwardRef(
   }
 );
 exports.InputButton = InputButton;
-var BottomElementWrapper = styled5__default.default.div`
+var BottomElementWrapper = styled6__default.default.div`
   display: flex;
   width: 100%;
   flex-direction: row;
@@ -2525,7 +2600,7 @@ var BottomElementWrapper = styled5__default.default.div`
   gap: 8px;
   background-color: ${exports.colorTokens.neutral0};
 `;
-var StyledTextarea = styled5__default.default.textarea`
+var StyledTextarea = styled6__default.default.textarea`
   padding: 8px 12px 0 12px;
   background-color: transparent;
   resize: none;
@@ -2653,12 +2728,12 @@ var TextArea = React3.forwardRef(
   }
 );
 exports.TextArea = TextArea;
-var Container2 = styled5__default.default.div`
+var Container2 = styled6__default.default.div`
   width: 32px;
   height: 32px;
   padding: 7px;
 `;
-var IconButton2 = styled5__default.default.button`
+var IconButton2 = styled6__default.default.button`
   display: flex;
   width: 16px;
   height: 16px;
@@ -2763,7 +2838,7 @@ var getStylesByStyleVariant = (styleVariant, isSelected, isHovered) => {
       return "";
   }
 };
-var StyledCheckbox = styled5__default.default.button`
+var StyledCheckbox = styled6__default.default.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2778,7 +2853,7 @@ var StyledCheckbox = styled5__default.default.button`
   ${({ styleVar, isSelected, isHovered }) => getStylesByStyleVariant(styleVar, isSelected, isHovered)};
   ${({ disabled }) => getDisabledStyle(disabled)}
 `;
-var Container3 = styled5__default.default.button`
+var Container3 = styled6__default.default.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2861,7 +2936,7 @@ var getSelectedStyle = (isHovered) => {
     `}
   `;
 };
-var StyledRadio = styled5__default.default.div`
+var StyledRadio = styled6__default.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2883,7 +2958,7 @@ var StyledRadio = styled5__default.default.div`
   ${({ isSelected, isHovered }) => isSelected && getSelectedStyle(isHovered)}
   ${({ disabled }) => getDisabledStyle(disabled)}
 `;
-var Container4 = styled5__default.default.button`
+var Container4 = styled6__default.default.button`
   display: flex;
   align-items: center;
   justify-content: center;