@popsure/dirty-swan 0.66.23 → 0.66.24
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/dist/cjs/index.js +4 -5
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/components/segmentedControl/index.js +4 -5
- package/dist/esm/components/segmentedControl/index.js.map +1 -1
- package/package.json +1 -1
- package/src/lib/components/segmentedControl/index.tsx +5 -11
- package/src/lib/components/segmentedControl/style.module.scss +7 -3
package/dist/cjs/index.js
CHANGED
|
@@ -21968,8 +21968,8 @@ var ComparisonTable = function (props) {
|
|
|
21968
21968
|
}), hideDetails && (jsxRuntime.jsx("div", { className: classNames(baseStyles['show-details-container'], baseStyles.sticky, 'mt48'), children: jsxRuntime.jsx("div", { children: jsxRuntime.jsxs("button", { className: classNames('w100 d-flex p-h4 c-pointer', baseStyles['show-details-button'], classNameOverrides === null || classNameOverrides === void 0 ? void 0 : classNameOverrides.hideDetailsButton), onClick: toggleMoreRows, type: "button", children: [showMore ? hideDetailsCaption : showDetailsCaption, jsxRuntime.jsx(Chevron, { className: showMore ? '' : baseStyles['icon-inverted'] })] }) }) }))] })] }) }));
|
|
21969
21969
|
};
|
|
21970
21970
|
|
|
21971
|
-
var css_248z$g = ".style-module_background-container__2Gjka {\n position: relative;\n display: inline-block;\n background-color: var(--ds-
|
|
21972
|
-
var styles$g = {"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"};
|
|
21971
|
+
var css_248z$g = ".style-module_background-container__2Gjka {\n position: relative;\n display: inline-block;\n background-color: var(--ds-orange-50);\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-primary-900);\n outline-offset: 2px;\n}\n\n.style-module_select-chip-background__YCAyw {\n position: absolute;\n background-color: var(--ds-neutral-900);\n border-radius: 8px;\n top: 8px;\n z-index: 1;\n transition: width 0.3s, left 0.3s;\n}\n\n.style-module_text-color__6bLC9 {\n transition: color 0.15s ease-in;\n}";
|
|
21972
|
+
var styles$g = {"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","text-color":"style-module_text-color__6bLC9"};
|
|
21973
21973
|
styleInject(css_248z$g);
|
|
21974
21974
|
|
|
21975
21975
|
var SegmentedControl = function (_a) {
|
|
@@ -21985,15 +21985,14 @@ var SegmentedControl = function (_a) {
|
|
|
21985
21985
|
setSelectedChipBackgroundWidthLeft({ left: left, width: width });
|
|
21986
21986
|
}, [selectedIndex]);
|
|
21987
21987
|
return (jsxRuntime.jsx("div", { className: className, children: jsxRuntime.jsxs("div", { className: styles$g['background-container'], children: [jsxRuntime.jsx("div", { ref: chipContainer, className: styles$g['chip-container'], style: { height: "".concat(height, "px") }, children: values.map(function (value, index) {
|
|
21988
|
+
var selectedColor = selectedIndex === index ? 'tc-white' : 'tc-neutral-900';
|
|
21988
21989
|
return (jsxRuntime.jsx("div", { role: "button", tabIndex: 0, onKeyDown: function (e) {
|
|
21989
21990
|
if (e.key === 'Enter' || e.code === 'Space') {
|
|
21990
21991
|
onChange(index);
|
|
21991
21992
|
}
|
|
21992
21993
|
}, onClick: function () {
|
|
21993
21994
|
onChange(index);
|
|
21994
|
-
}, className: styles$g.chip, children: typeof value === 'string' ? (jsxRuntime.jsx("div", { className: "p-h4 ta-center ".concat(
|
|
21995
|
-
? 'tc-neutral-600'
|
|
21996
|
-
: 'tc-purple-600'), children: value.subtitle })] })) }, typeof value === 'string' ? value : value.title));
|
|
21995
|
+
}, className: styles$g.chip, children: typeof value === 'string' ? (jsxRuntime.jsx("div", { className: "p-h4 ta-center ".concat(selectedColor, " ").concat(styles$g['text-color']), children: value })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "p-h4 ta-center ".concat(selectedColor, " ").concat(styles$g['text-color']), children: value.title }), jsxRuntime.jsx("div", { className: "p-p--small ta-center ".concat(selectedColor, " ").concat(styles$g['text-color']), children: value.subtitle })] })) }, typeof value === 'string' ? value : value.title));
|
|
21997
21996
|
}) }), jsxRuntime.jsx("div", { className: styles$g['select-chip-background'], style: {
|
|
21998
21997
|
width: "".concat(selectedChipBackgroundWidthLeft.width, "px"),
|
|
21999
21998
|
height: "".concat(height - 16, "px"),
|