impaktapps-ui-builder 0.0.382460 → 1.0.0

package/page/App/components/PagePanel/Modules/Style/Components/ShadowSelect/style.ts

@@ -0,0 +1,30 @@
+import { globalColor } from "@/utils/colorBuilder"
+import { css } from "@emotion/react"
+// import { getColor } from "@IMPAKTAPPS-design/react"
+
+export const shadowSelectWrapperStyle = css`
+  width: 170px;
+  padding: 4px 12px 4px 8px;
+  border-radius: 8px;
+  border: 1px solid ${globalColor("grayBlue-08")};
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+`
+
+export const shadowSelectStyle = css`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+`
+
+export const shadowIconHotSpotStyle = css`
+  flex: none;
+  width: 24px;
+  height: 24px;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  display: flex;
+`

package/page/App/components/PagePanel/Modules/Style/Components/ShadowSetter/index.tsx

@@ -0,0 +1,155 @@
+import { FC, useCallback } from "react"
+import { useTranslation } from "react-i18next"
+import { useDispatch, useSelector } from "react-redux"
+import { PageLabel } from "@/page/App/components/PagePanel/Components/Label"
+import {
+  labelContainerStyle,
+  sectionContainerStyle,
+  setterContainerStyle,
+} from "@/page/App/components/PagePanel/Modules/Style/style"
+import { componentsActions } from "@/redux/currentApp/components/componentsSlice"
+import {
+  getCurrentPageExecutionResult,
+  getCurrentPageFooterSection,
+  getCurrentPageHeaderSection,
+  getCurrentPageLeftSection,
+  getCurrentPageRightSection,
+} from "@/redux/currentApp/executionTree/executionSelector"
+import ShadowSelect from "../ShadowSelect"
+import { SHADOW_VALUE } from "../ShadowSelect/constants"
+
+export const ShadowSetter: FC = () => {
+  const { t } = useTranslation()
+  const dispatch = useDispatch()
+
+  const currentPage = useSelector(getCurrentPageExecutionResult)
+  const { displayName, hasFooter, hasLeft, hasRight, hasHeader } = currentPage
+
+  const rightSection = useSelector(getCurrentPageRightSection)
+  const leftSection = useSelector(getCurrentPageLeftSection)
+  const headerSection = useSelector(getCurrentPageHeaderSection)
+  const footerSection = useSelector(getCurrentPageFooterSection)
+  const { style: rightStyle } = rightSection ?? {}
+  const { style: leftStyle } = leftSection ?? {}
+  const { style: headerStyle } = headerSection ?? {}
+  const { style: footerStyle } = footerSection ?? {}
+
+  const handleUpdateLeftShadow = useCallback(
+    (value: SHADOW_VALUE) => {
+      dispatch(
+        componentsActions.updateCurrentPageStyleReducer({
+          pageName: displayName,
+          style: {
+            shadowSize: value,
+          },
+          sectionName: "leftSection",
+        }),
+      )
+    },
+    [dispatch, displayName],
+  )
+
+  const handleUpdateRightShadow = useCallback(
+    (value: SHADOW_VALUE) => {
+      dispatch(
+        componentsActions.updateCurrentPageStyleReducer({
+          pageName: displayName,
+          style: {
+            shadowSize: value,
+          },
+          sectionName: "rightSection",
+        }),
+      )
+    },
+    [dispatch, displayName],
+  )
+
+  const handleUpdateHeaderShadow = useCallback(
+    (value: SHADOW_VALUE) => {
+      dispatch(
+        componentsActions.updateCurrentPageStyleReducer({
+          pageName: displayName,
+          style: {
+            shadowSize: value,
+          },
+          sectionName: "headerSection",
+        }),
+      )
+    },
+    [dispatch, displayName],
+  )
+
+  const handleUpdateFooterShadow = useCallback(
+    (value: SHADOW_VALUE) => {
+      dispatch(
+        componentsActions.updateCurrentPageStyleReducer({
+          pageName: displayName,
+          style: {
+            shadowSize: value,
+          },
+          sectionName: "footerSection",
+        }),
+      )
+    },
+    [dispatch, displayName],
+  )
+
+  return (
+    <section css={sectionContainerStyle}>
+      <div css={labelContainerStyle}>
+        <PageLabel
+          labelName={t("editor.inspect.setter_group.shadow")}
+          size="big"
+        />
+      </div>
+      {hasLeft && (
+        <div css={setterContainerStyle}>
+          <PageLabel
+            labelName={t("editor.page.label_name.left_panel")}
+            size="small"
+          />
+          <ShadowSelect
+            value={leftStyle?.shadowSize ?? SHADOW_VALUE.NONE}
+            onChange={handleUpdateLeftShadow}
+          />
+        </div>
+      )}
+      {hasRight && (
+        <div css={setterContainerStyle}>
+          <PageLabel
+            labelName={t("editor.page.label_name.right_panel")}
+            size="small"
+          />
+          <ShadowSelect
+            value={rightStyle?.shadowSize ?? SHADOW_VALUE.NONE}
+            onChange={handleUpdateRightShadow}
+          />
+        </div>
+      )}
+      {hasHeader && (
+        <div css={setterContainerStyle}>
+          <PageLabel
+            labelName={t("editor.page.label_name.header")}
+            size="small"
+          />
+          <ShadowSelect
+            value={headerStyle?.shadowSize ?? SHADOW_VALUE.NONE}
+            onChange={handleUpdateHeaderShadow}
+          />
+        </div>
+      )}
+      {hasFooter && (
+        <div css={setterContainerStyle}>
+          <PageLabel
+            labelName={t("editor.page.label_name.footer")}
+            size="small"
+          />
+          <ShadowSelect
+            value={footerStyle?.shadowSize ?? SHADOW_VALUE.NONE}
+            onChange={handleUpdateFooterShadow}
+          />
+        </div>
+      )}
+    </section>
+  )
+}

