@team-monolith/cds 0.8.3 → 0.9.0

package/README.md

@@ -1,46 +1,26 @@
-# Getting Started with Create React App
+# Codle Design System
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+코들 디자인 시스템을 구현합니다.
 
-## Available Scripts
+### src/cds/components
 
-In the project directory, you can run:
+컴포넌트를 구현합니다.
+컴포넌트는 반드시 `className`과 `component` 인자를 가집니다.
+컴포넌트는 모두 스토리북에 등록해야 합니다.
 
-### `npm start`
+### src/cds/foundation
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+색상, 그림자 등을 제공합니다.
 
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
+### src/cds/icons
 
-### `npm test`
+아이콘을 제공합니다.
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+아이콘은 [피그마](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` 인자를 받아야합니다.
 
-### `npm run build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
+아이콘은 컴파일 과정에서, remixicon 라이브러리의 svg 파일을 읽어와서 string 형태와 React JSX 형태로 export 되는 코드가 `src/cds/icons` 폴더 안에 자동 생성됩니다. 
+생성되는 규칙은 다음과 같습니다.
+- 네이밍은 remixicon 라이브러리의 svg 파일 이름에서 다음과 같이 변환됩니다.
+- string 형태로 export되는 값은 다음 예시와 같이 camel case로 네이밍됩니다. (예: `arrowDownCircleFillSvg`)
+- React JSX 형태로 export되는 값은 다음 예시와 같이 pascal case로 네이밍됩니다. (예: `ArrowDownCircleFillIcon`)
+- svg 파일 이름이 숫자로 시작하는 경우, 제일 앞에 `i`를 붙입니다. (예: `4k-fill.svg` -> `i4KFillSvg`, `I4KFillIcon`)

package/dist/components/AlertDialog/AlertDialog.js

@@ -24,22 +24,23 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @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";
+import { MOBILE } from "../../foundation/breakpoints";
+import AlertDialogContext from "./AlertDialogContext";
 export var AlertDialog = React.forwardRef(function (props, ref) {
     var className = props.className, _a = props.component, Component = _a === void 0 ? "div" : _a, open = props.open, onClose = props.onClose, children = props.children, icon = props.icon, other = __rest(props, ["className", "component", "open", "onClose", "children", "icon"]);
     var theme = useTheme();
-    return (_jsx(MuiModal, __assign({ open: open, onClose: onClose, ref: ref }, other, { children: _jsxs(Component, __assign({ className: className, css: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n            width: 480px;\n            background: ", ";\n            box-shadow: ", ";\n            border-radius: 16px;\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            padding: 24px;\n            box-sizing: border-box;\n\n            display: grid;\n            ", "\n\n            gap: 8px 16px;\n          "], ["\n            width: 480px;\n            background: ", ";\n            box-shadow: ", ";\n            border-radius: 16px;\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            padding: 24px;\n            box-sizing: border-box;\n\n            display: grid;\n            ", "\n\n            gap: 8px 16px;\n          "])), theme.color.background.neutralBase, shadows.shadow04, icon
-                ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                  grid-template-areas:\n                    \"icon title\"\n                    \"iconPadding content\"\n                    \"actions actions\";\n                "], ["\n                  grid-template-areas:\n                    \"icon title\"\n                    \"iconPadding content\"\n                    \"actions actions\";\n                "]))) : css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                  grid-template-areas:\n                    \"title\"\n                    \"content\"\n                    \"actions\";\n                "], ["\n                  grid-template-areas:\n                    \"title\"\n                    \"content\"\n                    \"actions\";\n                "])))) }, { children: [icon && (_jsxs(_Fragment, { children: [_jsx(IconDiv, { children: icon }), _jsx(IconPadding, {})] })), children] })) })));
+    return (_jsx(MuiModal, __assign({ open: open, onClose: onClose, ref: ref }, other, { children: _jsxs(Component, __assign({ className: className, css: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            width: 480px;\n            background: ", ";\n            box-shadow: ", ";\n            border-radius: 16px;\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            padding: 24px;\n            box-sizing: border-box;\n\n            display: grid;\n            ", "\n\n            gap: 8px 16px;\n\n            ", "\n          "], ["\n            width: 480px;\n            background: ", ";\n            box-shadow: ", ";\n            border-radius: 16px;\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            padding: 24px;\n            box-sizing: border-box;\n\n            display: grid;\n            ", "\n\n            gap: 8px 16px;\n\n            ", "\n          "])), theme.color.background.neutralBase, shadows.shadow04, icon
+                ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                  grid-template-areas:\n                    \"icon title\"\n                    \"iconPadding content\"\n                    \"actions actions\";\n                "], ["\n                  grid-template-areas:\n                    \"icon title\"\n                    \"iconPadding content\"\n                    \"actions actions\";\n                "]))) : css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                  grid-template-areas:\n                    \"title\"\n                    \"content\"\n                    \"actions\";\n                "], ["\n                  grid-template-areas:\n                    \"title\"\n                    \"content\"\n                    \"actions\";\n                "]))), MOBILE(css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n              width: calc(100% - 24px);\n\n              grid-template-areas:\n                \"title\"\n                \"content\"\n                \"actions\";\n            "], ["\n              width: calc(100% - 24px);\n\n              grid-template-areas:\n                \"title\"\n                \"content\"\n                \"actions\";\n            "]))))) }, { children: [icon && _jsx(IconDiv, { children: icon }), _jsx(AlertDialogContext.Provider, __assign({ value: { icon: icon } }, { children: children }))] })) })));
 });
