@shoplflow/base 0.46.2 → 0.46.4

package/dist/index.cjs

@@ -301,6 +301,9 @@ exports.AvatarSizeVariants = {
   XL: "XL"
 };
 
+// src/components/Avatar/version.ts
+exports.AVATAR_VERSION = "2.0.0";
+
 // src/styles/tokens.ts
 var fontWeightRegular = "var(--font-weight-regular)";
 var fontWeightMedium = "var(--font-weight-medium)";
@@ -576,6 +579,9 @@ exports.MotionStack = framerMotion.motion(Stack);
 exports.MotionStack.Vertical = framerMotion.motion(Stack.Vertical);
 exports.MotionStack.Horizontal = framerMotion.motion(Stack.Horizontal);
 exports.Stack = Stack;
+
+// src/components/Stack/version.ts
+exports.STACK_VERSION = "2.0.0";
 exports.StyledStackContainer = styled6__default.default.div`
   display: flex;
   width: ${({ width }) => width};
@@ -656,6 +662,9 @@ exports.MotionStackContainer = framerMotion.motion(StackContainer);
 exports.MotionStackContainer.Vertical = framerMotion.motion(StackContainer.Vertical);
 exports.MotionStackContainer.Horizontal = framerMotion.motion(StackContainer.Horizontal);
 exports.StackContainer = StackContainer;
+
+// src/components/StackContainer/version.ts
+exports.STACK_CONTAINER_VERSION = "2.0.0";
 var setEllipsis = (maxLines) => {
   return react$1.css`
     display: -webkit-box;
@@ -727,6 +736,9 @@ var Text = React3.forwardRef(
   }
 );
 exports.Text = Text;
+
+// src/components/Text/version.ts
+exports.TEXT_VERSION = "2.0.1";
 var MODAL_SIZE_XXS = 400;
 var MODAL_SIZE_XS = 500;
 var MODAL_SIZE_S = 560;
@@ -1007,6 +1019,9 @@ var ScrollArea = React3.forwardRef((_a, ref) => {
   ) });
 });
 exports.ScrollArea = ScrollArea;
