pds-dev-kit-web-test 0.1.3 → 0.1.5

package/dist/src/common/decorators/withFormProvider.js

@@ -10,22 +10,19 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.withFormProvider = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-disable react-hooks/rules-of-hooks */
-var react_1 = __importDefault(require("react"));
 var react_hook_form_1 = require("react-hook-form");
 var components_1 = require("../components");
 var withFormProvider = function (storyFn) {
     var methods = (0, react_hook_form_1.useForm)({ mode: 'onChange' });
     var handleSubmit = function (data) {
+        // eslint-disable-next-line no-console
         console.log('submit success', data);
     };
-    return (react_1.default.createElement(react_hook_form_1.FormProvider, __assign({}, methods),
-        react_1.default.createElement(components_1.Form, { onSubmit: methods.handleSubmit(handleSubmit) }, storyFn())));
+    return ((0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, methods, { children: (0, jsx_runtime_1.jsx)(components_1.Form, __assign({ onSubmit: methods.handleSubmit(handleSubmit) }, { children: storyFn() }), void 0) }), void 0));
 };
 exports.withFormProvider = withFormProvider;

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

@@ -1,10 +1,6 @@
-import { UITheme } from './styles/colorSet/ui-type';
-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, desktopEditorFontSize, desktopEditorLineHeight, mobileFontSize, mobileLineHeight, mobileEditorFontSize, mobileEditorLineHeight, boxShadow, spacing } from './styles/theme';
-import { uiColors, customTheme } from './styles/ui-colors';
-export { fontWeight, desktopFontSize, desktopLineHeight, desktopEditorFontSize, desktopEditorLineHeight, mobileFontSize, mobileLineHeight, mobileEditorFontSize, mobileEditorLineHeight, boxShadow, spacing, uiColors, customTheme };
-import { theme } from './styles';
-export { theme };
-import { Form } from './components';
-export { Form };
+export { UITheme } from './styles/colorSet/ui-type';
+export { IFormValues, FillIconNameKeys, LineIconNameKeys, PDSIconType, PdsDevKitTheme, DesktopFontSize, FontWeight, PDSTextType, PDSValueOption, UiColors, ForwardedRefType } from './types';
+export { fontWeight, desktopFontSize, desktopLineHeight, desktopEditorFontSize, desktopEditorLineHeight, mobileFontSize, mobileLineHeight, mobileEditorFontSize, mobileEditorLineHeight, boxShadow, spacing } from './styles/theme';
+export { uiColors, customTheme } from './styles/ui-colors';
+export { theme } from './styles';
+export { Form } from './components';

package/dist/src/common/index.js

@@ -1,6 +1,4 @@
 "use strict";
-/* eslint-disable import/order */
-/* eslint-disable import/first */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Form = exports.theme = exports.customTheme = exports.uiColors = exports.spacing = exports.boxShadow = exports.mobileEditorLineHeight = exports.mobileEditorFontSize = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopEditorLineHeight = exports.desktopEditorFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = void 0;
 // theme

package/dist/src/common/styles/ToneTest/ToneTest.js

@@ -1,25 +1,18 @@
 "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 __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);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var react_router_dom_1 = require("react-router-dom");
 var styled_components_1 = require("styled-components");
 var desktop_1 = require("../../../desktop");
@@ -364,46 +357,27 @@ function ToneTest() {
             setTone('LIGHT');
         }
     };
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(react_router_dom_1.BrowserRouter, null,
-            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),
-            react_1.default.createElement(components_1.MainButton, { iconName: "ic_arrow_round_left", text: "Toggle Tone", onClick: changeTone, styleTheme: "secondary" }),
-            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),
-            react_1.default.createElement(components_1.TextLabel, { text: "\uC774\uACF3\uC740 toggled\uB41C tone\uC744 \uB530\uB974\uB294 \uBD80\uBD84\uC785\uB2C8\uB2E4." }),
-            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),
-            react_1.default.createElement(styled_components_1.ThemeProvider, { theme: (0, theme_1.themeByGivenTone)(customTone) },
-                react_1.default.createElement(desktop_1.D_DynamicDesktopNavBar, { isPreview: true, brandLogo: {
-                        src: 'http://i.imgur.com/zVKjblJ.png',
-                        text: 'PEPSI',
-                        href: '/'
-                    }, userProfile: {
-                        src: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSL5qfISvgI8p95f3w5lZN9XNwYh1mRiIqEaQ&usqp=CAU',
-                        href: '/'
-                    }, primaryMenus: mocks, secondaryMenus: mocks, template: "W1_0005", basePath: "/channels/invitation" })),
-            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),
-            react_1.default.createElement(components_1.TextLabel, { text: "\uC774\uACF3\uC740 toggled\uB41C tone\uC758 \uC601\uD5A5\uC744 \uBC1B\uC9C0 \uC54A\uACE0 transparent \uC801\uC6A9 \uB41C \uBD80\uBD84\uC785\uB2C8\uB2E4." }),
-            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),
-            react_1.default.createElement(styled_components_1.ThemeProvider, { theme: (0, theme_1.themeByGivenTone)(customTone) },
-                react_1.default.createElement(desktop_1.D_DynamicDesktopNavBar, { isPreview: true, brandLogo: {
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(react_router_dom_1.BrowserRouter, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }, void 0), (0, jsx_runtime_1.jsx)(components_1.MainButton, { iconName: "ic_arrow_round_left", text: "Toggle Tone", onClick: changeTone, styleTheme: "secondary" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }, void 0), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: "\uC774\uACF3\uC740 toggled\uB41C tone\uC744 \uB530\uB974\uB294 \uBD80\uBD84\uC785\uB2C8\uB2E4." }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }, void 0), (0, jsx_runtime_1.jsx)(styled_components_1.ThemeProvider, __assign({ theme: (0, theme_1.themeByGivenTone)(customTone) }, { children: (0, jsx_runtime_1.jsx)(desktop_1.D_DynamicDesktopNavBar, { isPreview: true, brandLogo: {
+                            src: 'http://i.imgur.com/zVKjblJ.png',
+                            text: 'PEPSI',
+                            href: '/'
+                        }, userProfile: {
+                            src: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSL5qfISvgI8p95f3w5lZN9XNwYh1mRiIqEaQ&usqp=CAU',
+                            href: '/'
+                        }, primaryMenus: mocks, secondaryMenus: mocks, template: "W1_0005", basePath: "/channels/invitation" }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }, void 0), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: "\uC774\uACF3\uC740 toggled\uB41C tone\uC758 \uC601\uD5A5\uC744 \uBC1B\uC9C0 \uC54A\uACE0 transparent \uC801\uC6A9 \uB41C \uBD80\uBD84\uC785\uB2C8\uB2E4." }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }, void 0), (0, jsx_runtime_1.jsx)(styled_components_1.ThemeProvider, __assign({ theme: (0, theme_1.themeByGivenTone)(customTone) }, { children: (0, jsx_runtime_1.jsx)(desktop_1.D_DynamicDesktopNavBar, { isPreview: true, brandLogo: {
+                            src: 'http://i.imgur.com/zVKjblJ.png',
+                            text: 'PEPSI',
+                            href: '/'
+                        }, userProfile: {
+                            src: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSL5qfISvgI8p95f3w5lZN9XNwYh1mRiIqEaQ&usqp=CAU',
+                            href: '/'
+                        }, primaryMenus: mocks, secondaryMenus: mocks, template: "W1_0005", basePath: "/channels/invitation", colorTheme: "transparent" }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Divider, {}, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }, void 0), (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: "\uC774\uACF3\uC740 \uAE30\uBCF8 tone\uC744 \uB530\uB974\uB294 \uBD80\uBD84\uC785\uB2C8\uB2E4." }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_d" }, void 0), (0, jsx_runtime_1.jsx)(desktop_1.D_DynamicDesktopNavBar, { isPreview: true, brandLogo: {
                         src: 'http://i.imgur.com/zVKjblJ.png',
                         text: 'PEPSI',
                         href: '/'
                     }, userProfile: {
                         src: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSL5qfISvgI8p95f3w5lZN9XNwYh1mRiIqEaQ&usqp=CAU',
                         href: '/'
-                    }, primaryMenus: mocks, secondaryMenus: mocks, template: "W1_0005", basePath: "/channels/invitation", colorTheme: "transparent" })),
-            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_e" }),
-            react_1.default.createElement(hybrid_1.Divider, null),
-            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),
-            react_1.default.createElement(components_1.TextLabel, { text: "\uC774\uACF3\uC740 \uAE30\uBCF8 tone\uC744 \uB530\uB974\uB294 \uBD80\uBD84\uC785\uB2C8\uB2E4." }),
-            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_d" }),
-            react_1.default.createElement(desktop_1.D_DynamicDesktopNavBar, { isPreview: true, brandLogo: {
-                    src: 'http://i.imgur.com/zVKjblJ.png',
-                    text: 'PEPSI',
-                    href: '/'
-                }, userProfile: {
-                    src: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSL5qfISvgI8p95f3w5lZN9XNwYh1mRiIqEaQ&usqp=CAU',
-                    href: '/'
-                }, primaryMenus: mocks, secondaryMenus: mocks, template: "W1_0005", basePath: "/channels/invitation" }))));
+                    }, primaryMenus: mocks, secondaryMenus: mocks, template: "W1_0005", basePath: "/channels/invitation" }, void 0)] }, void 0) }, void 0));
 }
 exports.default = ToneTest;

