pds-dev-kit-web-test 0.0.5 → 0.0.6

package/dist/src/desktop/components/DynamicDesktopNavBar/components/ContextMenuNavs/ContextMenuItemNav.js

@@ -39,13 +39,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
+var DisplayOnlyMenuItemNav_1 = __importDefault(require("../MenuItemNav/components/DisplayOnlyMenuItemNav"));
+var InternalLinkMenuItemNav_1 = __importDefault(require("../MenuItemNav/components/InternalLinkMenuItemNav"));
 var PAppMenuItemNav_1 = __importDefault(require("../MenuItemNav/components/PAppMenuItemNav"));
 var WebMenuItemNav_1 = __importDefault(require("../MenuItemNav/components/WebMenuItemNav"));
 function ContextMenuItemNavBox(_a) {
     var menu = _a.menu;
     return (react_1.default.createElement(S_ContextMenuItem, { size: "small" },
         menu.menuItemType === 'NAV_P_APP' && menu.pAppCode && (react_1.default.createElement(PAppMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { pAppCode: menu.pAppCode }), isContextMenu: true })),
-        menu.menuItemType === 'WEB_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(WebMenuItemNav_1.default, { isContextMenu: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }) }))));
+        menu.menuItemType === 'WEB_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(WebMenuItemNav_1.default, { openNewTab: true, isContextMenu: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }) })),
+        menu.menuItemType === 'INTERNAL_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(InternalLinkMenuItemNav_1.default, { isContextMenu: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }) })),
+        menu.menuItemType === 'DISPLAY_ONLY' && (react_1.default.createElement(DisplayOnlyMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { conversionLinkSrc: '' }) }))));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  padding: 0 ", ";\n"], ["\n  height: 48px;\n  padding: 0 ", ";\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/IconNav.d.ts

@@ -3,6 +3,7 @@ import { PDSIconType } from '../../../../common';
 declare type Props = {
     to: string;
     iconName: PDSIconType;
+    openNewTab: boolean;
 };
-declare function IconNav({ to, iconName }: Props): JSX.Element;
+declare function IconNav({ to, iconName, openNewTab }: Props): JSX.Element;
 export default IconNav;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/IconNav.js

@@ -7,8 +7,8 @@ var react_1 = __importDefault(require("react"));
 var __1 = require("../../..");
 var Navigations_1 = require("../../../../common/components/Navigations");
 function IconNav(_a) {
-    var to = _a.to, iconName = _a.iconName;
-    return (react_1.default.createElement(Navigations_1.NavLink, { to: to },
+    var to = _a.to, iconName = _a.iconName, openNewTab = _a.openNewTab;
+    return (react_1.default.createElement(Navigations_1.NavLink, { to: to, openNewTab: openNewTab },
         react_1.default.createElement(__1.D_IconButton, { fillType: "fill", baseSize: "large", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconName: iconName, iconFillType: "line", iconColorKey: "ui_menu_primarymenu_main", shapeType: "rectangle", iconSize: 24 })));
 }
 exports.default = IconNav;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/MenuItemNav.d.ts

@@ -3,6 +3,7 @@ import { ParsedNode } from '../../types';
 declare type Props = {
     menu: ParsedNode;
     showMenuAsIcon: boolean;
+    index: number;
 };
-declare function MenuItemNav({ menu, showMenuAsIcon }: Props): JSX.Element;
+declare function MenuItemNav({ menu, showMenuAsIcon, index }: Props): JSX.Element;
 export default MenuItemNav;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/MenuItemNav.js

@@ -41,11 +41,13 @@ var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var hybrid_1 = require("../../../../../hybrid");
 var ContextMenuNavs_1 = require("../ContextMenuNavs");
+var DisplayOnlyMenuItemNav_1 = __importDefault(require("./components/DisplayOnlyMenuItemNav"));
+var InternalLinkMenuItemNav_1 = __importDefault(require("./components/InternalLinkMenuItemNav"));
 var PAppMenuItemNav_1 = __importDefault(require("./components/PAppMenuItemNav"));
 var WebMenuItemNav_1 = __importDefault(require("./components/WebMenuItemNav"));
 // NOTE: 서버에서 itemType으로 enum값이 잘 오면 아래 불필요한 케이스/default 간소화
 function MenuItemNav(_a) {
-    var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon;
+    var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon, index = _a.index;
     var ref = (0, react_1.useRef)(null);
     var _b = (0, react_1.useState)(false), isContextOpen = _b[0], setIsContextOpen = _b[1];
     var handleMouseOver = (0, react_1.useCallback)(function () {
@@ -55,12 +57,17 @@ function MenuItemNav(_a) {
         setIsContextOpen(false);
     }, []);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_Box, { ref: ref, onMouseOver: handleMouseOver, onMouseLeave: handleMouseOut, onWheel: handleMouseOut, showMenuAsIcon: showMenuAsIcon },
+        react_1.default.createElement(S_Box, { ref: ref, onMouseOver: handleMouseOver, onMouseLeave: handleMouseOut, onWheel: handleMouseOut, showMenuAsIcon: showMenuAsIcon, type: menu.menuItemType },
             menu.menuItemType === 'NAV_P_APP' && menu.pAppCode && (react_1.default.createElement(PAppMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { pAppCode: menu.pAppCode }), showMenuAsIcon: showMenuAsIcon })),
-            menu.menuItemType === 'WEB_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(WebMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }), showMenuAsIcon: showMenuAsIcon })),
+            menu.menuItemType === 'WEB_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(WebMenuItemNav_1.default, { openNewTab: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }), showMenuAsIcon: showMenuAsIcon })),
+            menu.menuItemType === 'INTERNAL_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(InternalLinkMenuItemNav_1.default, { index: index, menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }), showMenuAsIcon: showMenuAsIcon })),
+            menu.menuItemType === 'DISPLAY_ONLY' && (react_1.default.createElement(DisplayOnlyMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { conversionLinkSrc: '' }), showMenuAsIcon: showMenuAsIcon })),
             isContextOpen && menu.parsedNodes.length > 0 && (react_1.default.createElement(ContextMenuNavs_1.ContextMenuNavs, { parentRef: ref }, menu.parsedNodes.map(function (nav, index) { return (react_1.default.createElement(ContextMenuNavs_1.ContextMenuItemNav, { key: index, menu: nav })); })))),
         showMenuAsIcon ? (react_1.default.createElement(hybrid_1.Spacing, { spacingType: "width", size: "spacing_b" })) : (react_1.default.createElement(hybrid_1.Spacing, { spacingType: "width", size: "spacing_f" }))));
 }
