techsbcn-storybook 0.23.6 → 0.24.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/dist/components/fields/TextSimpleComponent/TextSimpleComponent.d.ts +3 -1
  2. package/dist/components/tables/SimpleTableComponent/SimpleTableComponent.d.ts +2 -1
  3. package/dist/components/tables/TableComponent/TableComponent.d.ts +2 -1
  4. package/dist/stories/Fields/TextSimpleComponent.stories.d.ts +4 -0
  5. package/dist/techsbcn-storybook.cjs.development.js +8 -8
  6. package/dist/techsbcn-storybook.cjs.development.js.map +1 -1
  7. package/dist/techsbcn-storybook.cjs.production.min.js +1 -1
  8. package/dist/techsbcn-storybook.cjs.production.min.js.map +1 -1
  9. package/dist/techsbcn-storybook.esm.js +8 -8
  10. package/dist/techsbcn-storybook.esm.js.map +1 -1
  11. package/package.json +1 -1
  12. package/src/components/fields/TextSimpleComponent/TextSimpleComponent.scss +19 -3
  13. package/src/components/fields/TextSimpleComponent/TextSimpleComponent.tsx +15 -7
  14. package/src/components/tables/SimpleTableComponent/SimpleTableComponent.scss +1 -1
  15. package/src/components/tables/SimpleTableComponent/SimpleTableComponent.tsx +6 -3
  16. package/src/components/tables/TableComponent/TableComponent.tsx +6 -3
  17. package/src/stories/Fields/Fields.stories.tsx +43 -0
  18. package/src/stories/Fields/TextFieldComponent.stories.tsx +14 -1
  19. package/src/stories/Fields/TextSimpleComponent.stories.tsx +58 -0
package/dist/components/fields/TextSimpleComponent/TextSimpleComponent.d.ts CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import { BoxProps } from '@mui/material/';
3
3
  import './TextSimpleComponent.scss';