package/dist/src/common/styles/ToneTest/ToneTest.stories.d.ts

@@ -0,0 +1,5 @@
+import ToneTest from './ToneTest';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<typeof ToneTest>;
+export default _default;
+export declare const ToggleTone: ComponentStory<typeof ToneTest>;

package/dist/src/common/styles/ToneTest/ToneTest.stories.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToggleTone = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var ToneTest_1 = __importDefault(require("./ToneTest"));
+exports.default = {
+    title: 'test/tone',
+    component: ToneTest_1.default
+};
+var Template = function () { return (0, jsx_runtime_1.jsx)(ToneTest_1.default, {}, void 0); };
+exports.ToggleTone = Template.bind({});

package/dist/src/common/styles/colorSet/Color.stories.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<never>;
+export default _default;
+export declare const AllColorKeys: ComponentStory<never>;
+export declare const ColorKey: ComponentStory<any>;

package/dist/src/common/styles/colorSet/Color.stories.js

@@ -0,0 +1,125 @@
+"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorKey = exports.AllColorKeys = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importDefault(require("styled-components"));
+var components_1 = require("../../../desktop/components");
+var panels_1 = require("../../../desktop/panels");
+var ui_colors_1 = require("../ui-colors");
+exports.default = {
+    title: 'test/Color',
+    parameters: {
+        docs: {
+            description: {
+                component: '모든 color key를 확인할 수 있습니다.'
+            }
+        },
+        controls: { hideNoControlsWarning: true }
+    }
+};
+var S_Grid = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  grid-gap: 8px;\n  grid-template-columns: repeat(auto-fill, minmax(400px, auto));\n  margin: 24px;\n"], ["\n  display: grid;\n  grid-gap: 8px;\n  grid-template-columns: repeat(auto-fill, minmax(400px, auto));\n  margin: 24px;\n"])));
+var S_TextWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border-top: 1px solid ", ";\n  bottom: 0;\n  left: 0;\n  padding: 8px 0;\n  position: absolute;\n  right: 0;\n"], ["\n  background-color: ", ";\n  border-top: 1px solid ", ";\n  bottom: 0;\n  left: 0;\n  padding: 8px 0;\n  position: absolute;\n  right: 0;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.ui_cpnt_sheet_base_01;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.ui_profile_image_border;
+});
+var S_ContentSheetWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  & > div {\n    background-color: ", ";\n  }\n"], ["\n  & > div {\n    background-color: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme, colorKey = _a.colorKey;
+    return theme[colorKey];
+});
+var AllColorKeysTemplate = function () {
+    var colorKeys = Object.keys(ui_colors_1.uiColors);
+    return ((0, jsx_runtime_1.jsx)(S_Grid, { children: colorKeys.map(function (key) {
+            var handleCopyUrl = function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, navigator.clipboard.writeText(key)];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); };
+            return ((0, jsx_runtime_1.jsx)(S_ContentSheetWrapper, __assign({ colorKey: key }, { children: (0, jsx_runtime_1.jsx)(panels_1.ContentSheet, __assign({ width: "auto", height: "160px", borderMode: "use", overrideBorderColorKey: "ui_cpnt_divider", onClick: handleCopyUrl, overrideCSS: {
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        position: 'relative'
+                    } }, { children: (0, jsx_runtime_1.jsx)(S_TextWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: key, styleTheme: "caption2Bold", textAlign: "center", userSelectMode: "use" }, void 0) }, void 0) }), void 0) }), key));
+        }) }, void 0));
+};
+exports.AllColorKeys = AllColorKeysTemplate.bind({});
+var ColorKeyTemplate = function (args) {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(panels_1.ContentSheet, __assign({ width: "auto", height: "500px", borderMode: "use", overrideBorderColorKey: "ui_cpnt_divider", overrideCSS: {
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                position: 'relative',
+                margin: '24px'
+            } }, { children: [(0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: "controls\uC5D0 \uBCF4\uACE0 \uC2F6\uC740 colorKey\uB97C \uC785\uB825\uD574\uC8FC\uC138\uC694.", styleTheme: "caption2Bold", textAlign: "center" }, void 0), (0, jsx_runtime_1.jsx)(S_ContentSheetWrapper, __assign({}, args, { children: (0, jsx_runtime_1.jsx)(panels_1.ContentSheet, __assign({ width: "100%", height: "100%", backgroundColorTheme: "transparent", overrideCSS: {
+                            position: 'absolute',
+                            top: '0',
+                            left: '0'
+                        } }, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0) }), void 0) }), void 0)] }), void 0) }, void 0));
+};
+exports.ColorKey = ColorKeyTemplate.bind({});
+exports.ColorKey.args = {
+    colorKey: 'ui_cpnt_button_fill_base_primary'
+};
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -112,3 +112,4 @@ export declare const theme: {
     uiColors: import("..").UITheme;
 };
 export { skeletonLoadingStyle } from './loading';
