npm - @popsure/dirty-swan - Versions diffs - 0.59.0-alpha → 0.59.0-beta-2 - Mend

@popsure/dirty-swan 0.59.0-alpha → 0.59.0-beta-2

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 (176) hide show

package/dist/esm/components/icon/icons/Star.js CHANGED Viewed

@@ -5,9 +5,9 @@ import '../../../tslib.es6-a39f91fc.js';
 import '../../../index-6ea95111.js';
 import '../../../style-inject.es-1f59c1d0.js';
-var Star = (function (props) {
+var StarIcon = (function (props) {
     return createElement(IconWrapper, props, jsx("path", { stroke: "currentColor", strokeLinejoin: "round", strokeWidth: 2, d: "M11.888 2h.129c.502.003.952.313 1.13.78l2.006 5.068 5.679.266c1.128.048 1.59 1.464.703 2.16l-4.433 3.546 1.84 5.653c.286 1.071-.906 1.93-1.84 1.325L12 17l-5 3.798c-.935.608-2.132-.252-1.844-1.325L6.9 13.82l-4.434-3.546c-.886-.696-.425-2.112.703-2.16l5.68-.266 2.021-5.068A1.224 1.224 0 0 1 11.889 2Z" }));
 });
-export default Star;
+export default StarIcon;
 //# sourceMappingURL=Star.js.map

package/dist/esm/components/icon/icons/Star.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Star.js","sources":["../../../../../../src/lib/components/icon/icons/Star.tsx"],"sourcesContent":["/* Generated file. Do not modify. */\nimport { createElement } from 'react';\nimport { IconWrapper } from '../IconWrapper';\nimport type { IconWrapperProps } from '../IconWrapper';\nexport default (props: IconWrapperProps) =>\n createElement(\n IconWrapper,\n props,\n <path\n stroke=\"currentColor\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M11.888 2h.129c.502.003.952.313 1.13.78l2.006 5.068 5.679.266c1.128.048 1.59 1.464.703 2.16l-4.433 3.546 1.84 5.653c.286 1.071-.906 1.93-1.84 1.325L12 17l-5 3.798c-.935.608-2.132-.252-1.844-1.325L6.9 13.82l-4.434-3.546c-.886-.696-.425-2.112.703-2.16l5.68-.266 2.021-5.068A1.224 1.224 0 0 1 11.889 2Z\"\n />\n );\n"],"names":["_jsx"],"mappings":";;;;;;;AAIA,~~YAAe~~,UAAC,KAAuB;IACrC,OAAA,aAAa,CACX,WAAW,EACX,KAAK,EACLA,cACE,MAAM,EAAC,cAAc,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAE,CAAC,EACd,CAAC,EAAC,6SAA6S,GAC/S,CACH;AATD,CASC;;;;"}
1	+ {"version":3,"file":"Star.js","sources":["../../../../../../src/lib/components/icon/icons/Star.tsx"],"sourcesContent":["/* Generated file. Do not modify. */\nimport { createElement } from 'react';\nimport { IconWrapper } from '../IconWrapper';\nimport type { IconWrapperProps } from '../IconWrapper';\nexport default (props: IconWrapperProps) =>\n createElement(\n IconWrapper,\n props,\n <path\n stroke=\"currentColor\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M11.888 2h.129c.502.003.952.313 1.13.78l2.006 5.068 5.679.266c1.128.048 1.59 1.464.703 2.16l-4.433 3.546 1.84 5.653c.286 1.071-.906 1.93-1.84 1.325L12 17l-5 3.798c-.935.608-2.132-.252-1.844-1.325L6.9 13.82l-4.434-3.546c-.886-.696-.425-2.112.703-2.16l5.68-.266 2.021-5.068A1.224 1.224 0 0 1 11.889 2Z\"\n />\n );\n"],"names":["_jsx"],"mappings":";;;;;;;AAIA,gBAAe,UAAC,KAAuB;IACrC,OAAA,aAAa,CACX,WAAW,EACX,KAAK,EACLA,cACE,MAAM,EAAC,cAAc,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAE,CAAC,EACd,CAAC,EAAC,6SAA6S,GAC/S,CACH;AATD,CASC;;;;"}

package/dist/esm/components/icon/icons.stories.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { Input } from '../input/index.js';
-import { i as icons } from '../../index-d2e06251.js';
+import { i as icons } from '../../index-7427c96f.js';
 import { Button } from '../button/index.js';
 import { c as classNames } from '../../index-6ea95111.js';
 import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';

package/dist/esm/components/icon/index.stories.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { IconWrapper } from './IconWrapper/IconWrapper.js';
-import { i as icons } from '../../index-d2e06251.js';
+import { i as icons } from '../../index-7427c96f.js';
 import '../../tslib.es6-a39f91fc.js';
 import '../../index-6ea95111.js';
 import '../../style-inject.es-1f59c1d0.js';

package/dist/esm/components/input/currency/input.stories.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { a as __assign } from '../../../tslib.es6-a39f91fc.js';
 import { jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { CurrencyInput } from './index.js';
-import { s as sharedConfig } from '../../../config-4b5ffe4f.js';
+import { s as sharedConfig } from '../../../config-bc609993.js';
 import '../index.js';
 import '../../../index-6ea95111.js';
 import '../../../index-69a46657.js';

package/dist/esm/components/input/index.js CHANGED Viewed

@@ -5,13 +5,13 @@ import { c as classNames } from '../../index-6ea95111.js';
 import { g as generateId } from '../../index-69a46657.js';
 import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
-var css_248z = ".style-module_container__2L4SP {\n  position: relative;\n}\n\n.style-module_prefix__3jAFZ {\n  position: absolute;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--ds-neutral-600);\n  transition: 0.3s top;\n}\n.style-module_prefix--with-error__1yTTM {\n  color: var(--ds-red-500);\n}\n.style-module_prefix--disabled__2-gcw {\n  color: var(--ds-neutral-700);\n}\n\n.style-module_input__1eJO5:not(:placeholder-shown) ~ .style-module_placeholder__1U2z0,\n.style-module_input__1eJO5:focus ~ .style-module_placeholder__1U2z0,\n.style-module_input--with-inside-label__253bZ ~ .style-module_placeholder__1U2z0 {\n  top: 7px;\n  left: 16px;\n  transform: translateY(0);\n  font-size: 10px;\n  line-height: 12px;\n  opacity: 1;\n}\n\n.style-module_input__1eJO5:focus ~ .style-module_placeholder__1U2z0 {\n  color: var(--ds-purple-600);\n}\n.style-module_input__1eJO5:focus ~ .style-module_placeholder--with-error__2ieRU {\n  color: var(--ds-red-500);\n}\n\n.style-module_input__1eJO5:focus ~ .style-module_prefix__3jAFZ {\n  color: var(--ds-purple-600);\n}\n.style-module_input__1eJO5:focus ~ .style-module_prefix--with-error__1yTTM {\n  color: var(--ds-red-500);\n}\n\n.style-module_input__1eJO5:not(:placeholder-shown) ~ .style-module_prefix__3jAFZ,\n.style-module_input__1eJO5:focus ~ .style-module_prefix__3jAFZ {\n  top: 28px;\n}\n\n.style-module_input--with-inside-label__253bZ ~ .style-module_prefix__3jAFZ,\n.style-module_input--with-inside-label__253bZ:focus ~ .style-module_prefix__3jAFZ,\n.style-module_input--with-inside-label__253bZ:not(:placeholder-shown) ~ .style-module_prefix__3jAFZ {\n  top: 29px;\n}\n\n.style-module_input__1eJO5 {\n  box-sizing: border-box;\n  padding-top: 9px;\n  font-family: inherit;\n}\n.style-module_input--no-placeholder__3EGwh {\n  padding-top: 0px;\n}\n.style-module_input--with-prefix__38e0j {\n  padding-left: 32px !important;\n}\n.style-module_input--with-inside-label__253bZ {\n  padding-top: 9px;\n}\n\n.style-module_placeholder__1U2z0 {\n  position: absolute;\n  pointer-events: none;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  transition: 0.3s ease all;\n  color: var(--ds-neutral-600);\n}\n.style-module_placeholder--with-prefix__2PquQ {\n  left: 32px;\n}\n.style-module_placeholder--with-error__2ieRU {\n  color: var(--ds-red-500);\n}\n\n.style-module_label__3FEZ1 {\n  display: inline-block;\n  margin-bottom: 8px;\n  color: var(--ds-neutral-700);\n}\n.style-module_label--with-error__166bP {\n  color: var(--ds-red-500);\n}\n\n.style-module_error__167Zc {\n  margin-top: 4px;\n}";
-var styles = {"container":"style-module_container__2L4SP","prefix":"style-module_prefix__3jAFZ","prefix--with-error":"style-module_prefix--with-error__1yTTM","prefix--disabled":"style-module_prefix--disabled__2-gcw","input":"style-module_input__1eJO5","placeholder":"style-module_placeholder__1U2z0","input--with-inside-label":"style-module_input--with-inside-label__253bZ","placeholder--with-error":"style-module_placeholder--with-error__2ieRU","input--no-placeholder":"style-module_input--no-placeholder__3EGwh","input--with-prefix":"style-module_input--with-prefix__38e0j","placeholder--with-prefix":"style-module_placeholder--with-prefix__2PquQ","label":"style-module_label__3FEZ1","label--with-error":"style-module_label--with-error__166bP","error":"style-module_error__167Zc"};
+var css_248z = ".style-module_container__2L4SP {\n  position: relative;\n}\n\n.style-module_prefix__3jAFZ {\n  position: absolute;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--ds-neutral-600);\n  transition: top 0.3s, color 0.3s;\n}\n.style-module_prefix--with-value__2QiEA {\n  color: var(--ds-neutral-900);\n}\n.style-module_prefix--with-error__1yTTM {\n  color: var(--ds-red-500);\n}\n.style-module_prefix--disabled__2-gcw {\n  color: var(--ds-neutral-700);\n}\n\n.style-module_input__1eJO5:not(:placeholder-shown) ~ .style-module_placeholder__1U2z0,\n.style-module_input__1eJO5:focus ~ .style-module_placeholder__1U2z0,\n.style-module_input--with-inside-label__253bZ ~ .style-module_placeholder__1U2z0 {\n  top: 7px;\n  left: 16px;\n  transform: translateY(0);\n  font-size: 10px;\n  line-height: 12px;\n  opacity: 1;\n}\n\n.style-module_input__1eJO5:focus ~ .style-module_placeholder__1U2z0 {\n  color: var(--ds-neutral-900);\n}\n.style-module_input__1eJO5:focus ~ .style-module_placeholder--with-error__2ieRU {\n  color: var(--ds-red-500);\n}\n\ninput:focus ~ .style-module_prefix__3jAFZ {\n  color: var(--ds-neutral-900);\n}\ninput:focus ~ .style-module_prefix--with-error__1yTTM {\n  color: var(--ds-red-500);\n}\n\n.style-module_input__1eJO5:not(:placeholder-shown) ~ .style-module_prefix__3jAFZ,\n.style-module_input__1eJO5:focus ~ .style-module_prefix__3jAFZ {\n  top: 28px;\n}\n\n.style-module_input--with-inside-label__253bZ ~ .style-module_prefix__3jAFZ,\n.style-module_input--with-inside-label__253bZ:focus ~ .style-module_prefix__3jAFZ,\n.style-module_input--with-inside-label__253bZ:not(:placeholder-shown) ~ .style-module_prefix__3jAFZ {\n  top: 29px;\n}\n\n.style-module_input__1eJO5 {\n  box-sizing: border-box;\n  padding-top: 9px;\n  font-family: inherit;\n}\n.style-module_input--no-placeholder__3EGwh {\n  padding-top: 0px;\n}\n.style-module_input--with-prefix__38e0j {\n  padding-left: 32px !important;\n}\n.style-module_input--with-inside-label__253bZ {\n  padding-top: 9px;\n}\n\n.style-module_placeholder__1U2z0 {\n  position: absolute;\n  pointer-events: none;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  transition: 0.3s ease all;\n  color: var(--ds-neutral-600);\n}\n.style-module_placeholder--with-prefix__2PquQ {\n  left: 32px;\n}\n.style-module_placeholder--with-error__2ieRU {\n  color: var(--ds-red-500);\n}\n\n.style-module_label__3FEZ1 {\n  display: inline-block;\n  margin-bottom: 8px;\n  color: var(--ds-neutral-700);\n}\n.style-module_label--with-error__166bP {\n  color: var(--ds-red-500);\n}\n\n.style-module_error__167Zc {\n  margin-top: 4px;\n}";
+var styles = {"container":"style-module_container__2L4SP","prefix":"style-module_prefix__3jAFZ","prefix--with-value":"style-module_prefix--with-value__2QiEA","prefix--with-error":"style-module_prefix--with-error__1yTTM","prefix--disabled":"style-module_prefix--disabled__2-gcw","input":"style-module_input__1eJO5","placeholder":"style-module_placeholder__1U2z0","input--with-inside-label":"style-module_input--with-inside-label__253bZ","placeholder--with-error":"style-module_placeholder--with-error__2ieRU","input--no-placeholder":"style-module_input--no-placeholder__3EGwh","input--with-prefix":"style-module_input--with-prefix__38e0j","placeholder--with-prefix":"style-module_placeholder--with-prefix__2PquQ","label":"style-module_label__3FEZ1","label--with-error":"style-module_label--with-error__166bP","error":"style-module_error__167Zc"};
 styleInject(css_248z);
 var Input = React__default.forwardRef(function (_a, ref) {
-    var _b, _c, _d, _e, _f, _g;
-    var className = _a.className, placeholder = _a.placeholder, label = _a.label, id = _a.id, prefix = _a.prefix, error = _a.error, disabled = _a.disabled, _h = _a.hideLabel, hideLabel = _h === void 0 ? false : _h, _j = _a.labelInsideInput, labelInsideInput = _j === void 0 ? false : _j, props = __rest(_a, ["className", "placeholder", "label", "id", "prefix", "error", "disabled", "hideLabel", "labelInsideInput"]);
+    var _b, _c, _d, _e, _f, _g, _h;
+    var className = _a.className, placeholder = _a.placeholder, label = _a.label, id = _a.id, prefix = _a.prefix, error = _a.error, disabled = _a.disabled, _j = _a.hideLabel, hideLabel = _j === void 0 ? false : _j, _k = _a.labelInsideInput, labelInsideInput = _k === void 0 ? false : _k, props = __rest(_a, ["className", "placeholder", "label", "id", "prefix", "error", "disabled", "hideLabel", "labelInsideInput"]);
     var uniqueId = useState(id !== null && id !== void 0 ? id : generateId())[0];
     return (jsxs("div", { className: "".concat(styles.container, " ").concat(className !== null && className !== void 0 ? className : ''), children: [label && !labelInsideInput && (jsx("label", { htmlFor: uniqueId, className: classNames('p-p', styles.label, (_b = {},
                     _b[styles['label--with-error']] = error,
@@ -23,7 +23,7 @@ var Input = React__default.forwardRef(function (_a, ref) {
                             : styles['input--no-placeholder'], (_c = {},
                             _c[styles['input--with-prefix']] = prefix,
                             _c[styles['input--with-inside-label']] = labelInsideInput,
-                            _c)), placeholder: label || labelInsideInput ? placeholder : ' ', disabled: disabled, "aria-invalid": !!error, "aria-errormessage": error ? "".concat(uniqueId, "-error") : undefined }, props)), prefix && (jsx("span", { className: classNames(styles.prefix, (_d = {}, _d[styles['prefix--with-error']] = error, _d), (_e = {}, _e[styles['prefix--disabled']] = disabled, _e)), children: prefix })), (!label || labelInsideInput) && (jsx("label", { htmlFor: uniqueId, className: classNames(styles.placeholder, (_f = {}, _f[styles['placeholder--with-prefix']] = prefix, _f), (_g = {}, _g[styles['placeholder--with-error']] = error, _g)), children: labelInsideInput ? label : placeholder }))] }), error && (jsx("p", { id: "".concat(uniqueId, "-error"), className: "p-p--small tc-red-500 w100 ".concat(styles.error), children: error }))] }));
+                            _c)), placeholder: label || labelInsideInput ? placeholder : ' ', disabled: disabled, "aria-invalid": !!error, "aria-errormessage": error ? "".concat(uniqueId, "-error") : undefined }, props)), prefix && (jsx("span", { className: classNames(styles.prefix, (_d = {}, _d[styles['prefix--with-error']] = error, _d), (_e = {}, _e[styles['prefix--disabled']] = disabled, _e), (_f = {}, _f[styles['prefix--with-value']] = props.value, _f)), children: prefix })), (!label || labelInsideInput) && (jsx("label", { htmlFor: uniqueId, className: classNames(styles.placeholder, (_g = {}, _g[styles['placeholder--with-prefix']] = prefix, _g), (_h = {}, _h[styles['placeholder--with-error']] = error, _h)), children: labelInsideInput ? label : placeholder }))] }), error && (jsx("p", { id: "".concat(uniqueId, "-error"), className: "p-p--small tc-red-500 w100 ".concat(styles.error), children: error }))] }));
 });
 export { Input };

