react-asc 23.1.0 → 23.2.0

package/components/Typography/Typography.d.ts

@@ -3,8 +3,10 @@ export interface IWrapperProps {
     as?: string;
     children: React.ReactNode;
     className?: string;
+    wrap?: boolean;
 }
 export interface ITypographyProps extends React.ComponentProps<"span"> {
     as?: string;
+    wrap?: boolean;
 }
-export declare const Typography: ({ children, as, ...rest }: ITypographyProps) => JSX.Element;
+export declare const Typography: ({ children, as, wrap, ...rest }: ITypographyProps) => JSX.Element;

package/index.es.js

@@ -242,8 +242,7 @@ const useConstructor = (callBack) => {
 };
 
 function useCssClasses(cssClasses) {
-    const cssClassName = (cssClasses === null || cssClasses === void 0 ? void 0 : cssClasses.filter(css => css).join(' ')) || '';
-    return [cssClassName];
+    return [(cssClasses === null || cssClasses === void 0 ? void 0 : cssClasses.filter(css => css).join(' ')) || ''];
 }
 
 function useHover() {
@@ -498,21 +497,22 @@ styleInject(css_248z$P);
 
 const Badge = (props) => {
     const { children, content, className, color = COLOR.primary } = props, rest = __rest(props, ["children", "content", "className", "color"]);
-    const getCssClassesBadgeContainer = () => {
-        const cssClasses = [];
-        cssClasses.push(styles$P.badgeContainer);
-        className && cssClasses.push(className);
-        return cssClasses.filter(css => css).join(' ');
-    };
-    const getCssClassesBadge = () => {
-        const cssClasses = [];
-        cssClasses.push(styles$P.badge);
-        cssClasses.push(styles$P[color]);
-        return cssClasses.filter(css => css).join(' ');
-    };
-    return (React.createElement("div", Object.assign({ className: getCssClassesBadgeContainer() }, rest),
+    const [cssClassName] = useCssClasses([
+        styles$P.badge,
+        styles$P[color],
+        className
+    ]);
+    return (React.createElement(BadgeContainer, null,
         children,
-        React.createElement("span", { className: getCssClassesBadge() }, content)));
+        React.createElement("span", Object.assign({ className: cssClassName }, rest), content)));
+};
+const BadgeContainer = (props) => {
+    const { children, className } = props, rest = __rest(props, ["children", "className"]);
+    const [cssClassName] = useCssClasses([
+        styles$P.badgeContainer,
+        className,
+    ]);
+    return (React.createElement("div", Object.assign({ className: cssClassName }, rest), children));
 };
 
 var css_248z$O = ".Button-module_button__qeIer {\n  text-transform: uppercase;\n  flex-shrink: 0;\n  background-color: transparent;\n  display: inline-block;\n  font-weight: 400;\n  line-height: 1.5;\n  text-align: center;\n  text-decoration: none;\n  vertical-align: middle;\n  user-select: none;\n  border: 1px solid transparent;\n  padding: 0.375rem 0.75rem;\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,\r box-shadow 0.15s ease-in-out;\n  min-width: 64px;\n  font-size: 0.875rem;\n  border-radius: var(--borderRadius); }\n  .Button-module_button__qeIer.Button-module_shadow__6N2nE {\n    box-shadow: var(--shadow); }\n  .Button-module_button__qeIer.Button-module_block__JIazf {\n    width: 100%; }\n  .Button-module_button__qeIer:hover:not(:disabled) {\n    cursor: pointer; }\n  .Button-module_button__qeIer:focus:not(:disabled) {\n    border-color: #86b7fe;\n    outline: 0;\n    box-shadow: inset 0 1px 2px #00000013, 0 0 0 0.25rem #0d6efd40; }\n\n.Button-module_btnContained__16y5l.Button-module_primary__EUyOu {\n  color: var(--primary-contrast-text);\n  background-color: var(--primary); }\n  .Button-module_btnContained__16y5l.Button-module_primary__EUyOu:hover:not(:disabled) {\n    background-color: var(--primary-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_accent__opVgQ {\n  color: var(--accent-contrast-text);\n  background-color: var(--accent); }\n  .Button-module_btnContained__16y5l.Button-module_accent__opVgQ:hover:not(:disabled) {\n    background-color: var(--accent-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_secondary__zKoGk {\n  color: var(--secondary-contrast-text);\n  background-color: var(--secondary); }\n  .Button-module_btnContained__16y5l.Button-module_secondary__zKoGk:hover:not(:disabled) {\n    background-color: var(--secondary-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_light__LXeZy {\n  color: var(--light-contrast-text);\n  background-color: var(--light); }\n  .Button-module_btnContained__16y5l.Button-module_light__LXeZy:hover:not(:disabled) {\n    background-color: var(--light-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_dark__5oFOT {\n  color: var(--dark-contrast-text);\n  background-color: var(--dark); }\n  .Button-module_btnContained__16y5l.Button-module_dark__5oFOT:hover:not(:disabled) {\n    background-color: var(--dark-dark); }\n\n.Button-module_btnContained__16y5l:disabled {\n  color: rgba(0, 0, 0, 0.26);\n  box-shadow: none;\n  background-color: rgba(0, 0, 0, 0.12); }\n  .Button-module_btnContained__16y5l:disabled:hover {\n    cursor: not-allowed; }\n\n.Button-module_btnText__N5Gys {\n  box-shadow: none;\n  text-decoration: none; }\n  .Button-module_btnText__N5Gys.Button-module_primary__EUyOu {\n    color: var(--primary); }\n    .Button-module_btnText__N5Gys.Button-module_primary__EUyOu:hover:not(:disabled) {\n      text-decoration: none;\n      background: var(--primary-highlight); }\n  .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk {\n    color: var(--secondary); }\n    .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk:hover:not(:disabled) {\n      text-decoration: none;\n      background: var(--secondary-highlight); }\n  .Button-module_btnText__N5Gys.Button-module_accent__opVgQ {\n    color: var(--accent); }\n    .Button-module_btnText__N5Gys.Button-module_accent__opVgQ:hover:not(:disabled) {\n      text-decoration: none;\n      background: var(--accent-highlight); }\n  .Button-module_btnText__N5Gys.Button-module_light__LXeZy {\n    color: var(--light-contrast-text); }\n    .Button-module_btnText__N5Gys.Button-module_light__LXeZy:hover:not(:disabled) {\n      text-decoration: none;\n      background: var(--light-highlight); }\n  .Button-module_btnText__N5Gys.Button-module_dark__5oFOT {\n    color: var(--dark); }\n    .Button-module_btnText__N5Gys.Button-module_dark__5oFOT:hover:not(:disabled) {\n      text-decoration: none;\n      background: var(--dark-highlight); }\n\n.Button-module_btnOutline__CCFPI {\n  box-shadow: none;\n  text-decoration: none; }\n  .Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu {\n    color: var(--primary);\n    border-color: var(--primary); }\n    .Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu:hover:not(:disabled) {\n      background: var(--primary-highlight); }\n  .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk {\n    color: var(--secondary);\n    border-color: var(--secondary); }\n    .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk:hover:not(:disabled) {\n      background: var(--secondary-highlight); }\n  .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ {\n    color: var(--accent);\n    border-color: var(--accent); }\n    .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ:hover:not(:disabled) {\n      background: var(--accent-highlight); }\n  .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy {\n    color: var(--light-contrast-text);\n    border-color: var(--light); }\n    .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy:hover:not(:disabled) {\n      background: var(--light-highlight); }\n  .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT {\n    color: var(--dark);\n    border-color: var(--dark); }\n    .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT:hover:not(:disabled) {\n      background: var(--dark-highlight); }\n  .Button-module_btnOutline__CCFPI:disabled {\n    color: rgba(0, 0, 0, 0.26);\n    border: 1px solid rgba(0, 0, 0, 0.12); }\n\n.Button-module_startIcon__Eylwr {\n  display: inherit;\n  margin-left: -4px;\n  margin-right: 8px; }\n  .Button-module_startIcon__Eylwr svg {\n    width: 18px;\n    height: 18px; }\n\n.Button-module_endIcon__pCffL {\n  display: inherit;\n  margin-left: 8px; }\n  .Button-module_endIcon__pCffL svg {\n    width: 18px;\n    height: 18px; }\n";
@@ -2301,24 +2301,25 @@ const Stepper = (props) => {
             React.createElement(StepperActions, { className: "mt-3", isFirstStep: activeIndex === 0, isStepOptional: isStepOptional(activeIndex), isCompleted: isLastStep(), onBack: handleBack, onSkip: handleSkip, onNext: handleNext, onReset: handleReset }))));
 };
 