+export * from './movement';

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

@@ -1,4 +1,14 @@
 "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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.skeletonLoadingStyle = exports.theme = void 0;
 var theme_1 = require("./theme");
@@ -19,3 +29,4 @@ exports.theme = {
 };
 var loading_1 = require("./loading");
 Object.defineProperty(exports, "skeletonLoadingStyle", { enumerable: true, get: function () { return loading_1.skeletonLoadingStyle; } });
+__exportStar(require("./movement"), exports);

package/dist/src/common/styles/movement/animationStyle.js

@@ -7,12 +7,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.modalOverlayOffAni = exports.modalOverlayOnAni = exports.modalOffAni = exports.modalOnAni = exports.dialogOverlayOffAni = exports.dialogOverlayOnAni = exports.dialogOffAni = exports.dialogOnAni = void 0;
 var styled_components_1 = require("styled-components");
 var keyframes_1 = require("./keyframes");
-exports.dialogOnAni = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  transform-origin: 0 0;\n  animation: ", " 0.2s ease-in-out both, ", " 0.2s ease-in-out both;\n"], ["\n  transform-origin: 0 0;\n  animation: ", " 0.2s ease-in-out both, ", " 0.2s ease-in-out both;\n"])), keyframes_1.scaleBounceInIncludeTranslate, keyframes_1.fadeIn);
-exports.dialogOffAni = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  transform-origin: 0 0;\n  animation: ", " 0.2s ease-in-out both,\n    ", " 0.2s ease-in-out both;\n"], ["\n  transform-origin: 0 0;\n  animation: ", " 0.2s ease-in-out both,\n    ", " 0.2s ease-in-out both;\n"])), keyframes_1.scaleBounceOutIncludeTranslate, keyframes_1.fadeOut);
+exports.dialogOnAni = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  animation: ", " 0.2s ease-in-out both, ", " 0.2s ease-in-out both;\n  transform-origin: 0 0;\n"], ["\n  animation: ", " 0.2s ease-in-out both, ", " 0.2s ease-in-out both;\n  transform-origin: 0 0;\n"])), keyframes_1.scaleBounceInIncludeTranslate, keyframes_1.fadeIn);
+exports.dialogOffAni = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  animation: ", " 0.2s ease-in-out both,\n    ", " 0.2s ease-in-out both;\n  transform-origin: 0 0;\n"], ["\n  animation: ", " 0.2s ease-in-out both,\n    ", " 0.2s ease-in-out both;\n  transform-origin: 0 0;\n"])), keyframes_1.scaleBounceOutIncludeTranslate, keyframes_1.fadeOut);
 exports.dialogOverlayOnAni = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  animation: ", " 0.2s ease-in-out both;\n"], ["\n  animation: ", " 0.2s ease-in-out both;\n"])), keyframes_1.fadeIn);
 exports.dialogOverlayOffAni = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  animation: ", " 0.2s ease-in-out both;\n"], ["\n  animation: ", " 0.2s ease-in-out both;\n"])), keyframes_1.fadeOut);
