@teamturing/react-kit 1.4.0 → 2.0.1

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

@@ -274,7 +274,7 @@ declare const GradientText: import("styled-components").IStyledComponent<"web",
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
 } & {
     typography?: import("styled-system").ResponsiveValue<"s" | "m" | "xxs" | "xs" | "l" | "xl" | "xxl" | "display1" | "display2" | "display3" | "display4" | "xxl/regular" | "xxl/bold" | "xl/regular" | "xl/bold" | "l/regular" | "l/bold" | "m/regular" | "m/bold" | "s/regular" | "s/bold" | "xs/regular" | "xs/bold" | "xxs/regular" | "xxs/bold"> | undefined;
-} & import("../../utils/styled-system").SxProp & import("../../utils/styled-system").WordBreakProps & import("../../utils/styled-system").WhiteSpaceProps & import("../../utils/styled-system").TextDecorationProps & import("styled-system").FontSizeProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "s" | "m" | "xxs" | "xs" | "l" | "xl" | "xxl" | "display1" | "display2" | "display3" | "display4"> & import("styled-system").FontWeightProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "bold" | "medium" | "regular"> & import("styled-system").LineHeightProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, 2 | 1> & import("styled-system").TextAlignProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "link" | "icon/neutral" | "scale/violet/0" | "scale/violet/1" | "scale/violet/2" | "scale/violet/3" | "scale/violet/4" | "scale/violet/5" | "scale/violet/6" | "scale/violet/7" | "scale/violet/8" | "scale/violet/9" | "dim" | "link/hovered" | "link/pressed" | "link/neutral" | "link/neutral/hovered" | "link/neutral/pressed" | "link/neutral/bold" | "link/neutral/bold/hovered" | "link/neutral/bold/pressed" | "link/disabled" | "icon/neutral/bold" | "icon/neutral/bolder" | "icon/accent/gray" | "icon/accent/blue" | "icon/accent/blue/bold" | "icon/accent/green" | "icon/accent/yellow" | "icon/accent/red" | "icon/inverse" | "icon/disabled" | "icon/disabled/subtler" | "icon/selected/primary" | "icon/selected/neutral" | "icon/primary" | "icon/primary/subtle" | "icon/primary/bold" | "icon/success" | "icon/warning" | "icon/danger" | "border/neutral/subtle" | "border/neutral" | "border/neutral/bolder" | "border/input" | "border/inverse" | "border/disabled" | "border/primary" | "border/hovered" | "border/focused" | "border/danger" | "border/success" | "bg/secondary" | "bg/secondary/hovered" | "bg/secondary/pressed" | "bg/primary" | "bg/primary/hovered" | "bg/primary/pressed" | "bg/neutral/subtler" | "bg/neutral/subtler/hovered" | "bg/neutral/subtler/pressed" | "bg/neutral/subtle" | "bg/neutral/subtle/hovered" | "bg/neutral/subtle/pressed" | "bg/neutral" | "bg/neutral/hovered" | "bg/neutral/pressed" | "bg/neutral/bold" | "bg/neutral/bold/hovered" | "bg/neutral/bold/pressed" | "bg/neutral/bolder" | "bg/neutral/bolder/hovered" | "bg/neutral/bolder/pressed" | "bg/disabled" | "bg/disabled/subtlest" | "bg/input" | "bg/accent/green/subtlest" | "bg/accent/yellow/subtlest" | "bg/accent/red/subtlest" | "bg/accent/red/subtle" | "bg/accent/red" | "bg/accent/gray/subtlest" | "bg/accent/blue/subtlest" | "bg/selected/violet" | "bg/selected/neutral" | "bg/selected/neutral/subtle" | "bg/inverse" | "bg/inverse/subtlest" | "bg/success" | "bg/success/bold" | "bg/warning" | "bg/warning/bold" | "bg/danger" | "bg/danger/bold" | "bg/danger/bold/hovered" | "bg/danger/bold/pressed" | "text/primary" | "text/accent/blue" | "text/accent/green" | "text/accent/yellow" | "text/accent/red" | "text/neutral/subtlest" | "text/neutral/subtler" | "text/neutral/subtle" | "text/neutral" | "text/inverse" | "text/inverse/subtle" | "text/inverse/subtler" | "text/disabled" | "text/success" | "text/warning" | "text/danger" | "text/selected/neutral">, "ref"> & {
+} & import("../../utils/styled-system").SxProp & import("../../utils/styled-system").WordBreakProps & import("../../utils/styled-system").WhiteSpaceProps & import("../../utils/styled-system").TextDecorationProps & import("styled-system").FontSizeProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "s" | "m" | "xxs" | "xs" | "l" | "xl" | "xxl" | "display1" | "display2" | "display3" | "display4"> & import("styled-system").FontWeightProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "bold" | "medium" | "regular"> & import("styled-system").LineHeightProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, 2 | 1> & import("styled-system").TextAlignProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>, "link" | "icon/neutral" | "scale/violet/0" | "scale/violet/1" | "scale/violet/2" | "scale/violet/3" | "scale/violet/4" | "scale/violet/5" | "scale/violet/6" | "scale/violet/7" | "scale/violet/8" | "scale/violet/9" | "dim" | "link/hovered" | "link/pressed" | "link/neutral" | "link/neutral/hovered" | "link/neutral/pressed" | "link/neutral/bold" | "link/neutral/bold/hovered" | "link/neutral/bold/pressed" | "link/disabled" | "icon/neutral/bold" | "icon/neutral/bolder" | "icon/accent/gray" | "icon/accent/blue" | "icon/accent/blue/bold" | "icon/accent/green" | "icon/accent/yellow" | "icon/accent/red" | "icon/inverse" | "icon/disabled" | "icon/disabled/subtler" | "icon/selected/violet" | "icon/selected" | "icon/primary/subtle" | "icon/primary" | "icon/primary/bold" | "icon/success" | "icon/warning" | "icon/danger" | "border/neutral/subtle" | "border/neutral" | "border/neutral/bolder" | "border/input" | "border/inverse" | "border/selected" | "border/disabled" | "border/primary" | "border/hovered" | "border/focused" | "border/danger" | "border/success" | "bg/secondary" | "bg/secondary/hovered" | "bg/secondary/pressed" | "bg/primary" | "bg/primary/hovered" | "bg/primary/pressed" | "bg/neutral/subtler" | "bg/neutral/subtler/hovered" | "bg/neutral/subtler/pressed" | "bg/neutral/subtle" | "bg/neutral/subtle/hovered" | "bg/neutral/subtle/pressed" | "bg/neutral" | "bg/neutral/hovered" | "bg/neutral/pressed" | "bg/neutral/bold" | "bg/neutral/bold/hovered" | "bg/neutral/bold/pressed" | "bg/neutral/bolder" | "bg/neutral/bolder/hovered" | "bg/neutral/bolder/pressed" | "bg/disabled" | "bg/disabled/subtlest" | "bg/input" | "bg/accent/blue/subtlest" | "bg/accent/green/subtlest" | "bg/accent/yellow/subtlest" | "bg/accent/red/subtlest" | "bg/accent/red/subtle" | "bg/accent/red" | "bg/accent/gray/subtlest" | "bg/selected/violet" | "bg/selected" | "bg/selected/subtle" | "bg/inverse" | "bg/inverse/subtlest" | "bg/success" | "bg/success/bold" | "bg/warning" | "bg/warning/bold" | "bg/danger" | "bg/danger/bold" | "bg/danger/bold/hovered" | "bg/danger/bold/pressed" | "text/primary" | "text/accent/blue" | "text/accent/green" | "text/accent/yellow" | "text/accent/red" | "text/neutral/subtlest" | "text/neutral/subtler" | "text/neutral/subtle" | "text/neutral" | "text/inverse" | "text/inverse/subtle" | "text/inverse/subtler" | "text/disabled" | "text/success" | "text/warning" | "text/danger" | "text/selected">, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
 }, Props>>;
 export default GradientText;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { LayoutProps } from 'styled-system';