-var IconDiv = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  grid-area: icon;\n  ", "\n  svg {\n    width: 32px;\n    height: 32px;\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  grid-area: icon;\n  ", "\n  svg {\n    width: 32px;\n    height: 32px;\n  }\n"])), function (_a) {
+var IconDiv = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  grid-area: icon;\n  ", "\n  svg {\n    width: 32px;\n    height: 32px;\n  }\n\n  ", "\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  grid-area: icon;\n  ", "\n  svg {\n    width: 32px;\n    height: 32px;\n  }\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
-    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), theme.color.background.infoActive);
-});
-var IconPadding = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  grid-area: iconPadding;\n"], ["\n  grid-area: iconPadding;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), theme.color.background.infoActive);
+}, MOBILE(css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: none;\n  "], ["\n    display: none;\n  "])))));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/components/AlertDialog/AlertDialogContext.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+declare const _default: React.Context<{
+    icon?: React.ReactNode;
+}>;
+export default _default;

package/dist/components/AlertDialog/AlertDialogContext.js

@@ -0,0 +1,2 @@
+import React from "react";
+export default React.createContext({});

package/dist/components/AlertDialog/AlertDialogTitle.js

@@ -30,9 +30,12 @@ import { css, useTheme } from "@emotion/react";
 import React from "react";
 import SquareButton from "../SquareButton";
 import { CloseFillIcon } from "../../icons";
