@wishket/design-system 0.0.3 → 0.1.0

package/dist/Components/Atoms/Typography/index.js

@@ -0,0 +1 @@
+import o from"./Typography.js";export{o as default};

package/dist/Components/Atoms/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Typography } from './Typography';
+export { default as Checkbox } from './Checkbox';
+export { default as Box } from './Box';
+export { default as ProductIcon } from './ProductIcon';

package/dist/Components/Common/DesignSystemProvider.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+declare const DesignSystemProvider: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+export default DesignSystemProvider;

package/dist/Components/Common/DesignSystemProvider.js

@@ -0,0 +1,2 @@
+'use client';
+import{jsx as o}from"react/jsx-runtime";import{ThemeProvider as t}from"@emotion/react";import"../Atoms/Typography/Typography.js";import"../Atoms/Checkbox/Checkbox.js";import"../Atoms/Box/Box.js";import"../Molecules/GridLayout/GridLayout.js";import"../Molecules/CheckboxList/CheckboxList.js";import"../../styles/globals.js";import"../../variants/typographies.js";import"../../variants/colors.js";import{theme as r}from"../../variants/theme.js";import"@emotion/styled";var s=function(s){s=s.children;return o(t,{theme:r,children:s})};export{s as default};

package/dist/Components/Common/index.d.ts

@@ -0,0 +1 @@
+export { default as DesignSystemProvider } from './DesignSystemProvider';

package/dist/Components/Molecules/CheckboxCard/CheckboxCard.d.ts

@@ -0,0 +1,2 @@
+import { CheckboxCardProps } from './CheckboxCard.types';
+export default function CheckboxCard(props: CheckboxCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Molecules/CheckboxCard/CheckboxCard.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import CheckboxCard from './CheckboxCard';
+import { CheckboxCardProps } from './CheckboxCard.types';
+declare const meta: Meta<typeof CheckboxCard>;
+export default meta;
+type Story = StoryObj<CheckboxCardProps>;
+export declare const Default: Story;
+export declare const WithDescription: Story;

package/dist/Components/Molecules/CheckboxCard/CheckboxCard.styles.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { CheckboxCardProps } from './CheckboxCard.types';
+export declare const CheckboxCardLabel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & Pick<CheckboxCardProps, "isWide">, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
+export declare const CheckboxCardContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & Pick<CheckboxCardProps, "checked" | "disabled" | "isError" | "isHover" | "isWide">, {}, {}>;
+export declare const StyledCheckbox: import("@emotion/styled").StyledComponent<import("../../Atoms/Checkbox/Checkbox.types").CheckboxProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & Pick<CheckboxCardProps, "isWide">, {}, {}>;
+export declare const IconContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TitleContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & Pick<CheckboxCardProps, "isWide">, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledTypography: import("@emotion/styled").StyledComponent<import("../../Atoms/Typography/Typography.types").TypographyProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & Pick<CheckboxCardProps, "isWide">, {}, {}>;

package/dist/Components/Molecules/CheckboxCard/CheckboxCard.types.d.ts

@@ -0,0 +1,11 @@
+import { ChangeEvent } from 'react';
+import { CheckboxStatus } from '../../../types';
+import { ProductIconName } from '../../Atoms/ProductIcon/ProductIcon.types';
+export interface CheckboxCardProps extends CheckboxStatus {
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    className?: string;
+    iconName: ProductIconName;
+    isWide?: boolean;
+    title: string;
+    description?: string;
+}

package/dist/Components/Molecules/CheckboxList/CHeckboxList.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CheckboxListProps } from './CheckboxList.types';
+import CheckboxList from '.';
+declare const meta: Meta<typeof CheckboxList>;
+export default meta;
+type Story = StoryObj<CheckboxListProps>;
+export declare const Default: Story;

package/dist/Components/Molecules/CheckboxList/CheckboxList.d.ts

@@ -0,0 +1,3 @@
+import { CheckboxListProps } from './CheckboxList.types';
+declare const CheckboxList: ({ data, className, ...rest }: CheckboxListProps) => import("react/jsx-runtime").JSX.Element;
+export default CheckboxList;

package/dist/Components/Molecules/CheckboxList/CheckboxList.js

@@ -0,0 +1,2 @@
+'use client';
+import{__makeTemplateObject as t,__rest as n,__assign as e}from"../../../_virtual/_tslib.js";import{jsx as i}from"react/jsx-runtime";import a from"@emotion/styled";import o from"./CheckboxListItem.js";var r,m=a.div(r=r||t(["\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  width: min-content;\n"],["\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  width: min-content;\n"])),s=function(t){var a=t.data,s=t.className,t=n(t,["data","className"]);return i(m,e({className:s,"data-testid":"design-system-checkboxList"},t,{children:a.map(function(t,n){return i(o,e({},t),n)})}))};export{s as default};

package/dist/Components/Molecules/CheckboxList/CheckboxList.types.d.ts

@@ -0,0 +1,15 @@
+import { ChangeEvent } from 'react';
+type CheckboxListData = {
+    label: string;
+    description?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    isError?: boolean;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+};
+export interface CheckboxListProps {
+    data: CheckboxListData[];
+    className?: string;
+    [key: string]: any;
+}
+export {};

package/dist/Components/Molecules/CheckboxList/CheckboxListItem.d.ts

@@ -0,0 +1,11 @@
+import { ChangeEvent } from 'react';
+import { CheckboxStatus } from '../../../types';
+interface CheckboxListProps extends CheckboxStatus {
+    label: string;
+    description?: string;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    className?: string;
+    CheckboxClassName?: string;
+}
+declare const CheckboxListItem: ({ label, description, checked, disabled, isError, className, CheckboxClassName, onChange, }: CheckboxListProps) => import("react/jsx-runtime").JSX.Element;
+export default CheckboxListItem;

package/dist/Components/Molecules/CheckboxList/CheckboxListItem.js

@@ -0,0 +1,2 @@
+'use client';
+import{__makeTemplateObject as n}from"../../../_virtual/_tslib.js";import{jsxs as e,jsx as i}from"react/jsx-runtime";import{useState as t}from"react";import r from"@emotion/styled";import o from"../../Atoms/Typography/Typography.js";import a from"../../Atoms/Checkbox/Checkbox.js";import"../../Atoms/Box/Box.js";var c,s,d,l,m=r.label(c=c||n(["\n  display: grid;\n  grid-template-areas: 'checkbox label' '. description';\n  grid-template-rows: min-content min-content;\n  grid-template-columns: 18px min-content;\n  row-gap: 2px;\n  column-gap: 12px;\n  width: min-content;\n  height: min-content;\n  align-items: center;\n  cursor: ",";\n"],["\n  display: grid;\n  grid-template-areas: 'checkbox label' '. description';\n  grid-template-rows: min-content min-content;\n  grid-template-columns: 18px min-content;\n  row-gap: 2px;\n  column-gap: 12px;\n  width: min-content;\n  height: min-content;\n  align-items: center;\n  cursor: ",";\n"]),function(e){return e.disabled?"not-allowed":"pointer"}),p=r.div(s=s||n(["\n  grid-area: checkbox;\n"],["\n  grid-area: checkbox;\n"])),g=r.div(d=d||n(["\n  grid-area: label;\n"],["\n  grid-area: label;\n"])),h=r.div(l=l||n(["\n  grid-area: description;\n"],["\n  grid-area: description;\n"])),b=function(n){var r=n.label,s=n.description,c=n.checked,d=n.disabled,d=void 0!==d&&d,l=n.isError,l=void 0!==l&&l,b=n.className,x=n.CheckboxClassName,n=n.onChange,u=t(!1),y=u[0],k=u[1];return e(m,{"data-testid":"design-system-checkboxList--item",disabled:d,className:b,onMouseOver:function(){k(!0)},onMouseOut:function(){k(!1)},children:[i(p,{children:i(a,{checked:c,isHover:y,isError:l,disabled:d,onChange:n,className:x})}),i(g,{children:i(o,{variant:"body2",color:d?"gray300":"gray900",testId:"design-system-checkboxList--item-label",children:r})}),s&&i(h,{children:i(o,{variant:"body3",color:d?"gray300":"gray600",testId:"design-system-checkboxList--item-description",children:s})})]})};export{b as default};

package/dist/Components/Molecules/CheckboxList/index.d.ts

@@ -0,0 +1,2 @@
+import CheckboxList from './CheckboxList';
+export default CheckboxList;

package/dist/Components/Molecules/CheckboxList/index.js

@@ -0,0 +1 @@
+import o from"./CheckboxList.js";export{o as default};

package/dist/Components/Molecules/GridLayout/GridLayout.d.ts

@@ -0,0 +1,3 @@
+import { GridLayoutProps } from './GridLayout.types';
+declare const GridLayout: ({ children, className, gridTemplateAreas, ...rest }: GridLayoutProps) => import("react/jsx-runtime").JSX.Element;
+export default GridLayout;

package/dist/Components/Molecules/GridLayout/GridLayout.js

@@ -0,0 +1,2 @@
+'use client';
+import{__makeTemplateObject as n,__rest as t,__assign as e}from"../../../_virtual/_tslib.js";import{jsx as a}from"react/jsx-runtime";import r from"@emotion/styled";var s,o={mobile:'\n    "contents contents contents contents"\n  ',tablet:'\n    "contents contents contents contents contents contents contents contents"\n  ',desktop:'\n    "contents contents contents contents contents contents contents contents contents contents contents contents"\n  '},i=r.div(s=s||n(["\n  display: grid;\n  gap: 20px;\n  width: 100%;\n  grid-auto-columns: 1fr;\n  padding: 0 20px;\n  margin: 0 auto;\n  max-width: ",";\n  grid-template-areas: ",";\n\n  "," {\n    grid-template-areas: ",";\n  }\n\n  "," {\n    gap: 24px;\n    padding: 0 30px;\n    grid-template-areas: ",";\n  }\n"],["\n  display: grid;\n  gap: 20px;\n  width: 100%;\n  grid-auto-columns: 1fr;\n  padding: 0 20px;\n  margin: 0 auto;\n  max-width: ",";\n  grid-template-areas: ",";\n\n  "," {\n    grid-template-areas: ",";\n  }\n\n  "," {\n    gap: 24px;\n    padding: 0 30px;\n    grid-template-areas: ",";\n  }\n"]),function(n){n=n.theme;return"".concat(n.screenSizes.contentsMaxSize,"px")},function(n){n=n.gridTemplateAreas;return null==n?void 0:n.mobile},function(n){return n.theme.breakpoints.tablet},function(n){n=n.gridTemplateAreas;return null==n?void 0:n.tablet},function(n){return n.theme.breakpoints.desktop},function(n){n=n.gridTemplateAreas;return null==n?void 0:n.desktop}),d=function(n){var s=n.children,r=n.className,d=n.gridTemplateAreas,d=void 0===d?o:d,n=t(n,["children","className","gridTemplateAreas"]);return a(i,e({gridTemplateAreas:d,"data-testid":"design-system-grid-layout-root",className:r},n,{children:s}))};export{d as default};

package/dist/Components/Molecules/GridLayout/GridLayout.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { GridLayout } from '../../..';
+import { GridLayoutProps } from './GridLayout.types';
+declare const meta: Meta<typeof GridLayout>;
+export default meta;
+type Story = StoryObj<GridLayoutProps>;
+export declare const Default: Story;

package/dist/Components/Molecules/GridLayout/GridLayout.types.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from 'react';
+export interface GridLayoutProps extends PropsWithChildren {
+    gridTemplateAreas?: {
+        mobile: string;
+        tablet: string;
+        desktop: string;
+    };
+    className?: string;
+    [key: string]: any;
+}

package/dist/Components/Molecules/GridLayout/index.d.ts

@@ -0,0 +1,2 @@
+import GridLayout from './GridLayout';
+export default GridLayout;

package/dist/Components/Molecules/GridLayout/index.js

@@ -0,0 +1 @@
+import o from"./GridLayout.js";export{o as default};

package/dist/Components/Molecules/index.d.ts

@@ -0,0 +1,2 @@
+export { default as GridLayout } from './GridLayout';
+export { default as CheckboxList } from './CheckboxList';

package/dist/_virtual/_tslib.js

@@ -0,0 +1 @@
+var r=function(){return(r=Object.assign||function(e){for(var r,t=1,n=arguments.length;t<n;t++)for(var o in r=arguments[t])Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);return e}).apply(this,arguments)};function e(e,r){var t={};for(o in e)Object.prototype.hasOwnProperty.call(e,o)&&r.indexOf(o)<0&&(t[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols)for(var n=0,o=Object.getOwnPropertySymbols(e);n<o.length;n++)r.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(e,o[n])&&(t[o[n]]=e[o[n]]);return t}function t(e,r){return Object.defineProperty?Object.defineProperty(e,"raw",{value:r}):e.raw=r,e}export{r as __assign,t as __makeTemplateObject,e as __rest};

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export * from './Components/Atoms';
+export * from './Components/Molecules';
+export * from './Components/Common';
+export * from './styles';
+export * from './variants';
+export { css, keyframes, useTheme } from '@emotion/react';
+export type { Theme } from '@emotion/react';
+export { default as styled } from '@emotion/styled';

package/dist/index.js

@@ -0,0 +1,2 @@
+'use client';
+export{default as Typography}from"./Components/Atoms/Typography/Typography.js";export{default as Checkbox}from"./Components/Atoms/Checkbox/Checkbox.js";export{default as Box}from"./Components/Atoms/Box/Box.js";export{default as ProductIcon}from"./Components/Atoms/ProductIcon/ProductIcon.js";export{default as GridLayout}from"./Components/Molecules/GridLayout/GridLayout.js";export{default as CheckboxList}from"./Components/Molecules/CheckboxList/CheckboxList.js";export{default as DesignSystemProvider}from"./Components/Common/DesignSystemProvider.js";export{default as Globals}from"./styles/globals.js";export{typographies}from"./variants/typographies.js";export{colors}from"./variants/colors.js";export{theme}from"./variants/theme.js";export{css,keyframes,useTheme}from"@emotion/react";export{default as styled}from"@emotion/styled";

package/dist/styles/globals.d.ts

@@ -0,0 +1,2 @@
+declare const GlobalStyle: () => import("react/jsx-runtime").JSX.Element;
+export default GlobalStyle;

package/dist/styles/globals.js

@@ -0,0 +1,2 @@
+'use client';
+import{__makeTemplateObject as n}from"../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import{css as t,Global as o}from"@emotion/react";var r,a=t(r=r||n(["\n  html,\n  body,\n  div,\n  span,\n  applet,\n  object,\n  iframe,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  p,\n  blockquote,\n  pre,\n  a,\n  abbr,\n  acronym,\n  address,\n  big,\n  cite,\n  code,\n  del,\n  dfn,\n  em,\n  img,\n  ins,\n  kbd,\n  q,\n  s,\n  samp,\n  small,\n  strike,\n  strong,\n  sub,\n  sup,\n  tt,\n  var,\n  b,\n  u,\n  i,\n  center,\n  dl,\n  dt,\n  dd,\n  ol,\n  ul,\n  li,\n  fieldset,\n  form,\n  label,\n  legend,\n  table,\n  caption,\n  tbody,\n  tfoot,\n  thead,\n  tr,\n  th,\n  td,\n  article,\n  aside,\n  canvas,\n  details,\n  embed,\n  figure,\n  figcaption,\n  footer,\n  header,\n  hgroup,\n  menu,\n  nav,\n  output,\n  ruby,\n  section,\n  summary,\n  time,\n  mark,\n  audio,\n  video {\n    margin: 0;\n    padding: 0;\n    border: 0;\n    font-size: 100%;\n    font: inherit;\n    vertical-align: baseline;\n  }\n  /* HTML5 display-role reset for older browsers */\n  article,\n  aside,\n  details,\n  figcaption,\n  figure,\n  footer,\n  header,\n  hgroup,\n  menu,\n  nav,\n  section {\n    display: block;\n  }\n  body {\n    line-height: 1;\n  }\n  ol,\n  ul {\n    list-style: none;\n  }\n  blockquote,\n  q {\n    quotes: none;\n  }\n  blockquote:before,\n  blockquote:after,\n  q:before,\n  q:after {\n    content: '';\n    content: none;\n  }\n  table {\n    border-collapse: collapse;\n    border-spacing: 0;\n  }\n"],["\n  html,\n  body,\n  div,\n  span,\n  applet,\n  object,\n  iframe,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  p,\n  blockquote,\n  pre,\n  a,\n  abbr,\n  acronym,\n  address,\n  big,\n  cite,\n  code,\n  del,\n  dfn,\n  em,\n  img,\n  ins,\n  kbd,\n  q,\n  s,\n  samp,\n  small,\n  strike,\n  strong,\n  sub,\n  sup,\n  tt,\n  var,\n  b,\n  u,\n  i,\n  center,\n  dl,\n  dt,\n  dd,\n  ol,\n  ul,\n  li,\n  fieldset,\n  form,\n  label,\n  legend,\n  table,\n  caption,\n  tbody,\n  tfoot,\n  thead,\n  tr,\n  th,\n  td,\n  article,\n  aside,\n  canvas,\n  details,\n  embed,\n  figure,\n  figcaption,\n  footer,\n  header,\n  hgroup,\n  menu,\n  nav,\n  output,\n  ruby,\n  section,\n  summary,\n  time,\n  mark,\n  audio,\n  video {\n    margin: 0;\n    padding: 0;\n    border: 0;\n    font-size: 100%;\n    font: inherit;\n    vertical-align: baseline;\n  }\n  /* HTML5 display-role reset for older browsers */\n  article,\n  aside,\n  details,\n  figcaption,\n  figure,\n  footer,\n  header,\n  hgroup,\n  menu,\n  nav,\n  section {\n    display: block;\n  }\n  body {\n    line-height: 1;\n  }\n  ol,\n  ul {\n    list-style: none;\n  }\n  blockquote,\n  q {\n    quotes: none;\n  }\n  blockquote:before,\n  blockquote:after,\n  q:before,\n  q:after {\n    content: '';\n    content: none;\n  }\n  table {\n    border-collapse: collapse;\n    border-spacing: 0;\n  }\n"])),i=function(){return e(o,{styles:a})};export{i as default};

package/dist/styles/index.d.ts

@@ -0,0 +1 @@
+export { default as Globals } from './globals';

package/dist/types/checkbox.types.d.ts

@@ -0,0 +1,6 @@
+export interface CheckboxStatus {
+    disabled?: boolean;
+    checked?: boolean;
+    isError?: boolean;
+    isHover?: boolean;
+}

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export * from './checkbox.types';

package/dist/variants/breakpoints.d.ts

@@ -0,0 +1,13 @@
+interface MediaQueryProps {
+    mobile: number;
+    tablet: number;
+    desktop: number;
+    contentsMaxSize: number;
+}
+export declare const screenSizes: MediaQueryProps;
+export declare const breakpoints: {
+    readonly mobile: `@media only screen and (min-width: ${number}px)`;
+    readonly tablet: `@media only screen and (min-width: ${number}px)`;
+    readonly desktop: `@media only screen and (min-width: ${number}px)`;
+};
+export {};

package/dist/variants/breakpoints.js

@@ -0,0 +1 @@
+var e={mobile:360,tablet:720,desktop:980,contentsMaxSize:1200},t={mobile:"@media only screen and (min-width: ".concat(e.mobile,"px)"),tablet:"@media only screen and (min-width: ".concat(e.tablet,"px)"),desktop:"@media only screen and (min-width: ".concat(e.desktop,"px)")};export{t as breakpoints,e as screenSizes};

package/dist/variants/colors.d.ts

@@ -0,0 +1,114 @@
+export declare const colors: {
+    cyan10: string;
+    cyan50: string;
+    cyan100: string;
+    cyan200: string;
+    cyan300: string;
+    cyan400: string;
+    cyan500: string;
+    cyan600: string;
+    cyan700: string;
+    cyan800: string;
+    cyan900: string;
+    indigo10: string;
+    indigo50: string;
+    indigo100: string;
+    indigo200: string;
+    indigo300: string;
+    indigo400: string;
+    indigo500: string;
+    indigo600: string;
+    indigo700: string;
+    indigo800: string;
+    indigo900: string;
+    red10: string;
+    red50: string;
+    red100: string;
+    red200: string;
+    red300: string;
+    red400: string;
+    red500: string;
+    red600: string;
+    red700: string;
+    red800: string;
+    red900: string;
+    orange10: string;
+    orange50: string;
+    orange100: string;
+    orange200: string;
+    orange300: string;
+    orange400: string;
+    orange500: string;
+    orange600: string;
+    orange700: string;
+    orange800: string;
+    orange900: string;
+    yellow10: string;
+    yellow50: string;
+    yellow100: string;
+    yellow200: string;
+    yellow300: string;
+    yellow400: string;
+    yellow500: string;
+    yellow600: string;
+    yellow700: string;
+    yellow800: string;
+    yellow900: string;
+    green10: string;
+    green50: string;
+    green100: string;
+    green200: string;
+    green300: string;
+    green400: string;
+    green500: string;
+    green600: string;
+    green700: string;
+    green800: string;
+    green900: string;
+    bluegray10: string;
+    bluegray50: string;
+    bluegray100: string;
+    bluegray200: string;
+    bluegray300: string;
+    bluegray400: string;
+    bluegray500: string;
+    bluegray600: string;
+    bluegray700: string;
+    bluegray800: string;
+    bluegray900: string;
+    gray10: string;
+    gray50: string;
+    gray100: string;
+    gray200: string;
+    gray300: string;
+    gray400: string;
+    gray500: string;
+    gray600: string;
+    gray700: string;
+    gray800: string;
+    gray900: string;
+    violet10: string;
+    violet50: string;
+    violet100: string;
+    violet200: string;
+    violet300: string;
+    violet400: string;
+    violet500: string;
+    violet600: string;
+    violet700: string;
+    violet800: string;
+    violet900: string;
+    black20: string;
+    black40: string;
+    black50: string;
+    black80: string;
+    black100: string;
+    white20: string;
+    white40: string;
+    white50: string;
+    white80: string;
+    white100: string;
+    wPrimary: string;
+    wSecondary: string;
+    yPrimary: string;
+};

package/dist/variants/colors.js

@@ -0,0 +1 @@
+import{__assign as F}from"../_virtual/_tslib.js";var e={cyan10:"#F2FCFF",cyan50:"#E8FAFF",cyan100:"#BFEDFA",cyan200:"#ABE3F2",cyan300:"#80C7DE",cyan400:"#5DB6D4",cyan500:"#3BA3C7",cyan600:"#369CC2",cyan700:"#3391BA",cyan800:"#308AB3",cyan900:"#2E82AB",indigo10:"#F5F9FF",indigo50:"#E3EDFA",indigo100:"#CCDBED",indigo200:"#A6BFDE",indigo300:"#7DA3CC",indigo400:"#5487BA",indigo500:"#2E6BAA",indigo600:"#26619E",indigo700:"#1F578C",indigo800:"#1A4D80",indigo900:"#144570",red10:"#FFF5F5",red50:"#FFE8E8",red100:"#FFC9C9",red200:"#ED9191",red300:"#ED6666",red400:"#EB3F3F",red500:"#E52929",red600:"#DB2121",red700:"#D11519",red800:"#C70006",red900:"#BF0006",orange10:"#FFF9F5",orange50:"#FFF0E8",orange100:"#FFD6BF",orange200:"#FFBB99",orange300:"#FFA070",orange400:"#FF8547",orange500:"#FF6B21",orange600:"#F4611D",orange700:"#E65918",orange800:"#DB5314",orange900:"#D14B0F",yellow10:"#FFFDF5",yellow50:"#FFF9E0",yellow100:"#FFEEB8",yellow200:"#FFE491",yellow300:"#FFDA6A",yellow400:"#FFD043",yellow500:"#FFC61C",yellow600:"#FFB012",yellow700:"#F79E0F",yellow800:"#F79205",yellow900:"#F28A05",green10:"#F5FFFC",green50:"#EBFFF9",green100:"#C4EDE1",green200:"#93DBC6",green300:"#63C9AB",green400:"#30B891",green500:"#00A878",green600:"#009C6F",green700:"#009168",green800:"#008761",green900:"#007D59",bluegray10:"#F7FAFC",bluegray50:"#E6EBF0",bluegray100:"#CCD1D6",bluegray200:"#A1A6AD",bluegray300:"#787D85",bluegray400:"#4D525C",bluegray500:"#383D47",bluegray600:"#242933",bluegray700:"#1C2029",bluegray800:"#14171F",bluegray900:"#0D0F14",gray10:"#FAFAFA",gray50:"#F5F5F5",gray100:"#EEEEEE",gray200:"#E0E0E0",gray300:"#BDBDBD",gray400:"#9E9E9E",gray500:"#757575",gray600:"#616161",gray700:"#424242",gray800:"#313131",gray900:"#212121",violet10:"#FAF6FF",violet50:"#F2E8FC",violet100:"#D6C1FA",violet200:"#BB98F7",violet300:"#9E6BF5",violet400:"#8646F2",violet500:"#6B16EE",violet600:"#5A00DB",violet700:"#400EC0",violet800:"#3200AC",violet900:"#110394",black20:"#000000",black40:"#000000",black50:"#000000",black80:"#000000",black100:"#000000",white20:"#FFFFFF",white40:"#FFFFFF",white50:"#FFFFFF",white80:"#FFFFFF",white100:"#FFFFFF"},r=F(F({},{wPrimary:e.cyan500,wSecondary:e.indigo500,yPrimary:e.violet500}),e);export{r as colors};

package/dist/variants/gradients.d.ts

@@ -0,0 +1,4 @@
+export type GradientVariants = 'cyan' | 'violet' | 'indigo';
+export declare const gradients: {
+    [key in GradientVariants]: (deg: number) => string;
+};

package/dist/variants/gradients.js

@@ -0,0 +1 @@
+var n={cyan:function(n){return"\n    linear-gradient(".concat(n,"deg, #5db6d4 0%, #369cc2 100%);\n  ")},violet:function(n){return"\n    linear-gradient(".concat(n,"deg, #8e2de2 0%, #5a00db 100%);\n  ")},indigo:function(n){return"\n    linear-gradient(".concat(n,"deg, #5487ba 0%, #26619e 100%);\n  ")}};export{n as gradients};

package/dist/variants/index.d.ts

@@ -0,0 +1,3 @@
+export * from './typographies';
+export * from './colors';
+export * from './theme';

package/dist/variants/theme.d.ts

@@ -0,0 +1,16 @@
+import { Theme } from '@emotion/react';
+import { typographies } from './typographies';
+import { colors } from './colors';
+import { breakpoints, screenSizes } from './breakpoints';
+import { gradients } from './gradients';
+declare module '@emotion/react' {
+    interface Theme {
+        colors: typeof colors;
+        typographies: typeof typographies;
+        breakpoints: typeof breakpoints;
+        screenSizes: typeof screenSizes;
+        gradients: typeof gradients;
+    }
+}
+export declare const theme: Theme;
+export type ThemeColors = keyof typeof colors;

package/dist/variants/theme.js

@@ -0,0 +1 @@
+import{typographies as r}from"./typographies.js";import{colors as o}from"./colors.js";import{breakpoints as s,screenSizes as i}from"./breakpoints.js";import{gradients as p}from"./gradients.js";var t={typographies:r,colors:o,breakpoints:s,screenSizes:i,gradients:p};export{t as theme};

package/dist/variants/typographies.d.ts

@@ -0,0 +1,5 @@
+import { SerializedStyles } from '@emotion/react';
+export type TypographyVariants = 'title1' | 'title2' | 'title3' | 'subTitle1' | 'subTitle2' | 'body1' | 'body2' | 'body3' | 'caption1' | 'caption2';
+export declare const typographies: {
+    [key in TypographyVariants]: SerializedStyles;
+};

package/dist/variants/typographies.js

@@ -0,0 +1 @@
+import{__makeTemplateObject as n}from"../_virtual/_tslib.js";import{css as i}from"@emotion/react";var e,t,p,h,x,o,l,f,s,g,z={title1:i(e=e||n(["\n    font-weight: 700;\n    font-size: 48px;\n    line-height: 64px;\n  "],["\n    font-weight: 700;\n    font-size: 48px;\n    line-height: 64px;\n  "])),title2:i(t=t||n(["\n    font-size: 32px;\n    line-height: 48px;\n  "],["\n    font-size: 32px;\n    line-height: 48px;\n  "])),title3:i(p=p||n(["\n    font-size: 24px;\n    line-height: 36px;\n  "],["\n    font-size: 24px;\n    line-height: 36px;\n  "])),subTitle1:i(h=h||n(["\n    font-size: 20px;\n    line-height: 30px;\n  "],["\n    font-size: 20px;\n    line-height: 30px;\n  "])),subTitle2:i(x=x||n(["\n    font-size: 18px;\n    line-height: 28px;\n  "],["\n    font-size: 18px;\n    line-height: 28px;\n  "])),body1:i(o=o||n(["\n    font-size: 16px;\n    line-height: 26px;\n  "],["\n    font-size: 16px;\n    line-height: 26px;\n  "])),body2:i(l=l||n(["\n    font-size: 14px;\n    line-height: 24px;\n  "],["\n    font-size: 14px;\n    line-height: 24px;\n  "])),body3:i(f=f||n(["\n    font-size: 13px;\n    line-height: 20px;\n  "],["\n    font-size: 13px;\n    line-height: 20px;\n  "])),caption1:i(s=s||n(["\n    font-size: 12px;\n    line-height: 18px;\n  "],["\n    font-size: 12px;\n    line-height: 18px;\n  "])),caption2:i(g=g||n(["\n    font-size: 11px;\n    line-height: 14px;\n  "],["\n    font-size: 11px;\n    line-height: 14px;\n  "]))};export{z as typographies};

package/package.json

@@ -1,45 +1,73 @@
 {
   "name": "@wishket/design-system",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "description": "Wishket Design System",
-  "types": "index.d.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
   "license": "MIT",
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "build": "rm -rf dist && rollup -c --bundleConfigAsCjs",
     "start": "next start",
-    "lint": "eslint \"./**/*.{ts,tsx,js,jsx}\" --ignore-path .eslintignore || true",
-    "test:unit": "jest --ci --runInBand --coverage --watchAll=false --passWithNoTests --testMatch=\"**/*.unit.spec.@(ts|tsx)\"",
-    "test:e2e": "jest --ci --runInBand --coverage --watchAll=false --passWithNoTests --testMatch=\"**/*.e2e.spec.@(ts|tsx)\""
+    "lint": "eslint './**/*.{ts,tsx,js,jsx}' --ignore-path .eslintignore || true",
+    "test": "jest --ci --runInBand --coverage --watchAll=false --passWithNoTests --testMatch=\"**/*.spec.@(ts|tsx)\"",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
     "next": "14.0.4",
     "react": "^18",
     "react-dom": "^18"
   },
   "devDependencies": {
-    "@testing-library/dom": "^9.3.3",
+    "@babel/core": "^7.23.7",
+    "@babel/preset-env": "^7.23.7",
+    "@babel/preset-react": "^7.23.3",
+    "@changesets/changelog-github": "^0.5.0",
+    "@changesets/cli": "^2.27.1",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@storybook/addon-essentials": "^7.6.7",
+    "@storybook/addon-interactions": "^7.6.7",
+    "@storybook/addon-links": "^7.6.7",
+    "@storybook/addon-onboarding": "^1.0.10",
+    "@storybook/blocks": "^7.6.7",
+    "@storybook/nextjs": "^7.6.7",
+    "@storybook/react": "^7.6.7",
+    "@storybook/test": "^7.6.7",
+    "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.2.0",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.11",
-    "@types/node": "^20.10.7",
+    "@types/node": "^20.11.0",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@wishket/eslint-config-wishket": "^1.0.0",
-    "autoprefixer": "^10.0.1",
     "babel-jest": "^29.7.0",
     "dotenv": "^16.3.1",
     "eslint": "^8",
     "eslint-config-next": "14.0.4",
+    "eslint-plugin-storybook": "^0.6.15",
     "jest": "^29.7.0",
     "jest-dom": "^4.0.0",
     "jest-environment-jsdom": "^29.7.0",
-    "postcss": "^8",
     "prettier-plugin-tailwindcss": "^0.5.11",
-    "tailwindcss": "^3.3.0",
+    "rollup": "^4.9.4",
+    "rollup-plugin-preserve-directives": "^0.2.0",
+    "rollup-plugin-svg": "^2.0.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "rollup-plugin-uglify": "^6.0.4",
+    "storybook": "^7.6.7",
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.2",
     "typescript": "^5"
-  }
+  },
+  "packageManager": "yarn@4.0.2"
 }