-var css_248z$8 = ".Typography-module_typography__sw-td {\n  font-family: var(--fontFamily);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis; }\n\nh1 {\n  font-size: calc(1.375rem + 1.5vw); }\n\nh2 {\n  font-size: calc(1.325rem + 0.9vw); }\n\nh3 {\n  font-size: calc(1.3rem + 0.6vw); }\n\nh4 {\n  font-size: calc(1.275rem + 0.3vw); }\n\nh5 {\n  font-size: 1.25rem; }\n\nh6 {\n  font-size: 1rem; }\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-weight: 500 !important;\n  margin-top: 0;\n  margin-bottom: 0.5rem;\n  line-height: 1.2; }\n";
-var styles$8 = {"typography":"Typography-module_typography__sw-td"};
+var css_248z$8 = ".Typography-module_typography__sw-td {\n  font-family: var(--fontFamily); }\n  .Typography-module_typography__sw-td.Typography-module_wrap__W7G0R {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis; }\n\nh1 {\n  font-size: calc(1.375rem + 1.5vw); }\n\nh2 {\n  font-size: calc(1.325rem + 0.9vw); }\n\nh3 {\n  font-size: calc(1.3rem + 0.6vw); }\n\nh4 {\n  font-size: calc(1.275rem + 0.3vw); }\n\nh5 {\n  font-size: 1.25rem; }\n\nh6 {\n  font-size: 1rem; }\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-weight: 500 !important;\n  margin-top: 0;\n  margin-bottom: 0.5rem;\n  line-height: 1.2; }\n";
+var styles$8 = {"typography":"Typography-module_typography__sw-td","wrap":"Typography-module_wrap__W7G0R"};
 styleInject(css_248z$8);
 
 const Wrapper = (props) => {
-    const { as = 'span', children, className } = props, rest = __rest(props, ["as", "children", "className"]);
+    const { as = 'span', wrap, children, className } = props, rest = __rest(props, ["as", "wrap", "children", "className"]);
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$8.typography);
         cssClasses.push(styles$8.as);