+import AlertDialogContext from "./AlertDialogContext";
+import { MOBILE } from "../../foundation/breakpoints";
 export var AlertDialogTitle = React.forwardRef(function (props, ref) {
     var className = props.className, _a = props.component, Component = _a === void 0 ? "div" : _a, onClose = props.onClose, children = props.children, other = __rest(props, ["className", "component", "onClose", "children"]);
+    var icon = React.useContext(AlertDialogContext).icon;
     var theme = useTheme();
-    return (_jsx(_Fragment, { children: _jsxs(Component, __assign({}, other, { ref: ref, className: className, css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            grid-area: title;\n            font-family: \"Pretendard\";\n            font-style: normal;\n            font-weight: 500;\n            font-size: 20px;\n            line-height: 36px;\n            color: ", ";\n\n            display: flex;\n            justify-content: space-between;\n          "], ["\n            grid-area: title;\n            font-family: \"Pretendard\";\n            font-style: normal;\n            font-weight: 500;\n            font-size: 20px;\n            line-height: 36px;\n            color: ", ";\n\n            display: flex;\n            justify-content: space-between;\n          "])), theme.color.foreground.neutralBase) }, { children: [children, onClose && (_jsx(SquareButton, { color: "icon", size: "small", icon: _jsx(CloseFillIcon, {}), onClick: onClose }))] })) }));
+    return (_jsx(_Fragment, { children: _jsxs(Component, __assign({}, other, { ref: ref, className: className, css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            grid-area: title;\n            font-family: \"Pretendard\";\n            font-style: normal;\n            font-weight: 500;\n            font-size: 20px;\n            line-height: 36px;\n            color: ", ";\n\n            display: flex;\n            justify-content: space-between;\n          "], ["\n            grid-area: title;\n            font-family: \"Pretendard\";\n            font-style: normal;\n            font-weight: 500;\n            font-size: 20px;\n            line-height: 36px;\n            color: ", ";\n\n            display: flex;\n            justify-content: space-between;\n          "])), theme.color.foreground.neutralBase) }, { children: [_jsxs("div", __assign({ css: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n              display: flex;\n              flex-direction: column;\n              justify-content: center;\n              align-items: flex-start;\n              gap: 16px;\n            "], ["\n              display: flex;\n              flex-direction: column;\n              justify-content: center;\n              align-items: flex-start;\n              gap: 16px;\n            "]))) }, { children: [icon && (_jsx("div", __assign({ css: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                  display: none;\n                  ", "\n                "], ["\n                  display: none;\n                  ", "\n                "])), MOBILE(css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    display: flex;\n                    justify-content: center;\n                    align-items: center;\n                    color: ", ";\n\n                    svg {\n                      width: 32px;\n                      height: 32px;\n                    }\n                  "], ["\n                    display: flex;\n                    justify-content: center;\n                    align-items: center;\n                    color: ", ";\n\n                    svg {\n                      width: 32px;\n                      height: 32px;\n                    }\n                  "])), theme.color.background.infoActive))) }, { children: icon }))), children] })), onClose && (_jsx(SquareButton, { color: "icon", size: "small", icon: _jsx(CloseFillIcon, {}), onClick: onClose }))] })) }));
 });
-var templateObject_1;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/components/Button.d.ts

@@ -17,6 +17,8 @@ export interface ButtonOwnProps<RootComponentType extends React.ElementType> {
     endIcon?: React.ReactNode;
     /** 컴포넌트 내 표기될 문자열 */
     label: string;
+    /** 전체 너비 유무 */
+    fullWidth?: boolean;
 }
 export type ButtonProps<RootComponentType extends React.ElementType = ButtonTypeMap["defaultComponent"]> = PolymorphicProps<ButtonTypeMap<RootComponentType>, RootComponentType>;
 export interface ButtonTypeMap<RootComponentType extends React.ElementType = "button"> {

package/dist/components/Button.js

@@ -56,10 +56,10 @@ var SIZE_TO_LABEL_STYLE = {
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=20-173&t=cXcCv3QijbX7MkoC-0)
  */
 var Button = React.forwardRef(function Button(props, ref) {
-    var className = props.className, _a = props.component, Component = _a === void 0 ? "button" : _a, disabled = props.disabled, color = props.color, size = props.size, startIcon = props.startIcon, endIcon = props.endIcon, label = props.label, other = __rest(props, ["className", "component", "disabled", "color", "size", "startIcon", "endIcon", "label"]);
+    var className = props.className, _a = props.component, Component = _a === void 0 ? "button" : _a, disabled = props.disabled, color = props.color, size = props.size, startIcon = props.startIcon, endIcon = props.endIcon, label = props.label, fullWidth = props.fullWidth, other = __rest(props, ["className", "component", "disabled", "color", "size", "startIcon", "endIcon", "label", "fullWidth"]);
     var theme = useTheme();
     return (_jsxs(Component, __assign({ type: "button" }, other, { className: className, ref: ref, css: [
-            css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n          display: inline-flex;\n          align-items: center;\n          gap: 8px;\n\n          border: none;\n          border-radius: 8px;\n\n          cursor: pointer;\n          &:disabled {\n            cursor: default;\n            pointer-events: none;\n          }\n\n          font: inherit;\n          text-decoration: none;\n        "], ["\n          display: inline-flex;\n          align-items: center;\n          gap: 8px;\n\n          border: none;\n          border-radius: 8px;\n\n          cursor: pointer;\n          &:disabled {\n            cursor: default;\n            pointer-events: none;\n          }\n\n          font: inherit;\n          text-decoration: none;\n        "]))),
+            css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          gap: 8px;\n\n          border: none;\n          border-radius: 8px;\n\n          cursor: pointer;\n          &:disabled {\n            cursor: default;\n            pointer-events: none;\n          }\n\n          font: inherit;\n          text-decoration: none;\n\n          width: ", ";\n        "], ["\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          gap: 8px;\n\n          border: none;\n          border-radius: 8px;\n\n          cursor: pointer;\n          &:disabled {\n            cursor: default;\n            pointer-events: none;\n          }\n\n          font: inherit;\n          text-decoration: none;\n\n          width: ", ";\n        "])), (fullWidth ? "100%" : "auto")),
             COLOR_TO_BUTTON_STYLE(theme, color),
             SIZE_TO_BUTTON_STYLE[size],
         ], disabled: disabled }, { children: [startIcon, _jsx(Label, __assign({ size: size }, { children: label })), endIcon] })));

package/dist/icons/Custom.d.ts

@@ -11,3 +11,15 @@ export declare const customProblemSvg: string;
 export declare const CustomProblemIcon: (props: {
     className?: string;
 }) => JSX.Element;
+export declare const customSymbolSvg: string;
+export declare const CustomSymbolIcon: (props: {
+    className?: string;
+}) => JSX.Element;
+export declare const customGoogleSvg: string;
+export declare const CustomGoogleIcon: (props: {
+    className?: string;
+}) => JSX.Element;
+export declare const customWhaleSvg: string;
+export declare const CustomWhaleIcon: (props: {
+    className?: string;
+}) => JSX.Element;

package/dist/icons/Custom.js

@@ -19,3 +19,12 @@ export var CustomMaterialIcon = function (props) { return (_jsxs("svg", __assign
 import customProblemSvgImport from "./custom/problem.svg";
 export var customProblemSvg = customProblemSvgImport;
 export var CustomProblemIcon = function (props) { return (_jsxs("svg", __assign({}, props, { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("rect", { x: "1.5", y: "1.5", width: "21", height: "21", rx: "10", fill: "#F4FAE8" }), _jsx("path", { d: "M17.6719 8.48577V18.9031C17.6719 19.2326 17.4052 19.5 17.0766 19.5H7.33644C7.0079 19.5 6.74121 19.2326 6.74121 18.9031V5.34721C6.74121 5.01771 7.0079 4.75024 7.33644 4.75024H13.9472C14.1053 4.75024 14.2565 4.81297 14.3685 4.92534L17.4973 8.06321C17.6086 8.17488 17.6719 8.32722 17.6719 8.48577Z", fill: "#B3ECCD" }), _jsx("path", { d: "M13.9912 4.94874V8.28721C13.9912 8.39681 14.0799 8.48505 14.1885 8.48505H17.4732C17.6485 8.48505 17.7372 8.27273 17.6141 8.14796L14.3294 4.80949C14.205 4.68334 13.9912 4.77158 13.9912 4.94874Z", fill: "#43C422" }), _jsx("path", { d: "M8.74482 13.1685C8.87885 13.1086 8.97439 13.0148 9.03212 12.888C9.08986 12.7611 9.11873 12.5922 9.11873 12.382V11.7064C9.11873 11.2356 9.20258 10.8785 9.37029 10.6345C9.538 10.3905 9.76138 10.2278 10.0398 10.1465C10.3181 10.0651 10.6962 10.0251 11.1732 10.0251V10.9682C10.9415 10.9682 10.7642 10.9985 10.6419 11.0585C10.5195 11.1184 10.435 11.2101 10.3889 11.3335C10.3429 11.4569 10.3202 11.6223 10.3202 11.8305V12.7198C10.3202 12.9479 10.2624 13.1437 10.1477 13.3071C10.0329 13.4705 9.81981 13.6028 9.50845 13.7035C9.19708 13.8048 8.762 13.8551 8.20251 13.8551V13.2602C8.43002 13.2602 8.61079 13.2299 8.74482 13.1699V13.1685ZM8.20251 13.2588H9.25963V14.3942H8.20251V13.2588ZM10.0398 17.5121C9.76138 17.4321 9.538 17.2694 9.37029 17.0254C9.20258 16.7814 9.11873 16.4236 9.11873 15.9535V15.2745C9.11873 15.0642 9.08986 14.8953 9.03212 14.7671C8.97439 14.6389 8.87816 14.5451 8.74482 14.4845C8.61079 14.4245 8.43002 14.3942 8.20251 14.3942V13.8027C8.76132 13.8027 9.19708 13.8524 9.50845 13.9516C9.81981 14.0509 10.0329 14.1832 10.1477 14.348C10.2624 14.5134 10.3202 14.7099 10.3202 14.9381V15.8273C10.3202 16.0355 10.3429 16.2009 10.3889 16.3243C10.435 16.4477 10.5188 16.5394 10.6419 16.5994C10.7649 16.6593 10.9415 16.6897 11.1732 16.6897V17.6327C10.6962 17.6327 10.3181 17.5927 10.0398 17.5127V17.5121Z", fill: "#1FBB26" }), _jsx("path", { d: "M14.3733 10.1443C14.6516 10.2243 14.875 10.3863 15.0427 10.631C15.2104 10.875 15.2943 11.2328 15.2943 11.7029V12.3819C15.2943 12.5922 15.3232 12.7617 15.3809 12.8893C15.4386 13.0175 15.5349 13.1112 15.6682 13.1719C15.8016 13.2326 15.983 13.2622 16.2105 13.2622V13.8536C15.6517 13.8536 15.2159 13.804 14.9046 13.7048C14.5932 13.6055 14.3802 13.4731 14.2654 13.3084C14.1506 13.1429 14.0935 12.9465 14.0935 12.7183V11.8291C14.0935 11.6209 14.0709 11.4554 14.0248 11.332C13.9788 11.2087 13.8942 11.117 13.7719 11.057C13.6495 10.997 13.4722 10.9667 13.2406 10.9667V10.0237C13.7176 10.0237 14.0956 10.0637 14.374 10.1436L14.3733 10.1443ZM15.6682 14.4872C15.5342 14.5471 15.4386 14.6409 15.3809 14.7677C15.3232 14.8952 15.2943 15.0634 15.2943 15.2737V15.9492C15.2943 16.4201 15.2104 16.7771 15.0427 17.0212C14.875 17.2652 14.6516 17.4279 14.3733 17.5092C14.0949 17.5906 13.7169 17.6305 13.2399 17.6305V16.6875C13.4715 16.6875 13.6488 16.6572 13.7712 16.5972C13.8935 16.5372 13.9781 16.4456 14.0241 16.3222C14.0702 16.1988 14.0928 16.0333 14.0928 15.8252V14.9359C14.0928 14.7077 14.1499 14.512 14.2647 14.3486C14.3795 14.1852 14.5925 14.0536 14.9039 13.9522C15.2153 13.8509 15.6503 13.8006 16.2098 13.8006V14.3955C15.9823 14.3955 15.8016 14.4258 15.6675 14.4858L15.6682 14.4872ZM16.2105 14.3968H15.1534V13.2615H16.2105V14.3968Z", fill: "#1FBB26" })] }))); };
+import customSymbolSvgImport from "./custom/symbol.svg";
+export var customSymbolSvg = customSymbolSvgImport;
+export var CustomSymbolIcon = function (props) { return (_jsx("svg", __assign({}, props, { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { fill: "currentColor", d: "M11.8927 2C6.98164 2 3 5.80096 3 10.4903C3 14.0308 5.26988 17.0622 8.4957 18.336C9.05262 18.5557 9.36122 19.1512 9.19366 19.7238L8.83323 20.9592C8.66206 21.5427 9.17196 22.1009 9.76987 21.9845C11.478 21.6495 14.564 20.7587 17.0701 18.4644C19.9898 15.7908 20.7854 12.9527 20.7854 10.4915C20.7854 5.80337 16.8037 2.0012 11.8927 2.0012V2Z" }) }))); };
+import customGoogleSvgImport from "./custom/google.svg";
+export var customGoogleSvg = customGoogleSvgImport;
+export var CustomGoogleIcon = function (props) { return (_jsx("svg", __assign({}, props, { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M3.06364 7.50914C4.70909 4.24092 8.09084 2 12 2C14.6954 2 16.959 2.99095 18.6909 4.60455L15.8227 7.47274C14.7864 6.48185 13.4681 5.97727 12 5.97727C9.39542 5.97727 7.19084 7.73637 6.40455 10.1C6.2045 10.7 6.09086 11.3409 6.09086 12C6.09086 12.6591 6.2045 13.3 6.40455 13.9C7.19084 16.2636 9.39542 18.0227 12 18.0227C13.3454 18.0227 14.4909 17.6682 15.3864 17.0682C16.4454 16.3591 17.15 15.3 17.3818 14.05H12V10.1818H21.4181C21.5364 10.8363 21.6 11.5182 21.6 12.2273C21.6 15.2727 20.5091 17.8363 18.6181 19.5773C16.9636 21.1046 14.7 22 12 22C8.09084 22 4.70909 19.7591 3.06364 16.4909C2.38638 15.1409 2 13.6136 2 12C2 10.3864 2.38638 8.85911 3.06364 7.50914Z", fill: "currentColor" }) }))); };
+import customWhaleSvgImport from "./custom/whale.svg";
+export var customWhaleSvg = customWhaleSvgImport;
+export var CustomWhaleIcon = function (props) { return (_jsxs("svg", __assign({}, props, { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M13.834 5.80006C12.7674 6.51562 11.9359 7.17053 11.2243 7.73094C9.69999 8.93152 8.72638 9.69833 7.17354 9.69833C5.3568 9.69833 2.43202 7.88378 3.45298 4.28945C3.46442 4.26459 3.46614 4.23632 3.45779 4.21025C3.44944 4.18419 3.43165 4.16226 3.40796 4.14882C3.38264 4.13564 3.35343 4.13223 3.32579 4.13919C3.29816 4.14613 3.27398 4.16301 3.25781 4.18662C1.78218 6.32766 1.13261 8.93724 1.43085 11.5261C1.7291 14.1151 2.95467 16.5055 4.87785 18.2495C3.97843 19.1515 2.91239 19.8677 1.73986 20.3574C1.71407 20.3695 1.69226 20.3889 1.67698 20.4131C1.6617 20.4373 1.6536 20.4654 1.6536 20.4942C1.6536 20.5229 1.6617 20.551 1.67698 20.5752C1.69226 20.5995 1.71407 20.6188 1.73986 20.6311C3.70974 21.2359 6.05046 21.1059 7.87921 20.1774L7.89722 20.1682C8.47353 19.8761 9.01631 19.5211 9.51577 19.1098C10.1437 18.6346 10.6948 18.0643 11.1493 17.4193C12.0817 16.1083 13.0711 14.0805 14.1897 11.1727C15.7272 7.1761 17.9973 5.21638 20.2885 4.20476C20.3577 4.17452 20.4281 4.14579 20.4988 4.12008C20.5693 4.09438 20.5588 4.046 20.4988 4.0354C20.3953 4.0178 20.2912 4.00568 20.1864 3.99912C19.1804 3.9235 16.628 3.9235 13.834 5.80006Z", fill: "currentColor" }), _jsx("path", { d: "M20.9522 4.47713L20.8396 4.51192C18.2391 5.43581 16.0276 8.04272 14.5922 11.8427C13.6102 14.4572 12.7619 16.1779 11.756 17.5994C11.305 18.2428 10.7569 18.8112 10.1314 19.2839C9.80568 19.5468 9.4609 19.7849 9.09992 19.9961L8.46783 20.3726C10.5586 21.1145 12.8272 21.1799 14.9568 20.5599C17.0863 19.9398 18.9703 18.6653 20.3455 16.9143C21.7208 15.1634 22.5185 13.0234 22.6272 10.7936C22.736 8.56377 22.1504 6.35543 20.9522 4.47713Z", fill: "currentColor" })] }))); };

package/dist/icons/custom/google.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.06364 7.50914C4.70909 4.24092 8.09084 2 12 2C14.6954 2 16.959 2.99095 18.6909 4.60455L15.8227 7.47274C14.7864 6.48185 13.4681 5.97727 12 5.97727C9.39542 5.97727 7.19084 7.73637 6.40455 10.1C6.2045 10.7 6.09086 11.3409 6.09086 12C6.09086 12.6591 6.2045 13.3 6.40455 13.9C7.19084 16.2636 9.39542 18.0227 12 18.0227C13.3454 18.0227 14.4909 17.6682 15.3864 17.0682C16.4454 16.3591 17.15 15.3 17.3818 14.05H12V10.1818H21.4181C21.5364 10.8363 21.6 11.5182 21.6 12.2273C21.6 15.2727 20.5091 17.8363 18.6181 19.5773C16.9636 21.1046 14.7 22 12 22C8.09084 22 4.70909 19.7591 3.06364 16.4909C2.38638 15.1409 2 13.6136 2 12C2 10.3864 2.38638 8.85911 3.06364 7.50914Z" fill="currentColor"/>
+</svg>

package/dist/icons/custom/symbol.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill="currentColor"
+    d="M11.8927 2C6.98164 2 3 5.80096 3 10.4903C3 14.0308 5.26988 17.0622 8.4957 18.336C9.05262 18.5557 9.36122 19.1512 9.19366 19.7238L8.83323 20.9592C8.66206 21.5427 9.17196 22.1009 9.76987 21.9845C11.478 21.6495 14.564 20.7587 17.0701 18.4644C19.9898 15.7908 20.7854 12.9527 20.7854 10.4915C20.7854 5.80337 16.8037 2.0012 11.8927 2.0012V2Z" />
+</svg>

package/dist/icons/custom/whale.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M13.834 5.80006C12.7674 6.51562 11.9359 7.17053 11.2243 7.73094C9.69999 8.93152 8.72638 9.69833 7.17354 9.69833C5.3568 9.69833 2.43202 7.88378 3.45298 4.28945C3.46442 4.26459 3.46614 4.23632 3.45779 4.21025C3.44944 4.18419 3.43165 4.16226 3.40796 4.14882C3.38264 4.13564 3.35343 4.13223 3.32579 4.13919C3.29816 4.14613 3.27398 4.16301 3.25781 4.18662C1.78218 6.32766 1.13261 8.93724 1.43085 11.5261C1.7291 14.1151 2.95467 16.5055 4.87785 18.2495C3.97843 19.1515 2.91239 19.8677 1.73986 20.3574C1.71407 20.3695 1.69226 20.3889 1.67698 20.4131C1.6617 20.4373 1.6536 20.4654 1.6536 20.4942C1.6536 20.5229 1.6617 20.551 1.67698 20.5752C1.69226 20.5995 1.71407 20.6188 1.73986 20.6311C3.70974 21.2359 6.05046 21.1059 7.87921 20.1774L7.89722 20.1682C8.47353 19.8761 9.01631 19.5211 9.51577 19.1098C10.1437 18.6346 10.6948 18.0643 11.1493 17.4193C12.0817 16.1083 13.0711 14.0805 14.1897 11.1727C15.7272 7.1761 17.9973 5.21638 20.2885 4.20476C20.3577 4.17452 20.4281 4.14579 20.4988 4.12008C20.5693 4.09438 20.5588 4.046 20.4988 4.0354C20.3953 4.0178 20.2912 4.00568 20.1864 3.99912C19.1804 3.9235 16.628 3.9235 13.834 5.80006Z"
+    fill="currentColor" />
+  <path
+    d="M20.9522 4.47713L20.8396 4.51192C18.2391 5.43581 16.0276 8.04272 14.5922 11.8427C13.6102 14.4572 12.7619 16.1779 11.756 17.5994C11.305 18.2428 10.7569 18.8112 10.1314 19.2839C9.80568 19.5468 9.4609 19.7849 9.09992 19.9961L8.46783 20.3726C10.5586 21.1145 12.8272 21.1799 14.9568 20.5599C17.0863 19.9398 18.9703 18.6653 20.3455 16.9143C21.7208 15.1634 22.5185 13.0234 22.6272 10.7936C22.736 8.56377 22.1504 6.35543 20.9522 4.47713Z"
+    fill="currentColor" />
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "0.8.3",
+  "version": "0.9.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {