npm - @team-monolith/cds - Versions diffs - 0.4.1 → 0.4.3 - Mend

@team-monolith/cds 0.4.1 → 0.4.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (90) hide show

package/dist/index.d.ts +2 -2
package/dist/index.js +2 -2
package/package.json +5 -1
package/public/favicon.ico +0 -0
package/public/index.html +0 -43
package/public/logo192.png +0 -0
package/public/logo512.png +0 -0
package/public/manifest.json +0 -25
package/public/robots.txt +0 -3
package/src/App.tsx +0 -7
package/src/cds/CodleDesignSystemProvider.tsx +0 -93
package/src/cds/README.md +0 -23
package/src/cds/components/AlertDialog/AlertDialog.tsx +0 -101
package/src/cds/components/AlertDialog/AlertDialogActions.tsx +0 -34
package/src/cds/components/AlertDialog/AlertDialogContent.tsx +0 -36
package/src/cds/components/AlertDialog/AlertDialogTitle.tsx +0 -63
package/src/cds/components/AlertDialog/index.tsx +0 -4
package/src/cds/components/Banner.tsx +0 -176
package/src/cds/components/Button.tsx +0 -256
package/src/cds/components/CheckboxInput.tsx +0 -270
package/src/cds/components/Input.tsx +0 -171
package/src/cds/components/InputBase.tsx +0 -226
package/src/cds/components/Pagination.tsx +0 -99
package/src/cds/components/PinInput.tsx +0 -322
package/src/cds/components/RadioInput.tsx +0 -226
package/src/cds/components/SquareButton.tsx +0 -229
package/src/cds/components/Switch.tsx +0 -129
package/src/cds/components/Tag.tsx +0 -155
package/src/cds/components/Tooltip.tsx +0 -104
package/src/cds/emotion.d.ts +0 -70
package/src/cds/foundation/color.ts +0 -83
package/src/cds/foundation/shadows.ts +0 -17
package/src/cds/icons/Arrows/index.ts +0 -2
package/src/cds/icons/Media/index.ts +0 -2
package/src/cds/icons/System/index.ts +0 -2
package/src/cds/icons/arrows.tsx +0 -116
package/src/cds/icons/brand.tsx +0 -13
package/src/cds/icons/design.tsx +0 -15
package/src/cds/icons/map.tsx +0 -14
package/src/cds/icons/system.tsx +0 -143
package/src/cds/index.ts +0 -68
package/src/cds/patterns/Card/Card.tsx +0 -294
package/src/cds/patterns/Card/class-icon.svg +0 -28
package/src/cds/patterns/Card/index.tsx +0 -2
package/src/cds/patterns/Card/material-icon.svg +0 -25
package/src/cds/patterns/Card/problem-icon.svg +0 -25
package/src/cds/patterns/Card/thumbnail/sample.png +0 -0
package/src/cds/patterns/Dialog/Dialog.tsx +0 -57
package/src/cds/patterns/Dialog/DialogContent.tsx +0 -28
package/src/cds/patterns/Dialog/DialogNavigation.tsx +0 -29
package/src/cds/patterns/Dialog/DialogNavigationContext.tsx +0 -9
package/src/cds/patterns/Dialog/DialogNavigationItem.tsx +0 -42
package/src/cds/patterns/Dialog/DialogPanel.tsx +0 -40
package/src/cds/patterns/Dialog/DialogPanels.tsx +0 -24
package/src/cds/patterns/Dialog/DialogPanelsContext.tsx +0 -9
package/src/cds/patterns/Dialog/DialogTitle.tsx +0 -55
package/src/cds/patterns/Dialog/index.tsx +0 -7
package/src/cds/patterns/Dropdown/Dropdown.tsx +0 -111
package/src/cds/patterns/Dropdown/DropdownItem.tsx +0 -203
package/src/cds/patterns/Dropdown/DropdownMenu.tsx +0 -176
package/src/cds/patterns/Dropdown/index.tsx +0 -2
package/src/cds/patterns/EmptyState/EmptyState.tsx +0 -91
package/src/cds/patterns/EmptyState/empty-state-icon.svg +0 -36
package/src/cds/patterns/EmptyState/index.tsx +0 -2
package/src/cds/patterns/Navigation/NavigationContext.tsx +0 -9
package/src/cds/patterns/Navigation/NavigationHorizontal.tsx +0 -32
package/src/cds/patterns/Navigation/NavigationItem.tsx +0 -36
package/src/cds/patterns/Navigation/NavigationVertical.tsx +0 -39
package/src/cds/patterns/Navigation/index.tsx +0 -3
package/src/cds/patterns/SegmentedControl/SegmentedControlButton.tsx +0 -55
package/src/cds/patterns/SegmentedControl/SegmentedControlGroup.tsx +0 -81
package/src/cds/patterns/SegmentedControl/SegmentedControlGroupPropsContext.tsx +0 -9
package/src/cds/patterns/SegmentedControl/SegmentedControlSquareButton.tsx +0 -51
package/src/cds/patterns/SegmentedControl/index.ts +0 -3
package/src/cds/patterns/Table/Table.tsx +0 -62
package/src/cds/patterns/Table/TableBody.tsx +0 -30
package/src/cds/patterns/Table/TableCell.tsx +0 -253
package/src/cds/patterns/Table/TableHead.tsx +0 -30
package/src/cds/patterns/Table/TablePropsContext.tsx +0 -9
package/src/cds/patterns/Table/TableRow.tsx +0 -70
package/src/cds/patterns/Table/TableVariantContext.tsx +0 -9
package/src/cds/patterns/Table/index.tsx +0 -15
package/src/cds/svg.d.ts +0 -10
package/src/cds/utils/hover.tsx +0 -24
package/src/cds/utils/reset.tsx +0 -19
package/src/cds/utils/zIndex.tsx +0 -3
package/src/index.tsx +0 -10
package/tsconfig.json +0 -23
/package/{dist → @types}/emotion.d.ts +0 -0
/package/{dist → @types}/svg.d.ts +0 -0

