pds-dev-kit-web 1.3.28 → 1.4.0

package/dist/index.d.ts

@@ -1,18 +1,18 @@
-import { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, UiColors, PdsDevKitTheme, fontWeight, desktopFontSize, desktopLineHeight, mobileFontSize, mobileLineHeight, boxShadow, spacing, uiColors, customTheme, theme, Form } from './src/common';
-export { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, UiColors };
+import { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, UiColors, PdsDevKitTheme, fontWeight, desktopFontSize, desktopLineHeight, mobileFontSize, mobileLineHeight, boxShadow, spacing, uiColors, customTheme, theme, Form, PDSIconType, ForwardedRefType } from './src/common';
+export { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, UiColors, PDSIconType, ForwardedRefType };
 export { fontWeight, desktopFontSize, desktopLineHeight, mobileFontSize, mobileLineHeight, boxShadow, spacing, uiColors, customTheme };
 export { theme };
 export { Form };
 import { Divider, Icon, ImageView, Spacing, Switch } from './src/hybrid';
 export { Divider, Icon, ImageView, Spacing, Switch };
-import { LayoutWF, WFContainersBox, LayoutWS, WSGlobalMenuContainer, WSContainersBox, LayoutWT, WTGlobalMenuContainer, WTContainersBox, D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopBasicModal, D_DesktopHeaderBar, D_DesktopTabBar, D_Dropdown, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_IconButton, D_ImageSlide, D_MainButton, D_PageTitleTextGroup, D_Radio, D_ReactionButton, D_Select, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar } from './src/desktop';
+import { LayoutWF, WFContainersBox, LayoutWS, WSGlobalMenuContainer, WSContainersBox, LayoutWT, WTGlobalMenuContainer, WTContainersBox, D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopBasicModal, D_DesktopHeaderBar, D_DesktopHeadlessModal, D_DesktopTabBar, D_Dropdown, D_DynamicDesktopNavBar, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_MainButton, D_PageTitleTextGroup, D_Radio, D_ReactionButton, D_Select, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar } from './src/desktop';
 export { LayoutWF, WFContainersBox };
 export { LayoutWS, WSGlobalMenuContainer, WSContainersBox };
 export { LayoutWT, WTGlobalMenuContainer, WTContainersBox };
-export { D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopBasicModal, D_DesktopHeaderBar, D_DesktopTabBar, D_Dropdown, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_IconButton, D_ImageSlide, D_MainButton, D_PageTitleTextGroup, D_Radio, D_ReactionButton, D_Select, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar };
-import { LayoutMF, MFContainersBox, LayoutMM, MMNavigationContainer, MMContainersBox, LayoutMP, MPNavigationContainer, MPTabContainer, MPContainersBox, LayoutMS, MSNavigationContainer, MSContainersBox, M_BasicFormGroup, M_BasicList, M_BasicListItem, M_BlogTextField, M_BodyTextGroup, M_Card, M_CardList, M_Checkbox, M_Chip, M_ContextMenu, M_ContextMenuItem, M_Dropdown, M_IconButton, M_ImageSlide, M_MainButton, M_MobileAlertDialog, M_MobileBasicModal, M_MobileHeaderBar, M_MobileTabBar, M_Radio, M_ReactionButton, M_Select, M_StatusBlock, M_TextButton, M_TextField, M_TextLabel, M_UploadIconButton, M_UploadMainButton, M_UploadTextButton } from './src/mobile';
+export { D_AdminList, D_AdminListHeader, D_AdminListItem, D_BasicFormGroup, D_BasicList, D_BasicListItem, D_BlogTextField, D_BodyTextGroup, D_Card, D_CardList, D_Checkbox, D_Chip, D_ContextMenu, D_ContextMenuItem, D_DesktopAlertDialog, D_DesktopBasicModal, D_DesktopHeaderBar, D_DesktopHeadlessModal, D_DesktopTabBar, D_Dropdown, D_EditApplyTextField, D_FilterBar, D_FloatingActionButton, D_Hero, D_HorizontalFormGroup, D_IconButton, D_ImageSlide, D_MainButton, D_PageTitleTextGroup, D_Radio, D_ReactionButton, D_Select, D_StatusBlock, D_TextButton, D_TextField, D_TextLabel, D_UploadIconButton, D_UploadMainButton, D_UploadTextButton, D_UserDesktopNavBar, D_UserDesktopTabBar, D_DynamicDesktopNavBar };
+import { LayoutMF, MFContainersBox, LayoutMM, MMNavigationContainer, MMContainersBox, LayoutMP, MPNavigationContainer, MPTabContainer, MPContainersBox, LayoutMS, MSNavigationContainer, MSContainersBox, M_BasicFormGroup, M_BasicList, M_BasicListItem, M_BlogTextField, M_BodyTextGroup, M_Card, M_CardList, M_Checkbox, M_Chip, M_ContextMenu, M_ContextMenuItem, M_Dropdown, M_HorizontalFormGroup, M_IconButton, M_ImageSlide, M_MainButton, M_MobileAlertDialog, M_MobileBasicModal, M_MobileHeaderBar, M_MobileTabBar, M_Radio, M_ReactionButton, M_Select, M_StatusBlock, M_TextButton, M_TextField, M_TextLabel, M_UploadIconButton, M_UploadMainButton, M_UploadTextButton } from './src/mobile';
 export { LayoutMF, MFContainersBox };
 export { LayoutMM, MMNavigationContainer, MMContainersBox };
 export { LayoutMP, MPNavigationContainer, MPTabContainer, MPContainersBox };
 export { LayoutMS, MSNavigationContainer, MSContainersBox };