-var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n"], ["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n"])));
+var S_Box = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  cursor: ", ";\n  display: flex;\n"], ["\n  align-items: center;\n  cursor: ", ";\n  display: flex;\n"])), function (_a) {
+    var type = _a.type;
+    return (type === 'DISPLAY_ONLY' ? 'default' : 'pointer');
+});
 exports.default = MenuItemNav;
 var templateObject_1;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/DisplayOnlyMenuItemNav.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ParsedNode } from '../../../types';
+declare type WithRequired<T, K extends keyof T> = T & {
+    [P in K]-?: T[P];
+};
+declare type Props = {
+    menu: WithRequired<ParsedNode, 'conversionLinkSrc'>;
+    showMenuAsIcon?: boolean;
+    isContextMenu?: boolean;
+};
+declare function DisplayOnlyMenuItemNav({ menu, showMenuAsIcon, isContextMenu }: Props): JSX.Element;
+export default DisplayOnlyMenuItemNav;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/DisplayOnlyMenuItemNav.js

@@ -0,0 +1,31 @@
+"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 __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 styled_components_1 = __importDefault(require("styled-components"));
+var Navigations_1 = require("../../../../../../common/components/Navigations");
+var IconNav_1 = __importDefault(require("../../IconNav"));
+var ImageIconNav_1 = __importDefault(require("../../ImageIconNav"));
+function DisplayOnlyMenuItemNav(_a) {
+    var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon, isContextMenu = _a.isContextMenu;
+    if (showMenuAsIcon) {
+        if (menu.iconSrc) {
+            return (react_1.default.createElement(DeactivateLinkBox, null,
+                react_1.default.createElement(ImageIconNav_1.default, { to: menu.conversionLinkSrc, iconSrc: menu.iconSrc, openNewTab: false })));
+        }
+        if (menu.iconName) {
+            return (react_1.default.createElement(DeactivateLinkBox, null,
+                react_1.default.createElement(IconNav_1.default, { to: menu.conversionLinkSrc, iconName: menu.iconName, openNewTab: false })));
+        }
+    }
+    return (react_1.default.createElement(DeactivateLinkBox, null, isContextMenu ? (react_1.default.createElement(Navigations_1.ContextTextLabelNav, { preventLineChange: true, openNewTab: false, to: menu.conversionLinkSrc, text: menu.name })) : (react_1.default.createElement(Navigations_1.TextLabelNav, { preventLineChange: true, openNewTab: false, to: menu.conversionLinkSrc, text: menu.name }))));
+}
+var DeactivateLinkBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  pointer-events: none;\n  width: max-content;\n"], ["\n  pointer-events: none;\n  width: max-content;\n"])));
+exports.default = DisplayOnlyMenuItemNav;
+var templateObject_1;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/InternalLinkMenuItemNav.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ParsedNode } from '../../../types';
+declare type WithRequired<T, K extends keyof T> = T & {
+    [P in K]-?: T[P];
+};
+declare type Props = {
+    menu: WithRequired<ParsedNode, 'conversionLinkSrc'>;
+    showMenuAsIcon?: boolean;
+    isContextMenu?: boolean;
+    index?: number;
+};
+declare function InternalLinkMenuItemNav({ menu, showMenuAsIcon, isContextMenu, index }: Props): JSX.Element;
+export default InternalLinkMenuItemNav;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/InternalLinkMenuItemNav.js

