pds-dev-kit-web-test 0.0.17 → 0.0.18

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/hybrid/Icon/Icon.js

@@ -0,0 +1,19 @@
+"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 styled_components_1 = require("styled-components");
+var fill_1 = __importDefault(require("../../common/assets/icons/fill"));
+var line_1 = __importDefault(require("../../common/assets/icons/line"));
+var Icon = function (_a) {
+    var _b = _a.iconName, iconName = _b === void 0 ? 'ic_unavailable' : _b, _c = _a.size, size = _c === void 0 ? 24 : _c, _d = _a.colorKey, colorKey = _d === void 0 ? 'ui_cpnt_icon_sys_grey_01' : _d, _e = _a.fillType, fillType = _e === void 0 ? 'line' : _e;
+    var theme = (0, styled_components_1.useTheme)();
+    var DefaultIcon = line_1.default.ic_unavailable;
+    var SelectedIcon = fillType === 'line'
+        ? line_1.default[iconName] || fill_1.default[iconName]
+        : fill_1.default[iconName] || line_1.default[iconName];
+    return SelectedIcon ? (react_1.default.createElement(SelectedIcon, { "x-pds-name": "Icon", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", color: theme[colorKey], size: size, style: { minWidth: size, minHeight: size } })) : (react_1.default.createElement(DefaultIcon, { "x-pds-name": "Icon", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", color: theme[colorKey], size: size, style: { minWidth: size, minHeight: size } }));
+};
+exports.default = Icon;

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/hybrid/Icon/index.d.ts

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

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/hybrid/Icon/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.Icon = void 0;
+var Icon_1 = require("./Icon");
+Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return __importDefault(Icon_1).default; } });

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/hybrid/ImageView/ImageView.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export declare type ImageViewProps = {
+    src?: string;
+    shapeType?: 'round' | 'circular' | 'rectangle';
+    radius?: 8 | 16 | 24;
+    width?: number | 'responsive';
+    height?: number | 'responsive';
+    noImageHeight?: number;
+    noImageWidth?: number;
+    ratio?: '16_9' | '9_16' | '16_10' | '10_16' | '4_3' | '3_4' | '3_2' | '2_3' | '1_1' | 'auto';
+    scaleType?: 'fill' | 'contain' | 'cover' | 'none';
+    borderMode?: 'use' | 'none';
+    backgroundFillMode?: 'use' | 'none';
+    isLoading?: boolean;
+};
+declare const ImageView: ({ src, shapeType, radius, width, height, noImageHeight, noImageWidth, ratio, scaleType, borderMode, backgroundFillMode, isLoading }: ImageViewProps) => JSX.Element;
+export default ImageView;

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/hybrid/ImageView/ImageView.js

