@zidsa/zidmui 2.1.8 → 2.3.0-beta.0
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/illustrations/404.svg +39 -0
- package/dist/illustrations/abandoned-cart.svg +23 -0
- package/dist/illustrations/add-ons.svg +15 -0
- package/dist/illustrations/announcement.svg +31 -0
- package/dist/illustrations/barcode-with-code.svg +49 -0
- package/dist/illustrations/barcode-with-sku.svg +26 -0
- package/dist/illustrations/barcode.svg +43 -0
- package/dist/illustrations/cards-stack-notification.svg +43 -0
- package/dist/illustrations/chat-bubble-plus.svg +30 -0
- package/dist/illustrations/coins-stack-shopping-cart.svg +22 -0
- package/dist/illustrations/coins-stack.svg +20 -0
- package/dist/illustrations/congrats.svg +108 -0
- package/dist/illustrations/congratulations-rocket.svg +36 -0
- package/dist/illustrations/country-bahrain.svg +78 -0
- package/dist/illustrations/country-egypt.svg +78 -0
- package/dist/illustrations/country-iraq.svg +78 -0
- package/dist/illustrations/country-kuwait.svg +78 -0
- package/dist/illustrations/country-oman.svg +78 -0
- package/dist/illustrations/country-qatar.svg +78 -0
- package/dist/illustrations/country-saudi-arabia.svg +78 -0
- package/dist/illustrations/country-saudi-regions.svg +17 -0
- package/dist/illustrations/country-uae.svg +78 -0
- package/dist/illustrations/custom-themes.svg +95 -0
- package/dist/illustrations/customers-empty-state.svg +38 -0
- package/dist/illustrations/customers-groups-add.svg +13 -0
- package/dist/illustrations/customers-groups.svg +23 -0
- package/dist/illustrations/draft-empty.svg +48 -0
- package/dist/illustrations/empty-draft-orders.svg +55 -0
- package/dist/illustrations/empty-order.svg +58 -0
- package/dist/illustrations/empty-state-discount-coupon.svg +27 -0
- package/dist/illustrations/empty-state-page-tag.svg +15 -0
- package/dist/illustrations/empty-state-page-url.svg +10 -0
- package/dist/illustrations/empty-state-page.svg +20 -0
- package/dist/illustrations/empty-state-payout.svg +35 -0
- package/dist/illustrations/empty-state-review.svg +29 -0
- package/dist/illustrations/empty-state-trash-bin.svg +60 -0
- package/dist/illustrations/faq-no-results.svg +43 -0
- package/dist/illustrations/fire-badge.svg +14 -0
- package/dist/illustrations/inactive-shop.svg +98 -0
- package/dist/illustrations/inventory-empty-state.svg +38 -0
- package/dist/illustrations/item-list.svg +40 -0
- package/dist/illustrations/items-add.svg +38 -0
- package/dist/illustrations/opened-box-empty.svg +33 -0
- package/dist/illustrations/opened-box-zid-location.svg +64 -0
- package/dist/illustrations/page-error.svg +34 -0
- package/dist/illustrations/payment-card-add-2.svg +14 -0
- package/dist/illustrations/payment-card-add.svg +14 -0
- package/dist/illustrations/payment-card.svg +12 -0
- package/dist/illustrations/payments-links-empty-state.svg +43 -0
- package/dist/illustrations/plan-activation.svg +29 -0
- package/dist/illustrations/plan-changed.svg +32 -0
- package/dist/illustrations/plan-downgrade.svg +28 -0
- package/dist/illustrations/product-card-options.svg +55 -0
- package/dist/illustrations/product-stacked-cards.svg +46 -0
- package/dist/illustrations/raising-start.svg +14 -0
- package/dist/illustrations/raising-starter.svg +14 -0
- package/dist/illustrations/sad-icon.svg +100 -0
- package/dist/illustrations/stacked-messages-sms.svg +41 -0
- package/dist/illustrations/stacked-messages-whatsapp.svg +42 -0
- package/dist/illustrations/step-diamond-01.svg +39 -0
- package/dist/illustrations/step-heptagon-02.svg +44 -0
- package/dist/illustrations/step-heptagon-04.svg +49 -0
- package/dist/illustrations/step-heptagon-06.svg +44 -0
- package/dist/illustrations/step-heptagon-red-04.svg +44 -0
- package/dist/illustrations/step-hexagon-02.svg +44 -0
- package/dist/illustrations/step-pentagon-03.svg +39 -0
- package/dist/illustrations/step-pentagon-05.svg +39 -0
- package/dist/illustrations/step-shield-like-03.svg +44 -0
- package/dist/illustrations/vehicle.svg +80 -0
- package/dist/illustrations/whatsapp-tier1.svg +80 -0
- package/dist/illustrations/whatsapp-tier2.svg +80 -0
- package/dist/illustrations/whatsapp-tier3.svg +89 -0
- package/dist/illustrations/whatsapp-tier4.svg +80 -0
- package/dist/illustrations/whatsapp-tier5.svg +174 -0
- package/dist/illustrations/wishlist-empty.svg +48 -0
- package/dist/illustrations/zid-logo-glass-reversed.svg +26 -0
- package/dist/illustrations/zid-logo-glass.svg +26 -0
- package/dist/illustrations/zid-logo-star.svg +4 -0
- package/dist/logos/delivery/aramex.svg +14 -0
- package/dist/logos/delivery/barq.svg +14 -0
- package/dist/logos/delivery/careem.svg +14 -0
- package/dist/logos/delivery/dhl.svg +14 -0
- package/dist/logos/delivery/fedex.svg +20 -0
- package/dist/logos/delivery/imile.svg +14 -0
- package/dist/logos/delivery/parcelat.svg +14 -0
- package/dist/logos/delivery/redbox.svg +14 -0
- package/dist/logos/delivery/smsa.svg +14 -0
- package/dist/logos/delivery/spl.svg +19 -0
- package/dist/logos/delivery/zid.svg +14 -0
- package/dist/logos/payments/amex.svg +12 -0
- package/dist/logos/payments/apple-pay.svg +7 -0
- package/dist/logos/payments/google-pay.svg +7 -0
- package/dist/logos/payments/knet.svg +5 -0
- package/dist/logos/payments/mada.svg +5 -0
- package/dist/logos/payments/mastercard.svg +5 -0
- package/dist/logos/payments/mispay.svg +10 -0
- package/dist/logos/payments/samsung-pay-icon.svg +13 -0
- package/dist/logos/payments/samsung-pay-text.svg +19 -0
- package/dist/logos/payments/stc-pay.svg +6 -0
- package/dist/logos/payments/tabby.svg +12 -0
- package/dist/logos/payments/tamara-secondary.svg +10 -0
- package/dist/logos/payments/tamara.svg +63 -0
- package/dist/logos/payments/visa.svg +3 -0
- package/dist/react/cjs/components/app-dialog.js +3 -2
- package/dist/react/cjs/components/app-dialog.js.map +1 -1
- package/dist/react/cjs/components/app-list-item.js +3 -0
- package/dist/react/cjs/components/app-list-item.js.map +1 -1
- package/dist/react/cjs/theme/components/alert.js +16 -16
- package/dist/react/cjs/theme/components/alert.js.map +1 -1
- package/dist/react/cjs/theme/components/app-bar.js +3 -5
- package/dist/react/cjs/theme/components/app-bar.js.map +1 -1
- package/dist/react/cjs/theme/components/card.js +3 -3
- package/dist/react/cjs/theme/components/card.js.map +1 -1
- package/dist/react/cjs/theme/components/paper.js +3 -3
- package/dist/react/cjs/theme/components/paper.js.map +1 -1
- package/dist/react/cjs/theme/components/table.js +2 -2
- package/dist/react/cjs/theme/components/table.js.map +1 -1
- package/dist/react/cjs/theme/palette.dark.js +343 -0
- package/dist/react/cjs/theme/palette.dark.js.map +1 -0
- package/dist/react/cjs/theme/palette.js +11 -5
- package/dist/react/cjs/theme/palette.js.map +1 -1
- package/dist/react/cjs/theme/shadows.dark.js +32 -0
- package/dist/react/cjs/theme/shadows.dark.js.map +1 -0
- package/dist/react/cjs/theme/theme.dark.js +19 -0
- package/dist/react/cjs/theme/theme.dark.js.map +1 -0
- package/dist/react/es/components/app-dialog.js +3 -2
- package/dist/react/es/components/app-dialog.js.map +1 -1
- package/dist/react/es/components/app-list-item.js +3 -0
- package/dist/react/es/components/app-list-item.js.map +1 -1
- package/dist/react/es/theme/components/alert.js +16 -16
- package/dist/react/es/theme/components/alert.js.map +1 -1
- package/dist/react/es/theme/components/app-bar.js +3 -5
- package/dist/react/es/theme/components/app-bar.js.map +1 -1
- package/dist/react/es/theme/components/card.js +3 -3
- package/dist/react/es/theme/components/card.js.map +1 -1
- package/dist/react/es/theme/components/paper.js +3 -3
- package/dist/react/es/theme/components/paper.js.map +1 -1
- package/dist/react/es/theme/components/table.js +2 -2
- package/dist/react/es/theme/components/table.js.map +1 -1
- package/dist/react/es/theme/palette.dark.js +343 -0
- package/dist/react/es/theme/palette.dark.js.map +1 -0
- package/dist/react/es/theme/palette.js +11 -5
- package/dist/react/es/theme/palette.js.map +1 -1
- package/dist/react/es/theme/shadows.dark.js +32 -0
- package/dist/react/es/theme/shadows.dark.js.map +1 -0
- package/dist/react/es/theme/theme.dark.js +19 -0
- package/dist/react/es/theme/theme.dark.js.map +1 -0
- package/dist/react/types/stories/design/DeliveryLogos.stories.d.ts +12 -0
- package/dist/react/types/stories/design/Illustrations.stories.d.ts +12 -0
- package/dist/react/types/stories/design/PaymentLogos.stories.d.ts +12 -0
- package/dist/react/types/theme/palette.dark.d.ts +2 -0
- package/dist/react/types/theme/shadows.dark.d.ts +2 -0
- package/dist/react/types/theme/theme.dark.d.ts +1 -0
- package/dist/react/types/theme/types.d.ts +8 -2
- package/dist/styles/colors.css +33 -0
- package/dist/styles/root.css +10 -0
- package/dist/styles/states.css +47 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +5 -2
- package/dist/react/cjs/stories/css/Alert.stories.js +0 -69
- package/dist/react/cjs/stories/css/Alert.stories.js.map +0 -1
- package/dist/react/cjs/stories/css/Button.stories.js +0 -133
- package/dist/react/cjs/stories/css/Button.stories.js.map +0 -1
- package/dist/react/cjs/stories/css/Card.stories.js +0 -145
- package/dist/react/cjs/stories/css/Card.stories.js.map +0 -1
- package/dist/react/cjs/stories/css/Checkbox.stories.js +0 -138
- package/dist/react/cjs/stories/css/Checkbox.stories.js.map +0 -1
- package/dist/react/cjs/stories/css/ComponentReference.stories.js +0 -139
- package/dist/react/cjs/stories/css/ComponentReference.stories.js.map +0 -1
- package/dist/react/cjs/stories/css/Input.stories.js +0 -162
- package/dist/react/cjs/stories/css/Input.stories.js.map +0 -1
- package/dist/react/cjs/stories/css/ListItem.stories.js +0 -166
- package/dist/react/cjs/stories/css/ListItem.stories.js.map +0 -1
- package/dist/react/cjs/stories/css/Modal.stories.js +0 -121
- package/dist/react/cjs/stories/css/Modal.stories.js.map +0 -1
- package/dist/react/cjs/stories/css/Radio.stories.js +0 -118
- package/dist/react/cjs/stories/css/Radio.stories.js.map +0 -1
- package/dist/react/cjs/stories/css/Select.stories.js +0 -187
- package/dist/react/cjs/stories/css/Select.stories.js.map +0 -1
- package/dist/react/cjs/stories/css/Status.stories.js +0 -59
- package/dist/react/cjs/stories/css/Status.stories.js.map +0 -1
- package/dist/react/cjs/stories/css/Switch.stories.js +0 -136
- package/dist/react/cjs/stories/css/Switch.stories.js.map +0 -1
- package/dist/react/cjs/stories/css/Table.stories.js +0 -171
- package/dist/react/cjs/stories/css/Table.stories.js.map +0 -1
- package/dist/react/cjs/stories/css/Tooltip.stories.js +0 -99
- package/dist/react/cjs/stories/css/Tooltip.stories.js.map +0 -1
- package/dist/react/cjs/stories/css/Utilities.stories.js +0 -136
- package/dist/react/cjs/stories/css/Utilities.stories.js.map +0 -1
- package/dist/react/cjs/stories/design/Colors.stories.js +0 -142
- package/dist/react/cjs/stories/design/Colors.stories.js.map +0 -1
- package/dist/react/cjs/stories/design/Typography.stories.js +0 -116
- package/dist/react/cjs/stories/design/Typography.stories.js.map +0 -1
- package/dist/react/cjs/stories/design/spacing/CSS.stories.js +0 -61
- package/dist/react/cjs/stories/design/spacing/CSS.stories.js.map +0 -1
- package/dist/react/cjs/stories/design/spacing/React.stories.js +0 -102
- package/dist/react/cjs/stories/design/spacing/React.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppAlert.stories.js +0 -149
- package/dist/react/cjs/stories/react/AppAlert.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppButton.stories.js +0 -93
- package/dist/react/cjs/stories/react/AppButton.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppCheckbox.stories.js +0 -67
- package/dist/react/cjs/stories/react/AppCheckbox.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppDialog.stories.js +0 -129
- package/dist/react/cjs/stories/react/AppDialog.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppDialogWithFeatures.stories.js +0 -127
- package/dist/react/cjs/stories/react/AppDialogWithFeatures.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppEmptyState.stories.js +0 -157
- package/dist/react/cjs/stories/react/AppEmptyState.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppIconButton.stories.js +0 -53
- package/dist/react/cjs/stories/react/AppIconButton.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppIconWithTooltip.stories.js +0 -36
- package/dist/react/cjs/stories/react/AppIconWithTooltip.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppInputBase.stories.js +0 -158
- package/dist/react/cjs/stories/react/AppInputBase.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppInputBaseSearch.stories.js +0 -87
- package/dist/react/cjs/stories/react/AppInputBaseSearch.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppInputRadio.stories.js +0 -262
- package/dist/react/cjs/stories/react/AppInputRadio.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppInputRadioCard.stories.js +0 -126
- package/dist/react/cjs/stories/react/AppInputRadioCard.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppListItem.stories.js +0 -123
- package/dist/react/cjs/stories/react/AppListItem.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppOverflownTextWithTooltip.stories.js +0 -41
- package/dist/react/cjs/stories/react/AppOverflownTextWithTooltip.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppPagination.stories.js +0 -71
- package/dist/react/cjs/stories/react/AppPagination.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppRadioGroup.stories.js +0 -145
- package/dist/react/cjs/stories/react/AppRadioGroup.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppStatus.stories.js +0 -68
- package/dist/react/cjs/stories/react/AppStatus.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppSwitch.stories.js +0 -138
- package/dist/react/cjs/stories/react/AppSwitch.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppTabs.stories.js +0 -100
- package/dist/react/cjs/stories/react/AppTabs.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppTooltip.stories.js +0 -119
- package/dist/react/cjs/stories/react/AppTooltip.stories.js.map +0 -1
- package/dist/react/cjs/stories/react/AppTypography.stories.js +0 -172
- package/dist/react/cjs/stories/react/AppTypography.stories.js.map +0 -1
- package/dist/react/es/stories/css/Alert.stories.js +0 -69
- package/dist/react/es/stories/css/Alert.stories.js.map +0 -1
- package/dist/react/es/stories/css/Button.stories.js +0 -133
- package/dist/react/es/stories/css/Button.stories.js.map +0 -1
- package/dist/react/es/stories/css/Card.stories.js +0 -145
- package/dist/react/es/stories/css/Card.stories.js.map +0 -1
- package/dist/react/es/stories/css/Checkbox.stories.js +0 -138
- package/dist/react/es/stories/css/Checkbox.stories.js.map +0 -1
- package/dist/react/es/stories/css/ComponentReference.stories.js +0 -139
- package/dist/react/es/stories/css/ComponentReference.stories.js.map +0 -1
- package/dist/react/es/stories/css/Input.stories.js +0 -162
- package/dist/react/es/stories/css/Input.stories.js.map +0 -1
- package/dist/react/es/stories/css/ListItem.stories.js +0 -166
- package/dist/react/es/stories/css/ListItem.stories.js.map +0 -1
- package/dist/react/es/stories/css/Modal.stories.js +0 -121
- package/dist/react/es/stories/css/Modal.stories.js.map +0 -1
- package/dist/react/es/stories/css/Radio.stories.js +0 -118
- package/dist/react/es/stories/css/Radio.stories.js.map +0 -1
- package/dist/react/es/stories/css/Select.stories.js +0 -187
- package/dist/react/es/stories/css/Select.stories.js.map +0 -1
- package/dist/react/es/stories/css/Status.stories.js +0 -59
- package/dist/react/es/stories/css/Status.stories.js.map +0 -1
- package/dist/react/es/stories/css/Switch.stories.js +0 -136
- package/dist/react/es/stories/css/Switch.stories.js.map +0 -1
- package/dist/react/es/stories/css/Table.stories.js +0 -171
- package/dist/react/es/stories/css/Table.stories.js.map +0 -1
- package/dist/react/es/stories/css/Tooltip.stories.js +0 -99
- package/dist/react/es/stories/css/Tooltip.stories.js.map +0 -1
- package/dist/react/es/stories/css/Utilities.stories.js +0 -136
- package/dist/react/es/stories/css/Utilities.stories.js.map +0 -1
- package/dist/react/es/stories/design/Colors.stories.js +0 -142
- package/dist/react/es/stories/design/Colors.stories.js.map +0 -1
- package/dist/react/es/stories/design/Typography.stories.js +0 -116
- package/dist/react/es/stories/design/Typography.stories.js.map +0 -1
- package/dist/react/es/stories/design/spacing/CSS.stories.js +0 -61
- package/dist/react/es/stories/design/spacing/CSS.stories.js.map +0 -1
- package/dist/react/es/stories/design/spacing/React.stories.js +0 -102
- package/dist/react/es/stories/design/spacing/React.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppAlert.stories.js +0 -149
- package/dist/react/es/stories/react/AppAlert.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppButton.stories.js +0 -93
- package/dist/react/es/stories/react/AppButton.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppCheckbox.stories.js +0 -67
- package/dist/react/es/stories/react/AppCheckbox.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppDialog.stories.js +0 -129
- package/dist/react/es/stories/react/AppDialog.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppDialogWithFeatures.stories.js +0 -127
- package/dist/react/es/stories/react/AppDialogWithFeatures.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppEmptyState.stories.js +0 -157
- package/dist/react/es/stories/react/AppEmptyState.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppIconButton.stories.js +0 -53
- package/dist/react/es/stories/react/AppIconButton.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppIconWithTooltip.stories.js +0 -36
- package/dist/react/es/stories/react/AppIconWithTooltip.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppInputBase.stories.js +0 -158
- package/dist/react/es/stories/react/AppInputBase.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppInputBaseSearch.stories.js +0 -87
- package/dist/react/es/stories/react/AppInputBaseSearch.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppInputRadio.stories.js +0 -262
- package/dist/react/es/stories/react/AppInputRadio.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppInputRadioCard.stories.js +0 -126
- package/dist/react/es/stories/react/AppInputRadioCard.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppListItem.stories.js +0 -123
- package/dist/react/es/stories/react/AppListItem.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppOverflownTextWithTooltip.stories.js +0 -41
- package/dist/react/es/stories/react/AppOverflownTextWithTooltip.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppPagination.stories.js +0 -71
- package/dist/react/es/stories/react/AppPagination.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppRadioGroup.stories.js +0 -145
- package/dist/react/es/stories/react/AppRadioGroup.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppStatus.stories.js +0 -68
- package/dist/react/es/stories/react/AppStatus.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppSwitch.stories.js +0 -138
- package/dist/react/es/stories/react/AppSwitch.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppTabs.stories.js +0 -100
- package/dist/react/es/stories/react/AppTabs.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppTooltip.stories.js +0 -119
- package/dist/react/es/stories/react/AppTooltip.stories.js.map +0 -1
- package/dist/react/es/stories/react/AppTypography.stories.js +0 -172
- package/dist/react/es/stories/react/AppTypography.stories.js.map +0 -1
- package/dist/react/zidmui.css +0 -3062
|
@@ -1,166 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
-
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
-
;/* empty css */
|
|
5
|
-
const icons = {
|
|
6
|
-
inbox: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z" }) }),
|
|
7
|
-
bookmark: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z" }) }),
|
|
8
|
-
settings: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z" }) }),
|
|
9
|
-
user: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z" }) }),
|
|
10
|
-
folder: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" }) })
|
|
11
|
-
};
|
|
12
|
-
const meta = {
|
|
13
|
-
title: "CSS Styles/Components/ListItem",
|
|
14
|
-
parameters: {
|
|
15
|
-
layout: "centered"
|
|
16
|
-
},
|
|
17
|
-
tags: ["autodocs"]
|
|
18
|
-
};
|
|
19
|
-
const BasicList = {
|
|
20
|
-
render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px", width: "400px" }, children: [
|
|
21
|
-
/* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Basic List" }),
|
|
22
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list", children: [
|
|
23
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item", children: [
|
|
24
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__icon", children: icons.inbox }),
|
|
25
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__text", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__primary", children: "Inbox" }) })
|
|
26
|
-
] }),
|
|
27
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item", children: [
|
|
28
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__icon", children: icons.bookmark }),
|
|
29
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__text", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__primary", children: "Saved" }) })
|
|
30
|
-
] }),
|
|
31
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item", children: [
|
|
32
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__icon", children: icons.settings }),
|
|
33
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__text", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__primary", children: "Settings" }) })
|
|
34
|
-
] })
|
|
35
|
-
] })
|
|
36
|
-
] })
|
|
37
|
-
};
|
|
38
|
-
const WithSecondaryText = {
|
|
39
|
-
render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px", width: "400px" }, children: [
|
|
40
|
-
/* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "With Secondary Text" }),
|
|
41
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list", children: [
|
|
42
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item", children: [
|
|
43
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__icon", children: icons.user }),
|
|
44
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item__text", children: [
|
|
45
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__primary", children: "John Doe" }),
|
|
46
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__secondary", children: "john.doe@example.com" })
|
|
47
|
-
] })
|
|
48
|
-
] }),
|
|
49
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item", children: [
|
|
50
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__icon", children: icons.user }),
|
|
51
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item__text", children: [
|
|
52
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__primary", children: "Jane Smith" }),
|
|
53
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__secondary", children: "jane.smith@example.com" })
|
|
54
|
-
] })
|
|
55
|
-
] }),
|
|
56
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item", children: [
|
|
57
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__icon", children: icons.user }),
|
|
58
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item__text", children: [
|
|
59
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__primary", children: "Bob Johnson" }),
|
|
60
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__secondary", children: "bob.johnson@example.com" })
|
|
61
|
-
] })
|
|
62
|
-
] })
|
|
63
|
-
] })
|
|
64
|
-
] })
|
|
65
|
-
};
|
|
66
|
-
const ClickableList = {
|
|
67
|
-
render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px", width: "400px" }, children: [
|
|
68
|
-
/* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Clickable List" }),
|
|
69
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list", children: [
|
|
70
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item zid-list-item--clickable", children: [
|
|
71
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__icon", children: icons.folder }),
|
|
72
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item__text", children: [
|
|
73
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__primary", children: "Documents" }),
|
|
74
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__secondary", children: "12 files" })
|
|
75
|
-
] })
|
|
76
|
-
] }),
|
|
77
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item zid-list-item--clickable zid-list-item--selected", children: [
|
|
78
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__icon", children: icons.folder }),
|
|
79
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item__text", children: [
|
|
80
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__primary", children: "Images" }),
|
|
81
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__secondary", children: "48 files (selected)" })
|
|
82
|
-
] })
|
|
83
|
-
] }),
|
|
84
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item zid-list-item--clickable", children: [
|
|
85
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__icon", children: icons.folder }),
|
|
86
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item__text", children: [
|
|
87
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__primary", children: "Videos" }),
|
|
88
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__secondary", children: "5 files" })
|
|
89
|
-
] })
|
|
90
|
-
] }),
|
|
91
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item zid-list-item--clickable zid-list-item--disabled", children: [
|
|
92
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__icon", children: icons.folder }),
|
|
93
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item__text", children: [
|
|
94
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__primary", children: "Archived" }),
|
|
95
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__secondary", children: "Disabled" })
|
|
96
|
-
] })
|
|
97
|
-
] })
|
|
98
|
-
] })
|
|
99
|
-
] })
|
|
100
|
-
};
|
|
101
|
-
const WithStatus = {
|
|
102
|
-
render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px", width: "400px" }, children: [
|
|
103
|
-
/* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "With Status Badges" }),
|
|
104
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list", children: [
|
|
105
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item zid-list-item--clickable", children: [
|
|
106
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__icon", children: icons.user }),
|
|
107
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item__text", children: [
|
|
108
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__primary", children: "Order #1234" }),
|
|
109
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__secondary", children: "John Doe - $99.99" })
|
|
110
|
-
] }),
|
|
111
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-status zid-status--success zid-status--sm", style: { marginLeft: "auto" }, children: "Completed" })
|
|
112
|
-
] }),
|
|
113
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item zid-list-item--clickable", children: [
|
|
114
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__icon", children: icons.user }),
|
|
115
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item__text", children: [
|
|
116
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__primary", children: "Order #1235" }),
|
|
117
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__secondary", children: "Jane Smith - $149.99" })
|
|
118
|
-
] }),
|
|
119
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-status zid-status--warning zid-status--sm", style: { marginLeft: "auto" }, children: "Pending" })
|
|
120
|
-
] }),
|
|
121
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item zid-list-item--clickable", children: [
|
|
122
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__icon", children: icons.user }),
|
|
123
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item__text", children: [
|
|
124
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__primary", children: "Order #1236" }),
|
|
125
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__secondary", children: "Bob Johnson - $49.99" })
|
|
126
|
-
] }),
|
|
127
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-status zid-status--error zid-status--sm", style: { marginLeft: "auto" }, children: "Cancelled" })
|
|
128
|
-
] })
|
|
129
|
-
] })
|
|
130
|
-
] })
|
|
131
|
-
};
|
|
132
|
-
const NavigationMenu = {
|
|
133
|
-
render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px", width: "280px" }, children: [
|
|
134
|
-
/* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)" }, children: "Navigation Menu" }),
|
|
135
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list", style: { background: "var(--zid-bg-paper)", borderRadius: "8px", padding: "8px" }, children: [
|
|
136
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item zid-list-item--clickable zid-list-item--selected", children: [
|
|
137
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__icon", children: icons.inbox }),
|
|
138
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__text", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__primary", children: "Dashboard" }) })
|
|
139
|
-
] }),
|
|
140
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item zid-list-item--clickable", children: [
|
|
141
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__icon", children: icons.folder }),
|
|
142
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__text", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__primary", children: "Products" }) })
|
|
143
|
-
] }),
|
|
144
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item zid-list-item--clickable", children: [
|
|
145
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__icon", children: icons.user }),
|
|
146
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__text", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__primary", children: "Customers" }) })
|
|
147
|
-
] }),
|
|
148
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item zid-list-item--clickable", children: [
|
|
149
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__icon", children: icons.bookmark }),
|
|
150
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__text", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__primary", children: "Orders" }) })
|
|
151
|
-
] }),
|
|
152
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: "1px", background: "var(--zid-divider)", margin: "8px 0" } }),
|
|
153
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-list-item zid-list-item--clickable", children: [
|
|
154
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__icon", children: icons.settings }),
|
|
155
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-list-item__text", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-list-item__primary", children: "Settings" }) })
|
|
156
|
-
] })
|
|
157
|
-
] })
|
|
158
|
-
] })
|
|
159
|
-
};
|
|
160
|
-
exports.BasicList = BasicList;
|
|
161
|
-
exports.ClickableList = ClickableList;
|
|
162
|
-
exports.NavigationMenu = NavigationMenu;
|
|
163
|
-
exports.WithSecondaryText = WithSecondaryText;
|
|
164
|
-
exports.WithStatus = WithStatus;
|
|
165
|
-
exports.default = meta;
|
|
166
|
-
//# sourceMappingURL=ListItem.stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.stories.js","sources":["../../../../../src/stories/css/ListItem.stories.tsx"],"sourcesContent":["import type { StoryObj } from '@storybook/react-vite';\nimport '../../css/index.css';\n\nconst icons = {\n inbox: (\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z\"/>\n </svg>\n ),\n bookmark: (\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z\"/>\n </svg>\n ),\n settings: (\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z\"/>\n </svg>\n ),\n user: (\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z\"/>\n </svg>\n ),\n folder: (\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z\"/>\n </svg>\n ),\n star: (\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"/>\n </svg>\n ),\n};\n\nconst meta = {\n title: 'CSS Styles/Components/ListItem',\n parameters: {\n layout: 'centered',\n },\n tags: ['autodocs'],\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const BasicList: Story = {\n render: () => (\n <div style={{ display: 'flex', flexDirection: 'column', gap: '32px', width: '400px' }}>\n <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Basic List</h3>\n <div className=\"zid-list\">\n <div className=\"zid-list-item\">\n <div className=\"zid-list-item__icon\">{icons.inbox}</div>\n <div className=\"zid-list-item__text\"><span className=\"zid-list-item__primary\">Inbox</span></div>\n </div>\n <div className=\"zid-list-item\">\n <div className=\"zid-list-item__icon\">{icons.bookmark}</div>\n <div className=\"zid-list-item__text\"><span className=\"zid-list-item__primary\">Saved</span></div>\n </div>\n <div className=\"zid-list-item\">\n <div className=\"zid-list-item__icon\">{icons.settings}</div>\n <div className=\"zid-list-item__text\"><span className=\"zid-list-item__primary\">Settings</span></div>\n </div>\n </div>\n </div>\n ),\n};\n\nexport const WithSecondaryText: Story = {\n render: () => (\n <div style={{ display: 'flex', flexDirection: 'column', gap: '32px', width: '400px' }}>\n <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>With Secondary Text</h3>\n <div className=\"zid-list\">\n <div className=\"zid-list-item\">\n <div className=\"zid-list-item__icon\">{icons.user}</div>\n <div className=\"zid-list-item__text\">\n <span className=\"zid-list-item__primary\">John Doe</span>\n <span className=\"zid-list-item__secondary\">john.doe@example.com</span>\n </div>\n </div>\n <div className=\"zid-list-item\">\n <div className=\"zid-list-item__icon\">{icons.user}</div>\n <div className=\"zid-list-item__text\">\n <span className=\"zid-list-item__primary\">Jane Smith</span>\n <span className=\"zid-list-item__secondary\">jane.smith@example.com</span>\n </div>\n </div>\n <div className=\"zid-list-item\">\n <div className=\"zid-list-item__icon\">{icons.user}</div>\n <div className=\"zid-list-item__text\">\n <span className=\"zid-list-item__primary\">Bob Johnson</span>\n <span className=\"zid-list-item__secondary\">bob.johnson@example.com</span>\n </div>\n </div>\n </div>\n </div>\n ),\n};\n\n\nexport const ClickableList: Story = {\n render: () => (\n <div style={{ display: 'flex', flexDirection: 'column', gap: '32px', width: '400px' }}>\n <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Clickable List</h3>\n <div className=\"zid-list\">\n <div className=\"zid-list-item zid-list-item--clickable\">\n <div className=\"zid-list-item__icon\">{icons.folder}</div>\n <div className=\"zid-list-item__text\">\n <span className=\"zid-list-item__primary\">Documents</span>\n <span className=\"zid-list-item__secondary\">12 files</span>\n </div>\n </div>\n <div className=\"zid-list-item zid-list-item--clickable zid-list-item--selected\">\n <div className=\"zid-list-item__icon\">{icons.folder}</div>\n <div className=\"zid-list-item__text\">\n <span className=\"zid-list-item__primary\">Images</span>\n <span className=\"zid-list-item__secondary\">48 files (selected)</span>\n </div>\n </div>\n <div className=\"zid-list-item zid-list-item--clickable\">\n <div className=\"zid-list-item__icon\">{icons.folder}</div>\n <div className=\"zid-list-item__text\">\n <span className=\"zid-list-item__primary\">Videos</span>\n <span className=\"zid-list-item__secondary\">5 files</span>\n </div>\n </div>\n <div className=\"zid-list-item zid-list-item--clickable zid-list-item--disabled\">\n <div className=\"zid-list-item__icon\">{icons.folder}</div>\n <div className=\"zid-list-item__text\">\n <span className=\"zid-list-item__primary\">Archived</span>\n <span className=\"zid-list-item__secondary\">Disabled</span>\n </div>\n </div>\n </div>\n </div>\n ),\n};\n\nexport const WithStatus: Story = {\n render: () => (\n <div style={{ display: 'flex', flexDirection: 'column', gap: '32px', width: '400px' }}>\n <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>With Status Badges</h3>\n <div className=\"zid-list\">\n <div className=\"zid-list-item zid-list-item--clickable\">\n <div className=\"zid-list-item__icon\">{icons.user}</div>\n <div className=\"zid-list-item__text\">\n <span className=\"zid-list-item__primary\">Order #1234</span>\n <span className=\"zid-list-item__secondary\">John Doe - $99.99</span>\n </div>\n <span className=\"zid-status zid-status--success zid-status--sm\" style={{ marginLeft: 'auto' }}>Completed</span>\n </div>\n <div className=\"zid-list-item zid-list-item--clickable\">\n <div className=\"zid-list-item__icon\">{icons.user}</div>\n <div className=\"zid-list-item__text\">\n <span className=\"zid-list-item__primary\">Order #1235</span>\n <span className=\"zid-list-item__secondary\">Jane Smith - $149.99</span>\n </div>\n <span className=\"zid-status zid-status--warning zid-status--sm\" style={{ marginLeft: 'auto' }}>Pending</span>\n </div>\n <div className=\"zid-list-item zid-list-item--clickable\">\n <div className=\"zid-list-item__icon\">{icons.user}</div>\n <div className=\"zid-list-item__text\">\n <span className=\"zid-list-item__primary\">Order #1236</span>\n <span className=\"zid-list-item__secondary\">Bob Johnson - $49.99</span>\n </div>\n <span className=\"zid-status zid-status--error zid-status--sm\" style={{ marginLeft: 'auto' }}>Cancelled</span>\n </div>\n </div>\n </div>\n ),\n};\n\nexport const NavigationMenu: Story = {\n render: () => (\n <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', width: '280px' }}>\n <h3 style={{ marginBottom: '8px', fontFamily: 'var(--zid-font-family)' }}>Navigation Menu</h3>\n <div className=\"zid-list\" style={{ background: 'var(--zid-bg-paper)', borderRadius: '8px', padding: '8px' }}>\n <div className=\"zid-list-item zid-list-item--clickable zid-list-item--selected\">\n <div className=\"zid-list-item__icon\">{icons.inbox}</div>\n <div className=\"zid-list-item__text\"><span className=\"zid-list-item__primary\">Dashboard</span></div>\n </div>\n <div className=\"zid-list-item zid-list-item--clickable\">\n <div className=\"zid-list-item__icon\">{icons.folder}</div>\n <div className=\"zid-list-item__text\"><span className=\"zid-list-item__primary\">Products</span></div>\n </div>\n <div className=\"zid-list-item zid-list-item--clickable\">\n <div className=\"zid-list-item__icon\">{icons.user}</div>\n <div className=\"zid-list-item__text\"><span className=\"zid-list-item__primary\">Customers</span></div>\n </div>\n <div className=\"zid-list-item zid-list-item--clickable\">\n <div className=\"zid-list-item__icon\">{icons.bookmark}</div>\n <div className=\"zid-list-item__text\"><span className=\"zid-list-item__primary\">Orders</span></div>\n </div>\n <div style={{ height: '1px', background: 'var(--zid-divider)', margin: '8px 0' }}></div>\n <div className=\"zid-list-item zid-list-item--clickable\">\n <div className=\"zid-list-item__icon\">{icons.settings}</div>\n <div className=\"zid-list-item__text\"><span className=\"zid-list-item__primary\">Settings</span></div>\n </div>\n </div>\n </div>\n ),\n};\n"],"names":["jsx","jsxs"],"mappings":"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"}
|
|
@@ -1,121 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
-
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
-
;/* empty css */
|
|
5
|
-
const closeLine = require("../../icons/system/close-line.js");
|
|
6
|
-
const meta = {
|
|
7
|
-
title: "CSS Styles/Components/Modal",
|
|
8
|
-
parameters: {
|
|
9
|
-
layout: "centered"
|
|
10
|
-
},
|
|
11
|
-
tags: ["autodocs"]
|
|
12
|
-
};
|
|
13
|
-
const Sizes = {
|
|
14
|
-
render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px" }, children: [
|
|
15
|
-
/* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Modal Sizes (Static Preview)" }),
|
|
16
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "24px" }, children: [
|
|
17
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
18
|
-
/* @__PURE__ */ jsxRuntime.jsx("h4", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)", fontSize: "14px" }, children: "Small (sm)" }),
|
|
19
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "relative", background: "rgba(0,0,0,0.5)", padding: "24px", borderRadius: "8px" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-modal__content zid-modal__content--sm", style: { position: "relative" }, children: [
|
|
20
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-modal__header", children: [
|
|
21
|
-
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: "zid-modal__title", children: "Small Modal" }),
|
|
22
|
-
/* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-modal__close", children: /* @__PURE__ */ jsxRuntime.jsx(closeLine.IconCloseLine, {}) })
|
|
23
|
-
] }),
|
|
24
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-modal__body", children: "Small modal content goes here." }),
|
|
25
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-modal__footer", children: [
|
|
26
|
-
/* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--text zid-button--secondary zid-button--md", children: "Cancel" }),
|
|
27
|
-
/* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--md", children: "Confirm" })
|
|
28
|
-
] })
|
|
29
|
-
] }) })
|
|
30
|
-
] }),
|
|
31
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
32
|
-
/* @__PURE__ */ jsxRuntime.jsx("h4", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)", fontSize: "14px" }, children: "Medium (md)" }),
|
|
33
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "relative", background: "rgba(0,0,0,0.5)", padding: "24px", borderRadius: "8px" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-modal__content zid-modal__content--md", style: { position: "relative" }, children: [
|
|
34
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-modal__header", children: [
|
|
35
|
-
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: "zid-modal__title", children: "Medium Modal" }),
|
|
36
|
-
/* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-modal__close", children: /* @__PURE__ */ jsxRuntime.jsx(closeLine.IconCloseLine, {}) })
|
|
37
|
-
] }),
|
|
38
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-modal__body", children: "Medium modal content goes here. This is the default size for most use cases." }),
|
|
39
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-modal__footer", children: [
|
|
40
|
-
/* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--text zid-button--secondary zid-button--md", children: "Cancel" }),
|
|
41
|
-
/* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--md", children: "Confirm" })
|
|
42
|
-
] })
|
|
43
|
-
] }) })
|
|
44
|
-
] })
|
|
45
|
-
] })
|
|
46
|
-
] })
|
|
47
|
-
};
|
|
48
|
-
const WithForm = {
|
|
49
|
-
render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
|
|
50
|
-
/* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)" }, children: "Modal with Form" }),
|
|
51
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "relative", background: "rgba(0,0,0,0.5)", padding: "24px", borderRadius: "8px" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-modal__content zid-modal__content--md", style: { position: "relative" }, children: [
|
|
52
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-modal__header", children: [
|
|
53
|
-
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: "zid-modal__title", children: "Create New Item" }),
|
|
54
|
-
/* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-modal__close", children: /* @__PURE__ */ jsxRuntime.jsx(closeLine.IconCloseLine, {}) })
|
|
55
|
-
] }),
|
|
56
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-modal__body", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
|
|
57
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
58
|
-
/* @__PURE__ */ jsxRuntime.jsx("label", { className: "zid-input-label zid-input-label--required", children: "Name" }),
|
|
59
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-input zid-input--md", children: /* @__PURE__ */ jsxRuntime.jsx("input", { type: "text", className: "zid-input__field", placeholder: "Enter name" }) })
|
|
60
|
-
] }),
|
|
61
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
62
|
-
/* @__PURE__ */ jsxRuntime.jsx("label", { className: "zid-input-label", children: "Description" }),
|
|
63
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-input zid-input--md", children: /* @__PURE__ */ jsxRuntime.jsx("input", { type: "text", className: "zid-input__field", placeholder: "Enter description" }) })
|
|
64
|
-
] }),
|
|
65
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
66
|
-
/* @__PURE__ */ jsxRuntime.jsx("label", { className: "zid-input-label zid-input-label--required", children: "Category" }),
|
|
67
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-select zid-select--md", children: [
|
|
68
|
-
/* @__PURE__ */ jsxRuntime.jsxs("select", { className: "zid-select__native", defaultValue: "", children: [
|
|
69
|
-
/* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: "Select category" }),
|
|
70
|
-
/* @__PURE__ */ jsxRuntime.jsx("option", { value: "1", children: "Category 1" }),
|
|
71
|
-
/* @__PURE__ */ jsxRuntime.jsx("option", { value: "2", children: "Category 2" }),
|
|
72
|
-
/* @__PURE__ */ jsxRuntime.jsx("option", { value: "3", children: "Category 3" })
|
|
73
|
-
] }),
|
|
74
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-select__icon", children: "▼" })
|
|
75
|
-
] })
|
|
76
|
-
] })
|
|
77
|
-
] }) }),
|
|
78
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-modal__footer", children: [
|
|
79
|
-
/* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--text zid-button--secondary zid-button--md", children: "Cancel" }),
|
|
80
|
-
/* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--contained zid-button--primary zid-button--md", children: "Create" })
|
|
81
|
-
] })
|
|
82
|
-
] }) })
|
|
83
|
-
] })
|
|
84
|
-
};
|
|
85
|
-
const ConfirmationDialog = {
|
|
86
|
-
render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
|
|
87
|
-
/* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)" }, children: "Confirmation Dialog" }),
|
|
88
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "relative", background: "rgba(0,0,0,0.5)", padding: "24px", borderRadius: "8px" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-modal__content zid-modal__content--sm", style: { position: "relative" }, children: [
|
|
89
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-modal__header", children: [
|
|
90
|
-
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: "zid-modal__title", children: "Delete Item?" }),
|
|
91
|
-
/* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-modal__close", children: /* @__PURE__ */ jsxRuntime.jsx(closeLine.IconCloseLine, {}) })
|
|
92
|
-
] }),
|
|
93
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-modal__body", children: /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontFamily: "var(--zid-font-family)", color: "var(--zid-text-secondary)", margin: 0 }, children: "Are you sure you want to delete this item? This action cannot be undone." }) }),
|
|
94
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-modal__footer", children: [
|
|
95
|
-
/* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--outlined zid-button--secondary zid-button--md", children: "Cancel" }),
|
|
96
|
-
/* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-button zid-button--contained zid-button--error zid-button--md", children: "Delete" })
|
|
97
|
-
] })
|
|
98
|
-
] }) })
|
|
99
|
-
] })
|
|
100
|
-
};
|
|
101
|
-
const WithoutFooter = {
|
|
102
|
-
render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
|
|
103
|
-
/* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)" }, children: "Info Modal (No Footer)" }),
|
|
104
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "relative", background: "rgba(0,0,0,0.5)", padding: "24px", borderRadius: "8px" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-modal__content zid-modal__content--sm", style: { position: "relative" }, children: [
|
|
105
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-modal__header", children: [
|
|
106
|
-
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: "zid-modal__title", children: "Information" }),
|
|
107
|
-
/* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-modal__close", children: /* @__PURE__ */ jsxRuntime.jsx(closeLine.IconCloseLine, {}) })
|
|
108
|
-
] }),
|
|
109
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-modal__body", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-alert zid-alert--info", children: [
|
|
110
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-alert__icon", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" }) }) }),
|
|
111
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-alert__content", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-alert__message", children: "This is an informational modal without action buttons." }) })
|
|
112
|
-
] }) })
|
|
113
|
-
] }) })
|
|
114
|
-
] })
|
|
115
|
-
};
|
|
116
|
-
exports.ConfirmationDialog = ConfirmationDialog;
|
|
117
|
-
exports.Sizes = Sizes;
|
|
118
|
-
exports.WithForm = WithForm;
|
|
119
|
-
exports.WithoutFooter = WithoutFooter;
|
|
120
|
-
exports.default = meta;
|
|
121
|
-
//# sourceMappingURL=Modal.stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.stories.js","sources":["../../../../../src/stories/css/Modal.stories.tsx"],"sourcesContent":["import type { StoryObj } from '@storybook/react-vite';\nimport '../../css/index.css';\nimport { IconCloseLine } from '~/icons/system/close-line';\n\nconst meta = {\n title: 'CSS Styles/Components/Modal',\n parameters: {\n layout: 'centered',\n },\n tags: ['autodocs'],\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Sizes: Story = {\n render: () => (\n <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>\n <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Modal Sizes (Static Preview)</h3>\n <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>\n <div>\n <h4 style={{ marginBottom: '8px', fontFamily: 'var(--zid-font-family)', fontSize: '14px' }}>Small (sm)</h4>\n <div style={{ position: 'relative', background: 'rgba(0,0,0,0.5)', padding: '24px', borderRadius: '8px' }}>\n <div className=\"zid-modal__content zid-modal__content--sm\" style={{ position: 'relative' }}>\n <div className=\"zid-modal__header\">\n <h2 className=\"zid-modal__title\">Small Modal</h2>\n <button className=\"zid-modal__close\"><IconCloseLine /></button>\n </div>\n <div className=\"zid-modal__body\">Small modal content goes here.</div>\n <div className=\"zid-modal__footer\">\n <button className=\"zid-button zid-button--text zid-button--secondary zid-button--md\">Cancel</button>\n <button className=\"zid-button zid-button--contained zid-button--primary zid-button--md\">Confirm</button>\n </div>\n </div>\n </div>\n </div>\n <div>\n <h4 style={{ marginBottom: '8px', fontFamily: 'var(--zid-font-family)', fontSize: '14px' }}>Medium (md)</h4>\n <div style={{ position: 'relative', background: 'rgba(0,0,0,0.5)', padding: '24px', borderRadius: '8px' }}>\n <div className=\"zid-modal__content zid-modal__content--md\" style={{ position: 'relative' }}>\n <div className=\"zid-modal__header\">\n <h2 className=\"zid-modal__title\">Medium Modal</h2>\n <button className=\"zid-modal__close\"><IconCloseLine /></button>\n </div>\n <div className=\"zid-modal__body\">Medium modal content goes here. This is the default size for most use cases.</div>\n <div className=\"zid-modal__footer\">\n <button className=\"zid-button zid-button--text zid-button--secondary zid-button--md\">Cancel</button>\n <button className=\"zid-button zid-button--contained zid-button--primary zid-button--md\">Confirm</button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n ),\n};\n\nexport const WithForm: Story = {\n render: () => (\n <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n <h3 style={{ marginBottom: '8px', fontFamily: 'var(--zid-font-family)' }}>Modal with Form</h3>\n <div style={{ position: 'relative', background: 'rgba(0,0,0,0.5)', padding: '24px', borderRadius: '8px' }}>\n <div className=\"zid-modal__content zid-modal__content--md\" style={{ position: 'relative' }}>\n <div className=\"zid-modal__header\">\n <h2 className=\"zid-modal__title\">Create New Item</h2>\n <button className=\"zid-modal__close\"><IconCloseLine /></button>\n </div>\n <div className=\"zid-modal__body\">\n <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n <div>\n <label className=\"zid-input-label zid-input-label--required\">Name</label>\n <div className=\"zid-input zid-input--md\">\n <input type=\"text\" className=\"zid-input__field\" placeholder=\"Enter name\" />\n </div>\n </div>\n <div>\n <label className=\"zid-input-label\">Description</label>\n <div className=\"zid-input zid-input--md\">\n <input type=\"text\" className=\"zid-input__field\" placeholder=\"Enter description\" />\n </div>\n </div>\n <div>\n <label className=\"zid-input-label zid-input-label--required\">Category</label>\n <div className=\"zid-select zid-select--md\">\n <select className=\"zid-select__native\" defaultValue=\"\">\n <option value=\"\" disabled>Select category</option>\n <option value=\"1\">Category 1</option>\n <option value=\"2\">Category 2</option>\n <option value=\"3\">Category 3</option>\n </select>\n <span className=\"zid-select__icon\">▼</span>\n </div>\n </div>\n </div>\n </div>\n <div className=\"zid-modal__footer\">\n <button className=\"zid-button zid-button--text zid-button--secondary zid-button--md\">Cancel</button>\n <button className=\"zid-button zid-button--contained zid-button--primary zid-button--md\">Create</button>\n </div>\n </div>\n </div>\n </div>\n ),\n};\n\n\nexport const ConfirmationDialog: Story = {\n render: () => (\n <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n <h3 style={{ marginBottom: '8px', fontFamily: 'var(--zid-font-family)' }}>Confirmation Dialog</h3>\n <div style={{ position: 'relative', background: 'rgba(0,0,0,0.5)', padding: '24px', borderRadius: '8px' }}>\n <div className=\"zid-modal__content zid-modal__content--sm\" style={{ position: 'relative' }}>\n <div className=\"zid-modal__header\">\n <h2 className=\"zid-modal__title\">Delete Item?</h2>\n <button className=\"zid-modal__close\"><IconCloseLine /></button>\n </div>\n <div className=\"zid-modal__body\">\n <p style={{ fontFamily: 'var(--zid-font-family)', color: 'var(--zid-text-secondary)', margin: 0 }}>\n Are you sure you want to delete this item? This action cannot be undone.\n </p>\n </div>\n <div className=\"zid-modal__footer\">\n <button className=\"zid-button zid-button--outlined zid-button--secondary zid-button--md\">Cancel</button>\n <button className=\"zid-button zid-button--contained zid-button--error zid-button--md\">Delete</button>\n </div>\n </div>\n </div>\n </div>\n ),\n};\n\nexport const WithoutFooter: Story = {\n render: () => (\n <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n <h3 style={{ marginBottom: '8px', fontFamily: 'var(--zid-font-family)' }}>Info Modal (No Footer)</h3>\n <div style={{ position: 'relative', background: 'rgba(0,0,0,0.5)', padding: '24px', borderRadius: '8px' }}>\n <div className=\"zid-modal__content zid-modal__content--sm\" style={{ position: 'relative' }}>\n <div className=\"zid-modal__header\">\n <h2 className=\"zid-modal__title\">Information</h2>\n <button className=\"zid-modal__close\"><IconCloseLine /></button>\n </div>\n <div className=\"zid-modal__body\">\n <div className=\"zid-alert zid-alert--info\">\n <div className=\"zid-alert__icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\"/>\n </svg>\n </div>\n <div className=\"zid-alert__content\">\n <div className=\"zid-alert__message\">This is an informational modal without action buttons.</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n ),\n};\n"],"names":["jsxs","jsx","IconCloseLine"],"mappings":"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"}
|
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
-
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
-
;/* empty css */
|
|
5
|
-
const meta = {
|
|
6
|
-
title: "CSS Styles/Components/Radio",
|
|
7
|
-
parameters: {
|
|
8
|
-
layout: "centered"
|
|
9
|
-
},
|
|
10
|
-
tags: ["autodocs"]
|
|
11
|
-
};
|
|
12
|
-
const States = {
|
|
13
|
-
render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px" }, children: [
|
|
14
|
-
/* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Radio States" }),
|
|
15
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "24px", flexWrap: "wrap" }, children: [
|
|
16
|
-
/* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-radio", children: [
|
|
17
|
-
/* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", className: "zid-radio__input", name: "state-demo" }),
|
|
18
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__circle" }),
|
|
19
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__label", children: "Unchecked" })
|
|
20
|
-
] }),
|
|
21
|
-
/* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-radio", children: [
|
|
22
|
-
/* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", className: "zid-radio__input", name: "state-demo", defaultChecked: true }),
|
|
23
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__circle" }),
|
|
24
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__label", children: "Checked" })
|
|
25
|
-
] }),
|
|
26
|
-
/* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-radio zid-radio--disabled", children: [
|
|
27
|
-
/* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", className: "zid-radio__input", name: "state-demo-2", disabled: true }),
|
|
28
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__circle" }),
|
|
29
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__label", children: "Disabled" })
|
|
30
|
-
] }),
|
|
31
|
-
/* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-radio zid-radio--disabled", children: [
|
|
32
|
-
/* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", className: "zid-radio__input", name: "state-demo-3", defaultChecked: true, disabled: true }),
|
|
33
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__circle" }),
|
|
34
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__label", children: "Disabled Checked" })
|
|
35
|
-
] })
|
|
36
|
-
] })
|
|
37
|
-
] })
|
|
38
|
-
};
|
|
39
|
-
const RadioGroup = {
|
|
40
|
-
render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "32px", width: "300px" }, children: [
|
|
41
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
42
|
-
/* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Radio Group - Vertical" }),
|
|
43
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-radio-group", style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
|
|
44
|
-
/* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-radio", children: [
|
|
45
|
-
/* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", className: "zid-radio__input", name: "group-demo", defaultChecked: true }),
|
|
46
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__circle" }),
|
|
47
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__label", children: "Option 1" })
|
|
48
|
-
] }),
|
|
49
|
-
/* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-radio", children: [
|
|
50
|
-
/* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", className: "zid-radio__input", name: "group-demo" }),
|
|
51
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__circle" }),
|
|
52
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__label", children: "Option 2" })
|
|
53
|
-
] }),
|
|
54
|
-
/* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-radio", children: [
|
|
55
|
-
/* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", className: "zid-radio__input", name: "group-demo" }),
|
|
56
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__circle" }),
|
|
57
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__label", children: "Option 3" })
|
|
58
|
-
] })
|
|
59
|
-
] })
|
|
60
|
-
] }),
|
|
61
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
62
|
-
/* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "16px", fontFamily: "var(--zid-font-family)" }, children: "Radio Group - Horizontal" }),
|
|
63
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-radio-group", style: { display: "flex", gap: "24px", flexWrap: "wrap" }, children: [
|
|
64
|
-
/* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-radio", children: [
|
|
65
|
-
/* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", className: "zid-radio__input", name: "group-demo-h", defaultChecked: true }),
|
|
66
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__circle" }),
|
|
67
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__label", children: "Small" })
|
|
68
|
-
] }),
|
|
69
|
-
/* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-radio", children: [
|
|
70
|
-
/* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", className: "zid-radio__input", name: "group-demo-h" }),
|
|
71
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__circle" }),
|
|
72
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__label", children: "Medium" })
|
|
73
|
-
] }),
|
|
74
|
-
/* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-radio", children: [
|
|
75
|
-
/* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", className: "zid-radio__input", name: "group-demo-h" }),
|
|
76
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__circle" }),
|
|
77
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__label", children: "Large" })
|
|
78
|
-
] })
|
|
79
|
-
] })
|
|
80
|
-
] })
|
|
81
|
-
] })
|
|
82
|
-
};
|
|
83
|
-
const WithHelperText = {
|
|
84
|
-
render: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "24px", width: "400px" }, children: [
|
|
85
|
-
/* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "8px", fontFamily: "var(--zid-font-family)" }, children: "With Helper Text" }),
|
|
86
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
|
|
87
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
88
|
-
/* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-radio", children: [
|
|
89
|
-
/* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", className: "zid-radio__input", name: "helper-demo", defaultChecked: true }),
|
|
90
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__circle" }),
|
|
91
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__label", children: "Standard Shipping" })
|
|
92
|
-
] }),
|
|
93
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-input-helper", style: { marginLeft: "28px" }, children: "Free delivery in 5-7 business days" })
|
|
94
|
-
] }),
|
|
95
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
96
|
-
/* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-radio", children: [
|
|
97
|
-
/* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", className: "zid-radio__input", name: "helper-demo" }),
|
|
98
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__circle" }),
|
|
99
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__label", children: "Express Shipping" })
|
|
100
|
-
] }),
|
|
101
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-input-helper", style: { marginLeft: "28px" }, children: "$9.99 - Delivery in 2-3 business days" })
|
|
102
|
-
] }),
|
|
103
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
104
|
-
/* @__PURE__ */ jsxRuntime.jsxs("label", { className: "zid-radio", children: [
|
|
105
|
-
/* @__PURE__ */ jsxRuntime.jsx("input", { type: "radio", className: "zid-radio__input", name: "helper-demo" }),
|
|
106
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__circle" }),
|
|
107
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "zid-radio__label", children: "Priority Shipping" })
|
|
108
|
-
] }),
|
|
109
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-input-helper", style: { marginLeft: "28px" }, children: "$19.99 - Next day delivery" })
|
|
110
|
-
] })
|
|
111
|
-
] })
|
|
112
|
-
] })
|
|
113
|
-
};
|
|
114
|
-
exports.RadioGroup = RadioGroup;
|
|
115
|
-
exports.States = States;
|
|
116
|
-
exports.WithHelperText = WithHelperText;
|
|
117
|
-
exports.default = meta;
|
|
118
|
-
//# sourceMappingURL=Radio.stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.stories.js","sources":["../../../../../src/stories/css/Radio.stories.tsx"],"sourcesContent":["import type { StoryObj } from '@storybook/react-vite';\nimport '../../css/index.css';\n\nconst meta = {\n title: 'CSS Styles/Components/Radio',\n parameters: {\n layout: 'centered',\n },\n tags: ['autodocs'],\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const States: Story = {\n render: () => (\n <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>\n <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Radio States</h3>\n <div style={{ display: 'flex', gap: '24px', flexWrap: 'wrap' }}>\n <label className=\"zid-radio\">\n <input type=\"radio\" className=\"zid-radio__input\" name=\"state-demo\" />\n <span className=\"zid-radio__circle\"></span>\n <span className=\"zid-radio__label\">Unchecked</span>\n </label>\n <label className=\"zid-radio\">\n <input type=\"radio\" className=\"zid-radio__input\" name=\"state-demo\" defaultChecked />\n <span className=\"zid-radio__circle\"></span>\n <span className=\"zid-radio__label\">Checked</span>\n </label>\n <label className=\"zid-radio zid-radio--disabled\">\n <input type=\"radio\" className=\"zid-radio__input\" name=\"state-demo-2\" disabled />\n <span className=\"zid-radio__circle\"></span>\n <span className=\"zid-radio__label\">Disabled</span>\n </label>\n <label className=\"zid-radio zid-radio--disabled\">\n <input type=\"radio\" className=\"zid-radio__input\" name=\"state-demo-3\" defaultChecked disabled />\n <span className=\"zid-radio__circle\"></span>\n <span className=\"zid-radio__label\">Disabled Checked</span>\n </label>\n </div>\n </div>\n ),\n};\n\nexport const RadioGroup: Story = {\n render: () => (\n <div style={{ display: 'flex', flexDirection: 'column', gap: '32px', width: '300px' }}>\n <div>\n <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Radio Group - Vertical</h3>\n <div className=\"zid-radio-group\" style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>\n <label className=\"zid-radio\">\n <input type=\"radio\" className=\"zid-radio__input\" name=\"group-demo\" defaultChecked />\n <span className=\"zid-radio__circle\"></span>\n <span className=\"zid-radio__label\">Option 1</span>\n </label>\n <label className=\"zid-radio\">\n <input type=\"radio\" className=\"zid-radio__input\" name=\"group-demo\" />\n <span className=\"zid-radio__circle\"></span>\n <span className=\"zid-radio__label\">Option 2</span>\n </label>\n <label className=\"zid-radio\">\n <input type=\"radio\" className=\"zid-radio__input\" name=\"group-demo\" />\n <span className=\"zid-radio__circle\"></span>\n <span className=\"zid-radio__label\">Option 3</span>\n </label>\n </div>\n </div>\n <div>\n <h3 style={{ marginBottom: '16px', fontFamily: 'var(--zid-font-family)' }}>Radio Group - Horizontal</h3>\n <div className=\"zid-radio-group\" style={{ display: 'flex', gap: '24px', flexWrap: 'wrap' }}>\n <label className=\"zid-radio\">\n <input type=\"radio\" className=\"zid-radio__input\" name=\"group-demo-h\" defaultChecked />\n <span className=\"zid-radio__circle\"></span>\n <span className=\"zid-radio__label\">Small</span>\n </label>\n <label className=\"zid-radio\">\n <input type=\"radio\" className=\"zid-radio__input\" name=\"group-demo-h\" />\n <span className=\"zid-radio__circle\"></span>\n <span className=\"zid-radio__label\">Medium</span>\n </label>\n <label className=\"zid-radio\">\n <input type=\"radio\" className=\"zid-radio__input\" name=\"group-demo-h\" />\n <span className=\"zid-radio__circle\"></span>\n <span className=\"zid-radio__label\">Large</span>\n </label>\n </div>\n </div>\n </div>\n ),\n};\n\nexport const WithHelperText: Story = {\n render: () => (\n <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', width: '400px' }}>\n <h3 style={{ marginBottom: '8px', fontFamily: 'var(--zid-font-family)' }}>With Helper Text</h3>\n <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n <div>\n <label className=\"zid-radio\">\n <input type=\"radio\" className=\"zid-radio__input\" name=\"helper-demo\" defaultChecked />\n <span className=\"zid-radio__circle\"></span>\n <span className=\"zid-radio__label\">Standard Shipping</span>\n </label>\n <div className=\"zid-input-helper\" style={{ marginLeft: '28px' }}>Free delivery in 5-7 business days</div>\n </div>\n <div>\n <label className=\"zid-radio\">\n <input type=\"radio\" className=\"zid-radio__input\" name=\"helper-demo\" />\n <span className=\"zid-radio__circle\"></span>\n <span className=\"zid-radio__label\">Express Shipping</span>\n </label>\n <div className=\"zid-input-helper\" style={{ marginLeft: '28px' }}>$9.99 - Delivery in 2-3 business days</div>\n </div>\n <div>\n <label className=\"zid-radio\">\n <input type=\"radio\" className=\"zid-radio__input\" name=\"helper-demo\" />\n <span className=\"zid-radio__circle\"></span>\n <span className=\"zid-radio__label\">Priority Shipping</span>\n </label>\n <div className=\"zid-input-helper\" style={{ marginLeft: '28px' }}>$19.99 - Next day delivery</div>\n </div>\n </div>\n </div>\n ),\n};\n"],"names":["jsxs","jsx"],"mappings":";;;;AAGA,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM,CAAC,UAAU;AACnB;AAKO,MAAM,SAAgB;AAAA,EAC3B,QAAQ,MACNA,2BAAAA,KAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,OAAA,GAC3D,UAAA;AAAA,IAAAC,2BAAAA,IAAC,MAAA,EAAG,OAAO,EAAE,cAAc,QAAQ,YAAY,yBAAA,GAA4B,UAAA,eAAA,CAAY;AAAA,IACvFD,2BAAAA,KAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,KAAK,QAAQ,UAAU,OAAA,GACpD,UAAA;AAAA,MAAAA,2BAAAA,KAAC,SAAA,EAAM,WAAU,aACf,UAAA;AAAA,QAAAC,+BAAC,WAAM,MAAK,SAAQ,WAAU,oBAAmB,MAAK,cAAa;AAAA,QACnEA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAA,CAAoB;AAAA,QACpCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAmB,UAAA,YAAA,CAAS;AAAA,MAAA,GAC9C;AAAA,MACAD,2BAAAA,KAAC,SAAA,EAAM,WAAU,aACf,UAAA;AAAA,QAAAC,2BAAAA,IAAC,SAAA,EAAM,MAAK,SAAQ,WAAU,oBAAmB,MAAK,cAAa,gBAAc,KAAA,CAAC;AAAA,QAClFA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAA,CAAoB;AAAA,QACpCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAmB,UAAA,UAAA,CAAO;AAAA,MAAA,GAC5C;AAAA,MACAD,2BAAAA,KAAC,SAAA,EAAM,WAAU,iCACf,UAAA;AAAA,QAAAC,2BAAAA,IAAC,SAAA,EAAM,MAAK,SAAQ,WAAU,oBAAmB,MAAK,gBAAe,UAAQ,KAAA,CAAC;AAAA,QAC9EA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAA,CAAoB;AAAA,QACpCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAmB,UAAA,WAAA,CAAQ;AAAA,MAAA,GAC7C;AAAA,MACAD,2BAAAA,KAAC,SAAA,EAAM,WAAU,iCACf,UAAA;AAAA,QAAAC,2BAAAA,IAAC,SAAA,EAAM,MAAK,SAAQ,WAAU,oBAAmB,MAAK,gBAAe,gBAAc,MAAC,UAAQ,KAAA,CAAC;AAAA,QAC7FA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAA,CAAoB;AAAA,QACpCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAmB,UAAA,mBAAA,CAAgB;AAAA,MAAA,EAAA,CACrD;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF;AAEJ;AAEO,MAAM,aAAoB;AAAA,EAC/B,QAAQ,MACND,2BAAAA,KAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,QAAQ,OAAO,WAC1E,UAAA;AAAA,IAAAA,gCAAC,OAAA,EACC,UAAA;AAAA,MAAAC,2BAAAA,IAAC,MAAA,EAAG,OAAO,EAAE,cAAc,QAAQ,YAAY,yBAAA,GAA4B,UAAA,yBAAA,CAAsB;AAAA,MACjGD,2BAAAA,KAAC,OAAA,EAAI,WAAU,mBAAkB,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,OAAA,GACvF,UAAA;AAAA,QAAAA,2BAAAA,KAAC,SAAA,EAAM,WAAU,aACf,UAAA;AAAA,UAAAC,2BAAAA,IAAC,SAAA,EAAM,MAAK,SAAQ,WAAU,oBAAmB,MAAK,cAAa,gBAAc,KAAA,CAAC;AAAA,UAClFA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAA,CAAoB;AAAA,UACpCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAmB,UAAA,WAAA,CAAQ;AAAA,QAAA,GAC7C;AAAA,QACAD,2BAAAA,KAAC,SAAA,EAAM,WAAU,aACf,UAAA;AAAA,UAAAC,+BAAC,WAAM,MAAK,SAAQ,WAAU,oBAAmB,MAAK,cAAa;AAAA,UACnEA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAA,CAAoB;AAAA,UACpCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAmB,UAAA,WAAA,CAAQ;AAAA,QAAA,GAC7C;AAAA,QACAD,2BAAAA,KAAC,SAAA,EAAM,WAAU,aACf,UAAA;AAAA,UAAAC,+BAAC,WAAM,MAAK,SAAQ,WAAU,oBAAmB,MAAK,cAAa;AAAA,UACnEA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAA,CAAoB;AAAA,UACpCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAmB,UAAA,WAAA,CAAQ;AAAA,QAAA,EAAA,CAC7C;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,GACF;AAAA,oCACC,OAAA,EACC,UAAA;AAAA,MAAAA,2BAAAA,IAAC,MAAA,EAAG,OAAO,EAAE,cAAc,QAAQ,YAAY,yBAAA,GAA4B,UAAA,2BAAA,CAAwB;AAAA,MACnGD,2BAAAA,KAAC,OAAA,EAAI,WAAU,mBAAkB,OAAO,EAAE,SAAS,QAAQ,KAAK,QAAQ,UAAU,OAAA,GAChF,UAAA;AAAA,QAAAA,2BAAAA,KAAC,SAAA,EAAM,WAAU,aACf,UAAA;AAAA,UAAAC,2BAAAA,IAAC,SAAA,EAAM,MAAK,SAAQ,WAAU,oBAAmB,MAAK,gBAAe,gBAAc,KAAA,CAAC;AAAA,UACpFA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAA,CAAoB;AAAA,UACpCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAmB,UAAA,QAAA,CAAK;AAAA,QAAA,GAC1C;AAAA,QACAD,2BAAAA,KAAC,SAAA,EAAM,WAAU,aACf,UAAA;AAAA,UAAAC,+BAAC,WAAM,MAAK,SAAQ,WAAU,oBAAmB,MAAK,gBAAe;AAAA,UACrEA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAA,CAAoB;AAAA,UACpCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAmB,UAAA,SAAA,CAAM;AAAA,QAAA,GAC3C;AAAA,QACAD,2BAAAA,KAAC,SAAA,EAAM,WAAU,aACf,UAAA;AAAA,UAAAC,+BAAC,WAAM,MAAK,SAAQ,WAAU,oBAAmB,MAAK,gBAAe;AAAA,UACrEA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAA,CAAoB;AAAA,UACpCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAmB,UAAA,QAAA,CAAK;AAAA,QAAA,EAAA,CAC1C;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF;AAEJ;AAEO,MAAM,iBAAwB;AAAA,EACnC,QAAQ,MACND,2BAAAA,KAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,QAAQ,OAAO,WAC1E,UAAA;AAAA,IAAAC,2BAAAA,IAAC,MAAA,EAAG,OAAO,EAAE,cAAc,OAAO,YAAY,yBAAA,GAA4B,UAAA,mBAAA,CAAgB;AAAA,IAC1FD,2BAAAA,KAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,OAAA,GAC3D,UAAA;AAAA,MAAAA,gCAAC,OAAA,EACC,UAAA;AAAA,QAAAA,2BAAAA,KAAC,SAAA,EAAM,WAAU,aACf,UAAA;AAAA,UAAAC,2BAAAA,IAAC,SAAA,EAAM,MAAK,SAAQ,WAAU,oBAAmB,MAAK,eAAc,gBAAc,KAAA,CAAC;AAAA,UACnFA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAA,CAAoB;AAAA,UACpCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAmB,UAAA,oBAAA,CAAiB;AAAA,QAAA,GACtD;AAAA,QACAA,2BAAAA,IAAC,SAAI,WAAU,oBAAmB,OAAO,EAAE,YAAY,OAAA,GAAU,UAAA,qCAAA,CAAkC;AAAA,MAAA,GACrG;AAAA,sCACC,OAAA,EACC,UAAA;AAAA,QAAAD,2BAAAA,KAAC,SAAA,EAAM,WAAU,aACf,UAAA;AAAA,UAAAC,+BAAC,WAAM,MAAK,SAAQ,WAAU,oBAAmB,MAAK,eAAc;AAAA,UACpEA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAA,CAAoB;AAAA,UACpCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAmB,UAAA,mBAAA,CAAgB;AAAA,QAAA,GACrD;AAAA,QACAA,2BAAAA,IAAC,SAAI,WAAU,oBAAmB,OAAO,EAAE,YAAY,OAAA,GAAU,UAAA,wCAAA,CAAqC;AAAA,MAAA,GACxG;AAAA,sCACC,OAAA,EACC,UAAA;AAAA,QAAAD,2BAAAA,KAAC,SAAA,EAAM,WAAU,aACf,UAAA;AAAA,UAAAC,+BAAC,WAAM,MAAK,SAAQ,WAAU,oBAAmB,MAAK,eAAc;AAAA,UACpEA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAA,CAAoB;AAAA,UACpCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,oBAAmB,UAAA,oBAAA,CAAiB;AAAA,QAAA,GACtD;AAAA,QACAA,2BAAAA,IAAC,SAAI,WAAU,oBAAmB,OAAO,EAAE,YAAY,OAAA,GAAU,UAAA,6BAAA,CAA0B;AAAA,MAAA,EAAA,CAC7F;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF;AAEJ;;;;;"}
|