@@ -0,0 +1,65 @@
+"use strict";
+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 Navigations_1 = require("../../../../../../common/components/Navigations");
+var DynamicDesktopNavBar_1 = require("../../../DynamicDesktopNavBar");
+var IconNav_1 = __importDefault(require("../../IconNav"));
+var ImageIconNav_1 = __importDefault(require("../../ImageIconNav"));
+function InternalLinkMenuItemNav(_a) {
+    var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon, isContextMenu = _a.isContextMenu, index = _a.index;
+    var location = (0, react_router_dom_1.useLocation)();
+    var _b = (0, react_1.useContext)(DynamicDesktopNavBar_1.BasePathContext), basePath = _b.basePath, activeMode = _b.activeMode, handleClickInternalMenuItemNav = _b.handleClickInternalMenuItemNav;
+    var _c = getInternalLink(basePath, menu.conversionLinkSrc), internalPath = _c.internalPath, pathname = _c.pathname, search = _c.search;
+    var isActive = (0, react_1.useMemo)(function () {
+        if (activeMode === 'BY_URL') {
+            return false;
+        }
+        if (pathname + search === location.pathname + location.search) {
+            return true;
+        }
+        return false;
+    }, [activeMode, location]);
+    var onClickNav = function () {
+        handleClickInternalMenuItemNav(internalPath);
+    };
+    if (showMenuAsIcon) {
+        if (menu.iconSrc) {
+            return react_1.default.createElement(ImageIconNav_1.default, { to: internalPath, iconSrc: menu.iconSrc, openNewTab: false });
+        }
+        if (menu.iconName) {
+            return react_1.default.createElement(IconNav_1.default, { to: internalPath, iconName: menu.iconName, openNewTab: false });
+        }
+    }
+    return isContextMenu ? (react_1.default.createElement(Navigations_1.ContextTextLabelNav, { isActive: isActive, preventLineChange: true, openNewTab: false, to: internalPath, text: menu.name })) : (react_1.default.createElement(Navigations_1.TextLabelNav, { onClick: onClickNav, isActive: isActive, preventLineChange: true, openNewTab: false, to: internalPath, text: menu.name }));
+}
+function getInternalLink(basePath, url) {
+    var _a = new URL(url), pathname = _a.pathname, search = _a.search;
+    var splitPath = pathname.split(basePath).pop();
+    var PAPP_CODE_INDEX = 1;
+    var pAppCode = splitPath === null || splitPath === void 0 ? void 0 : splitPath.split('/')[PAPP_CODE_INDEX];
+    return { internalPath: basePath + splitPath + search, pAppCode: pAppCode, pathname: pathname, search: search };
+}
+exports.default = InternalLinkMenuItemNav;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/PAppMenuItemNav.d.ts

@@ -7,6 +7,7 @@ declare type Props = {
     menu: WithRequired<ParsedNode, 'pAppCode'>;
     showMenuAsIcon?: boolean;
     isContextMenu?: boolean;
+    index?: number;
 };
-declare function PAppMenuItemNav({ menu, showMenuAsIcon, isContextMenu }: Props): JSX.Element;
+declare function PAppMenuItemNav({ menu, showMenuAsIcon, isContextMenu, index }: Props): JSX.Element;
 export default PAppMenuItemNav;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/PAppMenuItemNav.js

