@aivenio/aquarium 4.5.0 → 4.5.1
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/atoms.cjs +2 -2
- package/dist/atoms.mjs +2 -2
- package/dist/src/atoms/PageHeader/PageHeader.js +3 -3
- package/dist/src/molecules/Accordion/Accordion.js +3 -7
- package/dist/src/molecules/Section/Section.js +3 -7
- package/dist/src/molecules/Transition/Transition.js +2 -4
- package/dist/src/utils/stickyStyles.js +48 -18
- package/dist/styles.css +9 -4
- package/dist/system.cjs +85 -69
- package/dist/system.mjs +106 -90
- package/dist/tsconfig.module.tsbuildinfo +1 -1
- package/dist/types/tailwindGenerated.d.ts +1 -1
- package/package.json +2 -6
package/dist/atoms.cjs
CHANGED
@@ -11173,7 +11173,7 @@ Navigation.Divider = Divider;
|
|
11173
11173
|
// src/atoms/PageHeader/PageHeader.tsx
|
11174
11174
|
var import_react41 = __toESM(require("react"));
|
11175
11175
|
var PageHeader = ({ children, className, ...rest }) => /* @__PURE__ */ import_react41.default.createElement("div", { className: classNames(tw("flex flex-row flex-wrap gap-4 pb-6"), className), ...rest }, children);
|
11176
|
-
PageHeader.Container = ({ children, className, ...rest }) => /* @__PURE__ */ import_react41.default.createElement("div", { className: classNames(tw("flex flex-col
|
11176
|
+
PageHeader.Container = ({ children, className, ...rest }) => /* @__PURE__ */ import_react41.default.createElement("div", { className: classNames(tw("flex flex-col flex-1 basis-[--aquarium-screens-xs]"), className), ...rest }, children);
|
11177
11177
|
PageHeader.TitleContainer = ({ children, className, ...rest }) => /* @__PURE__ */ import_react41.default.createElement("div", { className: classNames(tw("flex flex-col justify-center gap-2"), className), ...rest }, children);
|
11178
11178
|
PageHeader.Title = ({ isSubHeader = false, children, ...rest }) => /* @__PURE__ */ import_react41.default.createElement(
|
11179
11179
|
Typography2,
|
@@ -11187,7 +11187,7 @@ PageHeader.Title = ({ isSubHeader = false, children, ...rest }) => /* @__PURE__
|
|
11187
11187
|
);
|
11188
11188
|
PageHeader.Subtitle = ({ children, ...rest }) => /* @__PURE__ */ import_react41.default.createElement(Typography2.Small, { ...rest, color: "default" }, children);
|
11189
11189
|
PageHeader.Chips = ({ children, className, ...rest }) => /* @__PURE__ */ import_react41.default.createElement("div", { className: classNames(tw("flex gap-3"), className), ...rest }, children);
|
11190
|
-
PageHeader.Actions = ({ children, className, ...rest }) => /* @__PURE__ */ import_react41.default.createElement("div", { className: classNames(tw("flex flex-row gap-4 self-start"), className), ...rest }, children);
|
11190
|
+
PageHeader.Actions = ({ children, className, ...rest }) => /* @__PURE__ */ import_react41.default.createElement("div", { className: classNames(tw("flex flex-row-reverse sm:flex-row gap-4 self-start"), className), ...rest }, children);
|
11191
11191
|
|
11192
11192
|
// src/atoms/Popover/Popover.tsx
|
11193
11193
|
var import_react42 = __toESM(require("react"));
|
package/dist/atoms.mjs
CHANGED
@@ -11125,7 +11125,7 @@ Navigation.Divider = Divider;
|
|
11125
11125
|
// src/atoms/PageHeader/PageHeader.tsx
|
11126
11126
|
import React36 from "react";
|
11127
11127
|
var PageHeader = ({ children, className, ...rest }) => /* @__PURE__ */ React36.createElement("div", { className: classNames(tw("flex flex-row flex-wrap gap-4 pb-6"), className), ...rest }, children);
|
11128
|
-
PageHeader.Container = ({ children, className, ...rest }) => /* @__PURE__ */ React36.createElement("div", { className: classNames(tw("flex flex-col
|
11128
|
+
PageHeader.Container = ({ children, className, ...rest }) => /* @__PURE__ */ React36.createElement("div", { className: classNames(tw("flex flex-col flex-1 basis-[--aquarium-screens-xs]"), className), ...rest }, children);
|
11129
11129
|
PageHeader.TitleContainer = ({ children, className, ...rest }) => /* @__PURE__ */ React36.createElement("div", { className: classNames(tw("flex flex-col justify-center gap-2"), className), ...rest }, children);
|
11130
11130
|
PageHeader.Title = ({ isSubHeader = false, children, ...rest }) => /* @__PURE__ */ React36.createElement(
|
11131
11131
|
Typography2,
|
@@ -11139,7 +11139,7 @@ PageHeader.Title = ({ isSubHeader = false, children, ...rest }) => /* @__PURE__
|
|
11139
11139
|
);
|
11140
11140
|
PageHeader.Subtitle = ({ children, ...rest }) => /* @__PURE__ */ React36.createElement(Typography2.Small, { ...rest, color: "default" }, children);
|
11141
11141
|
PageHeader.Chips = ({ children, className, ...rest }) => /* @__PURE__ */ React36.createElement("div", { className: classNames(tw("flex gap-3"), className), ...rest }, children);
|
11142
|
-
PageHeader.Actions = ({ children, className, ...rest }) => /* @__PURE__ */ React36.createElement("div", { className: classNames(tw("flex flex-row gap-4 self-start"), className), ...rest }, children);
|
11142
|
+
PageHeader.Actions = ({ children, className, ...rest }) => /* @__PURE__ */ React36.createElement("div", { className: classNames(tw("flex flex-row-reverse sm:flex-row gap-4 self-start"), className), ...rest }, children);
|
11143
11143
|
|
11144
11144
|
// src/atoms/Popover/Popover.tsx
|
11145
11145
|
import React37 from "react";
|
@@ -18,7 +18,7 @@ export const PageHeader = (_a) => {
|
|
18
18
|
};
|
19
19
|
PageHeader.Container = (_a) => {
|
20
20
|
var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
|
21
|
-
return (React.createElement("div", Object.assign({ className: classNames(tw('flex flex-col
|
21
|
+
return (React.createElement("div", Object.assign({ className: classNames(tw('flex flex-col flex-1 basis-[--aquarium-screens-xs]'), className) }, rest), children));
|
22
22
|
};
|
23
23
|
PageHeader.TitleContainer = (_a) => {
|
24
24
|
var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
|
@@ -38,6 +38,6 @@ PageHeader.Chips = (_a) => {
|
|
38
38
|
};
|
39
39
|
PageHeader.Actions = (_a) => {
|
40
40
|
var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
|
41
|
-
return (React.createElement("div", Object.assign({ className: classNames(tw('flex flex-row gap-4 self-start'), className) }, rest), children));
|
41
|
+
return (React.createElement("div", Object.assign({ className: classNames(tw('flex flex-row-reverse sm:flex-row gap-4 self-start'), className) }, rest), children));
|
42
42
|
};
|
43
|
-
//# sourceMappingURL=data:application/json;base64,
|
43
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUGFnZUhlYWRlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9hdG9tcy9QYWdlSGVhZGVyL1BhZ2VIZWFkZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBRTFCLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxxQ0FBcUMsQ0FBQztBQUVqRSxPQUFPLEVBQUUsVUFBVSxFQUFFLEVBQUUsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBYXBELE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBOEMsQ0FBQyxFQUFnQyxFQUFFLEVBQUU7UUFBcEMsRUFBRSxRQUFRLEVBQUUsU0FBUyxPQUFXLEVBQU4sSUFBSSxjQUE5Qix5QkFBZ0MsQ0FBRjtJQUFPLE9BQUEsQ0FDekcsMkNBQUssU0FBUyxFQUFFLFVBQVUsQ0FBQyxFQUFFLENBQUMsb0NBQW9DLENBQUMsRUFBRSxTQUFTLENBQUMsSUFBTSxJQUFJLEdBQ3RGLFFBQVEsQ0FDTCxDQUNQLENBQUE7Q0FBQSxDQUFDO0FBRUYsVUFBVSxDQUFDLFNBQVMsR0FBRyxDQUFDLEVBQWdDLEVBQUUsRUFBRTtRQUFwQyxFQUFFLFFBQVEsRUFBRSxTQUFTLE9BQVcsRUFBTixJQUFJLGNBQTlCLHlCQUFnQyxDQUFGO0lBQU8sT0FBQSxDQUMzRCwyQ0FBSyxTQUFTLEVBQUUsVUFBVSxDQUFDLEVBQUUsQ0FBQyxvREFBb0QsQ0FBQyxFQUFFLFNBQVMsQ0FBQyxJQUFNLElBQUksR0FDdEcsUUFBUSxDQUNMLENBQ1AsQ0FBQTtDQUFBLENBQUM7QUFFRixVQUFVLENBQUMsY0FBYyxHQUFHLENBQUMsRUFBZ0MsRUFBRSxFQUFFO1FBQXBDLEVBQUUsUUFBUSxFQUFFLFNBQVMsT0FBVyxFQUFOLElBQUksY0FBOUIseUJBQWdDLENBQUY7SUFBTyxPQUFBLENBQ2hFLDJDQUFLLFNBQVMsRUFBRSxVQUFVLENBQUMsRUFBRSxDQUFDLG9DQUFvQyxDQUFDLEVBQUUsU0FBUyxDQUFDLElBQU0sSUFBSSxHQUN0RixRQUFRLENBQ0wsQ0FDUCxDQUFBO0NBQUEsQ0FBQztBQUVGLFVBQVUsQ0FBQyxLQUFLLEdBQUcsQ0FBQyxFQUEwQyxFQUFFLEVBQUU7UUFBOUMsRUFBRSxXQUFXLEdBQUcsS0FBSyxFQUFFLFFBQVEsT0FBVyxFQUFOLElBQUksY0FBeEMsMkJBQTBDLENBQUY7SUFBTyxPQUFBLENBQ2pFLG9CQUFDLFVBQVUsb0JBQ0wsSUFBSSxJQUNSLEtBQUssRUFBQyxTQUFTLEVBQ2YsT0FBTyxFQUFFLFdBQVcsQ0FBQyxDQUFDLENBQUMsWUFBWSxDQUFDLENBQUMsQ0FBQyxTQUFTLEVBQy9DLE9BQU8sRUFBRSxXQUFXLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsSUFBSSxLQUVqQyxRQUFRLENBQ0UsQ0FDZCxDQUFBO0NBQUEsQ0FBQztBQUVGLFVBQVUsQ0FBQyxRQUFRLEdBQUcsQ0FBQyxFQUFxQixFQUFFLEVBQUU7UUFBekIsRUFBRSxRQUFRLE9BQVcsRUFBTixJQUFJLGNBQW5CLFlBQXFCLENBQUY7SUFBTyxPQUFBLENBQy9DLG9CQUFDLFVBQVUsQ0FBQyxLQUFLLG9CQUFLLElBQUksSUFBRSxLQUFLLEVBQUMsU0FBUyxLQUN4QyxRQUFRLENBQ1EsQ0FDcEIsQ0FBQTtDQUFBLENBQUM7QUFFRixVQUFVLENBQUMsS0FBSyxHQUFHLENBQUMsRUFBZ0MsRUFBRSxFQUFFO1FBQXBDLEVBQUUsUUFBUSxFQUFFLFNBQVMsT0FBVyxFQUFOLElBQUksY0FBOUIseUJBQWdDLENBQUY7SUFBTyxPQUFBLENBQ3ZELDJDQUFLLFNBQVMsRUFBRSxVQUFVLENBQUMsRUFBRSxDQUFDLFlBQVksQ0FBQyxFQUFFLFNBQVMsQ0FBQyxJQUFNLElBQUksR0FDOUQsUUFBUSxDQUNMLENBQ1AsQ0FBQTtDQUFBLENBQUM7QUFFRixVQUFVLENBQUMsT0FBTyxHQUFHLENBQUMsRUFBZ0MsRUFBRSxFQUFFO1FBQXBDLEVBQUUsUUFBUSxFQUFFLFNBQVMsT0FBVyxFQUFOLElBQUksY0FBOUIseUJBQWdDLENBQUY7SUFBTyxPQUFBLENBQ3pELDJDQUFLLFNBQVMsRUFBRSxVQUFVLENBQUMsRUFBRSxDQUFDLG9EQUFvRCxDQUFDLEVBQUUsU0FBUyxDQUFDLElBQU0sSUFBSSxHQUN0RyxRQUFRLENBQ0wsQ0FDUCxDQUFBO0NBQUEsQ0FBQyJ9
|
@@ -63,9 +63,7 @@ const AccordionToggle = (_a) => {
|
|
63
63
|
},
|
64
64
|
});
|
65
65
|
const { buttonProps } = useButton({ elementType: 'div', onPress: handleClick }, ref);
|
66
|
-
return (
|
67
|
-
// @ts-expect-error React spring does not yet support R19 types
|
68
|
-
React.createElement(animated.div, Object.assign({}, rest, buttonProps, { onPointerDown: (e) => {
|
66
|
+
return (React.createElement(animated.div, Object.assign({}, rest, buttonProps, { onPointerDown: (e) => {
|
69
67
|
e.preventDefault();
|
70
68
|
handleClick(); // the event handler provided by useButton triggers focus-visible style to shown when clicking on it which isn't desired. Only keyboard events should triggers focus-visible style.
|
71
69
|
}, ref: ref, "aria-label": "accordion toggle", "aria-expanded": openPanelId === id, "aria-controls": `${id}-content`, style: { transform }, className: tw('text-default focus:outline-none focusable') }),
|
@@ -85,9 +83,7 @@ const AccordionPanel = (_a) => {
|
|
85
83
|
duration: 150,
|
86
84
|
},
|
87
85
|
});
|
88
|
-
return (
|
89
|
-
// @ts-expect-error React spring does not yet support R19 types
|
90
|
-
React.createElement(animated.div, Object.assign({ role: "region" }, rest, { id: `${id}-content`, "aria-labelledby": `${id}-summary`, "aria-hidden": !isOpen ? 'true' : undefined, style: style }),
|
86
|
+
return (React.createElement(animated.div, Object.assign({ role: "region" }, rest, { id: `${id}-content`, "aria-labelledby": `${id}-summary`, "aria-hidden": !isOpen ? 'true' : undefined, style: style }),
|
91
87
|
React.createElement("div", { ref: ref }, children)));
|
92
88
|
};
|
93
89
|
const AccordionUnanimatedPanel = ({ children, panelId }) => {
|
@@ -123,4 +119,4 @@ Accordion.Panel = AccordionPanel;
|
|
123
119
|
Accordion.Panel.displayName = 'Accordion.Panel';
|
124
120
|
Accordion.UnanimatedPanel = AccordionUnanimatedPanel;
|
125
121
|
Accordion.UnanimatedPanel.displayName = 'Accordion.UnanimatedPanel';
|
126
|
-
//# sourceMappingURL=data:application/json;base64,
|
122
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQWNjb3JkaW9uLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL21vbGVjdWxlcy9BY2NvcmRpb24vQWNjb3JkaW9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxFQUFFLEVBQUUsYUFBYSxFQUFxQixVQUFVLEVBQUUsTUFBTSxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQztBQUM5RixPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDdEMsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUMxQyxPQUFPLEVBQUUsUUFBUSxFQUFFLFNBQVMsRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBQ3hELE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxXQUFXLENBQUM7QUFFeEMsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLFdBQVcsQ0FBQztBQUNwQyxPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFDeEMsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBRWxELE9BQU8sRUFBRSxHQUFHLEVBQUUsTUFBTSxZQUFZLENBQUM7QUFDakMsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQzdDLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQU10RCxNQUFNLGdCQUFnQixHQUFHLGFBQWEsQ0FBOEQsSUFBSSxDQUFDLENBQUM7QUFDMUcsTUFBTSxZQUFZLEdBQUcsYUFBYSxDQUFnQixJQUFJLENBQUMsQ0FBQztBQUV4RCxNQUFNLG1CQUFtQixHQUFHLEdBQUcsRUFBRTtJQUMvQixNQUFNLE9BQU8sR0FBRyxVQUFVLENBQUMsZ0JBQWdCLENBQUMsQ0FBQztJQUM3QyxJQUFJLE9BQU8s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
|
@@ -93,9 +93,7 @@ export const Section = (props) => {
|
|
93
93
|
e.preventDefault();
|
94
94
|
handleTitleClick(); // the event handler provided by useButton triggers focus-visible style to shown when clicking on it which isn't desired. Only keyboard events should triggers focus-visible style.
|
95
95
|
} }) : { onClick: handleTitleClick }), { ref: _collapsible ? toggleAreaRef : undefined, id: toggleId, collapsible: _collapsible }),
|
96
|
-
_collapsible && (
|
97
|
-
// @ts-expect-error React spring does not yet support R19 types
|
98
|
-
React.createElement(animated.div, { style: { transform } },
|
96
|
+
_collapsible && (React.createElement(animated.div, { style: { transform } },
|
99
97
|
React.createElement(BaseSection.Toggle, null))),
|
100
98
|
React.createElement(BaseSection.Title, { id: titleId },
|
101
99
|
React.createElement(LineClamp, { lines: 1 }, title),
|
@@ -116,13 +114,11 @@ export const Section = (props) => {
|
|
116
114
|
.filter(Boolean)
|
117
115
|
.map((action) => renderAction({ kind: 'secondary', action })),
|
118
116
|
props.select && React.createElement(SelectBase, Object.assign({ "aria-labelledby": titleId }, props.select))))),
|
119
|
-
!hasTabs && !isCollapsed && (
|
120
|
-
// @ts-expect-error React spring does not yet support R19 types
|
121
|
-
React.createElement(animated.div, { className: tw(`h-[1px]`), style: { backgroundColor: 'var(--aquarium-border-color-muted)' } })))),
|
117
|
+
!hasTabs && !isCollapsed && (React.createElement(animated.div, { className: tw(`h-[1px]`), style: { backgroundColor: 'var(--aquarium-border-color-muted)' } })))),
|
122
118
|
React.createElement(animated.div, { id: regionId, "aria-hidden": _collapsible ? (isCollapsed ? true : undefined) : undefined, style: spring,
|
123
119
|
// We need to set 'overflow-hidden' when the section can be collapsed and it's currently collapsed or still animating.
|
124
120
|
className: tw({ 'overflow-hidden': _collapsible && (isCollapsed || !isResting) }) },
|
125
121
|
React.createElement("div", { ref: ref }, hasTabs ? (React.createElement(SectionTabs, Object.assign({}, children.props, { className: tw('[&>div:first-child]:px-3 grow flex flex-col overflow-y-auto', { 'mt-4': _collapsible }) }))) : (React.createElement(BaseSection.Body, null, children))))));
|
126
122
|
};
|
127
123
|
const SectionTabs = createTabsComponent(ModalTab, TabItem, 'SectionTabs', (children, selected) => (React.createElement(BaseSection.Body, null, children.find((node, index) => (node === null || node === void 0 ? void 0 : node.props.value) === selected || index === selected))));
|
128
|
-
//# sourceMappingURL=data:application/json;base64,
|
124
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VjdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9tb2xlY3VsZXMvU2VjdGlvbi9TZWN0aW9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxFQUFFLEVBQUUsTUFBTSxFQUFFLE1BQU0sT0FBTyxDQUFDO0FBQ3RDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUMvQyxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFDMUMsT0FBTyxFQUFFLFFBQVEsRUFBRSxTQUFTLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUN4RCxPQUFPLEVBQUUsU0FBUyxFQUFFLFdBQVcsRUFBRSxNQUFNLFdBQVcsQ0FBQztBQUVuRCxPQUFPLEVBQUUsR0FBRyxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDN0MsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQ3JELE9BQU8sRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUF3QixNQUFNLHlCQUF5QixDQUFDO0FBQ2pGLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSx5Q0FBeUMsQ0FBQztBQUN2RSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sbUNBQW1DLENBQUM7QUFDOUQsT0FBTyxFQUFtQixVQUFVLEVBQXdCLE1BQU0sNkJBQTZCLENBQUM7QUFDaEcsT0FBTyxFQUFFLE1BQU0sRUFBb0IsTUFBTSw2QkFBNkIsQ0FBQztBQUN2RSxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsUUFBUSxFQUFFLE9BQU8sRUFBaUIsSUFBSSxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDdEcsT0FBTyxFQUFFLFFBQVEsRUFBc0IsTUFBTSxpQ0FBaUMsQ0FBQztBQUUvRSxPQUFPLEVBQUUsT0FBTyxJQUFJLFdBQVcsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBRW5FLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFB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
|
@@ -21,12 +21,10 @@ export const Transition = ({ children }) => {
|
|
21
21
|
keys: (item) => item.key || '',
|
22
22
|
config: { tension: 125, friction: 20, precision: 0.1 },
|
23
23
|
});
|
24
|
-
return (React.createElement(React.Fragment, null, transitions((style, item) => (
|
25
|
-
// @ts-expect-error React spring does not yet support R19 types
|
26
|
-
React.createElement(animated.div, { style: style },
|
24
|
+
return (React.createElement(React.Fragment, null, transitions((style, item) => (React.createElement(animated.div, { style: style },
|
27
25
|
React.createElement("div", { ref: (ref) => {
|
28
26
|
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
29
27
|
ref && refMap.set(item, ref);
|
30
28
|
} }, item))))));
|
31
29
|
};
|
32
|
-
//# sourceMappingURL=data:application/json;base64,
|
30
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVHJhbnNpdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9tb2xlY3VsZXMvVHJhbnNpdGlvbi9UcmFuc2l0aW9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLE9BQU8sRUFBRSxNQUFNLE9BQU8sQ0FBQztBQUN2QyxPQUFPLEVBQUUsUUFBUSxFQUFFLGFBQWEsRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBYTVELE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRyxDQUFDLEVBQUUsUUFBUSxFQUFtQixFQUFFLEVBQUU7SUFDMUQsTUFBTSxNQUFNLEdBQUcsT0FBTyxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksT0FBTyxFQUFzQyxFQUFFLEVBQUUsQ0FBQyxDQUFDO0lBQ3BGLE1BQU0sV0FBVyxHQUFHLGFBQWEsQ0FBQyxRQUFRLEVBQUU7UUFDMUMsSUFBSSxFQUFFLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxNQUFNLEVBQUUsQ0FBQyxFQUFFO1FBQy9CLEtBQUssRUFBRSxDQUFDLElBQUksRUFBRSxFQUFFLENBQUMsQ0FBTyxJQUFJLEVBQUUsRUFBRTs7WUFDOUIsTUFBTSxJQUFJLENBQUMsRUFBRSxPQUFPLEVBQUUsQ0FBQyxFQUFFLE1BQU0sRUFBRSxNQUFBLE1BQU0sQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLDBDQUFFLFlBQVksRUFBRSxDQUFDLENBQUM7UUFDckUsQ0FBQyxDQUFBO1FBQ0QsS0FBSyxFQUFFLENBQUMsRUFBRSxPQUFPLEVBQUUsQ0FBQyxFQUFFLEVBQUUsRUFBRSxNQUFNLEVBQUUsQ0FBQyxFQUFFLENBQUM7UUFDdEMsSUFBSSxFQUFFLENBQUMsSUFBSSxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsR0FBRyxJQUFJLEVBQUU7UUFDOUIsTUFBTSxFQUFFLEVBQUUsT0FBTyxFQUFFLEdBQUcsRUFBRSxRQUFRLEVBQUUsRUFBRSxFQUFFLFNBQVMsRUFBRSxHQUFHLEVBQUU7S0FDdkQsQ0FBQyxDQUFDO0lBRUgsT0FBTyxDQUNMLDBDQUNHLFdBQVcsQ0FBQyxDQUFDLEtBQUssRUFBRSxJQUFJLEVBQUUsRUFBRSxDQUFDLENBQzVCLG9CQUFDLFFBQVEsQ0FBQyxHQUFHLElBQUMsS0FBSyxFQUFFLEtBQUs7UUFDeEIsNkJBQ0UsR0FBRyxFQUFFLENBQUMsR0FBbUIsRUFBRSxFQUFFO2dCQUMzQix1RUFBdUU7Z0JBQ3ZFLEdBQUcsSUFBSSxNQUFNLENBQUMsR0FBRyxDQUFDLElBQUksRUFBRSxHQUFHLENBQUMsQ0FBQztZQUMvQixDQUFDLElBRUEsSUFBSSxDQUNELENBQ08sQ0FDaEIsQ0FBQyxDQUNELENBQ0osQ0FBQztBQUNKLENBQUMsQ0FBQyJ9
|
@@ -1,5 +1,5 @@
|
|
1
|
-
import React, { useMemo, useState } from 'react';
|
2
|
-
import { animated,
|
1
|
+
import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
2
|
+
import { animated, useSpring } from '@react-spring/web';
|
3
3
|
import { throttle } from 'lodash-es';
|
4
4
|
function useStickyStyles(scrollProgress, axis, { borderColor, boxShadowColor }) {
|
5
5
|
const { startValue, endValue } = useMemo(() => {
|
@@ -38,22 +38,52 @@ function useStickyStyles(scrollProgress, axis, { borderColor, boxShadowColor })
|
|
38
38
|
},
|
39
39
|
};
|
40
40
|
}
|
41
|
-
function useScrollProgress({ containerRef, skip, }) {
|
41
|
+
function useScrollProgress({ containerRef, skip, throttleMs = 50, }) {
|
42
42
|
const [scrollState, setScrollState] = useState(null);
|
43
|
-
const
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
}
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
43
|
+
const currentStateRef = useRef(null);
|
44
|
+
// Create a stable throttled function for updating scroll state
|
45
|
+
const throttledSetScrollState = useMemo(() => throttle((value) => {
|
46
|
+
const currentState = currentStateRef.current;
|
47
|
+
// Check if values actually changed using ref (doesn't trigger re-renders)
|
48
|
+
if ((currentState === null || currentState === void 0 ? void 0 : currentState.scrollX) === value.scrollX && currentState.scrollXProgress === value.scrollXProgress) {
|
49
|
+
return;
|
50
|
+
}
|
51
|
+
currentStateRef.current = value;
|
52
|
+
setScrollState(value);
|
53
|
+
}, throttleMs), [throttleMs]);
|
54
|
+
const handleScroll = useCallback(() => {
|
55
|
+
const element = containerRef.current;
|
56
|
+
if (!element) {
|
57
|
+
return;
|
58
|
+
}
|
59
|
+
const scrollX = element.scrollLeft;
|
60
|
+
const maxScrollX = element.scrollWidth - element.clientWidth;
|
61
|
+
const scrollXProgress = maxScrollX > 0 ? scrollX / maxScrollX : 1;
|
62
|
+
throttledSetScrollState({ scrollX, scrollXProgress });
|
63
|
+
}, [containerRef, throttledSetScrollState]);
|
64
|
+
// Handle element resize to recalculate scroll progress
|
65
|
+
useLayoutEffect(() => {
|
66
|
+
if (skip) {
|
67
|
+
return;
|
68
|
+
}
|
69
|
+
const element = containerRef.current;
|
70
|
+
if (!element) {
|
71
|
+
return;
|
72
|
+
}
|
73
|
+
// Set up scroll listener
|
74
|
+
element.addEventListener('scroll', handleScroll, { passive: true });
|
75
|
+
// Set up resize observer to recalculate on container size changes
|
76
|
+
const resizeObserver = new ResizeObserver(handleScroll);
|
77
|
+
resizeObserver.observe(element);
|
78
|
+
// Call immediately to set initial state
|
79
|
+
handleScroll();
|
80
|
+
return () => {
|
81
|
+
element.removeEventListener('scroll', handleScroll);
|
82
|
+
resizeObserver.disconnect();
|
83
|
+
throttledSetScrollState.cancel();
|
84
|
+
};
|
85
|
+
}, [containerRef, handleScroll, throttledSetScrollState, skip]);
|
86
|
+
const isContainerUnscrollable = (scrollState === null || scrollState === void 0 ? void 0 : scrollState.scrollX) === 0 && scrollState.scrollXProgress === 1;
|
57
87
|
// If container is not scrollable return null
|
58
88
|
if (!scrollState || isContainerUnscrollable) {
|
59
89
|
return null;
|
@@ -71,4 +101,4 @@ export function useScrollStyles({ containerRef, skip = false, direction = 'horiz
|
|
71
101
|
const scrollXProgress = useScrollProgress({ containerRef, skip });
|
72
102
|
return useStickyStyles(scrollXProgress, direction, options);
|
73
103
|
}
|
74
|
-
//# sourceMappingURL=data:application/json;base64,
|
104
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RpY2t5U3R5bGVzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL3V0aWxzL3N0aWNreVN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLEVBQUUsRUFBRSxXQUFXLEVBQUUsZUFBZSxFQUFFLE9BQU8sRUFBRSxNQUFNLEVBQUUsUUFBUSxFQUFFLE1BQU0sT0FBTyxDQUFDO0FBQ3ZGLE9BQU8sRUFBRSxRQUFRLEVBQUUsU0FBUyxFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFDeEQsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLFdBQVcsQ0FBQztBQVVyQyxTQUFTLGVBQWUsQ0FDdEIsY0FBNkIsRUFDN0IsSUFBcUIsRUFDckIsRUFBRSxXQUFXLEVBQUUsY0FBYyxFQUEwQjtJQUV2RCxNQUFNLEVBQUUsVUFBVSxFQUFFLFFBQVEsRUFBRSxHQUFHLE9BQU8sQ0FBQyxHQUFHLEVBQUU7UUFDNUMsSUFBSSxjQUFjLEtBQUssSUFBSSxFQUFFLENBQUM7WUFDNUIsT0FBTyxFQUFFLFVBQVUsRUFBRSxDQUFDLEVBQUUsUUFBUSxFQUFFLENBQUMsRUFBRSxDQUFDO1FBQ3hDLENBQUM7UUFDRCxNQUFNLFVBQVUsR0FBRyxjQUFjLENBQUM7UUFDbEMsTUFBTSxRQUFRLEdBQUcsQ0FBQyxHQUFHLGNBQWMsQ0FBQztRQUNwQyxPQUFPLEVBQUUsVUFBVSxFQUFFLFFBQVEsRUFBRSxDQUFDO0lBQ2xDLENBQUMsRUFBRSxDQUFDLGNBQWMsQ0FBQyxDQUFDLENBQUM7SUFFckIsTUFBTSxZQUFZLEdBQUcsU0FBUyxDQUFDO1FBQzdCLGdCQUFnQixFQUFFLFFBQVEsV0FBVyxLQUFLLFVBQVUsR0FBRztRQUN2RCxjQUFjLEVBQUUsUUFBUSxXQUFXLEtBQUssUUFBUSxHQUFHO1FBQ25ELG1CQUFtQixFQUFFLFFBQVEsY0FBYyxLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsVUFBVSxHQUFHLEdBQUcsRUFBRSxHQUFHLENB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
|
package/dist/styles.css
CHANGED
@@ -1475,6 +1475,10 @@ input[type='number'].no-arrows {
|
|
1475
1475
|
.grow-0{
|
1476
1476
|
flex-grow: 0;
|
1477
1477
|
}
|
1478
|
+
.basis-\[--aquarium-screens-xs\]{
|
1479
|
+
flex-basis: 320px;
|
1480
|
+
flex-basis: var(--aquarium-screens-xs);
|
1481
|
+
}
|
1478
1482
|
.table-auto{
|
1479
1483
|
table-layout: auto;
|
1480
1484
|
}
|
@@ -1627,10 +1631,6 @@ input[type='number'].no-arrows {
|
|
1627
1631
|
.justify-between{
|
1628
1632
|
justify-content: space-between;
|
1629
1633
|
}
|
1630
|
-
.gap-0{
|
1631
|
-
grid-gap: 0px;
|
1632
|
-
gap: 0px;
|
1633
|
-
}
|
1634
1634
|
.gap-1{
|
1635
1635
|
grid-gap: 2px;
|
1636
1636
|
gap: 2px;
|
@@ -4520,6 +4520,11 @@ input[type='number'].no-arrows {
|
|
4520
4520
|
background-color: rgba(247,247,250,1);
|
4521
4521
|
background-color: var(--aquarium-background-color-muted);
|
4522
4522
|
}
|
4523
|
+
@media (min-width: 672px){
|
4524
|
+
.sm\:flex-row{
|
4525
|
+
flex-direction: row;
|
4526
|
+
}
|
4527
|
+
}
|
4523
4528
|
.\[\&\:\:-webkit-search-cancel-button\]\:hidden::-webkit-search-cancel-button{
|
4524
4529
|
display: none;
|
4525
4530
|
}
|
package/dist/system.cjs
CHANGED
@@ -7356,18 +7356,15 @@ var Transition = ({ children }) => {
|
|
7356
7356
|
keys: (item) => item.key || "",
|
7357
7357
|
config: { tension: 125, friction: 20, precision: 0.1 }
|
7358
7358
|
});
|
7359
|
-
return /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, transitions((style, item) => (
|
7360
|
-
|
7361
|
-
|
7362
|
-
|
7363
|
-
|
7364
|
-
|
7365
|
-
|
7366
|
-
|
7367
|
-
|
7368
|
-
item
|
7369
|
-
))
|
7370
|
-
)));
|
7359
|
+
return /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, transitions((style, item) => /* @__PURE__ */ import_react14.default.createElement(import_web.animated.div, { style }, /* @__PURE__ */ import_react14.default.createElement(
|
7360
|
+
"div",
|
7361
|
+
{
|
7362
|
+
ref: (ref) => {
|
7363
|
+
ref && refMap.set(item, ref);
|
7364
|
+
}
|
7365
|
+
},
|
7366
|
+
item
|
7367
|
+
))));
|
7371
7368
|
};
|
7372
7369
|
|
7373
7370
|
// src/atoms/Toast/Toast.tsx
|
@@ -7846,28 +7843,25 @@ var AccordionToggle = ({ panelId, onChange, ...rest }) => {
|
|
7846
7843
|
}
|
7847
7844
|
});
|
7848
7845
|
const { buttonProps } = (0, import_button.useButton)({ elementType: "div", onPress: handleClick }, ref);
|
7849
|
-
return (
|
7850
|
-
|
7851
|
-
|
7852
|
-
|
7853
|
-
{
|
7854
|
-
...
|
7855
|
-
|
7856
|
-
|
7857
|
-
|
7858
|
-
|
7859
|
-
handleClick();
|
7860
|
-
}
|
7861
|
-
},
|
7862
|
-
ref,
|
7863
|
-
"aria-label": "accordion toggle",
|
7864
|
-
"aria-expanded": openPanelId === id,
|
7865
|
-
"aria-controls": `${id}-content`,
|
7866
|
-
style: { transform },
|
7867
|
-
className: tw("text-default focus:outline-none focusable")
|
7846
|
+
return /* @__PURE__ */ import_react24.default.createElement(
|
7847
|
+
import_web3.animated.div,
|
7848
|
+
{
|
7849
|
+
...rest,
|
7850
|
+
...{
|
7851
|
+
...buttonProps,
|
7852
|
+
onPointerDown: (e) => {
|
7853
|
+
e.preventDefault();
|
7854
|
+
handleClick();
|
7855
|
+
}
|
7868
7856
|
},
|
7869
|
-
|
7870
|
-
|
7857
|
+
ref,
|
7858
|
+
"aria-label": "accordion toggle",
|
7859
|
+
"aria-expanded": openPanelId === id,
|
7860
|
+
"aria-controls": `${id}-content`,
|
7861
|
+
style: { transform },
|
7862
|
+
className: tw("text-default focus:outline-none focusable")
|
7863
|
+
},
|
7864
|
+
/* @__PURE__ */ import_react24.default.createElement(import_react25.Icon, { icon: import_caretUp.default, height: 22, width: 22 })
|
7871
7865
|
);
|
7872
7866
|
};
|
7873
7867
|
var AccordionPanel = ({ children, panelId, ...rest }) => {
|
@@ -7883,20 +7877,17 @@ var AccordionPanel = ({ children, panelId, ...rest }) => {
|
|
7883
7877
|
duration: 150
|
7884
7878
|
}
|
7885
7879
|
});
|
7886
|
-
return (
|
7887
|
-
|
7888
|
-
|
7889
|
-
|
7890
|
-
|
7891
|
-
|
7892
|
-
|
7893
|
-
|
7894
|
-
|
7895
|
-
|
7896
|
-
|
7897
|
-
},
|
7898
|
-
/* @__PURE__ */ import_react24.default.createElement("div", { ref }, children)
|
7899
|
-
)
|
7880
|
+
return /* @__PURE__ */ import_react24.default.createElement(
|
7881
|
+
import_web3.animated.div,
|
7882
|
+
{
|
7883
|
+
role: "region",
|
7884
|
+
...rest,
|
7885
|
+
id: `${id}-content`,
|
7886
|
+
"aria-labelledby": `${id}-summary`,
|
7887
|
+
"aria-hidden": !isOpen ? "true" : void 0,
|
7888
|
+
style
|
7889
|
+
},
|
7890
|
+
/* @__PURE__ */ import_react24.default.createElement("div", { ref }, children)
|
7900
7891
|
);
|
7901
7892
|
};
|
7902
7893
|
var AccordionUnanimatedPanel = ({ children, panelId }) => {
|
@@ -11011,24 +11002,51 @@ function useStickyStyles(scrollProgress, axis, { borderColor, boxShadowColor })
|
|
11011
11002
|
}
|
11012
11003
|
function useScrollProgress({
|
11013
11004
|
containerRef,
|
11014
|
-
skip
|
11005
|
+
skip,
|
11006
|
+
throttleMs = 50
|
11015
11007
|
}) {
|
11016
11008
|
const [scrollState, setScrollState] = (0, import_react73.useState)(null);
|
11017
|
-
const
|
11018
|
-
|
11019
|
-
|
11020
|
-
|
11021
|
-
|
11022
|
-
|
11023
|
-
|
11024
|
-
|
11025
|
-
|
11026
|
-
|
11027
|
-
|
11028
|
-
|
11029
|
-
|
11030
|
-
|
11031
|
-
|
11009
|
+
const currentStateRef = (0, import_react73.useRef)(null);
|
11010
|
+
const throttledSetScrollState = (0, import_react73.useMemo)(
|
11011
|
+
() => (0, import_lodash_es24.throttle)((value) => {
|
11012
|
+
const currentState = currentStateRef.current;
|
11013
|
+
if (currentState?.scrollX === value.scrollX && currentState.scrollXProgress === value.scrollXProgress) {
|
11014
|
+
return;
|
11015
|
+
}
|
11016
|
+
currentStateRef.current = value;
|
11017
|
+
setScrollState(value);
|
11018
|
+
}, throttleMs),
|
11019
|
+
[throttleMs]
|
11020
|
+
);
|
11021
|
+
const handleScroll = (0, import_react73.useCallback)(() => {
|
11022
|
+
const element = containerRef.current;
|
11023
|
+
if (!element) {
|
11024
|
+
return;
|
11025
|
+
}
|
11026
|
+
const scrollX = element.scrollLeft;
|
11027
|
+
const maxScrollX = element.scrollWidth - element.clientWidth;
|
11028
|
+
const scrollXProgress = maxScrollX > 0 ? scrollX / maxScrollX : 1;
|
11029
|
+
throttledSetScrollState({ scrollX, scrollXProgress });
|
11030
|
+
}, [containerRef, throttledSetScrollState]);
|
11031
|
+
(0, import_react73.useLayoutEffect)(() => {
|
11032
|
+
if (skip) {
|
11033
|
+
return;
|
11034
|
+
}
|
11035
|
+
const element = containerRef.current;
|
11036
|
+
if (!element) {
|
11037
|
+
return;
|
11038
|
+
}
|
11039
|
+
element.addEventListener("scroll", handleScroll, { passive: true });
|
11040
|
+
const resizeObserver = new ResizeObserver(handleScroll);
|
11041
|
+
resizeObserver.observe(element);
|
11042
|
+
handleScroll();
|
11043
|
+
return () => {
|
11044
|
+
element.removeEventListener("scroll", handleScroll);
|
11045
|
+
resizeObserver.disconnect();
|
11046
|
+
throttledSetScrollState.cancel();
|
11047
|
+
};
|
11048
|
+
}, [containerRef, handleScroll, throttledSetScrollState, skip]);
|
11049
|
+
const isContainerUnscrollable = scrollState?.scrollX === 0 && scrollState.scrollXProgress === 1;
|
11032
11050
|
if (!scrollState || isContainerUnscrollable) {
|
11033
11051
|
return null;
|
11034
11052
|
}
|
@@ -16914,7 +16932,7 @@ var import_lodash_es43 = require("lodash-es");
|
|
16914
16932
|
// src/atoms/PageHeader/PageHeader.tsx
|
16915
16933
|
var import_react117 = __toESM(require("react"));
|
16916
16934
|
var PageHeader = ({ children, className, ...rest }) => /* @__PURE__ */ import_react117.default.createElement("div", { className: classNames(tw("flex flex-row flex-wrap gap-4 pb-6"), className), ...rest }, children);
|
16917
|
-
PageHeader.Container = ({ children, className, ...rest }) => /* @__PURE__ */ import_react117.default.createElement("div", { className: classNames(tw("flex flex-col
|
16935
|
+
PageHeader.Container = ({ children, className, ...rest }) => /* @__PURE__ */ import_react117.default.createElement("div", { className: classNames(tw("flex flex-col flex-1 basis-[--aquarium-screens-xs]"), className), ...rest }, children);
|
16918
16936
|
PageHeader.TitleContainer = ({ children, className, ...rest }) => /* @__PURE__ */ import_react117.default.createElement("div", { className: classNames(tw("flex flex-col justify-center gap-2"), className), ...rest }, children);
|
16919
16937
|
PageHeader.Title = ({ isSubHeader = false, children, ...rest }) => /* @__PURE__ */ import_react117.default.createElement(
|
16920
16938
|
Typography2,
|
@@ -16928,7 +16946,7 @@ PageHeader.Title = ({ isSubHeader = false, children, ...rest }) => /* @__PURE__
|
|
16928
16946
|
);
|
16929
16947
|
PageHeader.Subtitle = ({ children, ...rest }) => /* @__PURE__ */ import_react117.default.createElement(Typography2.Small, { ...rest, color: "default" }, children);
|
16930
16948
|
PageHeader.Chips = ({ children, className, ...rest }) => /* @__PURE__ */ import_react117.default.createElement("div", { className: classNames(tw("flex gap-3"), className), ...rest }, children);
|
16931
|
-
PageHeader.Actions = ({ children, className, ...rest }) => /* @__PURE__ */ import_react117.default.createElement("div", { className: classNames(tw("flex flex-row gap-4 self-start"), className), ...rest }, children);
|
16949
|
+
PageHeader.Actions = ({ children, className, ...rest }) => /* @__PURE__ */ import_react117.default.createElement("div", { className: classNames(tw("flex flex-row-reverse sm:flex-row gap-4 self-start"), className), ...rest }, children);
|
16932
16950
|
|
16933
16951
|
// src/molecules/PageHeader/PageHeader.tsx
|
16934
16952
|
var import_more5 = __toESM(require_more());
|
@@ -17413,8 +17431,7 @@ var Section3 = (props) => {
|
|
17413
17431
|
id: toggleId,
|
17414
17432
|
collapsible: _collapsible
|
17415
17433
|
},
|
17416
|
-
_collapsible &&
|
17417
|
-
/* @__PURE__ */ import_react130.default.createElement(import_web6.animated.div, { style: { transform } }, /* @__PURE__ */ import_react130.default.createElement(Section2.Toggle, null)),
|
17434
|
+
_collapsible && /* @__PURE__ */ import_react130.default.createElement(import_web6.animated.div, { style: { transform } }, /* @__PURE__ */ import_react130.default.createElement(Section2.Toggle, null)),
|
17418
17435
|
/* @__PURE__ */ import_react130.default.createElement(Section2.Title, { id: titleId }, /* @__PURE__ */ import_react130.default.createElement(LineClamp2, { lines: 1 }, title), props.tag && /* @__PURE__ */ import_react130.default.createElement(TagLabel, { ...props.tag }), props.badge && /* @__PURE__ */ import_react130.default.createElement(Chip2, { text: props.badge }), props.chip && /* @__PURE__ */ import_react130.default.createElement(StatusChip, { ...props.chip })),
|
17419
17436
|
subtitle && /* @__PURE__ */ import_react130.default.createElement(Section2.Subtitle, { className: tw("row-start-2", { "col-start-2": _collapsible }) }, /* @__PURE__ */ import_react130.default.createElement(LineClamp2, { lines: 1 }, subtitle))
|
17420
17437
|
), !isCollapsed && /* @__PURE__ */ import_react130.default.createElement(Section2.Actions, null, props.switch && /* @__PURE__ */ import_react130.default.createElement(Switch2, { ...props.switch }), menu && /* @__PURE__ */ import_react130.default.createElement(Box.Flex, { alignItems: "center" }, /* @__PURE__ */ import_react130.default.createElement(
|
@@ -17426,8 +17443,7 @@ var Section3 = (props) => {
|
|
17426
17443
|
},
|
17427
17444
|
/* @__PURE__ */ import_react130.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react130.default.createElement(Button2.Icon, { "aria-label": menuAriaLabel, icon: import_more6.default })),
|
17428
17445
|
menu
|
17429
|
-
)), props.actions && (0, import_lodash_es46.castArray)(props.actions).filter(Boolean).map((action) => renderAction({ kind: "secondary", action })), props.select && /* @__PURE__ */ import_react130.default.createElement(SelectBase, { "aria-labelledby": titleId, ...props.select }))), !hasTabs && !isCollapsed &&
|
17430
|
-
/* @__PURE__ */ import_react130.default.createElement(import_web6.animated.div, { className: tw(`h-[1px]`), style: { backgroundColor: "var(--aquarium-border-color-muted)" } })), /* @__PURE__ */ import_react130.default.createElement(
|
17446
|
+
)), props.actions && (0, import_lodash_es46.castArray)(props.actions).filter(Boolean).map((action) => renderAction({ kind: "secondary", action })), props.select && /* @__PURE__ */ import_react130.default.createElement(SelectBase, { "aria-labelledby": titleId, ...props.select }))), !hasTabs && !isCollapsed && /* @__PURE__ */ import_react130.default.createElement(import_web6.animated.div, { className: tw(`h-[1px]`), style: { backgroundColor: "var(--aquarium-border-color-muted)" } })), /* @__PURE__ */ import_react130.default.createElement(
|
17431
17447
|
import_web6.animated.div,
|
17432
17448
|
{
|
17433
17449
|
id: regionId,
|