@@ -0,0 +1,193 @@
+"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 = __importDefault(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var styles_1 = require("../../common/styles");
+var ImageView = function (_a) {
+    var src = _a.src, _b = _a.shapeType, shapeType = _b === void 0 ? 'round' : _b, _c = _a.radius, radius = _c === void 0 ? 8 : _c, width = _a.width, height = _a.height, noImageHeight = _a.noImageHeight, noImageWidth = _a.noImageWidth, _d = _a.ratio, ratio = _d === void 0 ? 'auto' : _d, _e = _a.scaleType, scaleType = _e === void 0 ? 'none' : _e, _f = _a.borderMode, borderMode = _f === void 0 ? 'none' : _f, _g = _a.backgroundFillMode, backgroundFillMode = _g === void 0 ? 'none' : _g, isLoading = _a.isLoading;
+    var LoadingAutoImageView = function () {
+        if (width && !height && !noImageHeight) {
+            return (react_1.default.createElement(S_LoadingRatioImageViewWrapper, { "$width": width, shapeType: shapeType, "$radius": radius },
+                react_1.default.createElement(S_LoadingRatioImageView, { ratio: "4_3" })));
+        }
+        if (height && height !== 'responsive' && !width && !noImageWidth) {
+            return (react_1.default.createElement(S_LoadingRatioImageViewWrapper, { "$width": (height * 4) / 3, shapeType: shapeType, "$radius": radius },
+                react_1.default.createElement(S_LoadingRatioImageView, { ratio: "4_3" })));
+        }
+        if (height === 'responsive' && !width && !noImageWidth) {
+            return (react_1.default.createElement(S_LoadingAutoImageViewWrapper, { "$height": height, "$width": 300, shapeType: shapeType, "$radius": radius }));
+        }
+        return (react_1.default.createElement(S_LoadingAutoImageViewWrapper, { "$height": height, "$width": width, noImageHeight: noImageHeight, noImageWidth: noImageWidth, shapeType: shapeType, "$radius": radius }));
+    };
+    var LoadingRatioImageView = (react_1.default.createElement(S_LoadingRatioImageViewWrapper, { "$width": width, shapeType: shapeType, "$radius": radius },
+        react_1.default.createElement(S_LoadingRatioImageView, { ratio: ratio })));
+    var LoadingImageView = function () {
+        if (ratio === 'auto') {
+            return LoadingAutoImageView();
+        }
+        return LoadingRatioImageView;
+    };
+    var ImageViewVariation = function () {
+        if (isLoading) {
+            return LoadingImageView();
+        }
+        return (react_1.default.createElement(react_1.default.Fragment, null, ratio === 'auto' ? (react_1.default.createElement(S_AutoImageViewWrapper, { "x-pds-name": "ImageView", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", "$height": height, "$width": width, noImageHeight: noImageHeight, noImageWidth: noImageWidth, borderMode: borderMode, shapeType: shapeType, "$radius": radius, backgroundFillMode: backgroundFillMode, "$src": src }, src && (react_1.default.createElement(S_AutoImageView, { src: src, "$height": height, "$width": width, scaleType: scaleType })))) : (react_1.default.createElement(S_RatioImageViewWrapper, { "x-pds-name": "ImageView", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", "$width": width, borderMode: borderMode, shapeType: shapeType, "$radius": radius, backgroundFillMode: backgroundFillMode },
+            react_1.default.createElement(S_RatioImageView, { "$src": src, scaleType: scaleType, ratio: ratio })))));
+    };
+    return ImageViewVariation();
+};
+var wrapperStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  box-sizing: border-box;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme, backgroundFillMode = _a.backgroundFillMode;
+    return backgroundFillMode === 'use' ? "background-color: " + theme.ui_temp_grey_04 : '';
+}, function (_a) {
+    var borderMode = _a.borderMode, theme = _a.theme;
+    return borderMode === 'use' && "border: 1px solid " + theme.ui_profile_image_border;
+}, function (_a) {
+    var shapeType = _a.shapeType, $radius = _a.$radius;
+    return shapeType &&
+        {
+            round: "border-radius: " + $radius + "px",
+            circular: 'border-radius: 50%',
+            rectangle: ''
+        }[shapeType];
+});
+var S_RatioImageViewWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  min-width: ", ";\n  width: ", ";\n"], ["\n  ", "\n  min-width: ", ";\n  width: ", ";\n"])), wrapperStyle, function (_a) {
+    var $width = _a.$width;
+    return ($width === 'responsive' ? '100%' : $width + "px");
+}, function (_a) {
+    var $width = _a.$width;
+    return ($width === 'responsive' ? '100%' : $width + "px");
+});
+var S_RatioImageView = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-position: center;\n  background-repeat: no-repeat;\n  width: 100%;\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  background-position: center;\n  background-repeat: no-repeat;\n  width: 100%;\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
+    var theme = _a.theme, $src = _a.$src;
+    return $src ? "background-image: url(" + $src + ")" : "background-color: " + theme.ui_temp_grey_04;
+}, function (_a) {
+    var scaleType = _a.scaleType;
+    return scaleType &&
+        {
+            fill: 'background-size: 100% 100%',
+            contain: "background-size: " + scaleType,
+            cover: "background-size: " + scaleType,
+            none: 'background-size: auto'
+        }[scaleType];
+}, function (_a) {
+    var ratio = _a.ratio;
+    return ratio &&
+        ratio !== 'auto' &&
+        {
+            '16_9': 'padding-top: 56.25%',
+            '9_16': 'padding-top: 177.77%',
+            '16_10': 'padding-top: 62.5%',
+            '10_16': 'padding-top: 159.74%',
+            '4_3': 'padding-top: 75%',
+            '3_4': 'padding-top: 133.33%',
+            '3_2': 'padding-top: 66.66%',
+            '2_3': 'padding-top: 150%',
+            '1_1': 'padding-top: 100%'
+        }[ratio];
+});
+var onlyWidthWrapperStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  min-height: ", ";\n  min-width: ", ";\n  height: ", ";\n  width: ", ";\n  ", ";\n"], ["\n  min-height: ", ";\n  min-width: ", ";\n  height: ", ";\n  width: ", ";\n  ", ";\n"])), function (_a) {
+    var noImageHeight = _a.noImageHeight, $src = _a.$src;
+    return !$src && noImageHeight ? noImageHeight + "px" : 'auto';
+}, function (_a) {
+    var $width = _a.$width;
+    return ($width === 'responsive' ? '100%' : $width + "px");
+}, function (_a) {
+    var noImageHeight = _a.noImageHeight, $src = _a.$src;
+    return (!$src && noImageHeight ? noImageHeight + "px" : 'auto');
+}, function (_a) {
+    var $width = _a.$width;
+    return ($width === 'responsive' ? '100%' : $width + "px");
+}, function (_a) {
+    var theme = _a.theme, noImageHeight = _a.noImageHeight, $src = _a.$src;
+    return !$src && noImageHeight ? "background-color: " + theme.ui_temp_grey_04 : '';
+});
+var onlyHeightWrapperStyle = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  min-height: ", ";\n  min-width: ", ";\n  height: ", ";\n  width: ", ";\n  ", ";\n"], ["\n  min-height: ", ";\n  min-width: ", ";\n  height: ", ";\n  width: ", ";\n  ", ";\n"])), function (_a) {
+    var $height = _a.$height;
+    return ($height === 'responsive' ? '100%' : $height + "px");
+}, function (_a) {
+    var noImageWidth = _a.noImageWidth, $src = _a.$src;
+    return (!$src && noImageWidth ? noImageWidth + "px" : 'auto');
+}, function (_a) {
+    var $height = _a.$height;
+    return ($height === 'responsive' ? '100%' : $height + "px");
+}, function (_a) {
+    var noImageWidth = _a.noImageWidth, $src = _a.$src;
+    return (!$src && noImageWidth ? noImageWidth + "px" : 'auto');
+}, function (_a) {
+    var theme = _a.theme, noImageWidth = _a.noImageWidth, $src = _a.$src;
+    return !$src && noImageWidth ? "background-color: " + theme.ui_temp_grey_04 : '';
+});
+var bothWrapperStyle = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  min-height: ", ";\n  height: ", ";\n  min-width: ", ";\n  width: ", ";\n  ", ";\n"], ["\n  min-height: ", ";\n  height: ", ";\n  min-width: ", ";\n  width: ", ";\n  ", ";\n"])), function (_a) {
+    var $height = _a.$height;
+    return ($height === 'responsive' ? '100%' : $height + "px");
+}, function (_a) {
+    var $height = _a.$height;
+    return ($height === 'responsive' ? '100%' : $height + "px");
+}, function (_a) {
+    var $width = _a.$width;
+    return ($width === 'responsive' ? '100%' : $width + "px");
+}, function (_a) {
+    var $width = _a.$width;
+    return ($width === 'responsive' ? '100%' : $width + "px");
+}, function (_a) {
+    var theme = _a.theme, $src = _a.$src;
+    return (!$src ? "background-color: " + theme.ui_temp_grey_04 : '');
+});
+var onlyWidthStyle = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 100%;\n  height: auto;\n"], ["\n  width: 100%;\n  height: auto;\n"])));
+var onlyHeightStyle = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: auto;\n  height: 100%;\n"], ["\n  width: auto;\n  height: 100%;\n"])));
+var bothStyle = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n"], ["\n  width: 100%;\n  height: 100%;\n"])));
+var S_AutoImageViewWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  ", "\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  ", "\n  ", ";\n  ", ";\n  ", ";\n"])), wrapperStyle, function (_a) {
+    var $width = _a.$width, $height = _a.$height;
+    return $width && !$height && onlyWidthWrapperStyle;
+}, function (_a) {
+    var $width = _a.$width, $height = _a.$height;
+    return !$width && $height && onlyHeightWrapperStyle;
+}, function (_a) {
+    var $width = _a.$width, $height = _a.$height;
+    return $width && $height && bothWrapperStyle;
+});
+var S_AutoImageView = styled_components_1.default.img(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  vertical-align: bottom;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  vertical-align: bottom;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
+    var scaleType = _a.scaleType;
+    return (scaleType !== 'none' ? "object-fit: " + scaleType + ";" : '');
+}, function (_a) {
+    var $width = _a.$width, $height = _a.$height;
+    return $width && !$height && onlyWidthStyle;
+}, function (_a) {
+    var $width = _a.$width, $height = _a.$height;
+    return !$width && $height && onlyHeightStyle;
+}, function (_a) {
+    var $width = _a.$width, $height = _a.$height;
+    return $width && $height && bothStyle;
+});
+var S_LoadingAutoImageViewWrapper = (0, styled_components_1.default)(S_AutoImageViewWrapper)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.skeletonLoadingStyle);
+var S_LoadingRatioImageViewWrapper = (0, styled_components_1.default)(S_RatioImageViewWrapper)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.skeletonLoadingStyle);
+var S_LoadingRatioImageView = (0, styled_components_1.default)(S_RatioImageView)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.skeletonLoadingStyle);
+exports.default = ImageView;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/hybrid/ImageView/index.d.ts

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

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/hybrid/ImageView/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.ImageView = void 0;
+var ImageView_1 = require("./ImageView");
+Object.defineProperty(exports, "ImageView", { enumerable: true, get: function () { return __importDefault(ImageView_1).default; } });

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/hybrid/Spacing/Spacing.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare type SpacingProps = {
+    size: 'spacing_a' | 'spacing_b' | 'spacing_c' | 'spacing_d' | 'spacing_e' | 'spacing_f' | 'spacing_g' | 'spacing_h' | 'spacing_i' | 'spacing_j' | 'spacing_k' | 'spacing_l' | 'spacing_m' | 'spacing_n';
+    spacingType?: 'height' | 'width';
+};
+declare function Spacing({ size, spacingType }: SpacingProps): JSX.Element;
+export default Spacing;

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/hybrid/Spacing/Spacing.js