package/page/App/components/PagePanel/Modules/Style/index.tsx

@@ -0,0 +1,26 @@
+import { FC } from "react"
+import { useTranslation } from "react-i18next"
+// import { Divider } from "@IMPAKTAPPS-design/react"
+import { PanelBar } from "@/components/PanelBar"
+import { BackgroundSetter } from "./Components/BackgroundSetter"
+import { DividerSetter } from "./Components/DividerSetter"
+import { PaddingSetter } from "./Components/PaddingSetter"
+import { Divider } from "@mui/material"
+
+export const PageStyle: FC = () => {
+  const { t } = useTranslation()
+
+  return (
+    <PanelBar title={t("editor.inspect.setter_group.style")}>
+      <DividerSetter />
+      <Divider />
+      {/* <ShadowSetter />
+      <Divider /> */}
+      <BackgroundSetter />
+      <Divider />
+      <PaddingSetter />
+    </PanelBar>
+  )
+}
+
+PageStyle.displayName = "PageStyle"

package/page/App/components/PagePanel/Modules/Style/style.ts

@@ -0,0 +1,33 @@
+import { globalColor } from "@/utils/colorBuilder"
+import { css } from "@emotion/react"
+// import { getColor } from "@IMPAKTAPPS-design/react"
+
+export const iconHotSpotContainerStyle = css`
+  padding: 6px;
+  font-size: 12px;
+  cursor: pointer;
+  color: ${globalColor("grayBlue-04")};
+  :hover {
+    color: ${globalColor("grayBlue-02")};
+  }
+`
+
+export const labelContainerStyle = css`
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 16px;
+  align-items: center;
+`
+
+export const sectionContainerStyle = css`
+  display: flex;
+  flex-direction: column;
+  padding: 8px 0px;
+`
+
+export const setterContainerStyle = css`
+  padding: 8px 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`

package/page/App/components/PagePanel/index.tsx

