pds-dev-kit-web-test 2.5.705 → 2.5.707

package/dist/src/sub/DynamicLayout/components/mobile/Item/Item.js

@@ -1,54 +1,67 @@
 "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 __makeTemplateObject = this && this.__makeTemplateObject || function (cooked, raw) {
+  if (Object.defineProperty) {
+    Object.defineProperty(cooked, "raw", {
+      value: raw
+    });
+  } else {
+    cooked.raw = raw;
+  }
+  return cooked;
 };
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
+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];
     }
-    Object.defineProperty(o, k2, desc);
-}) : (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 __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
     return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : 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;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var styled_components_1 = __importStar(require("styled-components"));
@@ -56,402 +69,597 @@ var dynamicLayoutContext_1 = require("../../../dynamicLayoutContext");
 var pdsOriginal_1 = require("../../pdsOriginal");
 var Section_1 = require("../../Section");
 function Item(_a) {
-    var children = _a.children, props = __rest(_a, ["children"]);
-    var context = (0, react_1.useContext)(Section_1.sectionContext);
-    var itemLinkMethod = context.properties.itemLinkMethod;
-    var isItemClickable = itemLinkMethod === 'CLICK_ITEM';
-    var _b = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), mode = _b.mode, isPreview = _b.isPreview, navigationHandler = _b.navigationHandler;
-    var handleClickButton = function (e) {
-        if (isPreview !== null && isPreview !== void 0 ? isPreview : mode === 'PREVIEW')
-            return;
-        e.preventDefault();
-        e.stopPropagation();
-        typeof navigationHandler === 'function' &&
-            navigationHandler(props.properties.linkType, props.properties.linkSrc);
-    };
-    return ((0, jsx_runtime_1.jsx)(S_Item, __assign({ "x-dlayout-section-element-name": "Item", onClick: isItemClickable ? handleClickButton : undefined }, { children: children })));
+  var children = _a.children,
+    props = __rest(_a, ["children"]);
+  var context = (0, react_1.useContext)(Section_1.sectionContext);
+  var itemLinkMethod = context.properties.itemLinkMethod;
+  var isItemClickable = itemLinkMethod === 'CLICK_ITEM';
+  var _b = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext),
+    mode = _b.mode,
+    isPreview = _b.isPreview,
+    navigationHandler = _b.navigationHandler;
+  var handleClickButton = function (e) {
+    if (isPreview !== null && isPreview !== void 0 ? isPreview : mode === 'PREVIEW') return;
+    e.preventDefault();
+    e.stopPropagation();
+    typeof navigationHandler === 'function' && navigationHandler(props.properties.linkType, props.properties.linkSrc);
+  };
+  return (0, jsx_runtime_1.jsx)(S_Item, __assign({
+    "x-dlayout-section-element-name": "Item",
+    onClick: isItemClickable ? handleClickButton : undefined
+  }, {
+    children: children
+  }));
 }
 var S_Item = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
 function Title(_a) {
-    var text = _a.text, color = _a.color, _b = _a.lineHeight, lineHeight = _b === void 0 ? 1.5 : _b, textLabelProps = __rest(_a, ["text", "color", "lineHeight"]);
-    return ((0, jsx_runtime_1.jsx)(S_TitleStyleWrapper, __assign({ "x-dlayout-item-element-name": "Title", color: color, lineHeight: lineHeight }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_TextLabel, __assign({ text: text, colorTheme: "sysTextPrimary" }, textLabelProps)) })));
+  var text = _a.text,
+    color = _a.color,
+    _b = _a.lineHeight,
+    lineHeight = _b === void 0 ? 1.5 : _b,
+    textLabelProps = __rest(_a, ["text", "color", "lineHeight"]);
+  return (0, jsx_runtime_1.jsx)(S_TitleStyleWrapper, __assign({
+    "x-dlayout-item-element-name": "Title",
+    color: color,
+    lineHeight: lineHeight
+  }, {
+    children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_TextLabel, __assign({
+      text: text,
+      colorTheme: "sysTextPrimary"
+    }, textLabelProps))
+  }));
 }
 var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  & > div {\n    color: ", ";\n    line-height: ", ";\n  }\n"], ["\n  & > div {\n    color: ", ";\n    line-height: ", ";\n  }\n"])), function (_a) {