-export { M_BasicFormGroup, M_BasicList, M_BasicListItem, M_BlogTextField, M_BodyTextGroup, M_Card, M_CardList, M_Checkbox, M_Chip, M_ContextMenu, M_ContextMenuItem, M_Dropdown, M_IconButton, M_ImageSlide, M_MainButton, M_MobileAlertDialog, M_MobileBasicModal, M_MobileHeaderBar, M_MobileTabBar, M_Radio, M_ReactionButton, M_Select, M_StatusBlock, M_TextButton, M_TextField, M_TextLabel, M_UploadIconButton, M_UploadMainButton, M_UploadTextButton };
+export { M_BasicFormGroup, M_BasicList, M_BasicListItem, M_BlogTextField, M_BodyTextGroup, M_Card, M_CardList, M_Checkbox, M_Chip, M_ContextMenu, M_ContextMenuItem, M_Dropdown, M_HorizontalFormGroup, M_IconButton, M_ImageSlide, M_MainButton, M_MobileAlertDialog, M_MobileBasicModal, M_MobileHeaderBar, M_MobileTabBar, M_Radio, M_ReactionButton, M_Select, M_StatusBlock, M_TextButton, M_TextField, M_TextLabel, M_UploadIconButton, M_UploadMainButton, M_UploadTextButton };

package/dist/index.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.D_MainButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_Dropdown = exports.D_DesktopTabBar = exports.D_DesktopHeaderBar = exports.D_DesktopBasicModal = exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_CardList = exports.D_Card = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WFContainersBox = exports.LayoutWF = exports.Switch = exports.Spacing = exports.ImageView = exports.Icon = exports.Divider = exports.Form = exports.theme = exports.customTheme = exports.uiColors = exports.spacing = exports.boxShadow = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = void 0;
-exports.M_TextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_Select = exports.M_ReactionButton = exports.M_Radio = exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MobileBasicModal = exports.M_MobileAlertDialog = exports.M_MainButton = exports.M_ImageSlide = exports.M_IconButton = exports.M_Dropdown = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_CardList = exports.M_Card = exports.M_BodyTextGroup = exports.M_BlogTextField = exports.M_BasicListItem = exports.M_BasicList = exports.M_BasicFormGroup = exports.MSContainersBox = exports.MSNavigationContainer = exports.LayoutMS = exports.MPContainersBox = exports.MPTabContainer = exports.MPNavigationContainer = exports.LayoutMP = exports.MMContainersBox = exports.MMNavigationContainer = exports.LayoutMM = exports.MFContainersBox = exports.LayoutMF = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_Select = exports.D_ReactionButton = exports.D_Radio = exports.D_PageTitleTextGroup = void 0;
-exports.M_UploadTextButton = exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_TextLabel = void 0;
+exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_Dropdown = exports.D_DesktopTabBar = exports.D_DesktopHeadlessModal = exports.D_DesktopHeaderBar = exports.D_DesktopBasicModal = exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_CardList = exports.D_Card = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WFContainersBox = exports.LayoutWF = exports.Switch = exports.Spacing = exports.ImageView = exports.Icon = exports.Divider = exports.Form = exports.theme = exports.customTheme = exports.uiColors = exports.spacing = exports.boxShadow = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = void 0;
+exports.M_ReactionButton = exports.M_Radio = exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MobileBasicModal = exports.M_MobileAlertDialog = exports.M_MainButton = exports.M_ImageSlide = exports.M_IconButton = exports.M_HorizontalFormGroup = exports.M_Dropdown = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_CardList = exports.M_Card = exports.M_BodyTextGroup = exports.M_BlogTextField = exports.M_BasicListItem = exports.M_BasicList = exports.M_BasicFormGroup = exports.MSContainersBox = exports.MSNavigationContainer = exports.LayoutMS = exports.MPContainersBox = exports.MPTabContainer = exports.MPNavigationContainer = exports.LayoutMP = exports.MMContainersBox = exports.MMNavigationContainer = exports.LayoutMM = exports.MFContainersBox = exports.LayoutMF = exports.D_DynamicDesktopNavBar = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_Select = exports.D_ReactionButton = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_ImageSlide = void 0;
+exports.M_UploadTextButton = exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_TextLabel = exports.M_TextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_Select = void 0;
 /* eslint-disable import/order */
 /* eslint-disable import/first */
 // common
