@channel.io/bezier-react 1.4.0 → 1.6.0

package/dist/cjs/components/Toast/ToastController.js

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var domUtils = require('../../utils/domUtils.js');
+var utils = require('./utils.js');
+
+function ToastController({
+  autoDismissTimeout,
+  transitionDuration,
+  autoDismiss,
+  placement,
+  component: ToastElement,
+  onDismiss,
+  version = 0,
+  ...props
+}) {
+  const [transform, setTransform] = React.useState(utils.showedToastTranslateXStyle);
+  const dismissTimer = React.useRef();
+  const handleDismiss = React.useCallback(e => {
+    setTransform(utils.initPosition(placement));
+    dismissTimer.current = domUtils.window.setTimeout(() => {
+      onDismiss(e);
+    }, transitionDuration);
+  }, [onDismiss, placement, transitionDuration]);
+  const startDismissTimer = React.useCallback(() => {
+    dismissTimer.current = domUtils.window.setTimeout(handleDismiss, autoDismissTimeout);
+  }, [autoDismissTimeout, handleDismiss]);
+  const clearDismissTimer = React.useCallback(() => {
+    if (dismissTimer.current != null) {
+      clearTimeout(dismissTimer.current);
+    }
+  }, []);
+  React.useEffect(function initStartDismissTimer() {
+    clearDismissTimer();
+    if (autoDismiss) {
+      dismissTimer.current = domUtils.window.setTimeout(startDismissTimer, transitionDuration);
+    }
+    return clearDismissTimer;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [autoDismiss, version]);
+  return /*#__PURE__*/React.createElement(ToastElement, Object.assign({
+    transitionDuration: transitionDuration,
+    placement: placement,
+    onDismiss: handleDismiss
+  }, props, {
+    transform: transform
+  }));
+}
+var ToastController$1 = /*#__PURE__*/React.memo(ToastController);
+
+exports.default = ToastController$1;
+//# sourceMappingURL=ToastController.js.map

package/dist/cjs/components/Toast/ToastController.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastController.js","sources":["../../../../src/components/Toast/ToastController.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react'\n\nimport { window } from '~/src/utils/domUtils'\n\nimport { type ToastControllerProps } from './Toast.types'\nimport {\n  initPosition,\n  showedToastTranslateXStyle,\n} from './utils'\n\nfunction ToastController({\n  autoDismissTimeout,\n  transitionDuration,\n  autoDismiss,\n  placement,\n  component: ToastElement,\n  onDismiss,\n  version = 0,\n  ...props\n}: ToastControllerProps) {\n  const [transform, setTransform] = useState(showedToastTranslateXStyle)\n  const dismissTimer = useRef<ReturnType<Window['setTimeout']>>()\n\n  const handleDismiss = useCallback((e: React.MouseEvent<HTMLDivElement>) => {\n    setTransform(initPosition(placement))\n    dismissTimer.current = window.setTimeout(() => {\n      onDismiss(e)\n    }, transitionDuration)\n  }, [\n    onDismiss,\n    placement,\n    transitionDuration,\n  ])\n\n  const startDismissTimer = useCallback(() => {\n    dismissTimer.current = window.setTimeout(handleDismiss, autoDismissTimeout)\n  }, [\n    autoDismissTimeout,\n    handleDismiss,\n  ])\n\n  const clearDismissTimer = useCallback(() => {\n    if (dismissTimer.current != null) {\n      clearTimeout(dismissTimer.current)\n    }\n  }, [])\n\n  useEffect(function initStartDismissTimer() {\n    clearDismissTimer()\n    if (autoDismiss) {\n      dismissTimer.current = window.setTimeout(startDismissTimer, transitionDuration)\n    }\n    return clearDismissTimer\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    autoDismiss,\n    version,\n  ])\n\n  return (\n    <ToastElement\n      transitionDuration={transitionDuration}\n      placement={placement}\n      onDismiss={handleDismiss}\n      {...props}\n      transform={transform}\n    />\n  )\n}\n\nexport default React.memo(ToastController)\n"],"names":["ToastController","autoDismissTimeout","transitionDuration","autoDismiss","placement","component","ToastElement","onDismiss","version","props","transform","setTransform","useState","showedToastTranslateXStyle","dismissTimer","useRef","handleDismiss","useCallback","e","initPosition","current","window","setTimeout","startDismissTimer","clearDismissTimer","clearTimeout","useEffect","initStartDismissTimer","React","createElement","Object","assign","memo"],"mappings":";;;;;;;;AAeA,SAASA,eAAeA,CAAC;EACvBC,kBAAkB;EAClBC,kBAAkB;EAClBC,WAAW;EACXC,SAAS;AACTC,EAAAA,SAAS,EAAEC,YAAY;EACvBC,SAAS;AACTC,EAAAA,OAAO,GAAG,CAAC;EACX,GAAGC,KAAAA;AACiB,CAAC,EAAE;EACvB,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGC,cAAQ,CAACC,gCAA0B,CAAC,CAAA;AACtE,EAAA,MAAMC,YAAY,GAAGC,YAAM,EAAoC,CAAA;AAE/D,EAAA,MAAMC,aAAa,GAAGC,iBAAW,CAAEC,CAAmC,IAAK;AACzEP,IAAAA,YAAY,CAACQ,kBAAY,CAACf,SAAS,CAAC,CAAC,CAAA;AACrCU,IAAAA,YAAY,CAACM,OAAO,GAAGC,eAAM,CAACC,UAAU,CAAC,MAAM;MAC7Cf,SAAS,CAACW,CAAC,CAAC,CAAA;KACb,EAAEhB,kBAAkB,CAAC,CAAA;GACvB,EAAE,CACDK,SAAS,EACTH,SAAS,EACTF,kBAAkB,CACnB,CAAC,CAAA;AAEF,EAAA,MAAMqB,iBAAiB,GAAGN,iBAAW,CAAC,MAAM;IAC1CH,YAAY,CAACM,OAAO,GAAGC,eAAM,CAACC,UAAU,CAACN,aAAa,EAAEf,kBAAkB,CAAC,CAAA;AAC7E,GAAC,EAAE,CACDA,kBAAkB,EAClBe,aAAa,CACd,CAAC,CAAA;AAEF,EAAA,MAAMQ,iBAAiB,GAAGP,iBAAW,CAAC,MAAM;AAC1C,IAAA,IAAIH,YAAY,CAACM,OAAO,IAAI,IAAI,EAAE;AAChCK,MAAAA,YAAY,CAACX,YAAY,CAACM,OAAO,CAAC,CAAA;AACpC,KAAA;GACD,EAAE,EAAE,CAAC,CAAA;AAENM,EAAAA,eAAS,CAAC,SAASC,qBAAqBA,GAAG;AACzCH,IAAAA,iBAAiB,EAAE,CAAA;AACnB,IAAA,IAAIrB,WAAW,EAAE;MACfW,YAAY,CAACM,OAAO,GAAGC,eAAM,CAACC,UAAU,CAACC,iBAAiB,EAAErB,kBAAkB,CAAC,CAAA;AACjF,KAAA;AACA,IAAA,OAAOsB,iBAAiB,CAAA;AAC1B;AACA,GAAC,EAAE,CACDrB,WAAW,EACXK,OAAO,CACR,CAAC,CAAA;EAEF,oBACEoB,KAAA,CAAAC,aAAA,CAACvB,YAAY,EAAAwB,MAAA,CAAAC,MAAA,CAAA;AACX7B,IAAAA,kBAAkB,EAAEA,kBAAmB;AACvCE,IAAAA,SAAS,EAAEA,SAAU;AACrBG,IAAAA,SAAS,EAAES,aAAAA;AAAc,GAAA,EACrBP,KAAK,EAAA;AACTC,IAAAA,SAAS,EAAEA,SAAAA;AAAU,GAAA,CACtB,CAAC,CAAA;AAEN,CAAA;AAEA,wBAAA,aAAekB,KAAK,CAACI,IAAI,CAAChC,eAAe,CAAC;;;;"}

package/dist/cjs/components/Toast/ToastElement.js

@@ -0,0 +1,77 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var bezierIcons = require('@channel.io/bezier-icons');
+var typeUtils = require('../../utils/typeUtils.js');
+var Text = require('../Text/Text.js');
+var Toast_types = require('./Toast.types.js');
+var utils = require('./utils.js');
+var Toast_styled = require('./Toast.styled.js');
+var v4 = require('../../node_modules/uuid/dist/esm-browser/v4.js');
+var LegacyIcon = require('../LegacyIcon/LegacyIcon.js');
+var Icon_types = require('../Icon/Icon.types.js');
+var Icon = require('../Icon/Icon.js');
+var Typography = require('../../foundation/Typography.js');
+
+const TOAST_TEST_ID = 'bezier-react-toast';
+const ToastElement = ({
+  as,
+  testId = TOAST_TEST_ID,
+  preset = Toast_types.ToastPreset.Default,
+  content = '',
+  appearance,
+  iconName,
+  actionContent,
+  onClick,
+  onDismiss,
+  ...props
+}, forwardedRef) => {
+  const ToastContentComponent = React.useMemo(() => {
+    if (typeUtils.isString(content)) {
+      return content.split('\n').map(str => /*#__PURE__*/React.createElement("div", {
+        key: v4.default()
+      }, /*#__PURE__*/React.createElement(Text.default, {
+        typo: Typography.Typography.Size14
+      }, str)));
+    }
+    return content;
+  }, [content]);
+  const {
+    appearance: presetAppearance,
+    iconName: presetIconName
+  } = React.useMemo(() => utils.getToastPreset(preset), [preset]);
+  return /*#__PURE__*/React.createElement(Toast_styled.Element, Object.assign({
+    ref: forwardedRef,
+    "data-testid": testId
+  }, props), /*#__PURE__*/React.createElement(Toast_styled.IconWrapper, {
+    appearance: appearance ?? presetAppearance
+  }, /*#__PURE__*/React.createElement(LegacyIcon.default, {
+    name: iconName ?? presetIconName,
+    size: Icon_types.IconSize.S
+  })), /*#__PURE__*/React.createElement(Toast_styled.Content, {
+    actionContent: actionContent,
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(Toast_styled.EllipsisableContent, null, /*#__PURE__*/React.createElement(Text.default, {
+    typo: Typography.Typography.Size14,
+    style: {
+      height: '18px'
+    }
+  }, /*#__PURE__*/React.createElement(Toast_styled.NormalContent, {
+    "data-testid": `${TOAST_TEST_ID}-content`
+  }, ToastContentComponent), ' ', actionContent && onClick && /*#__PURE__*/React.createElement(Toast_styled.ActionContent, {
+    onClick: onClick
+  }, actionContent)))), /*#__PURE__*/React.createElement(Toast_styled.Close, {
+    onClick: onDismiss,
+    "data-testid": `${TOAST_TEST_ID}-close`
+  }, /*#__PURE__*/React.createElement(Icon.Icon, {
+    source: bezierIcons.CancelIcon,
+    size: Icon_types.IconSize.XS
+  })));
+};
+var ToastElement$1 = /*#__PURE__*/React.forwardRef(ToastElement);
+
+exports.TOAST_TEST_ID = TOAST_TEST_ID;
+exports.default = ToastElement$1;
+//# sourceMappingURL=ToastElement.js.map

package/dist/cjs/components/Toast/ToastElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastElement.js","sources":["../../../../src/components/Toast/ToastElement.tsx"],"sourcesContent":["import React, {\n  type Ref,\n  forwardRef,\n  useMemo,\n} from 'react'\n\nimport { CancelIcon } from '@channel.io/bezier-icons'\nimport { v4 as uuid } from 'uuid'\n\nimport { Typography } from '~/src/foundation'\n\nimport { isString } from '~/src/utils/typeUtils'\n\nimport {\n  Icon,\n  IconSize,\n} from '~/src/components/Icon'\nimport { LegacyIcon } from '~/src/components/LegacyIcon'\nimport { Text } from '~/src/components/Text'\n\nimport type ToastProps from './Toast.types'\nimport { ToastPreset } from './Toast.types'\nimport { getToastPreset } from './utils'\n\nimport {\n  ActionContent,\n  Close,\n  Content,\n  Element,\n  EllipsisableContent,\n  IconWrapper,\n  NormalContent,\n} from './Toast.styled'\n\nexport const TOAST_TEST_ID = 'bezier-react-toast'\n\nconst ToastElement = (\n  {\n    as,\n    testId = TOAST_TEST_ID,\n    preset = ToastPreset.Default,\n    content = '',\n    appearance,\n    iconName,\n    actionContent,\n    onClick,\n    onDismiss,\n    ...props\n  }: ToastProps,\n  forwardedRef: Ref<any>,\n) => {\n  const ToastContentComponent = useMemo(() => {\n    if (isString(content)) {\n      return content.split('\\n').map((str) => (\n        <div key={uuid()}>\n          <Text\n            typo={Typography.Size14}\n          >\n            { str }\n          </Text>\n        </div>\n      ))\n    }\n    return content\n  }, [content])\n\n  const {\n    appearance: presetAppearance,\n    iconName: presetIconName,\n  } = useMemo(() => getToastPreset(preset), [preset])\n\n  return (\n    <Element\n      ref={forwardedRef}\n      data-testid={testId}\n      {...props}\n    >\n      <IconWrapper\n        appearance={appearance ?? presetAppearance}\n      >\n        <LegacyIcon\n          name={iconName ?? presetIconName}\n          size={IconSize.S}\n        />\n      </IconWrapper>\n      <Content\n        actionContent={actionContent}\n        onClick={onClick}\n      >\n        <EllipsisableContent>\n          <Text\n            typo={Typography.Size14}\n            style={{\n              height: '18px',\n            }}\n          >\n            <NormalContent\n              data-testid={`${TOAST_TEST_ID}-content`}\n            >\n              { ToastContentComponent }\n            </NormalContent>\n            { ' ' }\n            { actionContent && onClick && (\n              <ActionContent onClick={onClick}>\n                { actionContent }\n              </ActionContent>\n            ) }\n          </Text>\n        </EllipsisableContent>\n      </Content>\n      <Close\n        onClick={onDismiss}\n        data-testid={`${TOAST_TEST_ID}-close`}\n      >\n        <Icon\n          source={CancelIcon}\n          size={IconSize.XS}\n        />\n      </Close>\n    </Element>\n  )\n}\n\nexport default forwardRef(ToastElement)\n"],"names":["TOAST_TEST_ID","ToastElement","as","testId","preset","ToastPreset","Default","content","appearance","iconName","actionContent","onClick","onDismiss","props","forwardedRef","ToastContentComponent","useMemo","isString","split","map","str","React","createElement","key","uuid","Text","typo","Typography","Size14","presetAppearance","presetIconName","getToastPreset","Element","Object","assign","ref","IconWrapper","LegacyIcon","name","size","IconSize","S","Content","EllipsisableContent","style","height","NormalContent","ActionContent","Close","Icon","source","CancelIcon","XS","forwardRef"],"mappings":";;;;;;;;;;;;;;;;;AAkCO,MAAMA,aAAa,GAAG,qBAAoB;AAEjD,MAAMC,YAAY,GAAGA,CACnB;EACEC,EAAE;AACFC,EAAAA,MAAM,GAAGH,aAAa;EACtBI,MAAM,GAAGC,uBAAW,CAACC,OAAO;AAC5BC,EAAAA,OAAO,GAAG,EAAE;EACZC,UAAU;EACVC,QAAQ;EACRC,aAAa;EACbC,OAAO;EACPC,SAAS;EACT,GAAGC,KAAAA;AACO,CAAC,EACbC,YAAsB,KACnB;AACH,EAAA,MAAMC,qBAAqB,GAAGC,aAAO,CAAC,MAAM;AAC1C,IAAA,IAAIC,kBAAQ,CAACV,OAAO,CAAC,EAAE;AACrB,MAAA,OAAOA,OAAO,CAACW,KAAK,CAAC,IAAI,CAAC,CAACC,GAAG,CAAEC,GAAG,iBACjCC,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;QAAKC,GAAG,EAAEC,UAAI,EAAC;AAAE,OAAA,eACfH,KAAA,CAAAC,aAAA,CAACG,YAAI,EAAA;QACHC,IAAI,EAAEC,qBAAU,CAACC,MAAAA;OAEfR,EAAAA,GACE,CACH,CACN,CAAC,CAAA;AACJ,KAAA;AACA,IAAA,OAAOb,OAAO,CAAA;AAChB,GAAC,EAAE,CAACA,OAAO,CAAC,CAAC,CAAA;EAEb,MAAM;AACJC,IAAAA,UAAU,EAAEqB,gBAAgB;AAC5BpB,IAAAA,QAAQ,EAAEqB,cAAAA;AACZ,GAAC,GAAGd,aAAO,CAAC,MAAMe,oBAAc,CAAC3B,MAAM,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC,CAAA;EAEnD,oBACEiB,KAAA,CAAAC,aAAA,CAACU,oBAAO,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACNC,IAAAA,GAAG,EAAErB,YAAa;IAClB,aAAaX,EAAAA,MAAAA;AAAO,GAAA,EAChBU,KAAK,CAETQ,eAAAA,KAAA,CAAAC,aAAA,CAACc,wBAAW,EAAA;IACV5B,UAAU,EAAEA,UAAU,IAAIqB,gBAAAA;AAAiB,GAAA,eAE3CR,KAAA,CAAAC,aAAA,CAACe,kBAAU,EAAA;IACTC,IAAI,EAAE7B,QAAQ,IAAIqB,cAAe;IACjCS,IAAI,EAAEC,mBAAQ,CAACC,CAAAA;AAAE,GAClB,CACU,CAAC,eACdpB,KAAA,CAAAC,aAAA,CAACoB,oBAAO,EAAA;AACNhC,IAAAA,aAAa,EAAEA,aAAc;AAC7BC,IAAAA,OAAO,EAAEA,OAAAA;GAETU,eAAAA,KAAA,CAAAC,aAAA,CAACqB,gCAAmB,qBAClBtB,KAAA,CAAAC,aAAA,CAACG,YAAI,EAAA;IACHC,IAAI,EAAEC,qBAAU,CAACC,MAAO;AACxBgB,IAAAA,KAAK,EAAE;AACLC,MAAAA,MAAM,EAAE,MAAA;AACV,KAAA;AAAE,GAAA,eAEFxB,KAAA,CAAAC,aAAA,CAACwB,0BAAa,EAAA;AACZ,IAAA,aAAA,EAAc,GAAE9C,aAAc,CAAA,QAAA,CAAA;AAAU,GAAA,EAEtCe,qBACW,CAAC,EACd,GAAG,EACHL,aAAa,IAAIC,OAAO,iBACxBU,KAAA,CAAAC,aAAA,CAACyB,0BAAa,EAAA;AAACpC,IAAAA,OAAO,EAAEA,OAAAA;GACpBD,EAAAA,aACW,CAEb,CACa,CACd,CAAC,eACVW,KAAA,CAAAC,aAAA,CAAC0B,kBAAK,EAAA;AACJrC,IAAAA,OAAO,EAAEC,SAAU;AACnB,IAAA,aAAA,EAAc,GAAEZ,aAAc,CAAA,MAAA,CAAA;AAAQ,GAAA,eAEtCqB,KAAA,CAAAC,aAAA,CAAC2B,SAAI,EAAA;AACHC,IAAAA,MAAM,EAAEC,sBAAW;IACnBZ,IAAI,EAAEC,mBAAQ,CAACY,EAAAA;GAChB,CACI,CACA,CAAC,CAAA;AAEd,CAAC,CAAA;AAED,qBAAeC,aAAAA,gBAAU,CAACpD,YAAY,CAAC;;;;;"}

package/dist/cjs/components/Toast/ToastProvider.js

@@ -0,0 +1,69 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var ReactDOM = require('react-dom');
+var domUtils = require('../../utils/domUtils.js');
+var Toast_types = require('./Toast.types.js');
+var ToastContainer = require('./ToastContainer.js');
+var ToastContext = require('./ToastContext.js');
+var ToastController = require('./ToastController.js');
+var ToastElement = require('./ToastElement.js');
+var useToastContextValues = require('./useToastContextValues.js');
+var index = require('../../foundation/Transition/index.js');
+var FoundationStyledComponent = require('../../foundation/FoundationStyledComponent.js');
+
+const {
+  Provider
+} = ToastContext.default;
+function ToastProvider({
+  autoDismissTimeout = 3000,
+  children = []
+}) {
+  const toastContextValue = useToastContextValues.default();
+  const {
+    leftToasts,
+    rightToasts,
+    dismiss
+  } = toastContextValue;
+  const createContainer = React.useCallback((placement, toasts) => /*#__PURE__*/React.createElement(ToastContainer.default, {
+    key: placement,
+    placement: placement
+  }, toasts.map(({
+    autoDismiss,
+    content,
+    preset,
+    appearance,
+    iconName,
+    actionContent,
+    onClick,
+    id,
+    onDismiss,
+    zIndex,
+    version
+  }) => /*#__PURE__*/React.createElement(ToastController.default, {
+    key: id,
+    placement: placement,
+    autoDismiss: autoDismiss ?? true,
+    transitionDuration: index.TransitionDuration.M,
+    actionContent: actionContent,
+    onClick: onClick,
+    autoDismissTimeout: autoDismissTimeout,
+    preset: preset,
+    appearance: appearance,
+    content: content,
+    iconName: iconName,
+    component: ToastElement.default,
+    onDismiss: () => dismiss(id, onDismiss),
+    transform: FoundationStyledComponent.css([""]),
+    zIndex: zIndex,
+    version: version
+  }))), [autoDismissTimeout, dismiss]);
+  return /*#__PURE__*/React.createElement(Provider, {
+    value: toastContextValue
+  }, children, /*#__PURE__*/ReactDOM.createPortal([createContainer(Toast_types.ToastPlacement.BottomLeft, leftToasts), createContainer(Toast_types.ToastPlacement.BottomRight, rightToasts)], domUtils.getRootElement()));
+}
+
+exports.default = ToastProvider;
+//# sourceMappingURL=ToastProvider.js.map

package/dist/cjs/components/Toast/ToastProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastProvider.js","sources":["../../../../src/components/Toast/ToastProvider.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\n\nimport { createPortal } from 'react-dom'\n\nimport {\n  TransitionDuration,\n  css,\n} from '~/src/foundation'\n\nimport { getRootElement } from '~/src/utils/domUtils'\n\nimport {\n  ToastPlacement,\n  type ToastProviderProps,\n  type ToastType,\n} from './Toast.types'\nimport ToastContainer from './ToastContainer'\nimport ToastContext from './ToastContext'\nimport ToastController from './ToastController'\nimport ToastElement from './ToastElement'\nimport useToastProviderValues from './useToastContextValues'\n\nconst { Provider } = ToastContext\n\nfunction ToastProvider({\n  autoDismissTimeout = 3000,\n  children = [],\n}: ToastProviderProps) {\n  const toastContextValue = useToastProviderValues()\n  const {\n    leftToasts,\n    rightToasts,\n    dismiss,\n  } = toastContextValue\n\n  const createContainer = useCallback((placement: ToastPlacement, toasts: ToastType[]) => (\n    <ToastContainer\n      key={placement}\n      placement={placement}\n    >\n      { toasts.map(({\n        autoDismiss,\n        content,\n        preset,\n        appearance,\n        iconName,\n        actionContent,\n        onClick,\n        id,\n        onDismiss,\n        zIndex,\n        version,\n      }) => (\n        <ToastController\n          key={id}\n          placement={placement}\n          autoDismiss={autoDismiss ?? true}\n          transitionDuration={TransitionDuration.M}\n          actionContent={actionContent}\n          onClick={onClick}\n          autoDismissTimeout={autoDismissTimeout}\n          preset={preset}\n          appearance={appearance}\n          content={content}\n          iconName={iconName}\n          component={ToastElement}\n          onDismiss={() => dismiss(id, onDismiss)}\n          transform={css``}\n          zIndex={zIndex}\n          version={version}\n        />\n      )) }\n    </ToastContainer>\n  ), [\n    autoDismissTimeout,\n    dismiss,\n  ])\n\n  return (\n    <Provider value={toastContextValue}>\n      { children }\n      { createPortal(\n        [\n          createContainer(ToastPlacement.BottomLeft, leftToasts),\n          createContainer(ToastPlacement.BottomRight, rightToasts),\n        ],\n        getRootElement(),\n      ) }\n    </Provider>\n  )\n}\n\nexport default ToastProvider\n"],"names":["Provider","ToastContext","ToastProvider","autoDismissTimeout","children","toastContextValue","useToastProviderValues","leftToasts","rightToasts","dismiss","createContainer","useCallback","placement","toasts","React","createElement","ToastContainer","key","map","autoDismiss","content","preset","appearance","iconName","actionContent","onClick","id","onDismiss","zIndex","version","ToastController","transitionDuration","TransitionDuration","M","component","ToastElement","transform","css","value","createPortal","ToastPlacement","BottomLeft","BottomRight","getRootElement"],"mappings":";;;;;;;;;;;;;;;;AAsBA,MAAM;AAAEA,EAAAA,QAAAA;AAAS,CAAC,GAAGC,oBAAY,CAAA;AAEjC,SAASC,aAAaA,CAAC;AACrBC,EAAAA,kBAAkB,GAAG,IAAI;AACzBC,EAAAA,QAAQ,GAAG,EAAA;AACO,CAAC,EAAE;AACrB,EAAA,MAAMC,iBAAiB,GAAGC,6BAAsB,EAAE,CAAA;EAClD,MAAM;IACJC,UAAU;IACVC,WAAW;AACXC,IAAAA,OAAAA;AACF,GAAC,GAAGJ,iBAAiB,CAAA;AAErB,EAAA,MAAMK,eAAe,GAAGC,iBAAW,CAAC,CAACC,SAAyB,EAAEC,MAAmB,kBACjFC,KAAA,CAAAC,aAAA,CAACC,sBAAc,EAAA;AACbC,IAAAA,GAAG,EAAEL,SAAU;AACfA,IAAAA,SAAS,EAAEA,SAAAA;AAAU,GAAA,EAEnBC,MAAM,CAACK,GAAG,CAAC,CAAC;IACZC,WAAW;IACXC,OAAO;IACPC,MAAM;IACNC,UAAU;IACVC,QAAQ;IACRC,aAAa;IACbC,OAAO;IACPC,EAAE;IACFC,SAAS;IACTC,MAAM;AACNC,IAAAA,OAAAA;AACF,GAAC,kBACCf,KAAA,CAAAC,aAAA,CAACe,uBAAe,EAAA;AACdb,IAAAA,GAAG,EAAES,EAAG;AACRd,IAAAA,SAAS,EAAEA,SAAU;IACrBO,WAAW,EAAEA,WAAW,IAAI,IAAK;IACjCY,kBAAkB,EAAEC,wBAAkB,CAACC,CAAE;AACzCT,IAAAA,aAAa,EAAEA,aAAc;AAC7BC,IAAAA,OAAO,EAAEA,OAAQ;AACjBtB,IAAAA,kBAAkB,EAAEA,kBAAmB;AACvCkB,IAAAA,MAAM,EAAEA,MAAO;AACfC,IAAAA,UAAU,EAAEA,UAAW;AACvBF,IAAAA,OAAO,EAAEA,OAAQ;AACjBG,IAAAA,QAAQ,EAAEA,QAAS;AACnBW,IAAAA,SAAS,EAAEC,oBAAa;IACxBR,SAAS,EAAEA,MAAMlB,OAAO,CAACiB,EAAE,EAAEC,SAAS,CAAE;IACxCS,SAAS,EAAEC,6BAAG,CAAG,CAAA,EAAA,CAAA,CAAA;AACjBT,IAAAA,MAAM,EAAEA,MAAO;AACfC,IAAAA,OAAO,EAAEA,OAAAA;GACV,CACF,CACa,CACjB,EAAE,CACD1B,kBAAkB,EAClBM,OAAO,CACR,CAAC,CAAA;AAEF,EAAA,oBACEK,KAAA,CAAAC,aAAA,CAACf,QAAQ,EAAA;AAACsC,IAAAA,KAAK,EAAEjC,iBAAAA;AAAkB,GAAA,EAC/BD,QAAQ,eACRmC,qBAAY,CACZ,CACE7B,eAAe,CAAC8B,0BAAc,CAACC,UAAU,EAAElC,UAAU,CAAC,EACtDG,eAAe,CAAC8B,0BAAc,CAACE,WAAW,EAAElC,WAAW,CAAC,CACzD,EACDmC,uBAAc,EAChB,CACQ,CAAC,CAAA;AAEf;;;;"}

package/dist/cjs/components/Toast/ToastService.js

@@ -0,0 +1,78 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var Toast_types = require('./Toast.types.js');
+var v4 = require('../../node_modules/uuid/dist/esm-browser/v4.js');
+
+/* ToastService를 사용하는 이유
+Notion: https://www.notion.so/channelio/Toast-bc13dfbc81314141909250d9cf02c4c7#82b94a73d2f34257ab4799cdeccbc70c
+*/
+
+class ToastService {
+  constructor() {
+    _defineProperty(this, "toasts", []);
+    _defineProperty(this, "getToasts", () => this.toasts);
+    _defineProperty(this, "setToasts", newToasts => {
+      this.toasts = newToasts;
+    });
+    _defineProperty(this, "has", toastId => {
+      if (!this.toasts.length) {
+        return false;
+      }
+      return this.toasts.reduce((flag, toast) => toast.id === toastId ? true : flag, false);
+    });
+    _defineProperty(this, "add", (content, options = Toast_types.defaultOptions) => {
+      const newId = v4.default();
+      if (this.has(newId)) {
+        return '';
+      }
+      const newToast = {
+        id: newId,
+        content,
+        version: 0,
+        ...options
+      };
+      const newToasts = [...this.toasts, newToast];
+      this.setToasts(newToasts);
+      return newId;
+    });
+    _defineProperty(this, "update", (toastId, content, options = {}) => {
+      if (!this.has(toastId)) {
+        return '';
+      }
+      const newToasts = this.toasts.map(toast => {
+        if (toast.id === toastId) {
+          return {
+            ...toast,
+            ...options,
+            version: toast?.version != null ? toast.version + 1 : 0,
+            content
+          };
+        }
+        return toast;
+      });
+      this.setToasts(newToasts);
+      return toastId;
+    });
+    _defineProperty(this, "remove", id => {
+      if (!this.has(id)) {
+        return false;
+      }
+      const newToasts = this.toasts.filter(toast => toast.id !== id);
+      this.setToasts(newToasts);
+      return true; // remove success
+    });
+    _defineProperty(this, "removeAll", () => {
+      if (!this.toasts.length) {
+        return;
+      }
+      this.setToasts([]);
+    });
+  }
+}
+var ToastService$1 = ToastService;
+
+exports.default = ToastService$1;
+//# sourceMappingURL=ToastService.js.map

package/dist/cjs/components/Toast/ToastService.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastService.js","sources":["../../../../src/components/Toast/ToastService.ts"],"sourcesContent":["import { v4 as uuid } from 'uuid'\n\nimport {\n  type ToastContent,\n  type ToastId,\n  type ToastOptions,\n  type ToastType,\n  defaultOptions,\n} from './Toast.types'\n\n/* ToastService를 사용하는 이유\nNotion: https://www.notion.so/channelio/Toast-bc13dfbc81314141909250d9cf02c4c7#82b94a73d2f34257ab4799cdeccbc70c\n*/\n\nclass ToastService {\n  toasts: ToastType[] = []\n\n  getToasts = () => this.toasts\n\n  setToasts = (newToasts: ToastType[]) => {\n    this.toasts = newToasts\n  }\n\n  has = (toastId: ToastId) => {\n    if (!this.toasts.length) {\n      return false\n    }\n    return this.toasts.reduce((flag, toast) => (toast.id === toastId ? true : flag), false)\n  }\n\n  add = (content: ToastContent, options: ToastOptions = defaultOptions) => {\n    const newId: ToastId = uuid()\n\n    if (this.has(newId)) {\n      return ''\n    }\n\n    const newToast: ToastType = {\n      id: newId,\n      content,\n      version: 0,\n      ...options,\n    }\n    const newToasts: ToastType[] = [...this.toasts, newToast]\n    this.setToasts(newToasts)\n    return newId\n  }\n\n  update = (toastId: ToastId, content: ToastContent, options: ToastOptions = {}) => {\n    if (!this.has(toastId)) {\n      return ''\n    }\n\n    const newToasts: ToastType[] = this.toasts.map((toast) => {\n      if (toast.id === toastId) {\n        return {\n          ...toast,\n          ...options,\n          version: toast?.version != null ? toast.version + 1 : 0,\n          content,\n        }\n      }\n      return toast\n    })\n    this.setToasts(newToasts)\n    return toastId\n  }\n\n  remove = (id: ToastId): boolean => {\n    if (!this.has(id)) {\n      return false\n    }\n    const newToasts: ToastType[] = this.toasts.filter((toast) => toast.id !== id)\n    this.setToasts(newToasts)\n    return true // remove success\n  }\n\n  removeAll = () => {\n    if (!this.toasts.length) {\n      return\n    }\n\n    this.setToasts([])\n  }\n}\n\nexport default ToastService\n"],"names":["ToastService","constructor","_defineProperty","toasts","newToasts","toastId","length","reduce","flag","toast","id","content","options","defaultOptions","newId","uuid","has","newToast","version","setToasts","map","filter"],"mappings":"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"}

package/dist/cjs/components/Toast/useToast.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var ToastContext = require('./ToastContext.js');
+
+function useToast() {
+  const context = React.useContext(ToastContext.default);
+  if (!context) {
+    throw Error('ToastProvider가 필요합니다.');
+  }
+  return {
+    addToast: context.add,
+    updateToast: context.update,
+    removeToast: context.remove,
+    removeAllToasts: context.removeAll,
+    leftToasts: context.leftToasts,
+    rightToasts: context.rightToasts
+  };
+}
+
+exports.default = useToast;
+//# sourceMappingURL=useToast.js.map

package/dist/cjs/components/Toast/useToast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToast.js","sources":["../../../../src/components/Toast/useToast.ts"],"sourcesContent":["import { useContext } from 'react'\n\nimport ToastContext from './ToastContext'\n\nexport default function useToast() {\n  const context = useContext(ToastContext)\n\n  if (!context) {\n    throw Error('ToastProvider가 필요합니다.')\n  }\n\n  return {\n    addToast: context.add,\n    updateToast: context.update,\n    removeToast: context.remove,\n    removeAllToasts: context.removeAll,\n    leftToasts: context.leftToasts,\n    rightToasts: context.rightToasts,\n  }\n}\n"],"names":["useToast","context","useContext","ToastContext","Error","addToast","add","updateToast","update","removeToast","remove","removeAllToasts","removeAll","leftToasts","rightToasts"],"mappings":";;;;;;;AAIe,SAASA,QAAQA,GAAG;AACjC,EAAA,MAAMC,OAAO,GAAGC,gBAAU,CAACC,oBAAY,CAAC,CAAA;EAExC,IAAI,CAACF,OAAO,EAAE;IACZ,MAAMG,KAAK,CAAC,uBAAuB,CAAC,CAAA;AACtC,GAAA;EAEA,OAAO;IACLC,QAAQ,EAAEJ,OAAO,CAACK,GAAG;IACrBC,WAAW,EAAEN,OAAO,CAACO,MAAM;IAC3BC,WAAW,EAAER,OAAO,CAACS,MAAM;IAC3BC,eAAe,EAAEV,OAAO,CAACW,SAAS;IAClCC,UAAU,EAAEZ,OAAO,CAACY,UAAU;IAC9BC,WAAW,EAAEb,OAAO,CAACa,WAAAA;GACtB,CAAA;AACH;;;;"}

package/dist/cjs/components/Toast/useToastContextValues.js

@@ -0,0 +1,76 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var functionUtils = require('../../utils/functionUtils.js');
+var Toast_types = require('./Toast.types.js');
+var ToastService = require('./ToastService.js');
+
+/**
+ * NOTE(@sol): The ToastService is enough to fulfill the responsibility of toast.
+ * However, wrapping this for ToastProvider to create new features does not need to be done in bezier-react.
+ * It would have been better to implement this function in service needed it of use.
+ * Therefore, it would be good to pay attention to this part in a future update.
+ */
+/**
+ * @deprecated Implement this in your service with ToastProvider, not here.
+ */
+function useToastContextValues() {
+  const leftToastService = React.useMemo(() => new ToastService.default(), []);
+  const rightToastService = React.useMemo(() => new ToastService.default(), []);
+  const [leftToasts, setLeftToasts] = React.useState([]);
+  const [rightToasts, setRightToasts] = React.useState([]);
+  const add = React.useCallback((content, options = Toast_types.defaultOptions) => {
+    let result = '';
+    if (options.rightSide) {
+      result = rightToastService.add(content, options);
+      setRightToasts(rightToastService.getToasts());
+    } else {
+      result = leftToastService.add(content, options);
+      setLeftToasts(leftToastService.getToasts());
+    }
+    return result;
+  }, [leftToastService, rightToastService]);
+  const update = React.useCallback((toastId, content, options = Toast_types.defaultOptions) => {
+    let result = '';
+    if (options.rightSide) {
+      result = rightToastService.update(toastId, content, options);
+      setRightToasts(rightToastService.getToasts());
+    } else {
+      result = leftToastService.update(toastId, content, options);
+      setLeftToasts(leftToastService.getToasts());
+    }
+    return result;
+  }, [leftToastService, rightToastService]);
+  const remove = React.useCallback(toastId => {
+    if (leftToastService.remove(toastId)) {
+      setLeftToasts(leftToastService.getToasts());
+    }
+    if (rightToastService.remove(toastId)) {
+      setRightToasts(rightToastService.getToasts());
+    }
+  }, [leftToastService, rightToastService]);
+  const removeAll = React.useCallback(() => {
+    leftToastService.removeAll();
+    rightToastService.removeAll();
+    setLeftToasts(leftToastService.getToasts());
+    setRightToasts(rightToastService.getToasts());
+  }, [leftToastService, rightToastService]);
+  const dismiss = React.useCallback((toastId, callback = functionUtils.noop) => {
+    callback(toastId);
+    remove(toastId);
+  }, [remove]);
+  return React.useMemo(() => ({
+    add,
+    update,
+    remove,
+    removeAll,
+    leftToasts,
+    rightToasts,
+    dismiss
+  }), [add, update, remove, removeAll, leftToasts, rightToasts, dismiss]);
+}
+
+exports.default = useToastContextValues;
+//# sourceMappingURL=useToastContextValues.js.map

package/dist/cjs/components/Toast/useToastContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToastContextValues.js","sources":["../../../../src/components/Toast/useToastContextValues.ts"],"sourcesContent":["import {\n  useCallback,\n  useMemo,\n  useState,\n} from 'react'\n\nimport { noop } from '~/src/utils/functionUtils'\n\nimport {\n  type OnDismissCallback,\n  type ToastContent,\n  type ToastContextType,\n  type ToastId,\n  type ToastOptions,\n  type ToastType,\n  defaultOptions,\n} from './Toast.types'\nimport ToastService from './ToastService'\n\ninterface UseToastContextValuesReturns extends ToastContextType {\n  leftToasts: ToastType[]\n  rightToasts: ToastType[]\n  dismiss: (id: ToastId, callback?: OnDismissCallback) => void\n}\n\n/**\n * NOTE(@sol): The ToastService is enough to fulfill the responsibility of toast.\n * However, wrapping this for ToastProvider to create new features does not need to be done in bezier-react.\n * It would have been better to implement this function in service needed it of use.\n * Therefore, it would be good to pay attention to this part in a future update.\n */\n/**\n * @deprecated Implement this in your service with ToastProvider, not here.\n */\nfunction useToastContextValues(): UseToastContextValuesReturns {\n  const leftToastService = useMemo(() => new ToastService(), [])\n  const rightToastService = useMemo(() => new ToastService(), [])\n  const [leftToasts, setLeftToasts] = useState<ToastType[]>([])\n  const [rightToasts, setRightToasts] = useState<ToastType[]>([])\n\n  const add = useCallback((content: ToastContent, options: ToastOptions = defaultOptions) => {\n    let result = ''\n    if (options.rightSide) {\n      result = rightToastService.add(content, options)\n      setRightToasts(rightToastService.getToasts())\n    } else {\n      result = leftToastService.add(content, options)\n      setLeftToasts(leftToastService.getToasts())\n    }\n    return result\n  }, [\n    leftToastService,\n    rightToastService,\n  ])\n\n  const update = useCallback((toastId: ToastId, content: ToastContent, options: ToastOptions = defaultOptions) => {\n    let result = ''\n    if (options.rightSide) {\n      result = rightToastService.update(toastId, content, options)\n      setRightToasts(rightToastService.getToasts())\n    } else {\n      result = leftToastService.update(toastId, content, options)\n      setLeftToasts(leftToastService.getToasts())\n    }\n    return result\n  }, [\n    leftToastService,\n    rightToastService,\n  ])\n\n  const remove = useCallback((toastId: ToastId) => {\n    if (leftToastService.remove(toastId)) {\n      setLeftToasts(leftToastService.getToasts())\n    }\n    if (rightToastService.remove(toastId)) {\n      setRightToasts(rightToastService.getToasts())\n    }\n  }, [\n    leftToastService,\n    rightToastService,\n  ])\n\n  const removeAll = useCallback(() => {\n    leftToastService.removeAll()\n    rightToastService.removeAll()\n    setLeftToasts(leftToastService.getToasts())\n    setRightToasts(rightToastService.getToasts())\n  }, [\n    leftToastService,\n    rightToastService,\n  ])\n\n  const dismiss = useCallback((toastId: ToastId, callback: OnDismissCallback = noop) => {\n    callback(toastId)\n    remove(toastId)\n  }, [remove])\n\n  return useMemo<UseToastContextValuesReturns>(() => ({\n    add,\n    update,\n    remove,\n    removeAll,\n    leftToasts,\n    rightToasts,\n    dismiss,\n  }), [\n    add,\n    update,\n    remove,\n    removeAll,\n    leftToasts,\n    rightToasts,\n    dismiss,\n  ])\n}\n\nexport default useToastContextValues\n"],"names":["useToastContextValues","leftToastService","useMemo","ToastService","rightToastService","leftToasts","setLeftToasts","useState","rightToasts","setRightToasts","add","useCallback","content","options","defaultOptions","result","rightSide","getToasts","update","toastId","remove","removeAll","dismiss","callback","noop"],"mappings":"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"}

package/dist/cjs/components/Toast/utils.js

@@ -0,0 +1,80 @@
+'use strict';
+
+var Toast_types = require('./Toast.types.js');
+var FoundationStyledComponent = require('../../foundation/FoundationStyledComponent.js');
+
+/**
+ * @deprecated
+ * FIXME: Styling dependent on specific applications.
+ */
+const GNB_WIDTH = 68;
+function getIconColor(appearance) {
+  switch (appearance) {
+    case Toast_types.ToastAppearance.Success:
+      return Toast_types.ToastIconColor.Success;
+    case Toast_types.ToastAppearance.Warning:
+      return Toast_types.ToastIconColor.Warning;
+    case Toast_types.ToastAppearance.Error:
+      return Toast_types.ToastIconColor.Error;
+    case Toast_types.ToastAppearance.Info:
+    default:
+      return Toast_types.ToastIconColor.Info;
+  }
+}
+function getPlacement(placement) {
+  switch (placement) {
+    case Toast_types.ToastPlacement.BottomRight:
+      return FoundationStyledComponent.css(["right:0;bottom:0;"]);
+    case Toast_types.ToastPlacement.BottomLeft:
+    default:
+      return FoundationStyledComponent.css(["bottom:0;left:", "px;"], GNB_WIDTH);
+  }
+}
+const showedToastTranslateXStyle = /*#__PURE__*/FoundationStyledComponent.css([" transform:translateX(0);"]);
+const initPosition = placement => {
+  switch (placement) {
+    case Toast_types.ToastPlacement.BottomLeft:
+      return FoundationStyledComponent.css([" transform:translateX(-120%);"]);
+    case Toast_types.ToastPlacement.BottomRight:
+      return FoundationStyledComponent.css([" transform:translateX(120%);"]);
+    default:
+      return showedToastTranslateXStyle;
+  }
+};
+const getToastPreset = preset => {
+  switch (preset) {
+    case Toast_types.ToastPreset.Success:
+      return {
+        iconName: 'check-circle-filled',
+        appearance: Toast_types.ToastAppearance.Success
+      };
+    case Toast_types.ToastPreset.Error:
+      return {
+        iconName: 'error-triangle-filled',
+        appearance: Toast_types.ToastAppearance.Error
+      };
+    case Toast_types.ToastPreset.Offline:
+      return {
+        iconName: 'wifi-off',
+        appearance: Toast_types.ToastAppearance.Warning
+      };
+    case Toast_types.ToastPreset.Online:
+      return {
+        iconName: 'wifi',
+        appearance: Toast_types.ToastAppearance.Success
+      };
+    case Toast_types.ToastPreset.Default:
+    default:
+      return {
+        iconName: 'info-filled',
+        appearance: Toast_types.ToastAppearance.Info
+      };
+  }
+};
+
+exports.getIconColor = getIconColor;
+exports.getPlacement = getPlacement;
+exports.getToastPreset = getToastPreset;
+exports.initPosition = initPosition;
+exports.showedToastTranslateXStyle = showedToastTranslateXStyle;
+//# sourceMappingURL=utils.js.map

package/dist/cjs/components/Toast/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../src/components/Toast/utils.ts"],"sourcesContent":["import { css } from '~/src/foundation'\n\nimport {\n  ToastAppearance,\n  ToastIconColor,\n  ToastPlacement,\n  ToastPreset,\n  type ToastPresetType,\n} from './Toast.types'\n\n/**\n * @deprecated\n * FIXME: Styling dependent on specific applications.\n */\nconst GNB_WIDTH = 68\n\nfunction getIconColor(appearance: ToastAppearance): ToastIconColor {\n  switch (appearance) {\n    case ToastAppearance.Success:\n      return ToastIconColor.Success\n    case ToastAppearance.Warning:\n      return ToastIconColor.Warning\n    case ToastAppearance.Error:\n      return ToastIconColor.Error\n    case ToastAppearance.Info:\n    default:\n      return ToastIconColor.Info\n  }\n}\n\nfunction getPlacement(placement: ToastPlacement) {\n  switch (placement) {\n    case ToastPlacement.BottomRight:\n      return css`\n          right: 0;\n          bottom: 0;\n        `\n    case ToastPlacement.BottomLeft:\n    default:\n      return css`\n        bottom: 0;\n        left: ${GNB_WIDTH}px;\n      `\n  }\n}\n\nconst showedToastTranslateXStyle = css` transform: translateX(0); `\n\nconst initPosition = (placement?: ToastPlacement) => {\n  switch (placement) {\n    case ToastPlacement.BottomLeft:\n      return css` transform: translateX(-120%); `\n    case ToastPlacement.BottomRight:\n      return css` transform: translateX(120%); `\n    default:\n      return showedToastTranslateXStyle\n  }\n}\n\nconst getToastPreset = (preset: ToastPreset): ToastPresetType => {\n  switch (preset) {\n    case ToastPreset.Success:\n      return {\n        iconName: 'check-circle-filled',\n        appearance: ToastAppearance.Success,\n      }\n    case ToastPreset.Error:\n      return {\n        iconName: 'error-triangle-filled',\n        appearance: ToastAppearance.Error,\n      }\n    case ToastPreset.Offline:\n      return {\n        iconName: 'wifi-off',\n        appearance: ToastAppearance.Warning,\n      }\n    case ToastPreset.Online:\n      return {\n        iconName: 'wifi',\n        appearance: ToastAppearance.Success,\n      }\n    case ToastPreset.Default:\n    default:\n      return {\n        iconName: 'info-filled',\n        appearance: ToastAppearance.Info,\n      }\n  }\n}\n\nexport {\n  getIconColor,\n  getPlacement,\n  initPosition,\n  showedToastTranslateXStyle,\n  getToastPreset,\n}\n"],"names":["GNB_WIDTH","getIconColor","appearance","ToastAppearance","Success","ToastIconColor","Warning","Error","Info","getPlacement","placement","ToastPlacement","BottomRight","css","BottomLeft","showedToastTranslateXStyle","initPosition","getToastPreset","preset","ToastPreset","iconName","Offline","Online","Default"],"mappings":";;;;;AAUA;AACA;AACA;AACA;AACA,MAAMA,SAAS,GAAG,EAAE,CAAA;AAEpB,SAASC,YAAYA,CAACC,UAA2B,EAAkB;AACjE,EAAA,QAAQA,UAAU;IAChB,KAAKC,2BAAe,CAACC,OAAO;MAC1B,OAAOC,0BAAc,CAACD,OAAO,CAAA;IAC/B,KAAKD,2BAAe,CAACG,OAAO;MAC1B,OAAOD,0BAAc,CAACC,OAAO,CAAA;IAC/B,KAAKH,2BAAe,CAACI,KAAK;MACxB,OAAOF,0BAAc,CAACE,KAAK,CAAA;IAC7B,KAAKJ,2BAAe,CAACK,IAAI,CAAA;AACzB,IAAA;MACE,OAAOH,0BAAc,CAACG,IAAI,CAAA;AAC9B,GAAA;AACF,CAAA;AAEA,SAASC,YAAYA,CAACC,SAAyB,EAAE;AAC/C,EAAA,QAAQA,SAAS;IACf,KAAKC,0BAAc,CAACC,WAAW;AAC7B,MAAA,OAAOC,6BAAG,CAAA,CAAA,mBAAA,CAAA,CAAA,CAAA;IAIZ,KAAKF,0BAAc,CAACG,UAAU,CAAA;AAC9B,IAAA;MACE,OAAOD,6BAAG,4BAEAb,SAAS,CAAA,CAAA;AAEvB,GAAA;AACF,CAAA;AAEMe,MAAAA,0BAA0B,gBAAGF,6BAAG,CAA6B,CAAA,2BAAA,CAAA,EAAA;AAE7DG,MAAAA,YAAY,GAAIN,SAA0B,IAAK;AACnD,EAAA,QAAQA,SAAS;IACf,KAAKC,0BAAc,CAACG,UAAU;AAC5B,MAAA,OAAOD,6BAAG,CAAA,CAAA,+BAAA,CAAA,CAAA,CAAA;IACZ,KAAKF,0BAAc,CAACC,WAAW;AAC7B,MAAA,OAAOC,6BAAG,CAAA,CAAA,8BAAA,CAAA,CAAA,CAAA;AACZ,IAAA;AACE,MAAA,OAAOE,0BAA0B,CAAA;AACrC,GAAA;AACF,EAAC;AAEKE,MAAAA,cAAc,GAAIC,MAAmB,IAAsB;AAC/D,EAAA,QAAQA,MAAM;IACZ,KAAKC,uBAAW,CAACf,OAAO;MACtB,OAAO;AACLgB,QAAAA,QAAQ,EAAE,qBAAqB;QAC/BlB,UAAU,EAAEC,2BAAe,CAACC,OAAAA;OAC7B,CAAA;IACH,KAAKe,uBAAW,CAACZ,KAAK;MACpB,OAAO;AACLa,QAAAA,QAAQ,EAAE,uBAAuB;QACjClB,UAAU,EAAEC,2BAAe,CAACI,KAAAA;OAC7B,CAAA;IACH,KAAKY,uBAAW,CAACE,OAAO;MACtB,OAAO;AACLD,QAAAA,QAAQ,EAAE,UAAU;QACpBlB,UAAU,EAAEC,2BAAe,CAACG,OAAAA;OAC7B,CAAA;IACH,KAAKa,uBAAW,CAACG,MAAM;MACrB,OAAO;AACLF,QAAAA,QAAQ,EAAE,MAAM;QAChBlB,UAAU,EAAEC,2BAAe,CAACC,OAAAA;OAC7B,CAAA;IACH,KAAKe,uBAAW,CAACI,OAAO,CAAA;AACxB,IAAA;MACE,OAAO;AACLH,QAAAA,QAAQ,EAAE,aAAa;QACvBlB,UAAU,EAAEC,2BAAe,CAACK,IAAAA;OAC7B,CAAA;AACL,GAAA;AACF;;;;;;;;"}

package/dist/cjs/components/Tooltip/Tooltip.js

@@ -0,0 +1,104 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var domUtils = require('../../utils/domUtils.js');
+var Tooltip_types = require('./Tooltip.types.js');
+var TooltipContent = require('./TooltipContent.js');
+var Tooltip_styled = require('./Tooltip.styled.js');
+
+const TOOLTIP_TEST_ID = 'bezier-react-tooltip';
+const TOOLTIP_CONTENT_TEST_ID = 'bezier-react-tooltip-content';
+function Tooltip({
+  as,
+  testId = TOOLTIP_TEST_ID,
+  contentTestId = TOOLTIP_CONTENT_TEST_ID,
+  className,
+  contentClassName,
+  contentInterpolation,
+  contentWrapperStyle,
+  content = null,
+  lazy = false,
+  // optional prop 에서 추후 default behavior 를 lazy 하게 바꿀 예정
+  placement = Tooltip_types.TooltipPosition.BottomCenter,
+  disabled = false,
+  offset = 4,
+  keepInContainer = false,
+  allowHover = false,
+  delayShow = 0,
+  delayHide = 0,
+  children,
+  ...otherProps
+}, forwardedRef) {
+  const [show, setShow] = React.useState(false);
+  const [didMount, setDidMount] = React.useState(show);
+  const tooltipContainerRef = React.useRef(null);
+  const timerRef = React.useRef();
+  React.useEffect(function hideTooltipContentWhenDisabled() {
+    if (disabled) {
+      setShow(false);
+    }
+  }, [disabled]);
+  React.useEffect(function updateDidMount() {
+    setDidMount(prev => prev || show);
+  }, [show]);
+  const handleMouseEnter = React.useCallback(() => {
+    if (disabled) {
+      return;
+    }
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+    timerRef.current = domUtils.window.setTimeout(() => {
+      setShow(true);
+    }, delayShow);
+  }, [delayShow, disabled]);
+  const handleMouseLeave = React.useCallback(() => {
+    if (disabled) {
+      return;
+    }
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+    timerRef.current = domUtils.window.setTimeout(() => {
+      setShow(false);
+    }, delayHide);
+  }, [delayHide, disabled]);
+  const TooltipComponent = React.useMemo(() => {
+    if (!lazy || didMount) {
+      return /*#__PURE__*/React.createElement(TooltipContent.default, {
+        as: as,
+        content: content,
+        contentClassName: contentClassName,
+        contentInterpolation: contentInterpolation,
+        contentWrapperStyle: contentWrapperStyle,
+        disabled: disabled,
+        placement: placement,
+        offset: offset,
+        allowHover: allowHover,
+        keepInContainer: keepInContainer,
+        tooltipContainer: tooltipContainerRef.current,
+        forwardedRef: forwardedRef,
+        testId: contentTestId
+      });
+    }
+    return null;
+  }, [lazy, didMount, as, content, contentClassName, contentInterpolation, contentWrapperStyle, disabled, placement, offset, allowHover, keepInContainer, forwardedRef, contentTestId]);
+  if (!children) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Tooltip_styled.Container, Object.assign({
+    ref: tooltipContainerRef,
+    "data-testid": testId,
+    className: className,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  }, otherProps), children, show && TooltipComponent);
+}
+var Tooltip$1 = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(Tooltip));
+
+exports.TOOLTIP_CONTENT_TEST_ID = TOOLTIP_CONTENT_TEST_ID;
+exports.TOOLTIP_TEST_ID = TOOLTIP_TEST_ID;
+exports.default = Tooltip$1;
+//# sourceMappingURL=Tooltip.js.map