-    var color = _a.color;
-    return color;
+  var color = _a.color;
+  return color;
 }, function (_a) {
-    var lineHeight = _a.lineHeight;
-    return lineHeight;
+  var lineHeight = _a.lineHeight;
+  return lineHeight;
 });
 function Description(_a) {
-    var text = _a.text, color = _a.color, textLabelProps = __rest(_a, ["text", "color"]);
-    return ((0, jsx_runtime_1.jsx)(S_DescriptionStyleWrapper, __assign({ "x-dlayout-item-element-name": "Description", color: color }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_TextLabel, __assign({ text: text, colorTheme: "sysTextSecondary" }, textLabelProps)) })));
+  var text = _a.text,
+    color = _a.color,
+    textLabelProps = __rest(_a, ["text", "color"]);
+  return (0, jsx_runtime_1.jsx)(S_DescriptionStyleWrapper, __assign({
+    "x-dlayout-item-element-name": "Description",
+    color: color
+  }, {
+    children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_TextLabel, __assign({
+      text: text,
+      colorTheme: "sysTextSecondary"
+    }, textLabelProps))
+  }));
 }
 var S_DescriptionStyleWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  & > div {\n    color: ", ";\n    width: 100%;\n  }\n"], ["\n  & > div {\n    color: ", ";\n    width: 100%;\n  }\n"])), function (_a) {
-    var color = _a.color;
-    return color;
+  var color = _a.color;
+  return color;
 });
 function Image(_a) {
-    var imageViewProps = __rest(_a, []);
-    return (0, jsx_runtime_1.jsx)(pdsOriginal_1.ImageView, __assign({ "x-dlayout-item-element-name": "Image", scaleType: "cover" }, imageViewProps));
+  var imageViewProps = __rest(_a, []);
+  return (0, jsx_runtime_1.jsx)(pdsOriginal_1.ImageView, __assign({
+    "x-dlayout-item-element-name": "Image",
+    scaleType: "cover"
+  }, imageViewProps));
 }
 function Button(_a) {
-    var buttonType = _a.buttonType, backgroundColor = _a.backgroundColor, textColor = _a.textColor, text = _a.text, _b = _a.linkType, linkType = _b === void 0 ? 'NONE' : _b, _c = _a.src, src = _c === void 0 ? '' : _c, _d = _a.linkMethod, linkMethod = _d === void 0 ? 'CLICK_BUTTON_IN_ITEM' : _d, _e = _a.state, state = _e === void 0 ? 'normal' : _e, borderColor = _a.borderColor;
-    var _f = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), mode = _f.mode, isPreview = _f.isPreview, navigationHandler = _f.navigationHandler;
-    var handleClickButton = function (e) {
-        if (isPreview !== null && isPreview !== void 0 ? isPreview : mode === 'PREVIEW')
-            return;
-        e.preventDefault();
-        e.stopPropagation();
-        typeof navigationHandler === 'function' && navigationHandler(linkType, src);
-    };
-    if (!src || linkMethod !== 'CLICK_BUTTON_IN_ITEM')
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
-    switch (buttonType) {
-        case 'A':
-            return ((0, jsx_runtime_1.jsx)(S_MainButtonBox, __assign({ "x-dlayout-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 0, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }) })));
-        case 'B':
-            return ((0, jsx_runtime_1.jsx)(S_MainButtonBox, __assign({ "x-dlayout-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 6, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }) })));
-        case 'C':
-            return ((0, jsx_runtime_1.jsx)(S_MainButtonBox, __assign({ "x-dlayout-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 14, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }) })));
-        case 'D':
-            return ((0, jsx_runtime_1.jsx)(S_MainButtonBox, __assign({ "x-dlayout-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 24, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }) })));
-        case 'E':
-            return ((0, jsx_runtime_1.jsx)(S_MainButtonBox, __assign({ "x-dlayout-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 0, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }) })));
-        case 'F':
-            return ((0, jsx_runtime_1.jsx)(S_MainButtonBox, __assign({ "x-dlayout-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 6, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }) })));
-        case 'G':
-            return ((0, jsx_runtime_1.jsx)(S_MainButtonBox, __assign({ "x-dlayout-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 14, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }) })));
-        case 'H':
-            return ((0, jsx_runtime_1.jsx)(S_MainButtonBox, __assign({ "x-dlayout-item-element-name": "Button", backgroundColor: backgroundColor, color: textColor, radius: 24, borderWidth: 2, borderColor: borderColor, state: state, type: buttonType }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, { text: text || 'BUTTON', state: state, onClick: handleClickButton }) })));
-        case 'I':
-            return ((0, jsx_runtime_1.jsx)(S_TextButtonBox, __assign({ color: textColor, state: state }, { children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_TextButton, { text: text || 'BUTTON', onClick: handleClickButton, state: state }) })));
-        default:
-            return (0, jsx_runtime_1.jsx)("button", __assign({ type: "button" }, { children: "wrong type" }));
-    }
+  var buttonType = _a.buttonType,
+    backgroundColor = _a.backgroundColor,
+    textColor = _a.textColor,
+    text = _a.text,
+    _b = _a.linkType,
+    linkType = _b === void 0 ? 'NONE' : _b,
+    _c = _a.src,
+    src = _c === void 0 ? '' : _c,
+    _d = _a.linkMethod,
+    linkMethod = _d === void 0 ? 'CLICK_BUTTON_IN_ITEM' : _d,
+    _e = _a.state,
+    state = _e === void 0 ? 'normal' : _e,
+    borderColor = _a.borderColor;
+  var _f = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext),
+    mode = _f.mode,
+    isPreview = _f.isPreview,
+    navigationHandler = _f.navigationHandler;
+  var handleClickButton = function (e) {
+    if (isPreview !== null && isPreview !== void 0 ? isPreview : mode === 'PREVIEW') return;
+    e.preventDefault();
+    e.stopPropagation();
+    typeof navigationHandler === 'function' && navigationHandler(linkType, src);
+  };
+  if (!src || linkMethod !== 'CLICK_BUTTON_IN_ITEM') return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+  switch (buttonType) {
+    case 'A':
+      return (0, jsx_runtime_1.jsx)(S_MainButtonBox, __assign({
+        "x-dlayout-item-element-name": "Button",
+        backgroundColor: backgroundColor,
+        color: textColor,
+        radius: 0,
+        state: state,
+        type: buttonType
+      }, {
+        children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, {
+          text: text || 'BUTTON',
+          state: state,
+          onClick: handleClickButton
+        })
+      }));
+    case 'B':
+      return (0, jsx_runtime_1.jsx)(S_MainButtonBox, __assign({
+        "x-dlayout-item-element-name": "Button",
+        backgroundColor: backgroundColor,
+        color: textColor,
+        radius: 6,
+        state: state,
+        type: buttonType
+      }, {
+        children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, {
+          text: text || 'BUTTON',
+          state: state,
+          onClick: handleClickButton
+        })
+      }));
+    case 'C':
+      return (0, jsx_runtime_1.jsx)(S_MainButtonBox, __assign({
+        "x-dlayout-item-element-name": "Button",
+        backgroundColor: backgroundColor,
+        color: textColor,
+        radius: 14,
+        state: state,
+        type: buttonType
+      }, {
+        children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, {
+          text: text || 'BUTTON',
+          state: state,
+          onClick: handleClickButton
+        })
+      }));
+    case 'D':
+      return (0, jsx_runtime_1.jsx)(S_MainButtonBox, __assign({
+        "x-dlayout-item-element-name": "Button",
+        backgroundColor: backgroundColor,
+        color: textColor,
+        radius: 24,
+        state: state,
+        type: buttonType
+      }, {
+        children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, {
+          text: text || 'BUTTON',
+          state: state,
+          onClick: handleClickButton
+        })
+      }));
+    case 'E':
+      return (0, jsx_runtime_1.jsx)(S_MainButtonBox, __assign({
+        "x-dlayout-item-element-name": "Button",
+        backgroundColor: backgroundColor,
+        color: textColor,
+        radius: 0,
+        borderWidth: 2,
+        borderColor: borderColor,
+        state: state,
+        type: buttonType
+      }, {
+        children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, {
+          text: text || 'BUTTON',
+          state: state,
+          onClick: handleClickButton
+        })
+      }));
+    case 'F':
+      return (0, jsx_runtime_1.jsx)(S_MainButtonBox, __assign({
+        "x-dlayout-item-element-name": "Button",
+        backgroundColor: backgroundColor,
+        color: textColor,
+        radius: 6,
+        borderWidth: 2,
+        borderColor: borderColor,
+        state: state,
+        type: buttonType
+      }, {
+        children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, {
+          text: text || 'BUTTON',
+          state: state,
+          onClick: handleClickButton
+        })
+      }));
+    case 'G':
+      return (0, jsx_runtime_1.jsx)(S_MainButtonBox, __assign({
+        "x-dlayout-item-element-name": "Button",
+        backgroundColor: backgroundColor,
+        color: textColor,
+        radius: 14,
+        borderWidth: 2,
+        borderColor: borderColor,
+        state: state,
+        type: buttonType
+      }, {
+        children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, {
+          text: text || 'BUTTON',
+          state: state,
+          onClick: handleClickButton
+        })
+      }));
+    case 'H':
+      return (0, jsx_runtime_1.jsx)(S_MainButtonBox, __assign({
+        "x-dlayout-item-element-name": "Button",
+        backgroundColor: backgroundColor,
+        color: textColor,
+        radius: 24,
+        borderWidth: 2,
+        borderColor: borderColor,
+        state: state,
+        type: buttonType
+      }, {
+        children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_MainButton, {
+          text: text || 'BUTTON',
+          state: state,
+          onClick: handleClickButton
+        })
+      }));
+    case 'I':
+      return (0, jsx_runtime_1.jsx)(S_TextButtonBox, __assign({
+        color: textColor,
+        state: state
+      }, {
+        children: (0, jsx_runtime_1.jsx)(pdsOriginal_1.M_TextButton, {
+          text: text || 'BUTTON',
+          onClick: handleClickButton,
+          state: state
+        })
+      }));
+    default:
+      return (0, jsx_runtime_1.jsx)("button", __assign({
+        type: "button"
+      }, {
+        children: "wrong type"
+      }));
+  }
 }
 var S_MainButtonBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  & > button {\n    background-color: ", ";\n    border: ", ";\n    border-radius: ", ";\n\n    box-sizing: border-box;\n\n    & div {\n      color: ", ";\n    }\n  }\n"], ["\n  & > button {\n    background-color: ", ";\n    border: ", ";\n    border-radius: ", ";\n\n    box-sizing: border-box;\n\n    & div {\n      color: ", ";\n    }\n  }\n"])), function (_a) {
-    var theme = _a.theme, backgroundColor = _a.backgroundColor, state = _a.state;
-    if (backgroundColor && state === 'normal') {
-        return backgroundColor;
+  var theme = _a.theme,
+    backgroundColor = _a.backgroundColor,
+    state = _a.state;
+  if (backgroundColor && state === 'normal') {
+    return backgroundColor;
+  }
+  return theme.ui_cpnt_button_fill_base_disabled;
+}, function (_a) {
+  var borderWidth = _a.borderWidth,
+    borderColor = _a.borderColor,
+    state = _a.state,
+    type = _a.type,
+    theme = _a.theme;
+  if (type === 'E' || type === 'F' || type === 'G' || type === 'H') {
+    if (borderWidth && borderColor && state === 'normal') {
+      return "".concat(borderWidth, "px solid ").concat(borderColor);
     }
-    return theme.ui_cpnt_button_fill_base_disabled;
-}, function (_a) {
-    var borderWidth = _a.borderWidth, borderColor = _a.borderColor, state = _a.state, type = _a.type, theme = _a.theme;
-    if (type === 'E' || type === 'F' || type === 'G' || type === 'H') {
-        if (borderWidth && borderColor && state === 'normal') {
-            return "".concat(borderWidth, "px solid ").concat(borderColor);
-        }
-        if (borderWidth && state === 'disabled') {
-            return "".concat(borderWidth, "px solid ").concat(theme.ui_cpnt_button_line_border_disabled);
-        }
+    if (borderWidth && state === 'disabled') {
+      return "".concat(borderWidth, "px solid ").concat(theme.ui_cpnt_button_line_border_disabled);
     }
-    return 'none';
+  }
+  return 'none';
 }, function (_a) {
-    var radius = _a.radius;
-    return "".concat(radius, "px");
+  var radius = _a.radius;
+  return "".concat(radius, "px");
 }, function (_a) {
-    var color = _a.color, state = _a.state, theme = _a.theme;
-    if (state === 'normal') {
-        return color;
-    }
-    return theme.ui_cpnt_textlabel_sys_tertiary;
+  var color = _a.color,
+    state = _a.state,
+    theme = _a.theme;
+  if (state === 'normal') {
+    return color;
+  }
+  return theme.ui_cpnt_textlabel_sys_tertiary;
 });
 var S_TextButtonBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  & > button {\n    background: none;\n    box-sizing: border-box;\n\n    & div {\n      color: ", ";\n    }\n\n    &:hover:enabled {\n      background: none;\n    }\n\n    &:active:enabled {\n      background: none;\n    }\n  }\n"], ["\n  & > button {\n    background: none;\n    box-sizing: border-box;\n\n    & div {\n      color: ", ";\n    }\n\n    &:hover:enabled {\n      background: none;\n    }\n\n    &:active:enabled {\n      background: none;\n    }\n  }\n"])), function (_a) {
-    var color = _a.color, state = _a.state, theme = _a.theme;
-    if (state === 'normal') {
-        return color;
-    }
-    return theme.ui_cpnt_textlabel_sys_tertiary;
+  var color = _a.color,
+    state = _a.state,
+    theme = _a.theme;
+  if (state === 'normal') {
+    return color;
+  }
+  return theme.ui_cpnt_textlabel_sys_tertiary;
 });
 function HTMLReader(_a) {
-    var data = _a.data, _b = _a.styleTheme, styleTheme = _b === void 0 ? 'body2Bold' : _b, _c = _a.colorTheme, colorTheme = _c === void 0 ? 'sysTextPrimary' : _c, _d = _a.textAlign, textAlign = _d === void 0 ? 'left' : _d, color = _a.color;
-    var _e = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext), mode = _e.mode, isPreview = _e.isPreview;
-    var contentRef = (0, react_1.useRef)(null);
-    /**
-      @when : data변경시
-      @expected : html을 출력합니다.
-      @clear : -
-    */
-    (0, react_1.useEffect)(function () {
-        if (data && contentRef && contentRef.current) {
-            var dom = new DOMParser();
-            var doc = dom.parseFromString(data, 'text/html');
-            contentRef.current.innerHTML = doc.documentElement.innerHTML;
-        }
-    }, [data]);
-    return ((0, jsx_runtime_1.jsx)(S_Content, { ref: contentRef, styleTheme: styleTheme, colorTheme: colorTheme, color: color, textAlign: textAlign, isPreview: isPreview !== null && isPreview !== void 0 ? isPreview : mode === 'PREVIEW' }));
+  var data = _a.data,
+    _b = _a.styleTheme,
+    styleTheme = _b === void 0 ? 'body2Bold' : _b,
+    _c = _a.colorTheme,
+    colorTheme = _c === void 0 ? 'sysTextPrimary' : _c,
+    _d = _a.textAlign,
+    textAlign = _d === void 0 ? 'left' : _d,
+    color = _a.color;
+  var _e = (0, react_1.useContext)(dynamicLayoutContext_1.dynamicLayoutContext),
+    mode = _e.mode,
+    isPreview = _e.isPreview;
+  var contentRef = (0, react_1.useRef)(null);
+  /**
+    @when : data변경시
+    @expected : html을 출력합니다.
+    @clear : -
+  */
+  (0, react_1.useEffect)(function () {
+    if (data && contentRef && contentRef.current) {
+      var dom = new DOMParser();
+      var doc = dom.parseFromString(data, 'text/html');
+      contentRef.current.innerHTML = doc.documentElement.innerHTML;
+    }
+  }, [data]);
+  return (0, jsx_runtime_1.jsx)(S_Content, {
+    ref: contentRef,
+    styleTheme: styleTheme,
+    colorTheme: colorTheme,
+    color: color,
+    textAlign: textAlign,
+    isPreview: isPreview !== null && isPreview !== void 0 ? isPreview : mode === 'PREVIEW'
+  });
 }
 var S_Content = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: ", ";\n  line-height: 1.5;\n  text-align: ", ";\n  white-space: pre-wrap;\n  width: 100%;\n  word-break: break-word;\n\n  ", "\n\n  & pre {\n    white-space: pre-wrap;\n  }\n\n  div,\n  p {\n    overflow: hidden;\n  }\n\n  a {\n    color: ", ";\n  }\n\n  img {\n    max-width: 100%;\n    height: auto;\n  }\n\n  figure {\n    margin: 0;\n    max-width: 100%;\n\n    img {\n      max-width: 100%;\n      height: auto;\n    }\n  }\n\n  blockquote {\n    border-left: 4px solid ", ";\n    margin: 4px;\n    padding: 4px;\n\n    p {\n      font-style: oblique;\n      margin: 0;\n    }\n  }\n\n  iframe {\n    border: none;\n  }\n\n  ", ";\n\n  ", ";\n\n  ", "\n"], ["\n  color: ", ";\n  line-height: 1.5;\n  text-align: ", ";\n  white-space: pre-wrap;\n  width: 100%;\n  word-break: break-word;\n\n  ", "\n\n  & pre {\n    white-space: pre-wrap;\n  }\n\n  div,\n  p {\n    overflow: hidden;\n  }\n\n  a {\n    color: ", ";\n  }\n\n  img {\n    max-width: 100%;\n    height: auto;\n  }\n\n  figure {\n    margin: 0;\n    max-width: 100%;\n\n    img {\n      max-width: 100%;\n      height: auto;\n    }\n  }\n\n  blockquote {\n    border-left: 4px solid ", ";\n    margin: 4px;\n    padding: 4px;\n\n    p {\n      font-style: oblique;\n      margin: 0;\n    }\n  }\n\n  iframe {\n    border: none;\n  }\n\n  ", ";\n\n  ", ";\n\n  ", "\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_temp_grey_01;
-}, function (_a) {
-    var textAlign = _a.textAlign;
-    return textAlign;
-}, function (_a) {
-    var isPreview = _a.isPreview;
-    return isPreview && 'pointer-events: none;';
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_papp_post_notice_link;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_temp_grey_03;
-}, function (_a) {
-    var styleTheme = _a.styleTheme;
-    return styleTheme &&
-        {
-            displayBold: displayBold,
-            headingBold: headingBold,
-            leadParaBold: leadParaBold,
-            leadParaRegular: leadParaRegular,
-            subTitleBold: subTitleBold,
-            subTitleRegular: subTitleRegular,
-            body1Bold: body1Bold,
-            body1Regular: body1Regular,
-            body2Bold: body2Bold,
-            body2Regular: body2Regular,
-            caption1Regular: caption1Regular,
-            caption1Bold: caption1Bold,
-            caption2Regular: caption2Regular,
-            caption2Bold: caption2Bold,
-            form1Regular: form1Regular,
-            form2Regular: form2Regular,
-            blog1Regular: blog1Regular
-        }[styleTheme];
-}, function (_a) {
-    var colorTheme = _a.colorTheme;
-    return colorTheme &&
-        {
-            sysTextPrimary: sysTextPrimary,
-            sysTextSecondary: sysTextSecondary,
-            sysTextTertiary: sysTextTertiary,
-            sysTextWhite: sysTextWhite,
-            sysTextError: sysTextError,
-            sysTextWarning: sysTextWarning,
-            sysTextBrandPrimary: sysTextBrandPrimary,
-            sysTextBrandSeconVariant: sysTextBrandSeconVariant,
-            usrTextBrandPrimary: usrTextBrandPrimary,
-            usrTextBrandSeconVariant: usrTextBrandSeconVariant,
-            usrTextBrandOnPrimary: usrTextBrandOnPrimary
-        }[colorTheme];
-}, function (_a) {
-    var color = _a.color;
-    return color && "color: ".concat(color, ";");
+  var theme = _a.theme;
+  return theme.ui_temp_grey_01;
+}, function (_a) {
+  var textAlign = _a.textAlign;
+  return textAlign;
+}, function (_a) {
+  var isPreview = _a.isPreview;
+  return isPreview && 'pointer-events: none;';
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.ui_papp_post_notice_link;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.ui_temp_grey_03;
+}, function (_a) {
+  var styleTheme = _a.styleTheme;
+  return styleTheme && {
+    displayBold: displayBold,
+    headingBold: headingBold,
+    leadParaBold: leadParaBold,
+    leadParaRegular: leadParaRegular,
+    subTitleBold: subTitleBold,
+    subTitleRegular: subTitleRegular,
+    body1Bold: body1Bold,
+    body1Regular: body1Regular,
+    body2Bold: body2Bold,
+    body2Regular: body2Regular,
+    caption1Regular: caption1Regular,
+    caption1Bold: caption1Bold,
+    caption2Regular: caption2Regular,
+    caption2Bold: caption2Bold,
+    form1Regular: form1Regular,
+    form2Regular: form2Regular,
+    blog1Regular: blog1Regular
+  }[styleTheme];
+}, function (_a) {
+  var colorTheme = _a.colorTheme;
+  return colorTheme && {
+    sysTextPrimary: sysTextPrimary,
+    sysTextSecondary: sysTextSecondary,
+    sysTextTertiary: sysTextTertiary,
+    sysTextWhite: sysTextWhite,
+    sysTextError: sysTextError,
+    sysTextWarning: sysTextWarning,
+    sysTextBrandPrimary: sysTextBrandPrimary,
+    sysTextBrandSeconVariant: sysTextBrandSeconVariant,
+    usrTextBrandPrimary: usrTextBrandPrimary,
+    usrTextBrandSeconVariant: usrTextBrandSeconVariant,
+    usrTextBrandOnPrimary: usrTextBrandOnPrimary
+  }[colorTheme];
+}, function (_a) {
+  var color = _a.color;
+  return color && "color: ".concat(color, ";");
 });
 var displayBold = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.mobileFontSize.displayHeading;
+  var theme = _a.theme;
+  return theme.mobileFontSize.displayHeading;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.fontWeight.bold;
+  var theme = _a.theme;
+  return theme.fontWeight.bold;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.mobileLineHeight.displayHeading;
+  var theme = _a.theme;
+  return theme.mobileLineHeight.displayHeading;
 });
 var headingBold = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.mobileFontSize.heading;
+  var theme = _a.theme;
+  return theme.mobileFontSize.heading;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.fontWeight.bold;
+  var theme = _a.theme;
+  return theme.fontWeight.bold;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.mobileLineHeight.heading;
+  var theme = _a.theme;
+  return theme.mobileLineHeight.heading;
 });
 var leadParaBold = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.mobileFontSize.leadParagraph;
+  var theme = _a.theme;
+  return theme.mobileFontSize.leadParagraph;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.fontWeight.bold;
+  var theme = _a.theme;
+  return theme.fontWeight.bold;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.mobileLineHeight.leadParagraph;
+  var theme = _a.theme;
+  return theme.mobileLineHeight.leadParagraph;
 });
 var leadParaRegular = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.mobileFontSize.leadParagraph;
+  var theme = _a.theme;
+  return theme.mobileFontSize.leadParagraph;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.fontWeight.normal;
+  var theme = _a.theme;
+  return theme.fontWeight.normal;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.mobileLineHeight.leadParagraph;
+  var theme = _a.theme;
+  return theme.mobileLineHeight.leadParagraph;
 });
 var subTitleBold = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.mobileFontSize.subtitle;
+  var theme = _a.theme;
+  return theme.mobileFontSize.subtitle;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.fontWeight.bold;
+  var theme = _a.theme;
+  return theme.fontWeight.bold;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.mobileLineHeight.subtitle;
+  var theme = _a.theme;
+  return theme.mobileLineHeight.subtitle;
 });
 var subTitleRegular = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.mobileFontSize.subtitle;