@@ -52,12 +52,15 @@ Object.defineProperty(exports, "D_ContextMenuItem", { enumerable: true, get: fun
 Object.defineProperty(exports, "D_DesktopAlertDialog", { enumerable: true, get: function () { return desktop_1.D_DesktopAlertDialog; } });
 Object.defineProperty(exports, "D_DesktopBasicModal", { enumerable: true, get: function () { return desktop_1.D_DesktopBasicModal; } });
 Object.defineProperty(exports, "D_DesktopHeaderBar", { enumerable: true, get: function () { return desktop_1.D_DesktopHeaderBar; } });
+Object.defineProperty(exports, "D_DesktopHeadlessModal", { enumerable: true, get: function () { return desktop_1.D_DesktopHeadlessModal; } });
 Object.defineProperty(exports, "D_DesktopTabBar", { enumerable: true, get: function () { return desktop_1.D_DesktopTabBar; } });
 Object.defineProperty(exports, "D_Dropdown", { enumerable: true, get: function () { return desktop_1.D_Dropdown; } });
+Object.defineProperty(exports, "D_DynamicDesktopNavBar", { enumerable: true, get: function () { return desktop_1.D_DynamicDesktopNavBar; } });
 Object.defineProperty(exports, "D_EditApplyTextField", { enumerable: true, get: function () { return desktop_1.D_EditApplyTextField; } });
 Object.defineProperty(exports, "D_FilterBar", { enumerable: true, get: function () { return desktop_1.D_FilterBar; } });
 Object.defineProperty(exports, "D_FloatingActionButton", { enumerable: true, get: function () { return desktop_1.D_FloatingActionButton; } });
 Object.defineProperty(exports, "D_Hero", { enumerable: true, get: function () { return desktop_1.D_Hero; } });
+Object.defineProperty(exports, "D_HorizontalFormGroup", { enumerable: true, get: function () { return desktop_1.D_HorizontalFormGroup; } });
 Object.defineProperty(exports, "D_IconButton", { enumerable: true, get: function () { return desktop_1.D_IconButton; } });
 Object.defineProperty(exports, "D_ImageSlide", { enumerable: true, get: function () { return desktop_1.D_ImageSlide; } });
 Object.defineProperty(exports, "D_MainButton", { enumerable: true, get: function () { return desktop_1.D_MainButton; } });
@@ -100,6 +103,7 @@ Object.defineProperty(exports, "M_Chip", { enumerable: true, get: function () {
 Object.defineProperty(exports, "M_ContextMenu", { enumerable: true, get: function () { return mobile_1.M_ContextMenu; } });
 Object.defineProperty(exports, "M_ContextMenuItem", { enumerable: true, get: function () { return mobile_1.M_ContextMenuItem; } });
 Object.defineProperty(exports, "M_Dropdown", { enumerable: true, get: function () { return mobile_1.M_Dropdown; } });
+Object.defineProperty(exports, "M_HorizontalFormGroup", { enumerable: true, get: function () { return mobile_1.M_HorizontalFormGroup; } });
 Object.defineProperty(exports, "M_IconButton", { enumerable: true, get: function () { return mobile_1.M_IconButton; } });
 Object.defineProperty(exports, "M_ImageSlide", { enumerable: true, get: function () { return mobile_1.M_ImageSlide; } });
 Object.defineProperty(exports, "M_MainButton", { enumerable: true, get: function () { return mobile_1.M_MainButton; } });

package/dist/src/GlobalStyle.js

@@ -5,6 +5,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var styled_components_1 = require("styled-components");
-var GlobalStyle = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  html {\n    height: 100%;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n    width: 100%;\n  }\n\n  body {\n    font-family: -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    height: 100%;\n    margin: 0;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n    width: 100%;\n  }\n\n  body::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  #root {\n    height: 100%;\n    width: 100%;\n  }\n\n  div, span, textarea {\n    font-family: -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n  }\n\n  div::-webkit-scrollbar, span::-webkit-scrollbar, textarea::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  input {\n    font-family: -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n  }\n\n  a,\n  [type='checkbox'],\n  [type='radio'] {\n    color: inherit;\n    -webkit-tap-highlight-color: rgba(26, 26, 26, 0.301961);\n    text-decoration: none;\n  }\n\n  code {\n    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;\n  }\n\n  button {\n    cursor: pointer;\n    font-family: inherit;\n    outline: none;\n  }\n\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover,\ninput:-webkit-autofill:focus,\ninput:-webkit-autofill:active {\n  -webkit-box-shadow: 0 0 0 1000px white inset !important;\n  box-shadow: 0 0 0 1000px white inset !important;\n}\n"], ["\n  html {\n    height: 100%;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n    width: 100%;\n  }\n\n  body {\n    font-family: -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    height: 100%;\n    margin: 0;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n    width: 100%;\n  }\n\n  body::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  #root {\n    height: 100%;\n    width: 100%;\n  }\n\n  div, span, textarea {\n    font-family: -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n  }\n\n  div::-webkit-scrollbar, span::-webkit-scrollbar, textarea::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  input {\n    font-family: -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n  }\n\n  a,\n  [type='checkbox'],\n  [type='radio'] {\n    color: inherit;\n    -webkit-tap-highlight-color: rgba(26, 26, 26, 0.301961);\n    text-decoration: none;\n  }\n\n  code {\n    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;\n  }\n\n  button {\n    cursor: pointer;\n    font-family: inherit;\n    outline: none;\n  }\n\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover,\ninput:-webkit-autofill:focus,\ninput:-webkit-autofill:active {\n  -webkit-box-shadow: 0 0 0 1000px white inset !important;\n  box-shadow: 0 0 0 1000px white inset !important;\n}\n"])));
+var GlobalStyle = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  html {\n    height: 100%;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n    width: 100%;\n  }\n\n  body {\n    font-family: -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    height: 100%;\n    margin: 0;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n    width: 100%;\n  }\n\n  body::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  #root {\n    height: 100%;\n    width: 100%;\n  }\n\n  div, span, textarea, ul {\n    font-family: -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n  }\n\n  div::-webkit-scrollbar, span::-webkit-scrollbar, textarea::-webkit-scrollbar, ul::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  input {\n    font-family: -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n  }\n\n  a,\n  [type='checkbox'],\n  [type='radio'] {\n    color: inherit;\n    -webkit-tap-highlight-color: rgba(26, 26, 26, 0.301961);\n    text-decoration: none;\n  }\n\n  code {\n    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;\n  }\n\n  button {\n    cursor: pointer;\n    font-family: inherit;\n    outline: none;\n  }\n\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover,\ninput:-webkit-autofill:focus,\ninput:-webkit-autofill:active {\n  -webkit-box-shadow: 0 0 0 1000px white inset !important;\n  box-shadow: 0 0 0 1000px white inset !important;\n}\n"], ["\n  html {\n    height: 100%;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n    width: 100%;\n  }\n\n  body {\n    font-family: -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    height: 100%;\n    margin: 0;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n    width: 100%;\n  }\n\n  body::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  #root {\n    height: 100%;\n    width: 100%;\n  }\n\n  div, span, textarea, ul {\n    font-family: -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n    -ms-overflow-style: none; /* IE and Edge */\n    scrollbar-width: none; /* Firefox */\n  }\n\n  div::-webkit-scrollbar, span::-webkit-scrollbar, textarea::-webkit-scrollbar, ul::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  input {\n    font-family: -apple-system, BlinkMacSystemFont, Basier Square, Noto Sans KR, Segoe UI, Apple SD Gothic Neo, Roboto, Helvetica Neue, Arial, sans-serif;\n    font-stretch: normal;\n    font-style: normal;\n    letter-spacing: normal;\n  }\n\n  a,\n  [type='checkbox'],\n  [type='radio'] {\n    color: inherit;\n    -webkit-tap-highlight-color: rgba(26, 26, 26, 0.301961);\n    text-decoration: none;\n  }\n\n  code {\n    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;\n  }\n\n  button {\n    cursor: pointer;\n    font-family: inherit;\n    outline: none;\n  }\n\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover,\ninput:-webkit-autofill:focus,\ninput:-webkit-autofill:active {\n  -webkit-box-shadow: 0 0 0 1000px white inset !important;\n  box-shadow: 0 0 0 1000px white inset !important;\n}\n"])));
 exports.default = GlobalStyle;
 var templateObject_1;

package/dist/src/common/components/BoxLayout/Col.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare type Props = {
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+};
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/dist/src/common/components/BoxLayout/Col.js

@@ -0,0 +1,48 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+function Col(_a, ref) {
+    var children = _a.children, style = _a.style;
+    return (react_1.default.createElement(S_Col, { ref: ref, style: __assign({}, style) }, children));
+}
+var S_Col = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  max-width: 100%;\n  width: 100%;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 100%;\n  max-width: 100%;\n  width: 100%;\n"])));
+exports.default = (0, react_1.forwardRef)(Col);
+var templateObject_1;

package/dist/src/common/components/BoxLayout/Grid.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+declare type Props = {
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+    gridTemplate: string;
+    className: string;
+};
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/dist/src/common/components/BoxLayout/Grid.js

@@ -0,0 +1,51 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+function Grid(_a, ref) {
+    var children = _a.children, gridTemplate = _a.gridTemplate, style = _a.style, className = _a.className;
+    return (react_1.default.createElement(S_Grid, { className: className, ref: ref, gridTemplate: gridTemplate, style: __assign({}, style) }, children));
+}
+var S_Grid = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  ", ";\n  width: 100%;\n"], ["\n  display: grid;\n  ", ";\n  width: 100%;\n"])), function (_a) {
+    var gridTemplate = _a.gridTemplate;
+    return gridTemplate && { gridTemplateAreas: "'" + gridTemplate + "'" };
+});
+exports.default = (0, react_1.forwardRef)(Grid);
+var templateObject_1;

package/dist/src/common/components/BoxLayout/Row.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare type Props = {
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+};
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/dist/src/common/components/BoxLayout/Row.js

@@ -0,0 +1,48 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+function Row(_a, ref) {
+    var children = _a.children, style = _a.style;
+    return (react_1.default.createElement(S_Row, { ref: ref, style: __assign({}, style) }, children));
+}
+var S_Row = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
+exports.default = (0, react_1.forwardRef)(Row);
+var templateObject_1;

package/dist/src/common/components/BoxLayout/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Col } from './Col';
+export { default as Grid } from './Grid';
+export { default as Row } from './Row';

package/dist/src/common/components/BoxLayout/index.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Row = exports.Grid = exports.Col = void 0;
+var Col_1 = require("./Col");
+Object.defineProperty(exports, "Col", { enumerable: true, get: function () { return __importDefault(Col_1).default; } });
+var Grid_1 = require("./Grid");
+Object.defineProperty(exports, "Grid", { enumerable: true, get: function () { return __importDefault(Grid_1).default; } });
+var Row_1 = require("./Row");
+Object.defineProperty(exports, "Row", { enumerable: true, get: function () { return __importDefault(Row_1).default; } });

package/dist/src/common/components/Navigations/ContextTextLabelNav.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ForwardedRefType } from '../../types';
+declare type Props = {
+    to: string;
+    isActive?: boolean;
+    text: string;
+    openNewTab: boolean;
+    preventLineChange?: boolean;
+};
+declare function TextLabelNav({ to, text, openNewTab, isActive, preventLineChange }: Props, ref: ForwardedRefType<HTMLAnchorElement>): JSX.Element;
+export default TextLabelNav;

package/dist/src/common/components/Navigations/ContextTextLabelNav.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var desktop_1 = require("../../../desktop");
+var NavLink_1 = __importDefault(require("./NavLink"));
+function TextLabelNav(_a, ref) {
+    var to = _a.to, text = _a.text, openNewTab = _a.openNewTab, _b = _a.isActive, isActive = _b === void 0 ? false : _b, _c = _a.preventLineChange, preventLineChange = _c === void 0 ? false : _c;
+    return preventLineChange ? (react_1.default.createElement(NavLink_1.default, { ref: ref, to: to, openNewTab: openNewTab, style: { width: 'max-content' } },
+        react_1.default.createElement(desktop_1.D_TextLabel, { text: text, styleTheme: isActive ? 'body2Bold' : 'body2Regular', ellipsisMode: "use", lineLimit: 1 }))) : (react_1.default.createElement(NavLink_1.default, { ref: ref, to: to, openNewTab: openNewTab },
+        react_1.default.createElement(desktop_1.D_TextLabel, { text: text, styleTheme: isActive ? 'body2Bold' : 'body2Regular' })));
+}
+exports.default = TextLabelNav;

package/dist/src/common/components/Navigations/NavLink.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { CSSProperties } from 'styled-components';
+declare type Props = {
+    to: string;
+    children: React.ReactNode;
+    style?: CSSProperties;
+    openNewTab?: boolean;
+    onClick?: () => void;
+    onMouseOver?: () => void;
+    onMouseOut?: () => void;
+};
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLAnchorElement>>;
+export default _default;

package/dist/src/common/components/Navigations/NavLink.js

@@ -0,0 +1,42 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_router_dom_1 = require("react-router-dom");
+var styled_components_1 = __importDefault(require("styled-components"));
+function NavLink(_a, 
+// NOTE: 필요 시 ref추가
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+ref) {
+    var to = _a.to, children = _a.children, _b = _a.openNewTab, openNewTab = _b === void 0 ? false : _b, style = _a.style, onClick = _a.onClick, onMouseOver = _a.onMouseOver, onMouseOut = _a.onMouseOut;
+    return openNewTab ? (react_1.default.createElement(S_NavLink, { href: to, onClick: onClick, target: "_blank", rel: "noopener noreferrer", onMouseOver: onMouseOver, onMouseOut: onMouseOut, style: style }, children)) : (react_1.default.createElement(S_Link, { to: to, onClick: onClick, style: style, onMouseOver: onMouseOver, onMouseOut: onMouseOut }, children));
+}
+var S_NavLink = styled_components_1.default.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-height: 100%;\n"], ["\n  max-height: 100%;\n"])));
+var S_Link = (0, styled_components_1.default)(react_router_dom_1.Link)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  max-height: 100%;\n"], ["\n  max-height: 100%;\n"])));
+exports.default = (0, react_1.forwardRef)(NavLink);
+var templateObject_1, templateObject_2;

package/dist/src/common/components/Navigations/Navs.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CSSProperties } from 'styled-components';
+declare type Props = {
+    justified?: boolean;
+    vertical?: boolean;
+    children: React.ReactNode;
+    style?: CSSProperties;
+};
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLUListElement>>;
+export default _default;

