@plumile/ui 0.1.189 → 0.1.190
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/lib/esm/admin/organisms/admin_topbar/adminTopbar.css.js +1 -0
- package/lib/esm/atomic/atoms/checkbox/checkbox.css.js +0 -1
- package/lib/esm/atomic/molecules/markdown/components/MarkdownArticleContainer.css.js +1 -0
- package/lib/esm/atomic/molecules/markdown/components/MarkdownParagraph.css.js +0 -1
- package/lib/esm/backoffice/molecules/backoffice_filter_drawer/BackofficeFilterDrawer.js +7 -11
- package/lib/esm/backoffice/molecules/backoffice_filter_drawer/BackofficeFilterDrawer.js.map +1 -1
- package/lib/esm/backoffice/molecules/backoffice_filter_drawer/backofficeFilterDrawer.css.js +1 -1
- package/lib/esm/backoffice/molecules/backoffice_filter_drawer/backofficeFilterDrawer.css.js.map +1 -1
- package/lib/esm/style.css +1 -1
- package/lib/types/backoffice/molecules/backoffice_filter_drawer/BackofficeFilterDrawer.d.ts.map +1 -1
- package/lib/types/backoffice/molecules/backoffice_filter_drawer/backofficeFilterDrawer.css.d.ts.map +1 -1
- package/package.json +3 -3
|
@@ -73,7 +73,6 @@ var x = ({ isOpen: x, title: S, sections: C, searchValue: w, emptyLabel: T, onSe
|
|
|
73
73
|
onClick: D
|
|
74
74
|
}), /* @__PURE__ */ _("div", {
|
|
75
75
|
className: o,
|
|
76
|
-
onClick: D,
|
|
77
76
|
children: /* @__PURE__ */ v("aside", {
|
|
78
77
|
ref: P,
|
|
79
78
|
className: a,
|
|
@@ -81,9 +80,6 @@ var x = ({ isOpen: x, title: S, sections: C, searchValue: w, emptyLabel: T, onSe
|
|
|
81
80
|
"aria-modal": "true",
|
|
82
81
|
"aria-labelledby": A,
|
|
83
82
|
tabIndex: -1,
|
|
84
|
-
onClick: (e) => {
|
|
85
|
-
e.stopPropagation();
|
|
86
|
-
},
|
|
87
83
|
children: [
|
|
88
84
|
/* @__PURE__ */ v("div", {
|
|
89
85
|
className: s,
|
|
@@ -117,25 +113,25 @@ var x = ({ isOpen: x, title: S, sections: C, searchValue: w, emptyLabel: T, onSe
|
|
|
117
113
|
/* @__PURE__ */ v("div", {
|
|
118
114
|
className: l,
|
|
119
115
|
children: [C.length === 0 && /* @__PURE__ */ _("div", {
|
|
120
|
-
className: "
|
|
116
|
+
className: "ck62y2k txvbqbwxb txvbqb2tz txvbqb28o txvbqb2sj txvbqb1d9 txvbqb1b8r txvbqb1bgt txvbqb9j txvbqb18e2",
|
|
121
117
|
children: T ?? k("backoffice.filterDrawer.empty")
|
|
122
118
|
}), C.length > 0 && C.map((e) => {
|
|
123
119
|
let t = null;
|
|
124
120
|
return e.description != null && (t = /* @__PURE__ */ _("div", {
|
|
125
|
-
className: "
|
|
121
|
+
className: "ck62y2h txvbqb9j txvbqb1bgt",
|
|
126
122
|
children: e.description
|
|
127
123
|
})), /* @__PURE__ */ v("section", {
|
|
128
|
-
className: "
|
|
124
|
+
className: "ck62y2e txvbqbfpn txvbqbh4x txvbqbhdl",
|
|
129
125
|
children: [/* @__PURE__ */ v("div", {
|
|
130
|
-
className: "
|
|
126
|
+
className: "ck62y2f txvbqbfpn txvbqbh4x txvbqbhd8",
|
|
131
127
|
children: [/* @__PURE__ */ _("div", {
|
|
132
|
-
className: "
|
|
128
|
+
className: "ck62y2g txvbqb96 txvbqb6a txvbqbmvu txvbqb1bgv txvbqbhbf",
|
|
133
129
|
children: e.title
|
|
134
130
|
}), t]
|
|
135
131
|
}), /* @__PURE__ */ _("div", {
|
|
136
|
-
className: "
|
|
132
|
+
className: "ck62y2i txvbqbfpn txvbqbh4x txvbqbhdl",
|
|
137
133
|
children: e.items.map((e) => /* @__PURE__ */ _("div", {
|
|
138
|
-
className: "
|
|
134
|
+
className: "ck62y2j txvbqbfpn txvbqbh4x",
|
|
139
135
|
children: e.node
|
|
140
136
|
}, e.id))
|
|
141
137
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BackofficeFilterDrawer.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_filter_drawer/BackofficeFilterDrawer.tsx"],"sourcesContent":["import {\n useEffect,\n useId,\n useRef,\n type ChangeEvent,\n type JSX,\n type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useTranslation } from 'react-i18next';\n\nimport { Button } from '../../../atomic/atoms/button/Button.js';\nimport { Input } from '../../../atomic/atoms/input/Input.js';\nimport { ModalCloseSvg } from '../../../icons/ModalCloseSvg.js';\n\nimport * as styles from './backofficeFilterDrawer.css.js';\n\nexport type BackofficeFilterDrawerItem = {\n id: string;\n node: ReactNode;\n};\n\nexport type BackofficeFilterDrawerSection = {\n id: string;\n title: ReactNode;\n description?: ReactNode;\n items: readonly BackofficeFilterDrawerItem[];\n};\n\nexport type BackofficeFilterDrawerProps = {\n isOpen: boolean;\n title?: string;\n sections: readonly BackofficeFilterDrawerSection[];\n searchValue?: string;\n emptyLabel?: ReactNode;\n onSearchChange?: (value: string) => void;\n onClose: () => void;\n onReset?: () => void;\n};\n\nexport const BackofficeFilterDrawer = ({\n isOpen,\n title,\n sections,\n searchValue,\n emptyLabel,\n onSearchChange,\n onClose,\n onReset,\n}: BackofficeFilterDrawerProps): JSX.Element | null => {\n const { t } = useTranslation('ui');\n const titleId = useId();\n const searchInputId = useId();\n const resolvedTitle = title ?? t('backoffice.filterDrawer.title');\n const closeButtonRef = useRef<HTMLButtonElement | null>(null);\n const drawerRef = useRef<HTMLElement | null>(null);\n const onCloseRef = useRef(onClose);\n const restoreFocusRef = useRef<HTMLElement | null>(null);\n\n useEffect(() => {\n onCloseRef.current = onClose;\n }, [onClose]);\n\n useEffect(() => {\n if (!isOpen) {\n return () => {};\n }\n\n let activeElement: HTMLElement | null = null;\n if (document.activeElement instanceof HTMLElement) {\n activeElement = document.activeElement;\n }\n restoreFocusRef.current = activeElement;\n\n const focusTimeout = window.setTimeout(() => {\n closeButtonRef.current?.focus();\n }, 0);\n\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n onCloseRef.current();\n return;\n }\n\n if (event.key !== 'Tab') {\n return;\n }\n\n const drawerElement = drawerRef.current;\n if (drawerElement == null) {\n return;\n }\n\n const focusableElements = Array.from(\n drawerElement.querySelectorAll<HTMLElement>(\n [\n 'a[href]',\n 'button:not([disabled])',\n 'input:not([disabled])',\n 'select:not([disabled])',\n 'textarea:not([disabled])',\n '[tabindex]:not([tabindex=\"-1\"])',\n ].join(','),\n ),\n ).filter((element) => {\n return element.offsetParent != null;\n });\n\n const firstElement = focusableElements[0];\n const lastElement = focusableElements[focusableElements.length - 1];\n if (firstElement == null || lastElement == null) {\n event.preventDefault();\n drawerElement.focus();\n return;\n }\n\n if (event.shiftKey && document.activeElement === firstElement) {\n event.preventDefault();\n lastElement.focus();\n return;\n }\n\n if (!event.shiftKey && document.activeElement === lastElement) {\n event.preventDefault();\n firstElement.focus();\n }\n };\n\n window.addEventListener('keydown', handleKeyDown);\n return () => {\n window.clearTimeout(focusTimeout);\n window.removeEventListener('keydown', handleKeyDown);\n restoreFocusRef.current?.focus();\n restoreFocusRef.current = null;\n };\n }, [isOpen]);\n\n if (!isOpen) {\n return null;\n }\n\n const totalCount = sections.reduce((total, section) => {\n return total + section.items.length;\n }, 0);\n\n let searchNode: JSX.Element | null = null;\n if (onSearchChange != null) {\n searchNode = (\n <Input\n id={searchInputId}\n name=\"backoffice-filter-drawer-search\"\n value={searchValue ?? ''}\n onChange={(event: ChangeEvent<HTMLInputElement>) => {\n onSearchChange(event.target.value);\n }}\n placeholder={t('backoffice.filterDrawer.searchPlaceholder')}\n aria-label={t('backoffice.filterDrawer.searchAriaLabel')}\n size=\"small\"\n fullWidth\n />\n );\n }\n\n let resetNode: JSX.Element | null = null;\n if (onReset != null) {\n resetNode = (\n <Button type=\"button\" variant=\"secondary\" size=\"small\" onClick={onReset}>\n {t('backoffice.filterDrawer.reset')}\n </Button>\n );\n }\n\n const drawerContent = (\n <>\n <div className={styles.backdrop} onClick={onClose} />\n <div className={styles.drawerContainer} onClick={onClose}>\n <aside\n ref={drawerRef}\n className={styles.drawer}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={titleId}\n tabIndex={-1}\n onClick={(event) => {\n event.stopPropagation();\n }}\n >\n <div className={styles.header}>\n <div className={styles.titleBlock}>\n <div id={titleId} className={styles.title}>\n {resolvedTitle}\n </div>\n <div className={styles.subtitle}>\n {t('backoffice.filterDrawer.subtitle', { count: totalCount })}\n </div>\n </div>\n <button\n ref={closeButtonRef}\n type=\"button\"\n className={styles.closeButton}\n onClick={onClose}\n aria-label={t('backoffice.filterDrawer.closeAriaLabel')}\n >\n <ModalCloseSvg width={18} height={18} aria-hidden=\"true\" />\n </button>\n </div>\n\n <div className={styles.searchRow}>\n {searchNode}\n {resetNode}\n </div>\n\n <div className={styles.sections}>\n {sections.length === 0 && (\n <div className={styles.emptyState}>\n {emptyLabel ?? t('backoffice.filterDrawer.empty')}\n </div>\n )}\n {sections.length > 0 &&\n sections.map((section) => {\n let descriptionNode: JSX.Element | null = null;\n if (section.description != null) {\n descriptionNode = (\n <div className={styles.sectionDescription}>\n {section.description}\n </div>\n );\n }\n\n return (\n <section key={section.id} className={styles.section}>\n <div className={styles.sectionHeader}>\n <div className={styles.sectionTitle}>{section.title}</div>\n {descriptionNode}\n </div>\n <div className={styles.sectionItems}>\n {section.items.map((item) => {\n return (\n <div key={item.id} className={styles.sectionItem}>\n {item.node}\n </div>\n );\n })}\n </div>\n </section>\n );\n })}\n </div>\n </aside>\n </div>\n </>\n );\n\n if (typeof document === 'undefined') {\n return drawerContent;\n }\n\n return createPortal(drawerContent, document.body);\n};\n\nexport default BackofficeFilterDrawer;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"BackofficeFilterDrawer.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_filter_drawer/BackofficeFilterDrawer.tsx"],"sourcesContent":["import {\n useEffect,\n useId,\n useRef,\n type ChangeEvent,\n type JSX,\n type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useTranslation } from 'react-i18next';\n\nimport { Button } from '../../../atomic/atoms/button/Button.js';\nimport { Input } from '../../../atomic/atoms/input/Input.js';\nimport { ModalCloseSvg } from '../../../icons/ModalCloseSvg.js';\n\nimport * as styles from './backofficeFilterDrawer.css.js';\n\nexport type BackofficeFilterDrawerItem = {\n id: string;\n node: ReactNode;\n};\n\nexport type BackofficeFilterDrawerSection = {\n id: string;\n title: ReactNode;\n description?: ReactNode;\n items: readonly BackofficeFilterDrawerItem[];\n};\n\nexport type BackofficeFilterDrawerProps = {\n isOpen: boolean;\n title?: string;\n sections: readonly BackofficeFilterDrawerSection[];\n searchValue?: string;\n emptyLabel?: ReactNode;\n onSearchChange?: (value: string) => void;\n onClose: () => void;\n onReset?: () => void;\n};\n\nexport const BackofficeFilterDrawer = ({\n isOpen,\n title,\n sections,\n searchValue,\n emptyLabel,\n onSearchChange,\n onClose,\n onReset,\n}: BackofficeFilterDrawerProps): JSX.Element | null => {\n const { t } = useTranslation('ui');\n const titleId = useId();\n const searchInputId = useId();\n const resolvedTitle = title ?? t('backoffice.filterDrawer.title');\n const closeButtonRef = useRef<HTMLButtonElement | null>(null);\n const drawerRef = useRef<HTMLElement | null>(null);\n const onCloseRef = useRef(onClose);\n const restoreFocusRef = useRef<HTMLElement | null>(null);\n\n useEffect(() => {\n onCloseRef.current = onClose;\n }, [onClose]);\n\n useEffect(() => {\n if (!isOpen) {\n return () => {};\n }\n\n let activeElement: HTMLElement | null = null;\n if (document.activeElement instanceof HTMLElement) {\n activeElement = document.activeElement;\n }\n restoreFocusRef.current = activeElement;\n\n const focusTimeout = window.setTimeout(() => {\n closeButtonRef.current?.focus();\n }, 0);\n\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n onCloseRef.current();\n return;\n }\n\n if (event.key !== 'Tab') {\n return;\n }\n\n const drawerElement = drawerRef.current;\n if (drawerElement == null) {\n return;\n }\n\n const focusableElements = Array.from(\n drawerElement.querySelectorAll<HTMLElement>(\n [\n 'a[href]',\n 'button:not([disabled])',\n 'input:not([disabled])',\n 'select:not([disabled])',\n 'textarea:not([disabled])',\n '[tabindex]:not([tabindex=\"-1\"])',\n ].join(','),\n ),\n ).filter((element) => {\n return element.offsetParent != null;\n });\n\n const firstElement = focusableElements[0];\n const lastElement = focusableElements[focusableElements.length - 1];\n if (firstElement == null || lastElement == null) {\n event.preventDefault();\n drawerElement.focus();\n return;\n }\n\n if (event.shiftKey && document.activeElement === firstElement) {\n event.preventDefault();\n lastElement.focus();\n return;\n }\n\n if (!event.shiftKey && document.activeElement === lastElement) {\n event.preventDefault();\n firstElement.focus();\n }\n };\n\n window.addEventListener('keydown', handleKeyDown);\n return () => {\n window.clearTimeout(focusTimeout);\n window.removeEventListener('keydown', handleKeyDown);\n restoreFocusRef.current?.focus();\n restoreFocusRef.current = null;\n };\n }, [isOpen]);\n\n if (!isOpen) {\n return null;\n }\n\n const totalCount = sections.reduce((total, section) => {\n return total + section.items.length;\n }, 0);\n\n let searchNode: JSX.Element | null = null;\n if (onSearchChange != null) {\n searchNode = (\n <Input\n id={searchInputId}\n name=\"backoffice-filter-drawer-search\"\n value={searchValue ?? ''}\n onChange={(event: ChangeEvent<HTMLInputElement>) => {\n onSearchChange(event.target.value);\n }}\n placeholder={t('backoffice.filterDrawer.searchPlaceholder')}\n aria-label={t('backoffice.filterDrawer.searchAriaLabel')}\n size=\"small\"\n fullWidth\n />\n );\n }\n\n let resetNode: JSX.Element | null = null;\n if (onReset != null) {\n resetNode = (\n <Button type=\"button\" variant=\"secondary\" size=\"small\" onClick={onReset}>\n {t('backoffice.filterDrawer.reset')}\n </Button>\n );\n }\n\n const drawerContent = (\n <>\n <div className={styles.backdrop} onClick={onClose} />\n <div className={styles.drawerContainer}>\n <aside\n ref={drawerRef}\n className={styles.drawer}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={titleId}\n tabIndex={-1}\n >\n <div className={styles.header}>\n <div className={styles.titleBlock}>\n <div id={titleId} className={styles.title}>\n {resolvedTitle}\n </div>\n <div className={styles.subtitle}>\n {t('backoffice.filterDrawer.subtitle', { count: totalCount })}\n </div>\n </div>\n <button\n ref={closeButtonRef}\n type=\"button\"\n className={styles.closeButton}\n onClick={onClose}\n aria-label={t('backoffice.filterDrawer.closeAriaLabel')}\n >\n <ModalCloseSvg width={18} height={18} aria-hidden=\"true\" />\n </button>\n </div>\n\n <div className={styles.searchRow}>\n {searchNode}\n {resetNode}\n </div>\n\n <div className={styles.sections}>\n {sections.length === 0 && (\n <div className={styles.emptyState}>\n {emptyLabel ?? t('backoffice.filterDrawer.empty')}\n </div>\n )}\n {sections.length > 0 &&\n sections.map((section) => {\n let descriptionNode: JSX.Element | null = null;\n if (section.description != null) {\n descriptionNode = (\n <div className={styles.sectionDescription}>\n {section.description}\n </div>\n );\n }\n\n return (\n <section key={section.id} className={styles.section}>\n <div className={styles.sectionHeader}>\n <div className={styles.sectionTitle}>{section.title}</div>\n {descriptionNode}\n </div>\n <div className={styles.sectionItems}>\n {section.items.map((item) => {\n return (\n <div key={item.id} className={styles.sectionItem}>\n {item.node}\n </div>\n );\n })}\n </div>\n </section>\n );\n })}\n </div>\n </aside>\n </div>\n </>\n );\n\n if (typeof document === 'undefined') {\n return drawerContent;\n }\n\n return createPortal(drawerContent, document.body);\n};\n\nexport default BackofficeFilterDrawer;\n"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/* empty css */
|
|
2
2
|
/* empty css */
|
|
3
3
|
//#region src/backoffice/molecules/backoffice_filter_drawer/backofficeFilterDrawer.css.ts
|
|
4
|
-
var e = "ck62y20", t = "ck62y21 txvbqb13ix txvbqbkrn txvbqbfpn txvbqblsh txvbqb1awc", n = "
|
|
4
|
+
var e = "ck62y20", t = "ck62y22 ck62y21 txvbqb13ix txvbqbkrn txvbqbfpn txvbqblsh txvbqb1awc", n = "ck62y24 ck62y23 txvbqb1b8p txvbqb7tt txvbqbbj2 txvbqb2sj txvbqbeh8 txvbqbfpn txvbqbh4x txvbqbheb txvbqbjzu txvbqbu0y txvbqbwtc txvbqbwxo txvbqb19us", r = "ck62y25 txvbqbfpn txvbqbey txvbqblt7 txvbqbhdy", i = "ck62y26 txvbqbfpn txvbqbh4x txvbqbhd8", a = "ck62y27 txvbqbam txvbqbhbf txvbqb1bgr", o = "ck62y28 txvbqb9j txvbqb1bgt", s = "ck62y2b qbwcuej qbwcueh txvbqbfqq txvbqbey txvbqbls4 txvbqb1tv txvbqb2rt txvbqb2tz txvbqb1b5h txvbqb1bgt txvbqbv txvbqbwvv txvbqb7h txvbqb76 txvbqb7t qbwcuei txvbqb1cu0 txvbqb1epc qbwcue4 txvbqb1f8e txvbqb1feu qbwcue0 txvbqb1fgi txvbqb1gaq ck62y29 txvbqb1b8t txvbqb2wi txvbqbjmh txvbqb19hf ck62y2a txvbqb1cts", c = "ck62y2c txvbqbfpn txvbqbey txvbqbh7g txvbqbhdl", l = "ck62y2d txvbqbfpn txvbqbh4x txvbqbheb", u = "ck62y2e txvbqbfpn txvbqbh4x txvbqbhdl", d = "ck62y2f txvbqbfpn txvbqbh4x txvbqbhd8", f = "ck62y2g txvbqb96 txvbqb6a txvbqbmvu txvbqb1bgv txvbqbhbf", p = "ck62y2h txvbqb9j txvbqb1bgt", m = "ck62y2i txvbqbfpn txvbqbh4x txvbqbhdl", h = "ck62y2j txvbqbfpn txvbqbh4x", g = "ck62y2k txvbqbwxb txvbqb2tz txvbqb28o txvbqb2sj txvbqb1d9 txvbqb1b8r txvbqb1bgt txvbqb9j txvbqb18e2";
|
|
5
5
|
//#endregion
|
|
6
6
|
export { e as backdrop, s as closeButton, n as drawer, t as drawerContainer, g as emptyState, r as header, c as searchRow, u as section, p as sectionDescription, d as sectionHeader, h as sectionItem, m as sectionItems, f as sectionTitle, l as sections, o as subtitle, a as title, i as titleBlock };
|
|
7
7
|
|
package/lib/esm/backoffice/molecules/backoffice_filter_drawer/backofficeFilterDrawer.css.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"backofficeFilterDrawer.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_filter_drawer/backofficeFilterDrawer.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles, stateSprinkles } from '../../../theme/sprinkles.css.js';\nimport { ghostIconButton } from '../../../theme/styleRecipes.css.js';\nimport { vars } from '../../../theme/themeContract.css.js';\n\nexport const backdrop = style({\n position: 'fixed',\n inset: 0,\n backgroundColor: vars.colors.overlayBackdrop,\n zIndex: vars.zIndex.modal,\n});\n\nexport const drawerContainer = sprinkles({\n
|
|
1
|
+
{"version":3,"file":"backofficeFilterDrawer.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/backoffice_filter_drawer/backofficeFilterDrawer.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles, stateSprinkles } from '../../../theme/sprinkles.css.js';\nimport { ghostIconButton } from '../../../theme/styleRecipes.css.js';\nimport { vars } from '../../../theme/themeContract.css.js';\n\nexport const backdrop = style({\n position: 'fixed',\n inset: 0,\n backgroundColor: vars.colors.overlayBackdrop,\n zIndex: vars.zIndex.modal,\n});\n\nexport const drawerContainer = style([\n sprinkles({\n position: 'fixed',\n inset: 0,\n display: 'flex',\n justifyContent: 'flex-end',\n zIndex: 'modal',\n }),\n {\n pointerEvents: 'none',\n },\n]);\n\nexport const drawer = style([\n sprinkles({\n backgroundColor: 'surface',\n borderLeftColor: 'borderSubtle',\n borderLeftWidth: 'default',\n borderStyle: 'solid',\n boxShadow: 'xl',\n display: 'flex',\n flexDirection: 'column',\n gap: 4,\n height: 'full',\n maxWidth: '26rem',\n overflowY: 'auto',\n padding: 5,\n width: 'full',\n }),\n {\n pointerEvents: 'auto',\n },\n]);\n\nexport const header = sprinkles({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n gap: 3,\n});\n\nexport const titleBlock = sprinkles({\n display: 'flex',\n flexDirection: 'column',\n gap: 1,\n});\n\nexport const title = sprinkles({\n fontSize: 'xl',\n fontWeight: 'semibold',\n color: 'text',\n});\n\nexport const subtitle = sprinkles({\n fontSize: 'sm',\n color: 'textSecondary',\n});\n\nexport const closeButton = style([\n ghostIconButton,\n sprinkles({\n backgroundColor: 'surfaceMuted',\n borderRadius: 'full',\n height: 8,\n width: 8,\n }),\n stateSprinkles({\n backgroundColor: { hoverNotDisabled: 'surfaceSecondary' },\n }),\n]);\n\nexport const searchRow = sprinkles({\n display: 'flex',\n alignItems: 'center',\n flexWrap: 'wrap',\n gap: 2,\n});\n\nexport const sections = sprinkles({\n display: 'flex',\n flexDirection: 'column',\n gap: 4,\n});\n\nexport const section = sprinkles({\n display: 'flex',\n flexDirection: 'column',\n gap: 2,\n});\n\nexport const sectionHeader = sprinkles({\n display: 'flex',\n flexDirection: 'column',\n gap: 1,\n});\n\nexport const sectionTitle = sprinkles({\n fontSize: 'xs',\n textTransform: 'uppercase',\n letterSpacing: 'caps',\n color: 'textMuted',\n fontWeight: 'semibold',\n});\n\nexport const sectionDescription = sprinkles({\n fontSize: 'sm',\n color: 'textSecondary',\n});\n\nexport const sectionItems = sprinkles({\n display: 'flex',\n flexDirection: 'column',\n gap: 2,\n});\n\nexport const sectionItem = sprinkles({\n display: 'flex',\n flexDirection: 'column',\n});\n\nexport const emptyState = sprinkles({\n padding: 4,\n borderRadius: 'md',\n borderWidth: 'default',\n borderStyle: 'solid',\n borderColor: 'borderSubtle',\n backgroundColor: 'surfaceSecondary',\n color: 'textSecondary',\n fontSize: 'sm',\n textAlign: 'center',\n});\n"],"mappings":""}
|