package/.editorconfig

@@ -1,12 +0,0 @@
-root = true
-[*]
-indent_style = space
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-indent_size = 2
-format_on_save = true
-
-[*.md]
-trim_trailing_whitespace = false

package/.eslintignore

@@ -1,3 +0,0 @@
-/node_modules
-__test__
-*.js

package/.eslintrc.js

@@ -1,33 +0,0 @@
-module.exports = {
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    project: ['tsconfig.json'],
-    tsconfigRootDir: __dirname,
-    sourceType: 'module',
-    createDefaultProgram: true
-  },
-  ignorePatterns: ['*.d.ts'],
-  extends: ["@wishket/eslint-config-wishket"],
-  root: true,
-  env: {
-    node: true,
-    browser: true
-  },
-  globals: {
-    document: false,
-    Map: false,
-    Promise: false
-  },
-  settings: {
-    react: {
-      version: 'detect'
-    },
-    'import/parsers': {
-      '@typescript-eslint/parser': ['.ts', '.tsx']
-    },
-    'import/resolver': {
-      typescript: {}
-    },
-    'import/ignore': ['testing-utils']
-  }
-}

package/.github/CODEOWNERS

@@ -1 +0,0 @@
-* @wishket/frontend

package/.github/ISSUE_TEMPLATE/bug.md