+        wrap && cssClasses.push(styles$8.wrap);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
     return React.createElement(as, Object.assign(Object.assign({}, rest), { className: getCssClasses() }), children);
 };
 const Typography = (_a) => {
-    var { children, as = 'span' } = _a, rest = __rest(_a, ["children", "as"]);
-    return (React.createElement(Wrapper, Object.assign({ as: as }, rest), children));
+    var { children, as = 'span', wrap } = _a, rest = __rest(_a, ["children", "as", "wrap"]);
+    return (React.createElement(Wrapper, Object.assign({ as: as, wrap: wrap }, rest), children));
 };
 
 var css_248z$7 = ".Step-module_stepWrapper__IQwq1 {\n  display: flex;\n  align-items: center;\n  padding-left: 8px;\n  padding-right: 8px;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n  .Step-module_stepWrapper__IQwq1.Step-module_hasLabel__LZNvd:not(.Step-module_disabled__JnxUP):hover {\n    cursor: pointer;\n    background-color: rgba(0, 0, 0, 0.04);\n    border-radius: var(--borderRadius); }\n\n.Step-module_step__k42go {\n  width: 40px;\n  height: 40px;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n  .Step-module_step__k42go:not(.Step-module_hasLabel__LZNvd):not(.Step-module_disabled__JnxUP):hover {\n    border-radius: 100%;\n    cursor: pointer;\n    background-color: rgba(0, 0, 0, 0.04); }\n  .Step-module_step__k42go.Step-module_hasLabel__LZNvd svg {\n    width: 18px !important;\n    height: 18px !important; }\n\n.Step-module_stepIconCircle__hnxIV svg {\n  width: 24px;\n  height: 24px; }\n\n.Step-module_stepValue__B0-xv {\n  position: absolute;\n  color: var(--secondary-contrast-text); }\n  .Step-module_stepValue__B0-xv .Step-module_isActive__3GGcl {\n    color: var(--primary-contrast-text); }\n";