@@ -29,20 +29,22 @@ var DynamicDesktopNavBar_1 = require("../../../DynamicDesktopNavBar");
 var IconNav_1 = __importDefault(require("../../IconNav"));
 var ImageIconNav_1 = __importDefault(require("../../ImageIconNav"));
 function PAppMenuItemNav(_a) {
-    var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon, _b = _a.isContextMenu, isContextMenu = _b === void 0 ? false : _b;
-    var basePath = (0, react_1.useContext)(DynamicDesktopNavBar_1.BasePathContext).basePath;
-    var match = (0, react_router_dom_1.useRouteMatch)("" + basePath);
+    var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon, _b = _a.isContextMenu, isContextMenu = _b === void 0 ? false : _b, index = _a.index;
+    var _c = (0, react_1.useContext)(DynamicDesktopNavBar_1.BasePathContext), basePath = _c.basePath, activeMode = _c.activeMode;
     var activeMatch = (0, react_router_dom_1.useRouteMatch)(basePath + "/:activeKey");
     var isActive = (0, react_1.useMemo)(function () {
+        if (activeMode === 'BY_CLICK') {
+            return false;
+        }
         return (activeMatch === null || activeMatch === void 0 ? void 0 : activeMatch.params.activeKey) === menu.pAppCode;
-    }, [menu, match, activeMatch]);
+    }, [activeMode, menu, activeMatch]);
     if (showMenuAsIcon) {
-        if (menu.iconName) {
-            return react_1.default.createElement(IconNav_1.default, { to: basePath + "/" + menu.pAppCode, iconName: menu.iconName });
-        }
         if (menu.iconSrc) {
             return (react_1.default.createElement(ImageIconNav_1.default, { to: basePath + "/" + menu.pAppCode, iconSrc: menu.iconSrc, openNewTab: false }));
         }
+        if (menu.iconName) {
+            return (react_1.default.createElement(IconNav_1.default, { to: basePath + "/" + menu.pAppCode, iconName: menu.iconName, openNewTab: false }));
+        }
     }
     return isContextMenu ? (react_1.default.createElement(Navigations_1.ContextTextLabelNav, { isActive: isActive, preventLineChange: true, openNewTab: false, to: basePath + "/" + menu.pAppCode, text: menu.name })) : (react_1.default.createElement(Navigations_1.TextLabelNav, { isActive: isActive, preventLineChange: true, openNewTab: false, to: basePath + "/" + menu.pAppCode, text: menu.name }));
 }

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/WebMenuItemNav.d.ts

@@ -7,6 +7,7 @@ declare type Props = {
     menu: WithRequired<ParsedNode, 'conversionLinkSrc'>;
     showMenuAsIcon?: boolean;
     isContextMenu?: boolean;
+    openNewTab: boolean;
 };
-declare function WebMenuItemNav({ menu, showMenuAsIcon, isContextMenu }: Props): JSX.Element;
+declare function WebMenuItemNav({ menu, showMenuAsIcon, isContextMenu, openNewTab }: Props): JSX.Element;
 export default WebMenuItemNav;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/WebMenuItemNav.js

@@ -8,15 +8,15 @@ var Navigations_1 = require("../../../../../../common/components/Navigations");
 var IconNav_1 = __importDefault(require("../../IconNav"));
 var ImageIconNav_1 = __importDefault(require("../../ImageIconNav"));
 function WebMenuItemNav(_a) {
-    var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon, isContextMenu = _a.isContextMenu;
+    var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon, isContextMenu = _a.isContextMenu, openNewTab = _a.openNewTab;
     if (showMenuAsIcon) {
         if (menu.iconSrc) {
-            return react_1.default.createElement(ImageIconNav_1.default, { to: menu.conversionLinkSrc, iconSrc: menu.iconSrc, openNewTab: true });
+            return (react_1.default.createElement(ImageIconNav_1.default, { to: menu.conversionLinkSrc, iconSrc: menu.iconSrc, openNewTab: openNewTab }));
         }
         if (menu.iconName) {
-            return react_1.default.createElement(IconNav_1.default, { to: "/" + menu.pAppCode, iconName: menu.iconName });
+            return (react_1.default.createElement(IconNav_1.default, { to: menu.conversionLinkSrc, iconName: menu.iconName, openNewTab: openNewTab }));
         }
     }
-    return isContextMenu ? (react_1.default.createElement(Navigations_1.ContextTextLabelNav, { preventLineChange: true, openNewTab: true, to: menu.conversionLinkSrc, text: menu.name })) : (react_1.default.createElement(Navigations_1.TextLabelNav, { preventLineChange: true, openNewTab: true, to: menu.conversionLinkSrc, text: menu.name }));
+    return isContextMenu ? (react_1.default.createElement(Navigations_1.ContextTextLabelNav, { preventLineChange: true, openNewTab: openNewTab, to: menu.conversionLinkSrc, text: menu.name })) : (react_1.default.createElement(Navigations_1.TextLabelNav, { preventLineChange: true, openNewTab: openNewTab, to: menu.conversionLinkSrc, text: menu.name }));
 }
 exports.default = WebMenuItemNav;

package/dist/src/desktop/components/DynamicDesktopNavBar/reducer.d.ts

@@ -0,0 +1,16 @@
+export declare type ActiveModeTypes = 'BY_URL' | 'BY_CLICK';
+declare type ActionType = {
+    type: 'INTERNAL_CLICKED';
+    payload: {
+        clickedURL: string;
+    };
+} | {
+    type: 'URL_CHANGED';
+};
+declare type DefaultValueState = {
+    mode: ActiveModeTypes;
+    clickedURL: string;
+};
+export declare const defaultValue: DefaultValueState;
+export default function reducer(state: DefaultValueState, action: ActionType): DefaultValueState;
+export {};

