quirk-ui 0.0.94 → 0.0.96
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/assets/index12.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._buttonGroup_89ngj_1{display:flex;gap:.5rem}._buttonGroup_89ngj_1>*{align-self:flex-start;width:auto}._left_89ngj_11{justify-content:flex-start}._center_89ngj_15{justify-content:center}@media (max-width: 767px){._center_89ngj_15{justify-content:flex-start}}._right_89ngj_23{justify-content:flex-end}._vertical_89ngj_27{flex-direction:column}._horizontal_89ngj_31{flex-direction:row}@media (max-width: 480px){._buttonGroup_89ngj_1{flex-direction:column}}
|
package/dist/assets/index26.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._accordion_1qqki_1{width:100%;overflow:hidden;background-color:transparent}._accordionItem_1qqki_7{border-bottom:1px solid var(--color-border)}._accordionItem_1qqki_7:last-child{border-bottom:none}._accordionHeader_1qqki_15{text-align:left;width:100%;padding:var(--spacing-md);background-color:transparent;border:none;color:var(--color-text-primary);cursor:pointer;font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);display:flex;align-items:center;justify-content:space-between;transition:color .3s}._accordionHeader_1qqki_15._active_1qqki_30,._accordionHeader_1qqki_15:hover,._accordionHeader_1qqki_15:hover ._icon_1qqki_38{color:var(--color-primary)}._accordionContentWrapper_1qqki_43{overflow:hidden;max-height:0;transition:max-height .3s ease-in-out,opacity .3s ease-in-out;opacity:0}._open_1qqki_50 ._accordionContentWrapper_1qqki_43{max-height:800px;opacity:1;transition-timing-function:ease-in-out}._closed_1qqki_56 ._accordionContentWrapper_1qqki_43{max-height:0;opacity:0;transition-timing-function:ease-in-out}._accordionContent_1qqki_43{padding:var(--spacing-md);box-sizing:border-box;color:var(--color-text-primary)}._icon_1qqki_38{transition:transform .3s,color .3s ease-in-out}._rotate_1qqki_72{transform:rotate(180deg)}
|
|
@@ -1,50 +1,50 @@
|
|
|
1
1
|
import { jsx as e, jsxs as i } from "react/jsx-runtime";
|
|
2
|
-
import { useState as
|
|
3
|
-
import { C as
|
|
4
|
-
import '../../assets/index26.css';const
|
|
5
|
-
accordion:
|
|
6
|
-
accordionItem:
|
|
7
|
-
accordionHeader:
|
|
8
|
-
active:
|
|
9
|
-
icon:
|
|
10
|
-
accordionContentWrapper:
|
|
11
|
-
open:
|
|
12
|
-
closed:
|
|
13
|
-
accordionContent:
|
|
14
|
-
rotate:
|
|
2
|
+
import { useState as m } from "react";
|
|
3
|
+
import { C as p } from "../../chevron-down-DSUzBz9F.js";
|
|
4
|
+
import '../../assets/index26.css';const k = "_accordion_1qqki_1", u = "_accordionItem_1qqki_7", C = "_accordionHeader_1qqki_15", h = "_active_1qqki_30", f = "_icon_1qqki_38", v = "_accordionContentWrapper_1qqki_43", N = "_open_1qqki_50", $ = "_closed_1qqki_56", x = "_accordionContent_1qqki_43", H = "_rotate_1qqki_72", c = {
|
|
5
|
+
accordion: k,
|
|
6
|
+
accordionItem: u,
|
|
7
|
+
accordionHeader: C,
|
|
8
|
+
active: h,
|
|
9
|
+
icon: f,
|
|
10
|
+
accordionContentWrapper: v,
|
|
11
|
+
open: N,
|
|
12
|
+
closed: $,
|
|
13
|
+
accordionContent: x,
|
|
14
|
+
rotate: H
|
|
15
15
|
};
|
|
16
|
-
function
|
|
16
|
+
function j({
|
|
17
17
|
items: s,
|
|
18
18
|
multiple: d = !1,
|
|
19
19
|
className: _
|
|
20
20
|
}) {
|
|
21
|
-
const [a, l] =
|
|
22
|
-
l((n) => d ? n.includes(o) ? n.filter((
|
|
21
|
+
const [a, l] = m([]), q = (o) => {
|
|
22
|
+
l((n) => d ? n.includes(o) ? n.filter((t) => t !== o) : [...n, o] : n.includes(o) ? [] : [o]);
|
|
23
23
|
};
|
|
24
|
-
return /* @__PURE__ */ e("div", { className: `${_ ?? ""} ${c.accordion}`, children: s.map(({ id: o, title: n, description:
|
|
25
|
-
const
|
|
24
|
+
return /* @__PURE__ */ e("div", { className: `${_ ?? ""} ${c.accordion}`, children: s.map(({ id: o, title: n, description: t }) => {
|
|
25
|
+
const r = a.includes(o);
|
|
26
26
|
return /* @__PURE__ */ i("div", { className: c.accordionItem, children: [
|
|
27
27
|
/* @__PURE__ */ i(
|
|
28
28
|
"button",
|
|
29
29
|
{
|
|
30
30
|
className: `${c.accordionHeader} ${a.includes(o) ? c.active : ""}`,
|
|
31
|
-
onClick: () =>
|
|
32
|
-
"aria-expanded":
|
|
31
|
+
onClick: () => q(o),
|
|
32
|
+
"aria-expanded": r,
|
|
33
33
|
children: [
|
|
34
34
|
/* @__PURE__ */ e("span", { children: n }),
|
|
35
35
|
/* @__PURE__ */ e(
|
|
36
|
-
|
|
36
|
+
p,
|
|
37
37
|
{
|
|
38
|
-
className: `${c.icon} ${
|
|
38
|
+
className: `${c.icon} ${r ? c.rotate : ""}`
|
|
39
39
|
}
|
|
40
40
|
)
|
|
41
41
|
]
|
|
42
42
|
}
|
|
43
43
|
),
|
|
44
|
-
/* @__PURE__ */ e("div", { className:
|
|
44
|
+
/* @__PURE__ */ e("div", { className: r ? c.open : c.closed, children: /* @__PURE__ */ e("div", { className: c.accordionContentWrapper, children: /* @__PURE__ */ e("div", { className: `${c.accordionContent}`, children: t }) }) })
|
|
45
45
|
] }, o);
|
|
46
46
|
}) });
|
|
47
47
|
}
|
|
48
48
|
export {
|
|
49
|
-
|
|
49
|
+
j as Accordion
|
|
50
50
|
};
|
|
@@ -1,31 +1,31 @@
|
|
|
1
1
|
import { jsx as i } from "react/jsx-runtime";
|
|
2
|
-
import '../../assets/index12.css';const s = "
|
|
2
|
+
import '../../assets/index12.css';const s = "_buttonGroup_89ngj_1", _ = "_left_89ngj_11", a = "_center_89ngj_15", g = "_right_89ngj_23", u = "_vertical_89ngj_27", h = "_horizontal_89ngj_31", t = {
|
|
3
3
|
buttonGroup: s,
|
|
4
4
|
left: _,
|
|
5
5
|
center: a,
|
|
6
|
-
right:
|
|
7
|
-
vertical:
|
|
8
|
-
horizontal:
|
|
9
|
-
},
|
|
6
|
+
right: g,
|
|
7
|
+
vertical: u,
|
|
8
|
+
horizontal: h
|
|
9
|
+
}, p = {
|
|
10
10
|
left: t.left,
|
|
11
11
|
center: t.center,
|
|
12
12
|
right: t.right
|
|
13
13
|
};
|
|
14
14
|
function v({
|
|
15
|
-
children:
|
|
16
|
-
className:
|
|
15
|
+
children: n,
|
|
16
|
+
className: o,
|
|
17
17
|
alignment: r = "left",
|
|
18
|
-
orientation:
|
|
19
|
-
role:
|
|
18
|
+
orientation: e = "horizontal",
|
|
19
|
+
role: f = "group",
|
|
20
20
|
...l
|
|
21
21
|
}) {
|
|
22
|
-
const c =
|
|
22
|
+
const c = e === "vertical" ? t.vertical : t.horizontal;
|
|
23
23
|
return /* @__PURE__ */ i(
|
|
24
24
|
"div",
|
|
25
25
|
{
|
|
26
|
-
className: `${
|
|
26
|
+
className: `${o ?? ""} ${t.buttonGroup} ${c} ${p[r]}`,
|
|
27
27
|
...l,
|
|
28
|
-
children:
|
|
28
|
+
children: n
|
|
29
29
|
}
|
|
30
30
|
);
|
|
31
31
|
}
|
package/dist/styles.css
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
._spinner_sf4mt_1{display:inline-flex;align-items:center;justify-content:center;position:relative}._small_sf4mt_8{width:24px;height:24px}._medium_sf4mt_13{width:48px;height:48px}._large_sf4mt_18{width:72px;height:72px}._prong_sf4mt_23{width:8%;height:30%;background-color:currentColor;border-radius:4px;position:absolute;top:67%;transform-origin:center -55%;animation:_fade_sf4mt_1 1s linear infinite}._primary_sf4mt_34{color:var(--color-primary)}._success_sf4mt_38{color:var(--color-success)}._warning_sf4mt_42{color:var(--color-warning)}._danger_sf4mt_46{color:var(--color-error)}@keyframes _fade_sf4mt_1{0%{opacity:1}to{opacity:.2}}._prong_sf4mt_23:nth-child(1){transform:rotate(0);animation-delay:-.9s}._prong_sf4mt_23:nth-child(2){transform:rotate(36deg);animation-delay:-.8s}._prong_sf4mt_23:nth-child(3){transform:rotate(72deg);animation-delay:-.7s}._prong_sf4mt_23:nth-child(4){transform:rotate(108deg);animation-delay:-.6s}._prong_sf4mt_23:nth-child(5){transform:rotate(144deg);animation-delay:-.5s}._prong_sf4mt_23:nth-child(6){transform:rotate(180deg);animation-delay:-.4s}._prong_sf4mt_23:nth-child(7){transform:rotate(216deg);animation-delay:-.3s}._prong_sf4mt_23:nth-child(8){transform:rotate(252deg);animation-delay:-.2s}._prong_sf4mt_23:nth-child(9){transform:rotate(288deg);animation-delay:-.1s}._prong_sf4mt_23:nth-child(10){transform:rotate(324deg);animation-delay:0s}
|
|
10
10
|
._spacer_1pz5u_1{flex-shrink:0;background:none}._horizontal_1pz5u_6{width:100%;height:auto}._vertical_1pz5u_11{height:100%;width:auto}._sm_1pz5u_16{height:.5rem;width:.5rem}._md_1pz5u_21{height:1rem;width:1rem}._lg_1pz5u_26{height:2rem;width:2rem}._xl_1pz5u_31{height:3rem;width:3rem}
|
|
11
11
|
._skeleton_u21vc_1{background-color:#e0e0e0;overflow:hidden;position:relative;display:inline-block;animation:_shimmer_u21vc_1 1.5s infinite;background:linear-gradient(90deg,#e0e0e0,#f0f0f0,#e0e0e0);background-size:200% 100%}._text_u21vc_16{height:16px;width:100%;border-radius:4px}._circle_u21vc_22{border-radius:50%;aspect-ratio:1/1}._rectangle_u21vc_27{border-radius:4px}@keyframes _shimmer_u21vc_1{0%{background-position:-200%}50%{background-position:100%}to{background-position:200%}}
|
|
12
|
-
.
|
|
12
|
+
._buttonGroup_89ngj_1{display:flex;gap:.5rem}._buttonGroup_89ngj_1>*{align-self:flex-start;width:auto}._left_89ngj_11{justify-content:flex-start}._center_89ngj_15{justify-content:center}@media (max-width: 767px){._center_89ngj_15{justify-content:flex-start}}._right_89ngj_23{justify-content:flex-end}._vertical_89ngj_27{flex-direction:column}._horizontal_89ngj_31{flex-direction:row}@media (max-width: 480px){._buttonGroup_89ngj_1{flex-direction:column}}
|
|
13
13
|
._fab_1p460_1{position:fixed;bottom:var(--spacing-lg);right:var(--spacing-lg);z-index:25;background-color:var(--color-primary, #000);color:#fff;border:none;border-radius:var(--radius-full);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);transition:background-color .25s ease-in-out}._fab_1p460_1:hover{background-color:var(--color-secondary)}._sm_1p460_22{width:40px;height:40px}._md_1p460_27{width:56px;height:56px}._lg_1p460_31{width:72px;height:72px}._bottom-right_1p460_36{bottom:var(--spacing-lg);right:var(--spacing-lg)}._bottom-left_1p460_41{bottom:var(--spacing-lg);left:var(--spacing-lg)}._top-right_1p460_46{top:var(--spacing-lg);right:var(--spacing-lg)}._top-left_1p460_51{top:var(--spacing-lg);left:var(--spacing-lg)}._disabled_1p460_56{color:var(--color-muted)}
|
|
14
14
|
._callToAction_1tdql_1{display:inline-flex;text-decoration:none;border-radius:var(--radius-md);border:2px solid transparent;padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-md);font-weight:var(--font-weight-bold);font-family:inherit;background-color:var(--color-primary);cursor:pointer;transition:background-color .25s,border-color .25s;height:40px}._callToAction_1tdql_1:focus,._callToAction_1tdql_1:focus-visible{outline:4px auto -webkit-focus-ring-color}._callToAction_1tdql_1:disabled{border-color:var(--color-muted);background-color:var(--color-muted);color:#e0e0e0;cursor:not-allowed}._primary_1tdql_28{background-color:var(--color-primary);color:#fff}._primary_1tdql_28:hover{background-color:var(--color-secondary);color:#fff}._primaryInverted_1tdql_38{border-color:#fff;background-color:#fff;color:var(--color-primary)}._primaryInverted_1tdql_38:hover{border-color:var(--color-secondary);background-color:var(--color-secondary);color:var(--color-primary)}._secondary_1tdql_50{background-color:transparent;border-color:var(--color-primary);border-width:2px;color:var(--color-primary)}._secondary_1tdql_50:hover{border-color:var(--color-primary);background-color:var(--color-primary);color:#fff}._secondaryInverted_1tdql_63{background-color:transparent;border-color:#fff;border-width:2px;color:#fff}._secondaryInverted_1tdql_63:hover{border-color:#fff;background-color:#fff;color:var(--color-primary)}._link_1tdql_76{color:var(--color-link);background-color:transparent;border:none;padding:0;text-decoration:none;height:unset}._linkInverted_1tdql_85{color:#fff;background-color:transparent;border:none;padding:0;text-decoration:none;height:unset}._underline_1tdql_94{color:var(--color-link);background-color:transparent;border:none;padding:0;text-decoration:underline;height:unset}._underlineInverted_1tdql_103{color:#fff;background-color:transparent;border:none;padding:0;text-decoration:underline;height:unset}._muted_1tdql_112{color:var(--color-muted);background-color:transparent;border:none;padding:0;text-decoration:none;height:unset}._icon_1tdql_121{display:inline-flex}._content_1tdql_125{display:inline-flex;align-items:center;justify-content:center;flex-direction:row;gap:var(--spacing-sm);text-wrap:nowrap}._iconLeft_1tdql_134{flex-direction:row-reverse}._iconRight_1tdql_138{flex-direction:row}
|
|
15
15
|
._iconButton_e9jmu_1{display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:var(--spacing-sm);border-radius:var(--radius-md);cursor:pointer;transition:background .25s ease}._iconButton_e9jmu_1:disabled{opacity:.5;cursor:not-allowed}._sm_e9jmu_18{width:32px;height:32px}._md_e9jmu_23{width:40px;height:40px}._lg_e9jmu_28{width:48px;height:48px}._default_e9jmu_33{background-color:#f0f0f0;color:#111}._muted_e9jmu_38{background-color:#bbb;color:var(--color-muted)}._accent_e9jmu_43{background-color:var(--color-primary);color:#fff}._error_e9jmu_48{background-color:var(--color-error);color:#fff}._srOnly_e9jmu_53{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
|
|
@@ -23,7 +23,7 @@ ul._list_4w9h5_1{list-style-type:none;padding:0;margin:0}ol._list_4w9h5_1{list-s
|
|
|
23
23
|
._avatar_1ihs2_1{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;overflow:visible;border:2px solid;cursor:default;transition:transform .3s}._avatar_1ihs2_1:hover{transform:scale(1.05)}._sm_1ihs2_17{width:32px;height:32px;font-size:12px}._md_1ihs2_23{width:48px;height:48px;font-size:16px}._lg_1ihs2_29{width:64px;height:64px;font-size:20px}._xl_1ihs2_35{width:80px;height:80px;font-size:20px}._image_1ihs2_41{width:100%;height:100%;border-radius:50%;object-fit:cover}._initials_1ihs2_48{color:#fff;font-family:var(--font-weight-bold)}._status_1ihs2_53{position:absolute;bottom:-2px;right:-2px;width:12px;height:12px;border-radius:50%;border:2px solid #fff;background-color:var(--color-offline);z-index:1}._online_1ihs2_65{background-color:var(--color-online)}._offline_1ihs2_69{background-color:var(--color-offline)}._busy_1ihs2_73{background-color:var(--color-busy)}
|
|
24
24
|
:root{--badge-bg-default: var(--color-secondary, #94a3b8);--badge-bg-success: var(--color-success-bg, #28a745);--badge-bg-warning: var(--color-warning-bg, #f59e0b);--badge-bg-error: var(--color-error-bg, #bd1919);--badge-bg-info: var(--color-info-bg);--badge-text-default: var(--color-secondary-foreground, #fff);--badge-text-success: var(--color-success-text, #fff);--badge-text-warning: var(--color-warning-text, #333);--badge-text-error: var(--color-error-text, #fff);--badge-text-info: var(--color-info-text, #fff);--badge-padding: var(--spacing-sm) var(--spacing-md);--badge-font-size: var(--font-size-sm, .875rem);--badge-border-radius: var(--radius-sm, 8px)}._badge_18z15_19{display:inline-flex;align-items:center;padding:var(--badge-padding);font-size:var(--badge-font-size);border-radius:var(--badge-border-radius);font-weight:var(--font-weight-semibold);cursor:default;transition:background-color .3s,color .3s;-webkit-user-select:none;user-select:none}._clickable_18z15_31{cursor:pointer}._icon_18z15_35{margin-right:var(--spacing-sm);display:flex;align-items:center}._text_18z15_41{display:inline-block}._default_18z15_45{background-color:var(--badge-bg-default);color:var(--badge-text-default)}._success_18z15_50{background-color:var(--badge-bg-success);color:var(--badge-text-success)}._warning_18z15_55{background-color:var(--badge-bg-warning);color:var(--badge-text-warning)}._error_18z15_60{background-color:var(--badge-bg-error);color:var(--badge-text-error)}._info_18z15_65{background-color:var(--badge-bg-info);color:var(--badge-text-info)}
|
|
25
25
|
._overlay_cqo68_1{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:1000;animation:_fadeIn_cqo68_1 .3s ease}._modal_cqo68_16{position:absolute;background-color:var(--color-background, #fff);border-radius:var(--radius-md, 4px);padding:var(--spacing-md, 1rem);width:min(90%,800px);max-width:100%;animation:_slideUp_cqo68_1 .3s ease}._closeButton_cqo68_26{color:var(--color-primary);position:absolute;top:var(--spacing-xs);right:var(--spacing-xs);background:none;border:none;cursor:pointer;padding:var(--spacing-sm)}._content_cqo68_37{margin-top:var(--spacing-lg)}._content_cqo68_37 video{width:100%;max-width:100%;height:auto;border-radius:var(--radius-md)}@keyframes _fadeIn_cqo68_1{0%{opacity:0}to{opacity:1}}@keyframes _slideUp_cqo68_1{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
|
|
26
|
-
.
|
|
26
|
+
._accordion_1qqki_1{width:100%;overflow:hidden;background-color:transparent}._accordionItem_1qqki_7{border-bottom:1px solid var(--color-border)}._accordionItem_1qqki_7:last-child{border-bottom:none}._accordionHeader_1qqki_15{text-align:left;width:100%;padding:var(--spacing-md);background-color:transparent;border:none;color:var(--color-text-primary);cursor:pointer;font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);display:flex;align-items:center;justify-content:space-between;transition:color .3s}._accordionHeader_1qqki_15._active_1qqki_30,._accordionHeader_1qqki_15:hover,._accordionHeader_1qqki_15:hover ._icon_1qqki_38{color:var(--color-primary)}._accordionContentWrapper_1qqki_43{overflow:hidden;max-height:0;transition:max-height .3s ease-in-out,opacity .3s ease-in-out;opacity:0}._open_1qqki_50 ._accordionContentWrapper_1qqki_43{max-height:800px;opacity:1;transition-timing-function:ease-in-out}._closed_1qqki_56 ._accordionContentWrapper_1qqki_43{max-height:0;opacity:0;transition-timing-function:ease-in-out}._accordionContent_1qqki_43{padding:var(--spacing-md);box-sizing:border-box;color:var(--color-text-primary)}._icon_1qqki_38{transition:transform .3s,color .3s ease-in-out}._rotate_1qqki_72{transform:rotate(180deg)}
|
|
27
27
|
._alert_ucye1_1{display:flex;align-items:center;padding:var(--spacing-md);border-radius:var(--radius-md);font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);position:relative;gap:var(--spacing-sm);transition:opacity .3s ease,transform .3s ease;opacity:0;transform:translateY(-10px)}._enter_ucye1_15{opacity:1;transform:translateY(0)}._exit_ucye1_20{opacity:0;transform:translateY(-10px)}._info_ucye1_25{background-color:var(--color-info-bg);color:var(--color-info-text)}._success_ucye1_30{background-color:var(--color-success-bg);color:var(--color-success-text)}._warning_ucye1_35{background-color:var(--color-warning-bg);color:var(--color-warning-text)}._error_ucye1_40{background-color:var(--color-error-bg);color:var(--color-error-text)}._closeButton_ucye1_45{background:none;border:none;cursor:pointer;color:#fff;padding:0;margin-left:auto;display:flex;align-items:center}
|
|
28
28
|
._notification_1txoc_1{display:flex;align-items:center;padding:var(--spacing-md);background-color:var(--color-secondary);color:var(--color-text-primaray);box-shadow:0 4px 8px #0000001a;border-radius:var(--radius-md);font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);gap:var(--spacing-sm);animation:_slideIn_1txoc_1 .3s ease forwards;opacity:1;transform-origin:right center;width:fit-content}._enter_1txoc_18{opacity:1;transform:translate(0)}._exiting_1txoc_23{animation:_slideOut_1txoc_1 .3s ease forwards}._info_1txoc_27{background-color:var(--color-info-bg);color:var(--color-info-text)}._success_1txoc_32{background-color:var(--color-success-bg);color:var(--color-success-text)}._warning_1txoc_37{background-color:var(--color-warning-bg);color:var(--color-warning-text)}._error_1txoc_42{background-color:var(--color-error-bg);color:var(--color-error-text)}._closeButton_1txoc_47{background:none;border:none;cursor:pointer;color:#fff;padding:0;margin-left:auto;display:flex;align-items:center}@keyframes _slideIn_1txoc_1{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes _slideOut_1txoc_1{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}
|
|
29
29
|
._container_61msx_1{position:fixed;bottom:1rem;right:1rem;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;gap:.5rem;z-index:1000}
|