@e1011/es-kit 1.1.24 → 1.1.26

package/dist/ui/src/core/ui/components/molecules/popup/Popup.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popup.js","sources":["../../../../../../../../src/core/ui/components/molecules/popup/Popup.tsx"],"sourcesContent":["import {\n  cloneElement, memo, PropsWithChildren, FC, ReactNode, CSSProperties, useMemo, ReactElement,\n} from 'react'\n\nimport { Popover as PopoverLite } from '../popover/PopoverLite'\nimport { HeadlineTertiary as H3 } from '../../atoms/text'\nimport { IconBase } from '../../icon'\nimport { DividerLine } from '../../dividers'\nimport { LayoutBox } from '../../container'\nimport { closeIconJSX } from '../../atoms/icons'\n\nimport classes from './popup.module.scss'\nimport classesOverlay from './popup.overlay.module.scss'\nimport { PopupAnimateVariant, PopupProps } from './popup.types'\n\n\n/**\n * Styles for the Popup component.\n *\n * @typedef {Object} PopupStyles\n * @property {Object} inner - The inner styles for the popup.\n * @property {CSSProperties} content - The styles for the popup content.\n */\n\nconst styles: {\n  popup: {\n    inner: Record<string, Record<string, string>>\n  }\n\n} = {\n  popup: {\n    inner: {\n      [PopupAnimateVariant.SLIDE_DOWN]: { '--slideYFrom': '-48px' },\n      [PopupAnimateVariant.SLIDE_UP]: { '--slideYFrom': '48px' },\n      [PopupAnimateVariant.SLIDE_RIGHT]: { '--slideXFrom': '-64px' },\n      [PopupAnimateVariant.SLIDE_LEFT]: { '--slideXFrom': '64px' },\n    },\n  },\n}\n\n/**\n * Popup component.\n *\n * @type {React.FC<PopupProps>}\n * @returns {React.ReactElement} The Popup.\n */\nexport const Popup: FC<PopupProps> = memo<PopupProps>(({\n  title = 'Popup\\'s title',\n  children,\n  components = {},\n  isModal = true,\n  hideOnClickOutside = false,\n  hideOnContentClick = false,\n  animateVariant = PopupAnimateVariant.SLIDE_UP,\n  hasHeader = true,\n  hasCloseIcon = true,\n  width,\n  height,\n  style,\n  ...props\n}: PopupProps) => {\n  /**\n   * The ContentComponent to render.\n   *\n   * @type {ComponentType}\n   */\n  const ContentComponent = components?.ContentComponent\n\n  /**\n   * The popup styles.\n   *\n   * @type {CSSProperties}\n   */\n  const styles = useMemo(() => ({\n    ...(width ? { '--popup-width': width } : {}),\n    ...(height ? { '--popup-height': height } : {}),\n    ...style,\n  }), [height, style, width])\n\n  return (\n    <PopoverLite\n      clickable\n      isPopup\n      isModal={isModal}\n      hideOnContentClick={hideOnContentClick}\n      hideOnClickOutside={hideOnClickOutside}\n      modalOverlayClassName={classesOverlay['popup-modal-overlay']}\n      {...props}\n    >\n      <p>{/* Placeholder element to avoid error with no children */}</p>\n      <PopupContent\n        title={title}\n        hasHeader={hasHeader}\n        hasCloseIcon={hasCloseIcon}\n        animateVariant={animateVariant}\n        popupStyle={styles}\n      >\n        {/* Render children if ContentComponent is not provided */}\n        {(!ContentComponent && children) && children}\n        {/* Render ContentComponent if children are not provided */}\n        {(!children && ContentComponent) && <ContentComponent />}\n      </PopupContent>\n    </PopoverLite>\n  )\n})\n\n/**\n * The display name of the Popup component.\n *\n * @type {string}\n */\nPopup.displayName = 'Popup'\n\ntype PopupContentProps = PropsWithChildren<unknown> & {\n  title?: string\n  forwardedRef?: ForwardedRef['forwardedRef']\n  animateVariant?: PopupProps['animateVariant']\n  popupStyle?: CSSProperties\n  hasHeader?: boolean\n  hasCloseIcon?: boolean\n  closeIconURL?: string\n  hide?: () => void\n}\n\n/**\n * The PopupContent component.\n *\n * @param {PopupContentProps} props The props for the PopupContent component.\n * @returns {React.ReactElement} The PopupContent.\n */\nconst PopupContent = memo(({\n  title,\n  forwardedRef,\n  hide,\n  children,\n  animateVariant,\n  popupStyle,\n  hasHeader = true,\n  hasCloseIcon = true,\n  closeIconURL,\n  ...props\n}: PopupContentProps) => {\n  /**\n   * The ContentRemapped element.\n   *\n   * @type {React.ReactElement[] | React.ReactElement}\n   */\n  const ContentRemapped = children && Array.isArray(children)\n    ? children.filter((child: ReactNode | ReactElement) => !!child)\n      .map((child: ReactElement, index: number) => cloneElement(\n      // eslint-disable-next-line react/no-array-index-key\n        child, { key: index, ...child.props, hide, ...props },\n      ))\n    : <div>Pseudo Content</div>\n\n  return (\n    <div className={`${classes['popup-container']}`} ref={forwardedRef} style={popupStyle}>\n      <LayoutBox\n        className={`${classes['popup-container-inner']}`}\n        style={animateVariant ? styles.popup.inner[animateVariant] : null}\n      >\n        {hasHeader && (\n          <>\n            <LayoutBox justify='space-between' align='start' width='100%' padding='20px 20px 16px 20px'>\n              <H3>{title}</H3>\n              {hasCloseIcon && (\n                <div\n                  onClick={hide}\n                  onKeyDown={hide}\n                  role='button'\n                  tabIndex={-1}\n                  className={classes['close-button']}\n                >\n                  {closeIconURL && <IconBase iconUrl={closeIconURL} />}\n                  {!closeIconURL && (\n                    <IconBase>\n                      {closeIconJSX}\n                    </IconBase>\n                  )}\n                </div>\n              )}\n            </LayoutBox>\n            <DividerLine length='100%' />\n          </>\n        )}\n        <div className={classes['popup-container-inner-div']}>\n          {ContentRemapped && ContentRemapped}\n        </div>\n      </LayoutBox>\n    </div>\n  )\n})\n\n/**\n * The display name of the PopupContent component.\n *\n * @type {string}\n */\nPopupContent.displayName = 'PopupContent'\n"],"names":["styles","popup","inner","PopupAnimateVariant","SLIDE_DOWN","SLIDE_UP","SLIDE_RIGHT","SLIDE_LEFT","Popup","memo","_ref","title","children","components","isModal","hideOnClickOutside","hideOnContentClick","animateVariant","hasHeader","hasCloseIcon","width","height","style","props","ContentComponent","useMemo","React","createElement","PopoverLite","Popover","_extends","clickable","isPopup","modalOverlayClassName","classesOverlay","default","PopupContent","popupStyle","displayName","_ref2","forwardedRef","hide","closeIconURL","ContentRemapped","Array","isArray","filter","child","map","index","cloneElement","key","className","classes","ref","LayoutBox","Fragment","justify","align","padding","H3","onClick","onKeyDown","role","tabIndex","IconBase","iconUrl","closeIconJSX","DividerLine","length"],"mappings":"6cAwBA,MAAMA,EAKF,CACFC,MAAO,CACLC,MAAO,CACL,CAACC,EAAAA,oBAAoBC,YAAa,CAAE,eAAgB,SACpD,CAACD,EAAAA,oBAAoBE,UAAW,CAAE,eAAgB,QAClD,CAACF,EAAAA,oBAAoBG,aAAc,CAAE,eAAgB,SACrD,CAACH,EAAAA,oBAAoBI,YAAa,CAAE,eAAgB,WAW7CC,EAAwBC,EAAIA,MAAaC,IAcpC,IAdqCC,MACrDA,EAAQ,gBAAgBC,SACxBA,EAAQC,WACRA,EAAa,CAAE,EAAAC,QACfA,GAAU,EAAIC,mBACdA,GAAqB,EAAKC,mBAC1BA,GAAqB,EAAKC,eAC1BA,EAAiBd,EAAmBA,oBAACE,SAAQa,UAC7CA,GAAY,EAAIC,aAChBA,GAAe,EAAIC,MACnBA,EAAKC,OACLA,EAAMC,MACNA,KACGC,GACQb,EAMX,MAAMc,EAAmBX,GAAYW,iBAO/BxB,EAASyB,EAAAA,SAAQ,KAAO,IACxBL,EAAQ,CAAE,gBAAiBA,GAAU,CAAE,KACvCC,EAAS,CAAE,iBAAkBA,GAAW,CAAE,KAC3CC,KACD,CAACD,EAAQC,EAAOF,IAEpB,OACEM,MAAAC,cAACC,EAAWC,QAAAC,UAAA,CACVC,WAAS,EACTC,SAAO,EACPlB,QAASA,EACTE,mBAAoBA,EACpBD,mBAAoBA,EACpBkB,sBAAuBC,EAAcC,QAAC,wBAClCZ,GAEJG,MAAAC,cAAA,IAAA,MACAD,MAAAC,cAACS,EAAY,CACXzB,MAAOA,EACPO,UAAWA,EACXC,aAAcA,EACdF,eAAgBA,EAChBoB,WAAYrC,IAGTwB,GAAoBZ,GAAaA,GAEjCA,GAAYY,GAAqBE,MAAAC,cAACH,EAAkB,OAE7C,IASlBhB,EAAM8B,YAAc,QAmBpB,MAAMF,EAAe3B,EAAIA,MAAC8B,IAWD,IAXE5B,MACzBA,EAAK6B,aACLA,EAAYC,KACZA,EAAI7B,SACJA,EAAQK,eACRA,EAAcoB,WACdA,EAAUnB,UACVA,GAAY,EAAIC,aAChBA,GAAe,EAAIuB,aACnBA,KACGnB,GACegB,EAMlB,MAAMI,EAAkB/B,GAAYgC,MAAMC,QAAQjC,GAC9CA,EAASkC,QAAQC,KAAsCA,IACtDC,KAAI,CAACD,EAAqBE,IAAkBC,EAAYA,aAEvDH,EAAO,CAAEI,IAAKF,KAAUF,EAAMxB,MAAOkB,UAASlB,MAEhDG,MAAAC,cAAA,MAAA,KAAK,kBAET,OACED,MAAAC,cAAA,MAAA,CAAKyB,UAAW,GAAGC,UAAQ,qBAAsBC,IAAKd,EAAclB,MAAOe,GACzEX,MAAAC,cAAC4B,YAAS,CACRH,UAAW,GAAGC,UAAQ,2BACtB/B,MAAOL,EAAiBjB,EAAOC,MAAMC,MAAMe,GAAkB,MAE5DC,GACCQ,MAAAC,cAAAD,MAAA8B,SACE9B,KAAAA,MAAAC,cAAC4B,YAAS,CAACE,QAAQ,gBAAgBC,MAAM,QAAQtC,MAAM,OAAOuC,QAAQ,uBACpEjC,MAAAC,cAACiC,EAAAA,iBAAE,KAAEjD,GACJQ,GACCO,MAAAC,cAAA,MAAA,CACEkC,QAASpB,EACTqB,UAAWrB,EACXsB,KAAK,SACLC,UAAW,EACXZ,UAAWC,EAAOlB,QAAC,iBAElBO,GAAgBhB,MAAAC,cAACsC,WAAQ,CAACC,QAASxB,KAClCA,GACAhB,MAAAC,cAACsC,EAAQA,cACNE,EAAAA,gBAMXzC,MAAAC,cAACyC,EAAAA,YAAW,CAACC,OAAO,UAGxB3C,MAAAC,cAAA,MAAA,CAAKyB,UAAWC,EAAOlB,QAAC,8BACrBQ,GAAmBA,IAGpB,IASVP,EAAaE,YAAc"}
+{"version":3,"file":"Popup.js","sources":["../../../../../../../../src/core/ui/components/molecules/popup/Popup.tsx"],"sourcesContent":["import {\n  cloneElement, memo, PropsWithChildren, FC, ReactNode, CSSProperties, useMemo, ReactElement,\n} from 'react'\n\nimport { Popover as PopoverLite } from '../popover/PopoverLite'\nimport { HeadlineTertiary as H3 } from '../../atoms/text'\nimport { IconBase } from '../../icon'\nimport { DividerLine } from '../../dividers'\nimport { LayoutBox } from '../../container'\nimport { closeIconJSX } from '../../atoms/icons'\n\nimport classes from './popup.module.scss'\nimport classesOverlay from './popup.overlay.module.scss'\nimport { PopupAnimateVariant, PopupProps } from './popup.types'\n\n\n/**\n * Styles for the Popup component.\n *\n * @typedef {Object} PopupStyles\n * @property {Object} inner - The inner styles for the popup.\n * @property {CSSProperties} content - The styles for the popup content.\n */\n\nconst styles: {\n  popup: {\n    inner: Record<string, Record<string, string>>\n  }\n\n} = {\n  popup: {\n    inner: {\n      [PopupAnimateVariant.SLIDE_DOWN]: { '--slideYFrom': '-48px' },\n      [PopupAnimateVariant.SLIDE_UP]: { '--slideYFrom': '48px' },\n      [PopupAnimateVariant.SLIDE_RIGHT]: { '--slideXFrom': '-64px' },\n      [PopupAnimateVariant.SLIDE_LEFT]: { '--slideXFrom': '64px' },\n    },\n  },\n}\n\n/**\n * Popup component.\n *\n * @type {React.FC<PopupProps>}\n * @returns {React.ReactElement} The Popup.\n */\nexport const Popup: FC<PopupProps> = memo<PopupProps>(({\n  title = 'Popup\\'s title',\n  children,\n  components = {},\n  isModal = true,\n  hideOnClickOutside = false,\n  hideOnContentClick = false,\n  animateVariant = PopupAnimateVariant.SLIDE_UP,\n  hasHeader = true,\n  hasCloseIcon = true,\n  width,\n  height,\n  style,\n  ...props\n}: PopupProps) => {\n  /**\n   * The ContentComponent to render.\n   *\n   * @type {ComponentType}\n   */\n  const ContentComponent = components?.ContentComponent\n\n  /**\n   * The popup styles.\n   *\n   * @type {CSSProperties}\n   */\n  const styles = useMemo(() => ({\n    ...(width ? { '--popup-width': width } : {}),\n    ...(height ? { '--popup-height': height } : {}),\n    ...style,\n  }), [height, style, width])\n\n  return (\n    <PopoverLite\n      clickable\n      isPopup\n      isModal={isModal}\n      hideOnContentClick={hideOnContentClick}\n      hideOnClickOutside={hideOnClickOutside}\n      modalOverlayClassName={classesOverlay['popup-modal-overlay']}\n      {...props}\n    >\n      <p>{/* Placeholder element to avoid error with no children */}</p>\n      <PopupContent\n        title={title}\n        hasHeader={hasHeader}\n        hasCloseIcon={hasCloseIcon}\n        animateVariant={animateVariant}\n        popupStyle={styles}\n      >\n        {/* Render children if ContentComponent is not provided */}\n        {(!ContentComponent && children) && children}\n        {/* Render ContentComponent if children are not provided */}\n        {(!children && ContentComponent) && <ContentComponent />}\n      </PopupContent>\n    </PopoverLite>\n  )\n})\n\n/**\n * The display name of the Popup component.\n *\n * @type {string}\n */\nPopup.displayName = 'Popup'\n\ntype PopupContentProps = PropsWithChildren<unknown> & {\n  title?: string\n  forwardedRef?: ForwardedRef['forwardedRef']\n  animateVariant?: PopupProps['animateVariant']\n  popupStyle?: CSSProperties\n  hasHeader?: boolean\n  hasCloseIcon?: boolean\n  closeIconURL?: string\n  hide?: () => void\n}\n\n/**\n * The PopupContent component.\n *\n * @param {PopupContentProps} props The props for the PopupContent component.\n * @returns {React.ReactElement} The PopupContent.\n */\nconst PopupContent = memo(({\n  title,\n  forwardedRef,\n  hide,\n  children,\n  animateVariant,\n  popupStyle,\n  hasHeader = true,\n  hasCloseIcon = true,\n  closeIconURL,\n  ...props\n}: PopupContentProps) => {\n  /**\n   * The ContentRemapped element.\n   *\n   * @type {React.ReactElement[] | React.ReactElement}\n   */\n  const ContentRemapped = children && Array.isArray(children)\n    ? children.filter((child: ReactNode | ReactElement) => !!child)\n      .map((child: ReactElement, index: number) => cloneElement(\n      // eslint-disable-next-line react/no-array-index-key\n        child, { key: index, ...child.props, hide, ...props },\n      ))\n    : <div>Pseudo Content</div>\n\n  return (\n    <div className={`${classes['popup-container']}`} ref={forwardedRef} style={popupStyle}>\n      <LayoutBox\n        className={`${classes['popup-container-inner']}`}\n        style={animateVariant ? styles.popup.inner[animateVariant] : null}\n      >\n        {hasHeader && (\n          <>\n            <LayoutBox justify='space-between' align='start' width='100%' padding='20px 20px 16px 20px'>\n              <H3>{title}</H3>\n              {hasCloseIcon && (\n                <div\n                  onClick={hide}\n                  onKeyDown={hide}\n                  role='button'\n                  tabIndex={-1}\n                  className={classes['close-button']}\n                >\n                  {closeIconURL && <IconBase iconUrl={closeIconURL} />}\n                  {!closeIconURL && (\n                    <IconBase>\n                      {closeIconJSX}\n                    </IconBase>\n                  )}\n                </div>\n              )}\n            </LayoutBox>\n            <DividerLine length='100%' />\n          </>\n        )}\n        <div className={classes['popup-container-inner-div']}>\n          {ContentRemapped && ContentRemapped}\n        </div>\n      </LayoutBox>\n    </div>\n  )\n})\n\n/**\n * The display name of the PopupContent component.\n *\n * @type {string}\n */\nPopupContent.displayName = 'PopupContent'\n"],"names":["styles","popup","inner","PopupAnimateVariant","SLIDE_DOWN","SLIDE_UP","SLIDE_RIGHT","SLIDE_LEFT","Popup","memo","_ref","title","children","components","isModal","hideOnClickOutside","hideOnContentClick","animateVariant","hasHeader","hasCloseIcon","width","height","style","props","ContentComponent","useMemo","React","createElement","PopoverLite","Popover","_extends","clickable","isPopup","modalOverlayClassName","classesOverlay","default","PopupContent","popupStyle","displayName","_ref2","forwardedRef","hide","closeIconURL","ContentRemapped","Array","isArray","filter","child","map","index","cloneElement","key","className","classes","ref","LayoutBox","Fragment","justify","align","padding","H3","onClick","onKeyDown","role","tabIndex","IconBase","iconUrl","closeIconJSX","DividerLine","length"],"mappings":"6cAwBA,MAAMA,EAKF,CACFC,MAAO,CACLC,MAAO,CACL,CAACC,EAAAA,oBAAoBC,YAAa,CAAE,eAAgB,SACpD,CAACD,EAAAA,oBAAoBE,UAAW,CAAE,eAAgB,QAClD,CAACF,EAAAA,oBAAoBG,aAAc,CAAE,eAAgB,SACrD,CAACH,EAAAA,oBAAoBI,YAAa,CAAE,eAAgB,WAW7CC,EAAwBC,EAAIA,MAAaC,IAcpC,IAdqCC,MACrDA,EAAQ,gBAAgBC,SACxBA,EAAQC,WACRA,EAAa,CAAE,EAAAC,QACfA,GAAU,EAAIC,mBACdA,GAAqB,EAAKC,mBAC1BA,GAAqB,EAAKC,eAC1BA,EAAiBd,EAAmBA,oBAACE,SAAQa,UAC7CA,GAAY,EAAIC,aAChBA,GAAe,EAAIC,MACnBA,EAAKC,OACLA,EAAMC,MACNA,KACGC,GACQb,EAMX,MAAMc,EAAmBX,GAAYW,iBAO/BxB,EAASyB,EAAAA,SAAQ,KAAO,IACxBL,EAAQ,CAAE,gBAAiBA,GAAU,MACrCC,EAAS,CAAE,iBAAkBA,GAAW,MACzCC,KACD,CAACD,EAAQC,EAAOF,IAEpB,OACEM,MAAAC,cAACC,EAAWC,QAAAC,UAAA,CACVC,WAAS,EACTC,SAAO,EACPlB,QAASA,EACTE,mBAAoBA,EACpBD,mBAAoBA,EACpBkB,sBAAuBC,EAAcC,QAAC,wBAClCZ,GAEJG,MAAAC,cAAA,IAAA,MACAD,MAAAC,cAACS,EAAY,CACXzB,MAAOA,EACPO,UAAWA,EACXC,aAAcA,EACdF,eAAgBA,EAChBoB,WAAYrC,IAGTwB,GAAoBZ,GAAaA,GAEjCA,GAAYY,GAAqBE,MAAAC,cAACH,EAAkB,OAE7C,IASlBhB,EAAM8B,YAAc,QAmBpB,MAAMF,EAAe3B,EAAIA,MAAC8B,IAWD,IAXE5B,MACzBA,EAAK6B,aACLA,EAAYC,KACZA,EAAI7B,SACJA,EAAQK,eACRA,EAAcoB,WACdA,EAAUnB,UACVA,GAAY,EAAIC,aAChBA,GAAe,EAAIuB,aACnBA,KACGnB,GACegB,EAMlB,MAAMI,EAAkB/B,GAAYgC,MAAMC,QAAQjC,GAC9CA,EAASkC,QAAQC,KAAsCA,IACtDC,KAAI,CAACD,EAAqBE,IAAkBC,EAAYA,aAEvDH,EAAO,CAAEI,IAAKF,KAAUF,EAAMxB,MAAOkB,UAASlB,MAEhDG,MAAAC,cAAA,MAAA,KAAK,kBAET,OACED,MAAAC,cAAA,MAAA,CAAKyB,UAAW,GAAGC,UAAQ,qBAAsBC,IAAKd,EAAclB,MAAOe,GACzEX,MAAAC,cAAC4B,YAAS,CACRH,UAAW,GAAGC,UAAQ,2BACtB/B,MAAOL,EAAiBjB,EAAOC,MAAMC,MAAMe,GAAkB,MAE5DC,GACCQ,MAAAC,cAAAD,MAAA8B,SACE9B,KAAAA,MAAAC,cAAC4B,YAAS,CAACE,QAAQ,gBAAgBC,MAAM,QAAQtC,MAAM,OAAOuC,QAAQ,uBACpEjC,MAAAC,cAACiC,EAAAA,iBAAE,KAAEjD,GACJQ,GACCO,MAAAC,cAAA,MAAA,CACEkC,QAASpB,EACTqB,UAAWrB,EACXsB,KAAK,SACLC,UAAW,EACXZ,UAAWC,EAAOlB,QAAC,iBAElBO,GAAgBhB,MAAAC,cAACsC,WAAQ,CAACC,QAASxB,KAClCA,GACAhB,MAAAC,cAACsC,EAAQA,cACNE,EAAAA,gBAMXzC,MAAAC,cAACyC,EAAAA,YAAW,CAACC,OAAO,UAGxB3C,MAAAC,cAAA,MAAA,CAAKyB,UAAWC,EAAOlB,QAAC,8BACrBQ,GAAmBA,IAGpB,IASVP,EAAaE,YAAc"}

package/dist/utils/esm/index.css

@@ -1,3 +1,61 @@
+.divider-module_divider-line__6CesR {
+  position: relative;
+  display: block;
+  transition: opacity, width, height 250ms ease-in-out;
+  background-color: var(--color);
+  opacity: var(--opacity);
+}
+.divider-module_divider-line__6CesR.divider-module_vertical__qSVWD {
+  height: var(--length);
+  left: var(--left);
+  width: var(--width);
+  margin: var(--margin);
+}
+.divider-module_divider-line__6CesR.divider-module_horizontal__Gz-Oj {
+  width: var(--length);
+  left: var(--left);
+  height: var(--height);
+  margin: var(--margin);
+}
+.errorBoundary-module_errorBoundary__gk9ps {
+  background: #EFEFEF;
+  width: 100%;
+  height: 100%;
+}
+
+.errorBoundary-module_StyledIcon__IYHiU {
+  margin-right: 10px;
+}
+.icon-module_icon-base-parent__nOMvW {
+  line-height: 1px !important;
+}
+
+.icon-module_icon-base__S0tHf {
+  min-width: var(--min-width);
+  min-height: var(--min-height);
+  width: var(--width) !important;
+  height: var(--height) !important;
+  line-height: 1px !important;
+  background-color: var(--icon-color);
+  color: var(--icon-content-color);
+  background-repeat: no-repeat;
+  mask-image: var(--icon-url);
+  -webkit-mask-image: var(--icon-url);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  mask-position: center;
+  -webkit-mask-position: center;
+  display: inline-block;
+  will-change: transform;
+  transform: translate3d(0, 0, 0);
+}
+.icon-module_icon-base__S0tHf svg {
+  fill: var(--icon-content-color);
+  width: var(--height);
+  height: var(--width);
+}
 .field-module_field__UfKm3 {
   opacity: 1;
   pointer-events: auto;
@@ -72,64 +130,6 @@
 .field-module_field__UfKm3 label {
   text-align: left;
 }
-.icon-module_icon-base-parent__nOMvW {
-  line-height: 1px !important;
-}
-
-.icon-module_icon-base__S0tHf {
-  min-width: var(--min-width);
-  min-height: var(--min-height);
-  width: var(--width) !important;
-  height: var(--height) !important;
-  line-height: 1px !important;
-  background-color: var(--icon-color);
-  color: var(--icon-content-color);
-  background-repeat: no-repeat;
-  mask-image: var(--icon-url);
-  -webkit-mask-image: var(--icon-url);
-  mask-repeat: no-repeat;
-  -webkit-mask-repeat: no-repeat;
-  mask-size: contain;
-  -webkit-mask-size: contain;
-  mask-position: center;
-  -webkit-mask-position: center;
-  display: inline-block;
-  will-change: transform;
-  transform: translate3d(0, 0, 0);
-}
-.icon-module_icon-base__S0tHf svg {
-  fill: var(--icon-content-color);
-  width: var(--height);
-  height: var(--width);
-}
-.errorBoundary-module_errorBoundary__gk9ps {
-  background: #EFEFEF;
-  width: 100%;
-  height: 100%;
-}
-
-.errorBoundary-module_StyledIcon__IYHiU {
-  margin-right: 10px;
-}
-.divider-module_divider-line__6CesR {
-  position: relative;
-  display: block;
-  transition: opacity, width, height 250ms ease-in-out;
-  background-color: var(--color);
-  opacity: var(--opacity);
-}
-.divider-module_divider-line__6CesR.divider-module_vertical__qSVWD {
-  height: var(--length);
-  left: var(--left);
-  width: var(--width);
-  margin: var(--margin);
-}
-.divider-module_divider-line__6CesR.divider-module_horizontal__Gz-Oj {
-  width: var(--length);
-  left: var(--left);
-  height: var(--height);
-  margin: var(--margin);
-}
 .CollapsibleContainer-module_collapsible-container__u0Jmm {
   transform-origin: 0% 0%;
   opacity: 0;
@@ -234,6 +234,102 @@
   --divider-line: #4a4b4b;
 }
 
+.popup-module_overflow-hidden__uimg4, .popup-module_text-truncate__y-5c1 {
+  overflow: hidden !important;
+}
+
+.popup-module_text-nowrap__eDCv3, .popup-module_text-truncate__y-5c1 {
+  white-space: nowrap !important;
+}
+
+.popup-module_text-ellipsis__yu8nx, .popup-module_text-truncate__y-5c1 {
+  text-overflow: ellipsis !important;
+}
+
+.popup-module_popup-container__PJ0oQ {
+  --popup-width: 60vw;
+  --popup-height: 50vh;
+  position: fixed;
+  width: var(--popup-width);
+  height: var(--popup-height);
+  --slideXFrom: 0;
+  --slideYFrom: 0;
+  will-change: opacity;
+  transition: opacity 300ms ease-in-out;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+.popup-module_popup-container__PJ0oQ .popup-module_popup-container-inner__n83Cz {
+  position: relative;
+  flex-direction: column;
+  align-items: start;
+  width: 100%;
+  height: 100%;
+  overflow-x: clip;
+  background-color: #090A0A;
+  border-radius: 4px;
+  box-shadow: 0px 10px 20px 4px rgba(0, 0, 0, 0.15);
+  transition: transform 350ms ease-out;
+  will-change: transform;
+  transform: translateX(var(--slideXFrom)) translateY(var(--slideYFrom));
+}
+.popup-module_popup-container__PJ0oQ .popup-module_popup-container-inner__n83Cz button {
+  margin-bottom: 0;
+}
+.popup-module_popup-container__PJ0oQ .popup-module_popup-container-inner__n83Cz .popup-module_close-button__-8sZx {
+  cursor: pointer;
+  line-height: 1px;
+  background-color: rgba(255, 255, 255, 0);
+}
+.popup-module_popup-container__PJ0oQ .popup-module_popup-container-inner__n83Cz .popup-module_close-button__-8sZx .icon-base {
+  background-color: #FDDA0D;
+  width: 9px !important;
+  height: 9px !important;
+  line-height: 1px !important;
+}
+.popup-module_popup-container__PJ0oQ .popup-module_popup-container-inner__n83Cz .popup-module_close-button__-8sZx:hover .icon-base {
+  background-color: #FFEA00;
+}
+.popup-module_popup-container__PJ0oQ .popup-module_popup-container-inner__n83Cz .popup-module_popup-container-inner-div__sDNBm {
+  width: 100%;
+  height: 100%;
+  padding: 24px;
+  overflow-y: auto;
+  display: flex;
+}
+.popup-module_popup-container__PJ0oQ .popup-module_popup-container-inner__n83Cz .popup-module_popup-container-inner-div__sDNBm > * {
+  overflow-y: auto;
+}
+.popup-module_popup-container__PJ0oQ[data-show] {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: all;
+}
+.popup-module_popup-container__PJ0oQ[data-show] .popup-module_popup-container-inner__n83Cz {
+  transform: translateX(0) translateY(0);
+}
+.popup-module_popup-container__PJ0oQ[data-show=false] {
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+.popup-module_popup-container__PJ0oQ[data-show=false] .popup-module_popup-container-inner__n83Cz {
+  transform: translateX(var(--slideXFrom)) translateY(var(--slideYFrom));
+}
+
+.cui-theme-dark .popup-module_popup-container-inner__n83Cz {
+  background-color: #090A0A;
+  color: #F4F4F4;
+}
+.cui-theme-light .popup-module_popup-container-inner__n83Cz {
+  background-color: #090A0A;
+  color: #F4F4F4;
+}
+:root {
+  --divider-line: #4a4b4b;
+}
+
 .typography-module_overflow-hidden__UmQ-v, .typography-module_text-truncate__8MgV9 {
   overflow: hidden !important;
 }
@@ -300,120 +396,6 @@
   --divider-line: #4a4b4b;
 }
 
-.tooltip-module_overflow-hidden__YDzdx, .tooltip-module_text-truncate__CPvp3 {
-  overflow: hidden !important;
-}
-
-.tooltip-module_text-nowrap__g6kzP, .tooltip-module_text-truncate__CPvp3 {
-  white-space: nowrap !important;
-}
-
-.tooltip-module_text-ellipsis__AYivV, .tooltip-module_text-truncate__CPvp3 {
-  text-overflow: ellipsis !important;
-}
-
-.tooltip-module_popover-tooltip__sAhKa {
-  position: fixed;
-  z-index: 999;
-  will-change: opacity;
-  transition: opacity 450ms ease;
-  opacity: 0;
-  visibility: hidden;
-  border-radius: 4px;
-  background-color: #1B1D1D;
-  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.16);
-}
-.tooltip-module_popover-tooltip__sAhKa span, .tooltip-module_popover-tooltip__sAhKa p, .tooltip-module_popover-tooltip__sAhKa h3 {
-  margin: 0;
-  padding: 0;
-}
-.tooltip-module_popover-tooltip__sAhKa p {
-  display: -webkit-box;
-  -webkit-line-clamp: 4; /* number of lines to show */
-  line-clamp: 4;
-  -webkit-box-orient: vertical;
-  margin: 0;
-  width: 100%;
-  white-space: normal;
-  overflow: auto;
-}
-.tooltip-module_popover-tooltip__sAhKa[data-show] {
-  opacity: 1;
-  visibility: visible;
-}
-.tooltip-module_popover-tooltip__sAhKa[data-show=false] {
-  opacity: 0;
-  visibility: hidden;
-}
-.tooltip-module_popover-tooltip__sAhKa[data-popper-placement^=top] .tooltip-module_arrow__pqqOi {
-  bottom: -16px;
-}
-.tooltip-module_popover-tooltip__sAhKa[data-popper-placement^=top] .tooltip-module_arrow__pqqOi .tooltip-module_arrow-inner__IqzxY {
-  transform: rotate(0deg);
-}
-.tooltip-module_popover-tooltip__sAhKa[data-popper-placement^=bottom] .tooltip-module_arrow__pqqOi {
-  top: -16px;
-}
-.tooltip-module_popover-tooltip__sAhKa[data-popper-placement^=bottom] .tooltip-module_arrow__pqqOi .tooltip-module_arrow-inner__IqzxY {
-  transform: rotate(180deg);
-}
-.tooltip-module_popover-tooltip__sAhKa[data-popper-placement^=left] .tooltip-module_arrow__pqqOi {
-  right: -16px;
-}
-.tooltip-module_popover-tooltip__sAhKa[data-popper-placement^=left] .tooltip-module_arrow__pqqOi .tooltip-module_arrow-inner__IqzxY {
-  transform: rotate(-90deg);
-}
-.tooltip-module_popover-tooltip__sAhKa[data-popper-placement^=right] .tooltip-module_arrow__pqqOi {
-  left: -16px;
-}
-.tooltip-module_popover-tooltip__sAhKa[data-popper-placement^=right] .tooltip-module_arrow__pqqOi .tooltip-module_arrow-inner__IqzxY {
-  transform: rotate(90deg);
-}
-.tooltip-module_popover-tooltip__sAhKa .tooltip-module_arrow__pqqOi {
-  position: absolute;
-}
-.tooltip-module_popover-tooltip__sAhKa .tooltip-module_arrow__pqqOi .tooltip-module_arrow-inner__IqzxY {
-  content: "";
-  border-width: 8px;
-  border-style: solid;
-  border-color: #1B1D1D transparent transparent transparent;
-}
-
-.tooltip-module_close-button__o8OBN {
-  cursor: pointer;
-  line-height: 1px;
-  background-color: rgba(255, 255, 255, 0);
-}
-.tooltip-module_close-button__o8OBN .icon-base {
-  background-color: #FDDA0D;
-  width: 9px !important;
-  height: 9px !important;
-  line-height: 1px !important;
-}
-.tooltip-module_close-button__o8OBN:hover .icon-base {
-  background-color: #FFEA00;
-}
-
-.cui-theme-dark .tooltip-module_popover-tooltip__sAhKa {
-  background-color: #1B1D1D;
-  color: #F4F4F4;
-}
-.cui-theme-dark .tooltip-module_popover-tooltip__sAhKa .tooltip-module_arrow-inner__IqzxY {
-  border-color: #1B1D1D transparent transparent transparent;
-}
-.cui-theme-light {
-  color: #1B1D1D;
-}
-.cui-theme-light .tooltip-module_popover-tooltip__sAhKa {
-  background-color: #515757;
-}
-.cui-theme-light .tooltip-module_popover-tooltip__sAhKa .tooltip-module_arrow-inner__IqzxY {
-  border-color: #515757 transparent transparent transparent;
-}
-:root {
-  --divider-line: #4a4b4b;
-}
-
 .button-module_overflow-hidden__Vc5AU, .button-module_text-truncate__a89Bp {
   overflow: hidden !important;
 }
@@ -537,124 +519,142 @@
   width: 100%;
   min-width: 0;
 }
-.popup-overlay-module_popup-modal-overlay__dlJqM {
-  z-index: 1;
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  background: rgba(40, 80, 120, 0.8) !important;
-  pointer-events: all;
-  user-select: none;
-  will-change: opacity;
-  transition: opacity 450ms ease-in-out;
-  opacity: 0;
-  visibility: hidden;
-}
-.popup-overlay-module_popup-modal-overlay__dlJqM[data-show] {
-  opacity: 1;
-  visibility: visible;
-}
-.popup-overlay-module_popup-modal-overlay__dlJqM[data-show=false] {
-  opacity: 0;
-  visibility: hidden;
-}
 :root {
   --divider-line: #4a4b4b;
 }
 
-.popup-module_overflow-hidden__uimg4, .popup-module_text-truncate__y-5c1 {
+.tooltip-module_overflow-hidden__YDzdx, .tooltip-module_text-truncate__CPvp3 {
   overflow: hidden !important;
 }
 
-.popup-module_text-nowrap__eDCv3, .popup-module_text-truncate__y-5c1 {
+.tooltip-module_text-nowrap__g6kzP, .tooltip-module_text-truncate__CPvp3 {
   white-space: nowrap !important;
 }
 
-.popup-module_text-ellipsis__yu8nx, .popup-module_text-truncate__y-5c1 {
+.tooltip-module_text-ellipsis__AYivV, .tooltip-module_text-truncate__CPvp3 {
   text-overflow: ellipsis !important;
 }
 
-.popup-module_popup-container__PJ0oQ {
-  --popup-width: 60vw;
-  --popup-height: 50vh;
+.tooltip-module_popover-tooltip__sAhKa {
   position: fixed;
-  width: var(--popup-width);
-  height: var(--popup-height);
-  --slideXFrom: 0;
-  --slideYFrom: 0;
+  z-index: 999;
   will-change: opacity;
-  transition: opacity 300ms ease-in-out;
+  transition: opacity 450ms ease;
   opacity: 0;
   visibility: hidden;
-  pointer-events: none;
+  border-radius: 4px;
+  background-color: #1B1D1D;
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.16);
 }
-.popup-module_popup-container__PJ0oQ .popup-module_popup-container-inner__n83Cz {
-  position: relative;
-  flex-direction: column;
-  align-items: start;
+.tooltip-module_popover-tooltip__sAhKa span, .tooltip-module_popover-tooltip__sAhKa p, .tooltip-module_popover-tooltip__sAhKa h3 {
+  margin: 0;
+  padding: 0;
+}
+.tooltip-module_popover-tooltip__sAhKa p {
+  display: -webkit-box;
+  -webkit-line-clamp: 4; /* number of lines to show */
+  line-clamp: 4;
+  -webkit-box-orient: vertical;
+  margin: 0;
   width: 100%;
-  height: 100%;
-  overflow-x: clip;
-  background-color: #090A0A;
-  border-radius: 4px;
-  box-shadow: 0px 10px 20px 4px rgba(0, 0, 0, 0.15);
-  transition: transform 350ms ease-out;
-  will-change: transform;
-  transform: translateX(var(--slideXFrom)) translateY(var(--slideYFrom));
+  white-space: normal;
+  overflow: auto;
 }
-.popup-module_popup-container__PJ0oQ .popup-module_popup-container-inner__n83Cz button {
-  margin-bottom: 0;
+.tooltip-module_popover-tooltip__sAhKa[data-show] {
+  opacity: 1;
+  visibility: visible;
 }
-.popup-module_popup-container__PJ0oQ .popup-module_popup-container-inner__n83Cz .popup-module_close-button__-8sZx {
+.tooltip-module_popover-tooltip__sAhKa[data-show=false] {
+  opacity: 0;
+  visibility: hidden;
+}
+.tooltip-module_popover-tooltip__sAhKa[data-popper-placement^=top] .tooltip-module_arrow__pqqOi {
+  bottom: -16px;
+}
+.tooltip-module_popover-tooltip__sAhKa[data-popper-placement^=top] .tooltip-module_arrow__pqqOi .tooltip-module_arrow-inner__IqzxY {
+  transform: rotate(0deg);
+}
+.tooltip-module_popover-tooltip__sAhKa[data-popper-placement^=bottom] .tooltip-module_arrow__pqqOi {
+  top: -16px;
+}
+.tooltip-module_popover-tooltip__sAhKa[data-popper-placement^=bottom] .tooltip-module_arrow__pqqOi .tooltip-module_arrow-inner__IqzxY {
+  transform: rotate(180deg);
+}
+.tooltip-module_popover-tooltip__sAhKa[data-popper-placement^=left] .tooltip-module_arrow__pqqOi {
+  right: -16px;
+}
+.tooltip-module_popover-tooltip__sAhKa[data-popper-placement^=left] .tooltip-module_arrow__pqqOi .tooltip-module_arrow-inner__IqzxY {
+  transform: rotate(-90deg);
+}
+.tooltip-module_popover-tooltip__sAhKa[data-popper-placement^=right] .tooltip-module_arrow__pqqOi {
+  left: -16px;
+}
+.tooltip-module_popover-tooltip__sAhKa[data-popper-placement^=right] .tooltip-module_arrow__pqqOi .tooltip-module_arrow-inner__IqzxY {
+  transform: rotate(90deg);
+}
+.tooltip-module_popover-tooltip__sAhKa .tooltip-module_arrow__pqqOi {
+  position: absolute;
+}
+.tooltip-module_popover-tooltip__sAhKa .tooltip-module_arrow__pqqOi .tooltip-module_arrow-inner__IqzxY {
+  content: "";
+  border-width: 8px;
+  border-style: solid;
+  border-color: #1B1D1D transparent transparent transparent;
+}
+
+.tooltip-module_close-button__o8OBN {
   cursor: pointer;
   line-height: 1px;
   background-color: rgba(255, 255, 255, 0);
 }
-.popup-module_popup-container__PJ0oQ .popup-module_popup-container-inner__n83Cz .popup-module_close-button__-8sZx .icon-base {
+.tooltip-module_close-button__o8OBN .icon-base {
   background-color: #FDDA0D;
   width: 9px !important;
   height: 9px !important;
   line-height: 1px !important;
 }
-.popup-module_popup-container__PJ0oQ .popup-module_popup-container-inner__n83Cz .popup-module_close-button__-8sZx:hover .icon-base {
+.tooltip-module_close-button__o8OBN:hover .icon-base {
   background-color: #FFEA00;
 }
-.popup-module_popup-container__PJ0oQ .popup-module_popup-container-inner__n83Cz .popup-module_popup-container-inner-div__sDNBm {
-  width: 100%;
-  height: 100%;
-  padding: 24px;
-  overflow-y: auto;
-  display: flex;
+
+.cui-theme-dark .tooltip-module_popover-tooltip__sAhKa {
+  background-color: #1B1D1D;
+  color: #F4F4F4;
 }
-.popup-module_popup-container__PJ0oQ .popup-module_popup-container-inner__n83Cz .popup-module_popup-container-inner-div__sDNBm > * {
-  overflow-y: auto;
+.cui-theme-dark .tooltip-module_popover-tooltip__sAhKa .tooltip-module_arrow-inner__IqzxY {
+  border-color: #1B1D1D transparent transparent transparent;
 }
-.popup-module_popup-container__PJ0oQ[data-show] {
-  opacity: 1;
-  visibility: visible;
-  pointer-events: all;
+.cui-theme-light {
+  color: #1B1D1D;
 }
-.popup-module_popup-container__PJ0oQ[data-show] .popup-module_popup-container-inner__n83Cz {
-  transform: translateX(0) translateY(0);
+.cui-theme-light .tooltip-module_popover-tooltip__sAhKa {
+  background-color: #515757;
 }
-.popup-module_popup-container__PJ0oQ[data-show=false] {
+.cui-theme-light .tooltip-module_popover-tooltip__sAhKa .tooltip-module_arrow-inner__IqzxY {
+  border-color: #515757 transparent transparent transparent;
+}
+.popup-overlay-module_popup-modal-overlay__dlJqM {
+  z-index: 1;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: rgba(40, 80, 120, 0.8) !important;
+  pointer-events: all;
+  user-select: none;
+  will-change: opacity;
+  transition: opacity 450ms ease-in-out;
   opacity: 0;
   visibility: hidden;
-  pointer-events: none;
 }
-.popup-module_popup-container__PJ0oQ[data-show=false] .popup-module_popup-container-inner__n83Cz {
-  transform: translateX(var(--slideXFrom)) translateY(var(--slideYFrom));
-}
-
-.cui-theme-dark .popup-module_popup-container-inner__n83Cz {
-  background-color: #090A0A;
-  color: #F4F4F4;
+.popup-overlay-module_popup-modal-overlay__dlJqM[data-show] {
+  opacity: 1;
+  visibility: visible;
 }
-.cui-theme-light .popup-module_popup-container-inner__n83Cz {
-  background-color: #090A0A;
-  color: #F4F4F4;
+.popup-overlay-module_popup-modal-overlay__dlJqM[data-show=false] {
+  opacity: 0;
+  visibility: hidden;
 }
 :root {
   --divider-line: #4a4b4b;