4
4
  interface TextSimpleComponentProps {
5
- label?: any;
5
+ label?: any | string;
6
6
  skeletonLabel?: boolean;
7
7
  isFormLabel?: boolean;
8
8
  value?: any;
@@ -21,6 +21,8 @@ interface TextSimpleComponentProps {
21
21
  valueBoxProps?: BoxProps;
22
22
  labelBoxProps?: BoxProps;
23
23
  helperBoxProps?: BoxProps;
24
+ labelMargin?: boolean;
25
+ valueInCenter?: boolean;
24
26
  }
25
27
  interface SkeletonProps {
26
28
  useSkeleton: boolean;
package/dist/components/tables/SimpleTableComponent/SimpleTableComponent.d.ts CHANGED
@@ -43,7 +43,8 @@ interface ColumnProps {
43
43
  isCheck?: boolean;
44
44
  isPrice?: boolean;
45
45
  priceFormat?: {
46
- currency?: string;
46
+ currencyStart?: string;
47
+ currencyEnd?: string;
47
48
  };
48
49
  isImage?: {
49
50
  isUrl?: boolean;
package/dist/components/tables/TableComponent/TableComponent.d.ts CHANGED
@@ -45,7 +45,8 @@ interface ColumnProps {
45
45
  noSort?: boolean;
46
46
  isPrice?: boolean;
47
47
  priceFormat?: {
48
- currency?: string;
48
+ currencyStart?: string;
49
+ currencyEnd?: string;
49
50
  };
50
51
  isImage?: {
51
52
  isUrl?: boolean;
package/dist/stories/Fields/TextSimpleComponent.stories.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { Meta, Story } from '@storybook/react';
2
+ declare const meta: Meta;
3
+ export default meta;
4
+ export declare const TextSimpleCustom: Story<import("@storybook/react").Args>;
package/dist/techsbcn-storybook.cjs.development.js CHANGED
@@ -541,7 +541,7 @@ var TableComponent = function TableComponent(props) {
541
541
  };
542
542
 
543
543
  var formatValue = function formatValue(value, column) {
544
- var _column$enumColumn;
544
+ var _column$enumColumn, _column$priceFormat$c, _column$priceFormat, _column$priceFormat2, _column$priceFormat$c2, _column$priceFormat3;
545
545
 
546
546
  if ((_column$enumColumn = column.enumColumn) != null && _column$enumColumn.isEnum) {
547
547
  var _column$enumColumn2, _column$enumColumn9;
@@ -581,7 +581,7 @@ var TableComponent = function TableComponent(props) {
581
581
  }
582
582
 
583
583
  if (column.isDate && value) return dayjs.utc(value).tz(dayjs.tz.guess()).format('L');
584
- if (column.isPrice && value) return Number(value).toFixed(2).replace('.', ',').toLocaleString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') + " " + props.values.SYMBOL_EURO;
584
+ if (column.isPrice && value) return "" + ((_column$priceFormat$c = (_column$priceFormat = column.priceFormat) == null ? void 0 : _column$priceFormat.currencyStart) != null ? _column$priceFormat$c : '') + Number(value).toFixed(2).replace('.', ',').toLocaleString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') + " " + (!((_column$priceFormat2 = column.priceFormat) != null && _column$priceFormat2.currencyStart) ? (_column$priceFormat$c2 = (_column$priceFormat3 = column.priceFormat) == null ? void 0 : _column$priceFormat3.currencyEnd) != null ? _column$priceFormat$c2 : props.values.SYMBOL_EURO : '');
585
585
 
586
586
  if (column.isImage && value) {
587
587
  if (column.isImage.isUrl) {
@@ -886,7 +886,7 @@ TableComponent.defaultProps = {
886
886
  showTotalCount: true
887
887
  };
888
888
 
889
- var css_248z$6 = ".table-simple-component .paper-container {\n box-shadow: none;\n background-color: transparent !important;\n}\n.table-simple-component .paper-container .checkbox-cell .MuiCheckbox-root {\n padding: 0 !important;\n}\n.table-simple-component .paper-container .checkbox-cell .MuiCheckbox-root:hover {\n background-color: transparent !important;\n}\n.table-simple-component .paper-container .checkbox-cell .Mui-checked {\n color: rgba(0, 0, 0, 0.54) !important;\n}\n.table-simple-component .paper-container .checkbox-cell .MuiCheckbox-indeterminate {\n color: #212529 !important;\n}\n.table-simple-component .paper-container .table-container.with-scroll {\n max-height: 68vh;\n}\n.table-simple-component .paper-container .table-container .table-column {\n font-weight: bold;\n font-size: calc(9pt + (11 - 9) * calc(100vw - 300px)/1300) !important;\n padding: 10px !important;\n border-top: 1px solid #e0e0e0;\n border-right: 1px solid #e0e0e0;\n border-bottom: 2px solid #e0e0e0;\n}\n.table-simple-component .paper-container .table-container .table-column .table-header-cell {\n color: black;\n font-weight: bold;\n padding: 0px 10px 0px 10px !important;\n}\n.table-simple-component .paper-container .table-container.table-simple {\n border-bottom: 1px solid black;\n}\n.table-simple-component .paper-container .table-container.table-simple .table-column:first-child {\n border-radius: 5px 0 0 5px;\n}\n.table-simple-component .paper-container .table-container.table-simple .table-column:last-child {\n border-right: none !important;\n border-radius: 0 5px 5px 0;\n}\n.table-simple-component .paper-container .table-container.table-bordered .table-column {\n border-bottom: 1px solid #eaeaea !important;\n border-top: 1px solid #eaeaea !important;\n border-right: 1px solid #eaeaea !important;\n color: #7a7a7a !important;\n}\n.table-simple-component .paper-container .table-container.table-bordered .table-column .table-header-cell {\n color: #7a7a7a !important;\n}\n.table-simple-component .paper-container .table-container.table-bordered .table-column:first-child {\n border-left: 1px solid #eaeaea;\n}\n.table-simple-component .paper-container .table-container.table-bordered .table-rows .table-cell {\n color: #505050 !important;\n border-right: 1px solid #eaeaea;\n}\n.table-simple-component .paper-container .table-container.table-bordered .table-rows .table-cell:first-child {\n border-left: 1px solid #eaeaea;\n}\n.table-simple-component .paper-container .table-container .table-rows.table-striped td {\n background-color: rgba(255, 255, 255, 0.95);\n}\n.table-simple-component .paper-container .table-container .table-rows.row-click {\n cursor: pointer;\n}\n.table-simple-component .paper-container .table-container .table-rows.row-click:hover {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.table-simple-component .paper-container .table-container .table-rows.row-click:hover.table-striped {\n background-color: transparent !important;\n}\n.table-simple-component .paper-container .table-container .table-rows.row-click:hover.table-striped td {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.table-simple-component .paper-container .table-container .table-rows.Mui-selected {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.table-simple-component .paper-container .table-container .table-rows.Mui-selected.table-striped {\n background-color: transparent !important;\n}\n.table-simple-component .paper-container .table-container .table-rows.Mui-selected.table-striped td {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.table-simple-component .paper-container .table-container .table-rows .Mui-selected {\n background-color: transparent !important;\n}\n.table-simple-component .paper-container .table-container .table-rows .MuiTableCell-root {\n padding: 6px !important;\n overflow: hidden;\n}\n.table-simple-component .paper-container .table-container .table-rows .img-table {\n width: 100%;\n height: 110px;\n}\n.table-simple-component .paper-container .table-container .table-rows .img-table img {\n object-fit: contain;\n}\n.table-simple-component .paper-container .table-container .table-rows .actions {\n float: right;\n}\n.table-simple-component .paper-container .table-container .table-rows .btn-action {\n color: rgba(0, 0, 0, 0.54);\n display: inline-block;\n text-decoration: none;\n font-size: 1.6em !important;\n padding: 0px 7px;\n cursor: pointer;\n}\n.table-simple-component .paper-container .table-container .table-rows .format-value {\n font-size: calc(9pt + (11 - 9) * calc(100vw - 300px)/1300);\n}\n.table-simple-component .paper-container .table-container .table-rows .format-value .MuiTypography-root {\n font-size: calc(9pt + (11 - 9) * calc(100vw - 300px)/1300);\n}\n.table-simple-component .paper-container .MuiTable-root.loading {\n opacity: 0.5;\n}\n.table-simple-component .paper-container .MuiTable-root.loading .MuiCircularProgress-root {\n width: 80px !important;\n height: 80px !important;\n position: absolute;\n left: 0;\n right: 0;\n top: 5px;\n margin: auto;\n color: grey;\n}\n@media (max-width: 992px) {\n .table-simple-component .paper-container .table-container {\n max-height: 60vh;\n border-top: 1px solid #cccccc;\n }\n .table-simple-component .paper-container .table-container .MuiTable-root {\n border-collapse: collapse !important;\n }\n .table-simple-component .paper-container .table-container .MuiTableHead-root {\n display: none !important;\n }\n .table-simple-component .paper-container .table-container .table-rows {\n border-bottom: 2px solid #cccccc;\n }\n .table-simple-component .paper-container .table-container .table-rows .MuiTableCell-root {\n width: auto;\n border-bottom: none !important;\n }\n .table-simple-component .paper-container .table-container .table-rows .MuiTableCell-root .label-cell {\n font-size: 1rem;\n vertical-align: top;\n width: 50%;\n height: auto;\n }\n .table-simple-component .paper-container .table-container .table-rows .MuiTableCell-root .label-cell + div {\n display: inline-block;\n }\n .table-simple-component .paper-container .table-container .table-rows .table-cell {\n display: block !important;\n }\n .table-simple-component .paper-container .table-container .table-rows .format-value {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n width: 50%;\n max-width: 299px;\n }\n}";
889
+ var css_248z$6 = ".table-simple-component .paper-container {\n box-shadow: none;\n background-color: transparent !important;\n}\n.table-simple-component .paper-container .checkbox-cell .MuiCheckbox-root {\n padding: 0 !important;\n}\n.table-simple-component .paper-container .checkbox-cell .MuiCheckbox-root:hover {\n background-color: transparent !important;\n}\n.table-simple-component .paper-container .checkbox-cell .Mui-checked {\n color: rgba(0, 0, 0, 0.54) !important;\n}\n.table-simple-component .paper-container .checkbox-cell .MuiCheckbox-indeterminate {\n color: #212529 !important;\n}\n.table-simple-component .paper-container .table-container.with-scroll {\n max-height: 68vh;\n}\n.table-simple-component .paper-container .table-container .table-column {\n font-weight: bold;\n font-size: calc(9pt + (11 - 9) * calc(100vw - 300px)/1300) !important;\n padding: 10px !important;\n border-top: 1px solid #e0e0e0;\n border-right: 1px solid #e0e0e0;\n border-bottom: 2px solid #e0e0e0;\n}\n.table-simple-component .paper-container .table-container .table-column .table-header-cell {\n color: black;\n font-weight: bold;\n padding: 0px 10px 0px 10px !important;\n}\n.table-simple-component .paper-container .table-container.table-simple {\n border-bottom: 1px solid black;\n}\n.table-simple-component .paper-container .table-container.table-simple .table-column:first-child {\n border-radius: 5px 0 0 5px;\n}\n.table-simple-component .paper-container .table-container.table-simple .table-column:last-child {\n border-right: none !important;\n border-radius: 0 5px 5px 0;\n}\n.table-simple-component .paper-container .table-container.table-bordered .table-column {\n border-bottom: 1px solid #eaeaea !important;\n border-top: 1px solid #eaeaea !important;\n border-right: 1px solid #eaeaea !important;\n color: #7a7a7a !important;\n}\n.table-simple-component .paper-container .table-container.table-bordered .table-column .table-header-cell {\n color: #7a7a7a !important;\n}\n.table-simple-component .paper-container .table-container.table-bordered .table-column:first-child {\n border-left: 1px solid #eaeaea;\n}\n.table-simple-component .paper-container .table-container.table-bordered .table-rows .table-cell {\n color: #505050 !important;\n border-right: 1px solid #eaeaea;\n}\n.table-simple-component .paper-container .table-container.table-bordered .table-rows .table-cell:first-child {\n border-left: 1px solid #eaeaea;\n}\n.table-simple-component .paper-container .table-container .table-rows.table-striped td {\n background-color: rgba(255, 255, 255, 0.95);\n}\n.table-simple-component .paper-container .table-container .table-rows.row-click {\n cursor: pointer;\n}\n.table-simple-component .paper-container .table-container .table-rows.row-click:hover {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.table-simple-component .paper-container .table-container .table-rows.row-click:hover.table-striped {\n background-color: transparent !important;\n}\n.table-simple-component .paper-container .table-container .table-rows.row-click:hover.table-striped td {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.table-simple-component .paper-container .table-container .table-rows.Mui-selected {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.table-simple-component .paper-container .table-container .table-rows.Mui-selected.table-striped {\n background-color: transparent !important;\n}\n.table-simple-component .paper-container .table-container .table-rows.Mui-selected.table-striped td {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.table-simple-component .paper-container .table-container .table-rows .Mui-selected {\n background-color: transparent !important;\n}\n.table-simple-component .paper-container .table-container .table-rows .MuiTableCell-root {\n padding: 6px;\n overflow: hidden;\n}\n.table-simple-component .paper-container .table-container .table-rows .img-table {\n width: 100%;\n height: 110px;\n}\n.table-simple-component .paper-container .table-container .table-rows .img-table img {\n object-fit: contain;\n}\n.table-simple-component .paper-container .table-container .table-rows .actions {\n float: right;\n}\n.table-simple-component .paper-container .table-container .table-rows .btn-action {\n color: rgba(0, 0, 0, 0.54);\n display: inline-block;\n text-decoration: none;\n font-size: 1.6em !important;\n padding: 0px 7px;\n cursor: pointer;\n}\n.table-simple-component .paper-container .table-container .table-rows .format-value {\n font-size: calc(9pt + (11 - 9) * calc(100vw - 300px)/1300);\n}\n.table-simple-component .paper-container .table-container .table-rows .format-value .MuiTypography-root {\n font-size: calc(9pt + (11 - 9) * calc(100vw - 300px)/1300);\n}\n.table-simple-component .paper-container .MuiTable-root.loading {\n opacity: 0.5;\n}\n.table-simple-component .paper-container .MuiTable-root.loading .MuiCircularProgress-root {\n width: 80px !important;\n height: 80px !important;\n position: absolute;\n left: 0;\n right: 0;\n top: 5px;\n margin: auto;\n color: grey;\n}\n@media (max-width: 992px) {\n .table-simple-component .paper-container .table-container {\n max-height: 60vh;\n border-top: 1px solid #cccccc;\n }\n .table-simple-component .paper-container .table-container .MuiTable-root {\n border-collapse: collapse !important;\n }\n .table-simple-component .paper-container .table-container .MuiTableHead-root {\n display: none !important;\n }\n .table-simple-component .paper-container .table-container .table-rows {\n border-bottom: 2px solid #cccccc;\n }\n .table-simple-component .paper-container .table-container .table-rows .MuiTableCell-root {\n width: auto;\n border-bottom: none !important;\n }\n .table-simple-component .paper-container .table-container .table-rows .MuiTableCell-root .label-cell {\n font-size: 1rem;\n vertical-align: top;\n width: 50%;\n height: auto;\n }\n .table-simple-component .paper-container .table-container .table-rows .MuiTableCell-root .label-cell + div {\n display: inline-block;\n }\n .table-simple-component .paper-container .table-container .table-rows .table-cell {\n display: block !important;\n }\n .table-simple-component .paper-container .table-container .table-rows .format-value {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n width: 50%;\n max-width: 299px;\n }\n}";
890
890
  styleInject(css_248z$6);
891
891
 
892
892
  var SimpleTableComponent = function SimpleTableComponent(props) {
@@ -948,7 +948,7 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
948
948
  };
949
949
 
950
950
  var formatValue = function formatValue(value, column) {
951
- var _column$enumColumn;
951
+ var _column$enumColumn, _column$priceFormat$c, _column$priceFormat, _column$priceFormat2, _column$priceFormat$c2, _column$priceFormat3;
952
952
 
953
953
  if ((_column$enumColumn = column.enumColumn) != null && _column$enumColumn.isEnum) {
954
954
  var _column$enumColumn2, _column$enumColumn9;
@@ -988,7 +988,7 @@ var SimpleTableComponent = function SimpleTableComponent(props) {
988
988
  }
989
989
 
990
990
  if (column.isDate && value) return dayjs.utc(value).tz(dayjs.tz.guess()).format('L');
991
- if (column.isPrice && value) return Number(value).toFixed(2).replace('.', ',').toLocaleString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') + " " + props.values.SYMBOL_EURO;
991
+ if (column.isPrice && value) return "" + ((_column$priceFormat$c = (_column$priceFormat = column.priceFormat) == null ? void 0 : _column$priceFormat.currencyStart) != null ? _column$priceFormat$c : '') + Number(value).toFixed(2).replace('.', ',').toLocaleString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') + " " + (!((_column$priceFormat2 = column.priceFormat) != null && _column$priceFormat2.currencyStart) ? (_column$priceFormat$c2 = (_column$priceFormat3 = column.priceFormat) == null ? void 0 : _column$priceFormat3.currencyEnd) != null ? _column$priceFormat$c2 : props.values.SYMBOL_EURO : '');
992
992
 
993
993
  if (column.isImage && value) {
994
994
  if (column.isImage.isUrl) {
@@ -1627,7 +1627,7 @@ ButtonComponent.defaultProps = {
1627
1627
  component: 'button'
1628
1628
  };
1629
1629
 
1630
- var css_248z$e = ".text-simple-component .MuiFormLabel-root {\n color: #666666;\n font-size: 1rem !important;\n transform: translate(0, 0.5px) scale(0.85);\n transform-origin: top left;\n text-overflow: initial !important;\n}\n.text-simple-component .MuiFormLabel-root + .text-simple-box {\n margin-top: 2px;\n}\n.text-simple-component .MuiFormLabel-root + .text-simple-box.no-border {\n margin-top: 16px !important;\n}\n.text-simple-component .MuiFormLabel-root + .text-simple-box.no-margin.no-border {\n margin-top: 7px !important;\n}\n.text-simple-component .text-simple-box.no-border {\n border: none !important;\n padding: 0 !important;\n}\n.text-simple-component .text-simple-box {\n color: #666666;\n font-size: 14px;\n border: 1px solid grey;\n border-radius: 3px !important;\n padding: 0.611rem 0.87rem;\n line-height: 1.4375em;\n letter-spacing: 0.00938em;\n}\n.text-simple-component .text-simple-box.icon-padding {\n padding: 0.49rem 0.87rem;\n}\n.text-simple-component .text-simple-box.end-icon-padding {\n padding: 0.177rem 0.87rem;\n}\n.text-simple-component .helper-text {\n font-size: 0.85rem !important;\n padding: 0 !important;\n margin-top: 3px;\n line-height: 1.66;\n color: #666666 !important;\n letter-spacing: 0.03333em;\n}\n.text-simple-component .has-error-border {\n border-color: #F24726 !important;\n}\n.text-simple-component .has-error {\n color: #F24726 !important;\n}";
1630
+ var css_248z$e = ".text-simple-component .MuiFormLabel-root {\n color: #666666;\n font-size: 1rem !important;\n transform: translate(0, 0.5px) scale(0.85);\n transform-origin: top left;\n text-overflow: initial !important;\n}\n.text-simple-component .MuiFormLabel-root + .text-simple-box {\n margin-top: 2px;\n}\n.text-simple-component .MuiFormLabel-root + .text-simple-box.no-margin.no-border {\n margin-top: 7px !important;\n}\n.text-simple-component .text-simple-box.in-center.label-margin {\n margin-top: 38px !important;\n}\n.text-simple-component .MuiFormLabel-root + .text-simple-box.in-center {\n margin-top: 15px !important;\n}\n.text-simple-component .text-simple-box.label-margin {\n margin-top: 25px !important;\n}\n.text-simple-component .text-simple-box.in-center {\n margin-top: 10px !important;\n}\n.text-simple-component .text-simple-box.no-border {\n border: none !important;\n padding: 0 !important;\n}\n.text-simple-component .text-simple-box {\n color: #666666;\n font-size: 14px;\n border: 1px solid grey;\n border-radius: 3px !important;\n padding: 0.611rem 0.87rem;\n line-height: 1.4375em;\n letter-spacing: 0.00938em;\n}\n.text-simple-component .text-simple-box.icon-padding {\n padding: 0.49rem 0.87rem;\n}\n.text-simple-component .text-simple-box.end-icon-padding {\n padding: 0.177rem 0.87rem;\n}\n.text-simple-component .helper-text {\n font-size: 0.85rem !important;\n padding: 0 !important;\n margin-top: 3px;\n line-height: 1.66;\n color: #666666 !important;\n letter-spacing: 0.03333em;\n}\n.text-simple-component .helper-text.no-border {\n margin-top: 12px;\n}\n.text-simple-component .has-error-border {\n border-color: #F24726 !important;\n}\n.text-simple-component .has-error {\n color: #F24726 !important;\n}";
1631
1631
  styleInject(css_248z$e);
1632
1632
 
1633
1633
  var TextSimpleComponent = function TextSimpleComponent(props) {
@@ -1660,7 +1660,7 @@ var TextSimpleComponent = function TextSimpleComponent(props) {
1660
1660
  }, props.labelBoxProps), props.label) : React__default.createElement(React__default.Fragment, null), React__default.createElement(_.Box, Object.assign({
1661
1661
  display: "" + (props.skeletonValue && props.skeletonValue.useSkeleton ? 'block' : props.startIcon || props.endIcon ? 'flex' : 'block'),
1662
1662
  alignItems: "center",
1663
- className: "text-simple-box " + ((_props$className = props.className) != null ? _props$className : '') + " " + (props.noMargin ? 'no-margin' : '') + " " + (props.noBorders || props.skeletonValue && props.skeletonValue.useSkeleton ? 'no-border' : '') + " " + (props.error ? 'has-error-border' : '') + " " + (props.startIcon ? 'icon-padding' : props.endIcon ? 'end-icon-padding' : ''),
1663
+ className: "text-simple-box " + ((_props$className = props.className) != null ? _props$className : '') + " " + (props.noMargin ? 'no-margin' : '') + " \n " + (props.labelMargin ? 'label-margin' : '') + " \n " + (props.valueInCenter ? 'in-center' : '') + " \n " + (props.noBorders || props.skeletonValue && props.skeletonValue.useSkeleton ? 'no-border' : '') + " " + (props.error ? 'has-error-border' : '') + " " + (props.startIcon ? 'icon-padding' : props.endIcon ? 'end-icon-padding' : ''),
1664
1664
  width: "" + (props.fullWidth ? 'auto' : 'fit-content')
1665
1665
  }, props.valueBoxProps), props.skeletonValue && props.skeletonValue.useSkeleton ? React__default.createElement(SkeletonCompleteDefault, Object.assign({}, props.skeletonValue)) : React__default.createElement(React__default.Fragment, null, props.startIcon && React__default.createElement(_.Box, {
1666
1666
  mr: 1,
@@ -1674,7 +1674,7 @@ var TextSimpleComponent = function TextSimpleComponent(props) {
1674
1674
  ml: "" + (props.fullWidth ? 'auto' : 1),
1675
1675
  display: 'flex'
1676
1676
  }, props.endIcon))), props.helperText && React__default.createElement(_.Box, Object.assign({
1677
- className: "helper-text " + (props.error ? 'has-error' : '')
1677
+ className: "helper-text " + (props.error ? 'has-error' : '') + " " + (props.noBorders || props.skeletonValue && props.skeletonValue.useSkeleton ? 'no-border' : '')
1678
1678
  }, props.helperBoxProps), props.skeletonValue && props.skeletonValue.useSkeleton ? React__default.createElement(_.Skeleton, {
1679
1679
  width: "15%",
1680
1680
  animation: "wave"