package/dist/src/desktop/components/DynamicDesktopNavBar/reducer.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultValue = void 0;
+exports.defaultValue = { mode: 'BY_URL', clickedURL: '' };
+function reducer(state, action) {
+    switch (action.type) {
+        case 'INTERNAL_CLICKED': {
+            return {
+                mode: 'BY_CLICK',
+                clickedURL: action.payload.clickedURL
+            };
+        }
+        case 'URL_CHANGED': {
+            return {
+                mode: 'BY_URL',
+                clickedURL: ''
+            };
+        }
+        default:
+            return exports.defaultValue;
+    }
+}
+exports.default = reducer;

package/dist/src/desktop/components/DynamicDesktopNavBar/types.d.ts

@@ -1,7 +1,7 @@
 import { PDSIconType } from '../../../common';
 export type { DynamicDesktopTemplateType, TemplateNamesType, TemplatesDataType } from './templates/types';
 export declare type ParsedNode = {
-    menuItemType: 'NAV_P_APP' | 'WEB_LINK';
+    menuItemType: menuItemTypes;
     type: 'GENERAL_NODE';
     name: string;
     iconSrc?: string;
@@ -11,3 +11,4 @@ export declare type ParsedNode = {
     conversionLinkSrc?: string;
     parsedNodes: Array<ParsedNode>;
 };
+export declare type menuItemTypes = 'NAV_P_APP' | 'WEB_LINK' | 'INTERNAL_LINK' | 'DISPLAY_ONLY';

package/dist/src/desktop/components/EditApplyTextField/EditApplyTextField.js

@@ -26,7 +26,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable react/jsx-no-bind */
 var react_1 = __importStar(require("react"));
 var react_hook_form_1 = require("react-hook-form");
-var react_i18next_1 = require("react-i18next");
 var styled_components_1 = __importStar(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
 var components_1 = require("../../common/components");
@@ -34,7 +33,6 @@ var IconButton_1 = require("../IconButton");
 function EditApplyTextField(_a) {
     var _b;
     var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, validation = _a.validation, _c = _a.preventBlankMode, preventBlankMode = _c === void 0 ? 'none' : _c, _d = _a.size, size = _d === void 0 ? 'large' : _d, _e = _a.responsiveMode, responsiveMode = _e === void 0 ? 'none' : _e, _f = _a.textLineType, textLineType = _f === void 0 ? 'single' : _f, _g = _a.multiRows, multiRows = _g === void 0 ? 8 : _g, _h = _a.autoMinRows, autoMinRows = _h === void 0 ? 8 : _h, autoMaxRows = _a.autoMaxRows, _j = _a.inputType, inputType = _j === void 0 ? 'text' : _j, _k = _a.state, state = _k === void 0 ? 'normal' : _k, max = _a.max, maxLength = _a.maxLength, min = _a.min, getInputValue = _a.getInputValue, onBlur = _a.onBlur, onChange = _a.onChange, onClickSubmitBtn = _a.onClickSubmitBtn, onFocus = _a.onFocus, onTarget = _a.onTarget;
-    var t = (0, react_i18next_1.useTranslation)('translation').t;
     var _l = (0, react_hook_form_1.useFormContext)(), register = _l.register, setValue = _l.setValue, trigger = _l.trigger, watch = _l.watch, reset = _l.reset, _m = _l.formState, errors = _m.errors, isSubmitSuccessful = _m.isSubmitSuccessful;
     var _o = (0, react_1.useState)(false), isFocused = _o[0], setIsFocused = _o[1];
     var _p = (0, react_1.useState)(false), isOpen = _p[0], setIsOpen = _p[1];
@@ -157,7 +155,7 @@ function EditApplyTextField(_a) {
                     react_1.default.createElement(IconButton_1.IconButton, { iconName: "ic_xmark", fillType: "line", baseSize: "small", iconSize: 16, shapeType: "circular", shadow: "visible", iconColorKey: "ui_cpnt_button_icon_enabled", baseColorKey: "ui_cpnt_button_fill_base_white", borderColorKey: "ui_cpnt_button_line_border_default", tabIndex: -1, onMouseDown: handleCancel }),
                     react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
                     react_1.default.createElement(IconButton_1.IconButton, { iconName: "ic_check", fillType: "fill", baseSize: "small", iconSize: 16, shapeType: "circular", shadow: "visible", iconColorKey: "ui_cpnt_button_icon_on_primary", baseColorKey: "ui_cpnt_button_fill_base_primary", state: isError === true ? 'disabled' : 'normal', tabIndex: -1, onMouseDown: handleMouseDown, type: "submit" })))),
-            ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && (react_1.default.createElement(S_Error, { isFocused: isFocused }, t(errors[name].message))))));
+            ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && react_1.default.createElement(S_Error, { isFocused: isFocused }, errors[name].message))));
 }
 var S_EditApplyTextFieldWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n"], ["\n  width: ", ";\n"])), function (_a) {
     var size = _a.size, responsiveMode = _a.responsiveMode;

package/dist/src/desktop/components/FilterBar/FilterBar.d.ts

