@lumx/react 3.20.1-alpha.15 → 3.20.1-alpha.17
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/_internal/{Button-f19e18df.js → Button-1f227024.js} +30 -28
- package/_internal/{Button-f19e18df.js.map → Button-1f227024.js.map} +1 -1
- package/_internal/{ButtonRoot-ab633b1d.js → ButtonRoot-823f3e9c.js} +18 -16
- package/_internal/{ButtonRoot-ab633b1d.js.map → ButtonRoot-823f3e9c.js.map} +1 -1
- package/_internal/{Chip-4c572eec.js → Chip-a34f6905.js} +31 -34
- package/_internal/{Chip-4c572eec.js.map → Chip-a34f6905.js.map} +1 -1
- package/_internal/{ClickAwayProvider-bcce6ceb.js → ClickAwayProvider-7093ba23.js} +6 -4
- package/_internal/{ClickAwayProvider-bcce6ceb.js.map → ClickAwayProvider-7093ba23.js.map} +1 -1
- package/_internal/{DisabledStateContext-077b7bef.js → DisabledStateContext-ea04260d.js} +6 -6
- package/_internal/{DisabledStateContext-077b7bef.js.map → DisabledStateContext-ea04260d.js.map} +1 -1
- package/_internal/{HeadingLevelProvider-e4817816.js → HeadingLevelProvider-ebdcb0c7.js} +6 -4
- package/_internal/{HeadingLevelProvider-e4817816.js.map → HeadingLevelProvider-ebdcb0c7.js.map} +1 -1
- package/_internal/{IconButton-10585058.js → IconButton-f4df224c.js} +29 -24
- package/_internal/{IconButton-10585058.js.map → IconButton-f4df224c.js.map} +1 -1
- package/_internal/ImageCaption-8134a3aa.js +75 -0
- package/_internal/{ImageCaption-4279b2b6.js.map → ImageCaption-8134a3aa.js.map} +1 -1
- package/_internal/{List-d5f5d465.js → List-54237e0e.js} +52 -50
- package/_internal/{List-d5f5d465.js.map → List-54237e0e.js.map} +1 -1
- package/_internal/{PopoverDialog-21e5c9dd.js → PopoverDialog-e0967e5f.js} +166 -158
- package/_internal/{PopoverDialog-21e5c9dd.js.map → PopoverDialog-e0967e5f.js.map} +1 -1
- package/_internal/{Portal-c43d098b.js → Portal-3f86608e.js} +5 -2
- package/_internal/{Portal-c43d098b.js.map → Portal-3f86608e.js.map} +1 -1
- package/_internal/{RawClickable-c76bbc4c.js → RawClickable-2c2b6a89.js} +9 -7
- package/_internal/{RawClickable-c76bbc4c.js.map → RawClickable-2c2b6a89.js.map} +1 -1
- package/_internal/{Slides-01f513ce.js → Slides-b7a67f32.js} +99 -96
- package/_internal/{Slides-01f513ce.js.map → Slides-b7a67f32.js.map} +1 -1
- package/_internal/{Thumbnail-30d2a781.js → Thumbnail-b5dea0af.js} +46 -45
- package/_internal/{Thumbnail-30d2a781.js.map → Thumbnail-b5dea0af.js.map} +1 -1
- package/_internal/components/{alert-dialog-8f1c163c.js → alert-dialog-b284b191.js} +50 -35
- package/_internal/components/{alert-dialog-8f1c163c.js.map → alert-dialog-b284b191.js.map} +1 -1
- package/_internal/components/{autocomplete-bfbdeb3c.js → autocomplete-8d3f37ea.js} +64 -67
- package/_internal/components/{autocomplete-bfbdeb3c.js.map → autocomplete-8d3f37ea.js.map} +1 -1
- package/_internal/components/{avatar-6990e3e9.js → avatar-5fc70e00.js} +28 -32
- package/_internal/components/{avatar-6990e3e9.js.map → avatar-5fc70e00.js.map} +1 -1
- package/_internal/components/{badge-81543bc7.js → badge-8390e590.js} +18 -18
- package/_internal/components/{badge-81543bc7.js.map → badge-8390e590.js.map} +1 -1
- package/_internal/components/{button-927abe71.js → button-e3c7f2eb.js} +11 -13
- package/_internal/components/{button-927abe71.js.map → button-e3c7f2eb.js.map} +1 -1
- package/_internal/components/{checkbox-dc4caec8.js → checkbox-d1ca9748.js} +53 -44
- package/_internal/components/{checkbox-dc4caec8.js.map → checkbox-d1ca9748.js.map} +1 -1
- package/_internal/components/{chip-fb3d0c76.js → chip-e40c5521.js} +10 -12
- package/_internal/components/{chip-fb3d0c76.js.map → chip-e40c5521.js.map} +1 -1
- package/_internal/components/comment-block-a3cf7b9b.js +138 -0
- package/_internal/components/{comment-block-b84c4694.js.map → comment-block-a3cf7b9b.js.map} +1 -1
- package/_internal/components/date-picker-6c1b14e4.js +2 -0
- package/_internal/components/date-picker-6c1b14e4.js.map +1 -0
- package/_internal/components/{dialog-7dbcb485.js → dialog-ebdb9500.js} +70 -58
- package/_internal/components/{dialog-7dbcb485.js.map → dialog-ebdb9500.js.map} +1 -1
- package/_internal/components/{divider-12e9b6a0.js → divider-116af6b9.js} +7 -10
- package/_internal/components/{divider-12e9b6a0.js.map → divider-116af6b9.js.map} +1 -1
- package/_internal/components/{drag-handle-a38ff757.js → drag-handle-5215cd21.js} +14 -16
- package/_internal/components/{drag-handle-a38ff757.js.map → drag-handle-5215cd21.js.map} +1 -1
- package/_internal/components/{dropdown-38b0b6a0.js → dropdown-0baed51b.js} +15 -16
- package/_internal/components/{dropdown-38b0b6a0.js.map → dropdown-0baed51b.js.map} +1 -1
- package/_internal/components/{expansion-panel-c4b93653.js → expansion-panel-5533a680.js} +48 -39
- package/_internal/components/{expansion-panel-c4b93653.js.map → expansion-panel-5533a680.js.map} +1 -1
- package/_internal/components/{flag-c5e2f5f0.js → flag-8d4a7e72.js} +20 -16
- package/_internal/components/{flag-c5e2f5f0.js.map → flag-8d4a7e72.js.map} +1 -1
- package/_internal/components/{flex-box-c8701a85.js → flex-box-55144e5f.js} +9 -11
- package/_internal/components/{flex-box-c8701a85.js.map → flex-box-55144e5f.js.map} +1 -1
- package/_internal/components/{generic-block-0d6ad5a6.js → generic-block-ff0509ee.js} +35 -26
- package/_internal/components/{generic-block-0d6ad5a6.js.map → generic-block-ff0509ee.js.map} +1 -1
- package/_internal/components/{grid-3b194fe8.js → grid-6f1b5a41.js} +15 -20
- package/_internal/components/{grid-3b194fe8.js.map → grid-6f1b5a41.js.map} +1 -1
- package/_internal/components/{grid-column-985b9327.js → grid-column-f01df853.js} +8 -9
- package/_internal/components/{grid-column-985b9327.js.map → grid-column-f01df853.js.map} +1 -1
- package/_internal/components/{heading-5e954dfc.js → heading-89239843.js} +11 -12
- package/_internal/components/{heading-5e954dfc.js.map → heading-89239843.js.map} +1 -1
- package/_internal/components/{icon-2e7345ad.js → icon-b708cca4.js} +24 -25
- package/_internal/components/{icon-2e7345ad.js.map → icon-b708cca4.js.map} +1 -1
- package/_internal/components/{image-block-8d21dd7e.js → image-block-7938422d.js} +35 -34
- package/_internal/components/{image-block-8d21dd7e.js.map → image-block-7938422d.js.map} +1 -1
- package/_internal/components/{image-lightbox-4a5ab962.js → image-lightbox-58331704.js} +113 -100
- package/_internal/components/{image-lightbox-4a5ab962.js.map → image-lightbox-58331704.js.map} +1 -1
- package/_internal/components/{inline-list-4884f004.js → inline-list-e6f19a98.js} +24 -24
- package/_internal/components/{inline-list-4884f004.js.map → inline-list-e6f19a98.js.map} +1 -1
- package/_internal/components/{input-helper-e644e05e.js → input-helper-64153099.js} +9 -11
- package/_internal/components/{input-helper-e644e05e.js.map → input-helper-64153099.js.map} +1 -1
- package/_internal/components/{input-label-5e509a1b.js → input-label-2feb0bb0.js} +9 -11
- package/_internal/components/{input-label-5e509a1b.js.map → input-label-2feb0bb0.js.map} +1 -1
- package/_internal/components/{lightbox-bec1b95f.js → lightbox-570ad9e5.js} +55 -49
- package/_internal/components/{lightbox-bec1b95f.js.map → lightbox-570ad9e5.js.map} +1 -1
- package/_internal/components/{link-9637b9e4.js → link-91f76477.js} +25 -23
- package/_internal/components/{link-9637b9e4.js.map → link-91f76477.js.map} +1 -1
- package/_internal/components/link-preview-fdd8d738.js +117 -0
- package/_internal/components/{link-preview-7a4a6e4b.js.map → link-preview-fdd8d738.js.map} +1 -1
- package/_internal/components/{list-5c8f7122.js → list-b08d8423.js} +14 -20
- package/_internal/components/{list-5c8f7122.js.map → list-b08d8423.js.map} +1 -1
- package/_internal/components/{message-a67067d9.js → message-29cb9181.js} +24 -24
- package/_internal/components/{message-a67067d9.js.map → message-29cb9181.js.map} +1 -1
- package/_internal/components/{mosaic-92b66c80.js → mosaic-cdb9f563.js} +36 -33
- package/_internal/components/{mosaic-92b66c80.js.map → mosaic-cdb9f563.js.map} +1 -1
- package/_internal/components/navigation-8b7d9bd8.js +225 -0
- package/_internal/components/{navigation-4fd3917d.js.map → navigation-8b7d9bd8.js.map} +1 -1
- package/_internal/components/{notification-9063c963.js → notification-a45fda96.js} +45 -40
- package/_internal/components/{notification-9063c963.js.map → notification-a45fda96.js.map} +1 -1
- package/_internal/components/popover-65bfbc57.js +3 -0
- package/_internal/components/popover-65bfbc57.js.map +1 -0
- package/_internal/components/post-block-52e58dd5.js +109 -0
- package/_internal/components/{post-block-0cfc2206.js.map → post-block-52e58dd5.js.map} +1 -1
- package/_internal/components/{progress-eaf5b33d.js → progress-f39c3fa2.js} +44 -50
- package/_internal/components/{progress-eaf5b33d.js.map → progress-f39c3fa2.js.map} +1 -1
- package/_internal/components/{progress-tracker-4a65718d.js → progress-tracker-512d7a08.js} +59 -63
- package/_internal/components/{progress-tracker-4a65718d.js.map → progress-tracker-512d7a08.js.map} +1 -1
- package/_internal/components/{radio-button-3ef8a325.js → radio-button-559a4863.js} +54 -53
- package/_internal/components/{radio-button-3ef8a325.js.map → radio-button-559a4863.js.map} +1 -1
- package/_internal/components/select-48d4fa8c.js +454 -0
- package/_internal/components/{select-d46cfe35.js.map → select-48d4fa8c.js.map} +1 -1
- package/_internal/components/{side-navigation-75b22f19.js → side-navigation-f9bc5b4e.js} +62 -56
- package/_internal/components/{side-navigation-75b22f19.js.map → side-navigation-f9bc5b4e.js.map} +1 -1
- package/_internal/components/{skeleton-361ce335.js → skeleton-c66516ee.js} +23 -31
- package/_internal/components/{skeleton-361ce335.js.map → skeleton-c66516ee.js.map} +1 -1
- package/_internal/components/{slider-8094cb5c.js → slider-efbfbc45.js} +62 -56
- package/_internal/components/{slider-8094cb5c.js.map → slider-efbfbc45.js.map} +1 -1
- package/_internal/components/{slideshow-2e8cd372.js → slideshow-dd312470.js} +39 -38
- package/_internal/components/{slideshow-2e8cd372.js.map → slideshow-dd312470.js.map} +1 -1
- package/_internal/components/{switch-5516949b.js → switch-769a2a04.js} +49 -45
- package/_internal/components/{switch-5516949b.js.map → switch-769a2a04.js.map} +1 -1
- package/_internal/components/{table-fa198ee6.js → table-8617b1ba.js} +68 -73
- package/_internal/components/{table-fa198ee6.js.map → table-8617b1ba.js.map} +1 -1
- package/_internal/components/{tabs-bb9bc2a5.js → tabs-884c57b6.js} +41 -41
- package/_internal/components/{tabs-bb9bc2a5.js.map → tabs-884c57b6.js.map} +1 -1
- package/_internal/components/text-c7b1e079.js +2 -0
- package/_internal/components/text-c7b1e079.js.map +1 -0
- package/_internal/components/{text-field-82733568.js → text-field-478acd86.js} +116 -103
- package/_internal/components/{text-field-82733568.js.map → text-field-478acd86.js.map} +1 -1
- package/_internal/components/{thumbnail-e3acff82.js → thumbnail-310a4c4b.js} +2 -2
- package/_internal/components/{thumbnail-e3acff82.js.map → thumbnail-310a4c4b.js.map} +1 -1
- package/_internal/components/{toolbar-155562be.js → toolbar-a43533a2.js} +18 -17
- package/_internal/components/{toolbar-155562be.js.map → toolbar-a43533a2.js.map} +1 -1
- package/_internal/components/{tooltip-84ffb4f9.js → tooltip-2885ab2e.js} +44 -35
- package/_internal/components/{tooltip-84ffb4f9.js.map → tooltip-2885ab2e.js.map} +1 -1
- package/_internal/components/{uploader-896a1d89.js → uploader-1e7f5bbb.js} +35 -32
- package/_internal/components/{uploader-896a1d89.js.map → uploader-1e7f5bbb.js.map} +1 -1
- package/_internal/components/{user-block-8fd15895.js → user-block-68a51ed0.js} +43 -41
- package/_internal/components/{user-block-8fd15895.js.map → user-block-68a51ed0.js.map} +1 -1
- package/_internal/{context-21aeb1c7.js → context-9d1336a1.js} +6 -6
- package/_internal/{context-21aeb1c7.js.map → context-9d1336a1.js.map} +1 -1
- package/_internal/{forwardRef-49d2bb84.js → forwardRef-15f62847.js} +2 -12
- package/_internal/{forwardRef-49d2bb84.js.map → forwardRef-15f62847.js.map} +1 -1
- package/_internal/{index-f415b08e.js → index-9df37c0d.js} +45 -39
- package/_internal/{index-f415b08e.js.map → index-9df37c0d.js.map} +1 -1
- package/_internal/{index-b4d256e7.js → index-a9c5cd69.js} +10 -11
- package/_internal/{index-b4d256e7.js.map → index-a9c5cd69.js.map} +1 -1
- package/_internal/{useDisableStateProps-fffc365f.js → useDisableStateProps-69e16b7c.js} +2 -2
- package/_internal/{useDisableStateProps-fffc365f.js.map → useDisableStateProps-69e16b7c.js.map} +1 -1
- package/_internal/{wrapChildrenIconWithSpaces-f86106ce.js → wrapChildrenIconWithSpaces-c1faaae4.js} +2 -2
- package/_internal/{wrapChildrenIconWithSpaces-f86106ce.js.map → wrapChildrenIconWithSpaces-c1faaae4.js.map} +1 -1
- package/index.js +61 -61
- package/package.json +4 -3
- package/utils/index.js +3 -3
- package/_internal/ImageCaption-4279b2b6.js +0 -65
- package/_internal/components/comment-block-b84c4694.js +0 -121
- package/_internal/components/date-picker-a425534c.js +0 -2
- package/_internal/components/date-picker-a425534c.js.map +0 -1
- package/_internal/components/link-preview-7a4a6e4b.js +0 -108
- package/_internal/components/navigation-4fd3917d.js +0 -210
- package/_internal/components/popover-3c4c54bd.js +0 -3
- package/_internal/components/popover-3c4c54bd.js.map +0 -1
- package/_internal/components/post-block-0cfc2206.js +0 -99
- package/_internal/components/select-d46cfe35.js +0 -404
- package/_internal/components/text-289c0526.js +0 -2
- package/_internal/components/text-289c0526.js.map +0 -1
|
@@ -1,10 +1,7 @@
|
|
|
1
|
-
import { f as forwardRef, _ as _extends, c as classNames } from '../forwardRef-49d2bb84.js';
|
|
2
1
|
import { Children, isValidElement } from 'react';
|
|
2
|
+
import { f as forwardRef, c as classNames } from '../forwardRef-15f62847.js';
|
|
3
3
|
import { getRootClassName, getTypographyClassName, fontColorClass } from '@lumx/core/js/utils/className';
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* Defines the props of the component.
|
|
7
|
-
*/
|
|
4
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
8
5
|
|
|
9
6
|
/**
|
|
10
7
|
* Component display name.
|
|
@@ -42,28 +39,31 @@ const InlineList = forwardRef((props, ref) => {
|
|
|
42
39
|
return (
|
|
43
40
|
/*#__PURE__*/
|
|
44
41
|
// eslint-disable-next-line jsx-a11y/no-redundant-roles
|
|
45
|
-
|
|
42
|
+
jsx("ul", {
|
|
43
|
+
...forwardedProps,
|
|
46
44
|
ref: ref,
|
|
47
45
|
className: classNames(className, CLASSNAME, wrap && `${CLASSNAME}--wrap`, fontColorClass(color, colorVariant), typographyClassName)
|
|
48
46
|
// Lists with removed bullet style can lose their a11y list role on some browsers
|
|
49
47
|
,
|
|
50
|
-
role: "list"
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
48
|
+
role: "list",
|
|
49
|
+
children: Children.toArray(children).map((child, index) => {
|
|
50
|
+
const key = /*#__PURE__*/isValidElement(child) && child.key || index;
|
|
51
|
+
return (
|
|
52
|
+
/*#__PURE__*/
|
|
53
|
+
// We need to item is set as display: contents which removes the semantic.
|
|
54
|
+
// eslint-disable-next-line jsx-a11y/no-redundant-roles
|
|
55
|
+
jsxs("li", {
|
|
56
|
+
role: "listitem",
|
|
57
|
+
className: `${CLASSNAME}__item`,
|
|
58
|
+
children: [index !== 0 && /*#__PURE__*/jsx("span", {
|
|
59
|
+
className: `${CLASSNAME}__item-separator`,
|
|
60
|
+
"aria-hidden": "true",
|
|
61
|
+
children: '\u00A0•\u00A0'
|
|
62
|
+
}), child]
|
|
63
|
+
}, key)
|
|
64
|
+
);
|
|
65
|
+
})
|
|
66
|
+
})
|
|
67
67
|
);
|
|
68
68
|
});
|
|
69
69
|
InlineList.displayName = COMPONENT_NAME;
|
|
@@ -71,4 +71,4 @@ InlineList.className = CLASSNAME;
|
|
|
71
71
|
InlineList.defaultProps = DEFAULT_PROPS;
|
|
72
72
|
|
|
73
73
|
export { InlineList };
|
|
74
|
-
//# sourceMappingURL=inline-list-
|
|
74
|
+
//# sourceMappingURL=inline-list-e6f19a98.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"inline-list-
|
|
1
|
+
{"version":3,"file":"inline-list-e6f19a98.js","sources":["../../../src/components/inline-list/InlineList.tsx"],"sourcesContent":["import { Children, isValidElement } from 'react';\n\nimport classNames from 'classnames';\n\nimport { ColorVariant, ColorWithVariants, Typography } from '@lumx/react';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { fontColorClass, getRootClassName, getTypographyClassName } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface InlineListProps extends GenericProps {\n /**\n * Text color.\n */\n color?: ColorWithVariants;\n /**\n * Lightened or darkened variant of the selected color.\n */\n colorVariant?: ColorVariant;\n /**\n * Typography variant.\n */\n typography?: Typography;\n /**\n * Activate line wrap on overflow.\n */\n wrap?: boolean;\n /**\n * Children\n */\n children?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'InlineList';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS = {} as const;\n\n/**\n * InlineList component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const InlineList = forwardRef<InlineListProps>((props, ref) => {\n const { className, color, colorVariant, typography, children, wrap, ...forwardedProps } = props;\n const typographyClassName = typography && getTypographyClassName(typography);\n return (\n // eslint-disable-next-line jsx-a11y/no-redundant-roles\n <ul\n {...forwardedProps}\n ref={ref as any}\n className={classNames(\n className,\n CLASSNAME,\n wrap && `${CLASSNAME}--wrap`,\n fontColorClass(color, colorVariant),\n typographyClassName,\n )}\n // Lists with removed bullet style can lose their a11y list role on some browsers\n role=\"list\"\n >\n {Children.toArray(children).map((child, index) => {\n const key = (isValidElement(child) && child.key) || index;\n return (\n // We need to item is set as display: contents which removes the semantic.\n // eslint-disable-next-line jsx-a11y/no-redundant-roles\n <li key={key} role=\"listitem\" className={`${CLASSNAME}__item`}>\n {index !== 0 && (\n <span className={`${CLASSNAME}__item-separator`} aria-hidden=\"true\">\n {'\\u00A0•\\u00A0'}\n </span>\n )}\n {child}\n </li>\n );\n })}\n </ul>\n );\n});\nInlineList.displayName = COMPONENT_NAME;\nInlineList.className = CLASSNAME;\nInlineList.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","InlineList","forwardRef","props","ref","className","color","colorVariant","typography","children","wrap","forwardedProps","typographyClassName","getTypographyClassName","_jsx","classNames","fontColorClass","role","Children","toArray","map","child","index","key","isValidElement","_jsxs","displayName","defaultProps"],"mappings":";;;;;AAmCA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,YAAY,CAAA;;AAEnC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAa,GAAG,EAAW,CAAA;;AAEjC;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,UAAU,GAAGC,UAAU,CAAkB,CAACC,KAAK,EAAEC,GAAG,KAAK;EAClE,MAAM;IAAEC,SAAS;IAAEC,KAAK;IAAEC,YAAY;IAAEC,UAAU;IAAEC,QAAQ;IAAEC,IAAI;IAAE,GAAGC,cAAAA;AAAe,GAAC,GAAGR,KAAK,CAAA;AAC/F,EAAA,MAAMS,mBAAmB,GAAGJ,UAAU,IAAIK,sBAAsB,CAACL,UAAU,CAAC,CAAA;AAC5E,EAAA;AAAA;AACI;IACAM,GAAA,CAAA,IAAA,EAAA;AAAA,MAAA,GACQH,cAAc;AAClBP,MAAAA,GAAG,EAAEA,GAAW;MAChBC,SAAS,EAAEU,UAAU,CACjBV,SAAS,EACTP,SAAS,EACTY,IAAI,IAAI,CAAA,EAAGZ,SAAS,CAAQ,MAAA,CAAA,EAC5BkB,cAAc,CAACV,KAAK,EAAEC,YAAY,CAAC,EACnCK,mBACJ,CAAA;AACA;AAAA;AACAK,MAAAA,IAAI,EAAC,MAAM;AAAAR,MAAAA,QAAA,EAEVS,QAAQ,CAACC,OAAO,CAACV,QAAQ,CAAC,CAACW,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,KAAK;AAC9C,QAAA,MAAMC,GAAG,gBAAIC,cAAc,CAACH,KAAK,CAAC,IAAIA,KAAK,CAACE,GAAG,IAAKD,KAAK,CAAA;AACzD,QAAA;AAAA;AACI;AACA;UACAG,IAAA,CAAA,IAAA,EAAA;AAAcR,YAAAA,IAAI,EAAC,UAAU;YAACZ,SAAS,EAAE,CAAGP,EAAAA,SAAS,CAAS,MAAA,CAAA;AAAAW,YAAAA,QAAA,EACzDa,CAAAA,KAAK,KAAK,CAAC,iBACRR,GAAA,CAAA,MAAA,EAAA;cAAMT,SAAS,EAAE,CAAGP,EAAAA,SAAS,CAAmB,gBAAA,CAAA;AAAC,cAAA,aAAA,EAAY,MAAM;AAAAW,cAAAA,QAAA,EAC9D,eAAA;aACC,CACT,EACAY,KAAK,CAAA;AAAA,WAAA,EANDE,GAOL,CAAA;AAAC,UAAA;OAEZ,CAAA;KACD,CAAA;AAAC,IAAA;AAEb,CAAC,EAAC;AACFtB,UAAU,CAACyB,WAAW,GAAG7B,cAAc,CAAA;AACvCI,UAAU,CAACI,SAAS,GAAGP,SAAS,CAAA;AAChCG,UAAU,CAAC0B,YAAY,GAAG3B,aAAa;;;;"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { f as forwardRef,
|
|
1
|
+
import { f as forwardRef, c as classNames } from '../forwardRef-15f62847.js';
|
|
2
2
|
import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
|
|
3
3
|
import { u as useTheme } from '../ThemeContext-3181f000.js';
|
|
4
|
+
import { jsx } from 'react/jsx-runtime';
|
|
4
5
|
import { Kind, Theme } from '@lumx/core/js/constants';
|
|
5
6
|
|
|
6
7
|
const INPUT_HELPER_CONFIGURATION = {
|
|
@@ -15,10 +16,6 @@ const INPUT_HELPER_CONFIGURATION = {
|
|
|
15
16
|
}
|
|
16
17
|
};
|
|
17
18
|
|
|
18
|
-
/**
|
|
19
|
-
* Defines the props of the component.
|
|
20
|
-
*/
|
|
21
|
-
|
|
22
19
|
/**
|
|
23
20
|
* Component display name.
|
|
24
21
|
*/
|
|
@@ -55,19 +52,20 @@ const InputHelper = forwardRef((props, ref) => {
|
|
|
55
52
|
const {
|
|
56
53
|
color
|
|
57
54
|
} = INPUT_HELPER_CONFIGURATION[kind] || {};
|
|
58
|
-
return /*#__PURE__*/
|
|
59
|
-
ref: ref
|
|
60
|
-
|
|
55
|
+
return /*#__PURE__*/jsx("p", {
|
|
56
|
+
ref: ref,
|
|
57
|
+
...forwardedProps,
|
|
61
58
|
className: classNames(className, handleBasicClasses({
|
|
62
59
|
prefix: CLASSNAME,
|
|
63
60
|
color,
|
|
64
61
|
theme
|
|
65
|
-
}))
|
|
66
|
-
|
|
62
|
+
})),
|
|
63
|
+
children: children
|
|
64
|
+
});
|
|
67
65
|
});
|
|
68
66
|
InputHelper.displayName = COMPONENT_NAME;
|
|
69
67
|
InputHelper.className = CLASSNAME;
|
|
70
68
|
InputHelper.defaultProps = DEFAULT_PROPS;
|
|
71
69
|
|
|
72
70
|
export { InputHelper };
|
|
73
|
-
//# sourceMappingURL=input-helper-
|
|
71
|
+
//# sourceMappingURL=input-helper-64153099.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-helper-
|
|
1
|
+
{"version":3,"file":"input-helper-64153099.js","sources":["../../../src/components/input-helper/constants.ts","../../../src/components/input-helper/InputHelper.tsx"],"sourcesContent":["export const INPUT_HELPER_CONFIGURATION: Record<string, { color: string }> = {\n error: {\n color: 'red',\n },\n success: {\n color: 'green',\n },\n warning: {\n color: 'yellow',\n },\n};\n","import { ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Kind, Theme } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { INPUT_HELPER_CONFIGURATION } from './constants';\n\n/**\n * Defines the props of the component.\n */\nexport interface InputHelperProps extends GenericProps, HasTheme {\n /** Helper content. */\n children: string | ReactNode;\n /** Helper variant. */\n kind?: Kind;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'InputHelper';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<InputHelperProps> = {\n kind: Kind.info,\n};\n\n/**\n * InputHelper component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const InputHelper = forwardRef<InputHelperProps, HTMLParagraphElement>((props, ref) => {\n const defaultTheme = useTheme() || Theme.light;\n const { children, className, kind = DEFAULT_PROPS.kind, theme = defaultTheme, ...forwardedProps } = props;\n const { color } = INPUT_HELPER_CONFIGURATION[kind as any] || {};\n\n return (\n <p\n ref={ref}\n {...forwardedProps}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color, theme }))}\n >\n {children}\n </p>\n );\n});\n\nInputHelper.displayName = COMPONENT_NAME;\nInputHelper.className = CLASSNAME;\nInputHelper.defaultProps = DEFAULT_PROPS;\n"],"names":["INPUT_HELPER_CONFIGURATION","error","color","success","warning","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","kind","Kind","info","InputHelper","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","children","className","theme","forwardedProps","_jsx","classNames","handleBasicClasses","prefix","displayName","defaultProps"],"mappings":";;;;;;AAAO,MAAMA,0BAA6D,GAAG;AACzEC,EAAAA,KAAK,EAAE;AACHC,IAAAA,KAAK,EAAE,KAAA;GACV;AACDC,EAAAA,OAAO,EAAE;AACLD,IAAAA,KAAK,EAAE,OAAA;GACV;AACDE,EAAAA,OAAO,EAAE;AACLF,IAAAA,KAAK,EAAE,QAAA;AACX,GAAA;AACJ,CAAC;;ACYD;AACA;AACA;AACA,MAAMG,cAAc,GAAG,aAAa,CAAA;;AAEpC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAwC,GAAG;EAC7CC,IAAI,EAAEC,IAAI,CAACC,IAAAA;AACf,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,WAAW,GAAGC,UAAU,CAAyC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC1F,MAAMC,YAAY,GAAGC,QAAQ,EAAE,IAAIC,KAAK,CAACC,KAAK,CAAA;EAC9C,MAAM;IAAEC,QAAQ;IAAEC,SAAS;IAAEZ,IAAI,GAAGD,aAAa,CAACC,IAAI;AAAEa,IAAAA,KAAK,GAAGN,YAAY;IAAE,GAAGO,cAAAA;AAAe,GAAC,GAAGT,KAAK,CAAA;EACzG,MAAM;AAAEZ,IAAAA,KAAAA;AAAM,GAAC,GAAGF,0BAA0B,CAACS,IAAI,CAAQ,IAAI,EAAE,CAAA;AAE/D,EAAA,oBACIe,GAAA,CAAA,GAAA,EAAA;AACIT,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GACLQ,cAAc;AAClBF,IAAAA,SAAS,EAAEI,UAAU,CAACJ,SAAS,EAAEK,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAErB,SAAS;MAAEJ,KAAK;AAAEoB,MAAAA,KAAAA;AAAM,KAAC,CAAC,CAAE;AAAAF,IAAAA,QAAA,EAEzFA,QAAAA;AAAQ,GACV,CAAC,CAAA;AAEZ,CAAC,EAAC;AAEFR,WAAW,CAACgB,WAAW,GAAGvB,cAAc,CAAA;AACxCO,WAAW,CAACS,SAAS,GAAGf,SAAS,CAAA;AACjCM,WAAW,CAACiB,YAAY,GAAGrB,aAAa;;;;"}
|
|
@@ -1,12 +1,9 @@
|
|
|
1
|
-
import { f as forwardRef,
|
|
1
|
+
import { f as forwardRef, c as classNames } from '../forwardRef-15f62847.js';
|
|
2
2
|
import { getRootClassName, getTypographyClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
|
|
3
3
|
import { u as useTheme } from '../ThemeContext-3181f000.js';
|
|
4
|
+
import { jsx } from 'react/jsx-runtime';
|
|
4
5
|
import { Theme } from '@lumx/core/js/constants';
|
|
5
6
|
|
|
6
|
-
/**
|
|
7
|
-
* Defines the props of the component.
|
|
8
|
-
*/
|
|
9
|
-
|
|
10
7
|
/**
|
|
11
8
|
* Component display name.
|
|
12
9
|
*/
|
|
@@ -41,21 +38,22 @@ const InputLabel = forwardRef((props, ref) => {
|
|
|
41
38
|
...forwardedProps
|
|
42
39
|
} = props;
|
|
43
40
|
const typographyClass = typography && getTypographyClassName(typography);
|
|
44
|
-
return /*#__PURE__*/
|
|
45
|
-
ref: ref
|
|
46
|
-
|
|
41
|
+
return /*#__PURE__*/jsx("label", {
|
|
42
|
+
ref: ref,
|
|
43
|
+
...forwardedProps,
|
|
47
44
|
htmlFor: htmlFor,
|
|
48
45
|
className: classNames(className, handleBasicClasses({
|
|
49
46
|
prefix: CLASSNAME,
|
|
50
47
|
isRequired,
|
|
51
48
|
theme,
|
|
52
49
|
hasCustomTypography: Boolean(typography)
|
|
53
|
-
}), typographyClass)
|
|
54
|
-
|
|
50
|
+
}), typographyClass),
|
|
51
|
+
children: children
|
|
52
|
+
});
|
|
55
53
|
});
|
|
56
54
|
InputLabel.displayName = COMPONENT_NAME;
|
|
57
55
|
InputLabel.className = CLASSNAME;
|
|
58
56
|
InputLabel.defaultProps = DEFAULT_PROPS;
|
|
59
57
|
|
|
60
58
|
export { InputLabel };
|
|
61
|
-
//# sourceMappingURL=input-label-
|
|
59
|
+
//# sourceMappingURL=input-label-2feb0bb0.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-label-
|
|
1
|
+
{"version":3,"file":"input-label-2feb0bb0.js","sources":["../../../src/components/input-label/InputLabel.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Theme, Typography } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses, getTypographyClassName } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\n\n/**\n * Defines the props of the component.\n */\nexport interface InputLabelProps extends GenericProps, HasTheme {\n /** Typography variant. */\n typography?: Typography;\n /** Label content. */\n children: string | ReactNode;\n /** Native htmlFor property. */\n htmlFor: string;\n /** Whether the component is required or not. */\n isRequired?: boolean;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'InputLabel';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<InputLabelProps> = {};\n\n/**\n * InputLabel component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const InputLabel = forwardRef<InputLabelProps, HTMLLabelElement>((props, ref) => {\n const defaultTheme = useTheme() || Theme.light;\n const { children, className, htmlFor, isRequired, theme = defaultTheme, typography, ...forwardedProps } = props;\n const typographyClass = typography && getTypographyClassName(typography);\n\n return (\n <label\n ref={ref}\n {...forwardedProps}\n htmlFor={htmlFor}\n className={classNames(\n className,\n handleBasicClasses({ prefix: CLASSNAME, isRequired, theme, hasCustomTypography: Boolean(typography) }),\n typographyClass,\n )}\n >\n {children}\n </label>\n );\n});\nInputLabel.displayName = COMPONENT_NAME;\nInputLabel.className = CLASSNAME;\nInputLabel.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","InputLabel","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","children","className","htmlFor","isRequired","theme","typography","forwardedProps","typographyClass","getTypographyClassName","_jsx","classNames","handleBasicClasses","prefix","hasCustomTypography","Boolean","displayName","defaultProps"],"mappings":";;;;;;AAwBA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,YAAY,CAAA;;AAEnC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAuC,GAAG,EAAE,CAAA;;AAElD;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,UAAU,GAAGC,UAAU,CAAoC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACpF,MAAMC,YAAY,GAAGC,QAAQ,EAAE,IAAIC,KAAK,CAACC,KAAK,CAAA;EAC9C,MAAM;IAAEC,QAAQ;IAAEC,SAAS;IAAEC,OAAO;IAAEC,UAAU;AAAEC,IAAAA,KAAK,GAAGR,YAAY;IAAES,UAAU;IAAE,GAAGC,cAAAA;AAAe,GAAC,GAAGZ,KAAK,CAAA;AAC/G,EAAA,MAAMa,eAAe,GAAGF,UAAU,IAAIG,sBAAsB,CAACH,UAAU,CAAC,CAAA;AAExE,EAAA,oBACII,GAAA,CAAA,OAAA,EAAA;AACId,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GACLW,cAAc;AAClBJ,IAAAA,OAAO,EAAEA,OAAQ;AACjBD,IAAAA,SAAS,EAAES,UAAU,CACjBT,SAAS,EACTU,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEvB,SAAS;MAAEc,UAAU;MAAEC,KAAK;MAAES,mBAAmB,EAAEC,OAAO,CAACT,UAAU,CAAA;KAAG,CAAC,EACtGE,eACJ,CAAE;AAAAP,IAAAA,QAAA,EAEDA,QAAAA;AAAQ,GACN,CAAC,CAAA;AAEhB,CAAC,EAAC;AACFR,UAAU,CAACuB,WAAW,GAAG3B,cAAc,CAAA;AACvCI,UAAU,CAACS,SAAS,GAAGZ,SAAS,CAAA;AAChCG,UAAU,CAACwB,YAAY,GAAGzB,aAAa;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { f as forwardRef, _ as _extends, c as classNames } from '../forwardRef-49d2bb84.js';
|
|
2
1
|
import { useRef, useEffect } from 'react';
|
|
2
|
+
import { f as forwardRef, c as classNames } from '../forwardRef-15f62847.js';
|
|
3
3
|
import { mdiClose } from '@lumx/icons';
|
|
4
4
|
import { D as DOCUMENT } from '../constants-d0e3f49e.js';
|
|
5
5
|
import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
|
|
@@ -9,16 +9,13 @@ import { m as mergeRefs } from '../mergeRefs-f0d7d6ea.js';
|
|
|
9
9
|
import { u as useCallbackOnEscape } from '../useCallbackOnEscape-ea4d9eb4.js';
|
|
10
10
|
import { u as useTransitionVisibility } from '../useTransitionVisibility-321fdbfa.js';
|
|
11
11
|
import { T as ThemeProvider } from '../ThemeContext-3181f000.js';
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
12
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
13
|
+
import { P as Portal } from '../Portal-3f86608e.js';
|
|
14
|
+
import { I as IconButton } from '../IconButton-f4df224c.js';
|
|
15
|
+
import { H as HeadingLevelProvider } from '../HeadingLevelProvider-ebdcb0c7.js';
|
|
16
|
+
import { C as ClickAwayProvider } from '../ClickAwayProvider-7093ba23.js';
|
|
16
17
|
import { DIALOG_TRANSITION_DURATION } from '@lumx/core/js/constants';
|
|
17
18
|
|
|
18
|
-
/**
|
|
19
|
-
* Defines the props of the component.
|
|
20
|
-
*/
|
|
21
|
-
|
|
22
19
|
/**
|
|
23
20
|
* Component display name.
|
|
24
21
|
*/
|
|
@@ -102,48 +99,57 @@ const Lightbox = forwardRef((props, ref) => {
|
|
|
102
99
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
103
100
|
const clickAwayRefs = useRef([wrapperRef]);
|
|
104
101
|
if (!isOpen && !isVisible) return null;
|
|
105
|
-
return /*#__PURE__*/
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
102
|
+
return /*#__PURE__*/jsx(Portal, {
|
|
103
|
+
children: /*#__PURE__*/jsxs("div", {
|
|
104
|
+
ref: mergeRefs(ref, wrapperRef),
|
|
105
|
+
...forwardedProps,
|
|
106
|
+
"aria-label": ariaLabel,
|
|
107
|
+
"aria-labelledby": ariaLabelledBy,
|
|
108
|
+
"aria-modal": "true",
|
|
109
|
+
role: "dialog",
|
|
110
|
+
tabIndex: -1,
|
|
111
|
+
className: classNames(className, handleBasicClasses({
|
|
112
|
+
prefix: CLASSNAME,
|
|
113
|
+
isHidden: !isOpen,
|
|
114
|
+
isShown: isOpen || isVisible,
|
|
115
|
+
theme
|
|
116
|
+
})),
|
|
117
|
+
style: {
|
|
118
|
+
zIndex
|
|
119
|
+
},
|
|
120
|
+
children: [closeButtonProps && /*#__PURE__*/jsx("div", {
|
|
121
|
+
className: `${CLASSNAME}__close`,
|
|
122
|
+
children: /*#__PURE__*/jsx(IconButton, {
|
|
123
|
+
...closeButtonProps,
|
|
124
|
+
ref: closeButtonRef,
|
|
125
|
+
emphasis: "low",
|
|
126
|
+
hasBackground: true,
|
|
127
|
+
icon: mdiClose,
|
|
128
|
+
theme: "dark",
|
|
129
|
+
type: "button",
|
|
130
|
+
onClick: onClose
|
|
131
|
+
})
|
|
132
|
+
}), /*#__PURE__*/jsx(HeadingLevelProvider, {
|
|
133
|
+
level: 2,
|
|
134
|
+
children: /*#__PURE__*/jsx(ThemeProvider, {
|
|
135
|
+
value: undefined,
|
|
136
|
+
children: /*#__PURE__*/jsx(ClickAwayProvider, {
|
|
137
|
+
callback: !preventAutoClose && onClose,
|
|
138
|
+
childrenRefs: clickAwayRefs,
|
|
139
|
+
children: /*#__PURE__*/jsx("div", {
|
|
140
|
+
ref: childrenRef,
|
|
141
|
+
className: `${CLASSNAME}__wrapper`,
|
|
142
|
+
role: "presentation",
|
|
143
|
+
children: children
|
|
144
|
+
})
|
|
145
|
+
})
|
|
146
|
+
})
|
|
147
|
+
})]
|
|
148
|
+
})
|
|
149
|
+
});
|
|
144
150
|
});
|
|
145
151
|
Lightbox.displayName = COMPONENT_NAME;
|
|
146
152
|
Lightbox.className = CLASSNAME;
|
|
147
153
|
|
|
148
154
|
export { Lightbox };
|
|
149
|
-
//# sourceMappingURL=lightbox-
|
|
155
|
+
//# sourceMappingURL=lightbox-570ad9e5.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lightbox-bec1b95f.js","sources":["../../../src/components/lightbox/Lightbox.tsx"],"sourcesContent":["import { RefObject, useRef, useEffect, AriaAttributes } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiClose } from '@lumx/icons';\nimport { HeadingLevelProvider, IconButton, IconButtonProps } from '@lumx/react';\nimport { DIALOG_TRANSITION_DURATION, DOCUMENT } from '@lumx/react/constants';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\n\nimport { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';\nimport { useDisableBodyScroll } from '@lumx/react/hooks/useDisableBodyScroll';\nimport { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';\nimport { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';\nimport { ThemeProvider } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { Portal } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface LightboxProps extends GenericProps, HasTheme, Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'> {\n /** Props to pass to the close button (minus those already set by the Lightbox props). */\n closeButtonProps?: Pick<IconButtonProps, 'label'> &\n Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;\n /** Whether the component is open or not. */\n isOpen?: boolean;\n /** Reference to the element that triggered modal opening to set focus on. */\n parentElement: RefObject<any>;\n /** Reference to the element that should get the focus when the lightbox opens. By default, the close button or the lightbox itself will take focus. */\n focusElement?: RefObject<HTMLElement>;\n /** Whether to keep the dialog open on clickaway or escape press. */\n preventAutoClose?: boolean;\n /** Z-axis position. */\n zIndex?: number;\n /** On close callback. */\n onClose?(): void;\n /** Children */\n children?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Lightbox';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Lightbox component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Lightbox = forwardRef<LightboxProps, HTMLDivElement>((props, ref) => {\n const {\n 'aria-labelledby': propAriaLabelledBy,\n ariaLabelledBy = propAriaLabelledBy,\n 'aria-label': propAriaLabel,\n ariaLabel = propAriaLabel,\n children,\n className,\n closeButtonProps,\n isOpen,\n onClose,\n parentElement,\n focusElement,\n preventAutoClose,\n theme,\n zIndex,\n ...forwardedProps\n } = props;\n if (!DOCUMENT) {\n // Can't render in SSR.\n return null;\n }\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const childrenRef = useRef<any>(null);\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const wrapperRef = useRef<HTMLDivElement>(null);\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const closeButtonRef = useRef<HTMLButtonElement>(null);\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useDisableBodyScroll(isOpen && wrapperRef.current);\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const isVisible = useTransitionVisibility(wrapperRef, !!isOpen, DIALOG_TRANSITION_DURATION);\n\n // Handle focus trap.\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useFocusTrap(\n // Focus trap zone\n isOpen && wrapperRef.current,\n // Focus element (fallback on close button and then on the dialog)\n focusElement?.current || closeButtonRef.current || wrapperRef.current,\n );\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const previousOpen = useRef(isOpen);\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useEffect(() => {\n if (isOpen !== previousOpen.current) {\n previousOpen.current = isOpen;\n\n // Focus the parent element on close.\n if (!isOpen && parentElement && parentElement.current) {\n parentElement.current.focus();\n }\n }\n }, [isOpen, parentElement]);\n\n // Close lightbox on escape key pressed.\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useCallbackOnEscape(onClose);\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const clickAwayRefs = useRef([wrapperRef]);\n\n if (!isOpen && !isVisible) return null;\n\n return (\n <Portal>\n <div\n ref={mergeRefs(ref, wrapperRef)}\n {...forwardedProps}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-modal=\"true\"\n role=\"dialog\"\n tabIndex={-1}\n className={classNames(\n className,\n handleBasicClasses({\n prefix: CLASSNAME,\n isHidden: !isOpen,\n isShown: isOpen || isVisible,\n theme,\n }),\n )}\n style={{ zIndex }}\n >\n {closeButtonProps && (\n <div className={`${CLASSNAME}__close`}>\n <IconButton\n {...closeButtonProps}\n ref={closeButtonRef}\n emphasis=\"low\"\n hasBackground\n icon={mdiClose}\n theme=\"dark\"\n type=\"button\"\n onClick={onClose}\n />\n </div>\n )}\n <HeadingLevelProvider level={2}>\n <ThemeProvider value={undefined}>\n <ClickAwayProvider callback={!preventAutoClose && onClose} childrenRefs={clickAwayRefs}>\n <div ref={childrenRef} className={`${CLASSNAME}__wrapper`} role=\"presentation\">\n {children}\n </div>\n </ClickAwayProvider>\n </ThemeProvider>\n </HeadingLevelProvider>\n </div>\n </Portal>\n );\n});\nLightbox.displayName = COMPONENT_NAME;\nLightbox.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","Lightbox","forwardRef","props","ref","propAriaLabelledBy","ariaLabelledBy","propAriaLabel","ariaLabel","children","className","closeButtonProps","isOpen","onClose","parentElement","focusElement","preventAutoClose","theme","zIndex","forwardedProps","DOCUMENT","childrenRef","useRef","wrapperRef","closeButtonRef","useDisableBodyScroll","current","isVisible","useTransitionVisibility","DIALOG_TRANSITION_DURATION","useFocusTrap","previousOpen","useEffect","focus","useCallbackOnEscape","clickAwayRefs","React","createElement","Portal","_extends","mergeRefs","role","tabIndex","classNames","handleBasicClasses","prefix","isHidden","isShown","style","IconButton","emphasis","hasBackground","icon","mdiClose","type","onClick","HeadingLevelProvider","level","ThemeProvider","value","undefined","ClickAwayProvider","callback","childrenRefs","displayName"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"lightbox-570ad9e5.js","sources":["../../../src/components/lightbox/Lightbox.tsx"],"sourcesContent":["import { RefObject, useRef, useEffect, AriaAttributes } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiClose } from '@lumx/icons';\nimport { HeadingLevelProvider, IconButton, IconButtonProps } from '@lumx/react';\nimport { DIALOG_TRANSITION_DURATION, DOCUMENT } from '@lumx/react/constants';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\n\nimport { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';\nimport { useDisableBodyScroll } from '@lumx/react/hooks/useDisableBodyScroll';\nimport { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';\nimport { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';\nimport { ThemeProvider } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { Portal } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface LightboxProps extends GenericProps, HasTheme, Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'> {\n /** Props to pass to the close button (minus those already set by the Lightbox props). */\n closeButtonProps?: Pick<IconButtonProps, 'label'> &\n Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;\n /** Whether the component is open or not. */\n isOpen?: boolean;\n /** Reference to the element that triggered modal opening to set focus on. */\n parentElement: RefObject<any>;\n /** Reference to the element that should get the focus when the lightbox opens. By default, the close button or the lightbox itself will take focus. */\n focusElement?: RefObject<HTMLElement>;\n /** Whether to keep the dialog open on clickaway or escape press. */\n preventAutoClose?: boolean;\n /** Z-axis position. */\n zIndex?: number;\n /** On close callback. */\n onClose?(): void;\n /** Children */\n children?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Lightbox';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Lightbox component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Lightbox = forwardRef<LightboxProps, HTMLDivElement>((props, ref) => {\n const {\n 'aria-labelledby': propAriaLabelledBy,\n ariaLabelledBy = propAriaLabelledBy,\n 'aria-label': propAriaLabel,\n ariaLabel = propAriaLabel,\n children,\n className,\n closeButtonProps,\n isOpen,\n onClose,\n parentElement,\n focusElement,\n preventAutoClose,\n theme,\n zIndex,\n ...forwardedProps\n } = props;\n if (!DOCUMENT) {\n // Can't render in SSR.\n return null;\n }\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const childrenRef = useRef<any>(null);\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const wrapperRef = useRef<HTMLDivElement>(null);\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const closeButtonRef = useRef<HTMLButtonElement>(null);\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useDisableBodyScroll(isOpen && wrapperRef.current);\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const isVisible = useTransitionVisibility(wrapperRef, !!isOpen, DIALOG_TRANSITION_DURATION);\n\n // Handle focus trap.\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useFocusTrap(\n // Focus trap zone\n isOpen && wrapperRef.current,\n // Focus element (fallback on close button and then on the dialog)\n focusElement?.current || closeButtonRef.current || wrapperRef.current,\n );\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const previousOpen = useRef(isOpen);\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useEffect(() => {\n if (isOpen !== previousOpen.current) {\n previousOpen.current = isOpen;\n\n // Focus the parent element on close.\n if (!isOpen && parentElement && parentElement.current) {\n parentElement.current.focus();\n }\n }\n }, [isOpen, parentElement]);\n\n // Close lightbox on escape key pressed.\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useCallbackOnEscape(onClose);\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const clickAwayRefs = useRef([wrapperRef]);\n\n if (!isOpen && !isVisible) return null;\n\n return (\n <Portal>\n <div\n ref={mergeRefs(ref, wrapperRef)}\n {...forwardedProps}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-modal=\"true\"\n role=\"dialog\"\n tabIndex={-1}\n className={classNames(\n className,\n handleBasicClasses({\n prefix: CLASSNAME,\n isHidden: !isOpen,\n isShown: isOpen || isVisible,\n theme,\n }),\n )}\n style={{ zIndex }}\n >\n {closeButtonProps && (\n <div className={`${CLASSNAME}__close`}>\n <IconButton\n {...closeButtonProps}\n ref={closeButtonRef}\n emphasis=\"low\"\n hasBackground\n icon={mdiClose}\n theme=\"dark\"\n type=\"button\"\n onClick={onClose}\n />\n </div>\n )}\n <HeadingLevelProvider level={2}>\n <ThemeProvider value={undefined}>\n <ClickAwayProvider callback={!preventAutoClose && onClose} childrenRefs={clickAwayRefs}>\n <div ref={childrenRef} className={`${CLASSNAME}__wrapper`} role=\"presentation\">\n {children}\n </div>\n </ClickAwayProvider>\n </ThemeProvider>\n </HeadingLevelProvider>\n </div>\n </Portal>\n );\n});\nLightbox.displayName = COMPONENT_NAME;\nLightbox.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","Lightbox","forwardRef","props","ref","propAriaLabelledBy","ariaLabelledBy","propAriaLabel","ariaLabel","children","className","closeButtonProps","isOpen","onClose","parentElement","focusElement","preventAutoClose","theme","zIndex","forwardedProps","DOCUMENT","childrenRef","useRef","wrapperRef","closeButtonRef","useDisableBodyScroll","current","isVisible","useTransitionVisibility","DIALOG_TRANSITION_DURATION","useFocusTrap","previousOpen","useEffect","focus","useCallbackOnEscape","clickAwayRefs","_jsx","Portal","_jsxs","mergeRefs","role","tabIndex","classNames","handleBasicClasses","prefix","isHidden","isShown","style","IconButton","emphasis","hasBackground","icon","mdiClose","type","onClick","HeadingLevelProvider","level","ThemeProvider","value","undefined","ClickAwayProvider","callback","childrenRefs","displayName"],"mappings":"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"}
|
|
@@ -1,13 +1,10 @@
|
|
|
1
|
-
import { f as forwardRef,
|
|
1
|
+
import { f as forwardRef, c as classNames } from '../forwardRef-15f62847.js';
|
|
2
2
|
import { getRootClassName, resolveColorWithVariants, handleBasicClasses, getTypographyClassName } from '@lumx/core/js/utils/className';
|
|
3
|
-
import { w as wrapChildrenIconWithSpaces } from '../wrapChildrenIconWithSpaces-
|
|
4
|
-
import { R as RawClickable } from '../RawClickable-
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
|
|
8
|
-
/**
|
|
9
|
-
* Defines the props of the component.
|
|
10
|
-
*/
|
|
3
|
+
import { w as wrapChildrenIconWithSpaces } from '../wrapChildrenIconWithSpaces-c1faaae4.js';
|
|
4
|
+
import { R as RawClickable } from '../RawClickable-2c2b6a89.js';
|
|
5
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
6
|
+
import { u as useDisableStateProps } from '../useDisableStateProps-69e16b7c.js';
|
|
7
|
+
import { Icon } from './icon-b708cca4.js';
|
|
11
8
|
|
|
12
9
|
/**
|
|
13
10
|
* Component display name.
|
|
@@ -43,28 +40,33 @@ const Link = forwardRef((props, ref) => {
|
|
|
43
40
|
...forwardedProps
|
|
44
41
|
} = otherProps;
|
|
45
42
|
const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
|
|
46
|
-
return /*#__PURE__*/
|
|
43
|
+
return /*#__PURE__*/jsx(RawClickable, {
|
|
47
44
|
ref: ref,
|
|
48
|
-
as: linkAs || (forwardedProps.href ? 'a' : 'button')
|
|
49
|
-
|
|
45
|
+
as: linkAs || (forwardedProps.href ? 'a' : 'button'),
|
|
46
|
+
...forwardedProps,
|
|
47
|
+
...disabledStateProps,
|
|
50
48
|
className: classNames(className, handleBasicClasses({
|
|
51
49
|
prefix: CLASSNAME,
|
|
52
50
|
color,
|
|
53
51
|
colorVariant,
|
|
54
52
|
hasTypography: !!typography
|
|
55
|
-
}), typography && getTypographyClassName(typography))
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
53
|
+
}), typography && getTypographyClassName(typography)),
|
|
54
|
+
children: wrapChildrenIconWithSpaces(/*#__PURE__*/jsxs(Fragment, {
|
|
55
|
+
children: [leftIcon && /*#__PURE__*/jsx(Icon, {
|
|
56
|
+
icon: leftIcon,
|
|
57
|
+
className: `${CLASSNAME}__left-icon`
|
|
58
|
+
}), children && /*#__PURE__*/jsx("span", {
|
|
59
|
+
className: `${CLASSNAME}__content`,
|
|
60
|
+
children: children
|
|
61
|
+
}), rightIcon && /*#__PURE__*/jsx(Icon, {
|
|
62
|
+
icon: rightIcon,
|
|
63
|
+
className: `${CLASSNAME}__right-icon`
|
|
64
|
+
})]
|
|
65
|
+
}))
|
|
66
|
+
});
|
|
65
67
|
});
|
|
66
68
|
Link.displayName = COMPONENT_NAME;
|
|
67
69
|
Link.className = CLASSNAME;
|
|
68
70
|
|
|
69
71
|
export { Link };
|
|
70
|
-
//# sourceMappingURL=link-
|
|
72
|
+
//# sourceMappingURL=link-91f76477.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"link-
|
|
1
|
+
{"version":3,"file":"link-91f76477.js","sources":["../../../src/components/link/Link.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { ColorVariant, ColorWithVariants, Icon, Typography } from '@lumx/react';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport {\n getRootClassName,\n getTypographyClassName,\n handleBasicClasses,\n resolveColorWithVariants,\n} from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { wrapChildrenIconWithSpaces } from '@lumx/react/utils/react/wrapChildrenIconWithSpaces';\nimport { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';\nimport { RawClickable } from '@lumx/react/utils/react/RawClickable';\nimport { useDisableStateProps } from '@lumx/react/utils/disabled';\n\ntype HTMLAnchorProps = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n\n/**\n * Defines the props of the component.\n */\nexport interface LinkProps extends GenericProps, HasAriaDisabled {\n /** Color variant. */\n color?: ColorWithVariants;\n /** Lightened or darkened variant of the selected icon color. */\n colorVariant?: ColorVariant;\n /** Link href. */\n href?: HTMLAnchorProps['href'];\n /** Whether the component is disabled or not. */\n isDisabled?: boolean;\n /**\n * Left icon (SVG path).\n * @deprecated Instead, simply nest `<Icon />` in the children\n */\n leftIcon?: string;\n /** Custom react component for the link (can be used to inject react router Link). */\n linkAs?: 'a' | any;\n /**\n * Right icon (SVG path).\n * @deprecated Instead, simply nest `<Icon />` in the children\n */\n rightIcon?: string;\n /** Link target. */\n target?: HTMLAnchorProps['target'];\n /** Typography variant. */\n typography?: Typography;\n /** Children */\n children?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Link';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Link component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Link = forwardRef<LinkProps, HTMLAnchorElement | HTMLButtonElement>((props, ref) => {\n const { disabledStateProps, otherProps } = useDisableStateProps(props);\n const {\n children,\n className,\n color: propColor,\n colorVariant: propColorVariant,\n leftIcon,\n rightIcon,\n typography,\n linkAs,\n ...forwardedProps\n } = otherProps;\n const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);\n\n return (\n <RawClickable\n ref={ref as any}\n as={linkAs || (forwardedProps.href ? 'a' : 'button')}\n {...forwardedProps}\n {...disabledStateProps}\n className={classNames(\n className,\n handleBasicClasses({ prefix: CLASSNAME, color, colorVariant, hasTypography: !!typography }),\n typography && getTypographyClassName(typography),\n )}\n >\n {wrapChildrenIconWithSpaces(\n <>\n {leftIcon && <Icon icon={leftIcon} className={`${CLASSNAME}__left-icon`} />}\n {children && <span className={`${CLASSNAME}__content`}>{children}</span>}\n {rightIcon && <Icon icon={rightIcon} className={`${CLASSNAME}__right-icon`} />}\n </>,\n )}\n </RawClickable>\n );\n});\nLink.displayName = COMPONENT_NAME;\nLink.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","Link","forwardRef","props","ref","disabledStateProps","otherProps","useDisableStateProps","children","className","color","propColor","colorVariant","propColorVariant","leftIcon","rightIcon","typography","linkAs","forwardedProps","resolveColorWithVariants","_jsx","RawClickable","as","href","classNames","handleBasicClasses","prefix","hasTypography","getTypographyClassName","wrapChildrenIconWithSpaces","_jsxs","_Fragment","Icon","icon","displayName"],"mappings":";;;;;;;;AAkDA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,MAAM,CAAA;;AAE7B;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMG,IAAI,GAAGC,UAAU,CAAmD,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC7F,MAAM;IAAEC,kBAAkB;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAGC,oBAAoB,CAACJ,KAAK,CAAC,CAAA;EACtE,MAAM;IACFK,QAAQ;IACRC,SAAS;AACTC,IAAAA,KAAK,EAAEC,SAAS;AAChBC,IAAAA,YAAY,EAAEC,gBAAgB;IAC9BC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,MAAM;IACN,GAAGC,cAAAA;AACP,GAAC,GAAGZ,UAAU,CAAA;EACd,MAAM,CAACI,KAAK,EAAEE,YAAY,CAAC,GAAGO,wBAAwB,CAACR,SAAS,EAAEE,gBAAgB,CAAC,CAAA;EAEnF,oBACIO,GAAA,CAACC,YAAY,EAAA;AACTjB,IAAAA,GAAG,EAAEA,GAAW;IAChBkB,EAAE,EAAEL,MAAM,KAAKC,cAAc,CAACK,IAAI,GAAG,GAAG,GAAG,QAAQ,CAAE;AAAA,IAAA,GACjDL,cAAc;AAAA,IAAA,GACdb,kBAAkB;AACtBI,IAAAA,SAAS,EAAEe,UAAU,CACjBf,SAAS,EACTgB,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAE3B,SAAS;MAAEW,KAAK;MAAEE,YAAY;MAAEe,aAAa,EAAE,CAAC,CAACX,UAAAA;KAAY,CAAC,EAC3FA,UAAU,IAAIY,sBAAsB,CAACZ,UAAU,CACnD,CAAE;AAAAR,IAAAA,QAAA,EAEDqB,0BAA0B,cACvBC,IAAA,CAAAC,QAAA,EAAA;AAAAvB,MAAAA,QAAA,EACKM,CAAAA,QAAQ,iBAAIM,GAAA,CAACY,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAEnB,QAAS;QAACL,SAAS,EAAE,GAAGV,SAAS,CAAA,WAAA,CAAA;AAAc,OAAE,CAAC,EAC1ES,QAAQ,iBAAIY,GAAA,CAAA,MAAA,EAAA;QAAMX,SAAS,EAAE,CAAGV,EAAAA,SAAS,CAAY,SAAA,CAAA;AAAAS,QAAAA,QAAA,EAAEA,QAAAA;AAAQ,OAAO,CAAC,EACvEO,SAAS,iBAAIK,GAAA,CAACY,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAElB,SAAU;QAACN,SAAS,EAAE,GAAGV,SAAS,CAAA,YAAA,CAAA;AAAe,OAAE,CAAC,CAAA;AAAA,KAChF,CACN,CAAA;AAAC,GACS,CAAC,CAAA;AAEvB,CAAC,EAAC;AACFE,IAAI,CAACiC,WAAW,GAAGpC,cAAc,CAAA;AACjCG,IAAI,CAACQ,SAAS,GAAGV,SAAS;;;;"}
|