package/index.js

@@ -250,8 +250,7 @@ const useConstructor = (callBack) => {
 };
 
 function useCssClasses(cssClasses) {
-    const cssClassName = (cssClasses === null || cssClasses === void 0 ? void 0 : cssClasses.filter(css => css).join(' ')) || '';
-    return [cssClassName];
+    return [(cssClasses === null || cssClasses === void 0 ? void 0 : cssClasses.filter(css => css).join(' ')) || ''];
 }
 
 function useHover() {
@@ -506,21 +505,22 @@ styleInject(css_248z$P);
 
 const Badge = (props) => {
     const { children, content, className, color = exports.COLOR.primary } = props, rest = __rest(props, ["children", "content", "className", "color"]);
-    const getCssClassesBadgeContainer = () => {
-        const cssClasses = [];
-        cssClasses.push(styles$P.badgeContainer);
-        className && cssClasses.push(className);
-        return cssClasses.filter(css => css).join(' ');
-    };
-    const getCssClassesBadge = () => {
-        const cssClasses = [];
-        cssClasses.push(styles$P.badge);
-        cssClasses.push(styles$P[color]);
-        return cssClasses.filter(css => css).join(' ');
-    };
-    return (React__default["default"].createElement("div", Object.assign({ className: getCssClassesBadgeContainer() }, rest),
+    const [cssClassName] = useCssClasses([
+        styles$P.badge,
+        styles$P[color],
+        className
+    ]);
+    return (React__default["default"].createElement(BadgeContainer, null,
         children,
-        React__default["default"].createElement("span", { className: getCssClassesBadge() }, content)));
+        React__default["default"].createElement("span", Object.assign({ className: cssClassName }, rest), content)));
+};
+const BadgeContainer = (props) => {
+    const { children, className } = props, rest = __rest(props, ["children", "className"]);
+    const [cssClassName] = useCssClasses([
+        styles$P.badgeContainer,
+        className,
+    ]);
+    return (React__default["default"].createElement("div", Object.assign({ className: cssClassName }, rest), children));
 };
 
 var css_248z$O = ".Button-module_button__qeIer {\n  text-transform: uppercase;\n  flex-shrink: 0;\n  background-color: transparent;\n  display: inline-block;\n  font-weight: 400;\n  line-height: 1.5;\n  text-align: center;\n  text-decoration: none;\n  vertical-align: middle;\n  user-select: none;\n  border: 1px solid transparent;\n  padding: 0.375rem 0.75rem;\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,\r box-shadow 0.15s ease-in-out;\n  min-width: 64px;\n  font-size: 0.875rem;\n  border-radius: var(--borderRadius); }\n  .Button-module_button__qeIer.Button-module_shadow__6N2nE {\n    box-shadow: var(--shadow); }\n  .Button-module_button__qeIer.Button-module_block__JIazf {\n    width: 100%; }\n  .Button-module_button__qeIer:hover:not(:disabled) {\n    cursor: pointer; }\n  .Button-module_button__qeIer:focus:not(:disabled) {\n    border-color: #86b7fe;\n    outline: 0;\n    box-shadow: inset 0 1px 2px #00000013, 0 0 0 0.25rem #0d6efd40; }\n\n.Button-module_btnContained__16y5l.Button-module_primary__EUyOu {\n  color: var(--primary-contrast-text);\n  background-color: var(--primary); }\n  .Button-module_btnContained__16y5l.Button-module_primary__EUyOu:hover:not(:disabled) {\n    background-color: var(--primary-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_accent__opVgQ {\n  color: var(--accent-contrast-text);\n  background-color: var(--accent); }\n  .Button-module_btnContained__16y5l.Button-module_accent__opVgQ:hover:not(:disabled) {\n    background-color: var(--accent-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_secondary__zKoGk {\n  color: var(--secondary-contrast-text);\n  background-color: var(--secondary); }\n  .Button-module_btnContained__16y5l.Button-module_secondary__zKoGk:hover:not(:disabled) {\n    background-color: var(--secondary-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_light__LXeZy {\n  color: var(--light-contrast-text);\n  background-color: var(--light); }\n  .Button-module_btnContained__16y5l.Button-module_light__LXeZy:hover:not(:disabled) {\n    background-color: var(--light-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_dark__5oFOT {\n  color: var(--dark-contrast-text);\n  background-color: var(--dark); }\n  .Button-module_btnContained__16y5l.Button-module_dark__5oFOT:hover:not(:disabled) {\n    background-color: var(--dark-dark); }\n\n.Button-module_btnContained__16y5l:disabled {\n  color: rgba(0, 0, 0, 0.26);\n  box-shadow: none;\n  background-color: rgba(0, 0, 0, 0.12); }\n  .Button-module_btnContained__16y5l:disabled:hover {\n    cursor: not-allowed; }\n\n.Button-module_btnText__N5Gys {\n  box-shadow: none;\n  text-decoration: none; }\n  .Button-module_btnText__N5Gys.Button-module_primary__EUyOu {\n    color: var(--primary); }\n    .Button-module_btnText__N5Gys.Button-module_primary__EUyOu:hover:not(:disabled) {\n      text-decoration: none;\n      background: var(--primary-highlight); }\n  .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk {\n    color: var(--secondary); }\n    .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk:hover:not(:disabled) {\n      text-decoration: none;\n      background: var(--secondary-highlight); }\n  .Button-module_btnText__N5Gys.Button-module_accent__opVgQ {\n    color: var(--accent); }\n    .Button-module_btnText__N5Gys.Button-module_accent__opVgQ:hover:not(:disabled) {\n      text-decoration: none;\n      background: var(--accent-highlight); }\n  .Button-module_btnText__N5Gys.Button-module_light__LXeZy {\n    color: var(--light-contrast-text); }\n    .Button-module_btnText__N5Gys.Button-module_light__LXeZy:hover:not(:disabled) {\n      text-decoration: none;\n      background: var(--light-highlight); }\n  .Button-module_btnText__N5Gys.Button-module_dark__5oFOT {\n    color: var(--dark); }\n    .Button-module_btnText__N5Gys.Button-module_dark__5oFOT:hover:not(:disabled) {\n      text-decoration: none;\n      background: var(--dark-highlight); }\n\n.Button-module_btnOutline__CCFPI {\n  box-shadow: none;\n  text-decoration: none; }\n  .Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu {\n    color: var(--primary);\n    border-color: var(--primary); }\n    .Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu:hover:not(:disabled) {\n      background: var(--primary-highlight); }\n  .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk {\n    color: var(--secondary);\n    border-color: var(--secondary); }\n    .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk:hover:not(:disabled) {\n      background: var(--secondary-highlight); }\n  .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ {\n    color: var(--accent);\n    border-color: var(--accent); }\n    .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ:hover:not(:disabled) {\n      background: var(--accent-highlight); }\n  .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy {\n    color: var(--light-contrast-text);\n    border-color: var(--light); }\n    .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy:hover:not(:disabled) {\n      background: var(--light-highlight); }\n  .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT {\n    color: var(--dark);\n    border-color: var(--dark); }\n    .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT:hover:not(:disabled) {\n      background: var(--dark-highlight); }\n  .Button-module_btnOutline__CCFPI:disabled {\n    color: rgba(0, 0, 0, 0.26);\n    border: 1px solid rgba(0, 0, 0, 0.12); }\n\n.Button-module_startIcon__Eylwr {\n  display: inherit;\n  margin-left: -4px;\n  margin-right: 8px; }\n  .Button-module_startIcon__Eylwr svg {\n    width: 18px;\n    height: 18px; }\n\n.Button-module_endIcon__pCffL {\n  display: inherit;\n  margin-left: 8px; }\n  .Button-module_endIcon__pCffL svg {\n    width: 18px;\n    height: 18px; }\n";
@@ -2309,24 +2309,25 @@ const Stepper = (props) => {
             React__default["default"].createElement(StepperActions, { className: "mt-3", isFirstStep: activeIndex === 0, isStepOptional: isStepOptional(activeIndex), isCompleted: isLastStep(), onBack: handleBack, onSkip: handleSkip, onNext: handleNext, onReset: handleReset }))));
 };
 
