@trafilea/afrodita-components 5.0.0-beta.7 → 5.0.0-beta.8
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 +4 -2
- package/build/index.esm.js +7 -5
- package/build/index.esm.js.map +1 -1
- package/build/index.js +7 -5
- package/build/index.js.map +1 -1
- package/build/theme/shapermint.theme.d.ts +4 -2
- package/build/theme/shapermint.theme.js +4 -2
- package/build/theme/truekind.theme.d.ts +4 -2
- package/build/theme/truekind.theme.js +4 -2
- package/package.json +1 -1
package/build/index.d.ts
CHANGED
|
@@ -1014,8 +1014,10 @@ declare type ThemeComponent = {
|
|
|
1014
1014
|
packSelector: {
|
|
1015
1015
|
borderRadius: string;
|
|
1016
1016
|
borderColor: string;
|
|
1017
|
-
|
|
1018
|
-
|
|
1017
|
+
highlightColor: string;
|
|
1018
|
+
selectedColor: string;
|
|
1019
|
+
selectedContrast: string;
|
|
1020
|
+
tagColor: string;
|
|
1019
1021
|
};
|
|
1020
1022
|
};
|
|
1021
1023
|
declare type ThemeTypography = {
|
package/build/index.esm.js
CHANGED
|
@@ -15001,11 +15001,11 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
15001
15001
|
HTMLReactParser$1.attributesToProps;
|
|
15002
15002
|
HTMLReactParser$1.Element;
|
|
15003
15003
|
|
|
15004
|
-
var Container = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n"])));
|
|
15005
|
-
var Card = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n --
|
|
15006
|
-
var Tag = newStyled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n position: absolute;\n left: 50%;\n top:
|
|
15004
|
+
var Container = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __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"])));
|
|
15005
|
+
var Card = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __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: 20px 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 color: var(--color);\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: 20px 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 color: var(--color);\n }\n }\n"])));
|
|
15006
|
+
var Tag = newStyled.div(templateObject_3$2 || (templateObject_3$2 = __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"])));
|
|
15007
15007
|
var Label = newStyled.div(templateObject_4$1 || (templateObject_4$1 = __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"])));
|
|
15008
|
-
var Check = newStyled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n position: absolute;\n width:
|
|
15008
|
+
var Check = newStyled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
15009
15009
|
var IconContainer = newStyled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"], ["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"])));
|
|
15010
15010
|
var IconPlaceholder = newStyled.div(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"], ["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"])));
|
|
15011
15011
|
var PackSelector = function (_a) {
|
|
@@ -15023,7 +15023,9 @@ var PackCard = function (_a) {
|
|
|
15023
15023
|
.then(function (icon) { return setIcon(icon); })
|
|
15024
15024
|
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
15025
15025
|
}, [pack.meta.icon]);
|
|
15026
|
-
return (jsxs$1(Card, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsx$1(Tag, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsx$1(Text$5, __assign$1({ variant: "tag", weight: "bold", size: "small" }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxs$1(Label, { children: [jsx$1(Text$5, __assign$1({ variant: "body", weight: selected || pack.meta.tag ? 'bold' : 'regular' }, { children: pack.label }), void 0), jsx$1(Check, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsx$1(Icon.Actions.Check, { width: 0.
|
|
15026
|
+
return (jsxs$1(Card, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsx$1(Tag, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsx$1(Text$5, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxs$1(Label, { children: [jsx$1(Text$5, __assign$1({ variant: "body", weight: selected || pack.meta.tag ? 'bold' : 'regular' }, { children: pack.label }), void 0), jsx$1(Check, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsx$1(Icon.Actions.Check, { width: 0.6, fill: "var(--background)" }, void 0) }), void 0)] }, void 0), jsxs$1(Text$5, __assign$1({ variant: "body", size: "small", weight: "bold", "data-keep-color": true, style: {
|
|
15027
|
+
color: 'var(--colors-semantic-urgent-color)',
|
|
15028
|
+
} }, { children: ["Save ", pack.meta.discountPercentage, "%"] }), void 0), jsx$1(Spacing, { type: "block", size: 12 }, void 0), jsx$1(IconContainer, { children: icon ? HTMLReactParser$1(icon) : jsx$1(IconPlaceholder, {}, void 0) }, void 0), jsx$1(Spacing, { type: "block", size: 12 }, void 0), jsxs$1(Text$5, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: [formatPrice(pack.meta.price / pack.meta.quantity), " each"] }), void 0)] }), void 0));
|
|
15027
15029
|
};
|
|
15028
15030
|
var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1;
|
|
15029
15031
|
|