@@ -0,0 +1,25 @@
+import { FC } from "react"
+import { FocusManager } from "@/utils/focusManager"
+import { PageBasic } from "./Modules/Basic"
+// import { PageFrame } from "./Modules/Frame"
+import { PageStyle } from "./Modules/Style"
+import { PagePanelWrapperStyle, PageScrollContainerWrapperStyle } from "./style"
+
+const PagePanel: FC = () => {
+  return (
+    <div
+      css={PagePanelWrapperStyle}
+      onClick={() => {
+        FocusManager.switchFocus("page_config")
+      }}
+    >
+      <div css={PageScrollContainerWrapperStyle}>
+         {/* <PageBasic /> */}
+        {/* <PageStyle />  */}
+      </div>
+    </div>
+  )
+}
+
+PagePanel.displayName = "PagePanel"
+export default PagePanel

package/page/App/components/PagePanel/style.ts

@@ -0,0 +1,35 @@
+import { globalColor } from "@/utils/colorBuilder"
+import { css } from "@emotion/react"
+// import { globalColor, IMPAKTAPPSPrefix } from "@IMPAKTAPPS-design/react"
+
+export const PagePanelWrapperStyle = css`
+  border-top: 1px solid ${globalColor(`grayBlue-08`)};
+  height: 100%;
+  width: 100%;
+  padding-bottom: 48px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+`
+
+export const PageScrollContainerWrapperStyle = css`
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+`
+
+export const headerWrapperStyle = css`
+  display: flex;
+  height: 48px;
+  align-items: center;
+  padding: 0 16px;
+`
+
+export const optionListWrapperStyle = css`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+`

package/page/App/components/PublicTypes/ResourceGenerator/assets/emojiSmile.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.28769 12.2123C5.27226 13.1969 6.60761 13.75 8 13.75C9.39239 13.75 10.7277 13.1969 11.7123 12.2123C12.6969 11.2277 13.25 9.89239 13.25 8.5C13.25 7.10761 12.6969 5.77226 11.7123 4.78769C10.7277 3.80312 9.39239 3.25 8 3.25C6.60761 3.25 5.27226 3.80312 4.28769 4.78769C3.30312 5.77226 2.75 7.10761 2.75 8.5C2.75 9.89239 3.30312 11.2277 4.28769 12.2123ZM12.2426 12.7426C11.1174 13.8679 9.5913 14.5 8 14.5C6.4087 14.5 4.88258 13.8679 3.75736 12.7426C2.63214 11.6174 2 10.0913 2 8.5C2 6.9087 2.63214 5.38258 3.75736 4.25736C4.88258 3.13214 6.4087 2.5 8 2.5C9.5913 2.5 11.1174 3.13214 12.2426 4.25736C13.3679 5.38258 14 6.9087 14 8.5C14 10.0913 13.3679 11.6174 12.2426 12.7426ZM5.49831 9.63779C5.40225 9.61205 5.29989 9.62552 5.21377 9.67525C5.12764 9.72498 5.06479 9.80689 5.03905 9.90295C5.01331 9.99902 5.02679 10.1014 5.07652 10.1875C5.37267 10.7008 5.7988 11.127 6.31202 11.4232C6.82524 11.7194 7.40744 11.8753 8.00002 11.875C8.59259 11.8753 9.17479 11.7194 9.68801 11.4232C10.2012 11.127 10.6274 10.7008 10.9235 10.1875C10.9485 10.1448 10.9649 10.0976 10.9716 10.0486C10.9783 9.99965 10.9752 9.94981 10.9626 9.90199C10.9499 9.85418 10.9279 9.80934 10.8979 9.77006C10.8679 9.73077 10.8303 9.69782 10.7875 9.67309C10.7447 9.64836 10.6974 9.63235 10.6483 9.62597C10.5993 9.6196 10.5495 9.62299 10.5018 9.63595C10.454 9.6489 10.4093 9.67117 10.3702 9.70147C10.3312 9.73178 10.2985 9.76951 10.274 9.8125C10.0437 10.2118 9.71223 10.5433 9.31302 10.7737C8.91381 11.0041 8.46095 11.1253 8.00002 11.125C7.53909 11.1253 7.08622 11.0041 6.68701 10.7737C6.2878 10.5433 5.95635 10.2118 5.72602 9.8125C5.67629 9.72637 5.59438 9.66353 5.49831 9.63779ZM6.50002 8.5C6.91402 8.5 7.25002 7.996 7.25002 7.375C7.25002 6.754 6.91402 6.25 6.50002 6.25C6.08602 6.25 5.75002 6.754 5.75002 7.375C5.75002 7.996 6.08602 8.5 6.50002 8.5ZM9.50002 8.5C9.91402 8.5 10.25 7.996 10.25 7.375C10.25 6.754 9.91402 6.25 9.50002 6.25C9.08602 6.25 8.75002 6.754 8.75002 7.375C8.75002 7.996 9.08602 8.5 9.50002 8.5Z" fill="#787E85"/>
+</svg>