-var css_248z$8 = ".Typography-module_typography__sw-td {\n  font-family: var(--fontFamily);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis; }\n\nh1 {\n  font-size: calc(1.375rem + 1.5vw); }\n\nh2 {\n  font-size: calc(1.325rem + 0.9vw); }\n\nh3 {\n  font-size: calc(1.3rem + 0.6vw); }\n\nh4 {\n  font-size: calc(1.275rem + 0.3vw); }\n\nh5 {\n  font-size: 1.25rem; }\n\nh6 {\n  font-size: 1rem; }\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-weight: 500 !important;\n  margin-top: 0;\n  margin-bottom: 0.5rem;\n  line-height: 1.2; }\n";
-var styles$8 = {"typography":"Typography-module_typography__sw-td"};
+var css_248z$8 = ".Typography-module_typography__sw-td {\n  font-family: var(--fontFamily); }\n  .Typography-module_typography__sw-td.Typography-module_wrap__W7G0R {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis; }\n\nh1 {\n  font-size: calc(1.375rem + 1.5vw); }\n\nh2 {\n  font-size: calc(1.325rem + 0.9vw); }\n\nh3 {\n  font-size: calc(1.3rem + 0.6vw); }\n\nh4 {\n  font-size: calc(1.275rem + 0.3vw); }\n\nh5 {\n  font-size: 1.25rem; }\n\nh6 {\n  font-size: 1rem; }\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-weight: 500 !important;\n  margin-top: 0;\n  margin-bottom: 0.5rem;\n  line-height: 1.2; }\n";
+var styles$8 = {"typography":"Typography-module_typography__sw-td","wrap":"Typography-module_wrap__W7G0R"};
 styleInject(css_248z$8);
 
 const Wrapper = (props) => {
-    const { as = 'span', children, className } = props, rest = __rest(props, ["as", "children", "className"]);
+    const { as = 'span', wrap, children, className } = props, rest = __rest(props, ["as", "wrap", "children", "className"]);
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$8.typography);
         cssClasses.push(styles$8.as);