@@ -0,0 +1,245 @@
+"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 = __importDefault(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+function Spacing(_a) {
+    var size = _a.size, _b = _a.spacingType, spacingType = _b === void 0 ? 'height' : _b;
+    return (react_1.default.createElement(S_Spacing, { "x-pds-name": "Spacing", "x-pds-element-type": "component", "x-pds-device-type": "hybrid", size: size, spacingType: spacingType }));
+}
+var spacing_a = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"], ["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingA;
+});
+var spacing_b = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"], ["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingB;
+});
+var spacing_c = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"], ["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingC;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingC;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingC;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingC;
+});
+var spacing_d = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"], ["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
+});
+var spacing_e = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"], ["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingE;
+});
+var spacing_f = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"], ["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingF;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingF;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingF;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingF;
+});
+var spacing_g = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"], ["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingG;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingG;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingG;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingG;
+});
+var spacing_h = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"], ["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingH;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingH;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingH;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingH;
+});
+var spacing_i = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"], ["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingI;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingI;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingI;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingI;
+});
+var spacing_j = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"], ["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingJ;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingJ;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingJ;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingJ;
+});
+var spacing_k = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"], ["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingK;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingK;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingK;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingK;
+});
+var spacing_l = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"], ["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingL;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingL;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingL;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingL;
+});
+var spacing_m = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"], ["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingM;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingM;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingM;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingM;
+});
+var spacing_n = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"], ["\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  width: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingN;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingN;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingN;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingN;
+});
+var S_Spacing = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  ", ";\n  ", ";\n"], ["\n  ", ";\n  ", ";\n"])), function (_a) {
+    var size = _a.size;
+    return size &&
+        {
+            spacing_a: spacing_a,
+            spacing_b: spacing_b,
+            spacing_c: spacing_c,
+            spacing_d: spacing_d,
+            spacing_e: spacing_e,
+            spacing_f: spacing_f,
+            spacing_g: spacing_g,
+            spacing_h: spacing_h,
+            spacing_i: spacing_i,
+            spacing_j: spacing_j,
+            spacing_k: spacing_k,
+            spacing_l: spacing_l,
+            spacing_m: spacing_m,
+            spacing_n: spacing_n
+        }[size];
+}, function (_a) {
+    var spacingType = _a.spacingType;
+    return spacingType &&
+        {
+            height: 'min-width: 1px; width: 1px;',
+            width: 'min-height: 1px; height: 1px;'
+        }[spacingType];
+});
+exports.default = Spacing;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/hybrid/Spacing/index.d.ts

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

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/hybrid/Spacing/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.Spacing = void 0;
+var Spacing_1 = require("./Spacing");
+Object.defineProperty(exports, "Spacing", { enumerable: true, get: function () { return __importDefault(Spacing_1).default; } });

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/hybrid/index.d.ts