+  var theme = _a.theme;
+  return theme.mobileFontSize.subtitle;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.fontWeight.normal;
+  var theme = _a.theme;
+  return theme.fontWeight.normal;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.mobileLineHeight.subtitle;
+  var theme = _a.theme;
+  return theme.mobileLineHeight.subtitle;
 });
 var body1Bold = (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.mobileFontSize.body1;
+  var theme = _a.theme;
+  return theme.mobileFontSize.body1;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.fontWeight.bold;
+  var theme = _a.theme;
+  return theme.fontWeight.bold;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.mobileLineHeight.body1;
+  var theme = _a.theme;
+  return theme.mobileLineHeight.body1;
 });
 var body1Regular = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.mobileFontSize.body1;
+  var theme = _a.theme;
+  return theme.mobileFontSize.body1;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.fontWeight.normal;
+  var theme = _a.theme;
+  return theme.fontWeight.normal;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.mobileLineHeight.body1;
+  var theme = _a.theme;
+  return theme.mobileLineHeight.body1;
 });
 var body2Bold = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.mobileFontSize.body2;
+  var theme = _a.theme;
+  return theme.mobileFontSize.body2;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.fontWeight.bold;
+  var theme = _a.theme;
+  return theme.fontWeight.bold;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.mobileLineHeight.body2;
+  var theme = _a.theme;
+  return theme.mobileLineHeight.body2;
 });
 var body2Regular = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.mobileFontSize.body2;