+import { SxProp } from '../../utils/styled-system';
+type Props = {} & SxProp & LayoutProps;
+declare const Image: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, Props>>;
+export default Image;
+export type { Props as ImageProps };

package/dist/enigma/EnigmaUI/index.d.ts

@@ -0,0 +1,6 @@
+import { ISection } from '../types';
+type Props = {
+    section: ISection;
+};
+declare const EnigmaUI: ({ section: { views, responsiveLayout } }: Props) => import("react/jsx-runtime").JSX.Element;
+export default EnigmaUI;

package/dist/enigma/Layout/SingleColumnLayout/index.d.ts

@@ -0,0 +1,8 @@
+import { SingleColumnLayout as SingleColumnLayoutType } from '../../types';
+type Props = {
+    layout: SingleColumnLayoutType;
+    viewsObject: any;
+    viewComponentsObject: any;
+};
+declare const SingleColumnLayout: ({ layout, viewsObject, viewComponentsObject }: Props) => import("react/jsx-runtime").JSX.Element;
+export default SingleColumnLayout;

package/dist/enigma/Layout/index.d.ts

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

package/dist/enigma/View/ImageView/index.d.ts

@@ -0,0 +1,6 @@
+import { ImageView as ImageViewType } from '../../types';
+type Props = {
+    view: ImageViewType;
+};
+declare const ImageView: ({ view: { ...props } }: Props) => import("react/jsx-runtime").JSX.Element;
+export default ImageView;