+        wrap && cssClasses.push(styles$8.wrap);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
     return React__default["default"].createElement(as, Object.assign(Object.assign({}, rest), { className: getCssClasses() }), children);
 };
 const Typography = (_a) => {
-    var { children, as = 'span' } = _a, rest = __rest(_a, ["children", "as"]);
-    return (React__default["default"].createElement(Wrapper, Object.assign({ as: as }, rest), children));
+    var { children, as = 'span', wrap } = _a, rest = __rest(_a, ["children", "as", "wrap"]);
+    return (React__default["default"].createElement(Wrapper, Object.assign({ as: as, wrap: wrap }, rest), children));
 };
 
 var css_248z$7 = ".Step-module_stepWrapper__IQwq1 {\n  display: flex;\n  align-items: center;\n  padding-left: 8px;\n  padding-right: 8px;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n  .Step-module_stepWrapper__IQwq1.Step-module_hasLabel__LZNvd:not(.Step-module_disabled__JnxUP):hover {\n    cursor: pointer;\n    background-color: rgba(0, 0, 0, 0.04);\n    border-radius: var(--borderRadius); }\n\n.Step-module_step__k42go {\n  width: 40px;\n  height: 40px;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n  .Step-module_step__k42go:not(.Step-module_hasLabel__LZNvd):not(.Step-module_disabled__JnxUP):hover {\n    border-radius: 100%;\n    cursor: pointer;\n    background-color: rgba(0, 0, 0, 0.04); }\n  .Step-module_step__k42go.Step-module_hasLabel__LZNvd svg {\n    width: 18px !important;\n    height: 18px !important; }\n\n.Step-module_stepIconCircle__hnxIV svg {\n  width: 24px;\n  height: 24px; }\n\n.Step-module_stepValue__B0-xv {\n  position: absolute;\n  color: var(--secondary-contrast-text); }\n  .Step-module_stepValue__B0-xv .Step-module_isActive__3GGcl {\n    color: var(--primary-contrast-text); }\n";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-asc",
-	"version": "23.1.0",
+	"version": "23.2.0",
 	"description": "handcrafted react components",
 	"main": "index.js",
 	"module": "index.es.js",