package/dist/src/common/components/Navigations/Navs.js

@@ -0,0 +1,43 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+function Navs(_a, ref) {
+    var children = _a.children, style = _a.style, _b = _a.justified, justified = _b === void 0 ? false : _b, _c = _a.vertical, vertical = _c === void 0 ? false : _c;
+    return (react_1.default.createElement(S_Nav, { ref: ref, justified: justified, vertical: vertical, style: style }, children));
+}
+var S_Nav = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  -ms-overflow-style: none; /* NOTE: Firefox */\n  display: flex;\n  flex-direction: ", ";\n  justify-content: ", ";\n  list-style: none; /* NOTE: reset */\n  margin: 0; /* NOTE: reset */\n  padding: 0;\n  scrollbar-width: none; /* NOTE: IE and Edge */\n  width: 100%;\n"], ["\n  -ms-overflow-style: none; /* NOTE: Firefox */\n  display: flex;\n  flex-direction: ", ";\n  justify-content: ", ";\n  list-style: none; /* NOTE: reset */\n  margin: 0; /* NOTE: reset */\n  padding: 0;\n  scrollbar-width: none; /* NOTE: IE and Edge */\n  width: 100%;\n"])), function (_a) {
+    var vertical = _a.vertical;
+    return (vertical ? 'column' : 'row');
+}, function (_a) {
+    var justified = _a.justified;
+    return (justified ? 'center' : 'none');
+});
+exports.default = (0, react_1.forwardRef)(Navs);
+var templateObject_1;

