@trafilea/afrodita-components 6.4.1 → 6.4.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.
- package/build/index.d.ts +5 -5
- package/build/index.esm.js +41 -39
- package/build/index.esm.js.map +1 -1
- package/build/index.js +41 -39
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.d.ts
CHANGED
|
@@ -1986,22 +1986,22 @@ interface CheckboxProps {
|
|
|
1986
1986
|
}
|
|
1987
1987
|
declare const Checkbox: React__default.FC<CheckboxProps>;
|
|
1988
1988
|
|
|
1989
|
-
|
|
1989
|
+
declare type ImageStyleProps = {
|
|
1990
1990
|
height?: string;
|
|
1991
1991
|
width?: string;
|
|
1992
1992
|
borderRadius?: string;
|
|
1993
1993
|
objectFit?: string;
|
|
1994
1994
|
objectPosition?: string;
|
|
1995
1995
|
className?: string;
|
|
1996
|
-
}
|
|
1997
|
-
|
|
1996
|
+
};
|
|
1997
|
+
declare type ImageProps = ImageStyleProps & {
|
|
1998
1998
|
src: string;
|
|
1999
1999
|
alt: string;
|
|
2000
2000
|
srcSet?: string;
|
|
2001
2001
|
sizes?: string;
|
|
2002
2002
|
loading?: 'lazy' | 'eager';
|
|
2003
|
-
}
|
|
2004
|
-
declare const Image:
|
|
2003
|
+
};
|
|
2004
|
+
declare const Image: React.FC<ImageProps>;
|
|
2005
2005
|
|
|
2006
2006
|
interface DiscountTagProps {
|
|
2007
2007
|
discount: number;
|
package/build/index.esm.js
CHANGED
|
@@ -3121,7 +3121,7 @@ var DEFAULT_BREAKPOINTS = {
|
|
|
3121
3121
|
desktop: 1280,
|
|
3122
3122
|
};
|
|
3123
3123
|
|
|
3124
|
-
var Container$17 = newStyled.div(templateObject_1$
|
|
3124
|
+
var Container$17 = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject(["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"], ["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"])), function (_a) {
|
|
3125
3125
|
var height = _a.height;
|
|
3126
3126
|
return (height ? height : '1.5em');
|
|
3127
3127
|
}, function (_a) {
|
|
@@ -3148,9 +3148,9 @@ var SkeletonBox = function (_a) {
|
|
|
3148
3148
|
var theme = useTheme();
|
|
3149
3149
|
return jsx$1(Container$17, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3150
3150
|
};
|
|
3151
|
-
var templateObject_1$
|
|
3151
|
+
var templateObject_1$1P;
|
|
3152
3152
|
|
|
3153
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3153
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3154
3154
|
var width = _a.width;
|
|
3155
3155
|
return width;
|
|
3156
3156
|
}, function (_a) {
|
|
@@ -3179,7 +3179,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1b || (templateObject_2$
|
|
|
3179
3179
|
var opacity = _a.opacity;
|
|
3180
3180
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3181
3181
|
});
|
|
3182
|
-
var templateObject_1$
|
|
3182
|
+
var templateObject_1$1O, templateObject_2$1b;
|
|
3183
3183
|
|
|
3184
3184
|
/* eslint-disable no-undef */
|
|
3185
3185
|
var cache = new Map();
|
|
@@ -3257,7 +3257,7 @@ var getIconDimension = function (dimension) {
|
|
|
3257
3257
|
return "".concat(dimension, "rem");
|
|
3258
3258
|
};
|
|
3259
3259
|
|
|
3260
|
-
var
|
|
3260
|
+
var UnmemoIconFromExtSource = function (_a) {
|
|
3261
3261
|
var height = _a.height, width = _a.width, title = _a.title, testId = _a.testId, fill = _a.fill, name = _a.name, svgProps = _a.svgProps, iconURL = _a.iconURL, svgId = _a.svgId, rest = __rest(_a, ["height", "width", "title", "testId", "fill", "name", "svgProps", "iconURL", "svgId"]);
|
|
3262
3262
|
var _b = useState(false), error = _b[0], setError = _b[1];
|
|
3263
3263
|
var _c = useState(), localSource = _c[0], setLocalSource = _c[1];
|
|
@@ -3295,7 +3295,8 @@ var IconFromExtSource = function (_a) {
|
|
|
3295
3295
|
return jsx$1(StyledImageWrapper, __assign$1({}, imageProperties, rest, { src: localSource.src }), void 0);
|
|
3296
3296
|
}
|
|
3297
3297
|
return (jsxs$1(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: height, type: "image/svg+xml", width: width }, rest, svgProps, { children: [jsx$1("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsx$1("use", { xlinkHref: "".concat(localSource.src, "#").concat(svgId) }, void 0)] }), void 0));
|
|
3298
|
-
};
|
|
3298
|
+
};
|
|
3299
|
+
var IconFromExtSource = React__default.memo(UnmemoIconFromExtSource);
|
|
3299
3300
|
|
|
3300
3301
|
/* eslint-disable react/forbid-component-props */
|
|
3301
3302
|
var UnmemoIcon = function (_a) {
|
|
@@ -4054,7 +4055,7 @@ function jsxs(type, props, key) {
|
|
|
4054
4055
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4055
4056
|
// `variants` styles that are consistent through all themes.
|
|
4056
4057
|
var TAGS = {
|
|
4057
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4058
|
+
hero1: newStyled.h1(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject([""], [""]))),
|
|
4058
4059
|
hero2: newStyled.h2(templateObject_2$1a || (templateObject_2$1a = __makeTemplateObject([""], [""]))),
|
|
4059
4060
|
hero3: newStyled.h3(templateObject_3$U || (templateObject_3$U = __makeTemplateObject([""], [""]))),
|
|
4060
4061
|
display1: newStyled.h1(templateObject_4$F || (templateObject_4$F = __makeTemplateObject([""], [""]))),
|
|
@@ -4190,9 +4191,9 @@ var DEFAULTS = {
|
|
|
4190
4191
|
size: 'regular',
|
|
4191
4192
|
},
|
|
4192
4193
|
};
|
|
4193
|
-
var templateObject_1$
|
|
4194
|
+
var templateObject_1$1N, templateObject_2$1a, templateObject_3$U, templateObject_4$F, templateObject_5$r, templateObject_6$p, templateObject_7$h, templateObject_8$d, templateObject_9$6, templateObject_10$5, templateObject_11$4, templateObject_12$3, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4194
4195
|
|
|
4195
|
-
var Container$16 = newStyled.div(templateObject_1$
|
|
4196
|
+
var Container$16 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
4196
4197
|
var Card$3 = newStyled.div(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
4197
4198
|
var Tag$2 = newStyled.div(templateObject_3$T || (templateObject_3$T = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
4198
4199
|
var Label$4 = newStyled.div(templateObject_4$E || (templateObject_4$E = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
@@ -4222,9 +4223,9 @@ var PackCard$1 = function (_a) {
|
|
|
4222
4223
|
currency: currencyCode || 'USD',
|
|
4223
4224
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4224
4225
|
};
|
|
4225
|
-
var templateObject_1$
|
|
4226
|
+
var templateObject_1$1M, templateObject_2$19, templateObject_3$T, templateObject_4$E, templateObject_5$q, templateObject_6$o;
|
|
4226
4227
|
|
|
4227
|
-
var Container$15 = newStyled.div(templateObject_1$
|
|
4228
|
+
var Container$15 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4228
4229
|
var DropContainer = newStyled.div(templateObject_2$18 || (templateObject_2$18 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4229
4230
|
var DropList = function (_a) {
|
|
4230
4231
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
@@ -4232,17 +4233,17 @@ var DropList = function (_a) {
|
|
|
4232
4233
|
return (jsx$1(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsx$1(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsx$1(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4233
4234
|
}) }, void 0));
|
|
4234
4235
|
};
|
|
4235
|
-
var templateObject_1$
|
|
4236
|
+
var templateObject_1$1L, templateObject_2$18;
|
|
4236
4237
|
|
|
4237
4238
|
var DROPS_TOTAL = 5;
|
|
4238
|
-
var Container$14 = newStyled.div(templateObject_1$
|
|
4239
|
+
var Container$14 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4239
4240
|
var Title$8 = newStyled.p(templateObject_2$17 || (templateObject_2$17 = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"])));
|
|
4240
4241
|
var Description$3 = newStyled.p(templateObject_3$S || (templateObject_3$S = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"])));
|
|
4241
4242
|
var AbsorbencyLevel = function (_a) {
|
|
4242
4243
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4243
4244
|
return (jsxs$1(Container$14, { children: [jsx$1(Title$8, { children: absorbencyTitle }, void 0), jsx$1(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsx$1(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4244
4245
|
};
|
|
4245
|
-
var templateObject_1$
|
|
4246
|
+
var templateObject_1$1K, templateObject_2$17, templateObject_3$S;
|
|
4246
4247
|
|
|
4247
4248
|
function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=useState(k$1);return useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?useLayoutEffect:useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=useState(yt.serverHandoffComplete);return useEffect(()=>{e!==!0&&t(!0);},[e]),useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===Fragment$1&&Object.keys(l).length>0){if(!isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
|
|
4248
4249
|
`),"","You can apply a few solutions:",['Add an `as="..."` prop, to ensure that we render an actual element instead of a "Fragment".',"Render a single element as the child so that we can forward the props onto that element."].map(c=>` - ${c}`).join(`
|
|
@@ -4318,7 +4319,7 @@ var StyledButton$2 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
4318
4319
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
4319
4320
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
4320
4321
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4321
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
4322
|
+
var StyledContent = newStyled.button(templateObject_1$1J || (templateObject_1$1J = __makeTemplateObject(["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"], ["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"])));
|
|
4322
4323
|
var Accordion$1 = function (_a) {
|
|
4323
4324
|
var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.innerHTML, innerHTML = _e === void 0 ? false : _e, _f = _a.backgroundCover, backgroundCover = _f === void 0 ? { value: false, iconBgColor: 'inherit' } : _f, _g = _a.controlIconPos, controlIconPos = _g === void 0 ? 'right' : _g, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick;
|
|
4324
4325
|
var theme = useTheme();
|
|
@@ -4342,9 +4343,9 @@ var Accordion$1 = function (_a) {
|
|
|
4342
4343
|
} }, { children: jsx$1(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsx$1(StyledContent, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsx$1(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsx$1("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
4343
4344
|
} }), void 0));
|
|
4344
4345
|
};
|
|
4345
|
-
var templateObject_1$
|
|
4346
|
+
var templateObject_1$1J;
|
|
4346
4347
|
|
|
4347
|
-
var Container$13 = newStyled.div(templateObject_1$
|
|
4348
|
+
var Container$13 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
4348
4349
|
var AccordionOptions = function (_a) {
|
|
4349
4350
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
4350
4351
|
var _b = useState({
|
|
@@ -4368,7 +4369,7 @@ var AccordionOptions = function (_a) {
|
|
|
4368
4369
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
4369
4370
|
}) }, void 0));
|
|
4370
4371
|
};
|
|
4371
|
-
var templateObject_1$
|
|
4372
|
+
var templateObject_1$1I;
|
|
4372
4373
|
|
|
4373
4374
|
var CardSectionType;
|
|
4374
4375
|
(function (CardSectionType) {
|
|
@@ -4530,14 +4531,14 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
4530
4531
|
literal: true,
|
|
4531
4532
|
});
|
|
4532
4533
|
|
|
4533
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4534
|
+
var ErrorText = newStyled.h3(templateObject_1$1H || (templateObject_1$1H = __makeTemplateObject(["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"], ["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"])), function (props) { return props.color; });
|
|
4534
4535
|
var ErrorContainer = newStyled.div(templateObject_2$16 || (templateObject_2$16 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"], ["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"])));
|
|
4535
4536
|
var Error$1 = function (_a) {
|
|
4536
4537
|
var error = _a.error;
|
|
4537
4538
|
var theme = useTheme();
|
|
4538
4539
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
4539
4540
|
};
|
|
4540
|
-
var templateObject_1$
|
|
4541
|
+
var templateObject_1$1H, templateObject_2$16;
|
|
4541
4542
|
|
|
4542
4543
|
var BaseSelectButton = function (_a) {
|
|
4543
4544
|
var children = _a.children, as = _a.as;
|
|
@@ -4554,7 +4555,7 @@ function BaseSelectOption(_a) {
|
|
|
4554
4555
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4555
4556
|
}
|
|
4556
4557
|
|
|
4557
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4558
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4558
4559
|
function BaseSelect(_a) {
|
|
4559
4560
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4560
4561
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4564,7 +4565,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4564
4565
|
Options: BaseSelectOptions,
|
|
4565
4566
|
Option: BaseSelectOption,
|
|
4566
4567
|
});
|
|
4567
|
-
var templateObject_1$
|
|
4568
|
+
var templateObject_1$1G;
|
|
4568
4569
|
|
|
4569
4570
|
var CustomButton = newStyled.button(function (_a) {
|
|
4570
4571
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4602,26 +4603,28 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
4602
4603
|
},
|
|
4603
4604
|
});
|
|
4604
4605
|
});
|
|
4606
|
+
//TODO Remove this when we find the real solution
|
|
4607
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
4608
|
+
var open = _a.open;
|
|
4609
|
+
return open &&
|
|
4610
|
+
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
4611
|
+
});
|
|
4605
4612
|
var BaseDropdownButton = function (_a) {
|
|
4606
|
-
var OpenIcon = _a.OpenIcon, CloseIcon = _a.CloseIcon, wide = _a.wide, children = _a.children, isSortOrFilter = _a.isSortOrFilter, testId = _a.testId;
|
|
4613
|
+
var OpenIcon = _a.OpenIcon, CloseIcon = _a.CloseIcon, label = _a.label, wide = _a.wide, children = _a.children, isSortOrFilter = _a.isSortOrFilter, testId = _a.testId;
|
|
4607
4614
|
var theme = useTheme();
|
|
4608
4615
|
return (jsx(BaseSelect$1.Button, __assign$1({ as: Fragment$1 }, { children: function (_a) {
|
|
4609
4616
|
var open = _a.open;
|
|
4610
|
-
return (jsxs(CustomButton, __assign$1({ theme: theme, wide: wide, "data-testid": testId, isSortOrFilter: isSortOrFilter }, { children: [
|
|
4617
|
+
return (jsxs(CustomButton, __assign$1({ theme: theme, wide: wide, "data-testid": testId, isSortOrFilter: isSortOrFilter }, { children: [label ? (jsxs("div", __assign$1({ css: {
|
|
4618
|
+
display: 'flex',
|
|
4619
|
+
flexDirection: 'column',
|
|
4620
|
+
alignItems: 'flex-start',
|
|
4621
|
+
whiteSpace: 'nowrap',
|
|
4622
|
+
overflowX: 'hidden',
|
|
4623
|
+
} }, { children: [jsx("div", __assign$1({ css: { fontSize: '0.75rem', fontWeight: 400, margin: '0.125rem 0' } }, { children: label }), void 0), children] }), void 0)) : (children), jsxs(StyledIcon$1, __assign$1({ open: open }, { children: [jsx(CloseIcon, { testId: "CloseIcon", height: 0.875, width: 0.875, fill: "inherit" }, void 0), jsx(OpenIcon, { testId: "OpenIcon", height: 0.875, width: 0.875, fill: "inherit" }, void 0)] }), void 0)] }), void 0));
|
|
4611
4624
|
} }), void 0));
|
|
4612
4625
|
};
|
|
4613
|
-
var
|
|
4614
|
-
|
|
4615
|
-
var CloseIcon = _a.CloseIcon, OpenIcon = _a.OpenIcon, children = _a.children, testId = _a.testId, wide = _a.wide;
|
|
4616
|
-
return (jsx(Button, __assign$1({ CloseIcon: CloseIcon, OpenIcon: OpenIcon, wide: wide, "data-testid": testId }, { children: jsxs("div", __assign$1({ css: {
|
|
4617
|
-
display: 'flex',
|
|
4618
|
-
flexDirection: 'column',
|
|
4619
|
-
alignItems: 'flex-start',
|
|
4620
|
-
whiteSpace: 'nowrap',
|
|
4621
|
-
overflowX: 'hidden',
|
|
4622
|
-
} }, { children: [jsx("div", __assign$1({ css: { fontSize: '0.75rem', fontWeight: 400, margin: '0.125rem 0' } }, { children: label }), void 0), children] }), void 0) }), void 0));
|
|
4623
|
-
};
|
|
4624
|
-
};
|
|
4626
|
+
var BaseDropdownButton$1 = React__default.memo(BaseDropdownButton);
|
|
4627
|
+
var templateObject_1$1F;
|
|
4625
4628
|
|
|
4626
4629
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4627
4630
|
var theme = _a.theme;
|
|
@@ -4859,7 +4862,7 @@ function BaseDropdown(_a) {
|
|
|
4859
4862
|
}, disabled: disabled }, { children: children }), void 0));
|
|
4860
4863
|
}
|
|
4861
4864
|
var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
4862
|
-
Button: BaseDropdownButton,
|
|
4865
|
+
Button: BaseDropdownButton$1,
|
|
4863
4866
|
Options: BaseDropdownOptions,
|
|
4864
4867
|
Option: BaseDropdownOption,
|
|
4865
4868
|
});
|
|
@@ -4894,9 +4897,8 @@ function SimpleDropdown(_a) {
|
|
|
4894
4897
|
}
|
|
4895
4898
|
setSelectedValue(value);
|
|
4896
4899
|
}, [value, options, initialValue]);
|
|
4897
|
-
var Button = label ? withLabel(BaseDropdown$1.Button, label) : BaseDropdown$1.Button;
|
|
4898
4900
|
var DropdownContainer = showRequiredPlaceholder ? Container$11 : Fragment$1;
|
|
4899
|
-
return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx$1(Button, __assign$1({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: selectedOptionLabel }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsx$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
|
|
4901
|
+
return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx$1(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: selectedOptionLabel }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsx$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
|
|
4900
4902
|
}
|
|
4901
4903
|
var templateObject_1$1D, templateObject_2$14;
|
|
4902
4904
|
|