+  var theme = _a.theme;
+  return theme.mobileFontSize.body2;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.fontWeight.normal;
+  var theme = _a.theme;
+  return theme.fontWeight.normal;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.mobileLineHeight.body2;
+  var theme = _a.theme;
+  return theme.mobileLineHeight.body2;
 });
 var caption1Bold = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.mobileFontSize.caption1;
+  var theme = _a.theme;
+  return theme.mobileFontSize.caption1;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.fontWeight.bold;
+  var theme = _a.theme;
+  return theme.fontWeight.bold;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.mobileLineHeight.caption1;
+  var theme = _a.theme;
+  return theme.mobileLineHeight.caption1;
 });
 var caption1Regular = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.mobileFontSize.caption1;
+  var theme = _a.theme;
+  return theme.mobileFontSize.caption1;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.fontWeight.normal;
+  var theme = _a.theme;
+  return theme.fontWeight.normal;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.mobileLineHeight.caption1;
+  var theme = _a.theme;
+  return theme.mobileLineHeight.caption1;
 });
 var caption2Bold = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.mobileFontSize.caption2;
+  var theme = _a.theme;
+  return theme.mobileFontSize.caption2;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.fontWeight.bold;
+  var theme = _a.theme;
+  return theme.fontWeight.bold;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.mobileLineHeight.caption2;
+  var theme = _a.theme;
+  return theme.mobileLineHeight.caption2;
 });
 var caption2Regular = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.mobileFontSize.caption2;