package/page/App/components/PublicTypes/ResourceGenerator/assets/googlesheets/disabled-google.svg

@@ -0,0 +1,3 @@
+<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.991 20.71V17.362H27.415C27.541 17.929 27.64 18.46 27.64 19.207C27.64 24.346 24.193 28 19 28C14.032 28 10 23.968 10 19C10 14.032 14.032 10 19 10C21.43 10 23.464 10.891 25.021 12.349L22.465 14.833C21.817 14.221 20.683 13.501 19 13.501C16.021 13.501 13.591 15.976 13.591 19.009C13.591 22.042 16.021 24.517 19 24.517C22.447 24.517 23.716 22.132 23.95 20.719H18.991V20.71Z" fill="black" fill-opacity="0.4"/>
+</svg>

package/page/App/components/PublicTypes/ResourceGenerator/assets/googlesheets/google-logo.svg

@@ -0,0 +1,14 @@
+<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="38" height="38" rx="1" fill="white"/>
+<g clip-path="url(#clip0_13697_1465)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.64 19.2042C27.64 18.566 27.5827 17.9524 27.4764 17.3633H19V20.8446H23.8436C23.635 21.9696 23.0009 22.9228 22.0477 23.561V25.8192H24.9564C26.6582 24.2524 27.64 21.9451 27.64 19.2042Z" fill="#4285F4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19 28.0009C21.43 28.0009 23.4673 27.195 24.9564 25.8205L22.0477 23.5623C21.2418 24.1023 20.2109 24.4214 19 24.4214C16.6559 24.4214 14.6718 22.8382 13.9641 20.7109H10.9573V23.0428C12.4382 25.9841 15.4818 28.0009 19 28.0009Z" fill="#34A853"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.9641 20.7108C13.7841 20.1708 13.6818 19.594 13.6818 19.0008C13.6818 18.4076 13.7841 17.8308 13.9641 17.2908V14.959H10.9573C10.3477 16.174 10 17.5485 10 19.0008C10 20.4531 10.3477 21.8276 10.9573 23.0426L13.9641 20.7108Z" fill="#FBBC05"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19 13.5795C20.3214 13.5795 21.5077 14.0336 22.4405 14.9255L25.0218 12.3441C23.4632 10.8918 21.4259 10 19 10C15.4818 10 12.4382 12.0168 10.9573 14.9582L13.9641 17.29C14.6718 15.1627 16.6559 13.5795 19 13.5795Z" fill="#EA4335"/>
+</g>
+<defs>
+<clipPath id="clip0_13697_1465">
+<rect width="18" height="18.0009" fill="white" transform="translate(10 10)"/>
+</clipPath>
+</defs>
+</svg>

package/page/App/components/PublicTypes/ResourceGenerator/components/ActionGenerator/ActionResourceSelector/index.tsx