@@ -2,7 +2,7 @@
 import { Path } from 'react-hook-form';
 import { IFormValues, PDSTextType, PDSValueOption } from '../../../common';
 export declare type FilterBarProps = {
-    displayType: 'chips' | 'searchfield' | 'filterchips_searchfield';
+    displayType?: 'chips' | 'searchfield' | 'filterchips_searchfield';
     textArray: PDSValueOption[];
     hintText?: PDSTextType;
     value?: PDSValueOption;

package/dist/src/desktop/components/MainButton/MainButton.js

@@ -122,22 +122,34 @@ function MainButton(_a) {
             react_1.default.createElement(hybrid_1.Spacing, { size: size === 'large' || size === 'rlarge' ? 'spacing_b' : 'spacing_a', spacingType: "width" }),
             react_1.default.createElement(hybrid_1.Icon, { iconName: iconName, size: size === 'large' || size === 'rlarge' ? 20 : 16, colorKey: iconColor(), fillType: iconFillType })))));
 }
-var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  min-width: 96px;\n  padding: 0 24px;\n  ", "\n  ", ";\n"], ["\n  height: 48px;\n  min-width: 96px;\n  padding: 0 24px;\n  ", "\n  ", ";\n"])), function (_a) {
+var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  min-width: 96px;\n  padding: 0 ", ";\n  ", "\n  ", ";\n"], ["\n  height: 48px;\n  min-width: 96px;\n  padding: 0 ", ";\n  ", "\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
     var shapeType = _a.shapeType;
     return shapeType === 'round' && 'border-radius: 14px;';
 }, function (_a) {
     var size = _a.size;
     return size === 'rlarge' && 'width: 100%';
 });
-var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 40px;\n  padding: 0 24px;\n  ", "\n"], ["\n  height: 40px;\n  padding: 0 24px;\n  ", "\n"])), function (_a) {
+var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 40px;\n  min-width: 64px;\n  padding: 0 ", ";\n  ", "\n"], ["\n  height: 40px;\n  min-width: 64px;\n  padding: 0 ", ";\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
     var shapeType = _a.shapeType;
     return shapeType === 'round' && 'border-radius: 14px;';
 });
-var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 32px;\n  padding: 0 16px;\n  ", "\n"], ["\n  height: 32px;\n  padding: 0 16px;\n  ", "\n"])), function (_a) {
+var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 32px;\n  min-width: 48px;\n  padding: 0 ", ";\n  ", "\n"], ["\n  height: 32px;\n  min-width: 48px;\n  padding: 0 ", ";\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+}, function (_a) {
     var shapeType = _a.shapeType;
     return shapeType === 'round' && 'border-radius: 10px;';
 });
-var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 24px;\n  padding: 0 16px;\n  ", "\n"], ["\n  height: 24px;\n  padding: 0 16px;\n  ", "\n"])), function (_a) {
+var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 24px;\n  min-width: 48px;\n  padding: 0 ", ";\n  ", "\n"], ["\n  height: 24px;\n  min-width: 48px;\n  padding: 0 ", ";\n  ", "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+}, function (_a) {
     var shapeType = _a.shapeType;
     return shapeType === 'round' && 'border-radius: 8px;';
 });

package/dist/src/desktop/components/Select/Select.d.ts

@@ -1,18 +1,19 @@
-import React from 'react';
+import React, { SelectHTMLAttributes } from 'react';
 import { PDSTextType } from '../../../common';