package/dist/src/common/components/Navigations/TextLabelNav.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ForwardedRefType } from '../../types';
+declare type Props = {
+    to: string;
+    isActive?: boolean;
+    text: string;
+    openNewTab: boolean;
+    preventLineChange?: boolean;
+};
+declare function TextLabelNav({ to, text, openNewTab, isActive, preventLineChange }: Props, ref: ForwardedRefType<HTMLAnchorElement>): JSX.Element;
+export default TextLabelNav;

package/dist/src/common/components/Navigations/TextLabelNav.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var desktop_1 = require("../../../desktop");
+var NavLink_1 = __importDefault(require("./NavLink"));
+function TextLabelNav(_a, ref) {
+    var to = _a.to, text = _a.text, openNewTab = _a.openNewTab, _b = _a.isActive, isActive = _b === void 0 ? false : _b, _c = _a.preventLineChange, preventLineChange = _c === void 0 ? false : _c;
+    return preventLineChange ? (react_1.default.createElement(NavLink_1.default, { ref: ref, to: to, openNewTab: openNewTab, style: { width: 'max-content' } },
+        react_1.default.createElement(desktop_1.D_TextLabel, { text: text, styleTheme: isActive ? 'body1Bold' : 'body1Regular', ellipsisMode: "use", lineLimit: 1 }))) : (react_1.default.createElement(NavLink_1.default, { ref: ref, to: to, openNewTab: openNewTab },
+        react_1.default.createElement(desktop_1.D_TextLabel, { text: text, styleTheme: isActive ? 'body1Bold' : 'body1Regular' })));
+}
+exports.default = TextLabelNav;