-exports.modalOnAni = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  transform-origin: 0 0;\n  animation: ", " 0.2s ease-in-out both,\n    ", " 0.2s ease-in-out both;\n"], ["\n  transform-origin: 0 0;\n  animation: ", " 0.2s ease-in-out both,\n    ", " 0.2s ease-in-out both;\n"])), keyframes_1.scaleBounceInIncludeTranslate02, keyframes_1.fadeIn);
-exports.modalOffAni = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  transform-origin: 0 0;\n  animation: ", " 0.2s ease-in-out both,\n    ", " 0.2s ease-in-out both;\n"], ["\n  transform-origin: 0 0;\n  animation: ", " 0.2s ease-in-out both,\n    ", " 0.2s ease-in-out both;\n"])), keyframes_1.scaleBounceOutIncludeTranslate02, keyframes_1.fadeOut);
+exports.modalOnAni = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  animation: ", " 0.2s ease-in-out both,\n    ", " 0.2s ease-in-out both;\n  transform-origin: 0 0;\n"], ["\n  animation: ", " 0.2s ease-in-out both,\n    ", " 0.2s ease-in-out both;\n  transform-origin: 0 0;\n"])), keyframes_1.scaleBounceInIncludeTranslate02, keyframes_1.fadeIn);
+exports.modalOffAni = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  animation: ", " 0.2s ease-in-out both,\n    ", " 0.2s ease-in-out both;\n  transform-origin: 0 0;\n"], ["\n  animation: ", " 0.2s ease-in-out both,\n    ", " 0.2s ease-in-out both;\n  transform-origin: 0 0;\n"])), keyframes_1.scaleBounceOutIncludeTranslate02, keyframes_1.fadeOut);
 exports.modalOverlayOnAni = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  animation: ", " 0.2s ease-in-out both;\n"], ["\n  animation: ", " 0.2s ease-in-out both;\n"])), keyframes_1.fadeIn);
 exports.modalOverlayOffAni = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  animation: ", " 0.2s ease-in-out both;\n"], ["\n  animation: ", " 0.2s ease-in-out both;\n"])), keyframes_1.fadeOut);
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

@@ -0,0 +1,3 @@
+export { dialogOnAni, dialogOffAni, dialogOverlayOnAni, dialogOverlayOffAni, modalOnAni, modalOffAni, modalOverlayOnAni, modalOverlayOffAni } from './animationStyle';
+export { fadeIn, fadeOut, glow, scaleUp, scaleDown, scaleUpIncludeTranslate, scaleDownIncludeTranslate, gelatine, scaleBounceIn, scaleBounceIn02, scaleBounceOut, scaleBounceOut02, scaleBounceInIncludeTranslate, scaleBounceOutIncludeTranslate, scaleBounceInIncludeTranslate02, scaleBounceOutIncludeTranslate02 } from './keyframes';
+export { AdminListItemTransition, InputTransition, ButtonTransition } from './transitionStyle';