@@ -0,0 +1,3 @@
+export { Icon } from './Icon';
+export { ImageView } from './ImageView';
+export { Spacing } from './Spacing';

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/hybrid/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spacing = exports.ImageView = exports.Icon = void 0;
+var Icon_1 = require("./Icon");
+Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return Icon_1.Icon; } });
+var ImageView_1 = require("./ImageView");
+Object.defineProperty(exports, "ImageView", { enumerable: true, get: function () { return ImageView_1.ImageView; } });
+var Spacing_1 = require("./Spacing");
+Object.defineProperty(exports, "Spacing", { enumerable: true, get: function () { return Spacing_1.Spacing; } });

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/index.d.ts

@@ -0,0 +1,3 @@
+export { D_MainButton, D_TextLabel, D_TextButton, D_IconButton } from './desktop';
+export { M_MainButton, M_TextLabel, M_TextButton, M_IconButton } from './mobile';
+export { Icon, ImageView, Spacing } from './hybrid';

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spacing = exports.ImageView = exports.Icon = exports.M_IconButton = exports.M_TextButton = exports.M_TextLabel = exports.M_MainButton = exports.D_IconButton = exports.D_TextButton = exports.D_TextLabel = exports.D_MainButton = void 0;
+var desktop_1 = require("./desktop");
+Object.defineProperty(exports, "D_MainButton", { enumerable: true, get: function () { return desktop_1.D_MainButton; } });
+Object.defineProperty(exports, "D_TextLabel", { enumerable: true, get: function () { return desktop_1.D_TextLabel; } });
+Object.defineProperty(exports, "D_TextButton", { enumerable: true, get: function () { return desktop_1.D_TextButton; } });
+Object.defineProperty(exports, "D_IconButton", { enumerable: true, get: function () { return desktop_1.D_IconButton; } });
+var mobile_1 = require("./mobile");
+Object.defineProperty(exports, "M_MainButton", { enumerable: true, get: function () { return mobile_1.M_MainButton; } });
+Object.defineProperty(exports, "M_TextLabel", { enumerable: true, get: function () { return mobile_1.M_TextLabel; } });
+Object.defineProperty(exports, "M_TextButton", { enumerable: true, get: function () { return mobile_1.M_TextButton; } });
+Object.defineProperty(exports, "M_IconButton", { enumerable: true, get: function () { return mobile_1.M_IconButton; } });
+var hybrid_1 = require("./hybrid");
+Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return hybrid_1.Icon; } });
+Object.defineProperty(exports, "ImageView", { enumerable: true, get: function () { return hybrid_1.ImageView; } });
+Object.defineProperty(exports, "Spacing", { enumerable: true, get: function () { return hybrid_1.Spacing; } });