package/dist/esm/components/input/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../../src/lib/components/input/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport classnames from 'classnames';\nimport generateId from '../../util/generateId';\n\nimport styles from './style.module.scss';\n\n// Something weird is going on with enterKeyHint that makes it a required field under certain circumstances. The & Omit<…> and & Pick<…> is a hacky way to go around that.\nexport type InputProps = Omit<JSX.IntrinsicElements['input'], 'enterKeyHint'> &\n Partial<Pick<JSX.IntrinsicElements['input'], 'enterKeyHint'>> & {\n error?: string \| boolean;\n prefix?: string;\n label?: string;\n id?: string;\n hideLabel?: boolean;\n labelInsideInput?: boolean;\n };\n\nexport const Input = React.forwardRef(\n (\n {\n className,\n placeholder,\n label,\n id,\n prefix,\n error,\n disabled,\n hideLabel = false,\n labelInsideInput = false,\n ...props\n }: InputProps,\n ref?: React.ForwardedRef<HTMLInputElement>\n ) => {\n const [uniqueId] = useState(id ?? generateId());\n\n return (\n <div className={`${styles.container} ${className ?? ''}`}>\n {label && !labelInsideInput && (\n <label\n htmlFor={uniqueId}\n className={classnames('p-p', styles.label, {\n [styles['label--with-error']]: error,\n 'sr-only': hideLabel,\n })}\n >\n {label}\n </label>\n )}\n <div style={{ position: 'relative' }}>\n <input\n id={uniqueId}\n data-testid=\"ds-input-input\"\n type=\"text\"\n ref={ref}\n className={classnames(\n error ? 'p-input--error' : 'p-input',\n (!label \|\| labelInsideInput) &&\n placeholder &&\n placeholder.length > 0\n ? styles.input\n : styles['input--no-placeholder'],\n {\n [styles['input--with-prefix']]: prefix,\n [styles['input--with-inside-label']]: labelInsideInput,\n }\n )}\n placeholder={label \|\| labelInsideInput ? placeholder : ' '}\n disabled={disabled}\n aria-invalid={!!error}\n aria-errormessage={error ? `${uniqueId}-error` : undefined}\n {...props}\n />\n {prefix && (\n <span\n className={classnames(\n styles.prefix,\n { [styles['prefix--with-error']]: error },\n { [styles['prefix--disabled']]: disabled }\n )}\n >\n {prefix}\n </span>\n )}\n {(!label \|\| labelInsideInput) && (\n <label\n htmlFor={uniqueId}\n className={classnames(\n styles.placeholder,\n { [styles['placeholder--with-prefix']]: prefix },\n { [styles['placeholder--with-error']]: error }\n )}\n >\n {labelInsideInput ? label : placeholder}\n </label>\n )}\n </div>\n {error && (\n <p\n id={`${uniqueId}-error`}\n className={`p-p--small tc-red-500 w100 ${styles.error}`}\n >\n {error}\n </p>\n )}\n </div>\n );\n }\n);\n"],"names":["React","_jsxs","_jsx","classnames"],"mappings":";;;;;;;;;;;IAiBa,KAAK,GAAGA,cAAK,CAAC,UAAU,CACnC,UACE,EAWa,EACb,GAA0C;;IAXxC,IAAA,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,KAAK,WAAA,EACL,EAAE,QAAA,EACF,MAAM,YAAA,EACN,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,wBAAwB,EAAxB,gBAAgB,mBAAG,KAAK,KAAA,EACrB,KAAK,cAVV,2GAWC,CADS;IAIH,IAAA,QAAQ,GAAI,QAAQ,CAAC,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,UAAU,EAAE,CAAC,GAAhC,CAAiC;IAEhD,QACEC,cAAK,SAAS,EAAE,UAAG,MAAM,CAAC,SAAS,cAAI,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,CAAE,aACrD,KAAK,IAAI,CAAC,gBAAgB,KACzBC,eACE,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAEC,UAAU,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK;oBACvC,GAAC,MAAM,CAAC,mBAAmB,CAAC,IAAG,KAAK;oBACpC,aAAS,GAAE,SAAS;wBACpB,YAED,KAAK,GACA,CACT,EACDF,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,aAClCC,wBACE,EAAE,EAAE,QAAQ,iBACA,gBAAgB,EAC5B,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,UAAU,CACnB,KAAK,GAAG,gBAAgB,GAAG,SAAS,EACpC,CAAC,CAAC,KAAK,IAAI,gBAAgB;4BACzB,WAAW;4BACX,WAAW,CAAC,MAAM,GAAG,CAAC;8BACpB,MAAM,CAAC,KAAK;8BACZ,MAAM,CAAC,uBAAuB,CAAC;4BAEjC,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,MAAM;4BACtC,GAAC,MAAM,CAAC,0BAA0B,CAAC,IAAG,gBAAgB;gCAEzD,EACD,WAAW,EAAE,KAAK,IAAI,gBAAgB,GAAG,WAAW,GAAG,GAAG,EAC1D,QAAQ,EAAE,QAAQ,kBACJ,CAAC,CAAC,KAAK,uBACF,KAAK,GAAG,UAAG,QAAQ,WAAQ,GAAG,SAAS,IACtD,KAAK,EACT,EACD,MAAM,KACLD,cACE,SAAS,EAAEC,UAAU,CACnB,MAAM,CAAC,MAAM,YACX,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,KAAK,iBACrC,GAAC,MAAM,CAAC,kBAAkB,CAAC,IAAG,QAAQ,~~MACzC~~,YAEA,MAAM,GACF,CACR,EACA,CAAC,CAAC,KAAK,IAAI,gBAAgB,MAC1BD,eACE,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAEC,UAAU,CACnB,MAAM,CAAC,WAAW,YAChB,GAAC,MAAM,CAAC,0BAA0B,CAAC,IAAG,MAAM,iBAC5C,GAAC,MAAM,CAAC,yBAAyB,CAAC,IAAG,KAAK,MAC7C,YAEA,gBAAgB,GAAG,KAAK,GAAG,WAAW,GACjC,CACT,IACG,EACL,KAAK,KACJD,WACE,EAAE,EAAE,UAAG,QAAQ,WAAQ,EACvB,SAAS,EAAE,qCAA8B,MAAM,CAAC,KAAK,CAAE,YAEtD,KAAK,GACJ,CACL,IACG,EACN;AACJ,CAAC;;;;"}
1	+ {"version":3,"file":"index.js","sources":["../../../../../src/lib/components/input/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport classnames from 'classnames';\nimport generateId from '../../util/generateId';\n\nimport styles from './style.module.scss';\n\n// Something weird is going on with enterKeyHint that makes it a required field under certain circumstances. The & Omit<…> and & Pick<…> is a hacky way to go around that.\nexport type InputProps = Omit<JSX.IntrinsicElements['input'], 'enterKeyHint'> &\n Partial<Pick<JSX.IntrinsicElements['input'], 'enterKeyHint'>> & {\n error?: string \| boolean;\n prefix?: string;\n label?: string;\n id?: string;\n hideLabel?: boolean;\n labelInsideInput?: boolean;\n };\n\nexport const Input = React.forwardRef(\n (\n {\n className,\n placeholder,\n label,\n id,\n prefix,\n error,\n disabled,\n hideLabel = false,\n labelInsideInput = false,\n ...props\n }: InputProps,\n ref?: React.ForwardedRef<HTMLInputElement>\n ) => {\n const [uniqueId] = useState(id ?? generateId());\n\n return (\n <div className={`${styles.container} ${className ?? ''}`}>\n {label && !labelInsideInput && (\n <label\n htmlFor={uniqueId}\n className={classnames('p-p', styles.label, {\n [styles['label--with-error']]: error,\n 'sr-only': hideLabel,\n })}\n >\n {label}\n </label>\n )}\n <div style={{ position: 'relative' }}>\n <input\n id={uniqueId}\n data-testid=\"ds-input-input\"\n type=\"text\"\n ref={ref}\n className={classnames(\n error ? 'p-input--error' : 'p-input',\n (!label \|\| labelInsideInput) &&\n placeholder &&\n placeholder.length > 0\n ? styles.input\n : styles['input--no-placeholder'],\n {\n [styles['input--with-prefix']]: prefix,\n [styles['input--with-inside-label']]: labelInsideInput,\n }\n )}\n placeholder={label \|\| labelInsideInput ? placeholder : ' '}\n disabled={disabled}\n aria-invalid={!!error}\n aria-errormessage={error ? `${uniqueId}-error` : undefined}\n {...props}\n />\n {prefix && (\n <span\n className={classnames(\n styles.prefix,\n { [styles['prefix--with-error']]: error },\n { [styles['prefix--disabled']]: disabled },\n { [styles['prefix--with-value']]: props.value }\n )}\n >\n {prefix}\n </span>\n )}\n {(!label \|\| labelInsideInput) && (\n <label\n htmlFor={uniqueId}\n className={classnames(\n styles.placeholder,\n { [styles['placeholder--with-prefix']]: prefix },\n { [styles['placeholder--with-error']]: error }\n )}\n >\n {labelInsideInput ? label : placeholder}\n </label>\n )}\n </div>\n {error && (\n <p\n id={`${uniqueId}-error`}\n className={`p-p--small tc-red-500 w100 ${styles.error}`}\n >\n {error}\n </p>\n )}\n </div>\n );\n }\n);\n"],"names":["React","_jsxs","_jsx","classnames"],"mappings":";;;;;;;;;;;IAiBa,KAAK,GAAGA,cAAK,CAAC,UAAU,CACnC,UACE,EAWa,EACb,GAA0C;;IAXxC,IAAA,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,KAAK,WAAA,EACL,EAAE,QAAA,EACF,MAAM,YAAA,EACN,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,wBAAwB,EAAxB,gBAAgB,mBAAG,KAAK,KAAA,EACrB,KAAK,cAVV,2GAWC,CADS;IAIH,IAAA,QAAQ,GAAI,QAAQ,CAAC,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,UAAU,EAAE,CAAC,GAAhC,CAAiC;IAEhD,QACEC,cAAK,SAAS,EAAE,UAAG,MAAM,CAAC,SAAS,cAAI,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,CAAE,aACrD,KAAK,IAAI,CAAC,gBAAgB,KACzBC,eACE,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAEC,UAAU,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK;oBACvC,GAAC,MAAM,CAAC,mBAAmB,CAAC,IAAG,KAAK;oBACpC,aAAS,GAAE,SAAS;wBACpB,YAED,KAAK,GACA,CACT,EACDF,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,aAClCC,wBACE,EAAE,EAAE,QAAQ,iBACA,gBAAgB,EAC5B,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,UAAU,CACnB,KAAK,GAAG,gBAAgB,GAAG,SAAS,EACpC,CAAC,CAAC,KAAK,IAAI,gBAAgB;4BACzB,WAAW;4BACX,WAAW,CAAC,MAAM,GAAG,CAAC;8BACpB,MAAM,CAAC,KAAK;8BACZ,MAAM,CAAC,uBAAuB,CAAC;4BAEjC,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,MAAM;4BACtC,GAAC,MAAM,CAAC,0BAA0B,CAAC,IAAG,gBAAgB;gCAEzD,EACD,WAAW,EAAE,KAAK,IAAI,gBAAgB,GAAG,WAAW,GAAG,GAAG,EAC1D,QAAQ,EAAE,QAAQ,kBACJ,CAAC,CAAC,KAAK,uBACF,KAAK,GAAG,UAAG,QAAQ,WAAQ,GAAG,SAAS,IACtD,KAAK,EACT,EACD,MAAM,KACLD,cACE,SAAS,EAAEC,UAAU,CACnB,MAAM,CAAC,MAAM,YACX,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,KAAK,iBACrC,GAAC,MAAM,CAAC,kBAAkB,CAAC,IAAG,QAAQ,iBACtC,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,KAAK,CAAC,KAAK,MAC9C,YAEA,MAAM,GACF,CACR,EACA,CAAC,CAAC,KAAK,IAAI,gBAAgB,MAC1BD,eACE,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAEC,UAAU,CACnB,MAAM,CAAC,WAAW,YAChB,GAAC,MAAM,CAAC,0BAA0B,CAAC,IAAG,MAAM,iBAC5C,GAAC,MAAM,CAAC,yBAAyB,CAAC,IAAG,KAAK,MAC7C,YAEA,gBAAgB,GAAG,KAAK,GAAG,WAAW,GACjC,CACT,IACG,EACL,KAAK,KACJD,WACE,EAAE,EAAE,UAAG,QAAQ,WAAQ,EACvB,SAAS,EAAE,qCAA8B,MAAM,CAAC,KAAK,CAAE,YAEtD,KAAK,GACJ,CACL,IACG,EACN;AACJ,CAAC;;;;"}

package/dist/esm/components/input/input.stories.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { a as __assign } from '../../tslib.es6-a39f91fc.js';
 import { jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { Input } from './index.js';
-import { s as sharedConfig } from '../../config-4b5ffe4f.js';
+import { s as sharedConfig } from '../../config-bc609993.js';
 import '../../index-6ea95111.js';
 import '../../index-69a46657.js';
 import '../../style-inject.es-1f59c1d0.js';
@@ -11,13 +11,13 @@ var story = __assign(__assign({ title: 'JSX/Inputs/Input', component: Input }, s
         componentSubtitle: 'The default input component is used to gather informations from the user.'
     } });
 var InputStory = function (_a) {
-    var onChange = _a.onChange, className = _a.className, placeholder = _a.placeholder, value = _a.value, label = _a.label, hideLabel = _a.hideLabel, labelInsideInput = _a.labelInsideInput, prefix = _a.prefix, error = _a.error;
+    var onChange = _a.onChange, className = _a.className, placeholder = _a.placeholder, value = _a.value, label = _a.label, hideLabel = _a.hideLabel, labelInsideInput = _a.labelInsideInput, prefix = _a.prefix, error = _a.error, disabled = _a.disabled;
     var _b = useState(value), newValue = _b[0], setValue = _b[1];
     var handleOnChange = function (event) {
         setValue(event.target.value);
         onChange === null || onChange === void 0 ? void 0 : onChange(event);
     };
-    return (jsx(Input, { onChange: handleOnChange, value: newValue, className: className, placeholder: placeholder, label: label, hideLabel: hideLabel, labelInsideInput: labelInsideInput, prefix: prefix, error: error }));
+    return (jsx(Input, { onChange: handleOnChange, value: newValue, className: className, placeholder: placeholder, label: label, hideLabel: hideLabel, labelInsideInput: labelInsideInput, prefix: prefix, error: error, disabled: disabled }));
 };
 InputStory.storyName = 'Input';