package/dist/src/common/styles/movement/index.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonTransition = exports.InputTransition = exports.AdminListItemTransition = exports.scaleBounceOutIncludeTranslate02 = exports.scaleBounceInIncludeTranslate02 = exports.scaleBounceOutIncludeTranslate = exports.scaleBounceInIncludeTranslate = exports.scaleBounceOut02 = exports.scaleBounceOut = exports.scaleBounceIn02 = exports.scaleBounceIn = exports.gelatine = exports.scaleDownIncludeTranslate = exports.scaleUpIncludeTranslate = exports.scaleDown = exports.scaleUp = exports.glow = exports.fadeOut = exports.fadeIn = exports.modalOverlayOffAni = exports.modalOverlayOnAni = exports.modalOffAni = exports.modalOnAni = exports.dialogOverlayOffAni = exports.dialogOverlayOnAni = exports.dialogOffAni = exports.dialogOnAni = void 0;
+var animationStyle_1 = require("./animationStyle");
+Object.defineProperty(exports, "dialogOnAni", { enumerable: true, get: function () { return animationStyle_1.dialogOnAni; } });
+Object.defineProperty(exports, "dialogOffAni", { enumerable: true, get: function () { return animationStyle_1.dialogOffAni; } });
+Object.defineProperty(exports, "dialogOverlayOnAni", { enumerable: true, get: function () { return animationStyle_1.dialogOverlayOnAni; } });
+Object.defineProperty(exports, "dialogOverlayOffAni", { enumerable: true, get: function () { return animationStyle_1.dialogOverlayOffAni; } });
+Object.defineProperty(exports, "modalOnAni", { enumerable: true, get: function () { return animationStyle_1.modalOnAni; } });
+Object.defineProperty(exports, "modalOffAni", { enumerable: true, get: function () { return animationStyle_1.modalOffAni; } });
+Object.defineProperty(exports, "modalOverlayOnAni", { enumerable: true, get: function () { return animationStyle_1.modalOverlayOnAni; } });
+Object.defineProperty(exports, "modalOverlayOffAni", { enumerable: true, get: function () { return animationStyle_1.modalOverlayOffAni; } });
+var keyframes_1 = require("./keyframes");
+Object.defineProperty(exports, "fadeIn", { enumerable: true, get: function () { return keyframes_1.fadeIn; } });
+Object.defineProperty(exports, "fadeOut", { enumerable: true, get: function () { return keyframes_1.fadeOut; } });
+Object.defineProperty(exports, "glow", { enumerable: true, get: function () { return keyframes_1.glow; } });
+Object.defineProperty(exports, "scaleUp", { enumerable: true, get: function () { return keyframes_1.scaleUp; } });
+Object.defineProperty(exports, "scaleDown", { enumerable: true, get: function () { return keyframes_1.scaleDown; } });
+Object.defineProperty(exports, "scaleUpIncludeTranslate", { enumerable: true, get: function () { return keyframes_1.scaleUpIncludeTranslate; } });
+Object.defineProperty(exports, "scaleDownIncludeTranslate", { enumerable: true, get: function () { return keyframes_1.scaleDownIncludeTranslate; } });
+Object.defineProperty(exports, "gelatine", { enumerable: true, get: function () { return keyframes_1.gelatine; } });
+Object.defineProperty(exports, "scaleBounceIn", { enumerable: true, get: function () { return keyframes_1.scaleBounceIn; } });
+Object.defineProperty(exports, "scaleBounceIn02", { enumerable: true, get: function () { return keyframes_1.scaleBounceIn02; } });
+Object.defineProperty(exports, "scaleBounceOut", { enumerable: true, get: function () { return keyframes_1.scaleBounceOut; } });
+Object.defineProperty(exports, "scaleBounceOut02", { enumerable: true, get: function () { return keyframes_1.scaleBounceOut02; } });
+Object.defineProperty(exports, "scaleBounceInIncludeTranslate", { enumerable: true, get: function () { return keyframes_1.scaleBounceInIncludeTranslate; } });
+Object.defineProperty(exports, "scaleBounceOutIncludeTranslate", { enumerable: true, get: function () { return keyframes_1.scaleBounceOutIncludeTranslate; } });
+Object.defineProperty(exports, "scaleBounceInIncludeTranslate02", { enumerable: true, get: function () { return keyframes_1.scaleBounceInIncludeTranslate02; } });
+Object.defineProperty(exports, "scaleBounceOutIncludeTranslate02", { enumerable: true, get: function () { return keyframes_1.scaleBounceOutIncludeTranslate02; } });
+var transitionStyle_1 = require("./transitionStyle");
+Object.defineProperty(exports, "AdminListItemTransition", { enumerable: true, get: function () { return transitionStyle_1.AdminListItemTransition; } });
+Object.defineProperty(exports, "InputTransition", { enumerable: true, get: function () { return transitionStyle_1.InputTransition; } });
+Object.defineProperty(exports, "ButtonTransition", { enumerable: true, get: function () { return transitionStyle_1.ButtonTransition; } });

package/dist/src/common/styles/scroll/scrollbarStyle.js

@@ -10,5 +10,5 @@ exports.scrollbarStyle = (0, styled_components_1.css)(templateObject_1 || (templ
     var theme = _a.theme;
     return theme.ui_container_scroll;
 });