-declare type Value = {
+declare type SelectOption = {
     text: string;
-    value: string | number;
+    value: SelectHTMLAttributes<HTMLSelectElement>['value'];
 };
 declare type SelectProps = {
     hintText?: PDSTextType;
-    defaultValue?: Value;
-    valueArray: Value[];
+    defaultValue?: SelectOption;
+    value?: SelectOption['value'];
+    valueArray: SelectOption[];
     size?: 'large' | 'medium' | 'small' | 'rlarge';
     responsiveMode?: 'none' | 'use';
     state?: 'normal' | 'read_only' | 'disabled';
     onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
     colorTheme?: 'none' | 'dark';
 };
-declare function Select({ hintText, defaultValue, valueArray, size, responsiveMode, state, onChange, colorTheme }: SelectProps): JSX.Element;
+declare function Select({ hintText, defaultValue, value, valueArray, size, responsiveMode, state, onChange, colorTheme }: SelectProps): JSX.Element;
 export default Select;

package/dist/src/desktop/components/Select/Select.js

@@ -22,19 +22,18 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
+var HINT = 'HINT_VALUE';
 function Select(_a) {
-    var hintText = _a.hintText, defaultValue = _a.defaultValue, valueArray = _a.valueArray, _b = _a.size, size = _b === void 0 ? 'large' : _b, _c = _a.responsiveMode, responsiveMode = _c === void 0 ? 'none' : _c, _d = _a.state, state = _d === void 0 ? 'normal' : _d, onChange = _a.onChange, _e = _a.colorTheme, colorTheme = _e === void 0 ? 'none' : _e;
-    var _f = (0, react_1.useState)(false), isFocused = _f[0], setIsFocused = _f[1];
-    var handleClick = function () {
-        state === 'normal' && setIsFocused(true);
-    };
-    var handleBlur = function () { return setIsFocused(false); };
+    var _b;
+    var hintText = _a.hintText, defaultValue = _a.defaultValue, value = _a.value, valueArray = _a.valueArray, _c = _a.size, size = _c === void 0 ? 'large' : _c, _d = _a.responsiveMode, responsiveMode = _d === void 0 ? 'none' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, onChange = _a.onChange, _f = _a.colorTheme, colorTheme = _f === void 0 ? 'none' : _f;
     var handleChange = function (e) {
-        setIsFocused(false);
         if (onChange) {
             onChange(e);
         }
@@ -55,11 +54,11 @@ function Select(_a) {
             return 'ui_cpnt_select_icon_01';
         }
     };
-    return (react_1.default.createElement(S_Box, { size: size, responsiveMode: responsiveMode, onClick: handleClick, onBlur: handleBlur, tabIndex: 0 },
+    return (react_1.default.createElement(S_Box, { size: size, responsiveMode: responsiveMode, tabIndex: 0 },
         react_1.default.createElement(S_Icon_Wrapper, { state: state },
-            react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getIconColorKey() })),
-        react_1.default.createElement(S_Select, { disabled: state === 'disabled' || state === 'read_only', defaultValue: (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) || '', state: state, colorTheme: colorTheme, onChange: handleChange },
-            react_1.default.createElement("option", { disabled: true, value: (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) || '' }, (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) || hintText),
+            react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() })),
+        react_1.default.createElement(S_Select, { disabled: state === 'disabled' || state === 'read_only', state: state, colorTheme: colorTheme, onChange: handleChange, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b : HINT, value: value },
+            hintText && (react_1.default.createElement("option", { disabled: true, value: HINT }, hintText)),
             valueArray.map(function (el) { return (react_1.default.createElement("option", { key: el.value, value: el.value }, el.text)); }))));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  width: 432px;\n"], ["\n  height: 48px;\n  width: 432px;\n"])));
@@ -106,7 +105,7 @@ var S_Box = styled_components_1.default.div(templateObject_6 || (templateObject_
     var responsiveMode = _a.responsiveMode;
     return responsiveMode === 'use' && 'width: 100%';
 });
-var S_Icon_Wrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 16px;\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n  width: 16px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 16px;\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n  width: 16px;\n"])), function (_a) {
+var S_Icon_Wrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 16px;\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n  width: 16px;\n  pointer-events: none;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 16px;\n  position: absolute;\n  right: ", ";\n  top: 50%;\n  transform: translateY(-50%);\n  width: 16px;\n  pointer-events: none;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingD;
 });

package/dist/src/desktop/components/TextField/TextField.js

@@ -26,7 +26,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable react/jsx-no-bind */
 var react_1 = __importStar(require("react"));
 var react_hook_form_1 = require("react-hook-form");
-var react_i18next_1 = require("react-i18next");
 var styled_components_1 = __importStar(require("styled-components"));
 var components_1 = require("../../common/components");
 var IconButton_1 = require("../IconButton");
@@ -43,7 +42,6 @@ function TextField(_a) {
         read_only: 'ui_cpnt_textfield_icon_darktheme_default',
         disabled: 'ui_cpnt_textfield_icon_darktheme_disabled'
     };
-    var t = (0, react_i18next_1.useTranslation)('translation').t;
     var _r = (0, react_1.useState)(false), isFocused = _r[0], setIsFocused = _r[1];
     var _s = (0, react_hook_form_1.useFormContext)(), register = _s.register, trigger = _s.trigger, errors = _s.formState.errors;
     var _t = register(name, validation), validateOnChange = _t.onChange, validateOnBlur = _t.onBlur;
@@ -119,7 +117,7 @@ function TextField(_a) {
     };
     return (react_1.default.createElement(S_TextFieldBox, { size: size, responsiveMode: responsiveMode },
         react_1.default.createElement(S_TextFieldWrapper, { size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, colorTheme: colorTheme }, S_TextField()),
-        ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && react_1.default.createElement(S_Error, null, t(errors[name].message))));
+        ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && react_1.default.createElement(S_Error, null, errors[name].message)));
 }
 var S_TextFieldBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  ", ";\n"], ["\n  ", ";\n  ", ";\n"])), function (_a) {
     var size = _a.size;

package/dist/src/desktop/components/UploadMainButton/UploadMainButton.js

@@ -99,21 +99,21 @@ var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 =
     var size = _a.size;
     return size === 'rlarge' && 'width: 100%';
 });