package/dist/esm/components/input/input.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input.stories.js","sources":["../../../../../src/lib/components/input/input.stories.tsx"],"sourcesContent":["\nimport { ChangeEvent, useState } from 'react';\nimport { Input, InputProps } from '.';\nimport sharedConfig from './stories/config';\n\nconst story = {\n title: 'JSX/Inputs/Input',\n component: Input,\n ...sharedConfig,\n parameters: {\n componentSubtitle: 'The default input component is used to gather informations from the user.'\n }\n};\n\nexport const InputStory = ({ \n onChange,\n className,\n placeholder,\n value,\n label,\n hideLabel,\n labelInsideInput,\n prefix,\n error\n}: InputProps) => {\n const [newValue, setValue] = useState(value);\n\n const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {\n setValue(event.target.value)\n onChange?.(event);\n }\n\n return (\n <Input \n onChange={handleOnChange}\n value={newValue}\n className={className}\n placeholder={placeholder}\n label={label}\n hideLabel={hideLabel}\n labelInsideInput={labelInsideInput}\n prefix={prefix}\n error={error}\n />\n );\n};\n\nInputStory.storyName = 'Input';\n\nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;;;;;IAKM,KAAK,uBACT,KAAK,EAAE,kBAAkB,EACzB,SAAS,EAAE,KAAK,IACb,YAAY,KACf,UAAU,EAAE;QACV,iBAAiB,EAAE,2EAA2E;KAC/F,IACD;IAEW,UAAU,GAAG,UAAC,~~EAUd~~;~~QATX~~,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,KAAK,WAAA,EACL,KAAK,WAAA,EACL,SAAS,eAAA,EACT,gBAAgB,sBAAA,EAChB,MAAM,YAAA,EACN,KAAK,WAAA;~~IAEC~~,IAAA,KAAuB,QAAQ,CAAC,KAAK,CAAC,EAArC,QAAQ,QAAA,EAAE,QAAQ,QAAmB,CAAC;IAE7C,IAAM,cAAc,GAAG,UAAC,KAAoC;QAC1D,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;QAC5B,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,KAAK,CAAC,CAAC;KACnB,CAAA;IAED,QACEA,IAAC,KAAK,IACJ,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,QAAQ,EACf,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,~~GACZ~~,EACF;AACJ,EAAE;AAEF,UAAU,CAAC,SAAS,GAAG,OAAO;;;;;"}
1	+ {"version":3,"file":"input.stories.js","sources":["../../../../../src/lib/components/input/input.stories.tsx"],"sourcesContent":["\nimport { ChangeEvent, useState } from 'react';\nimport { Input, InputProps } from '.';\nimport sharedConfig from './stories/config';\n\nconst story = {\n title: 'JSX/Inputs/Input',\n component: Input,\n ...sharedConfig,\n parameters: {\n componentSubtitle: 'The default input component is used to gather informations from the user.'\n }\n};\n\nexport const InputStory = ({ \n onChange,\n className,\n placeholder,\n value,\n label,\n hideLabel,\n labelInsideInput,\n prefix,\n error,\n disabled\n}: InputProps) => {\n const [newValue, setValue] = useState(value);\n\n const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {\n setValue(event.target.value)\n onChange?.(event);\n }\n\n return (\n <Input \n onChange={handleOnChange}\n value={newValue}\n className={className}\n placeholder={placeholder}\n label={label}\n hideLabel={hideLabel}\n labelInsideInput={labelInsideInput}\n prefix={prefix}\n error={error}\n disabled={disabled}\n />\n );\n};\n\nInputStory.storyName = 'Input';\n\nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;;;;;IAKM,KAAK,uBACT,KAAK,EAAE,kBAAkB,EACzB,SAAS,EAAE,KAAK,IACb,YAAY,KACf,UAAU,EAAE;QACV,iBAAiB,EAAE,2EAA2E;KAC/F,IACD;IAEW,UAAU,GAAG,UAAC,EAWd;QAVX,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,KAAK,WAAA,EACL,KAAK,WAAA,EACL,SAAS,eAAA,EACT,gBAAgB,sBAAA,EAChB,MAAM,YAAA,EACN,KAAK,WAAA,EACL,QAAQ,cAAA;IAEF,IAAA,KAAuB,QAAQ,CAAC,KAAK,CAAC,EAArC,QAAQ,QAAA,EAAE,QAAQ,QAAmB,CAAC;IAE7C,IAAM,cAAc,GAAG,UAAC,KAAoC;QAC1D,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;QAC5B,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,KAAK,CAAC,CAAC;KACnB,CAAA;IAED,QACEA,IAAC,KAAK,IACJ,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,QAAQ,EACf,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,GAClB,EACF;AACJ,EAAE;AAEF,UAAU,CAAC,SAAS,GAAG,OAAO;;;;;"}

package/dist/esm/components/input/toggle/index.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { c as classNames } from '../../../index-6ea95111.js';
 import { s as styleInject } from '../../../style-inject.es-1f59c1d0.js';
-var css_248z = ".styles-module_container__F0d5Q {\n  max-width: 100%;\n}\n\n.styles-module_toggleContainer__2yz_j {\n  position: relative;\n  width: 40px;\n  height: 12px;\n}\n\n.styles-module_label__3EAX_ {\n  align-items: center;\n}\n\n.styles-module_toggle__2sL88 {\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--ds-neutral-400);\n  transition: all 0.3s ease-in-out;\n  border-radius: 100px;\n}\n.styles-module_toggle__2sL88:before {\n  position: absolute;\n  content: \"\";\n  height: 20px;\n  width: 20px;\n  left: 0;\n  bottom: -4px;\n  background: var(--ds-neutral-600);\n  transition: 0.3s ease-in-out;\n  transition-property: background-color, outline, transform;\n  outline-color: var(--ds-purple-500);\n  border-radius: 50%;\n}\n\n.styles-module_input__2sUF3 {\n  opacity: 0;\n}\n.styles-module_input__2sUF3:checked + .styles-module_toggle__2sL88 {\n  background: var(--ds-purple-300);\n}\n.styles-module_input__2sUF3:checked + .styles-module_toggle__2sL88:before {\n  background: var(--ds-purple-600);\n}\n.styles-module_input__2sUF3:disabled + .styles-module_toggle__2sL88 {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n.styles-module_input__2sUF3:focus-visible ~ .styles-module_toggle__2sL88:before {\n  outline: 4px solid var(--ds-purple-500);\n}\n.styles-module_input__2sUF3:checked + .styles-module_toggle__2sL88:before {\n  transform: translateX(20px);\n}";
+var css_248z = ".styles-module_container__F0d5Q {\n  max-width: 100%;\n}\n\n.styles-module_toggleContainer__2yz_j {\n  position: relative;\n  width: 40px;\n  height: 12px;\n}\n\n.styles-module_label__3EAX_ {\n  align-items: center;\n}\n\n.styles-module_toggle__2sL88 {\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--ds-neutral-400);\n  transition: all 0.3s ease-in-out;\n  border-radius: 100px;\n}\n.styles-module_toggle__2sL88:before {\n  position: absolute;\n  content: \"\";\n  height: 20px;\n  width: 20px;\n  left: 0;\n  bottom: -4px;\n  background: var(--ds-neutral-500);\n  transition: 0.3s ease-in-out;\n  transition-property: background-color, outline, transform;\n  outline-color: var(--ds-neutral-500);\n  border-radius: 50%;\n}\n\n.styles-module_input__2sUF3 {\n  opacity: 0;\n}\n.styles-module_input__2sUF3:checked + .styles-module_toggle__2sL88 {\n  background: var(--ds-purple-400);\n}\n.styles-module_input__2sUF3:checked + .styles-module_toggle__2sL88:before {\n  background: var(--ds-purple-600);\n}\n.styles-module_input__2sUF3:checked:focus-visible ~ .styles-module_toggle__2sL88:before {\n  outline: 3px solid var(--ds-purple-500);\n}\n.styles-module_input__2sUF3:disabled + .styles-module_toggle__2sL88 {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n.styles-module_input__2sUF3:focus-visible ~ .styles-module_toggle__2sL88:before {\n  outline: 3px solid var(--ds-neutral-600);\n}\n.styles-module_input__2sUF3:checked + .styles-module_toggle__2sL88:before {\n  transform: translateX(20px);\n}";
 var styles = {"container":"styles-module_container__F0d5Q","toggleContainer":"styles-module_toggleContainer__2yz_j","label":"styles-module_label__3EAX_","toggle":"styles-module_toggle__2sL88","input":"styles-module_input__2sUF3"};
 styleInject(css_248z);

package/dist/esm/components/modal/index.stories.js CHANGED Viewed

@@ -100,7 +100,7 @@ var BottomOrRegularModalStory = function (_a) {
         onClose();
         setDisplay(false);
     };
-    return (jsxs(Fragment, { children: [jsx("button", { className: "d-flex p-btn--primary wmn2", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(BottomOrRegularModal, { dismissible: dismissible, className: className, classNames: classNames, title: title, isOpen: display, size: size, onModalScroll: onModalScroll, onClose: handleOnClose, children: jsxs("div", { style: { padding: '0 24px 24px 24px' }, children: [jsx("div", { children: children }), jsx("button", { className: "p-btn--primary mt24 wmn3", onClick: function () { return setDisplay(false); }, children: "Continue" })] }) })] }));
+    return (jsxs(Fragment, { children: [jsx(Button, { className: "wmn2", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(BottomOrRegularModal, { dismissible: dismissible, className: className, classNames: classNames, title: title, isOpen: display, size: size, onModalScroll: onModalScroll, onClose: handleOnClose, children: jsxs("div", { style: { padding: '0 24px 24px 24px' }, children: [jsx("div", { children: children }), jsx("button", { className: "p-btn--primary mt24 wmn3", onClick: function () { return setDisplay(false); }, children: "Continue" })] }) })] }));
 };
 BottomOrRegularModalStory.storyName = 'BottomOrRegularModal';
 var RegularModalStory = function (_a) {
@@ -110,7 +110,7 @@ var RegularModalStory = function (_a) {
         onClose();
         setDisplay(false);
     };
-    return (jsxs(Fragment, { children: ["Regular modals are primary meant to be used on Desktop or Tablet environment. The modal will appear in the middle of the screen and the user will be able to dismiss them using the top left \"X\" icon. If you want to use it for Mobile only, you should check BottomModal instead. Want to use either Regular Modal or Bottom Modal based on the screen width? You can use Bottom or Regular modal.", jsx("button", { className: "d-flex p-btn--primary wmn2 mt24", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(RegularModal, { title: title, isOpen: display, onClose: handleOnClose, children: jsxs("div", { style: { padding: '0 24px 24px 24px' }, children: [jsx("div", { children: children }), jsx("button", { className: "p-btn--primary mt24 wmn3", onClick: function () { return setDisplay(false); }, children: "Continue" })] }) })] }));
+    return (jsxs(Fragment, { children: ["Regular modals are primary meant to be used on Desktop or Tablet environment. The modal will appear in the middle of the screen and the user will be able to dismiss them using the top left \"X\" icon. If you want to use it for Mobile only, you should check BottomModal instead. Want to use either Regular Modal or Bottom Modal based on the screen width? You can use Bottom or Regular modal.", jsx(Button, { className: "wmn2 mt24", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(RegularModal, { title: title, isOpen: display, onClose: handleOnClose, children: jsxs("div", { style: { padding: '0 24px 24px 24px' }, children: [jsx("div", { children: children }), jsx("button", { className: "p-btn--primary mt24 wmn3", onClick: function () { return setDisplay(false); }, children: "Continue" })] }) })] }));
 };
 RegularModalStory.storyName = 'RegularModal';
 var BottomModalStory = function (_a) {
@@ -120,7 +120,7 @@ var BottomModalStory = function (_a) {
         onClose();
         setDisplay(false);
     };
-    return (jsxs(Fragment, { children: ["Bottom modals are primary meant to be used on Mobile environment. The modal will appear from the bottom of the screen and the user will be able to dismiss them using the top left \"X\" icon. If you want to use it for Desktop only, you should check Regular modal instead. Want to use either Regular Modal or Bottom Modal based on the screen width? You can use Bottom or Regular modal.", jsx("button", { className: "d-flex p-btn--primary wmn2 mt24", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(BottomModal, { title: title, isOpen: display, onClose: handleOnClose, children: jsxs("div", { style: { padding: '0 24px 24px 24px' }, children: [jsx("div", { children: children }), jsx("button", { className: "p-btn--primary mt24 wmn3", onClick: function () { return setDisplay(false); }, children: "Continue" })] }) })] }));
+    return (jsxs(Fragment, { children: ["Bottom modals are primary meant to be used on Mobile environment. The modal will appear from the bottom of the screen and the user will be able to dismiss them using the top left \"X\" icon. If you want to use it for Desktop only, you should check Regular modal instead. Want to use either Regular Modal or Bottom Modal based on the screen width? You can use Bottom or Regular modal.", jsx(Button, { className: "wmn2 mt24", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(BottomModal, { title: title, isOpen: display, onClose: handleOnClose, children: jsxs("div", { style: { padding: '0 24px 24px 24px' }, children: [jsx("div", { children: children }), jsx("button", { className: "p-btn--primary mt24 wmn3", onClick: function () { return setDisplay(false); }, children: "Continue" })] }) })] }));
 };
 BottomModalStory.storyName = 'BottomModal';
 var FullScreenModalStory = function (_a) {
@@ -130,7 +130,7 @@ var FullScreenModalStory = function (_a) {
         onClose();
         setDisplay(false);
     };
-    return (jsxs(Fragment, { children: ["Full screen modals are primary meant to be used as blocker screens. The modal will cover the entire screen and the user will be able to dismiss them using the top left \"X\" icon.", jsx("button", { className: "d-flex p-btn--primary wmn2 mt24", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(FullScreenModal, { title: title, isOpen: display, onClose: handleOnClose, children: jsxs("div", { style: { padding: '0 24px 24px 24px' }, children: [jsx("div", { children: children }), jsx("button", { className: "p-btn--primary mt24 wmn3", onClick: function () { return setDisplay(false); }, children: "Continue" })] }) })] }));
+    return (jsxs(Fragment, { children: ["Full screen modals are primary meant to be used as blocker screens. The modal will cover the entire screen and the user will be able to dismiss them using the top left \"X\" icon.", jsx(Button, { className: "wmn2 mt24", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(FullScreenModal, { title: title, isOpen: display, onClose: handleOnClose, children: jsxs("div", { style: { padding: '0 24px 24px 24px' }, children: [jsx("div", { children: children }), jsx("button", { className: "p-btn--primary mt24 wmn3", onClick: function () { return setDisplay(false); }, children: "Continue" })] }) })] }));
 };
 FullScreenModalStory.storyName = 'FullScreenModal';
 var NonDismissibleModal = function (_a) {
@@ -140,7 +140,7 @@ var NonDismissibleModal = function (_a) {
         onClose();
         setDisplay(false);
     };
-    return (jsxs(Fragment, { children: ["Setting the dismissible prop to false will hide the close button and prevent the user from closing it using the escape key or clicking outside. This prop can be useful if we want the user to explicitly interact with the modal options.", jsx("strong", { children: "Warning:" }), " a modal with the dismissible prop can only be closed by changing the isOpen prop to false.", jsx("button", { className: "d-flex p-btn--primary wmn2 mt24", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(BottomOrRegularModal, { dismissible: false, title: title, isOpen: display, onClose: handleOnClose, children: jsxs("div", { style: { padding: '0 24px 24px 24px' }, children: [jsx("div", { children: children }), jsx("button", { className: "p-btn--primary mt24 wmn3", onClick: function () { return setDisplay(false); }, children: "Continue" })] }) })] }));
+    return (jsxs(Fragment, { children: ["Setting the dismissible prop to false will hide the close button and prevent the user from closing it using the escape key or clicking outside. This prop can be useful if we want the user to explicitly interact with the modal options.", jsx("strong", { children: "Warning:" }), " a modal with the dismissible prop can only be closed by changing the isOpen prop to false.", jsx(Button, { className: "wmn2 mt24", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(BottomOrRegularModal, { dismissible: false, title: title, isOpen: display, onClose: handleOnClose, children: jsxs("div", { style: { padding: '0 24px 24px 24px' }, children: [jsx("div", { children: children }), jsx("button", { className: "p-btn--primary mt24 wmn3", onClick: function () { return setDisplay(false); }, children: "Continue" })] }) })] }));
 };
 var ModalWithFooter = function (_a) {
     var children = _a.children, isOpen = _a.isOpen, onClose = _a.onClose, title = _a.title;
@@ -149,7 +149,7 @@ var ModalWithFooter = function (_a) {
         onClose();
         setDisplay(false);
     };
-    return (jsxs(Fragment, { children: [jsx("button", { className: "d-flex p-btn--primary wmn2", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(BottomOrRegularModal, { title: title, isOpen: display, onClose: handleOnClose, footer: jsxs("div", { className: "d-flex fd-row gap8", children: [jsx(Button, { variant: "textColor", className: "w100", onClick: handleOnClose, children: "Skip" }), jsx(Button, { className: "w100", onClick: handleOnClose, children: "Continue" })] }), children: jsx("div", { className: "p24", children: jsx("div", { children: children }) }) })] }));
+    return (jsxs(Fragment, { children: [jsx(Button, { className: "wmn2", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(BottomOrRegularModal, { title: title, isOpen: display, onClose: handleOnClose, footer: jsxs("div", { className: "d-flex fd-row gap8", children: [jsx(Button, { variant: "textBlack", className: "w100", onClick: handleOnClose, children: "Skip" }), jsx(Button, { className: "w100", onClick: handleOnClose, children: "Continue" })] }), children: jsx("div", { className: "p24", children: jsx("div", { children: children }) }) })] }));
 };
 var ModalWithFooterAndScroll = function (_a) {
     var children = _a.children, isOpen = _a.isOpen, onClose = _a.onClose, title = _a.title;
@@ -158,7 +158,7 @@ var ModalWithFooterAndScroll = function (_a) {
         onClose();
         setDisplay(false);
     };
-    return (jsxs(Fragment, { children: [jsx("button", { className: "d-flex p-btn--primary wmn2", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(BottomOrRegularModal, { title: title, isOpen: display, onClose: handleOnClose, footer: jsxs("div", { className: "d-flex fd-row gap8", children: [jsx(Button, { variant: "textColor", className: "w100", onClick: handleOnClose, children: "Skip" }), jsx(Button, { className: "w100", onClick: handleOnClose, children: "Continue" })] }), children: jsx("div", { className: "p24", children: jsxs("div", { children: ["Lorem ipsum dolor sit amet, consectetur adipiscing elit.", jsx("div", { style: { height: '840px' } }), children] }) }) })] }));
+    return (jsxs(Fragment, { children: [jsx(Button, { className: "wmn2", onClick: function () { return setDisplay(true); }, children: "Click to open modal" }), jsx(BottomOrRegularModal, { title: title, isOpen: display, onClose: handleOnClose, footer: jsxs("div", { className: "d-flex fd-row gap8", children: [jsx(Button, { variant: "textBlack", className: "w100", onClick: handleOnClose, children: "Skip" }), jsx(Button, { className: "w100", onClick: handleOnClose, children: "Continue" })] }), children: jsx("div", { className: "p24", children: jsxs("div", { children: ["Lorem ipsum dolor sit amet, consectetur adipiscing elit.", jsx("div", { style: { height: '840px' } }), children] }) }) })] }));
 };
 export default story;

package/dist/esm/components/modal/index.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/modal/index.stories.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { BottomModal, BottomOrRegularModal, Props, RegularModal } from '.';\nimport { Button } from '../button';\nimport { FullScreenModal } from './fullScreenModal';\n\nconst story = {\n title: 'JSX/Modals',\n component: BottomOrRegularModal,\n argTypes: {\n title: {\n description: 'The title that needs to be displayed on the modal',\n },\n isOpen: {\n description:\n 'When set to `true`, the modal is displayed. When set to `false` the modal gets removed',\n },\n dismissible: {\n description: 'The content that gets displayed on the modal',\n },\n className: {\n description: 'Any additional className',\n },\n classNames: {\n description:\n 'Class names for the Modal component and its children elements',\n },\n size: {\n description: 'The size of the modal, either large or default.',\n control: 'radio',\n options: {\n default: 'default',\n large: 'large',\n },\n },\n children: {\n description: 'The content that gets displayed on the modal',\n type: 'text',\n table: {\n type: {\n summary: 'ReactNode',\n },\n },\n },\n onClose: {\n description: 'Callback when the user close the modal',\n action: true,\n table: {\n category: 'Callbacks',\n },\n },\n onModalScroll: {\n description: 'Callback when the user scroll the modal',\n action: true,\n table: {\n category: 'Callbacks',\n },\n },\n },\n args: {\n title: 'Modal title',\n isOpen: false,\n dismissible: true,\n className: '',\n classNames: {\n wrapper: '',\n container: '',\n overlay: '',\n header: '',\n closeButton: '',\n closeButtonIcon: '',\n title: '',\n body: '',\n footer: '',\n },\n children: 'Modal content to be displayed',\n size: 'default',\n },\n parameters: {\n componentSubtitle:\n 'Bottom or Regular modal will automatically choose what’s best to display based on the users screen width.',\n docs: {\n description: {\n component:\n 'Modals are dialog overlays that prevent the user from interacting with the rest of the website until an action is taken or the dialog is dismissed. Modals are purposefully disruptive and should be used thoughtfully and sparingly.',\n },\n },\n },\n};\n\nexport const BottomOrRegularModalStory = ({\n children,\n className,\n classNames,\n dismissible,\n isOpen,\n onClose,\n onModalScroll,\n size,\n title,\n}: Props) => {\n const [display, setDisplay] = useState(isOpen);\n const handleOnClose = () => {\n onClose();\n setDisplay(false);\n };\n\n return (\n <>\n <button\n className=\"d-flex p-btn--primary wmn2\"\n onClick={() => setDisplay(true)}\n >\n Click to open modal\n </button>\n\n <BottomOrRegularModal\n dismissible={dismissible}\n className={className}\n classNames={classNames}\n title={title}\n isOpen={display}\n size={size}\n onModalScroll={onModalScroll}\n onClose={handleOnClose}\n >\n <div style={{ padding: '0 24px 24px 24px' }}>\n <div>{children}</div>\n <button\n className=\"p-btn--primary mt24 wmn3\"\n onClick={() => setDisplay(false)}\n >\n Continue\n </button>\n </div>\n </BottomOrRegularModal>\n </>\n );\n};\n\nBottomOrRegularModalStory.storyName = 'BottomOrRegularModal';\n\nexport const RegularModalStory = ({\n children,\n isOpen,\n onClose,\n title,\n}: Props) => {\n const [display, setDisplay] = useState(isOpen);\n const handleOnClose = () => {\n onClose();\n setDisplay(false);\n };\n\n return (\n <>\n Regular modals are primary meant to be used on Desktop or Tablet\n environment. The modal will appear in the middle of the screen and the\n user will be able to dismiss them using the top left \"X\" icon. If you want\n to use it for Mobile only, you should check BottomModal instead. Want to\n use either Regular Modal or Bottom Modal based on the screen width? You\n can use Bottom or Regular modal.\n <button\n className=\"d-flex p-btn--primary wmn2 mt24\"\n onClick={() => setDisplay(true)}\n >\n Click to open modal\n </button>\n <RegularModal title={title} isOpen={display} onClose={handleOnClose}>\n <div style={{ padding: '0 24px 24px 24px' }}>\n <div>{children}</div>\n <button\n className=\"p-btn--primary mt24 wmn3\"\n onClick={() => setDisplay(false)}\n >\n Continue\n </button>\n </div>\n </RegularModal>\n </>\n );\n};\n\nRegularModalStory.storyName = 'RegularModal';\n\nexport const BottomModalStory = ({\n children,\n isOpen,\n onClose,\n title,\n}: Props) => {\n const [display, setDisplay] = useState(isOpen);\n const handleOnClose = () => {\n onClose();\n setDisplay(false);\n };\n\n return (\n <>\n Bottom modals are primary meant to be used on Mobile environment. The\n modal will appear from the bottom of the screen and the user will be able\n to dismiss them using the top left \"X\" icon. If you want to use it for\n Desktop only, you should check Regular modal instead. Want to use either\n Regular Modal or Bottom Modal based on the screen width? You can use\n Bottom or Regular modal.\n <button\n className=\"d-flex p-btn--primary wmn2 mt24\"\n onClick={() => setDisplay(true)}\n >\n Click to open modal\n </button>\n <BottomModal title={title} isOpen={display} onClose={handleOnClose}>\n <div style={{ padding: '0 24px 24px 24px' }}>\n <div>{children}</div>\n <button\n className=\"p-btn--primary mt24 wmn3\"\n onClick={() => setDisplay(false)}\n >\n Continue\n </button>\n </div>\n </BottomModal>\n </>\n );\n};\n\nBottomModalStory.storyName = 'BottomModal';\n\nexport const FullScreenModalStory = ({\n children,\n isOpen,\n onClose,\n title,\n}: Props) => {\n const [display, setDisplay] = useState(isOpen);\n const handleOnClose = () => {\n onClose();\n setDisplay(false);\n };\n\n return (\n <>\n Full screen modals are primary meant to be used as blocker screens. The\n modal will cover the entire screen and the user will be able to dismiss\n them using the top left \"X\" icon.\n <button\n className=\"d-flex p-btn--primary wmn2 mt24\"\n onClick={() => setDisplay(true)}\n >\n Click to open modal\n </button>\n <FullScreenModal title={title} isOpen={display} onClose={handleOnClose}>\n <div style={{ padding: '0 24px 24px 24px' }}>\n <div>{children}</div>\n\n <button\n className=\"p-btn--primary mt24 wmn3\"\n onClick={() => setDisplay(false)}\n >\n Continue\n </button>\n </div>\n </FullScreenModal>\n </>\n );\n};\n\nFullScreenModalStory.storyName = 'FullScreenModal';\n\nexport const NonDismissibleModal = ({\n children,\n isOpen,\n onClose,\n title,\n}: Props) => {\n const [display, setDisplay] = useState(isOpen);\n const handleOnClose = () => {\n onClose();\n setDisplay(false);\n };\n\n return (\n <>\n Setting the dismissible prop to false will hide the close button and\n prevent the user from closing it using the escape key or clicking outside.\n This prop can be useful if we want the user to explicitly interact with\n the modal options.\n <strong>Warning:</strong> a modal with the dismissible prop can only be\n closed by changing the isOpen prop to false.\n <button\n className=\"d-flex p-btn--primary wmn2 mt24\"\n onClick={() => setDisplay(true)}\n >\n Click to open modal\n </button>\n <BottomOrRegularModal\n dismissible={false}\n title={title}\n isOpen={display}\n onClose={handleOnClose}\n >\n <div style={{ padding: '0 24px 24px 24px' }}>\n <div>{children}</div>\n <button\n className=\"p-btn--primary mt24 wmn3\"\n onClick={() => setDisplay(false)}\n >\n Continue\n </button>\n </div>\n </BottomOrRegularModal>\n </>\n );\n};\n\nexport const ModalWithFooter = ({\n children,\n isOpen,\n onClose,\n title,\n}: Props) => {\n const [display, setDisplay] = useState(isOpen);\n const handleOnClose = () => {\n onClose();\n setDisplay(false);\n };\n\n return (\n <>\n <button\n className=\"d-flex p-btn--primary wmn2\"\n onClick={() => setDisplay(true)}\n >\n Click to open modal\n </button>\n\n <BottomOrRegularModal\n title={title}\n isOpen={display}\n onClose={handleOnClose}\n footer={\n <div className=\"d-flex fd-row gap8\">\n <Button\n variant=\"textColor\"\n className=\"w100\"\n onClick={handleOnClose}\n >\n Skip\n </Button>\n <Button className=\"w100\" onClick={handleOnClose}>\n Continue\n </Button>\n </div>\n }\n >\n <div className=\"p24\">\n <div>{children}</div>\n </div>\n </BottomOrRegularModal>\n </>\n );\n};\n\nexport const ModalWithFooterAndScroll = ({\n children,\n isOpen,\n onClose,\n title,\n}: Props) => {\n const [display, setDisplay] = useState(isOpen);\n const handleOnClose = () => {\n onClose();\n setDisplay(false);\n };\n\n return (\n <>\n <button\n className=\"d-flex p-btn--primary wmn2\"\n onClick={() => setDisplay(true)}\n >\n Click to open modal\n </button>\n\n <BottomOrRegularModal\n title={title}\n isOpen={display}\n onClose={handleOnClose}\n footer={\n <div className=\"d-flex fd-row gap8\">\n <Button\n variant=\"textColor\"\n className=\"w100\"\n onClick={handleOnClose}\n >\n Skip\n </Button>\n <Button className=\"w100\" onClick={handleOnClose}>\n Continue\n </Button>\n </div>\n }\n >\n <div className=\"p24\">\n <div>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n <div style={{ height: '840px' }} />\n {children}\n </div>\n </div>\n </BottomOrRegularModal>\n </>\n );\n};\n\nexport default story;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;IAKM,KAAK,GAAG;IACZ,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,oBAAoB;IAC/B,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,WAAW,EAAE,mDAAmD;SACjE;QACD,MAAM,EAAE;YACN,WAAW,EACT,wFAAwF;SAC3F;QACD,WAAW,EAAE;YACX,WAAW,EAAE,8CAA8C;SAC5D;QACD,SAAS,EAAE;YACT,WAAW,EAAE,0BAA0B;SACxC;QACD,UAAU,EAAE;YACV,WAAW,EACT,+DAA+D;SAClE;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,iDAAiD;YAC9D,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE;gBACP,OAAO,EAAE,SAAS;gBAClB,KAAK,EAAE,OAAO;aACf;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,8CAA8C;YAC3D,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,WAAW;iBACrB;aACF;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,wCAAwC;YACrD,MAAM,EAAE,IAAI;YACZ,KAAK,EAAE;gBACL,QAAQ,EAAE,WAAW;aACtB;SACF;QACD,aAAa,EAAE;YACb,WAAW,EAAE,yCAAyC;YACtD,MAAM,EAAE,IAAI;YACZ,KAAK,EAAE;gBACL,QAAQ,EAAE,WAAW;aACtB;SACF;KACF;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,aAAa;QACpB,MAAM,EAAE,KAAK;QACb,WAAW,EAAE,IAAI;QACjB,SAAS,EAAE,EAAE;QACb,UAAU,EAAE;YACV,OAAO,EAAE,EAAE;YACX,SAAS,EAAE,EAAE;YACb,OAAO,EAAE,EAAE;YACX,MAAM,EAAE,EAAE;YACV,WAAW,EAAE,EAAE;YACf,eAAe,EAAE,EAAE;YACnB,KAAK,EAAE,EAAE;YACT,IAAI,EAAE,EAAE;YACR,MAAM,EAAE,EAAE;SACX;QACD,QAAQ,EAAE,+BAA+B;QACzC,IAAI,EAAE,SAAS;KAChB;IACD,UAAU,EAAE;QACV,iBAAiB,EACf,2GAA2G;QAC7G,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EACP,uOAAuO;aAC1O;SACF;KACF;EACD;IAEW,yBAAyB,GAAG,UAAC,EAUlC;QATN,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,UAAU,gBAAA,EACV,WAAW,iBAAA,EACX,MAAM,YAAA,EACN,OAAO,aAAA,EACP,aAAa,mBAAA,EACb,IAAI,UAAA,EACJ,KAAK,WAAA;IAEC,IAAA,KAAwB,QAAQ,CAAC,MAAM,CAAC,EAAvC,OAAO,QAAA,EAAE,UAAU,QAAoB,CAAC;IAC/C,IAAM,aAAa,GAAG;QACpB,OAAO,EAAE,CAAC;QACV,UAAU,CAAC,KAAK,CAAC,CAAC;KACnB,CAAC;IAEF,QACEA,4BACEC,gBACE,SAAS,EAAC,4BAA4B,EACtC,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,GAAA,oCAGxB,EAETA,IAAC,oBAAoB,IACnB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,EACf,IAAI,EAAE,IAAI,EACV,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,aAAa,YAEtBD,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,kBAAkB,EAAE,aACzCC,uBAAM,QAAQ,GAAO,EACrBA,gBACE,SAAS,EAAC,0BAA0B,EACpC,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,GAAA,yBAGzB,IACL,GACe,IACtB,EACH;AACJ,EAAE;AAEF,yBAAyB,CAAC,SAAS,GAAG,sBAAsB,CAAC;IAEhD,iBAAiB,GAAG,UAAC,EAK1B;QAJN,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,OAAO,aAAA,EACP,KAAK,WAAA;IAEC,IAAA,KAAwB,QAAQ,CAAC,MAAM,CAAC,EAAvC,OAAO,QAAA,EAAE,UAAU,QAAoB,CAAC;IAC/C,IAAM,aAAa,GAAG;QACpB,OAAO,EAAE,CAAC;QACV,UAAU,CAAC,KAAK,CAAC,CAAC;KACnB,CAAC;IAEF,QACED,saAOEC,gBACE,SAAS,EAAC,iCAAiC,EAC3C,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,GAAA,oCAGxB,EACTA,IAAC,YAAY,IAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,aAAa,YACjED,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,kBAAkB,EAAE,aACzCC,uBAAM,QAAQ,GAAO,EACrBA,gBACE,SAAS,EAAC,0BAA0B,EACpC,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,GAAA,yBAGzB,IACL,GACO,IACd,EACH;AACJ,EAAE;AAEF,iBAAiB,CAAC,SAAS,GAAG,cAAc,CAAC;IAEhC,gBAAgB,GAAG,UAAC,EAKzB;QAJN,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,OAAO,aAAA,EACP,KAAK,WAAA;IAEC,IAAA,KAAwB,QAAQ,CAAC,MAAM,CAAC,EAAvC,OAAO,QAAA,EAAE,UAAU,QAAoB,CAAC;IAC/C,IAAM,aAAa,GAAG;QACpB,OAAO,EAAE,CAAC;QACV,UAAU,CAAC,KAAK,CAAC,CAAC;KACnB,CAAC;IAEF,QACED,+ZAOEC,gBACE,SAAS,EAAC,iCAAiC,EAC3C,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,GAAA,oCAGxB,EACTA,IAAC,WAAW,IAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,aAAa,YAChED,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,kBAAkB,EAAE,aACzCC,uBAAM,QAAQ,GAAO,EACrBA,gBACE,SAAS,EAAC,0BAA0B,EACpC,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,GAAA,yBAGzB,IACL,GACM,IACb,EACH;AACJ,EAAE;AAEF,gBAAgB,CAAC,SAAS,GAAG,aAAa,CAAC;IAE9B,oBAAoB,GAAG,UAAC,EAK7B;QAJN,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,OAAO,aAAA,EACP,KAAK,WAAA;IAEC,IAAA,KAAwB,QAAQ,CAAC,MAAM,CAAC,EAAvC,OAAO,QAAA,EAAE,UAAU,QAAoB,CAAC;IAC/C,IAAM,aAAa,GAAG;QACpB,OAAO,EAAE,CAAC;QACV,UAAU,CAAC,KAAK,CAAC,CAAC;KACnB,CAAC;IAEF,QACED,mNAIEC,gBACE,SAAS,EAAC,iCAAiC,EAC3C,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,GAAA,oCAGxB,EACTA,IAAC,eAAe,IAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,aAAa,YACpED,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,kBAAkB,EAAE,aACzCC,uBAAM,QAAQ,GAAO,EAErBA,gBACE,SAAS,EAAC,0BAA0B,EACpC,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,GAAA,yBAGzB,IACL,GACU,IACjB,EACH;AACJ,EAAE;AAEF,oBAAoB,CAAC,SAAS,GAAG,iBAAiB,CAAC;IAEtC,mBAAmB,GAAG,UAAC,EAK5B;QAJN,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,OAAO,aAAA,EACP,KAAK,WAAA;IAEC,IAAA,KAAwB,QAAQ,CAAC,MAAM,CAAC,EAAvC,OAAO,QAAA,EAAE,UAAU,QAAoB,CAAC;IAC/C,IAAM,aAAa,GAAG;QACpB,OAAO,EAAE,CAAC;QACV,UAAU,CAAC,KAAK,CAAC,CAAC;KACnB,CAAC;IAEF,QACED,0QAKEC,uCAAyB,iGAEzBA,gBACE,SAAS,EAAC,iCAAiC,EAC3C,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,GAAA,oCAGxB,EACTA,IAAC,oBAAoB,IACnB,WAAW,EAAE,KAAK,EAClB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,EACf,OAAO,EAAE,aAAa,YAEtBD,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,kBAAkB,EAAE,aACzCC,uBAAM,QAAQ,GAAO,EACrBA,gBACE,SAAS,EAAC,0BAA0B,EACpC,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,GAAA,yBAGzB,IACL,GACe,IACtB,EACH;AACJ,EAAE;IAEW,eAAe,GAAG,UAAC,EAKxB;QAJN,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,OAAO,aAAA,EACP,KAAK,WAAA;IAEC,IAAA,KAAwB,QAAQ,CAAC,MAAM,CAAC,EAAvC,OAAO,QAAA,EAAE,UAAU,QAAoB,CAAC;IAC/C,IAAM,aAAa,GAAG;QACpB,OAAO,EAAE,CAAC;QACV,UAAU,CAAC,KAAK,CAAC,CAAC;KACnB,CAAC;IAEF,QACED,4BACEC,gBACE,SAAS,EAAC,4BAA4B,EACtC,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,GAAA,oCAGxB,EAETA,IAAC,oBAAoB,IACnB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,EACf,OAAO,EAAE,aAAa,EACtB,MAAM,EACJD,cAAK,SAAS,EAAC,oBAAoB,aACjCC,IAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,SAAS,EAAC,MAAM,EAChB,OAAO,EAAE,aAAa,qBAGf,EACTA,IAAC,MAAM,IAAC,SAAS,EAAC,MAAM,EAAC,OAAO,EAAE,aAAa,yBAEtC,IACL,YAGRA,aAAK,SAAS,EAAC,KAAK,YAClBA,uBAAM,QAAQ,GAAO,GACjB,GACe,IACtB,EACH;AACJ,EAAE;IAEW,wBAAwB,GAAG,UAAC,EAKjC;QAJN,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,OAAO,aAAA,EACP,KAAK,WAAA;IAEC,IAAA,KAAwB,QAAQ,CAAC,MAAM,CAAC,EAAvC,OAAO,QAAA,EAAE,UAAU,QAAoB,CAAC;IAC/C,IAAM,aAAa,GAAG;QACpB,OAAO,EAAE,CAAC;QACV,UAAU,CAAC,KAAK,CAAC,CAAC;KACnB,CAAC;IAEF,QACED,4BACEC,gBACE,SAAS,EAAC,4BAA4B,EACtC,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,GAAA,oCAGxB,EAETA,IAAC,oBAAoB,IACnB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,EACf,OAAO,EAAE,aAAa,EACtB,MAAM,EACJD,cAAK,SAAS,EAAC,oBAAoB,aACjCC,IAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,SAAS,EAAC,MAAM,EAChB,OAAO,EAAE,aAAa,qBAGf,EACTA,IAAC,MAAM,IAAC,SAAS,EAAC,MAAM,EAAC,OAAO,EAAE,aAAa,yBAEtC,IACL,YAGRA,aAAK,SAAS,EAAC,KAAK,YAClBD,qFAEEC,aAAK,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,GAAI,EAClC,QAAQ,IACL,GACF,GACe,IACtB,EACH;AACJ;;;;;"}
1	+ {"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/modal/index.stories.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { BottomModal, BottomOrRegularModal, Props, RegularModal } from '.';\nimport { Button } from '../button';\nimport { FullScreenModal } from './fullScreenModal';\n\nconst story = {\n title: 'JSX/Modals',\n component: BottomOrRegularModal,\n argTypes: {\n title: {\n description: 'The title that needs to be displayed on the modal',\n },\n isOpen: {\n description:\n 'When set to `true`, the modal is displayed. When set to `false` the modal gets removed',\n },\n dismissible: {\n description: 'The content that gets displayed on the modal',\n },\n className: {\n description: 'Any additional className',\n },\n classNames: {\n description:\n 'Class names for the Modal component and its children elements',\n },\n size: {\n description: 'The size of the modal, either large or default.',\n control: 'radio',\n options: {\n default: 'default',\n large: 'large',\n },\n },\n children: {\n description: 'The content that gets displayed on the modal',\n type: 'text',\n table: {\n type: {\n summary: 'ReactNode',\n },\n },\n },\n onClose: {\n description: 'Callback when the user close the modal',\n action: true,\n table: {\n category: 'Callbacks',\n },\n },\n onModalScroll: {\n description: 'Callback when the user scroll the modal',\n action: true,\n table: {\n category: 'Callbacks',\n },\n },\n },\n args: {\n title: 'Modal title',\n isOpen: false,\n dismissible: true,\n className: '',\n classNames: {\n wrapper: '',\n container: '',\n overlay: '',\n header: '',\n closeButton: '',\n closeButtonIcon: '',\n title: '',\n body: '',\n footer: '',\n },\n children: 'Modal content to be displayed',\n size: 'default',\n },\n parameters: {\n componentSubtitle:\n 'Bottom or Regular modal will automatically choose what’s best to display based on the users screen width.',\n docs: {\n description: {\n component:\n 'Modals are dialog overlays that prevent the user from interacting with the rest of the website until an action is taken or the dialog is dismissed. Modals are purposefully disruptive and should be used thoughtfully and sparingly.',\n },\n },\n },\n};\n\nexport const BottomOrRegularModalStory = ({\n children,\n className,\n classNames,\n dismissible,\n isOpen,\n onClose,\n onModalScroll,\n size,\n title,\n}: Props) => {\n const [display, setDisplay] = useState(isOpen);\n const handleOnClose = () => {\n onClose();\n setDisplay(false);\n };\n\n return (\n <>\n <Button\n className=\"wmn2\"\n onClick={() => setDisplay(true)}\n >\n Click to open modal\n </Button>\n\n <BottomOrRegularModal\n dismissible={dismissible}\n className={className}\n classNames={classNames}\n title={title}\n isOpen={display}\n size={size}\n onModalScroll={onModalScroll}\n onClose={handleOnClose}\n >\n <div style={{ padding: '0 24px 24px 24px' }}>\n <div>{children}</div>\n <button\n className=\"p-btn--primary mt24 wmn3\"\n onClick={() => setDisplay(false)}\n >\n Continue\n </button>\n </div>\n </BottomOrRegularModal>\n </>\n );\n};\n\nBottomOrRegularModalStory.storyName = 'BottomOrRegularModal';\n\nexport const RegularModalStory = ({\n children,\n isOpen,\n onClose,\n title,\n}: Props) => {\n const [display, setDisplay] = useState(isOpen);\n const handleOnClose = () => {\n onClose();\n setDisplay(false);\n };\n\n return (\n <>\n Regular modals are primary meant to be used on Desktop or Tablet\n environment. The modal will appear in the middle of the screen and the\n user will be able to dismiss them using the top left \"X\" icon. If you want\n to use it for Mobile only, you should check BottomModal instead. Want to\n use either Regular Modal or Bottom Modal based on the screen width? You\n can use Bottom or Regular modal.\n <Button\n className=\"wmn2 mt24\"\n onClick={() => setDisplay(true)}\n >\n Click to open modal\n </Button>\n <RegularModal title={title} isOpen={display} onClose={handleOnClose}>\n <div style={{ padding: '0 24px 24px 24px' }}>\n <div>{children}</div>\n <button\n className=\"p-btn--primary mt24 wmn3\"\n onClick={() => setDisplay(false)}\n >\n Continue\n </button>\n </div>\n </RegularModal>\n </>\n );\n};\n\nRegularModalStory.storyName = 'RegularModal';\n\nexport const BottomModalStory = ({\n children,\n isOpen,\n onClose,\n title,\n}: Props) => {\n const [display, setDisplay] = useState(isOpen);\n const handleOnClose = () => {\n onClose();\n setDisplay(false);\n };\n\n return (\n <>\n Bottom modals are primary meant to be used on Mobile environment. The\n modal will appear from the bottom of the screen and the user will be able\n to dismiss them using the top left \"X\" icon. If you want to use it for\n Desktop only, you should check Regular modal instead. Want to use either\n Regular Modal or Bottom Modal based on the screen width? You can use\n Bottom or Regular modal.\n <Button\n className=\"wmn2 mt24\"\n onClick={() => setDisplay(true)}\n >\n Click to open modal\n </Button>\n <BottomModal title={title} isOpen={display} onClose={handleOnClose}>\n <div style={{ padding: '0 24px 24px 24px' }}>\n <div>{children}</div>\n <button\n className=\"p-btn--primary mt24 wmn3\"\n onClick={() => setDisplay(false)}\n >\n Continue\n </button>\n </div>\n </BottomModal>\n </>\n );\n};\n\nBottomModalStory.storyName = 'BottomModal';\n\nexport const FullScreenModalStory = ({\n children,\n isOpen,\n onClose,\n title,\n}: Props) => {\n const [display, setDisplay] = useState(isOpen);\n const handleOnClose = () => {\n onClose();\n setDisplay(false);\n };\n\n return (\n <>\n Full screen modals are primary meant to be used as blocker screens. The\n modal will cover the entire screen and the user will be able to dismiss\n them using the top left \"X\" icon.\n <Button\n className=\"wmn2 mt24\"\n onClick={() => setDisplay(true)}\n >\n Click to open modal\n </Button>\n <FullScreenModal title={title} isOpen={display} onClose={handleOnClose}>\n <div style={{ padding: '0 24px 24px 24px' }}>\n <div>{children}</div>\n\n <button\n className=\"p-btn--primary mt24 wmn3\"\n onClick={() => setDisplay(false)}\n >\n Continue\n </button>\n </div>\n </FullScreenModal>\n </>\n );\n};\n\nFullScreenModalStory.storyName = 'FullScreenModal';\n\nexport const NonDismissibleModal = ({\n children,\n isOpen,\n onClose,\n title,\n}: Props) => {\n const [display, setDisplay] = useState(isOpen);\n const handleOnClose = () => {\n onClose();\n setDisplay(false);\n };\n\n return (\n <>\n Setting the dismissible prop to false will hide the close button and\n prevent the user from closing it using the escape key or clicking outside.\n This prop can be useful if we want the user to explicitly interact with\n the modal options.\n <strong>Warning:</strong> a modal with the dismissible prop can only be\n closed by changing the isOpen prop to false.\n <Button\n className=\"wmn2 mt24\"\n onClick={() => setDisplay(true)}\n >\n Click to open modal\n </Button>\n <BottomOrRegularModal\n dismissible={false}\n title={title}\n isOpen={display}\n onClose={handleOnClose}\n >\n <div style={{ padding: '0 24px 24px 24px' }}>\n <div>{children}</div>\n <button\n className=\"p-btn--primary mt24 wmn3\"\n onClick={() => setDisplay(false)}\n >\n Continue\n </button>\n </div>\n </BottomOrRegularModal>\n </>\n );\n};\n\nexport const ModalWithFooter = ({\n children,\n isOpen,\n onClose,\n title,\n}: Props) => {\n const [display, setDisplay] = useState(isOpen);\n const handleOnClose = () => {\n onClose();\n setDisplay(false);\n };\n\n return (\n <>\n <Button\n className=\"wmn2\"\n onClick={() => setDisplay(true)}\n >\n Click to open modal\n </Button>\n\n <BottomOrRegularModal\n title={title}\n isOpen={display}\n onClose={handleOnClose}\n footer={\n <div className=\"d-flex fd-row gap8\">\n <Button\n variant=\"textBlack\"\n className=\"w100\"\n onClick={handleOnClose}\n >\n Skip\n </Button>\n <Button className=\"w100\" onClick={handleOnClose}>\n Continue\n </Button>\n </div>\n }\n >\n <div className=\"p24\">\n <div>{children}</div>\n </div>\n </BottomOrRegularModal>\n </>\n );\n};\n\nexport const ModalWithFooterAndScroll = ({\n children,\n isOpen,\n onClose,\n title,\n}: Props) => {\n const [display, setDisplay] = useState(isOpen);\n const handleOnClose = () => {\n onClose();\n setDisplay(false);\n };\n\n return (\n <>\n <Button\n className=\"wmn2\"\n onClick={() => setDisplay(true)}\n >\n Click to open modal\n </Button>\n\n <BottomOrRegularModal\n title={title}\n isOpen={display}\n onClose={handleOnClose}\n footer={\n <div className=\"d-flex fd-row gap8\">\n <Button\n variant=\"textBlack\"\n className=\"w100\"\n onClick={handleOnClose}\n >\n Skip\n </Button>\n <Button className=\"w100\" onClick={handleOnClose}>\n Continue\n </Button>\n </div>\n }\n >\n <div className=\"p24\">\n <div>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n <div style={{ height: '840px' }} />\n {children}\n </div>\n </div>\n </BottomOrRegularModal>\n </>\n );\n};\n\nexport default story;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/components/segmentedControl/index.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
 import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
-var css_248z = ".style-module_background-container__2Gjka {\n  position: relative;\n  display: inline-block;\n  background-color: var(--ds-primary-100);\n  border-radius: 8px;\n  padding: 0 8px;\n}\n\n.style-module_chip-container__7XeKn {\n  display: flex;\n  align-items: center;\n}\n\n.style-module_chip__3rgLT {\n  cursor: pointer;\n  z-index: 2;\n  padding-left: 16px;\n  padding-right: 16px;\n}\n.style-module_chip__3rgLT:focus {\n  outline-color: var(--ds-purple-600);\n  outline-offset: 2px;\n}\n\n.style-module_select-chip-background__YCAyw {\n  position: absolute;\n  background-color: white;\n  border-radius: 8px;\n  top: 8px;\n  z-index: 1;\n  transition: width 0.3s, left 0.3s;\n}";
+var css_248z = ".style-module_background-container__2Gjka {\n  position: relative;\n  display: inline-block;\n  background-color: var(--ds-purple-100);\n  border-radius: 8px;\n  padding: 0 8px;\n}\n\n.style-module_chip-container__7XeKn {\n  display: flex;\n  align-items: center;\n}\n\n.style-module_chip__3rgLT {\n  cursor: pointer;\n  z-index: 2;\n  padding-left: 16px;\n  padding-right: 16px;\n}\n.style-module_chip__3rgLT:focus {\n  outline-color: var(--ds-purple-600);\n  outline-offset: 2px;\n}\n\n.style-module_select-chip-background__YCAyw {\n  position: absolute;\n  background-color: white;\n  border-radius: 8px;\n  top: 8px;\n  z-index: 1;\n  transition: width 0.3s, left 0.3s;\n}";
 var styles = {"background-container":"style-module_background-container__2Gjka","chip-container":"style-module_chip-container__7XeKn","chip":"style-module_chip__3rgLT","select-chip-background":"style-module_select-chip-background__YCAyw"};
 styleInject(css_248z);

package/dist/esm/components/table/Table.js CHANGED Viewed

@@ -12,7 +12,7 @@ import { TableContents } from './components/TableContents/TableContents.js';
 import { c as classNames } from '../../index-6ea95111.js';
 import { u as useTableNavigation } from '../../useTableNavigation-f929fbc9.js';
 import { TableControls } from './components/TableControls/TableControls.js';
-import { i as isBaseCell, T as TableSection } from '../../TableSection-5277dae1.js';
+import { i as isBaseCell, T as TableSection } from '../../TableSection-018d8e8f.js';
 import { u as useScrollSync } from '../../useScrollSync-b2d28bed.js';
 import './components/TableCell/BaseCell/BaseCell.js';
 import '../icon/icons/CheckThick.js';
@@ -40,8 +40,8 @@ import '../modal/regularModal/index.js';
 import './components/TableContents/Collapsible.js';
 import '../icon/icons/ChevronLeft.js';
-var css_248z = ".Table-module_wrapper__2MMNq {\n  position: relative;\n}\n\n.Table-module_container__3VFLP {\n  overflow-x: auto;\n  overflow-y: hidden;\n  -ms-overflow-style: none;\n  /* IE and Edge */\n  scrollbar-width: none;\n  /* Firefox */\n  -webkit-overflow-scrolling: touch;\n  scroll-snap-type: x mandatory;\n}\n.Table-module_container__3VFLP::-webkit-scrollbar {\n  display: none;\n}\n@media (min-width: 34rem) {\n  .Table-module_container__3VFLP {\n    scroll-snap-type: unset;\n  }\n}\n\n.Table-module_stickyHeader__2uEpP {\n  display: flex;\n  position: sticky;\n  z-index: 9;\n}\n\n@media (max-width: 34rem) {\n  .Table-module_modalContent__1PNgv {\n    min-width: initial;\n  }\n}";
-var styles = {"wrapper":"Table-module_wrapper__2MMNq","container":"Table-module_container__3VFLP","stickyHeader":"Table-module_stickyHeader__2uEpP","modalContent":"Table-module_modalContent__1PNgv"};
+var css_248z = ".Table-module_wrapper__2MMNq {\n  position: relative;\n}\n\n.Table-module_container__3VFLP {\n  overflow-x: auto;\n  overflow-y: hidden;\n  -ms-overflow-style: none;\n  /* IE and Edge */\n  scrollbar-width: none;\n  /* Firefox */\n  -webkit-overflow-scrolling: touch;\n  scroll-snap-type: x mandatory;\n}\n.Table-module_container__3VFLP::-webkit-scrollbar {\n  display: none;\n}\n@media (min-width: 34rem) {\n  .Table-module_container__3VFLP {\n    scroll-snap-type: unset;\n  }\n}\n\n.Table-module_cardButton__3aMuL div {\n  background-color: #FAF8F5;\n}\n.Table-module_cardButton__3aMuL:hover div {\n  border-color: transparent !important;\n  outline-color: transparent !important;\n  box-shadow: none !important;\n  background-color: #FCF7EF !important;\n}\n.Table-module_cardButton__3aMuL:focus-visible div {\n  background-color: #FCF7EF !important;\n}\n\n.Table-module_stickyHeader__2uEpP {\n  display: flex;\n  position: sticky;\n  z-index: 9;\n}\n\n@media (max-width: 34rem) {\n  .Table-module_modalContent__1PNgv {\n    min-width: initial;\n  }\n}";
+var styles = {"wrapper":"Table-module_wrapper__2MMNq","container":"Table-module_container__3VFLP","cardButton":"Table-module_cardButton__3aMuL","stickyHeader":"Table-module_stickyHeader__2uEpP","modalContent":"Table-module_modalContent__1PNgv"};
 styleInject(css_248z);
 var defaultTextOverrides = {
@@ -85,9 +85,8 @@ var Table = function (_a) {
                                 },
                             }
                             : {}), activeCellProps, { imageComponent: imageComponent, isNavigation: true })) })] })) : (jsx("div", { "aria-hidden": true, className: styles.stickyHeader, style: { top: "".concat(stickyHeaderTopOffset, "px") }, children: jsx("div", { className: styles.container, ref: headerRef, children: jsx(TableSection, { cellReplacements: cellReplacements, className: className, hideColumns: hideColumns, hideRows: hideRows, openModal: handleOpenModal, tableCellRows: [(_j = (_h = tableData === null || tableData === void 0 ? void 0 : tableData[0]) === null || _h === void 0 ? void 0 : _h.rows) === null || _j === void 0 ? void 0 : _j[0]], title: title, imageComponent: imageComponent }) }) })), jsx("div", { ref: containerRef, className: classNames(styles.container, 'pb8'), children: jsx(TableContents, { tableData: tableData, title: title, className: className, collapsibleSections: collapsibleSections, hideColumns: hideColumns, hideDetails: hideDetails, hideRows: hideRows, isMobile: isMobile, shouldHideDetails: shouldHideDetails, openModal: handleOpenModal, cellReplacements: cellReplacements, imageComponent: imageComponent }) }), (tableData === null || tableData === void 0 ? void 0 : tableData.length) > 1 && hideDetails && (jsx(Card, { "data-testid": "show-hide-details", classNames: {
-                    buttonWrapper: 'm8 mt32',
+                    buttonWrapper: classNames(styles.cardButton, 'm8 mt32'),
                     title: 'd-flex gap8 ai-center jc-center fw-bold',
-                    wrapper: 'bg-neutral-100',
                 }, title: jsxs(Fragment, { children: [shouldHideDetails
                             ? textOverrides.showDetails
                             : textOverrides.hideDetails, shouldHideDetails ? (jsx(ChevronDownIcon, { size: 20 })) : (jsx(ChevronUpIcon, { size: 20 }))] }), actionIcon: null, dropShadow: false, titleVariant: "small", density: "compact", onClick: function () { return setShouldHideDetails(function (current) { return !current; }); } })), jsx(BottomOrRegularModal, { isOpen: (infoModalData === null || infoModalData === void 0 ? void 0 : infoModalData.body) ? true : false, title: infoModalData === null || infoModalData === void 0 ? void 0 : infoModalData.title, onClose: function () { return setInfoModalData(null); }, children: jsx("div", { className: classNames(styles.modalContent, "pt8 p24 wmn6"), children: modalContentRenderer

package/dist/esm/components/table/Table.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.js","sources":["../../../../../src/lib/components/table/Table.tsx"],"sourcesContent":["import { TableCell } from './components/TableCell/TableCell';\nimport { BottomOrRegularModal } from '../modal';\nimport { ReactNode, useCallback, useRef, useState } from 'react';\nimport { ChevronDownIcon, ChevronUpIcon } from '../icon';\nimport { Card } from '../cards/card';\n\nimport styles from './Table.module.scss';\nimport { useMediaQuery } from '../../hooks/useMediaQuery';\nimport { TableContents } from './components/TableContents/TableContents';\nimport classNames from 'classnames';\nimport { useTableNavigation } from './utils/useTableNavigation/useTableNavigation';\nimport { TableControls } from './components/TableControls/TableControls';\nimport { TableSection } from './components/TableSection/TableSection';\nimport { useScrollSync } from './utils/useScrollSync/useScrollSync';\nimport {\n CellReplacements,\n isBaseCell,\n ModalData,\n ModalFunction,\n TableCellData,\n TableData,\n} from './types';\n\ntype TextOverrides = {\n showDetails?: string;\n hideDetails?: string;\n};\n\nexport interface TableProps {\n cellReplacements?: CellReplacements;\n className?: string;\n collapsibleSections?: boolean;\n hideColumns?: number[];\n hideDetails?: boolean;\n hideRows?: number[];\n imageComponent?: (args: any) => JSX.Element;\n modalContentRenderer?: (content: ReactNode) => ReactNode;\n onModalOpen?: ModalFunction;\n onSelectionChanged?: (index: number) => void;\n stickyHeaderTopOffset?: number;\n tableData: TableData;\n textOverrides?: TextOverrides;\n title: string;\n}\n\nconst defaultTextOverrides = {\n showDetails: 'Show details',\n hideDetails: 'Hide details',\n};\n\nconst Table = ({\n cellReplacements,\n className,\n collapsibleSections,\n hideColumns = [],\n hideDetails,\n hideRows = [],\n imageComponent,\n modalContentRenderer,\n onModalOpen,\n onSelectionChanged,\n stickyHeaderTopOffset = 0,\n tableData,\n textOverrides: definedTextOverrides,\n title,\n}: TableProps) => {\n const textOverrides = { ...defaultTextOverrides, ...definedTextOverrides };\n const isMobile = useMediaQuery('BELOW_MOBILE');\n const [infoModalData, setInfoModalData] = useState<ModalData \| null>(null);\n const [shouldHideDetails, setShouldHideDetails] = useState(true);\n const containerRef = useRef<HTMLDivElement \| null>(null);\n const headerRef = useRef<HTMLDivElement \| null>(null);\n const columnsLength = tableData[0].rows[0].length;\n\n useScrollSync(headerRef, containerRef, !isMobile);\n\n const { activeSection, navigateTable } = useTableNavigation({\n enabled: isMobile,\n containerRef,\n onSelectionChanged,\n });\n\n const titleCell = {\n text: '',\n ...tableData?.[0]?.rows?.[0]?.[0] \|\| {},\n };\n const currentActiveSection = tableData?.[0]?.rows?.[0]?.[activeSection];\n const currentActiveSectionReplacements =\n (currentActiveSection.cellId &&\n cellReplacements?.[currentActiveSection.cellId]) \|\|\n {};\n\n const activeCellProps = {\n ...currentActiveSection,\n ...currentActiveSectionReplacements,\n } as TableCellData;\n\n const handleOpenModal: ModalFunction = useCallback(({ body, title }) => {\n onModalOpen?.({ body, title });\n setInfoModalData({ body, title });\n }, []);\n\n return (\n <div className={classNames(styles.wrapper, 'bg-white')}>\n {isMobile ? (\n <>\n {titleCell?.text && (\n <TableCell\n {...titleCell}\n align='left'\n isNavigation\n isTopLeftCell\n type={undefined}\n />\n )}\n\n <TableControls\n activeSection={activeSection}\n columnsLength={columnsLength}\n navigateTable={navigateTable}\n stickyHeaderTopOffset={stickyHeaderTopOffset}\n >\n <TableCell\n {...(isBaseCell(currentActiveSection)\n ? {\n openModal: (body: ReactNode) =>\n handleOpenModal({\n body,\n title: currentActiveSection?.text,\n }),\n }\n : {})}\n {...activeCellProps}\n imageComponent={imageComponent}\n isNavigation\n />\n </TableControls>\n </>\n ) : (\n <div\n aria-hidden\n className={styles.stickyHeader}\n style={{ top: `${stickyHeaderTopOffset}px` }}\n >\n <div className={styles.container} ref={headerRef}>\n <TableSection\n cellReplacements={cellReplacements}\n className={className}\n hideColumns={hideColumns}\n hideRows={hideRows}\n openModal={handleOpenModal}\n tableCellRows={[tableData?.[0]?.rows?.[0]]}\n title={title}\n imageComponent={imageComponent}\n />\n </div>\n </div>\n )}\n\n <div ref={containerRef} className={classNames(styles.container, 'pb8')}>\n <TableContents\n tableData={tableData}\n title={title}\n className={className}\n collapsibleSections={collapsibleSections}\n hideColumns={hideColumns}\n hideDetails={hideDetails}\n hideRows={hideRows}\n isMobile={isMobile}\n shouldHideDetails={shouldHideDetails}\n openModal={handleOpenModal}\n cellReplacements={cellReplacements}\n imageComponent={imageComponent}\n />\n </div>\n\n {tableData?.length > 1 && hideDetails && (\n <Card\n data-testid=\"show-hide-details\"\n classNames={{\n buttonWrapper: 'm8 mt32',\n title: 'd-flex gap8 ai-center jc-center fw-bold',\n wrapper: 'bg-neutral-100',\n }}\n title={\n <>\n {shouldHideDetails\n ? textOverrides.showDetails\n : textOverrides.hideDetails}\n {shouldHideDetails ? (\n <ChevronDownIcon size={20} />\n ) : (\n <ChevronUpIcon size={20} />\n )}\n </>\n }\n actionIcon={null}\n dropShadow={false}\n titleVariant=\"small\"\n density=\"compact\"\n onClick={() => setShouldHideDetails((current) => !current)}\n />\n )}\n\n <BottomOrRegularModal\n isOpen={infoModalData?.body ? true : false}\n title={infoModalData?.title}\n onClose={() => setInfoModalData(null)}\n >\n <div className={classNames(styles.modalContent, \"pt8 p24 wmn6\")}>\n {modalContentRenderer\n ? modalContentRenderer(infoModalData?.body)\n : infoModalData?.body}\n </div>\n </BottomOrRegularModal>\n </div>\n );\n};\n\nexport { Table };\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
1	+ {"version":3,"file":"Table.js","sources":["../../../../../src/lib/components/table/Table.tsx"],"sourcesContent":["import { TableCell } from './components/TableCell/TableCell';\nimport { BottomOrRegularModal } from '../modal';\nimport { ReactNode, useCallback, useRef, useState } from 'react';\nimport { ChevronDownIcon, ChevronUpIcon } from '../icon';\nimport { Card } from '../cards/card';\n\nimport styles from './Table.module.scss';\nimport { useMediaQuery } from '../../hooks/useMediaQuery';\nimport { TableContents } from './components/TableContents/TableContents';\nimport classNames from 'classnames';\nimport { useTableNavigation } from './utils/useTableNavigation/useTableNavigation';\nimport { TableControls } from './components/TableControls/TableControls';\nimport { TableSection } from './components/TableSection/TableSection';\nimport { useScrollSync } from './utils/useScrollSync/useScrollSync';\nimport {\n CellReplacements,\n isBaseCell,\n ModalData,\n ModalFunction,\n TableCellData,\n TableData,\n} from './types';\n\ntype TextOverrides = {\n showDetails?: string;\n hideDetails?: string;\n};\n\nexport interface TableProps {\n cellReplacements?: CellReplacements;\n className?: string;\n collapsibleSections?: boolean;\n hideColumns?: number[];\n hideDetails?: boolean;\n hideRows?: number[];\n imageComponent?: (args: any) => JSX.Element;\n modalContentRenderer?: (content: ReactNode) => ReactNode;\n onModalOpen?: ModalFunction;\n onSelectionChanged?: (index: number) => void;\n stickyHeaderTopOffset?: number;\n tableData: TableData;\n textOverrides?: TextOverrides;\n title: string;\n}\n\nconst defaultTextOverrides = {\n showDetails: 'Show details',\n hideDetails: 'Hide details',\n};\n\nconst Table = ({\n cellReplacements,\n className,\n collapsibleSections,\n hideColumns = [],\n hideDetails,\n hideRows = [],\n imageComponent,\n modalContentRenderer,\n onModalOpen,\n onSelectionChanged,\n stickyHeaderTopOffset = 0,\n tableData,\n textOverrides: definedTextOverrides,\n title,\n}: TableProps) => {\n const textOverrides = { ...defaultTextOverrides, ...definedTextOverrides };\n const isMobile = useMediaQuery('BELOW_MOBILE');\n const [infoModalData, setInfoModalData] = useState<ModalData \| null>(null);\n const [shouldHideDetails, setShouldHideDetails] = useState(true);\n const containerRef = useRef<HTMLDivElement \| null>(null);\n const headerRef = useRef<HTMLDivElement \| null>(null);\n const columnsLength = tableData[0].rows[0].length;\n\n useScrollSync(headerRef, containerRef, !isMobile);\n\n const { activeSection, navigateTable } = useTableNavigation({\n enabled: isMobile,\n containerRef,\n onSelectionChanged,\n });\n\n const titleCell = {\n text: '',\n ...tableData?.[0]?.rows?.[0]?.[0] \|\| {},\n };\n const currentActiveSection = tableData?.[0]?.rows?.[0]?.[activeSection];\n const currentActiveSectionReplacements =\n (currentActiveSection.cellId &&\n cellReplacements?.[currentActiveSection.cellId]) \|\|\n {};\n\n const activeCellProps = {\n ...currentActiveSection,\n ...currentActiveSectionReplacements,\n } as TableCellData;\n\n const handleOpenModal: ModalFunction = useCallback(({ body, title }) => {\n onModalOpen?.({ body, title });\n setInfoModalData({ body, title });\n }, []);\n\n return (\n <div className={classNames(styles.wrapper, 'bg-white')}>\n {isMobile ? (\n <>\n {titleCell?.text && (\n <TableCell\n {...titleCell}\n align='left'\n isNavigation\n isTopLeftCell\n type={undefined}\n />\n )}\n\n <TableControls\n activeSection={activeSection}\n columnsLength={columnsLength}\n navigateTable={navigateTable}\n stickyHeaderTopOffset={stickyHeaderTopOffset}\n >\n <TableCell\n {...(isBaseCell(currentActiveSection)\n ? {\n openModal: (body: ReactNode) =>\n handleOpenModal({\n body,\n title: currentActiveSection?.text,\n }),\n }\n : {})}\n {...activeCellProps}\n imageComponent={imageComponent}\n isNavigation\n />\n </TableControls>\n </>\n ) : (\n <div\n aria-hidden\n className={styles.stickyHeader}\n style={{ top: `${stickyHeaderTopOffset}px` }}\n >\n <div className={styles.container} ref={headerRef}>\n <TableSection\n cellReplacements={cellReplacements}\n className={className}\n hideColumns={hideColumns}\n hideRows={hideRows}\n openModal={handleOpenModal}\n tableCellRows={[tableData?.[0]?.rows?.[0]]}\n title={title}\n imageComponent={imageComponent}\n />\n </div>\n </div>\n )}\n\n <div ref={containerRef} className={classNames(styles.container, 'pb8')}>\n <TableContents\n tableData={tableData}\n title={title}\n className={className}\n collapsibleSections={collapsibleSections}\n hideColumns={hideColumns}\n hideDetails={hideDetails}\n hideRows={hideRows}\n isMobile={isMobile}\n shouldHideDetails={shouldHideDetails}\n openModal={handleOpenModal}\n cellReplacements={cellReplacements}\n imageComponent={imageComponent}\n />\n </div>\n\n {tableData?.length > 1 && hideDetails && (\n <Card\n data-testid=\"show-hide-details\"\n classNames={{\n buttonWrapper: classNames(styles.cardButton, 'm8 mt32'),\n title: 'd-flex gap8 ai-center jc-center fw-bold',\n }}\n title={\n <>\n {shouldHideDetails\n ? textOverrides.showDetails\n : textOverrides.hideDetails}\n {shouldHideDetails ? (\n <ChevronDownIcon size={20} />\n ) : (\n <ChevronUpIcon size={20} />\n )}\n </>\n }\n actionIcon={null}\n dropShadow={false}\n titleVariant=\"small\"\n density=\"compact\"\n onClick={() => setShouldHideDetails((current) => !current)}\n />\n )}\n\n <BottomOrRegularModal\n isOpen={infoModalData?.body ? true : false}\n title={infoModalData?.title}\n onClose={() => setInfoModalData(null)}\n >\n <div className={classNames(styles.modalContent, \"pt8 p24 wmn6\")}>\n {modalContentRenderer\n ? modalContentRenderer(infoModalData?.body)\n : infoModalData?.body}\n </div>\n </BottomOrRegularModal>\n </div>\n );\n};\n\nexport { Table };\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/components/table/Table.stories.js CHANGED Viewed

@@ -37,7 +37,7 @@ import '../icon/icons/ChevronDown.js';
 import '../icon/icons/ChevronUp.js';
 import '../../useMediaQuery-1a3a2432.js';
 import './components/TableContents/TableContents.js';
-import '../../TableSection-5277dae1.js';
+import '../../TableSection-018d8e8f.js';
 import './components/TableContents/Collapsible.js';
 import '../../useTableNavigation-f929fbc9.js';
 import './components/TableControls/TableControls.js';

package/dist/esm/components/table/Table.test.js CHANGED Viewed

@@ -37,7 +37,7 @@ import '../icon/icons/ChevronDown.js';
 import '../icon/icons/ChevronUp.js';
 import '../../useMediaQuery-1a3a2432.js';
 import './components/TableContents/TableContents.js';
-import '../../TableSection-5277dae1.js';
+import '../../TableSection-018d8e8f.js';
 import './components/TableContents/Collapsible.js';
 import '../../useTableNavigation-f929fbc9.js';
 import './components/TableControls/TableControls.js';

package/dist/esm/components/table/components/TableCell/BaseCell/BaseCell.js CHANGED Viewed

@@ -15,8 +15,8 @@ import '../../../../../tslib.es6-a39f91fc.js';
 import '../../../../../_commonjsHelpers-4730bd53.js';
 import '../../../../icon/icons/Info.js';
-var css_248z = "@media (max-width: 34rem) {\n  .BaseCell-module_maxWidth__14Cly {\n    max-width: calc(100% - 64px);\n  }\n}\n\n.BaseCell-module_icon__1775U {\n  margin: 2px;\n}\n\n.BaseCell-module_description__3_kfe {\n  word-break: break-word;\n}\n\n.BaseCell-module_bigWithUnderline__2xx5X {\n  position: relative;\n  display: flex;\n  line-height: 38px;\n  text-decoration: underline;\n  text-decoration-color: #8883D8;\n  text-decoration-thickness: 4px;\n  text-underline-offset: 8px;\n}";
-var styles = {"maxWidth":"BaseCell-module_maxWidth__14Cly","icon":"BaseCell-module_icon__1775U","description":"BaseCell-module_description__3_kfe","bigWithUnderline":"BaseCell-module_bigWithUnderline__2xx5X"};
+var css_248z = "@media (max-width: 34rem) {\n  .BaseCell-module_maxWidth__14Cly {\n    max-width: calc(100% - 64px);\n  }\n}\n\n.BaseCell-module_icon__1775U {\n  margin: 2px;\n}\n\n.BaseCell-module_description__3_kfe {\n  word-break: break-word;\n}";
+var styles = {"maxWidth":"BaseCell-module_maxWidth__14Cly","icon":"BaseCell-module_icon__1775U","description":"BaseCell-module_description__3_kfe"};
 styleInject(css_248z);
 var progressLookup = {
@@ -48,7 +48,7 @@ var BaseCell = function (_a) {
             'jc-center': align === 'center',
         }), children: jsxs("div", { className: classNames('d-flex fd-column', alignClassName, (_b = {},
                 _b[styles.maxWidth] = modalContent && align === 'center',
-                _b)), children: [progressBarValue !== undefined && (jsx(MiniProgressBar, { nFilledBars: progressBarValue })), jsxs("div", { className: "d-flex ai-center", children: [(rating === null || rating === void 0 ? void 0 : rating.value) && (jsx("span", { "data-testid": "table-cell-rating", title: "".concat(rating === null || rating === void 0 ? void 0 : rating.value, " out of 3"), children: validRatingValues.map(function (value) { return (jsx(SelectedIcon, { "aria-hidden": "true", color: value <= (rating === null || rating === void 0 ? void 0 : rating.value) ? 'purple-600' : 'neutral-400', className: styles.icon, size: (rating === null || rating === void 0 ? void 0 : rating.type) === 'zap' ? 16 : 14 }, value)); }) })), checkmarkValue !== undefined && (jsx("span", { className: 'd-inline-block mx8', title: checkmarkValue ? 'Yes' : 'No', children: checkmarkValue ? (jsx(CheckThickIcon, { noMargin: true, "data-testid": "table-cell-boolean-yes", size: 24, "aria-hidden": true, color: "purple-600" })) : (jsx(XIcon, { noMargin: true, "data-testid": "table-cell-boolean-no", size: 24, "aria-hidden": true, color: "neutral-400" })) })), jsxs("div", { className: "d-inline", children: [text && fontVariant === 'NORMAL' && (jsx("div", { className: classNames("p-p d-inline", { 'ml8': align !== 'left' }), "data-testid": "table-cell-text", children: text })), text && fontVariant === 'PRICE' && (jsx("div", { className: "p-h1 p--serif tc-purple-600", "data-testid": "table-cell-content", children: text })), text && fontVariant === 'BIG_WITH_UNDERLINE' && (jsx("h2", { "aria-hidden": true, className: classNames('tc-grey-800 p-h2 p--serif', styles.bigWithUnderline), children: text })), modalContent && openModal && (jsx("span", { className: "ml8", children: jsx(TableInfoButton, { onClick: function () {
+                _b)), children: [progressBarValue !== undefined && (jsx(MiniProgressBar, { nFilledBars: progressBarValue })), jsxs("div", { className: "d-flex ai-center", children: [(rating === null || rating === void 0 ? void 0 : rating.value) && (jsx("span", { "data-testid": "table-cell-rating", title: "".concat(rating === null || rating === void 0 ? void 0 : rating.value, " out of 3"), children: validRatingValues.map(function (value) { return (jsx(SelectedIcon, { "aria-hidden": "true", color: value <= (rating === null || rating === void 0 ? void 0 : rating.value) ? 'neutral-900' : 'neutral-400', className: styles.icon, size: (rating === null || rating === void 0 ? void 0 : rating.type) === 'zap' ? 16 : 14 }, value)); }) })), checkmarkValue !== undefined && (jsx("span", { className: 'd-inline-block mx8', title: checkmarkValue ? 'Yes' : 'No', children: checkmarkValue ? (jsx(CheckThickIcon, { noMargin: true, "data-testid": "table-cell-boolean-yes", size: 24, "aria-hidden": true, color: "neutral-900" })) : (jsx(XIcon, { noMargin: true, "data-testid": "table-cell-boolean-no", size: 24, "aria-hidden": true, color: "neutral-400" })) })), jsxs("div", { className: "d-inline", children: [text && fontVariant === 'NORMAL' && (jsx("div", { className: classNames("p-p d-inline", { 'ml8': align !== 'left' }), "data-testid": "table-cell-text", children: text })), text && fontVariant === 'PRICE' && (jsx("div", { className: "p-h1 p--serif tc-neutral-900", "data-testid": "table-cell-content", children: text })), text && fontVariant === 'TITLE' && (jsx("h2", { "aria-hidden": true, className: "tc-grey-800 p-h2 p--serif", children: text })), modalContent && openModal && (jsx("span", { className: "ml8", children: jsx(TableInfoButton, { onClick: function () {
                                             return openModal({
                                                 title: modalTitle,
                                                 body: modalContent,

package/dist/esm/components/table/components/TableCell/BaseCell/BaseCell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseCell.js","sources":["../../../../../../../../src/lib/components/table/components/TableCell/BaseCell/BaseCell.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport {\n CheckThickIcon,\n StarFilledIcon,\n XIcon,\n ZapFilledIcon,\n} from '../../../../icon';\nimport { ReactNode } from 'react';\nimport styles from './BaseCell.module.scss';\nimport { MiniProgressBar } from './MiniProgressBar/MiniProgressBar';\nimport { TableInfoButton } from '../../../../comparisonTable';\nimport { ModalFunction } from '../../../types';\n\nexport type FontVariant = 'NORMAL' \| '~~BIG_WITH_UNDERLINE~~' \| 'PRICE';\n\nconst progressLookup: Record<string, number> = {\n '30%': 1,\n '50%': 2,\n '70%': 3,\n '75%': 4,\n '80%': 4,\n '90%': 4,\n '75%-90%': 4,\n '75%-100%': 4,\n '80%-100%': 4,\n '100%': 5,\n};\n\nexport type Alignment = 'center' \| 'left' \| 'right';\n\nexport type BaseCellProps = {\n align?: Alignment;\n checkmarkValue?: boolean;\n description?: ReactNode;\n fontVariant?: FontVariant;\n hideProgressBar?: boolean;\n modalTitle?: ReactNode;\n modalContent?: ReactNode;\n openModal?: ModalFunction;\n text?: ReactNode;\n rating?: {\n value: number;\n type: 'zap' \| 'star';\n };\n className?: string;\n dataTestId?: string;\n dataCy?: string;\n};\n\nexport const BaseCell = ({\n align = 'center',\n checkmarkValue,\n description = '',\n fontVariant = 'NORMAL',\n hideProgressBar = false,\n modalTitle = '',\n modalContent = '',\n openModal,\n rating,\n text = '',\n className,\n}: BaseCellProps) => {\n const alignClassName = {\n center: 'ta-center jc-center ai-center',\n left: 'ta-left jc-start',\n right: 'ta-right jc-end ai-end',\n }[align];\n\n const validRatingValues: number[] = [1, 2, 3];\n const SelectedIcon = rating?.type === 'zap' ? ZapFilledIcon : StarFilledIcon;\n\n const progressBarValue =\n !hideProgressBar && typeof text === 'string'\n ? progressLookup[text]\n : undefined;\n\n return (\n <div\n className={classNames(\n className,\n 'd-flex gap8 ai-center', {\n 'jc-center': align === 'center',\n })}\n >\n <div\n className={classNames('d-flex fd-column', alignClassName, {\n [styles.maxWidth]: modalContent && align === 'center',\n })}\n >\n {progressBarValue !== undefined && (\n <MiniProgressBar nFilledBars={progressBarValue} />\n )}\n\n <div className=\"d-flex ai-center\">\n {rating?.value && (\n <span\n data-testid=\"table-cell-rating\"\n title={`${rating?.value} out of 3`}\n >\n {validRatingValues.map((value) => (\n <SelectedIcon\n aria-hidden=\"true\"\n key={value}\n color={value <= rating?.value ? '~~purple~~-~~600~~' : 'neutral-400'}\n className={styles.icon}\n size={rating?.type === 'zap' ? 16 : 14}\n />\n ))}\n </span>\n )}\n\n {checkmarkValue !== undefined && (\n <span className='d-inline-block mx8' title={checkmarkValue ? 'Yes' : 'No'}>\n {checkmarkValue ? (\n <CheckThickIcon\n noMargin\n data-testid=\"table-cell-boolean-yes\"\n size={24}\n aria-hidden\n color=\"~~purple~~-~~600~~\"\n />\n ) : (\n <XIcon\n noMargin\n data-testid=\"table-cell-boolean-no\"\n size={24}\n aria-hidden\n color=\"neutral-400\"\n />\n )}\n </span>\n )}\n\n <div className=\"d-inline\">\n {text && fontVariant === 'NORMAL' && (\n <div className={classNames(\n \"p-p d-inline\",\n { 'ml8': align !== 'left' }\n )}\n data-testid=\"table-cell-text\"\n >\n {text}\n </div>\n )}\n\n {text && fontVariant === 'PRICE' && (\n <div\n className=\"p-h1 p--serif tc-~~purple~~-~~600~~\"\n data-testid=\"table-cell-content\"\n >\n {text}\n </div>\n )}\n\n {text && fontVariant === '~~BIG_WITH_UNDERLINE~~' && (\n <h2\n aria-hidden\n className~~={classNames(\n '~~tc-grey-800 p-h2 p--serif~~',\n styles.bigWithUnderline~~\~~n )}~~\n >\n {text}\n </h2>\n )}\n\n {modalContent && openModal && (\n <span className=\"ml8\">\n <TableInfoButton\n onClick={() =>\n openModal({\n title: modalTitle,\n body: modalContent,\n })\n }\n />\n </span>\n )}\n </div>\n </div>\n\n {description && (\n <div\n className={classNames(\n styles.description,\n 'd-flex p-p--small tc-neutral-600',\n alignClassName\n )}\n >\n {description}\n </div>\n )}\n </div>\n </div>\n );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAeA,IAAM,cAAc,GAA2B;IAC7C,KAAK,EAAE,CAAC;IACR,KAAK,EAAE,CAAC;IACR,KAAK,EAAE,CAAC;IACR,KAAK,EAAE,CAAC;IACR,KAAK,EAAE,CAAC;IACR,KAAK,EAAE,CAAC;IACR,SAAS,EAAE,CAAC;IACZ,UAAU,EAAE,CAAC;IACb,UAAU,EAAE,CAAC;IACb,MAAM,EAAE,CAAC;CACV,CAAC;IAuBW,QAAQ,GAAG,UAAC,EAYT;;QAXd,aAAgB,EAAhB,KAAK,mBAAG,QAAQ,KAAA,EAChB,cAAc,oBAAA,EACd,mBAAgB,EAAhB,WAAW,mBAAG,EAAE,KAAA,EAChB,mBAAsB,EAAtB,WAAW,mBAAG,QAAQ,KAAA,EACtB,uBAAuB,EAAvB,eAAe,mBAAG,KAAK,KAAA,EACvB,kBAAe,EAAf,UAAU,mBAAG,EAAE,KAAA,EACf,oBAAiB,EAAjB,YAAY,mBAAG,EAAE,KAAA,EACjB,SAAS,eAAA,EACT,MAAM,YAAA,EACN,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,SAAS,eAAA;IAET,IAAM,cAAc,GAAG;QACrB,MAAM,EAAE,+BAA+B;QACvC,IAAI,EAAE,kBAAkB;QACxB,KAAK,EAAE,wBAAwB;KAChC,CAAC,KAAK,CAAC,CAAC;IAET,IAAM,iBAAiB,GAAa,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAC9C,IAAM,YAAY,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,MAAK,KAAK,GAAG,aAAa,GAAG,cAAc,CAAC;IAE7E,IAAM,gBAAgB,GACpB,CAAC,eAAe,IAAI,OAAO,IAAI,KAAK,QAAQ;UACxC,cAAc,CAAC,IAAI,CAAC;UACpB,SAAS,CAAC;IAEhB,QACEA,aACE,SAAS,EAAE,UAAU,CACnB,SAAS,EACT,uBAAuB,EAAE;YACzB,WAAW,EAAE,KAAK,KAAK,QAAQ;SAChC,CAAC,YAEFC,cACE,SAAS,EAAE,UAAU,CAAC,kBAAkB,EAAE,cAAc;gBACtD,GAAC,MAAM,CAAC,QAAQ,IAAG,YAAY,IAAI,KAAK,KAAK,QAAQ;oBACrD,aAED,gBAAgB,KAAK,SAAS,KAC7BD,IAAC,eAAe,IAAC,WAAW,EAAE,gBAAgB,GAAI,CACnD,EAEDC,cAAK,SAAS,EAAC,kBAAkB,aAC9B,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,MACZD,6BACc,mBAAmB,EAC/B,KAAK,EAAE,UAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,cAAW,YAEjC,iBAAiB,CAAC,GAAG,CAAC,UAAC,KAAK,IAAK,QAChCA,IAAC,YAAY,mBACC,MAAM,EAElB,KAAK,EAAE,KAAK,KAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,CAAA,GAAG,~~YAAY~~,GAAG,aAAa,~~EAC5D~~,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,IAAI,EAAE,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,MAAK,KAAK,GAAG,EAAE,GAAG,EAAE,IAHjC,KAAK,CAIV,IACH,CAAC,GACG,CACR,EAEA,cAAc,KAAK,SAAS,KAC3BA,cAAM,SAAS,EAAC,oBAAoB,EAAC,KAAK,EAAE,cAAc,GAAG,KAAK,GAAG,IAAI,YACtE,cAAc,IACbA,IAAC,cAAc,IACb,QAAQ,uBACI,wBAAwB,EACpC,IAAI,EAAE,EAAE,uBAER,KAAK,EAAC,~~YAAY~~,~~GAClB~~,KAEFA,IAAC,KAAK,IACJ,QAAQ,uBACI,uBAAuB,EACnC,IAAI,EAAE,EAAE,uBAER,KAAK,EAAC,aAAa,GACnB,CACH,GACI,CACR,EAEDC,cAAK,SAAS,EAAC,UAAU,aACtB,IAAI,IAAI,WAAW,KAAK,QAAQ,KAC/BD,aAAK,SAAS,EAAE,UAAU,CACxB,cAAc,EACd,EAAE,KAAK,EAAE,KAAK,KAAK,MAAM,EAAE,CAC5B,iBACW,iBAAiB,YAE1B,IAAI,GACD,CACP,EAEA,IAAI,IAAI,WAAW,KAAK,OAAO,KAC9BA,aACE,SAAS,EAAC,~~6BAA6B~~,~~iBAC3B~~,oBAAoB,YAE/B,IAAI,GACD,CACP,EAEA,IAAI,IAAI,WAAW,KAAK,~~oBAAoB~~,~~KAC3CA~~,iCAEE,SAAS,~~EAAE~~,~~UAAU,CACnB,~~2BAA2B,~~EAC3B~~,~~MAAM,CAAC,gBAAgB,CACxB,YAEA,~~IAAI,GACF,CACN,EAEA,YAAY,IAAI,SAAS,KACxBA,cAAM,SAAS,EAAC,KAAK,YACnBA,IAAC,eAAe,IACd,OAAO,EAAE;4CACP,OAAA,SAAS,CAAC;gDACR,KAAK,EAAE,UAAU;gDACjB,IAAI,EAAE,YAAY;6CACnB,CAAC;yCAAA,GAEJ,GACG,CACR,IACG,IACF,EAEL,WAAW,KACVA,aACE,SAAS,EAAE,UAAU,CACnB,MAAM,CAAC,WAAW,EAClB,kCAAkC,EAClC,cAAc,CACf,YAEA,WAAW,GACR,CACP,IACG,GACF,EACN;AACJ;;;;"}
1	+ {"version":3,"file":"BaseCell.js","sources":["../../../../../../../../src/lib/components/table/components/TableCell/BaseCell/BaseCell.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport {\n CheckThickIcon,\n StarFilledIcon,\n XIcon,\n ZapFilledIcon,\n} from '../../../../icon';\nimport { ReactNode } from 'react';\nimport styles from './BaseCell.module.scss';\nimport { MiniProgressBar } from './MiniProgressBar/MiniProgressBar';\nimport { TableInfoButton } from '../../../../comparisonTable';\nimport { ModalFunction } from '../../../types';\n\nexport type FontVariant = 'NORMAL' \| 'TITLE' \| 'PRICE';\n\nconst progressLookup: Record<string, number> = {\n '30%': 1,\n '50%': 2,\n '70%': 3,\n '75%': 4,\n '80%': 4,\n '90%': 4,\n '75%-90%': 4,\n '75%-100%': 4,\n '80%-100%': 4,\n '100%': 5,\n};\n\nexport type Alignment = 'center' \| 'left' \| 'right';\n\nexport type BaseCellProps = {\n align?: Alignment;\n checkmarkValue?: boolean;\n description?: ReactNode;\n fontVariant?: FontVariant;\n hideProgressBar?: boolean;\n modalTitle?: ReactNode;\n modalContent?: ReactNode;\n openModal?: ModalFunction;\n text?: ReactNode;\n rating?: {\n value: number;\n type: 'zap' \| 'star';\n };\n className?: string;\n dataTestId?: string;\n dataCy?: string;\n};\n\nexport const BaseCell = ({\n align = 'center',\n checkmarkValue,\n description = '',\n fontVariant = 'NORMAL',\n hideProgressBar = false,\n modalTitle = '',\n modalContent = '',\n openModal,\n rating,\n text = '',\n className,\n}: BaseCellProps) => {\n const alignClassName = {\n center: 'ta-center jc-center ai-center',\n left: 'ta-left jc-start',\n right: 'ta-right jc-end ai-end',\n }[align];\n\n const validRatingValues: number[] = [1, 2, 3];\n const SelectedIcon = rating?.type === 'zap' ? ZapFilledIcon : StarFilledIcon;\n\n const progressBarValue =\n !hideProgressBar && typeof text === 'string'\n ? progressLookup[text]\n : undefined;\n\n return (\n <div\n className={classNames(\n className,\n 'd-flex gap8 ai-center', {\n 'jc-center': align === 'center',\n })}\n >\n <div\n className={classNames('d-flex fd-column', alignClassName, {\n [styles.maxWidth]: modalContent && align === 'center',\n })}\n >\n {progressBarValue !== undefined && (\n <MiniProgressBar nFilledBars={progressBarValue} />\n )}\n\n <div className=\"d-flex ai-center\">\n {rating?.value && (\n <span\n data-testid=\"table-cell-rating\"\n title={`${rating?.value} out of 3`}\n >\n {validRatingValues.map((value) => (\n <SelectedIcon\n aria-hidden=\"true\"\n key={value}\n color={value <= rating?.value ? 'neutral-900' : 'neutral-400'}\n className={styles.icon}\n size={rating?.type === 'zap' ? 16 : 14}\n />\n ))}\n </span>\n )}\n\n {checkmarkValue !== undefined && (\n <span className='d-inline-block mx8' title={checkmarkValue ? 'Yes' : 'No'}>\n {checkmarkValue ? (\n <CheckThickIcon\n noMargin\n data-testid=\"table-cell-boolean-yes\"\n size={24}\n aria-hidden\n color=\"neutral-900\"\n />\n ) : (\n <XIcon\n noMargin\n data-testid=\"table-cell-boolean-no\"\n size={24}\n aria-hidden\n color=\"neutral-400\"\n />\n )}\n </span>\n )}\n\n <div className=\"d-inline\">\n {text && fontVariant === 'NORMAL' && (\n <div className={classNames(\n \"p-p d-inline\",\n { 'ml8': align !== 'left' }\n )}\n data-testid=\"table-cell-text\"\n >\n {text}\n </div>\n )}\n\n {text && fontVariant === 'PRICE' && (\n <div\n className=\"p-h1 p--serif tc-neutral-900\"\n data-testid=\"table-cell-content\"\n >\n {text}\n </div>\n )}\n\n {text && fontVariant === 'TITLE' && (\n <h2\n aria-hidden\n className=\"tc-grey-800 p-h2 p--serif\"\n >\n {text}\n </h2>\n )}\n\n {modalContent && openModal && (\n <span className=\"ml8\">\n <TableInfoButton\n onClick={() =>\n openModal({\n title: modalTitle,\n body: modalContent,\n })\n }\n />\n </span>\n )}\n </div>\n </div>\n\n {description && (\n <div\n className={classNames(\n styles.description,\n 'd-flex p-p--small tc-neutral-600',\n alignClassName\n )}\n >\n {description}\n </div>\n )}\n </div>\n </div>\n );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}