-exports.scrollbarWithPaddingStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n\n  ::-webkit-scrollbar-track {\n    margin-top: 24px;\n    margin-bottom: 24px;\n  }\n"], ["\n  ", "\n\n  ::-webkit-scrollbar-track {\n    margin-top: 24px;\n    margin-bottom: 24px;\n  }\n"])), exports.scrollbarStyle);
+exports.scrollbarWithPaddingStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n\n  ::-webkit-scrollbar-track {\n    margin-bottom: 24px;\n    margin-top: 24px;\n  }\n"], ["\n  ", "\n\n  ::-webkit-scrollbar-track {\n    margin-bottom: 24px;\n    margin-top: 24px;\n  }\n"])), exports.scrollbarStyle);
 var templateObject_1, templateObject_2;

package/dist/src/common/styles/theme.d.ts

@@ -1,4 +1,4 @@
-import { DefaultTheme } from 'styled-components';
+import type { DefaultTheme } from 'styled-components';
 export declare const fontWeight: {
     normal: string;
     bold: string;

package/dist/src/common/styles/ui-colors.d.ts

@@ -1,4 +1,4 @@
-import { UITheme } from './colorSet/ui-type';
+import type { UITheme } from './colorSet/ui-type';
 export declare const uiColors: UITheme;
 declare global {
     interface Window {

package/dist/src/common/types/components.d.ts

@@ -1,5 +1,5 @@
-import { ForwardedRef } from 'react';
-import { PDSTextType } from './text';
+import type { PDSTextType } from './text';
+import type { ForwardedRef } from 'react';
 export declare type PDSValueOption = {
     text: PDSTextType;
     value: string | number | null | boolean;

package/dist/src/common/types/icon.d.ts

@@ -1,5 +1,5 @@
-import fillIcons from '../assets/icons/fill';
-import lineIcons from '../assets/icons/line';
+import type fillIcons from '../assets/icons/fill';
+import type lineIcons from '../assets/icons/line';
 export declare type FillIconNameKeys = keyof typeof fillIcons;
 export declare type LineIconNameKeys = keyof typeof lineIcons;
 export declare type PDSIconType = FillIconNameKeys | LineIconNameKeys;

package/dist/src/common/types/styled-components.d.ts

@@ -1,4 +1,4 @@
-import { desktopFontSize, fontWeight } from '../styles/theme';
+import type { desktopFontSize, fontWeight } from '../styles/theme';
 export interface PdsDevKitTheme {
     fontWeight: {
         normal: '500';

package/dist/src/common/types/text.d.ts

@@ -1,2 +1,2 @@
-import { TFunctionResult } from 'i18next';
+import type { TFunctionResult } from 'i18next';
 export declare type PDSTextType = number | TFunctionResult;

package/dist/src/common/types/uiColors.d.ts

@@ -1,2 +1,2 @@
-import { uiColors } from '../styles/ui-colors';
+import type { uiColors } from '../styles/ui-colors';
 export declare type UiColors = keyof typeof uiColors;

package/dist/src/desktop/common/components/TextFieldBase/TextFieldBase.d.ts

@@ -1,10 +1,11 @@
-import React from 'react';
+/// <reference types="react" />
 import { Path } from 'react-hook-form';
 import { DesktopFontSize, FontWeight, IFormValues, PDSTextType, UiColors } from '../../../../common';
 export declare type TextFieldBaseProps = {
     name: Path<IFormValues>;
     hintText?: PDSTextType;
     defaultText?: PDSTextType;
+    textAlign?: 'left' | 'center' | 'right';
     validation?: {
         [key: string]: any;
     };
@@ -38,5 +39,5 @@ export declare type TextFieldBaseProps = {
     inputRef?: any;
     [x: string]: any;
 } & Record<string, any>;
-declare function TextFieldBase({ name, hintText, defaultText, validation, preventBlankMode, enterSubmitMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, colorTheme, min, max, maxLength, textSize, textWeight, textPadding, fieldHeight, deleteIconMode, deleteIconSize, deleteIconColor, isFocused, autoComplete, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onTarget, inputRef, ...rest }: TextFieldBaseProps): JSX.Element;
+declare function TextFieldBase({ name, hintText, defaultText, textAlign, validation, preventBlankMode, enterSubmitMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, colorTheme, min, max, maxLength, textSize, textWeight, textPadding, fieldHeight, deleteIconMode, deleteIconSize, deleteIconColor, isFocused, autoComplete, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onTarget, inputRef, ...rest }: TextFieldBaseProps): JSX.Element;
 export default TextFieldBase;