@@ -0,0 +1,166 @@
+import {
+  FC,
+  Suspense,
+  // Suspense,
+  useCallback,
+  useContext,
+  // useEffect,
+  useState,
+} from "react";
+import { useTranslation } from "react-i18next";
+import { ResourceGeneratorContext } from "../../../provider";
+import { ActionResourceSelectorProps } from "./interface";
+import {
+  applyResourceItemStyle,
+  // applyResourceItemStyle,
+  containerStyle,
+  footerStyle,
+  resourceItemTimeStyle,
+  resourceItemTitleStyle,
+} from "./style";
+import { ResourceType } from "../../../../resource";
+import { Button, ButtonGroup } from "@mui/material";
+import { List } from "@/page/App/components/Actions/List/list";
+import { getIconFromResourceType } from "../../ResourceCard/utils";
+import { ACTION_MODAL_WIDTH } from "../../../config";
+import { ResourceCreator } from "../../ResourceCreator";
+import { Modal } from "@/utils/model/src/modal";
+import EditIcon from "@mui/icons-material/Edit";
+export const ActionResourceSelector: FC<ActionResourceSelectorProps> = (
+  props
+) => {
+  const {
+    actionType,
+    canBack,
+    onBack,
+    onCreateAction,
+    onCreateResource,
+    handleCreateAction,
+    onClose,
+  } = props;
+  const [editorVisible, setEditorVisible] = useState(false);
+  const { t } = useTranslation();
+
+  const { getResourceByType } = useContext(ResourceGeneratorContext);
+
+  const resourceList = getResourceByType(actionType as ResourceType).sort(
+    (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+  );
+
+  const [selectedResourceId, setSelectedResourceId] = useState<string>(
+    resourceList[0]?.resourceID
+  );
+
+  const [, setLoading] = useState(false);
+
+  const handleClickCreateAction = useCallback(() => {
+    handleCreateAction(
+      actionType,
+      selectedResourceId,
+      () => onCreateAction?.(actionType, selectedResourceId),
+      setLoading
+    );
+  }, [actionType, handleCreateAction, onCreateAction, selectedResourceId]);
+
+  return (
+    <div css={containerStyle}>
+      <List
+        bordered={false}
+        height={324}
+        data={resourceList}
+        split={false}
+        itemHeight={48}
+        renderKey={(data) => {
+          return data.resourceID;
+        }}
+        h="324px"
+        renderRaw
+        render={(r) => {
+          return (
+            <div
+              css={applyResourceItemStyle(r.resourceID === selectedResourceId)}
+              onClick={() => {
+                setSelectedResourceId(r.resourceID);
+              }}
+            >
+              <Suspense>
+                <div style={{ paddingTop: "6px" }}>
+                  {getIconFromResourceType(actionType)}
+                </div>
+              </Suspense>
+              <span css={resourceItemTitleStyle}>{r.resourceName}</span>
+              <span css={resourceItemTimeStyle}>
+                <EditIcon 
+                onClick={()=>setEditorVisible(true)}
+                />
+              </span>
+            </div>
+          );
+        }}
+      />
+
+      <div css={footerStyle}>
+        {canBack ? (
+          <Button
+            // leftIcon={<PreviousIcon />}
+            // variant="text"
+            // colorScheme="gray"
+            onClick={() => {
+              onBack("select");
+            }}
+          >
+            {t("back")}
+          </Button>
+        ) : (
+          <span />
+        )}
+        <ButtonGroup>
+          {actionType !== "impaktapps" && (
+            <Button
+              // leftIcon={<AddIcon />}
+              // colorScheme="gray"
+              onClick={() => {
+                onCreateResource?.(actionType as ResourceType);
+              }}
+            >
+              {t(
+                "editor.action.action_list.action_generator.btns.new_resource"
+              )}
+            </Button>
+          )}
+
+          <Button
+            onClick={() => {
+              handleClickCreateAction();
+              onClose();
+            }}
+            disabled={resourceList.length <= 0}
+          >
+            {t("editor.action.action_list.action_generator.btns.create_action")}
+          </Button>
+        </ButtonGroup>
+      </div>
+      <Modal
+        w={`${ACTION_MODAL_WIDTH}px`}
+        visible={editorVisible}
+        footer={false}
+        closable
+        withoutLine
+        withoutPadding
+        maskClosable={false}
+        onCancel={() => {
+          setEditorVisible(false);
+        }}
+      >
+        <ResourceCreator
+          resourceID={selectedResourceId}
+          onBack={() => {
+            setEditorVisible(false);
+          }}
+        />
+      </Modal>
+    </div>
+  );
+};
+
+ActionResourceSelector.displayName = "ActionResourceSelector";

package/page/App/components/PublicTypes/ResourceGenerator/components/ActionGenerator/ActionResourceSelector/interface.ts

@@ -0,0 +1,21 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ActionType } from "@/redux/currentApp/action/interface"
+import { ActionCreatorPage } from "../interface"
+import { ResourceType } from "../../../../resource"
+
+export type HandleDirectCreateActionFunc = (
+  actionType: ActionType,
+  resourceID: string,
+  successCallback?: () => void,
+  loadingCallback?: (loading: boolean) => void,
+) => void
+
+export interface ActionResourceSelectorProps {
+  actionType: ActionType
+  canBack?: boolean
+  onBack: (page: ActionCreatorPage) => void
+  handleCreateAction: HandleDirectCreateActionFunc
+  onCreateResource: (resourceType: ResourceType) => void
+  onCreateAction: (actionType: ActionType, resourceID?: string) => void
+  onClose:()=> void
+}