package/dist/enigma/View/TextView/index.d.ts

@@ -0,0 +1,6 @@
+import { TextView as TextViewType } from '../../types';
+type Props = {
+    view: TextViewType;
+};
+declare const TextView: ({ view: { text, textProps } }: Props) => import("react/jsx-runtime").JSX.Element;
+export default TextView;

package/dist/enigma/View/index.d.ts

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

package/dist/enigma/types/index.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Default Types
+ */
+type TextProps = any;
+type SpaceProps = any;
+/**
+ * View Related Model
+ */
+export type TextView = {
+    text: string;
+    textProps?: TextProps;
+};
+export type ImageView = {
+    src: string;
+    alt: string;
+    width: number;
+    height: number;
+};
+export type View = TextView | ImageView;
+export type ViewComponentType = 'TextView' | 'ImageView';
+export interface IViewContainer {
+    id: string;
+    viewComponentType: ViewComponentType;
+    view: View;
+}
+/**
+ * Layout Related Model
+ */
+export interface IViewContainerDetail {
+    viewContainerId: string;
+    spaceProps: SpaceProps;
+}
+export type SingleColumnLayout = {
+    main: IViewContainerDetail[];
+};
+export type Layout = SingleColumnLayout;
+export type LayoutComponentType = 'SingleColumnLayout';
+export interface ILayoutContainer {
+    layoutComponentType: LayoutComponentType;
+    layout: Layout;
+}
+export interface IResponsiveLayoutContainer {
+    mobile: ILayoutContainer;
+    tablet?: ILayoutContainer;
+    desktop?: ILayoutContainer;
+}
+/**
+ * Section Related Model
+ */
+export interface ISection {
+    id: string;
+    views: IViewContainer[];
+    responsiveLayout: IResponsiveLayoutContainer;
+}
+export {};

package/dist/index.d.ts

@@ -1,3 +1,6 @@
+/**
+ * core components
+ */
 export { default as Button } from './core/Button';
 export type { ButtonProps } from './core/Button';
 export { default as Chip } from './core/Chip';
@@ -10,6 +13,8 @@ export { default as IconButton } from './core/IconButton';
 export type { IconButtonProps } from './core/IconButton';
 export { default as IconToggleButton } from './core/IconToggleButton';
 export type { IconToggleButtonProps } from './core/IconToggleButton';