+  var theme = _a.theme;
+  return theme.mobileFontSize.caption2;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.fontWeight.normal;
+  var theme = _a.theme;
+  return theme.fontWeight.normal;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.mobileLineHeight.caption2;
+  var theme = _a.theme;
+  return theme.mobileLineHeight.caption2;
 });
 var form1Regular = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.mobileFontSize.form1;
+  var theme = _a.theme;
+  return theme.mobileFontSize.form1;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.fontWeight.normal;
+  var theme = _a.theme;
+  return theme.fontWeight.normal;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.mobileLineHeight.form1;
+  var theme = _a.theme;
+  return theme.mobileLineHeight.form1;
 });
 var form2Regular = (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.mobileFontSize.form2;
+  var theme = _a.theme;
+  return theme.mobileFontSize.form2;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.fontWeight.normal;
+  var theme = _a.theme;
+  return theme.fontWeight.normal;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.mobileLineHeight.form2;
+  var theme = _a.theme;
+  return theme.mobileLineHeight.form2;
 });
 var blog1Regular = (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.mobileFontSize.blog1;
+  var theme = _a.theme;
+  return theme.mobileFontSize.blog1;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.fontWeight.normal;
+  var theme = _a.theme;
+  return theme.fontWeight.normal;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.mobileLineHeight.blog1;
+  var theme = _a.theme;
+  return theme.mobileLineHeight.blog1;
 });
 var sysTextPrimary = (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_textlabel_sys_primary;
+  var theme = _a.theme;
+  return theme.ui_cpnt_textlabel_sys_primary;
 });
 var sysTextSecondary = (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_textlabel_sys_secondary;
+  var theme = _a.theme;
+  return theme.ui_cpnt_textlabel_sys_secondary;
 });
 var sysTextTertiary = (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_textlabel_sys_tertiary;
+  var theme = _a.theme;
+  return theme.ui_cpnt_textlabel_sys_tertiary;
 });
 var sysTextWhite = (0, styled_components_1.css)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_textlabel_sys_white;