package/dist/index.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-/// <reference path="./svg.d.ts" />
-/// <reference path="./emotion.d.ts" />
+/// <reference path="../@types/svg.d.ts" />
+/// <reference path="../@types/emotion.d.ts" />
 export * from "./components/AlertDialog";
 export { default as Banner } from "./components/Banner";
 export * from "./components/Banner";

package/dist/index.js CHANGED Viewed

@@ -1,5 +1,5 @@
-/// <reference path="./svg.d.ts" />
-/// <reference path="./emotion.d.ts" />
+/// <reference path="../../@types/svg.d.ts" />
+/// <reference path="../../@types/emotion.d.ts" />
 export * from "./components/AlertDialog";
 export { default as Banner } from "./components/Banner";
 export * from "./components/Banner";

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
@@ -15,6 +15,10 @@
     "remixicon": "^3.4.0",
     "typescript": "^4.5.5"
   },
+  "files": [
+    "dist/**/*",
+    "@types/**/*"
+  ],
   "scripts": {
     "clean": "rimraf dist",
     "compile": "npm run clean && mkdir dist && tsc && npm run postbundle",

package/public/favicon.ico DELETED Viewed

Binary file

package/public/index.html DELETED Viewed

@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>

package/public/logo192.png DELETED Viewed

Binary file

package/public/logo512.png DELETED Viewed

Binary file

package/public/manifest.json DELETED Viewed

@@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

package/public/robots.txt DELETED Viewed

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:

package/src/App.tsx DELETED Viewed

@@ -1,7 +0,0 @@
-import React from "react";
-function App() {
-  return <div className="App">CDS</div>;
-}
-export default App;

package/src/cds/CodleDesignSystemProvider.tsx DELETED Viewed

@@ -1,93 +0,0 @@
-import { ThemeProvider } from "@emotion/react";
-import { ThemeProvider as MuiThemeProvider } from "@mui/material";
-import COLOR from "./foundation/color";
-import { createTheme } from "@mui/material";
-export const light = {
-  color: {
-    background: {
-      neutralBase: COLOR.white,
-      neutralAlt: COLOR.grey03,
-      neutralAltActive: COLOR.grey04,
-      neutralAltDisabled: COLOR.grey03,
-      primary: COLOR.blue06,
-      primaryActive: COLOR.blue07,
-      primaryDisabled: COLOR.blue03,
-      secondary: COLOR.orange06,
-      secondaryActive: COLOR.orange07,
-      secondaryDisabled: COLOR.orange03,
-      danger: COLOR.red06,
-      dangerActive: COLOR.red07,
-      dangerDisabled: COLOR.red03,
-      success: COLOR.green06,
-      successActive: COLOR.green07,
-      successDisabled: COLOR.green03,
-      info: COLOR.teal06,
-      infoActive: COLOR.teal07,
-      infoDisabled: COLOR.teal03,
-      warning: COLOR.yellow06,
-      warningActive: COLOR.yellow07,
-      warningDisabled: COLOR.yellow03,
-    },
-    foreground: {
-      neutralBase: COLOR.black,
-      neutralBaseDisabled: COLOR.grey06,
-      neutralAlt: COLOR.white,
-      neutralAltDisabled: COLOR.white,
-      primary: COLOR.blue06,
-      primaryDisabled: COLOR.blue02,
-      secondary: COLOR.orange06,
-      secondaryDisabled: COLOR.orange02,
-      danger: COLOR.red06,
-      dangerDisabled: COLOR.red02,
-      success: COLOR.green06,
-      successDisabled: COLOR.green02,
-      info: COLOR.teal06,
-      infoDisabled: COLOR.teal02,
-      warning: COLOR.yellow06,
-      warningDisabled: COLOR.yellow02,
-    },
-    container: {
-      primaryContainer: COLOR.blue01,
-      primaryOnContainer: COLOR.blue08,
-      secondaryContainer: COLOR.orange01,
-      secondaryOnContainer: COLOR.orange08,
-      dangerContainer: COLOR.red01,
-      dangerOnContainer: COLOR.red08,
-      successContainer: COLOR.green01,
-      successOnContainer: COLOR.green08,
-      infoContainer: COLOR.teal01,
-      infoOnContainer: COLOR.teal08,
-      warningContainer: COLOR.yellow01,
-      warningOnContainer: COLOR.yellow08,
-      obsidianContainer: COLOR.black,
-      obsidianOnContainer: COLOR.grey03,
-      marbleContainer: COLOR.grey03,
-      marbleOnContainer: COLOR.grey07,
-    },
-  },
-};
-// eslint-disable-next-line import/no-anonymous-default-export
-export default function (props: {
-  children: React.ReactNode;
-  fontFamily?: string;
-}): React.ReactElement {
-  const muiTheme = createTheme({
-    typography: {
-      fontFamily: props.fontFamily,
-    },
-    components: {
-      MuiButtonBase: {
-        defaultProps: {
-          disableRipple: true, // No more ripple, on the whole application 💣!
-        },
-      },
-    },
-  });
-  return (
-    <MuiThemeProvider theme={muiTheme}>
-      <ThemeProvider theme={light}>{props.children}</ThemeProvider>
-    </MuiThemeProvider>
-  );
-}

package/src/cds/README.md DELETED Viewed

@@ -1,23 +0,0 @@
-# Codle Design System
-코들 디자인 시스템을 구현합니다. 이 폴더는 앞으로 독립적인 패키지로 구현될 수 있습니다.
-### /components
-컴포넌트를 구현합니다.
-컴포넌트는 반드시 `className`과 `component` 인자를 가집니다.
-컴포넌트는 모두 스토리북에 등록해야 합니다.
-### /foundation
-색상, 그림자 등을 제공합니다.
-### /icons
-아이콘을 제공합니다.
-아이콘은 [피그마](https://www.figma.com/file/wefLB6cN0oM2VZjwYmBA6B/Codle-PD-Kit---Foundation?type=design&node-id=1-23307&t=ASkFT82aJsgxrxvr-0)에 정의된대로 24px X 24px 크기의 svg로 정의됩니다. 색상이나 크기를 변경하기 위해 Styled Component를 활용할 수 있으므로 `className` 인자를 받아야합니다.
-svg는 피그마에서 받을 수도 있고 [iconify](https://iconify.design/)에서 받을 수도 있습니다.
-아이콘은 `System/add-box-fill`과 같은 이름을 가지는데, 이 경우 `icons/system.tsx` 파일에 `AddBoxFillIcon` 컴포넌트로 정의합니다.

package/src/cds/components/AlertDialog/AlertDialog.tsx DELETED Viewed

@@ -1,101 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import { Modal as MuiModal } from "@mui/material";
-import { css, useTheme } from "@emotion/react";
-import React from "react";
-import shadows from "../../foundation/shadows";
-import styled from "@emotion/styled";
-export interface AlertDialogProps {
-  className?: string;
-  component?: React.ElementType;
-  /** `true` 값일때 모달이 노출됩니다. */
-  open: boolean;
-  /** 모달이 닫힐 때 호출되는 callback */
-  onClose?: () => void;
-  /** 모달의 내용으로 표기될 값 */
-  children: React.ReactNode;
-  /** 모달 좌측에 표기될 아이콘 */
-  icon?: React.ReactNode;
-}
-export const AlertDialog = React.forwardRef<any, AlertDialogProps>(
-  (props, ref) => {
-    const {
-      className,
-      component: Component = "div",
-      open,
-      onClose,
-      children,
-      icon,
-      ...other
-    } = props;
-    const theme = useTheme();
-    return (
-      <MuiModal open={open} onClose={onClose} ref={ref} {...other}>
-        <Component
-          className={className}
-          css={css`
-            width: 480px;
-            background: ${theme.color.background.neutralBase};
-            box-shadow: ${shadows.shadow04};
-            border-radius: 16px;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            padding: 24px;
-            box-sizing: border-box;
-            display: grid;
-            ${icon
-              ? css`
-                  grid-template-areas:
-                    "icon title"
-                    "iconPadding content"
-                    "actions actions";
-                `
-              : css`
-                  grid-template-areas:
-                    "title"
-                    "content"
-                    "actions";
-                `}
-            gap: 8px 16px;
-          `}
-        >
-          {icon && (
-            <>
-              <IconDiv>{icon}</IconDiv>
-              <IconPadding />
-            </>
-          )}
-          {children}
-        </Component>
-      </MuiModal>
-    );
-  }
-);
-const IconDiv = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  grid-area: icon;
-  ${({ theme }) =>
-    css`
-      color: ${theme.color.background.infoActive};
-    `}
-  svg {
-    width: 32px;
-    height: 32px;
-  }
-`;
-const IconPadding = styled.div`
-  grid-area: iconPadding;
-`;

package/src/cds/components/AlertDialog/AlertDialogActions.tsx DELETED Viewed

@@ -1,34 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import { css } from "@emotion/react";
-import React from "react";
-export interface AlertDialogActionsProps {
-  className?: string;
-  component?: React.ElementType;
-  /** Content 내용으로 표기될 값 */
-  children: React.ReactNode;
-}
-export const AlertDialogActions = React.forwardRef<
-  any,
-  AlertDialogActionsProps
->((props, ref) => {
-  const { className, component: Component = "div", children, ...other } = props;
-  return (
-    <Component
-      {...other}
-      ref={ref}
-      className={className}
-      css={css`
-        grid-area: actions;
-        margin-top: 8px;
-        display: flex;
-        gap: 16px;
-        justify-content: flex-end;
-      `}
-    >
-      {children}
-    </Component>
-  );
-});

package/src/cds/components/AlertDialog/AlertDialogContent.tsx DELETED Viewed

@@ -1,36 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import { css, useTheme } from "@emotion/react";
-import React from "react";
-export interface AlertDialogContentProps {
-  className?: string;
-  component?: React.ElementType;
-  /** Content 내용으로 표기될 값 */
-  children: React.ReactNode;
-}
-export const AlertDialogContent = React.forwardRef<
-  any,
-  AlertDialogContentProps
->((props, ref) => {
-  const { className, component: Component = "div", children, ...other } = props;
-  const theme = useTheme();
-  return (
-    <Component
-      {...other}
-      ref={ref}
-      className={className}
-      css={css`
-        grid-area: content;
-        font-style: normal;
-        font-size: 18px;
-        line-height: 28px;
-        color: ${theme.color.foreground.neutralBase};
-      `}
-    >
-      {children}
-    </Component>
-  );
-});

package/src/cds/components/AlertDialog/AlertDialogTitle.tsx DELETED Viewed

@@ -1,63 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import { css, useTheme } from "@emotion/react";
-import React from "react";
-import SquareButton from "../SquareButton";
-import { CloseFillIcon } from "../../icons/system";
-export interface AlertDialogTitleProps {
-  className?: string;
-  component?: React.ElementType;
-  /**
-   * 제목의 X 버튼을 누르를 때 호출되는 callback.
-   * 이 속성이 전달되면 X 버튼을 Title 영역에 그립니다.
-   */
-  onClose?: () => void;
-  /** Content 내용으로 표기될 값 */
-  children: React.ReactNode;
-}
-export const AlertDialogTitle = React.forwardRef<any, AlertDialogTitleProps>(
-  (props, ref) => {
-    const {
-      className,
-      component: Component = "div",
-      onClose,
-      children,
-      ...other
-    } = props;
-    const theme = useTheme();
-    return (
-      <>
-        <Component
-          {...other}
-          ref={ref}
-          className={className}
-          css={css`
-            grid-area: title;
-            font-family: "Pretendard";
-            font-style: normal;
-            font-weight: 500;
-            font-size: 20px;
-            line-height: 36px;
-            color: ${theme.color.foreground.neutralBase};
-            display: flex;
-            justify-content: space-between;
-          `}
-        >
-          {children}
-          {onClose && (
-            <SquareButton
-              color="icon"
-              size="small"
-              icon={<CloseFillIcon />}
-              onClick={onClose}
-            />
-          )}
-        </Component>
-      </>
-    );
-  }
-);

package/src/cds/components/AlertDialog/index.tsx DELETED Viewed

@@ -1,4 +0,0 @@
-export * from "./AlertDialog";
-export * from "./AlertDialogTitle";
-export * from "./AlertDialogContent";
-export * from "./AlertDialogActions";

package/src/cds/components/Banner.tsx DELETED Viewed

@@ -1,176 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import { css, SerializedStyles, Theme, useTheme } from "@emotion/react";
-import styled from "@emotion/styled";
-import React from "react";
-import COLOR from "../foundation/color";
-import { CloseFillIcon } from "../icons/system";
-import { RESET_BUTTON } from "../utils/reset";
-export type BannerColor = "red" | "blue" | "green" | "yellow";
-export interface BannerProps {
-  className?: string;
-  component?: React.ElementType;
-  /** 컴포넌트 내 헤드라인으로 표기될 문자열 */
-  headline?: string;
-  /** 컴포넌트 내용으로 표기될 값 */
-  content?: React.ReactNode;
-  /** 컴포넌트 좌측에 표기될 아이콘 */
-  icon?: React.ReactNode;
-  /** 컴포넌트의 색상 */
-  color: BannerColor;
-  /** 컴포넌트 우측에 표기될 버튼의 라벨 */
-  buttonLabel?: string;
-  /** 컴포넌트 우측 버튼 클릭 시 호출될 콜백 함수 */
-  onButtonClick?: () => void;
-  /** 컴포넌트 우측에 표기될 닫기 버튼 유무 */
-  close?: boolean;
-  /** 닫기 버튼 클릭 시 호출될 콜백 함수 */
-  onClose?: () => void;
-  /** 전체 너비 유무 */
-  fullWidth?: boolean;
-}
-const COLOR_TO_STYLE = (theme: Theme, color: BannerColor): SerializedStyles =>
-  ({
-    red: css`
-      background: ${theme.color.container.dangerContainer};
-      color: ${theme.color.container.dangerOnContainer};
-    `,
-    blue: css`
-      background: ${theme.color.container.primaryContainer};
-      color: ${theme.color.container.primaryOnContainer};
-    `,
-    green: css`
-      background: ${theme.color.container.successContainer};
-      color: ${theme.color.container.successOnContainer};
-    `,
-    yellow: css`
-      background: ${theme.color.container.warningContainer};
-      color: ${theme.color.container.warningOnContainer};
-    `,
-  }[color]);
-/**
- * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=44-2847&t=bhnL1ombbddld3RQ-0)
- */
-const Banner = React.forwardRef<any, BannerProps>(
-  (props, ref): React.ReactElement => {
-    const {
-      className,
-      component: Component = "div",
-      headline,
-      content,
-      icon,
-      color,
-      buttonLabel,
-      onButtonClick,
-      close,
-      onClose,
-      fullWidth,
-      ...other
-    } = props;
-    const theme = useTheme();
-    return (
-      <Component
-        {...other}
-        ref={ref}
-        className={className}
-        css={[
-          css`
-            box-sizing: border-box;
-            display: flex;
-            align-items: center;
-            color: ${COLOR.white};
-            line-height: 125%;
-          `,
-          COLOR_TO_STYLE(theme, color),
-          fullWidth
-            ? css`
-                width: 100%;
-              `
-            : css`
-                border-radius: 12px;
-                width: fit-content;
-                min-width: 343px;
-              `,
-        ]}
-      >
-        {icon && <IconDiv>{icon}</IconDiv>}
-        <TextContainer setPaddingRight={!close && !buttonLabel}>
-          {headline && <HeadlineDiv>{headline}</HeadlineDiv>}
-          {content && <div>{content}</div>}
-        </TextContainer>
-        {buttonLabel && (
-          <BannerButton onClick={onButtonClick}>{buttonLabel}</BannerButton>
-        )}
-        {close && (
-          <CloseButton onClick={onClose}>
-            <StyledCloseFillIcon />
-          </CloseButton>
-        )}
-      </Component>
-    );
-  }
-);
-const StyledCloseFillIcon = styled(CloseFillIcon)`
-  display: block;
-  padding: 14px;
-  width: 20px;
-  height: 20px;
-  color: currentColor;
-`;
-const IconDiv = styled.div`
-  display: flex;
-  align-items: center;
-  padding: 16px 0px 16px 16px;
-`;
-const HeadlineDiv = styled.div`
-  font-weight: 700;
-`;
-const TextContainer = styled.div<{ setPaddingRight: boolean }>`
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  padding: 16px 0px 16px 16px;
-  gap: 4px;
-  ${(props) =>
-    props.setPaddingRight &&
-    css`
-      padding-right: 16px;
-    `};
-`;
-const BannerButton = styled.button`
-  ${RESET_BUTTON}
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 10px 12px;
-  cursor: pointer;
-  color: currentColor;
-`;
-const CloseButton = styled.button`
-  ${RESET_BUTTON}
-  cursor: pointer;
-  color: currentColor;
-`;
-export default Banner;