@pfct/purple 1.3.4-npm-test.1

package/dist/components/Tooltip/ImpactTooltip/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const TooltipBase_1 = __importDefault(require("../TooltipBase"));
+const ImpactTooltip = (props) => {
+    return (react_1.default.createElement(TooltipBase_1.default, Object.assign({}, props, { alwaysShow: true, popperOptions: {
+            modifiers: [
+                { name: 'flip', enabled: false },
+                {
+                    name: 'preventOverflow',
+                    options: {
+                        mainAxis: false,
+                    },
+                },
+            ],
+        } })));
+};
+exports.default = ImpactTooltip;

package/dist/components/Tooltip/ImpactTooltip/index.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ImpactTooltipProps } from '.';
+type Story = StoryObj<ImpactTooltipProps>;
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Tooltip-3517bfdc827244d3a8cc91ec2b5c54c3" target="_blank">노션페이지</a>
+ * <br/>
+ * 사용자에게 필수로 정보를 인지시켜야할 경우 사용합니다. 화면 진입 시 단독으로 노출하며 사용자의 액션을 방해하지 않도록 필요 시 닫기 기능을 제공합니다.
+ *
+ */
+declare const meta: Meta<ImpactTooltipProps>;
+export default meta;
+export declare const Story1: Story;

package/dist/components/Tooltip/ImpactTooltip/index.stories.js