+export { default as Image } from './core/Image';
+export type { ImageProps } from './core/Image';
 export { default as ItemList } from './core/ItemList';
 export type { ItemListProps } from './core/ItemList';
 export { default as Space } from './core/Space';
@@ -26,6 +31,13 @@ export { default as View } from './core/View';
 export type { ViewProps } from './core/View';
 export { default as UnstyledButton } from './core/_UnstyledButton';
 export type { UnstyledButtonProps } from './core/_UnstyledButton';
+/**
+ * enigma component
+ */
+export { default as EnigmaUI } from './enigma/EnigmaUI';
+/**
+ * hooks
+ */
 export { default as useDevice } from './hook/useDevice';
 export { default as useOutsideClick } from './hook/useOutsideClick';
 export { default as useProvidedOrCreatedRef } from './hook/useProvidedOrCreatedRef';

package/dist/index.js

@@ -26,6 +26,15 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
+const device = {
+  deviceDesktop: 1280,
+  deviceTablet: 900,
+  deviceMobile: 640
+};
+
+const baseBreakpoints = [device.deviceMobile, device.deviceTablet, device.deviceDesktop];
+const breakpoints = baseBreakpoints.map(value => `${value + 1}px`);
+
 const gray = {
   gray50: '#F9FAFB',
   gray100: '#F3F4F6',
@@ -132,7 +141,7 @@ const textColor = {
   'text/success': palette.green500,
   'text/warning': palette.yellow500,
   'text/danger': palette.red500,
-  'text/selected/neutral': palette.gray900
+  'text/selected': palette.gray900
 };
 const bgColor = {
   'bg/secondary': palette.violet50,
@@ -159,16 +168,16 @@ const bgColor = {
   'bg/disabled': palette.gray100,
   'bg/disabled/subtlest': palette.transparent,
   'bg/input': palette.white,
+  'bg/accent/blue/subtlest': palette.blue50,
   'bg/accent/green/subtlest': palette.green50,
   'bg/accent/yellow/subtlest': palette.yellow50,
   'bg/accent/red/subtlest': palette.red50,
   'bg/accent/red/subtle': palette.red400,
   'bg/accent/red': palette.red500,
   'bg/accent/gray/subtlest': palette.gray200,
-  'bg/accent/blue/subtlest': palette.blue50,
   'bg/selected/violet': palette.violet500,
-  'bg/selected/neutral': palette.gray900,
-  'bg/selected/neutral/subtle': palette.gray100,
+  'bg/selected': palette.gray900,
+  'bg/selected/subtle': palette.gray100,
   'bg/inverse': palette.black,
   'bg/inverse/subtlest': palette.white10A,
   'bg/success': palette.green50,
@@ -186,6 +195,7 @@ const borderColor = {
   'border/neutral/bolder': palette.gray300,
   'border/input': palette.gray200,
   'border/inverse': palette.white10A,
+  'border/selected': palette.gray900,
   'border/disabled': palette.gray100,
   'border/primary': palette.violet500,
   'border/hovered': palette.blue300,
@@ -206,10 +216,10 @@ const iconColor = {
   'icon/inverse': palette.white,
   'icon/disabled': palette.gray300,
   'icon/disabled/subtler': palette.gray200,
-  'icon/selected/primary': palette.violet500,
-  'icon/selected/neutral': palette.gray900,
-  'icon/primary': palette.violet500,
+  'icon/selected/violet': palette.violet500,
+  'icon/selected': palette.gray900,
   'icon/primary/subtle': palette.violet300,
+  'icon/primary': palette.violet500,
   'icon/primary/bold': palette.violet700,
   'icon/success': palette.green500,
   'icon/warning': palette.yellow500,
@@ -3837,7 +3847,7 @@ const BaseIconToggleButton = styled__default.default(UnstyledButton)(({
     plain: {
       backgroundColor: color$1['bg/neutral/subtler'],
       ...(selected ? {
-        color: color$1['icon/selected/primary']
+        color: color$1['icon/selected/violet']
       } : {
         color: color$1['icon/neutral']
       }),
@@ -3849,6 +3859,11 @@ const BaseIconToggleButton = styled__default.default(UnstyledButton)(({
   }
 }), sx);
 
+const Image = styled__default.default.img`
+  ${layout}
+  ${sx}
+`;
+
 const ItemList = ({
   items,
   renderItem,
@@ -3937,6 +3952,126 @@ const StyledIcon = ({
   children: /*#__PURE__*/jsxRuntimeExports.jsx(Icon, {})
 });
 
+const useMediaQuery = query => {
+  const getMatches = query => {
+    /**
+     * SSR 문제를 방지하기 위해 있습니다.
+     */
+    if (typeof window !== 'undefined') {
+      return window.matchMedia(query).matches;
+    }
+    return false;
+  };
+  const [matches, setMatches] = React.useState(getMatches(query));
+  function handleChange() {
+    setMatches(getMatches(query));
+  }
+  React.useEffect(() => {
+    const matchMedia = window.matchMedia(query);
+
+    /**
+     * 클라이언트에서 mediaQuery를 반영하기 위해 로드됩니다.
+     */
+    handleChange();
+    if (matchMedia.addListener) {
+      matchMedia.addListener(handleChange);
+    } else {
+      matchMedia.addEventListener('change', handleChange);
+    }
+    return () => {
+      if (matchMedia.removeListener) {
+        matchMedia.removeListener(handleChange);
+      } else {
+        matchMedia.removeEventListener('change', handleChange);
+      }
+    };
+  }, [query]);
+  return matches;
+};
+
+const SingleColumnLayout = ({
+  layout,
+  viewsObject,
+  viewComponentsObject
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(ItemList, {
+  items: layout.main,
+  renderItem: ({
+    viewContainerId
+  }) => {
+    const view = viewsObject[viewContainerId];
+    const ViewComponent = viewComponentsObject[viewContainerId];
+    return ViewComponent ? /*#__PURE__*/jsxRuntimeExports.jsx(ViewComponent, {
+      view: view
+    }) : null;
+  },
+  renderItemWrapper: (children, {
+    viewContainerId,
+    spaceProps
+  }, i) => /*#__PURE__*/jsxRuntimeExports.jsx(Space, {
+    ...spaceProps,
+    children: children
+  }, [viewContainerId, `${i}`].join('-'))
+});
+
+const ImageView = ({
+  view: {
+    ...props
+  }
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(Image, {
+  loading: 'lazy',
+  ...props
+});
+
+const TextView = ({
+  view: {
+    text,
+    textProps
+  }
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(Text, {
+  ...textProps,
+  children: text
+});
+
+const EnigmaUI = ({
+  section: {
+    views,
+    responsiveLayout
+  }
+}) => {
+  const isMatchDesktop = useMediaQuery(`screen and (min-width: ${breakpoints[1]})`);
+  const isMatchTablet = useMediaQuery(`screen and (min-width: ${breakpoints[0]})`);
+  const media = isMatchDesktop ? 'desktop' : !isMatchDesktop && isMatchTablet ? 'tablet' : 'mobile';
+  const layoutContainer = responsiveLayout[media] || responsiveLayout['desktop'] || responsiveLayout['tablet'] || responsiveLayout['mobile'];
+  const LayoutComponent = getLayoutComponent(layoutContainer);
+  const layout = layoutContainer.layout;
+  const viewsObject = Object.fromEntries(views.map(viewContainer => {
+    return [viewContainer.id, viewContainer.view];
+  }));
+  const viewComponentsObject = Object.fromEntries(views.map(view => {
+    return [view.id, getViewComponent(view)];
+  }));
+  return /*#__PURE__*/jsxRuntimeExports.jsx(LayoutComponent, {
+    layout: layout,
+    viewsObject: viewsObject,
+    viewComponentsObject: viewComponentsObject
+  });
+};
+const getLayoutComponent = layoutContainer => {
+  const renderableLayoutComponent = {
+    SingleColumnLayout: SingleColumnLayout
+  };
+  const LayoutComponent = renderableLayoutComponent[layoutContainer.layoutComponentType];
+  return LayoutComponent;
+};
+const getViewComponent = viewContainer => {
+  const renderableViewComponent = {
+    TextView: TextView,
+    ImageView: ImageView
+  };
+  const ViewComponent = renderableViewComponent[viewContainer.viewComponentType];
+  return ViewComponent;
+};
+
 /**
  * lodash (Custom Build) <https://lodash.com/>
  * Build: `lodash modularize exports="npm" -o ./`
@@ -4441,10 +4576,12 @@ const useToggleHandler = ({
 
 exports.Button = Button;
 exports.Chip = Chip;
+exports.EnigmaUI = EnigmaUI;
 exports.GradientText = GradientText;
 exports.Grid = index$1;
 exports.IconButton = IconButton;
 exports.IconToggleButton = IconToggleButton;
+exports.Image = Image;
 exports.ItemList = ItemList;
 exports.Space = Space;
 exports.Spinner = Spinner;

package/esm/core/IconToggleButton/index.js

@@ -92,7 +92,7 @@ const BaseIconToggleButton = styled(UnstyledButton)(({
     plain: {
       backgroundColor: color['bg/neutral/subtler'],
       ...(selected ? {
-        color: color['icon/selected/primary']
+        color: color['icon/selected/violet']
       } : {
         color: color['icon/neutral']
       }),

package/esm/core/Image/index.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import '../../node_modules/styled-system/dist/index.esm.js';
+import { sx } from '../../utils/styled-system/index.js';
+import { layout } from '../../node_modules/@styled-system/layout/dist/index.esm.js';
+
+const Image = styled.img`
+  ${layout}
+  ${sx}
+`;
+
+export { Image as default };

package/esm/enigma/EnigmaUI/index.js

@@ -0,0 +1,48 @@
+import breakpoints from '../../packages/token-studio/esm/token/breakpoints/index.js';
+import useMediaQuery from '../../hook/useMediaQuery.js';
+import SingleColumnLayout from '../Layout/SingleColumnLayout/index.js';
+import ImageView from '../View/ImageView/index.js';
+import TextView from '../View/TextView/index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const EnigmaUI = ({
+  section: {
+    views,
+    responsiveLayout
+  }
+}) => {
+  const isMatchDesktop = useMediaQuery(`screen and (min-width: ${breakpoints[1]})`);
+  const isMatchTablet = useMediaQuery(`screen and (min-width: ${breakpoints[0]})`);
+  const media = isMatchDesktop ? 'desktop' : !isMatchDesktop && isMatchTablet ? 'tablet' : 'mobile';
+  const layoutContainer = responsiveLayout[media] || responsiveLayout['desktop'] || responsiveLayout['tablet'] || responsiveLayout['mobile'];
+  const LayoutComponent = getLayoutComponent(layoutContainer);
+  const layout = layoutContainer.layout;
+  const viewsObject = Object.fromEntries(views.map(viewContainer => {
+    return [viewContainer.id, viewContainer.view];
+  }));
+  const viewComponentsObject = Object.fromEntries(views.map(view => {
+    return [view.id, getViewComponent(view)];
+  }));
+  return /*#__PURE__*/jsxRuntimeExports.jsx(LayoutComponent, {
+    layout: layout,
+    viewsObject: viewsObject,
+    viewComponentsObject: viewComponentsObject
+  });
+};
+const getLayoutComponent = layoutContainer => {
+  const renderableLayoutComponent = {
+    SingleColumnLayout: SingleColumnLayout
+  };
+  const LayoutComponent = renderableLayoutComponent[layoutContainer.layoutComponentType];
+  return LayoutComponent;
+};
+const getViewComponent = viewContainer => {
+  const renderableViewComponent = {
+    TextView: TextView,
+    ImageView: ImageView
+  };
+  const ViewComponent = renderableViewComponent[viewContainer.viewComponentType];
+  return ViewComponent;
+};
+
+export { EnigmaUI as default };

package/esm/enigma/Layout/SingleColumnLayout/index.js

@@ -0,0 +1,29 @@
+import ItemList from '../../../core/ItemList/index.js';
+import Space from '../../../core/Space/index.js';
+import { j as jsxRuntimeExports } from '../../../node_modules/react/jsx-runtime.js';
+
+const SingleColumnLayout = ({
+  layout,
+  viewsObject,
+  viewComponentsObject
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(ItemList, {
+  items: layout.main,
+  renderItem: ({
+    viewContainerId
+  }) => {
+    const view = viewsObject[viewContainerId];
+    const ViewComponent = viewComponentsObject[viewContainerId];
+    return ViewComponent ? /*#__PURE__*/jsxRuntimeExports.jsx(ViewComponent, {
+      view: view
+    }) : null;
+  },
+  renderItemWrapper: (children, {
+    viewContainerId,
+    spaceProps
+  }, i) => /*#__PURE__*/jsxRuntimeExports.jsx(Space, {
+    ...spaceProps,
+    children: children
+  }, [viewContainerId, `${i}`].join('-'))
+});
+
+export { SingleColumnLayout as default };

package/esm/enigma/View/ImageView/index.js

@@ -0,0 +1,13 @@
+import Image from '../../../core/Image/index.js';
+import { j as jsxRuntimeExports } from '../../../node_modules/react/jsx-runtime.js';
+
+const ImageView = ({
+  view: {
+    ...props
+  }
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(Image, {
+  loading: 'lazy',
+  ...props
+});
+
+export { ImageView as default };

package/esm/enigma/View/TextView/index.js

@@ -0,0 +1,14 @@
+import Text from '../../../core/Text/index.js';
+import { j as jsxRuntimeExports } from '../../../node_modules/react/jsx-runtime.js';
+
+const TextView = ({
+  view: {
+    text,
+    textProps
+  }
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(Text, {
+  ...textProps,
+  children: text
+});
+
+export { TextView as default };

package/esm/hook/useMediaQuery.js

@@ -0,0 +1,40 @@
+import { useState, useEffect } from 'react';
+
+const useMediaQuery = query => {
+  const getMatches = query => {
+    /**
+     * SSR 문제를 방지하기 위해 있습니다.
+     */
+    if (typeof window !== 'undefined') {
+      return window.matchMedia(query).matches;
+    }
+    return false;
+  };
+  const [matches, setMatches] = useState(getMatches(query));
+  function handleChange() {
+    setMatches(getMatches(query));
+  }
+  useEffect(() => {
+    const matchMedia = window.matchMedia(query);
+
+    /**
+     * 클라이언트에서 mediaQuery를 반영하기 위해 로드됩니다.
+     */
+    handleChange();
+    if (matchMedia.addListener) {
+      matchMedia.addListener(handleChange);
+    } else {
+      matchMedia.addEventListener('change', handleChange);
+    }
+    return () => {
+      if (matchMedia.removeListener) {
+        matchMedia.removeListener(handleChange);
+      } else {
+        matchMedia.removeEventListener('change', handleChange);
+      }
+    };
+  }, [query]);
+  return matches;
+};
+
+export { useMediaQuery as default };

package/esm/index.js

@@ -4,6 +4,7 @@ export { default as GradientText } from './core/GradientText/index.js';
 export { default as Grid } from './core/Grid/index.js';
 export { default as IconButton } from './core/IconButton/index.js';
 export { default as IconToggleButton } from './core/IconToggleButton/index.js';
+export { default as Image } from './core/Image/index.js';
 export { default as ItemList } from './core/ItemList/index.js';
 export { default as Space } from './core/Space/index.js';
 export { default as Spinner } from './core/Spinner/index.js';
@@ -12,6 +13,7 @@ export { default as StyledIcon } from './core/StyledIcon/index.js';
 export { default as Text } from './core/Text/index.js';
 export { default as View } from './core/View/index.js';
 export { default as UnstyledButton } from './core/_UnstyledButton.js';
+export { default as EnigmaUI } from './enigma/EnigmaUI/index.js';
 export { default as useDevice } from './hook/useDevice.js';
 export { default as useOutsideClick } from './hook/useOutsideClick.js';
 export { default as useProvidedOrCreatedRef } from './hook/useProvidedOrCreatedRef.js';

package/esm/packages/token-studio/esm/foundation/breakpoint/device.js

@@ -0,0 +1,7 @@
+const device = {
+  deviceDesktop: 1280,
+  deviceTablet: 900,
+  deviceMobile: 640
+};
+
+export { device as default };

package/esm/packages/token-studio/esm/token/breakpoints/index.js

@@ -0,0 +1,6 @@
+import device from '../../foundation/breakpoint/device.js';
+
+const baseBreakpoints = [device.deviceMobile, device.deviceTablet, device.deviceDesktop];
+const breakpoints = baseBreakpoints.map(value => `${value + 1}px`);
+
+export { baseBreakpoints, breakpoints as default };

package/esm/packages/token-studio/esm/token/color/index.js

@@ -17,7 +17,7 @@ const textColor = {
   'text/success': palette.green500,
   'text/warning': palette.yellow500,
   'text/danger': palette.red500,
-  'text/selected/neutral': palette.gray900
+  'text/selected': palette.gray900
 };
 const bgColor = {
   'bg/secondary': palette.violet50,
@@ -44,16 +44,16 @@ const bgColor = {
   'bg/disabled': palette.gray100,
   'bg/disabled/subtlest': palette.transparent,
   'bg/input': palette.white,
+  'bg/accent/blue/subtlest': palette.blue50,
   'bg/accent/green/subtlest': palette.green50,
   'bg/accent/yellow/subtlest': palette.yellow50,
   'bg/accent/red/subtlest': palette.red50,
   'bg/accent/red/subtle': palette.red400,
   'bg/accent/red': palette.red500,
   'bg/accent/gray/subtlest': palette.gray200,
-  'bg/accent/blue/subtlest': palette.blue50,
   'bg/selected/violet': palette.violet500,
-  'bg/selected/neutral': palette.gray900,
-  'bg/selected/neutral/subtle': palette.gray100,
+  'bg/selected': palette.gray900,
+  'bg/selected/subtle': palette.gray100,
   'bg/inverse': palette.black,
   'bg/inverse/subtlest': palette.white10A,
   'bg/success': palette.green50,
@@ -71,6 +71,7 @@ const borderColor = {
   'border/neutral/bolder': palette.gray300,
   'border/input': palette.gray200,
   'border/inverse': palette.white10A,
+  'border/selected': palette.gray900,
   'border/disabled': palette.gray100,
   'border/primary': palette.violet500,
   'border/hovered': palette.blue300,
@@ -91,10 +92,10 @@ const iconColor = {
   'icon/inverse': palette.white,
   'icon/disabled': palette.gray300,
   'icon/disabled/subtler': palette.gray200,
-  'icon/selected/primary': palette.violet500,
-  'icon/selected/neutral': palette.gray900,
-  'icon/primary': palette.violet500,
+  'icon/selected/violet': palette.violet500,
+  'icon/selected': palette.gray900,
   'icon/primary/subtle': palette.violet300,
+  'icon/primary': palette.violet500,
   'icon/primary/bold': palette.violet700,
   'icon/success': palette.green500,
   'icon/warning': palette.yellow500,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "1.4.0",
+  "version": "2.0.1",
   "description": "React components, hooks for create teamturing web application",
   "author": "Sungchang Park <psch300@gmail.com> (https://github.com/psch300)",
   "homepage": "https://github.com/weareteamturing/bombe#readme",
@@ -50,10 +50,10 @@
   },
   "dependencies": {
     "@teamturing/icons": "^1.19.0",
-    "@teamturing/token-studio": "^1.1.6",
+    "@teamturing/token-studio": "^1.1.7",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "e302acb51e25f77d313c324dafbaaed9655abeae"
+  "gitHead": "f109beda81cc597a7c045964c71a1c0f209a30ec"
 }