package/dist/src/common/components/Navigations/index.d.ts

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

package/dist/src/common/components/Navigations/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Navs = exports.NavLink = void 0;
+var NavLink_1 = require("./NavLink");
+Object.defineProperty(exports, "NavLink", { enumerable: true, get: function () { return __importDefault(NavLink_1).default; } });
+var Navs_1 = require("./Navs");
+Object.defineProperty(exports, "Navs", { enumerable: true, get: function () { return __importDefault(Navs_1).default; } });

package/dist/src/common/hooks/index.d.ts

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

package/dist/src/common/hooks/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDetectOverflow = void 0;
+var useDetectOverflow_1 = require("./useDetectOverflow");
+Object.defineProperty(exports, "useDetectOverflow", { enumerable: true, get: function () { return __importDefault(useDetectOverflow_1).default; } });

package/dist/src/common/hooks/useDetectOverflow.d.ts

@@ -0,0 +1,10 @@
+declare type Ref = {
+    node: HTMLDivElement | HTMLUListElement | null;
+};
+declare function useDetectOverflow(ref: Ref, detectOnResize?: boolean): {
+    trigger: () => void;
+    isOverflow: boolean;
+    isScrollBoxStart: boolean;
+    isScrollBoxEnd: boolean;
+};
+export default useDetectOverflow;