package/dist/src/sub/DynamicLayout/common/components/pdsOriginal/mobile/IconButton/IconButton.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { FillIconNameKeys, LineIconNameKeys, UiColors } from '../../common';
+export declare type IconButtonProps = {
+    fillType?: 'fill' | 'line';
+    shapeType?: 'circular' | 'rectangle';
+    baseSize?: 'xxlarge' | 'large' | 'medium' | 'small' | 'xsmall';
+    baseColorKey?: UiColors;
+    borderColorKey?: UiColors;
+    iconSize?: 12 | 16 | 20 | 24 | 48 | 72;
+    iconFillType?: 'fill' | 'line';
+    iconName: FillIconNameKeys | LineIconNameKeys;
+    iconColorKey?: UiColors;
+    shadow?: 'hidden' | 'visible';
+    colorTheme?: 'none' | 'line1' | 'line2';
+    type?: 'submit' | 'reset' | 'button';
+    state?: 'normal' | 'disabled';
+    tabIndex?: number;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+};
+declare function IconButton({ fillType, shapeType, baseSize, baseColorKey, borderColorKey, iconSize, iconFillType, iconName, iconColorKey, shadow, colorTheme, type, state, tabIndex, onClick, onMouseDown }: IconButtonProps): JSX.Element;
+export default IconButton;