@shoplflow/base 0.13.0 → 0.13.2

package/dist/index.mjs

@@ -1,1755 +0,0 @@
-import React3, { createContext, forwardRef, useState, useId, useCallback, useEffect, useContext, useMemo } from 'react';
-import styled5 from '@emotion/styled';
-import { motion, AnimatePresence } from 'framer-motion';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { createPortal } from 'react-dom';
-import { noop, useParentElementClick, useResizeObserver, isNullOrUndefined } from '@shoplflow/utils';
-import { css } from '@emotion/react';
-import Scrollbars from 'react-custom-scrollbars-2';
-import { useFloating } from '@floating-ui/react-dom';
-import { autoUpdate, offset, autoPlacement, FloatingPortal } from '@floating-ui/react';
-import * as ShoplAssets from '@shoplflow/shopl-assets';
-import * as HadaAssets from '@shoplflow/hada-assets';
-
-// src/hooks/useDomain.ts
-var useDomain = (domain = "SHOPL") => {
-  const [domainType, setDomainType] = useState(void 0);
-  useEffect(() => {
-    if (domain) {
-      setDomainType(domain);
-    }
-  }, [domain]);
-  useEffect(() => {
-    if (!domainType) {
-      return;
-    }
-    document.documentElement.dataset.shoplflow = domainType?.toLowerCase();
-  }, [domainType]);
-  return [domainType];
-};
-var getDomain = () => {
-  return document.documentElement.dataset.shoplflow;
-};
-
-// src/animation/fadeInOut.ts
-var fadeInOut = {
-  initial: {
-    opacity: 0
-  },
-  animate: {
-    opacity: 1,
-    transition: {
-      duration: 0.1
-    }
-  },
-  exit: {
-    opacity: 0,
-    transition: {
-      duration: 0.1
-    }
-  }
-};
-var BackDropStyled = styled5(motion.div)`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 20000;
-  width: 100%;
-  height: 100%;
-  background: rgba(51, 51, 51, 0.6);
-`;
-var BackDrop = ({ children }) => {
-  return /* @__PURE__ */ jsx(
-    BackDropStyled,
-    {
-      variants: fadeInOut,
-      initial: "initial",
-      animate: "animate",
-      exit: "exit",
-      "data-shoplflow": "BackDrop",
-      children
-    }
-  );
-};
-var BackDrop_default = BackDrop;
-var ModalHandlerContext = createContext({
-  addModal: noop,
-  removeModal: noop
-});
-var ModalContext = createContext([]);
-var SpaceMarginWrapper = styled5(motion.div)`
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-grow: 1;
-  z-index: 101;
-  padding: 32px 20px;
-  width: 100%;
-  height: 100%;
-`;
-var ModalPortal = () => {
-  const modal = useContext(ModalContext);
-  return /* @__PURE__ */ jsx(Fragment, { children: createPortal(
-    /* @__PURE__ */ jsx(AnimatePresence, { children: modal.map((item, index) => /* @__PURE__ */ jsx(BackDrop_default, { children: /* @__PURE__ */ jsx(SpaceMarginWrapper, { children: item.component }) }, index)) }),
-    document.body
-  ) });
-};
-var ModalPortal_default = ModalPortal;
-var ModalProvider = ({ children }) => {
-  const [openedModals, setOpenedModals] = useState([]);
-  const addModal = (component, id) => {
-    setOpenedModals((modals) => {
-      if (modals) {
-        return [...modals, { component, id }];
-      }
-      return [{ component, id }];
-    });
-  };
-  const removeModal = (props) => {
-    const { id, deps } = props || {
-      id: void 0,
-      deps: void 0
-    };
-    const isIncludeAllProps = Boolean(id && deps);
-    const isIncludeId = Boolean(id);
-    const isNotIncludeAllProps = !id && Boolean(isNullOrUndefined(deps));
-    const isIncludeDeps = Boolean(Boolean(!isNullOrUndefined(deps)) && !id);
-    if (isIncludeAllProps) {
-      throw new Error("id\uC640 deps\uB294 \uB3D9\uC2DC\uC5D0 \uC0AC\uC6A9\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.");
-    }
-    if (isIncludeId) {
-      setOpenedModals((modal) => {
-        const filterModal = modal.filter((modal2) => modal2.id !== id);
-        return [...filterModal];
-      });
-      return;
-    }
-    if (isNotIncludeAllProps || deps === 1) {
-      setOpenedModals((modal) => {
-        const removeModal2 = modal.slice(0, -1);
-        return [...removeModal2];
-      });
-      return;
-    }
-    if (isIncludeDeps) {
-      if (deps === 0 || deps === void 0) {
-        return;
-      }
-      setOpenedModals((modal) => {
-        const removeDeps = modal.slice(0, -deps);
-        return [...removeDeps];
-      });
-      return;
-    }
-  };
-  const dispatch = useMemo(() => ({ addModal, removeModal }), []);
-  return /* @__PURE__ */ jsx(ModalContext.Provider, { value: openedModals, children: /* @__PURE__ */ jsx(ModalHandlerContext.Provider, { value: dispatch, children }) });
-};
-var ModalProvider_default = ModalProvider;
-var ShoplflowProvider = ({ children, domain = "SHOPL" }) => {
-  useDomain(domain);
-  return /* @__PURE__ */ jsxs(ModalProvider_default, { children: [
-    /* @__PURE__ */ jsx(ModalPortal_default, {}),
-    children
-  ] });
-};
-var ShoplflowProvider_default = ShoplflowProvider;
-var useHandleModal = () => {
-  const { addModal, removeModal } = useContext(ModalHandlerContext);
-  return {
-    addModal,
-    removeModal
-  };
-};
-var useModalValue = () => {
-  const modal = useContext(ModalContext);
-  return {
-    modal
-  };
-};
-
-// src/styles/tokens.ts
-var fontWeightRegular = "var(--font-weight-regular)";
-var fontWeightMedium = "var(--font-weight-medium)";
-var fontWeightBold = "var(--font-weight-bold)";
-var fontWeightTokens = {
-  fontWeightRegular,
-  fontWeightMedium,
-  fontWeightBold
-};
-var borderRadius04 = "var(--border-radius04)";
-var borderRadius06 = "var(--border-radius06)";
-var borderRadius08 = "var(--border-radius08)";
-var borderRadius12 = "var(--border-radius12)";
-var borderRadius16 = "var(--border-radius16)";
-var borderRadius20 = "var(--border-radius20)";
-var borderRadiusTokens = {
-  borderRadius04,
-  borderRadius06,
-  borderRadius08,
-  borderRadius12,
-  borderRadius16,
-  borderRadius20
-};
-var coolgray300 = "var(--coolgray300)";
-var coolgray200 = "var(--coolgray200)";
-var coolgray100 = "var(--coolgray100)";
-var coolgray50 = "var(--coolgray50)";
-var navy400 = "var(--navy400)";
-var navy300 = "var(--navy300)";
-var neutral0 = "var(--neutral0)";
-var neutral100 = "var(--neutral100)";
-var neutral150 = "var(--neutral150)";
-var neutral200 = "var(--neutral200)";
-var neutral300 = "var(--neutral300)";
-var neutral350 = "var(--neutral350)";
-var neutral400 = "var(--neutral400)";
-var neutral500 = "var(--neutral500)";
-var neutral600 = "var(--neutral600)";
-var neutral700 = "var(--neutral700)";
-var neutral400_5 = "var(--neutral400_5)";
-var red300 = "var(--red300)";
-var red200 = "var(--red200)";
-var red100 = "var(--red100)";
-var ocean300 = "var(--ocean300)";
-var ocean200 = "var(--ocean200)";
-var ocean100 = "var(--ocean100)";
-var purple400 = "var(--purple400)";
-var purple300 = "var(--purple300)";
-var purple100 = "var(--purple100)";
-var yellow300 = "var(--yellow300)";
-var yellow200 = "var(--yellow200)";
-var yellow100 = "var(--yellow100)";
-var green300 = "var(--green300)";
-var green200 = "var(--green200)";
-var green100 = "var(--green100)";
-var shopl400 = "var(--shopl400)";
-var shopl300 = "var(--shopl300)";
-var shopl200 = "var(--shopl200)";
-var shopl150 = "var(--shopl150)";
-var shopl100 = "var(--shopl100)";
-var hada400 = "var(--hada400)";
-var hada300 = "var(--hada300)";
-var hada200 = "var(--hada200)";
-var hada150 = "var(--hada150)";
-var hada100 = "var(--hada100)";
-var background = "var(--background)";
-var primary100 = "var(--primary100)";
-var primary150 = "var(--primary150)";
-var primary200 = "var(--primary200)";
-var primary300 = "var(--primary300)";
-var primary400 = "var(--primary400)";
-var colorTokens = {
-  coolgray300,
-  coolgray200,
-  coolgray100,
-  coolgray50,
-  navy400,
-  navy300,
-  neutral0,
-  neutral100,
-  neutral150,
-  neutral200,
-  neutral300,
-  neutral350,
-  neutral400,
-  neutral500,
-  neutral600,
-  neutral700,
-  neutral400_5,
-  red300,
-  red200,
-  red100,
-  ocean300,
-  ocean200,
-  ocean100,
-  purple400,
-  purple300,
-  purple100,
-  yellow300,
-  yellow200,
-  yellow100,
-  green300,
-  green200,
-  green100,
-  shopl400,
-  shopl300,
-  shopl200,
-  shopl150,
-  shopl100,
-  hada400,
-  hada300,
-  hada200,
-  hada150,
-  hada100,
-  background,
-  primary100,
-  primary150,
-  primary200,
-  primary300,
-  primary400
-};
-var spacing04 = "var(--spacing04)";
-var spacing06 = "var(--spacing06)";
-var spacing08 = "var(--spacing08)";
-var spacing12 = "var(--spacing12)";
-var spacing16 = "var(--spacing16)";
-var spacing20 = "var(--spacing20)";
-var spacing24 = "var(--spacing24)";
-var spacing30 = "var(--spacing30)";
-var spacing32 = "var(--spacing32)";
-var spacing40 = "var(--spacing40)";
-var spacingTokens = {
-  spacing04,
-  spacing06,
-  spacing08,
-  spacing12,
-  spacing16,
-  spacing20,
-  spacing24,
-  spacing30,
-  spacing32,
-  spacing40
-};
-var dropShadow = "var(--dropShadow)";
-var boxShadowTokens = {
-  dropShadow
-};
-var heading1_700 = ".heading1_700";
-var heading1_400 = ".heading1_400";
-var heading2_700 = ".heading2_700";
-var heading2_400 = ".heading2_400";
-var heading3_700 = ".heading3_700";
-var heading3_400 = ".heading3_400";
-var title1_700 = ".title1_700";
-var title1_400 = ".title1_400";
-var title2_700 = ".title2_700";
-var title2_500 = ".title2_500";
-var title2_400 = ".title2_400";
-var body1_700 = ".body1_700";
-var body1_500 = ".body1_500";
-var body1_400 = ".body1_400";
-var body2_700 = ".body2_700";
-var body2_500 = ".body2_500";
-var body2_400 = ".body2_400";
-var body3_400 = ".body3_400";
-var body3_500 = ".body3_500";
-var caption_700 = ".caption_700";
-var caption_400 = ".caption_400";
-var typographyTokens = {
-  heading1_700,
-  heading1_400,
-  heading2_700,
-  heading2_400,
-  heading3_700,
-  heading3_400,
-  title1_700,
-  title1_400,
-  title2_700,
-  title2_500,
-  title2_400,
-  body1_700,
-  body1_500,
-  body1_400,
-  body2_700,
-  body2_500,
-  body2_400,
-  body3_400,
-  body3_500,
-  caption_700,
-  caption_400
-};
-var StyledStack = styled5.div`
-  display: flex;
-  width: ${({ width }) => width};
-  height: ${({ height }) => height};
-  flex-direction: ${({ direction }) => direction};
-  align-items: ${({ align }) => align};
-  justify-content: ${({ justify }) => justify};
-  gap: ${({ spacing }) => spacing && spacingTokens[spacing]};
-  flex-wrap: ${({ flexWrap }) => flexWrap};
-  flex: ${({ flex }) => flex};
-  background: ${({ background: background2 }) => background2 ? colorTokens[background2] : "transparent"};
-  border-radius: ${({ radius }) => radius && borderRadiusTokens[radius]};
-  animation: 0.2s all ease-in-out;
-`;
-var createStackComponent = (stackOption) => forwardRef(function Stack2({
-  as = "div",
-  spacing = stackOption?.spacing,
-  direction = stackOption?.direction ?? "column",
-  align = stackOption?.align ?? "flex-start",
-  justify = stackOption?.justify ?? "flex-start",
-  width = stackOption?.width ?? "initial",
-  height = stackOption?.height ?? "initial",
-  flexWrap = stackOption?.flexWrap ?? "initial",
-  flex = stackOption?.flex ?? "initial",
-  radius = stackOption?.radius,
-  background: background2 = stackOption?.background,
-  ...rest
-}, ref) {
-  return /* @__PURE__ */ jsx(
-    StyledStack,
-    {
-      as,
-      spacing,
-      ref,
-      direction,
-      align,
-      justify,
-      width,
-      height,
-      flexWrap,
-      flex,
-      background: background2,
-      radius,
-      ...rest,
-      "data-shoplflow": "Stack",
-      children: rest.children
-    }
-  );
-});
-var Stack = createStackComponent();
-Stack.Vertical = createStackComponent({ direction: "column" });
-Stack.Horizontal = createStackComponent({ direction: "row" });
-var MotionStack = motion(Stack);
-MotionStack.Vertical = motion(Stack.Vertical);
-MotionStack.Horizontal = motion(Stack.Horizontal);
-var Stack_default = Stack;
-var setEllipsis = (maxLines) => {
-  return css`
-    display: -webkit-box;
-    line-clamp: ${maxLines};
-    -webkit-line-clamp: ${maxLines};
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  `;
-};
-var StyledText = styled5.span`
-  display: ${({ display }) => display && display};
-  align-items: center;
-  color: ${({ color }) => color && colorTokens[color]};
-  ${({ lineClamp }) => lineClamp && setEllipsis(lineClamp)};
-  text-align: ${({ textAlign }) => textAlign && textAlign};
-  white-space: ${({ whiteSpace }) => whiteSpace && whiteSpace};
-  ${({ textDecorations }) => textDecorations && css`
-      text-decoration: ${textDecorations};
-    `};
-  ${({ opacity }) => opacity && css`
-      opacity: ${opacity};
-    `}
-  ${({ wordBreak }) => wordBreak && css`
-      word-break: ${wordBreak};
-    `};
-`;
-var Text = forwardRef(
-  ({
-    children,
-    typography = "body1_400",
-    whiteSpace,
-    color = "neutral700",
-    display = "inline-block",
-    textAlign = "start",
-    className,
-    as,
-    ...rest
-  }, ref) => {
-    return /* @__PURE__ */ jsx(
-      StyledText,
-      {
-        ref,
-        whiteSpace,
-        className: className ? `${typography} ${className}` : typography,
-        color,
-        display,
-        textAlign,
-        as,
-        ...rest,
-        "data-shoplflow": "Text",
-        children
-      }
-    );
-  }
-);
-var Text_default = Text;
-var MODAL_SIZE_XXS = 400;
-var MODAL_SIZE_XS = 500;
-var MODAL_SIZE_S = 560;
-var MODAL_SIZE_M = 640;
-var MODAL_SIZE_L = 768;
-var MODAL_SIZE_XL = 1040;
-var MODAL_SIZE_XXL = 1280;
-var getModalWidthFromSize = (size) => {
-  switch (size) {
-    case "XXS":
-      return MODAL_SIZE_XXS;
-    case "XS":
-      return MODAL_SIZE_XS;
-    case "S":
-      return MODAL_SIZE_S;
-    case "M":
-      return MODAL_SIZE_M;
-    case "L":
-      return MODAL_SIZE_L;
-    case "XL":
-      return MODAL_SIZE_XL;
-    case "XXL":
-      return MODAL_SIZE_XXL;
-    default:
-      return MODAL_SIZE_M;
-  }
-};
-var getModalBodyTopBottomPadding = (isIncludeHeader) => {
-  if (isIncludeHeader) {
-    return css`
-      padding-top: 16px;
-      padding-bottom: 24px;
-    `;
-  }
-  return css`
-    padding-top: 24px;
-    padding-bottom: 24px;
-  `;
-};
-var Container = styled5.div`
-  display: flex;
-  flex-direction: column;
-  border-radius: ${borderRadiusTokens.borderRadius08};
-  background: ${colorTokens.neutral0};
-  box-shadow: ${boxShadowTokens.dropShadow};
-  overflow: hidden;
-  flex-grow: 1;
-  height: ${({ height }) => height ? `${height}px` : "initial"};
-  min-height: 180px;
-  max-height: 1200px;
-  width: ${({ sizeVar }) => getModalWidthFromSize(sizeVar)}px;
-  max-width: ${({ sizeVar }) => getModalWidthFromSize(sizeVar)}px;
-`;
-var HeaderContainer = styled5.div`
-  display: flex;
-  width: 100%;
-  min-height: 64px;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 16px 12px 24px;
-  gap: 10px;
-`;
-var BodyContainer = styled5.div`
-  display: flex;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  flex-direction: column;
-  background: ${colorTokens.neutral0};
-  min-height: 112px;
-  min-height: ${({ height }) => height};
-  flex: 1;
-  ${({ isIncludeHeader }) => getModalBodyTopBottomPadding(isIncludeHeader)}
-`;
-var ModalBodyContent = styled5.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  max-width: ${({ sizeVar }) => getModalWidthFromSize(sizeVar)}px;
-  box-sizing: border-box;
-  padding: 0 24px;
-  overflow: hidden;
-  background: ${colorTokens.neutral0};
-`;
-var FooterContainer = styled5.div`
-  display: flex;
-  width: 100%;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-end;
-  padding: 16px 24px;
-  gap: 12px;
-  border-top: 1px solid ${colorTokens.neutral300};
-  background: ${colorTokens.neutral0};
-`;
-
-// src/components/Modal/Modal.types.ts
-var ModalSize = {
-  XXS: "XXS",
-  XS: "XS",
-  S: "S",
-  M: "M",
-  L: "L",
-  XL: "XL",
-  XXL: "XXL"
-};
-var MODAL_HEADER_KEY = Symbol("MODAL_HEADER");
-var MODAL_FOOTER_KEY = Symbol("MODAL_FOOTER");
-var ModalContainer = ({ children, outsideClick = noop, ...rest }) => {
-  const ref = useParentElementClick(outsideClick);
-  const childrenArray = React3.Children.toArray(children);
-  const findHeader = childrenArray.find((child) => {
-    if (!React3.isValidElement(child)) {
-      return child;
-    }
-    if (child.type[MODAL_HEADER_KEY]) {
-      return child;
-    }
-  });
-  const findFooter = childrenArray.find((child) => {
-    if (!React3.isValidElement(child)) {
-      return child;
-    }
-    if (child.type[MODAL_FOOTER_KEY]) {
-      return child;
-    }
-  });
-  const addPropInChildren = React3.Children.map(childrenArray, (child) => {
-    if (!React3.isValidElement(child)) {
-      return child;
-    }
-    return React3.cloneElement(child, {
-      isIncludeHeader: Boolean(findHeader),
-      isIncludeFooter: Boolean(findFooter),
-      sizeVar: rest.sizeVar,
-      height: rest.height
-    });
-  });
-  return /* @__PURE__ */ jsx(Container, { ref, ...rest, "data-shoplflow": "Modal", children: addPropInChildren });
-};
-var ModalContainer_default = ModalContainer;
-var ModalFooter = ({ children }) => {
-  return /* @__PURE__ */ jsx(FooterContainer, { children });
-};
-ModalFooter[MODAL_FOOTER_KEY] = true;
-var ModalFooter_default = ModalFooter;
-var ModalBody = ({
-  children,
-  isIncludeHeader = false,
-  isIncludeFooter = false,
-  sizeVar,
-  height: modalContainerHeight
-}) => {
-  const { height: windowHeight } = useResizeObserver(document.body, {
-    trackHeight: true
-  });
-  const headerHeight = 64;
-  const footerHeight = 64;
-  const topBottomMargin = 64;
-  const getHeaderFooterHeight = useCallback(() => {
-    let result = 0;
-    if (isIncludeHeader) {
-      result += headerHeight;
-    }
-    if (isIncludeFooter) {
-      result += footerHeight;
-    }
-    return result;
-  }, [isIncludeFooter, isIncludeHeader]);
-  const headerFooterHeight = useMemo(() => getHeaderFooterHeight(), [getHeaderFooterHeight]);
-  const setAutoHeightMin = () => {
-    if (modalContainerHeight) {
-      return modalContainerHeight - headerFooterHeight;
-    } else {
-      return "100%";
-    }
-  };
-  const heightUnderMaxHeight = windowHeight - topBottomMargin - headerFooterHeight;
-  const heightOverMaxHeight = 1200 - topBottomMargin - headerFooterHeight;
-  return /* @__PURE__ */ jsx(BodyContainer, { isIncludeHeader, height: setAutoHeightMin(), children: /* @__PURE__ */ jsx(
-    Scrollbars,
-    {
-      id: `scrollbar`,
-      autoHeight: !modalContainerHeight,
-      autoHeightMin: setAutoHeightMin(),
-      autoHeightMax: windowHeight > 1200 ? heightOverMaxHeight : heightUnderMaxHeight,
-      autoHide: true,
-      autoHideTimeout: 1e3,
-      autoHideDuration: 200,
-      style: {
-        height: "100%",
-        overflow: "hidden"
-      },
-      children: /* @__PURE__ */ jsx(ModalBodyContent, { isIncludeHeader, sizeVar, children })
-    }
-  ) });
-};
-var ModalBody_default = ModalBody;
-var ModalHeader = ({ children }) => {
-  return /* @__PURE__ */ jsx(HeaderContainer, { children });
-};
-ModalHeader[MODAL_HEADER_KEY] = true;
-var ModalHeader_default = ModalHeader;
-
-// src/components/Modal/index.ts
-var Modal = {
-  Container: ModalContainer_default,
-  Header: ModalHeader_default,
-  Body: ModalBody_default,
-  Footer: ModalFooter_default
-};
-var SwitchContainer = styled5.div`
-  width: 32px;
-  height: 32px;
-  border-radius: 6px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: ${({ isDisabled }) => isDisabled && 0.3};
-
-  &:hover {
-    background: ${({ isDisabled }) => !isDisabled && colorTokens.neutral400_5};
-  }
-`;
-var StyledSwitch = styled5.input`
-  appearance: none;
-  border: none;
-  border-radius: 12px;
-  width: 28px;
-  height: 18px;
-  cursor: pointer;
-  position: relative;
-  display: flex;
-  align-items: center;
-  background: ${colorTokens.neutral350};
-  padding: 2px;
-  margin: 0;
-
-  // slider
-  &:before {
-    content: '';
-    left: 2px;
-    display: block;
-    position: absolute;
-    width: 14px;
-    height: 14px;
-    background: ${colorTokens.neutral0};
-    border-radius: 50%;
-    transition: left 0.2s ease-in-out;
-  }
-
-  // selected
-  &:checked {
-    background: ${({ activeColor }) => colorTokens[activeColor]};
-    &:before {
-      left: 12px;
-    }
-  }
-
-  // disabled
-  &:disabled {
-    cursor: auto;
-  }
-`;
-var useOnToggle = (selected, defaultSelected) => {
-  const [isToggle, setIsToggle] = useState(false);
-  const isControlled = selected !== void 0;
-  const handleToggle = () => {
-    !isControlled && setIsToggle((prev) => !prev);
-  };
-  useEffect(() => {
-    if (isControlled) {
-      setIsToggle(selected);
-    }
-  }, [isControlled, selected]);
-  useEffect(() => {
-    if (defaultSelected) {
-      setIsToggle(defaultSelected);
-    }
-  }, [defaultSelected, isControlled]);
-  return [isToggle, handleToggle];
-};
-var Switch = ({
-  onChange,
-  isSelected,
-  disabled = false,
-  activeColor = "primary300",
-  defaultSelected = false,
-  ...rest
-}) => {
-  const [isToggled, handleToggle] = useOnToggle(isSelected, defaultSelected);
-  const handleOnChange = (e) => {
-    handleToggle();
-    onChange && onChange(e);
-  };
-  return /* @__PURE__ */ jsx(SwitchContainer, { isDisabled: disabled, children: /* @__PURE__ */ jsx(
-    StyledSwitch,
-    {
-      type: "checkbox",
-      checked: isToggled,
-      disabled,
-      onChange: handleOnChange,
-      activeColor,
-      ...rest,
-      "data-shoplflow": "Switch"
-    }
-  ) });
-};
-var Switch_default = Switch;
-
-// src/components/Chips/ChipToggle/ChipToggle.types.ts
-var ChipToggleStyleVariants = {
-  SOLID: "SOLID"
-};
-var ChipToggleSizeVariants = {
-  S: "S",
-  XS: "XS"
-};
-var getDisabledStyle = (disabled) => {
-  if (!disabled) {
-    return;
-  }
-  return css`
-    opacity: 50%;
-    cursor: not-allowed;
-  `;
-};
-
-// src/components/Chips/ChipToggle/ChipToggle.styled.ts
-var getLineTypographyBySizeVar = (sizeVar) => {
-  switch (sizeVar) {
-    case "XS":
-      return "body3_400";
-    case "S":
-      return "body2_400";
-    default:
-      return "body2_400";
-  }
-};
-var solidStyle = ({ isSelected, color, radius }) => css`
-  padding: 7px 12px;
-  gap: 4px;
-  background: ${colorTokens.neutral150};
-  border-radius: ${borderRadiusTokens.borderRadius06};
-  & > span {
-    color: ${colorTokens.neutral400};
-  }
-  &:hover {
-    background: ${colorTokens.neutral200};
-  }
-
-  ${radius && css`
-    border-radius: ${borderRadiusTokens.borderRadius16};
-  `};
-  ${isSelected && css`
-    background: ${colorTokens[color]};
-    & > span {
-      color: ${colorTokens["neutral0"]};
-    }
-    &:hover {
-      background: ${colorTokens[color]};
-    }
-  `};
-`;
-var StyledChip = styled5.button`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  width: fit-content;
-  user-select: none;
-  cursor: pointer;
-  ${(props) => props.styleVar === "SOLID" && solidStyle(props)};
-  ${({ disabled }) => getDisabledStyle(disabled)};
-`;
-var ChipToggle = ({
-  text,
-  isSelected,
-  defaultSelected,
-  color = "neutral600",
-  styleVar = ChipToggleStyleVariants.SOLID,
-  sizeVar,
-  leftSource,
-  rightSource,
-  onClick = noop,
-  disabled = false,
-  ...rest
-}) => {
-  const [isToggled, handleToggle] = useOnToggle(isSelected, defaultSelected);
-  const handleClick = (e) => {
-    !disabled && handleToggle();
-    !disabled && onClick && onClick(e);
-  };
-  return /* @__PURE__ */ jsxs(
-    StyledChip,
-    {
-      ...rest,
-      color,
-      isSelected: isToggled,
-      styleVar,
-      sizeVar,
-      onClick: handleClick,
-      disabled,
-      "data-shoplflow": "ChipToggle",
-      children: [
-        leftSource,
-        /* @__PURE__ */ jsx(Text_default, { typography: getLineTypographyBySizeVar(sizeVar), children: text }),
-        rightSource
-      ]
-    }
-  );
-};
-var ChipToggle_default = ChipToggle;
-
-// src/utils/getNextColor.ts
-var getNextColor = (color, step = 1) => {
-  const colorName = color.replace(/[0-9]|_/g, "");
-  const colorNumber = color.replace(/[a-z]|_/g, "");
-  const nextColorNumber = Number(colorNumber) + 100 * step;
-  const nextColorToken = `${colorName}${nextColorNumber}`;
-  const colorKeysOfColorName = Object.keys(colorTokens).filter((colorToken) => colorToken.includes(colorName)).sort((a, b) => Number(a.replace(/[a-z]|_/g, "")) - Number(b.replace(/[a-z]|_/g, "")));
-  const colorTokenKeys = Object.keys(colorTokens);
-  const findColorToken = colorTokenKeys.find((colorToken) => colorToken === nextColorToken);
-  const lastColorToken = colorKeysOfColorName[colorKeysOfColorName.length - 1];
-  return findColorToken ? findColorToken : lastColorToken;
-};
-
-// src/components/Chips/ChipButton/ChipButton.styled.ts
-var getLineTypographyBySizeVar2 = (sizeVar) => {
-  switch (sizeVar) {
-    case "XS":
-      return "caption_400";
-    case "S":
-      return "body3_400";
-    default:
-      return "body3_400";
-  }
-};
-var lineStyle = ({ color }) => css`
-  background: ${colorTokens.neutral0};
-  border: 1px solid ${colorTokens[color]};
-  border-radius: ${borderRadiusTokens.borderRadius20};
-  &:hover {
-    border: 1px solid ${colorTokens[getNextColor(color, 2)]};
-  }
-  & > span {
-    color: ${colorTokens[getNextColor(color, 4)]};
-  }
-`;
-var getStyleBySizeVar = (sizeVar) => {
-  switch (sizeVar) {
-    case "XS":
-      return css`
-        padding: 4px 8px;
-      `;
-    case "S":
-      return css`
-        padding: 7px 12px;
-      `;
-    default:
-      return css`
-        padding: 7px 12px;
-      `;
-  }
-};
-var StyledChipButton = styled5.button`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  width: fit-content;
-  gap: 4px;
-  cursor: pointer;
-  background: ${({ background: background2 }) => background2 && colorTokens[background2]};
-  ${({ sizeVar }) => getStyleBySizeVar(sizeVar)};
-  ${(props) => props.styleVar === "LINE" && lineStyle(props)};
-  ${({ disabled }) => getDisabledStyle(disabled)};
-`;
-
-// src/components/Chips/ChipButton/ChipButton.types.ts
-var ChipButtonStyleVariants = {
-  LINE: "LINE"
-};
-var ChipButtonSizeVariants = {
-  S: "S",
-  XS: "XS"
-};
-var ChipButton = ({
-  styleVar = ChipButtonStyleVariants.LINE,
-  color = "neutral200",
-  sizeVar = ChipButtonSizeVariants.S,
-  text,
-  onClick = noop,
-  disabled = false,
-  ...rest
-}) => {
-  const handleOnClick = (e) => {
-    !disabled && onClick(e);
-  };
-  return /* @__PURE__ */ jsx(
-    StyledChipButton,
-    {
-      styleVar,
-      color,
-      ...rest,
-      onClick: handleOnClick,
-      disabled,
-      "data-shoplflow": "ChipButton",
-      children: /* @__PURE__ */ jsx(Text_default, { typography: getLineTypographyBySizeVar2(sizeVar), children: text })
-    }
-  );
-};
-var ChipButton_default = ChipButton;
-var getStyleByStyleVar = (styleVar, disabled) => {
-  switch (styleVar) {
-    case "PRIMARY":
-      return css`
-        border: 1px solid ${colorTokens.primary400};
-        background-color: ${colorTokens.primary300};
-        :hover {
-          background-color: ${!disabled && colorTokens.primary400};
-        }
-      `;
-    case "SECONDARY":
-      return css`
-        border: 1px solid ${colorTokens.neutral350};
-        background-color: ${colorTokens.neutral0};
-        :hover {
-          background-color: ${!disabled && colorTokens.neutral100};
-        }
-      `;
-    case "SOLID":
-      return css`
-        border: 1px solid ${colorTokens.coolgray100};
-        background-color: ${colorTokens.coolgray50};
-        :hover {
-          background-color: ${!disabled && colorTokens.coolgray100};
-        }
-      `;
-    case "GHOST":
-      return css`
-        border: 1px solid transparent;
-        background-color: transparent;
-        :hover {
-          background-color: ${!disabled && colorTokens.neutral400_5};
-        }
-      `;
-    default:
-      return css`
-        border: 1px solid ${colorTokens.primary400};
-        background-color: ${colorTokens.primary300};
-      `;
-  }
-};
-var getStyleBySizeVar2 = (sizeVar) => {
-  switch (sizeVar) {
-    case "M":
-      return css`
-        min-width: 72px;
-        min-height: 40px;
-      `;
-    case "S":
-      return css`
-        min-width: 54px;
-        min-height: 32px;
-      `;
-    default:
-      return css`
-        min-width: 72px;
-        min-height: 40px;
-      `;
-  }
-};
-var StyledButton = styled5.button`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: fit-content;
-  gap: 4px;
-  padding: 0 12px;
-  border-radius: 6px;
-  cursor: pointer;
-  ${({ styleVar, disabled }) => getStyleByStyleVar(styleVar, disabled)};
-  ${({ sizeVar }) => getStyleBySizeVar2(sizeVar)};
-  ${({ disabled }) => getDisabledStyle(disabled)};
-`;
-var Button = forwardRef(
-  ({
-    styleVar = "PRIMARY",
-    sizeVar = "M",
-    style,
-    color,
-    as,
-    children,
-    leftSource,
-    rightSource,
-    ...rest
-  }, ref) => {
-    return /* @__PURE__ */ jsxs(
-      StyledButton,
-      {
-        styleVar,
-        sizeVar,
-        className: styleVar,
-        style,
-        as,
-        ref,
-        color,
-        ...rest,
-        "data-shoplflow": "Button",
-        children: [
-          leftSource,
-          /* @__PURE__ */ jsx(
-            Text_default,
-            {
-              wordBreak: "keep-all",
-              whiteSpace: "nowrap",
-              color: styleVar === "PRIMARY" ? "neutral0" : "neutral700",
-              typography: sizeVar === "M" ? "body1_400" : "body2_400",
-              children
-            }
-          ),
-          rightSource
-        ]
-      }
-    );
-  }
-);
-var Button_default = Button;
-
-// src/components/Buttons/Button/Button.types.ts
-var buttonSizeVar = {
-  S: "S",
-  M: "M"
-};
-var buttonStyleVar = {
-  PRIMARY: "PRIMARY",
-  SECONDARY: "SECONDARY",
-  SOLID: "SOLID",
-  GHOST: "GHOST"
-};
-var getWidthAndHeightFromSizeVar = (sizeVar) => {
-  switch (sizeVar) {
-    case "M":
-      return css`
-        width: 40px;
-        min-width: 40px;
-        height: 40px;
-        min-height: 40px;
-      `;
-    case "S":
-      return css`
-        width: 32px;
-        min-width: 32px;
-        height: 32px;
-        min-height: 32px;
-      `;
-    default:
-      return css`
-        width: 40px;
-        min-width: 40px;
-        height: 40px;
-        min-height: 40px;
-      `;
-  }
-};
-var getStyleByStyleVar2 = (styleVar) => {
-  switch (styleVar) {
-    case "SOLID":
-      return css`
-        border: 1px solid ${colorTokens.neutral200};
-        &:hover {
-          background-color: ${colorTokens.neutral100};
-        }
-      `;
-    case "GHOST":
-      return css`
-        border: 1px solid transparent;
-        &:hover {
-          background-color: ${colorTokens.neutral400_5};
-        }
-      `;
-    default:
-      return css`
-        border: 1px solid ${colorTokens.neutral200};
-        &:hover {
-          background-color: ${colorTokens.neutral100};
-        }
-      `;
-  }
-};
-var StyledIconButton = styled5.button`
-  display: flex;
-  flex-shrink: 0;
-  border-radius: ${borderRadiusTokens.borderRadius06};
-  justify-content: center;
-  align-items: center;
-  background-color: ${colorTokens.neutral0};
-  cursor: pointer;
-  ${({ styleVar }) => getStyleByStyleVar2(styleVar)};
-  ${({ sizeVar }) => getWidthAndHeightFromSizeVar(sizeVar)};
-  ${({ disabled }) => getDisabledStyle(disabled)};
-  & > svg {
-    width: 20px;
-    height: 20px;
-  }
-`;
-var IconButton = forwardRef(
-  ({ styleVar, sizeVar, disabled, as, children, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx(
-      StyledIconButton,
-      {
-        styleVar,
-        sizeVar,
-        disabled,
-        as,
-        ref,
-        ...rest,
-        "data-shoplflow": "IconButton",
-        children
-      }
-    );
-  }
-);
-var IconButton_default = IconButton;
-
-// src/components/Buttons/IconButton/IconButton.types.ts
-var iconButtonSizeVar = {
-  S: "S",
-  M: "M"
-};
-var iconButtonStyleVar = {
-  SOLID: "SOLID",
-  GHOST: "GHOST"
-};
-var informationStyle = css`
-  background: ${colorTokens.neutral100};
-  & > span {
-    color: ${colorTokens.neutral600};
-  }
-  & > svg > path {
-    fill: ${colorTokens.neutral600};
-  }
-`;
-var alertStyle = css`
-  background: ${colorTokens.red100};
-  & > span {
-    align-self: center;
-    color: ${colorTokens.red300};
-  }
-  & > svg > path {
-    fill: ${colorTokens.red300};
-  }
-`;
-var StyledCallout = styled5.div`
-  display: flex;
-  justify-content: flex-start;
-  align-items: start;
-  padding: 6px 8px;
-  gap: 4px;
-  border-radius: ${borderRadiusTokens.borderRadius08};
-  ${({ styleVar }) => styleVar === "INFORMATION" && informationStyle}
-  ${({ styleVar }) => styleVar === "ALERT" && alertStyle}
-`;
-var StyledCalloutIcon = styled5.svg`
-  display: flex;
-  min-height: 20px;
-  min-width: 20px;
-`;
-styled5.div`
-  padding: 2px 0;
-`;
-var Callout = ({ children, styleVar = "INFORMATION", ...rest }) => {
-  return /* @__PURE__ */ jsx(StyledCallout, { ...rest, styleVar, "data-shoplflow": "Callout", children });
-};
-var CalloutText = ({ children, ...rest }) => {
-  return /* @__PURE__ */ jsx(Text_default, { ...rest, typography: "body3_400", children });
-};
-var CalloutIcon = ({ iconSource }) => {
-  return /* @__PURE__ */ jsx(StyledCalloutIcon, { as: iconSource });
-};
-Callout.Text = CalloutText;
-Callout.Icon = CalloutIcon;
-var Callout_default = Callout;
-
-// src/components/Callout/Callout.types.ts
-var CalloutTypes = {
-  INFORMATION: "INFORMATION",
-  ALERT: "ALERT"
-};
-var StyledPopper = styled5.div`
-  display: flex;
-  flex-direction: row;
-  width: ${({ width }) => width ?? "fit-content"};
-  height: ${({ height }) => height ?? "fit-content"};
-`;
-var Popper = ({
-  trigger,
-  popper,
-  isOpen = false,
-  placement,
-  offset: initialOffset = 0,
-  autoPlacement: initialAutoPlacement,
-  strategy = "absolute",
-  middlewares,
-  animation: initialAnimation,
-  ...rest
-}) => {
-  const { refs, floatingStyles } = useFloating({
-    strategy,
-    placement,
-    whileElementsMounted: autoUpdate,
-    middleware: [
-      offset(initialOffset),
-      autoPlacement({
-        crossAxis: false,
-        ...initialAutoPlacement
-      }),
-      ...middlewares ?? []
-    ]
-  });
-  const animation = initialAnimation ?? fadeInOut;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(StyledPopper, { ref: refs.setReference, "data-shoplflow": "Popper", ...rest, children: trigger }),
-    /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        initial: animation.initial,
-        animate: animation.animate,
-        exit: animation.exit,
-        ref: refs.setFloating,
-        style: floatingStyles,
-        children: popper
-      }
-    ) }) })
-  ] });
-};
-var Popper_default = Popper;
-
-// src/components/Icon/Icon.types.ts
-var IconSizeVariants = {
-  X_SMALL: "X_SMALL",
-  SMALL: "SMALL",
-  MEDIUM: "MEDIUM",
-  LARGE: "LARGE",
-  X_LARGE: "X_LARGE"
-};
-
-// src/components/Icon/Icon.styled.ts
-var getIconSize = (size) => {
-  switch (size) {
-    case IconSizeVariants.X_SMALL:
-      return "12px";
-    case IconSizeVariants.SMALL:
-      return "20px";
-    case IconSizeVariants.MEDIUM:
-      return "24px";
-    case IconSizeVariants.LARGE:
-      return "30px";
-    case IconSizeVariants.X_LARGE:
-      return "36px";
-    default:
-      return "24px";
-  }
-};
-var StyledIcon = styled5.svg`
-  width: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
-  min-width: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
-  height: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
-  min-height: ${({ sizeVar }) => sizeVar && getIconSize(sizeVar)};
-
-  & > path {
-    fill: ${({ color }) => color && colorTokens[color]};
-  }
-`;
-var Icon = forwardRef(({ iconSource, ...rest }, ref) => {
-  return /* @__PURE__ */ jsx(StyledIcon, { as: iconSource, ref, ...rest, "data-shoplflow": "Icon" });
-});
-var Icon_default = Icon;
-var StyledInput = styled5.input`
-  padding: 4px 0 4px 12px;
-  background-color: transparent;
-  width: 100%;
-  border: none;
-  box-sizing: border-box;
-  &::placeholder {
-    color: ${colorTokens.neutral350};
-  }
-`;
-var RightElementWrapper = styled5.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 0 8px 0 0;
-`;
-var Wrapper = styled5.div`
-  display: flex;
-  width: 100%;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 2px;
-`;
-var TextCounter = ({ currentLength, maxLength }) => {
-  return /* @__PURE__ */ jsxs(Wrapper, { children: [
-    /* @__PURE__ */ jsx(Text_default, { typography: "caption_400", color: "neutral400", children: currentLength }),
-    /* @__PURE__ */ jsx(Text_default, { typography: "caption_400", color: "neutral350", children: "/" }),
-    /* @__PURE__ */ jsx(Text_default, { typography: "caption_400", color: "neutral350", children: maxLength })
-  ] });
-};
-var TextCounter_default = TextCounter;
-createContext({
-  domain: "SHOPL",
-  handleToggleTheme: () => {
-  }
-});
-
-// src/styles/IconAssets.tsx
-var assetFunction = (iconName, domainProps) => {
-  const domain = domainProps ?? getDomain();
-  const HadaIcon = HadaAssets[iconName];
-  const ShoplIcon = ShoplAssets[iconName];
-  return domain === "hada" ? HadaIcon : ShoplIcon;
-};
-function assignRef(ref, value) {
-  if (ref == null) {
-    return;
-  }
-  if (typeof ref === "function") {
-    ref(value);
-    return;
-  }
-  try {
-    ref.current = value;
-  } catch (error) {
-    throw new Error(`Cannot assign value '${value}' to ref '${ref}'`);
-  }
-}
-function mergeRefs(...refs) {
-  return (node) => {
-    refs.forEach((ref) => {
-      assignRef(ref, node);
-    });
-  };
-}
-function useMergeRefs(...refs) {
-  return useMemo(() => mergeRefs(...refs), refs);
-}
-var getBorderColorByStatus = ({ isFocused, isError, isHovered, disabled }) => {
-  if (!disabled) {
-    if (isError) {
-      return colorTokens.red300;
-    }
-    if (isFocused) {
-      return colorTokens.primary300;
-    }
-    if (isHovered) {
-      return colorTokens.neutral700;
-    }
-  }
-  return colorTokens.neutral300;
-};
-var InputWrapper = styled5.label`
-  display: flex;
-  align-items: center;
-  width: 100%;
-  flex-direction: ${({ direction }) => direction || "row"};
-  justify-content: space-between;
-  min-height: 40px;
-  margin: 1px;
-  gap: 8px;
-  box-shadow: 0 0 0 1px ${(props) => getBorderColorByStatus(props)};
-  border-radius: 6px;
-  background-color: ${colorTokens.neutral0};
-  overflow: hidden;
-  ${({ disabled }) => getDisabledStyle(disabled)};
-`;
-forwardRef(
-  ({
-    onFocus,
-    onBlur,
-    onChange,
-    onClear,
-    defaultValue,
-    value,
-    isError,
-    disabled,
-    type: initialType,
-    maxLength,
-    className,
-    ...rest
-  }, ref) => {
-    const [text, setText] = useState("");
-    const [isFocused, setIsFocused] = useState(false);
-    const [type, setType] = useState("text");
-    const [isHovered, setIsHovered] = useState(false);
-    const uniqueId = useId();
-    const inputRef = React3.useRef(null);
-    const refs = useMergeRefs(ref, inputRef);
-    const convertToString = useCallback((value2) => {
-      if (typeof value2 !== "number") {
-        return typeof value2 === "string" ? value2 : value2.join("");
-      }
-      return String(value2);
-    }, []);
-    const sliceText = useCallback(
-      (value2) => {
-        if (maxLength && value2.length > maxLength) {
-          return value2.slice(0, maxLength);
-        }
-        return value2;
-      },
-      [maxLength]
-    );
-    const handleOnMouseEnter = () => {
-      setIsHovered(true);
-    };
-    const handleOnMouseLeave = () => {
-      setIsHovered(false);
-    };
-    const handleOnFocus = (event) => {
-      onFocus && onFocus(event);
-      setIsFocused(true);
-    };
-    const handleOnBlur = (event) => {
-      onBlur && onBlur(event);
-      !isHovered && setIsFocused(false);
-    };
-    const handleOnChange = (event) => {
-      onChange && onChange(event);
-      const slicedText = sliceText(event.target.value);
-      setText(slicedText);
-    };
-    const handleOnClear = () => {
-      onClear && onClear();
-      if (inputRef.current) {
-        setText("");
-        inputRef.current.value = "";
-      }
-    };
-    const handleTogglePasswordType = () => {
-      if (type === "password") {
-        setType("text");
-      } else {
-        setType("password");
-      }
-    };
-    useEffect(() => {
-      if (defaultValue) {
-        const convertString = convertToString(defaultValue);
-        const slicedText = sliceText(convertString);
-        setText(slicedText);
-      }
-    }, [convertToString, defaultValue, maxLength, sliceText]);
-    useEffect(() => {
-      if (value) {
-        const convertString = convertToString(value);
-        const slicedText = sliceText(convertString);
-        setText(slicedText);
-      }
-    }, [convertToString, maxLength, sliceText, value]);
-    useEffect(() => {
-      setType(initialType);
-    }, [initialType]);
-    return /* @__PURE__ */ jsxs(
-      InputWrapper,
-      {
-        htmlFor: uniqueId,
-        isFocused,
-        disabled,
-        isError,
-        isHovered,
-        onMouseEnter: handleOnMouseEnter,
-        onMouseLeave: handleOnMouseLeave,
-        "data-shoplflow": "input",
-        children: [
-          /* @__PURE__ */ jsx(
-            StyledInput,
-            {
-              onFocus: handleOnFocus,
-              onBlur: handleOnBlur,
-              onChange: handleOnChange,
-              maxLength,
-              disabled,
-              value: text,
-              type,
-              id: uniqueId,
-              ref: refs,
-              className: "body1_400" + (className ? ` ${className}` : ""),
-              ...rest
-            }
-          ),
-          /* @__PURE__ */ jsxs(RightElementWrapper, { children: [
-            maxLength && isFocused && /* @__PURE__ */ jsx(TextCounter_default, { currentLength: String(text).length, maxLength }),
-            isFocused && Boolean(String(text).length > 0) && /* @__PURE__ */ jsx(IconButton_default, { sizeVar: "S", onClick: handleOnClear, styleVar: "GHOST", children: /* @__PURE__ */ jsx(Icon_default, { iconSource: assetFunction("DeleteIcon"), color: "neutral600" }) }),
-            initialType === "password" && /* @__PURE__ */ jsx(IconButton_default, { sizeVar: "S", onClick: handleTogglePasswordType, styleVar: "GHOST", children: /* @__PURE__ */ jsx(
-              Icon_default,
-              {
-                color: "neutral600",
-                iconSource: assetFunction(type === "password" ? "ViewOffIcon" : "ViewOnIcon")
-              }
-            ) })
-          ] })
-        ]
-      }
-    );
-  }
-);
-var BottomElementWrapper = styled5.div`
-  display: flex;
-  width: 100%;
-  flex-direction: row;
-  padding: 8px 12px;
-  gap: 8px;
-  background-color: ${colorTokens.neutral0};
-`;
-var StyledTextarea = styled5.textarea`
-  padding: 8px 12px 0 12px;
-  background-color: transparent;
-  resize: none;
-  width: 100%;
-  height: ${({ minHeight }) => minHeight ? `${minHeight}px` : "300px"};
-  flex: 1;
-  word-break: break-all;
-  ${({ disabled }) => getDisabledStyle(disabled)};
-  &::placeholder {
-    color: ${colorTokens.neutral350};
-  }
-`;
-var TextArea = forwardRef(
-  ({
-    name,
-    maxLength,
-    placeholder,
-    disabled = false,
-    isError = false,
-    onChange,
-    value,
-    defaultValue,
-    onBlur,
-    onFocus,
-    minHeight = 100,
-    className,
-    ...rest
-  }, ref) => {
-    const [text, setText] = useState("");
-    const [isFocused, setIsFocused] = useState(false);
-    const [isHovered, setIsHovered] = useState(false);
-    const handleOnMouseEnter = () => {
-      setIsHovered(true);
-    };
-    const handleOnMouseLeave = () => {
-      setIsHovered(false);
-    };
-    const handleOnFocus = (event) => {
-      onFocus && onFocus(event);
-      setIsFocused(true);
-    };
-    const handleOnBlur = (event) => {
-      onBlur && onBlur(event);
-      !isHovered && setIsFocused(false);
-    };
-    const handleOnChange = (event) => {
-      onChange && onChange(event);
-      setText(event.target.value);
-    };
-    const convertToString = (value2) => {
-      if (typeof value2 !== "number") {
-        return typeof value2 === "string" ? value2 : value2.join("");
-      }
-      return String(value2);
-    };
-    useEffect(() => {
-      if (defaultValue) {
-        const convertString = convertToString(defaultValue);
-        if (maxLength && convertString.length > maxLength) {
-          setText(convertString);
-        }
-        setText(convertString);
-      }
-    }, [defaultValue, maxLength]);
-    useEffect(() => {
-      if (value) {
-        const convertString = convertToString(value);
-        if (maxLength && convertString.length > maxLength) {
-          setText(convertString);
-        }
-        setText(convertToString(value));
-      }
-    }, [maxLength, value]);
-    const uniqueId = useId();
-    return /* @__PURE__ */ jsxs(
-      InputWrapper,
-      {
-        htmlFor: uniqueId,
-        isFocused,
-        disabled,
-        isHovered,
-        isError,
-        direction: "column",
-        onMouseEnter: handleOnMouseEnter,
-        onMouseLeave: handleOnMouseLeave,
-        "data-shoplflow": "text-area",
-        children: [
-          /* @__PURE__ */ jsx(
-            StyledTextarea,
-            {
-              className: "body1_400" + (className ? ` ${className}` : ""),
-              placeholder,
-              onFocus: handleOnFocus,
-              onBlur: handleOnBlur,
-              onChange: handleOnChange,
-              name,
-              id: uniqueId,
-              value,
-              ref,
-              maxLength,
-              disabled,
-              minHeight,
-              ...rest
-            }
-          ),
-          /* @__PURE__ */ jsx(BottomElementWrapper, { children: maxLength && /* @__PURE__ */ jsx(TextCounter_default, { currentLength: String(text).length, maxLength }) })
-        ]
-      }
-    );
-  }
-);
-var TextArea_default = TextArea;
-var Container2 = styled5.div`
-  width: 32px;
-  height: 32px;
-  padding: 7px;
-`;
-var IconButton2 = styled5.button`
-  display: flex;
-  width: 16px;
-  height: 16px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  border-radius: ${borderRadiusTokens.borderRadius04};
-  border: none;
-  background: ${({ color }) => colorTokens[color]};
-  cursor: pointer;
-  transition:
-    transform 0.1s ease-out,
-    background 0.1s ease;
-
-  &:hover {
-    background: ${({ color }) => colorTokens[getNextColor(color, 1)]};
-  }
-`;
-var MinusButton = forwardRef(({ onClick, color = "neutral300", ...rest }, ref) => {
-  return /* @__PURE__ */ jsx(Container2, { "data-shoplflow": "minusButton", children: /* @__PURE__ */ jsx(IconButton2, { color, onClick, ref, ...rest, children: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-    /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V12C16 14.2091 14.2091 16 12 16H4C1.79086 16 0 14.2091 0 12V4Z",
-        fill: "none"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "path",
-      {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M3 8C3 7.44772 3.44772 7 4 7H12C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9H4C3.44772 9 3 8.55228 3 8Z",
-        fill: "white"
-      }
-    )
-  ] }) }) });
-});
-var MinusButton_default = MinusButton;
-
-export { Button_default as Button, Callout_default as Callout, CalloutTypes, ChipButton_default as ChipButton, ChipButtonSizeVariants, ChipButtonStyleVariants, ChipToggle_default as ChipToggle, ChipToggleSizeVariants, ChipToggleStyleVariants, Icon_default as Icon, IconButton_default as IconButton, IconSizeVariants, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, MinusButton_default as MinusButton, Modal, ModalPortal_default as ModalProvider, ModalSize, MotionStack, Popper_default as Popper, ShoplflowProvider_default as ShoplflowProvider, Stack_default as Stack, StyledIcon, StyledPopper, StyledStack, Switch_default as Switch, Text_default as Text, TextArea_default as TextArea, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=index.mjs.map