package/dist/src/common/hooks/useDetectOverflow.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+function useDetectOverflow(ref, detectOnResize) {
+    if (detectOnResize === void 0) { detectOnResize = false; }
+    var _a = (0, react_1.useState)(false), isOverflow = _a[0], setIsOverflow = _a[1];
+    var _b = (0, react_1.useState)(false), isTriggerOn = _b[0], setIsTriggerOn = _b[1];
+    var _c = (0, react_1.useState)(false), isScrollBoxStart = _c[0], setIsScrollBoxStart = _c[1];
+    var _d = (0, react_1.useState)(true), isScrollBoxEnd = _d[0], setIsScrollBoxEnd = _d[1];
+    (0, react_1.useEffect)(function () {
+        // NOTE: resize에 관한 성능이슈가 있을 시 최적화합니다.
+        if (detectOnResize) {
+            window.addEventListener('resize', handleResize);
+        }
+        function handleResize() {
+            trigger();
+        }
+        return function () {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+    (0, react_1.useEffect)(function () {
+        if (!ref.node) {
+            return;
+        }
+        var hasOverflow = ref.node.scrollWidth > ref.node.clientWidth;
+        if (ref.node.scrollLeft === 0) {
+            setIsScrollBoxStart(true);
+        }
+        else {
+            setIsScrollBoxStart(false);
+        }
+        if (ref.node.scrollLeft + ref.node.clientWidth === ref.node.scrollWidth) {
+            setIsScrollBoxEnd(true);
+        }
+        else {
+            setIsScrollBoxEnd(false);
+        }
+        setIsOverflow(hasOverflow);
+    }, [isTriggerOn, ref]);
+    var trigger = (0, react_1.useCallback)(function () {
+        setIsTriggerOn(function (prev) { return !prev; });
+    }, []);
+    return { trigger: trigger, isOverflow: isOverflow, isScrollBoxStart: isScrollBoxStart, isScrollBoxEnd: isScrollBoxEnd };
+}
+exports.default = useDetectOverflow;

package/dist/src/common/index.d.ts

@@ -1,6 +1,6 @@
 import { UITheme } from './styles/colorSet/ui-type';
-import { IFormValues, FillIconNameKeys, LineIconNameKeys, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, UiColors } from './types';
-export { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, UiColors };
+import { IFormValues, FillIconNameKeys, LineIconNameKeys, PDSIconType, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, UiColors, ForwardedRefType } from './types';
+export { UITheme, IFormValues, FillIconNameKeys, LineIconNameKeys, PDSIconType, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, UiColors, ForwardedRefType };
 import { fontWeight, desktopFontSize, desktopLineHeight, mobileFontSize, mobileLineHeight, boxShadow, spacing } from './styles/theme';
 import { uiColors, customTheme } from './styles/ui-colors';
 export { fontWeight, desktopFontSize, desktopLineHeight, mobileFontSize, mobileLineHeight, boxShadow, spacing, uiColors, customTheme };

package/dist/src/common/styles/colorSet/PaletteColor_Dark.json

@@ -115,7 +115,7 @@
     "sys_component_base_green": "darkgreen700",
     "sys_text_error_darktheme_01": "darkred500",
     "sys_border_line_darktheme_03": "darkred500",
-    "sys_border_line_darktheme_04": "darkblue500",
+    "sys_border_line_darktheme_04": "darkgrey500",
     "usr_widget_brand_primary_darktheme_01": "darkblue500",
     "usr_text_brand_primary_darktheme_01": "darkblue500",
     "sys_component_base_black_opacity50": "black/opacity50",
@@ -153,12 +153,20 @@
     "usr_menu_background_gradient_opacity00": "grey950/opacity00",
     "sys_border_line_white": "white",
     "sys_component_base_white_opacity10": "white/opacity10",
-    "sys_cpnt_sheet_base_01": "darkgrey50",
+    "sys_cpnt_sheet_base_01": "darkgrey30",
     "sys_component_base_white_opacity20": "white/opacity20",
     "sys_border_line_07": "darkgrey70",
     "sys_border_line_white_opacity50": "white/opacity50",
     "sys_background_dimmed_02": "black/opacity65",
     "sys_border_line_08": "darkgrey500",
-    "sys_sys_component_base_06": "darkgrey30",
-    "sys_sys_component_base_07": "darkgrey70"
+    "sys_component_base_06": "darkgrey50",
+    "sys_component_base_07": "darkgrey70",
+    "sys_border_line_09": "darkgrey50",
+    "sys_component_base_darktheme_04": "black/opacity00",
+    "sys_border_line_10": "darkgrey50",
+    "sys_component_base_darktheme_05": "darkgrey30",
+    "sys_border_line_darktheme_05": "darkgrey30",
+    "sys_component_base_darktheme_06": "darkgrey70",
+    "sys_border_line_darktheme_06": "darkgrey70",
+    "sys_border_line_darktheme_07": "darkgrey50"
 }