@@ -0,0 +1,68 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Story1 = void 0;
+const react_1 = __importDefault(require("react"));
+const TooltipBase_1 = require("../TooltipBase");
+const _1 = __importDefault(require("."));
+const Icon_1 = require("../../../Icon");
+const styled_1 = __importDefault(require("@emotion/styled"));
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Tooltip-3517bfdc827244d3a8cc91ec2b5c54c3" target="_blank">노션페이지</a>
+ * <br/>
+ * 사용자에게 필수로 정보를 인지시켜야할 경우 사용합니다. 화면 진입 시 단독으로 노출하며 사용자의 액션을 방해하지 않도록 필요 시 닫기 기능을 제공합니다.
+ *
+ */
+const meta = {
+    title: 'Component/Tooltip/ImpactTooltip',
+    component: _1.default,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+const commonArgTypes = {
+    colorType: {
+        options: TooltipBase_1.ColorTypeArray.filter((colorType) => colorType !== 'white'),
+        control: { type: 'radio' },
+    },
+    placement: {
+        options: TooltipBase_1.PlacementArray,
+        control: { type: 'radio' },
+    },
+    hasCloseButton: {
+        control: { type: 'boolean' },
+    },
+};
+const ContainerForStorybook = styled_1.default.div `
+	width: 100%;
+	padding: 100px 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+`;
+const Component1 = (props) => {
+    return (react_1.default.createElement(ContainerForStorybook, null,
+        react_1.default.createElement(_1.default, Object.assign({}, props),
+            react_1.default.createElement(Icon_1.QuestionIcon, null))));
+};
+// Props 교체 가능
+exports.Story1 = {
+    render: (props) => react_1.default.createElement(Component1, Object.assign({}, props)),
+    args: {
+        colorType: 'gray',
+        content: '툴팁 문구를 입력해주세요',
+        placement: 'top-center',
+    },
+    argTypes: commonArgTypes,
+    parameters: {
+        docs: {
+            description: {
+                story: '화면 영향 없이 콘텐츠가 가려지지 않는 방향으로 자유롭게 말풍선 꼬리를 표시합니다.',
+            },
+        },
+    },
+};
+exports.Story1.storyName = 'playground';

package/dist/components/Tooltip/TooltipBase/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { TippyProps } from '@tippyjs/react';
+import { ColorType } from '../../../utils';
+type ExtendColorType = ColorType | 'white';
+export declare const ColorTypeArray: ExtendColorType[];
+export declare const PlacementArray: readonly ["top-left", "top-center", "top-right", "bottom-left", "bottom-center", "bottom-right", "left-center", "right-center"];
+export type TooltipPlacementType = (typeof PlacementArray)[number];
+export type TooltipBaseProps = Pick<TippyProps, 'children' | 'zIndex' | 'popperOptions'> & {
+    colorType: ExtendColorType;
+    isChildrenFullWidth?: boolean;
+    placement?: TooltipPlacementType;
+    content: React.ReactNode | string;
+    className?: string;
+    alwaysShow?: boolean;
+    hasCloseButton?: boolean;
+};
+declare const TooltipBase: React.FC<TooltipBaseProps>;
+export default TooltipBase;

package/dist/components/Tooltip/TooltipBase/index.js

@@ -0,0 +1,141 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlacementArray = exports.ColorTypeArray = void 0;
+const react_1 = __importStar(require("react"));
+const Styled = __importStar(require("./index.styled"));
+const Colors_1 = require("../../../core/Colors");
+const Icon_1 = require("../../../Icon");
+exports.ColorTypeArray = ['white', 'pink', 'blue', 'gray', 'lime'];
+exports.PlacementArray = [
+    'top-left',
+    'top-center',
+    'top-right',
+    'bottom-left',
+    'bottom-center',
+    'bottom-right',
+    'left-center',
+    'right-center',
+];
+const arrowLengthPx = 5.8;
+const distancePx = 2;
+const createArrow = ({ backgroundColor }) => {
+    if (backgroundColor === Colors_1.basicColors.white) {
+        // fyi. borderColor 컬러가 상이해서 다른 svg를 사용합니다.
+        return `<svg width="13" height="8" viewBox="0 0 13 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M4.67395 2.01734L5.08584e-07 8L1.31297 8L5.46343 2.67569C5.86314 2.16294 6.63816 2.16193 7.03919 2.67364L11.2136 8L12.5 8L7.82605 2.01734C7.02531 0.992394 5.4747 0.992392 4.67395 2.01734Z" fill="${Colors_1.basicColors.gray100}" />
+        <path d="M11.201 8L1.30078 8L5.45142 2.66295C5.85118 2.14892 6.62777 2.14801 7.02874 2.6611L11.201 8Z" fill="${Colors_1.basicColors.white}"/>
+    </svg>`;
+    }
+    else {
+        return `
+    <svg id="hello" width="13" height="7" viewBox="0 0 13 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M4.67395 0.768711L0 6.75137L1.30078 6.75137L11.201 6.75137H12.5L7.82605 0.768713C7.02531 -0.256236 5.4747 -0.256238 4.67395 0.768711Z" fill="${backgroundColor}"/>
+    </svg>
+`;
+    }
+};
+const TooltipBase = ({ placement, colorType, content, children, className, alwaysShow = false, hasCloseButton = false, zIndex, popperOptions, isChildrenFullWidth = false, }) => {
+    const [visible, setVisible] = (0, react_1.useState)(false);
+    const placementAssertedType = (0, react_1.useMemo)(() => {
+        switch (placement) {
+            case 'top-left':
+                return 'bottom-start';
+            case 'top-center':
+                return 'bottom';
+            case 'top-right':
+                return 'bottom-end';
+            case 'bottom-left':
+                return 'top-start';
+            case 'bottom-center':
+                return 'top';
+            case 'bottom-right':
+                return 'top-end';
+            case 'left-center':
+                return 'right';
+            case 'right-center':
+                return 'left';
+            default:
+                return 'top';
+        }
+    }, [placement]);
+    const colorStyle = (0, react_1.useMemo)(() => {
+        switch (colorType) {
+            case 'gray':
+                return {
+                    backgroundColor: Colors_1.basicColors.gray700,
+                    borderColor: Colors_1.basicColors.gray700,
+                    contentColor: Colors_1.basicColors.gray25,
+                };
+            case 'white':
+                return {
+                    backgroundColor: Colors_1.basicColors.white,
+                    borderColor: Colors_1.basicColors.gray100,
+                    contentColor: Colors_1.basicColors.gray400,
+                };
+            default:
+                return {
+                    backgroundColor: Colors_1.basicColors[`${colorType}400`],
+                    borderColor: Colors_1.basicColors[`${colorType}400`],
+                    contentColor: Colors_1.basicColors.gray25,
+                };
+        }
+    }, [colorType]);
+    const propsWithoutPlacement = {
+        visible,
+        arrow: createArrow({ backgroundColor: colorStyle.backgroundColor }),
+    };
+    const openTooltip = () => {
+        setVisible(true);
+    };
+    const closeTooltip = () => {
+        setVisible(false);
+    };
+    const convertedContent = (react_1.default.createElement(Styled.TippyContentAndCloseButtonWrapper, { onClick: closeTooltip },
+        react_1.default.createElement("div", null, content),
+        hasCloseButton && (react_1.default.createElement(Styled.CloseButtonWrapper, null,
+            react_1.default.createElement(Icon_1.CancelSIcon, { fillColor: Colors_1.basicColors.white })))));
+    const handleMouseEnter = () => {
+        if (visible && alwaysShow) {
+            return;
+        }
+        openTooltip();
+    };
+    const handleMouseLeave = () => {
+        if (visible && alwaysShow) {
+            return;
+        }
+        closeTooltip();
+    };
+    (0, react_1.useEffect)(() => {
+        if (alwaysShow) {
+            // 초기 렌더링에 툴팁 표시
+            setVisible(true);
+        }
+    }, [alwaysShow]);
+    return (react_1.default.createElement(Styled.TippyWrapper, Object.assign({}, colorStyle, propsWithoutPlacement, { placement: placementAssertedType, className: className, content: convertedContent, offset: [0, arrowLengthPx + distancePx], interactive: true, zIndex: zIndex, popperOptions: popperOptions }),
+        react_1.default.createElement(Styled.Children, { isChildrenFullWidth: isChildrenFullWidth, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, children)));
+};
+exports.default = TooltipBase;

package/dist/components/Tooltip/TooltipBase/index.styled.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+export type TooltipColorStyleProps = {
+    backgroundColor: string;
+    borderColor: string;
+    contentColor: string;
+};
+export declare const TippyContentAndCloseButtonWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CloseButtonWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TippyWrapper: import("@emotion/styled").StyledComponent<import("@tippyjs/react").TippyProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & TooltipColorStyleProps, {}, {}>;
+export declare const Children: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    isChildrenFullWidth: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/Tooltip/TooltipBase/index.styled.js

@@ -0,0 +1,99 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Children = exports.TippyWrapper = exports.CloseButtonWrapper = exports.TippyContentAndCloseButtonWrapper = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = __importDefault(require("@tippyjs/react"));
+const core_1 = require("../../../core");
+exports.TippyContentAndCloseButtonWrapper = styled_1.default.div `
+	display: flex;
+	justify-content: space-between;
+	gap: 5px;
+`;
+exports.CloseButtonWrapper = styled_1.default.div `
+	width: 16px;
+	height: 100%;
+
+	svg {
+		/* close buttons */
+		cursor: pointer;
+		width: 16px;
+		height: 16px;
+	}
+`;
+exports.TippyWrapper = (0, styled_1.default)(react_1.default) `
+	background-color: ${({ backgroundColor }) => backgroundColor};
+	border-radius: 8px;
+	border: 1px solid ${({ borderColor }) => borderColor};
+	transform: translate3d(0, 0, 0);
+
+	& > .tippy-content {
+		/* 툴팁 내부 박스 */
+		${(0, core_1.body2)()}
+		color: ${({ contentColor }) => contentColor} !important;
+
+		position: relative;
+		white-space: pre-wrap;
+		padding: 12.5px 15px;
+
+		#custom-tippy-content-close-btn {
+			/* TODO: 클릭 후 닫히기 기능 점검 필요 */
+			cursor: pointer;
+		}
+	}
+
+	& > .tippy-svg-arrow {
+		& > svg {
+			transform: translate3d(0, 0, 0);
+		}
+	}
+
+	&.tippy-box[data-placement^='top'] > .tippy-svg-arrow {
+		bottom: 0;
+	}
+	&.tippy-box[data-placement^='top'] > .tippy-svg-arrow:after,
+	&.tippy-box[data-placement^='top'] > .tippy-svg-arrow > svg {
+		top: 16px;
+		transform: rotate(180deg);
+	}
+	&.tippy-box[data-placement^='bottom'] > .tippy-svg-arrow {
+		top: 0;
+	}
+	&.tippy-box[data-placement^='bottom'] > .tippy-svg-arrow > svg {
+		bottom: 16px;
+	}
+	&.tippy-box[data-placement^='left'] > .tippy-svg-arrow {
+		right: 0;
+	}
+	&.tippy-box[data-placement^='left'] > .tippy-svg-arrow:after,
+	&.tippy-box[data-placement^='left'] > .tippy-svg-arrow > svg {
+		transform: rotate(90deg);
+		top: calc(50% - 3px);
+		left: 11px;
+	}
+	&.tippy-box[data-placement^='right'] > .tippy-svg-arrow {
+		left: 0;
+	}
+	&.tippy-box[data-placement^='right'] > .tippy-svg-arrow:after,
+	&.tippy-box[data-placement^='right'] > .tippy-svg-arrow > svg {
+		transform: rotate(-90deg);
+		top: calc(50% - 3px);
+		right: 11px;
+	}
+	.tippy-svg-arrow {
+		width: 16px;
+		height: 16px;
+		fill: #333;
+		text-align: initial;
+	}
+	.tippy-svg-arrow,
+	.tippy-svg-arrow > svg {
+		position: absolute;
+	}
+`;
+exports.Children = styled_1.default.div `
+	display: inline-block;
+	${({ isChildrenFullWidth }) => isChildrenFullWidth && 'width: 100%'};
+`;

package/dist/components/Tooltip/index.d.ts

@@ -0,0 +1,6 @@
+import { TooltipPlacementType } from './TooltipBase';
+import { BasicTooltipProps } from './BasicTooltip';
+import { ImpactTooltipProps } from './ImpactTooltip';
+export type { TooltipPlacementType, BasicTooltipProps, ImpactTooltipProps };
+export { default as BasicTooltip } from './BasicTooltip';
+export { default as ImpactTooltip } from './ImpactTooltip';

package/dist/components/Tooltip/index.js

@@ -0,0 +1,11 @@
+"use strict";
+// fyi. 원하는 모듈과 타입만 외부 노출 방법
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImpactTooltip = exports.BasicTooltip = void 0;
+var BasicTooltip_1 = require("./BasicTooltip");
+Object.defineProperty(exports, "BasicTooltip", { enumerable: true, get: function () { return __importDefault(BasicTooltip_1).default; } });
+var ImpactTooltip_1 = require("./ImpactTooltip");
+Object.defineProperty(exports, "ImpactTooltip", { enumerable: true, get: function () { return __importDefault(ImpactTooltip_1).default; } });

package/dist/components/index.d.ts

@@ -0,0 +1,22 @@
+export * from './Badge';
+export * from './Button';
+export * from './Card';
+export * from './Comment';
+export * from './Control';
+export * from './DatePicker';
+export * from './Divider';
+export * from './Input';
+export * from './Loading';
+export * from './MiniButton';
+export * from './Navigation';
+export * from './Segment';
+export * from './SelectBox';
+export * from './Chips';
+export * from './Tab';
+export * from './Tag';
+export * from './Title';
+export * from './BottomSheet';
+export * from './Modal';
+export * from './Modal/BaseModal';
+export * from './ToastMessage';
+export * from './Tooltip';

package/dist/components/index.js

@@ -0,0 +1,38 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Badge"), exports);
+__exportStar(require("./Button"), exports);
+__exportStar(require("./Card"), exports);
+__exportStar(require("./Comment"), exports);
+__exportStar(require("./Control"), exports);
+__exportStar(require("./DatePicker"), exports);
+__exportStar(require("./Divider"), exports);
+__exportStar(require("./Input"), exports);
+__exportStar(require("./Loading"), exports);
+__exportStar(require("./MiniButton"), exports);
+__exportStar(require("./Navigation"), exports);
+__exportStar(require("./Segment"), exports);
+__exportStar(require("./SelectBox"), exports);
+__exportStar(require("./Chips"), exports);
+__exportStar(require("./Tab"), exports);
+__exportStar(require("./Tag"), exports);
+__exportStar(require("./Title"), exports);
+__exportStar(require("./BottomSheet"), exports);
+__exportStar(require("./Modal"), exports);
+__exportStar(require("./Modal/BaseModal"), exports);
+__exportStar(require("./ToastMessage"), exports);
+__exportStar(require("./Tooltip"), exports);

package/dist/constants/index.d.ts

@@ -0,0 +1 @@
+export * from './style.constants';

package/dist/constants/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./style.constants"), exports);

package/dist/constants/style.constants.d.ts

@@ -0,0 +1,13 @@
+export declare const zIndex: {
+    floatButton: number;
+    gnb: number;
+    basicLayer: number;
+    modal: number;
+    loading: number;
+};
+export declare const LayoutSpacing: {
+    bottomMargin: {
+        mobile: number;
+        pc: number;
+    };
+};

package/dist/constants/style.constants.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayoutSpacing = exports.zIndex = void 0;
+exports.zIndex = {
+    floatButton: 5,
+    gnb: 10,
+    basicLayer: 100,
+    modal: 1000,
+    loading: 19950824,
+};
+exports.LayoutSpacing = {
+    bottomMargin: {
+        mobile: 80,
+        pc: 60,
+    },
+};

package/dist/core/Colors/index.d.ts

@@ -0,0 +1,155 @@
+import { ColorType } from '../../utils';
+type BasicColorsKey = keyof typeof basicColors;
+type SemanticColorsKey = keyof typeof semanticColors;
+type SemanticColorsMethodKey = keyof typeof semanticColorsMethod;
+type HexPrefixOpacityKey = keyof typeof hexPrefixOpacity;
+declare const hexPrefixOpacity: {
+    '0%': string;
+    '5%': string;
+    '10%': string;
+    '15%': string;
+    '20%': string;
+    '25%': string;
+    '30%': string;
+    '35%': string;
+    '40%': string;
+    '45%': string;
+    '50%': string;
+    '55%': string;
+    '60%': string;
+    '65%': string;
+    '70%': string;
+    '75%': string;
+    '80%': string;
+    '85%': string;
+    '90%': string;
+    '95%': string;
+    '100%': string;
+};
+declare const generateHexWithAlphaInLightMode: (hexColor: string, alpha: HexPrefixOpacityKey) => string;
+declare const basicColors: {
+    white: string;
+    black: string;
+    darkGray: string;
+    deepDarkGray: string;
+    pink5: string;
+    pink25: string;
+    pink50: string;
+    pink100: string;
+    pink200: string;
+    pink300: string;
+    pink400: string;
+    pink500: string;
+    pink600: string;
+    pink700: string;
+    pink800: string;
+    pink900: string;
+    blue5: string;
+    blue25: string;
+    blue50: string;
+    blue100: string;
+    blue200: string;
+    blue300: string;
+    blue400: string;
+    blue500: string;
+    blue600: string;
+    blue700: string;
+    blue800: string;
+    blue900: string;
+    gray5: string;
+    gray25: string;
+    gray50: string;
+    gray100: string;
+    gray200: string;
+    gray300: string;
+    gray400: string;
+    gray500: string;
+    gray600: string;
+    gray700: string;
+    gray800: string;
+    gray900: string;
+    purple5: string;
+    purple25: string;
+    purple50: string;
+    purple100: string;
+    purple200: string;
+    purple300: string;
+    purple400: string;
+    purple500: string;
+    purple600: string;
+    purple700: string;
+    purple800: string;
+    purple900: string;
+    red5: string;
+    red25: string;
+    red50: string;
+    red100: string;
+    red200: string;
+    red300: string;
+    red400: string;
+    red500: string;
+    red600: string;
+    red700: string;
+    red800: string;
+    red900: string;
+    green5: string;
+    green25: string;
+    green50: string;
+    green100: string;
+    green200: string;
+    green300: string;
+    green400: string;
+    green500: string;
+    green600: string;
+    green700: string;
+    green800: string;
+    green900: string;
+    yellow5: string;
+    yellow25: string;
+    yellow50: string;
+    yellow100: string;
+    yellow200: string;
+    yellow300: string;
+    yellow400: string;
+    yellow500: string;
+    yellow600: string;
+    yellow700: string;
+    yellow800: string;
+    yellow900: string;
+    lime5: string;
+    lime25: string;
+    lime50: string;
+    lime100: string;
+    lime200: string;
+    lime300: string;
+    lime400: string;
+    lime500: string;
+    lime600: string;
+    lime700: string;
+    lime800: string;
+    lime900: string;
+};
+declare const semanticColors: {
+    backgroundBasic: string;
+    backgroundDeep: string;
+    buttonGrayMainAbledText: string;
+    buttonMainDisabledText: string;
+    toastMessageContainer: string;
+    toastMessageMiniButtonEnabledContainer: string;
+    toastMessageMiniButtonHoverContainer: string;
+    toastMessageMiniButtonFocusContainer: string;
+    controlGraySwitchEnabledOnContainer: string;
+    controlSwitchEnabledOffInnerCircle: string;
+    controlSwitchDisabledOnInnerCircle: string;
+    controlSwitchDisabledOffInnerCircle: string;
+    dividerM: string;
+    card: string;
+    segmentControlContainer: string;
+    segmentControlSegment: string;
+    chipDefaultText: string;
+};
+declare const semanticColorsMethod: {
+    buttonSubDisabledText: (colorType: ColorType) => string;
+};
+export type { BasicColorsKey, SemanticColorsKey, SemanticColorsMethodKey };
+export { generateHexWithAlphaInLightMode, basicColors, semanticColors, semanticColorsMethod };