-var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 40px;\n  padding: 0 ", ";\n  ", "\n"], ["\n  height: 40px;\n  padding: 0 ", ";\n  ", "\n"])), function (_a) {
+var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 40px;\n  min-width: 64px;\n  padding: 0 ", ";\n  ", "\n"], ["\n  height: 40px;\n  min-width: 64px;\n  padding: 0 ", ";\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
 }, function (_a) {
     var shapeType = _a.shapeType;
     return shapeType === 'round' && 'border-radius: 14px;';
 });
-var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 32px;\n  padding: 0 ", ";\n  ", "\n"], ["\n  height: 32px;\n  padding: 0 ", ";\n  ", "\n"])), function (_a) {
+var small = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 32px;\n  min-width: 48px;\n  padding: 0 ", ";\n  ", "\n"], ["\n  height: 32px;\n  min-width: 48px;\n  padding: 0 ", ";\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingD;
 }, function (_a) {
     var shapeType = _a.shapeType;
     return shapeType === 'round' && 'border-radius: 10px;';
 });
-var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 24px;\n  padding: 0 ", ";\n  ", "\n"], ["\n  height: 24px;\n  padding: 0 ", ";\n  ", "\n"])), function (_a) {
+var xsmall = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 24px;\n  min-width: 48px;\n  padding: 0 ", ";\n  ", "\n"], ["\n  height: 24px;\n  min-width: 48px;\n  padding: 0 ", ";\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingD;
 }, function (_a) {

package/dist/src/desktop/components/UserDesktopNavBar/UserDesktopNavBar.d.ts

@@ -3,7 +3,7 @@ import { PDSTextType, PDSValueOption } from '../../../common';
 declare type Props = {
     logoImageSrc?: string;
     titleText?: PDSTextType;
-    menuMode: 'center_text' | 'none';
+    menuMode?: 'center_text' | 'none';
     textArray?: PDSValueOption[];
     userImageSrc?: string;
     loginInfoMode?: 'none' | 'profile' | 'button';

package/dist/src/hybrid/components/Switch/Switch.js

@@ -19,9 +19,12 @@ function Switch(_a) {
         react_1.default.createElement(S_Label, { htmlFor: name, disabled: state === 'disabled' })));
 }
 var S_Switch = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: 56px;\n  height: 32px;\n"], ["\n  position: relative;\n  width: 56px;\n  height: 32px;\n"])));
-var S_Label = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 56px;\n  height: 32px;\n  border-radius: 24px;\n  background: ", ";\n  cursor: pointer;\n\n  &::after {\n    content: '';\n    display: block;\n    border-radius: 24px;\n    width: 24px;\n    height: 24px;\n    margin: ", ";\n    background: ", ";\n  }\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 56px;\n  height: 32px;\n  border-radius: 24px;\n  background: ", ";\n  cursor: pointer;\n\n  &::after {\n    content: '';\n    display: block;\n    border-radius: 24px;\n    width: 24px;\n    height: 24px;\n    margin: ", ";\n    background: ", ";\n  }\n"])), function (_a) {
+var S_Label = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 56px;\n  height: 32px;\n  border-radius: 24px;\n  background: ", ";\n  cursor: ", ";\n\n  &::after {\n    content: '';\n    display: block;\n    border-radius: 24px;\n    width: 24px;\n    height: 24px;\n    margin: ", ";\n    background: ", ";\n  }\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 56px;\n  height: 32px;\n  border-radius: 24px;\n  background: ", ";\n  cursor: ", ";\n\n  &::after {\n    content: '';\n    display: block;\n    border-radius: 24px;\n    width: 24px;\n    height: 24px;\n    margin: ", ";\n    background: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme, disabled = _a.disabled;
     return disabled ? theme.ui_cpnt_selcontrols_base_off_disabled : theme.ui_cpnt_selcontrols_base_off;
+}, function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? 'default' : 'pointer');
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingA;

package/dist/src/mobile/components/BasicList/BasicList.d.ts

@@ -5,9 +5,9 @@ declare type BasicListProps = {
     titleStyleTheme?: 'headingBold' | 'leadParaBold' | 'subTitleBold';
     titleText?: PDSTextType;
     captionText?: PDSTextType;
-    columns: 1 | 2 | 3 | 4 | 5 | 6;
-    columnSpacing: 0 | 16 | 24;
-    rowSpacing: 0 | 24 | 32 | 48 | 64;
+    columns?: 1 | 2 | 3 | 4 | 5 | 6;
+    columnSpacing?: 0 | 16 | 24;
+    rowSpacing?: 0 | 24 | 32 | 48 | 64;
 };
 declare function BasicList({ children, titleStyleTheme, titleText, captionText, columns, columnSpacing, rowSpacing }: BasicListProps): JSX.Element;
 export default BasicList;