package/page/App/components/PublicTypes/ResourceGenerator/components/ActionGenerator/ActionResourceSelector/style.ts

@@ -0,0 +1,52 @@
+import { globalColor } from "@/utils/colorBuilder"
+import { css } from "@emotion/react"
+
+
+export const containerStyle = css`
+  display: flex;
+  flex-direction: column;
+`
+
+export const footerStyle = css`
+  height: 80px;
+  padding: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`
+
+export const resourceItemSelectedStyle = css`
+  background: ${globalColor(`techPurple-08`)};
+`
+
+export const applyResourceItemStyle = (selected: boolean) => {
+  return css`
+    padding: 12px 0 12px 24px;
+    display: flex;
+    align-items: center;
+    height: 48px;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+
+    &:hover {
+      background: ${globalColor(`grayBlue-09`)};
+    }
+
+    ${selected ? resourceItemSelectedStyle : ""};
+  `
+}
+
+export const resourceItemTitleStyle = css`
+  margin-left: 8px;
+  flex: 12;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  color: ${globalColor(`grayBlue-02`)};
+`
+
+export const resourceItemTimeStyle = css`
+  flex: 1;
+  color: ${globalColor(`grayBlue-02`)};
+`

package/page/App/components/PublicTypes/ResourceGenerator/components/ActionGenerator/Header/index.tsx

@@ -0,0 +1,20 @@
+
+import { FC } from "react";
+import CloseIcon from "@mui/icons-material/Close";
+import { ModalHeaderProps } from "./interface";
+import { closeIconContainerStyle, containerStyle, headerStyle } from "./style";
+import IconHotSpot from "@/utils/IconHotSpot";
+
+export const ModalHeader: FC<ModalHeaderProps> = (props) => {
+  const { title, onClickClose } = props;
+  return (
+    <div css={containerStyle}>
+      <h2 css={headerStyle}>{title}</h2>
+      {onClickClose && (
+        <IconHotSpot onClick={onClickClose} css={closeIconContainerStyle}>
+          <CloseIcon />
+        </IconHotSpot>
+      )}
+    </div>
+  );
+};

package/page/App/components/PublicTypes/ResourceGenerator/components/ActionGenerator/Header/interface.ts

@@ -0,0 +1,4 @@
+export interface ModalHeaderProps {
+  title: string
+  onClickClose?: () => void
+}

package/page/App/components/PublicTypes/ResourceGenerator/components/ActionGenerator/Header/style.ts

@@ -0,0 +1,25 @@
+import { globalColor } from "@/utils/colorBuilder"
+import { css } from "@emotion/react"
+
+export const containerStyle = css`
+  width: 100%;
+  padding: 16px 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+`
+
+export const headerStyle = css`
+  text-align: center;
+  font-size: 16px;
+  margin: 0;
+  padding: 0;
+  color: ${globalColor("grayBlue-02")};
+`
+
+export const closeIconContainerStyle = css`
+  position: absolute;
+  right: 16px;
+  top: 16px;
+`