+
+// src/components/ScrollArea/version.ts
+exports.SCROLL_AREA_VERSION = "2.0.0";
 var useModalOption = () => {
   const context = React3.useContext(ModalOptionContext);
   if (!context) {
@@ -1253,6 +1268,9 @@ var ModalProvider = ({ children }) => {
 };
 var ModalProvider_default = ModalProvider;
 
+// src/components/Modal/version.ts
+exports.MODAL_VERSION = "2.0.0";
+
 // src/components/Modal/index.ts
 exports.Modal = {
   Container: ModalContainer_default,
@@ -1262,6 +1280,9 @@ exports.Modal = {
   Bottom: ModalBottom,
   Footer: ModalFooter_default
 };
+
+// src/components/BackDrop/version.ts
+exports.BACK_DROP_VERSION = "2.0.0";
 var getContainerStylesBySizeVar = (sizeVar) => {
   switch (sizeVar) {
     case "S":
@@ -1421,6 +1442,9 @@ exports.SwitchSizeVariants = {
   M: "M"
 };
 
+// src/components/Switch/version.ts
+exports.SWITCH_VERSION = "2.0.0";
+
 // src/components/Chips/ChipToggle/ChipToggle.types.ts
 exports.ChipToggleStyleVariants = {
   SOLID: "SOLID"
@@ -1665,6 +1689,9 @@ var ChipButton = (_a) => {
   );
 };
 exports.ChipButton = ChipButton;
+
+// src/components/Chips/version.ts
+exports.CHIPS_VERSION = "2.0.0";
 var getStyleByStyleVar = (styleVar, color, disabled) => {
   const domain = exports.getDomain();
   const secondaryBorderColor = domain === "hada" ? exports.colorTokens.hada150 : exports.colorTokens.neutral350;
@@ -2155,6 +2182,9 @@ exports.PopperPortal = React3.forwardRef(
 Popper.Trigger = exports.PopperTrigger;
 Popper.Portal = exports.PopperPortal;
 exports.Popper = Popper;
+
+// src/components/Popper/version.ts
+exports.POPPER_VERSION = "2.0.0";
 var Container2 = styled6__default.default.div`
   display: flex;
   align-items: center;
@@ -2470,6 +2500,9 @@ var Radio = (_a) => {
 Radio[exports.RADIO_SYMBOL_KEY] = true;
 exports.Radio = Radio;
 
+// src/components/ControlButtons/version.ts
+exports.CONTROL_BUTTONS_VERSION = "2.0.0";
+
 // src/components/Menu/Menu.styled.ts
 var getStylesBySizeVar = (sizeVar) => {
   switch (sizeVar) {
@@ -2578,6 +2611,9 @@ exports.MenuSizeVariants = {
   S: "S",
   M: "M"
 };
+
+// src/components/Menu/version.ts
+exports.MENU_VERSION = "2.0.0";
 exports.DropdownButtonContext = React3.createContext(null);
 exports.useDropdownButtonContext = () => {
   const context = React3.useContext(exports.DropdownButtonContext);
@@ -2627,6 +2663,9 @@ var Icon = React3.forwardRef((_a, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(exports.StyledIcon, __spreadProps(__spreadValues({ as: iconSource, ref }, rest), { "data-shoplflow": "Icon" }));
 });
 exports.Icon = Icon;
+
+// src/components/Icon/version.ts
+exports.ICON_VERSION = "2.0.0";
 var DropdownButtonMenu = (_a) => {
   var _b = _a, { onClick, children } = _b, rest = __objRest(_b, ["onClick", "children"]);
   const { setIsOpen } = exports.useDropdownButtonContext();
@@ -2944,11 +2983,11 @@ exports.SplitButtonStyleVariants = {
   PRIMARY: "PRIMARY",
   SECONDARY: "SECONDARY"
 };
+
+// src/components/Buttons/version.ts
+exports.BUTTONS_VERSION = "2.0.0";
 var informationStyle = react$1.css`
   background: ${exports.colorTokens.neutral400_5};
-  & > span {
-    color: ${exports.colorTokens.neutral600};
-  }
   & > svg > circle {
     fill: ${exports.colorTokens.neutral200};
   }
@@ -2956,12 +2995,20 @@ var informationStyle = react$1.css`
     fill: ${exports.colorTokens.neutral400};
   }
 `;
+var cautionStyle = react$1.css`
+  background: ${exports.colorTokens.yellow100};
+  & > svg > path {
+    fill: ${exports.colorTokens.yellow300};
+  }
+  & > svg > circle {
+    fill: ${exports.colorTokens.yellow300};
+  }
+  & > svg > path {
+    fill: ${exports.colorTokens.yellow300};
+  }
+`;
 var alertStyle = react$1.css`
   background: ${exports.colorTokens.red100};
-  & > span {
-    align-self: center;
-    color: ${exports.colorTokens.red300};
-  }
   & > svg > path {
     fill: ${exports.colorTokens.red300};
   }
@@ -2970,10 +3017,11 @@ var StyledCallout = styled6__default.default.div`
   display: flex;
   justify-content: flex-start;
   align-items: start;
-  padding: 6px 8px;
+  padding: 12px;
   gap: 4px;
   border-radius: ${exports.borderRadiusTokens.borderRadius08};
   ${({ styleVar }) => styleVar === "INFORMATION" && informationStyle}
+  ${({ styleVar }) => styleVar === "CAUTION" && cautionStyle}
   ${({ styleVar }) => styleVar === "ALERT" && alertStyle}
   ${({ fillWidth }) => fillWidth && react$1.css`
       width: 100%;
@@ -2985,6 +3033,7 @@ var StyledCalloutIcon = styled6__default.default.svg`
   min-height: 20px;
   width: 20px;
   min-width: 20px;
+  flex-shrink: 0;
 `;
 styled6__default.default.div`
   padding: 2px 0;
@@ -2997,18 +3046,41 @@ var CalloutText = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
   return /* @__PURE__ */ jsxRuntime.jsx(exports.Text, __spreadProps(__spreadValues({}, rest), { typography: "paragraph2", children }));
 };
-var CalloutIcon = ({ iconSource }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledCalloutIcon, { as: iconSource });
+var CalloutBulletList = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(exports.StackContainer.Horizontal, { spacing: "spacing06", width: "100%", justify: "flex-start", minHeight: "20px", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          marginTop: "8px",
+          backgroundColor: exports.colorTokens.neutral700,
+          width: "3px",
+          height: "3px",
+          borderRadius: "50%",
+          flexShrink: 0
+        }
+      }
+    ),
+    children
+  ] });
+};
+var CalloutIcon = ({ iconSource, color }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledCalloutIcon, { as: iconSource, color });
 };
 Callout.Text = CalloutText;
 Callout.Icon = CalloutIcon;
+Callout.BulletList = CalloutBulletList;
 exports.Callout = Callout;
 
 // src/components/Callout/Callout.types.ts
 exports.CalloutTypes = {
   INFORMATION: "INFORMATION",
+  CAUTION: "CAUTION",
   ALERT: "ALERT"
 };
+
+// src/components/Callout/version.ts
+exports.CALLOUT_VERSION = "2.1.2";
 var StyledDropdown = styled6__default.default.div`
   width: ${({ width }) => width};
 `;
@@ -3341,6 +3413,9 @@ exports.DropdownOptionVariants = {
   OUTSIDE_CLICK: "OUTSIDE_CLICK",
   NONE: "NONE"
 };
+
+// src/components/Dropdown/version.ts
+exports.DROPDOWN_VERSION = "2.0.0";
 var StyledList = styled6__default.default.li`
   display: flex;
   flex-direction: row;
@@ -3363,12 +3438,12 @@ var StyledText2Rows = styled6__default.default.div`
   gap: 2px;
 `;
 var List = (_a) => {
-  var _b = _a, { children, leftSource, rightSource } = _b, rest = __objRest(_b, ["children", "leftSource", "rightSource"]);
+  var _b = _a, { children, leftSource, rightSource, style } = _b, rest = __objRest(_b, ["children", "leftSource", "rightSource", "style"]);
   const LeftSourceClone = leftSource ? React3__namespace.default.cloneElement(leftSource, __spreadValues({}, rest)) : leftSource;
   if (!children && rightSource) {
     throw new Error("RightSource\uB294 children\uC774 \uD544\uC218\uB85C \uD3EC\uD568\uB418\uC5B4\uC57C\uD569\uB2C8\uB2E4.");
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(StyledList, __spreadProps(__spreadValues({ "data-shoplflow": "List" }, rest), { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(StyledList, __spreadProps(__spreadValues({ "data-shoplflow": "List", style }, rest), { children: [
     LeftSourceClone && LeftSourceClone,
     /* @__PURE__ */ jsxRuntime.jsx(exports.Stack.Horizontal, { minHeight: "36px", width: "100%", spacing: "spacing08", align: "center", children }),
     rightSource && rightSource
@@ -3382,6 +3457,9 @@ exports.Text2Rows = ({ title, subTitle }) => {
 };
 List.Text2Rows = exports.Text2Rows;
 exports.List = List;
+
+// src/components/List/version.ts
+exports.LIST_VERSION = "2.0.1";
 var getTypographyBySize = (size2) => {
   switch (size2) {
     case "XS":
@@ -3509,6 +3587,9 @@ exports.TagSizeVariants = {
   S: "S",
   M: "M"
 };
+
+// src/components/Tag/version.ts
+exports.TAG_VERSION = "2.0.0";
 var StyledTree = styled6__default.default(framerMotion.motion.ul)`
   display: flex;
   flex-direction: column;
@@ -3666,6 +3747,9 @@ exports.TreeItem = (_a) => {
 exports.TreeItem[exports.TREE_SYMBOL_KEY] = true;
 Tree.Item = exports.TreeItem;
 exports.Tree = Tree;
+
+// src/components/Tree/version.ts
+exports.TREE_VERSION = "2.0.0";
 var StyledInput = styled6__default.default.input`
   padding: ${({ sizeVar }) => sizeVar === "S" ? "0 8px" : "4px 12px"};
   background-color: transparent;
@@ -4450,6 +4534,9 @@ var SelectInputButton = (_a) => {
   );
 };
 exports.SelectInputButton = SelectInputButton;
+
+// src/components/Inputs/version.ts
+exports.INPUTS_VERSION = "2.0.0";
 var StyledTooltipContent = styled6__default.default.div`
   background-color: ${exports.colorTokens.neutral700};
   padding: 4px 8px;
@@ -4525,6 +4612,9 @@ var Tooltip = (_a) => {
 };
 Tooltip.Content = TooltipContent;
 exports.Tooltip = Tooltip;
+
+// src/components/Tooltip/version.ts
+exports.TOOLTIP_VERSION = "2.0.0";
 exports.TabsContext = React3.createContext(null);
 exports.useTabs = () => {
   const context = React3.useContext(exports.TabsContext);
@@ -4789,6 +4879,9 @@ exports.TabSizeVariants = {
   M: "M",
   L: "L"
 };
+
+// src/components/Tabs/version.ts
+exports.TABS_VERSION = "2.0.0";
 var PaginationWrapper = styled6__default.default.div`
   display: flex;
   align-items: center;
@@ -4946,6 +5039,9 @@ var Pagination = (_a) => {
 };
 Pagination.SizeSelector = PaginationSizeSelector_default;
 exports.Pagination = Pagination;
+
+// src/components/Pagination/version.ts
+exports.PAGINATION_VERSION = "2.0.0";
 var getLabelStyleByStatus = (selected, disabled) => {
   if (disabled && selected) {
     return react$1.css`
@@ -5115,6 +5211,9 @@ exports.ToggleButtonSizeVariants = {
   S: "S",
   M: "M"
 };
+
+// src/components/ToggleButton/version.ts
+exports.TOGGLE_BUTTON_VERSION = "2.0.0";
 var SmallStyledDayDatepickerWrapper = styled6__default.default.div`
   display: flex;
   width: 280px;
@@ -6668,6 +6767,9 @@ var WeekDatepicker = ({
   ] });
 };
 exports.WeekDatepicker = WeekDatepicker;
+
+// src/components/Datepickers/version.ts
+exports.DATEPICKERS_VERSION = "2.0.0";
 var StyledNumberCombobox = styled6__default.default.div``;
 var IconWrapper2 = styled6__default.default(framerMotion.motion.div)`
   display: flex;
@@ -6859,6 +6961,9 @@ exports.NumberComboboxSizeVariants = {
   S: "S",
   M: "M"
 };
+
+// src/components/Comboboxs/version.ts
+exports.COMBOBOXS_VERSION = "2.0.0";
 var animation = react$1.keyframes`
   0% {
     transform: translateX(-100%);
@@ -6908,6 +7013,9 @@ var Skeleton = ({ styleVar = "rectangle", width = "50px", height = "20px" }) =>
 };
 exports.Skeleton = Skeleton;
 
+// src/components/Skeleton/version.ts
+exports.SKELETON_VERSION = "2.0.0";
+
 // src/components/Slider/Slider.types.ts
 exports.SLIDER_Z_INDEX = {
   THUMB_BUTTON: 10
@@ -7196,6 +7304,9 @@ var Slider = ({
   ] }) });
 };
 exports.Slider = Slider;
+
+// src/components/Slider/version.ts
+exports.SLIDER_VERSION = "2.0.0";
 var SearchBarContext = React3.createContext({});
 var useSearchBarContext = () => React3.useContext(SearchBarContext);
 var SearchBarProvider = ({
@@ -7420,6 +7531,9 @@ var SearchBar = (_a) => {
 SearchBar.Category = SearchBarCategory;
 SearchBar.Input = SearchBarInput;
 
+// src/components/SearchBar/version.ts
+exports.SEARCH_BAR_VERSION = "2.0.0";
+
 // src/components/SearchBar/index.ts
 exports.SearchBar = SearchBar;
 exports.SearchBar.Category = SearchBarCategory;