@@ -1,44 +0,0 @@
----
-name: 버그 이슈 
-about: 버그에 대한 티켓을 생성합니다.
-title: ''
-labels: 'bug'
----
-
-## 버그에 대한 내용
-
-어떤 버그인지 기대 동작과 현상에 대해 작성합니다.
-
-- ex. 등록 버튼 클릭 시 서버 요청 에러가 발생하고 결과에 대한 팝업이 노출되지 않음
-
-## To reproduce
-
-버그 재현 방법에 대해 작성합니다.
-
-- ex.
-  1. <https://example.com> 접속
-  2. 계정 로그인
-  3. <https://example.com/form> 접속
-  4. form 작성
-  5. '등록' 버튼 클릭
-
-## 기대 현상
-
-예상한 상황에 대한 명확하고 간결한 설명입니다.
-
-- ex. 등록 버튼 클릭 시 서버 요청 및 응답 받아 해당 결과에 대한 팝업 노출
-
-## Screenshots
-
-버그를 설명하는데 도움이 되는 스크린샷을 추가합니다.
-
-### 발생 환경
-
-- Device: [e.g. iPhone6]
-- OS: [e.g. iOS]
-- Browser [e.g. chrome, safari]
-- Version [e.g. 22]
-
-### Additional context
-
-추가적인 컨텍스트를 작성합니다.