+  var theme = _a.theme;
+  return theme.ui_cpnt_textlabel_sys_white;
 });
 var sysTextError = (0, styled_components_1.css)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_textlabel_sys_error;
+  var theme = _a.theme;
+  return theme.ui_cpnt_textlabel_sys_error;
 });
 var sysTextWarning = (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_textlabel_sys_warning;
+  var theme = _a.theme;
+  return theme.ui_cpnt_textlabel_sys_warning;
 });
 var sysTextBrandPrimary = (0, styled_components_1.css)(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_textlabel_sys_brandprimary;
+  var theme = _a.theme;
+  return theme.ui_cpnt_textlabel_sys_brandprimary;
 });
 var sysTextBrandSeconVariant = (0, styled_components_1.css)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_textlabel_sys_brandseconvariant;
+  var theme = _a.theme;
+  return theme.ui_cpnt_textlabel_sys_brandseconvariant;
 });
 var usrTextBrandPrimary = (0, styled_components_1.css)(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_textlabel_usr_brandprimary;
+  var theme = _a.theme;
+  return theme.ui_cpnt_textlabel_usr_brandprimary;
 });
 var usrTextBrandSeconVariant = (0, styled_components_1.css)(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_textlabel_usr_brandseconvariant;
+  var theme = _a.theme;
+  return theme.ui_cpnt_textlabel_usr_brandseconvariant;
 });
 var usrTextBrandOnPrimary = (0, styled_components_1.css)(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_textlabel_usr_brandonprimary;
+  var theme = _a.theme;
+  return theme.ui_cpnt_textlabel_usr_brandonprimary;
 });
 Item.Title = Title;
 Item.Description = Description;
@@ -459,4 +667,4 @@ Item.Image = Image;
 Item.HTMLReader = HTMLReader;
 Item.Button = Button;
 exports.default = Item;
-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, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34;
+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, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34;