@redsift/design-system 11.6.0-muiv5-alpha.2 → 11.6.0-muiv5-alpha.3
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/components/alert/Alert.js +8 -8
- package/components/alert/Alert.js.map +1 -1
- package/components/app-bar/AppBar.js +11 -11
- package/components/app-bar/AppBar.js.map +1 -1
- package/components/app-container/AppContainer.js +16 -16
- package/components/app-container/AppContainer.js.map +1 -1
- package/components/app-container/context.js +2 -2
- package/components/app-container/context.js.map +1 -1
- package/components/app-content/AppContent.js +2 -2
- package/components/app-content/AppContent.js.map +1 -1
- package/components/app-side-panel/AppSidePanel.js +8 -8
- package/components/app-side-panel/AppSidePanel.js.map +1 -1
- package/components/app-side-panel/useAppSidePanel.js +2 -2
- package/components/app-side-panel/useAppSidePanel.js.map +1 -1
- package/components/badge/Badge.js +2 -2
- package/components/badge/Badge.js.map +1 -1
- package/components/breadcrumb-item/BreadcrumbItem.js +2 -2
- package/components/breadcrumb-item/BreadcrumbItem.js.map +1 -1
- package/components/breadcrumbs/Breadcrumbs.js +7 -7
- package/components/breadcrumbs/Breadcrumbs.js.map +1 -1
- package/components/button/Button.js +7 -7
- package/components/button/Button.js.map +1 -1
- package/components/button-group/ButtonGroup.js +4 -4
- package/components/button-group/ButtonGroup.js.map +1 -1
- package/components/button-link/ButtonLink.js +6 -6
- package/components/button-link/ButtonLink.js.map +1 -1
- package/components/card/Card.js +7 -7
- package/components/card/Card.js.map +1 -1
- package/components/card-actions/CardActions.js +2 -2
- package/components/card-actions/CardActions.js.map +1 -1
- package/components/card-body/CardBody.js +2 -2
- package/components/card-body/CardBody.js.map +1 -1
- package/components/card-header/CardHeader.js +7 -7
- package/components/card-header/CardHeader.js.map +1 -1
- package/components/checkbox/Checkbox.js +7 -7
- package/components/checkbox/Checkbox.js.map +1 -1
- package/components/checkbox-group/CheckboxGroup.js +7 -7
- package/components/checkbox-group/CheckboxGroup.js.map +1 -1
- package/components/checkbox-group/context.js +2 -2
- package/components/checkbox-group/context.js.map +1 -1
- package/components/conditional-wrapper/ConditionalWrapper.js +2 -2
- package/components/conditional-wrapper/ConditionalWrapper.js.map +1 -1
- package/components/detailed-card/DetailedCard.js +20 -20
- package/components/detailed-card/DetailedCard.js.map +1 -1
- package/components/detailed-card/types.d.ts +10 -1
- package/components/detailed-card-collapsible-section-items/DetailedCardCollapsibleSectionItems.js +3 -3
- package/components/detailed-card-collapsible-section-items/DetailedCardCollapsibleSectionItems.js.map +1 -1
- package/components/detailed-card-header/DetailedCardHeader.js +4 -4
- package/components/detailed-card-header/DetailedCardHeader.js.map +1 -1
- package/components/detailed-card-section/DetailedCardSection.js +10 -10
- package/components/detailed-card-section/DetailedCardSection.js.map +1 -1
- package/components/detailed-card-section-item/DetailedCardSectionItem.js +12 -12
- package/components/detailed-card-section-item/DetailedCardSectionItem.js.map +1 -1
- package/components/flexbox/Flexbox.js +3 -3
- package/components/flexbox/Flexbox.js.map +1 -1
- package/components/focus-within-group/FocusWithinGroup.js +2 -2
- package/components/focus-within-group/FocusWithinGroup.js.map +1 -1
- package/components/focus-within-group/context.js +2 -2
- package/components/focus-within-group/context.js.map +1 -1
- package/components/grid/Grid.js +3 -3
- package/components/grid/Grid.js.map +1 -1
- package/components/grid-item/GridItem.js +2 -2
- package/components/grid-item/GridItem.js.map +1 -1
- package/components/heading/Heading.js +2 -2
- package/components/heading/Heading.js.map +1 -1
- package/components/icon/Icon.js +5 -5
- package/components/icon/Icon.js.map +1 -1
- package/components/icon-button/IconButton.js +6 -6
- package/components/icon-button/IconButton.js.map +1 -1
- package/components/icon-button-link/IconButtonLink.js +5 -5
- package/components/icon-button-link/IconButtonLink.js.map +1 -1
- package/components/item/Item.js +19 -19
- package/components/item/Item.js.map +1 -1
- package/components/link/Link.js +5 -5
- package/components/link/Link.js.map +1 -1
- package/components/link-button/LinkButton.js +5 -5
- package/components/link-button/LinkButton.js.map +1 -1
- package/components/listbox/ActiveDescendantListbox.d.ts +1 -1
- package/components/listbox/ActiveDescendantListbox.js +3 -3
- package/components/listbox/ActiveDescendantListbox.js.map +1 -1
- package/components/listbox/Listbox.js +8 -8
- package/components/listbox/Listbox.js.map +1 -1
- package/components/listbox/RovingTabindexListbox.d.ts +1 -1
- package/components/listbox/RovingTabindexListbox.js +3 -3
- package/components/listbox/RovingTabindexListbox.js.map +1 -1
- package/components/listbox/context.js +2 -2
- package/components/listbox/context.js.map +1 -1
- package/components/number/Number.js +2 -2
- package/components/number/Number.js.map +1 -1
- package/components/number-field/NumberField.js +16 -16
- package/components/number-field/NumberField.js.map +1 -1
- package/components/pill/Pill.js +10 -10
- package/components/pill/Pill.js.map +1 -1
- package/components/progress-bar/ProgressBar.js +2 -2
- package/components/progress-bar/ProgressBar.js.map +1 -1
- package/components/radio/Radio.js +6 -6
- package/components/radio/Radio.js.map +1 -1
- package/components/radio-group/RadioGroup.js +7 -7
- package/components/radio-group/RadioGroup.js.map +1 -1
- package/components/radio-group/context.js +2 -2
- package/components/radio-group/context.js.map +1 -1
- package/components/shield/Shield.js +5 -5
- package/components/shield/Shield.js.map +1 -1
- package/components/side-navigation-menu/SideNavigationMenu.js +16 -16
- package/components/side-navigation-menu/SideNavigationMenu.js.map +1 -1
- package/components/side-navigation-menu/context.js +2 -2
- package/components/side-navigation-menu/context.js.map +1 -1
- package/components/side-navigation-menu-bar/SideNavigationMenuBar.js +7 -7
- package/components/side-navigation-menu-bar/SideNavigationMenuBar.js.map +1 -1
- package/components/side-navigation-menu-bar/context.js +2 -2
- package/components/side-navigation-menu-bar/context.js.map +1 -1
- package/components/side-navigation-menu-bar/useSideNavigationMenuBar.js +4 -4
- package/components/side-navigation-menu-bar/useSideNavigationMenuBar.js.map +1 -1
- package/components/side-navigation-menu-item/SideNavigationMenuItem.js +9 -9
- package/components/side-navigation-menu-item/SideNavigationMenuItem.js.map +1 -1
- package/components/skeleton/Skeleton.js +4 -4
- package/components/skeleton/Skeleton.js.map +1 -1
- package/components/skeleton-circle/SkeletonCircle.js +4 -4
- package/components/skeleton-circle/SkeletonCircle.js.map +1 -1
- package/components/skeleton-text/SkeletonText.js +4 -4
- package/components/skeleton-text/SkeletonText.js.map +1 -1
- package/components/spinner/Spinner.js +2 -2
- package/components/spinner/Spinner.js.map +1 -1
- package/components/switch/Switch.js +9 -9
- package/components/switch/Switch.js.map +1 -1
- package/components/switch-group/SwitchGroup.js +7 -7
- package/components/switch-group/SwitchGroup.js.map +1 -1
- package/components/switch-group/context.js +2 -2
- package/components/switch-group/context.js.map +1 -1
- package/components/text/Text.js +2 -2
- package/components/text/Text.js.map +1 -1
- package/components/text-area/TextArea.js +11 -11
- package/components/text-area/TextArea.js.map +1 -1
- package/components/text-field/TextField.js +13 -13
- package/components/text-field/TextField.js.map +1 -1
- package/components/theme/context.js +2 -2
- package/components/theme/context.js.map +1 -1
- package/package.json +6 -2
- package/react-aria/react-aria/focus/useFocusable.js +2 -2
- package/react-aria/react-aria/focus/useFocusable.js.map +1 -1
- package/react-aria/react-aria/i18n/context.js +4 -4
- package/react-aria/react-aria/i18n/context.js.map +1 -1
- package/react-aria/react-aria/interactions/context.js +2 -2
- package/react-aria/react-aria/interactions/context.js.map +1 -1
- package/react-aria/react-aria/ssr/SSRProvider.js +13 -13
- package/react-aria/react-aria/ssr/SSRProvider.js.map +1 -1
- package/react-aria/react-aria/utils/mergeProps.js +2 -2
- package/react-aria/react-aria/utils/mergeProps.js.map +1 -1
- package/react-aria/react-aria/utils/useLayoutEffect.js +2 -2
- package/react-aria/react-aria/utils/useLayoutEffect.js.map +1 -1
- package/utils/filterComponents.js +2 -2
- package/utils/filterComponents.js.map +1 -1
- package/utils/isComponent.js +2 -2
- package/utils/isComponent.js.map +1 -1
- package/utils/useId.js +4 -4
- package/utils/useId.js.map +1 -1
- package/_virtual/jsx-runtime.js +0 -4
- package/_virtual/jsx-runtime.js.map +0 -1
- package/_virtual/react-jsx-runtime.development.js +0 -4
- package/_virtual/react-jsx-runtime.development.js.map +0 -1
- package/_virtual/react-jsx-runtime.production.min.js +0 -4
- package/_virtual/react-jsx-runtime.production.min.js.map +0 -1
- package/packages/popovers/src/components/tooltip/Tooltip.js +0 -62
- package/packages/popovers/src/components/tooltip/Tooltip.js.map +0 -1
- package/packages/popovers/src/components/tooltip/context.js +0 -6
- package/packages/popovers/src/components/tooltip/context.js.map +0 -1
- package/packages/popovers/src/components/tooltip/types.js +0 -28
- package/packages/popovers/src/components/tooltip/types.js.map +0 -1
- package/packages/popovers/src/components/tooltip/useTooltip.js +0 -78
- package/packages/popovers/src/components/tooltip/useTooltip.js.map +0 -1
- package/packages/popovers/src/components/tooltip/useTooltipContext.js +0 -13
- package/packages/popovers/src/components/tooltip/useTooltipContext.js.map +0 -1
- package/packages/popovers/src/components/tooltip-content/TooltipContent.js +0 -80
- package/packages/popovers/src/components/tooltip-content/TooltipContent.js.map +0 -1
- package/packages/popovers/src/components/tooltip-content/styles.js +0 -128
- package/packages/popovers/src/components/tooltip-content/styles.js.map +0 -1
- package/packages/popovers/src/components/tooltip-trigger/TooltipTrigger.js +0 -47
- package/packages/popovers/src/components/tooltip-trigger/TooltipTrigger.js.map +0 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
-
import
|
|
2
|
+
import React, { forwardRef } from 'react';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
4
|
import { StyledDetailedCardSectionItem } from './styles.js';
|
|
5
5
|
import { Shield } from '../shield/Shield.js';
|
|
@@ -30,32 +30,32 @@ const DetailedCardSectionItem = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
30
30
|
shield
|
|
31
31
|
} = props,
|
|
32
32
|
forwardedProps = _objectWithoutProperties(props, _excluded);
|
|
33
|
-
return /*#__PURE__*/
|
|
33
|
+
return /*#__PURE__*/React.createElement(StyledDetailedCardSectionItem, _extends({}, forwardedProps, {
|
|
34
34
|
className: classNames(DetailedCardSectionItem.className, className),
|
|
35
35
|
ref: ref
|
|
36
|
-
}), /*#__PURE__*/
|
|
36
|
+
}), /*#__PURE__*/React.createElement(Flexbox, {
|
|
37
37
|
alignItems: "flex-start",
|
|
38
38
|
className: `${DetailedCardSectionItem.className}__header`
|
|
39
|
-
}, shield ? /*#__PURE__*/
|
|
39
|
+
}, shield ? /*#__PURE__*/React.createElement(Skeleton, {
|
|
40
40
|
isLoaded: !isLoading
|
|
41
|
-
}, /*#__PURE__*/
|
|
41
|
+
}, /*#__PURE__*/React.createElement(Shield, {
|
|
42
42
|
variant: shield,
|
|
43
43
|
className: `${DetailedCardSectionItem.className}-header__shield`
|
|
44
|
-
})) : icon ? /*#__PURE__*/
|
|
44
|
+
})) : icon ? /*#__PURE__*/React.createElement(Skeleton, {
|
|
45
45
|
isLoaded: !isLoading
|
|
46
|
-
}, /*#__PURE__*/
|
|
46
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
47
47
|
className: `${DetailedCardSectionItem.className}-header__icon`
|
|
48
|
-
}, /*#__PURE__*/
|
|
48
|
+
}, /*#__PURE__*/React.createElement(Icon, _extends({
|
|
49
49
|
icon: icon
|
|
50
50
|
}, iconProps, {
|
|
51
51
|
size: "large"
|
|
52
|
-
})))) : null, description || pill ? /*#__PURE__*/
|
|
52
|
+
})))) : null, description || pill ? /*#__PURE__*/React.createElement("div", {
|
|
53
53
|
className: `${DetailedCardSectionItem.className}-header__description`
|
|
54
|
-
}, /*#__PURE__*/
|
|
54
|
+
}, /*#__PURE__*/React.createElement(Skeleton, {
|
|
55
55
|
isLoaded: !isLoading
|
|
56
|
-
}, pill && /*#__PURE__*/
|
|
56
|
+
}, pill && /*#__PURE__*/React.createElement(Pill, _extends({
|
|
57
57
|
className: `${DetailedCardSectionItem.className}-header__pill`
|
|
58
|
-
}, pillProps), pill), typeof description === 'string' ? /*#__PURE__*/
|
|
58
|
+
}, pillProps), pill), typeof description === 'string' ? /*#__PURE__*/React.createElement(Text, descriptionProps, description) : description)) : null), children);
|
|
59
59
|
});
|
|
60
60
|
DetailedCardSectionItem.className = CLASSNAME;
|
|
61
61
|
DetailedCardSectionItem.displayName = COMPONENT_NAME;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DetailedCardSectionItem.js","sources":["../../../src/components/detailed-card-section-item/DetailedCardSectionItem.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\n\nimport { Comp } from '../../types';\nimport { Flexbox } from '../flexbox';\nimport { Shield } from '../shield';\nimport { Icon } from '../icon';\nimport { Pill } from '../pill';\nimport { Text } from '../text';\nimport { DetailedCardSectionItemProps } from './types';\nimport { StyledDetailedCardSectionItem } from './styles';\nimport { Skeleton } from '../skeleton';\n\nconst COMPONENT_NAME = 'DetailedCardSectionItem';\nconst CLASSNAME = 'redsift-detailed-card-section-item';\n\n/**\n * The DetailedCardSectionItems component.\n */\nexport const DetailedCardSectionItem: Comp<DetailedCardSectionItemProps, HTMLDivElement> = forwardRef((props, ref) => {\n const {\n children,\n className,\n description,\n descriptionProps,\n icon,\n iconProps,\n isLoading,\n pill,\n pillProps,\n shield,\n ...forwardedProps\n } = props;\n\n return (\n <StyledDetailedCardSectionItem\n {...forwardedProps}\n className={classNames(DetailedCardSectionItem.className, className)}\n ref={ref as RefObject<HTMLDivElement>}\n >\n <Flexbox alignItems=\"flex-start\" className={`${DetailedCardSectionItem.className}__header`}>\n {shield ? (\n <Skeleton isLoaded={!isLoading}>\n <Shield variant={shield} className={`${DetailedCardSectionItem.className}-header__shield`} />\n </Skeleton>\n ) : icon ? (\n <Skeleton isLoaded={!isLoading}>\n <div className={`${DetailedCardSectionItem.className}-header__icon`}>\n <Icon icon={icon} {...iconProps} size=\"large\" />\n </div>\n </Skeleton>\n ) : null}\n {description || pill ? (\n <div className={`${DetailedCardSectionItem.className}-header__description`}>\n <Skeleton isLoaded={!isLoading}>\n {pill && (\n <Pill className={`${DetailedCardSectionItem.className}-header__pill`} {...pillProps}>\n {pill}\n </Pill>\n )}\n {typeof description === 'string' ? <Text {...descriptionProps}>{description}</Text> : description}\n </Skeleton>\n </div>\n ) : null}\n </Flexbox>\n {children}\n </StyledDetailedCardSectionItem>\n );\n});\nDetailedCardSectionItem.className = CLASSNAME;\nDetailedCardSectionItem.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","DetailedCardSectionItem","forwardRef","props","ref","children","className","description","descriptionProps","icon","iconProps","isLoading","pill","pillProps","shield","forwardedProps","_objectWithoutProperties","_excluded","React","createElement","StyledDetailedCardSectionItem","_extends","classNames","Flexbox","alignItems","Skeleton","isLoaded","Shield","variant","Icon","size","Pill","Text","displayName"],"mappings":";;;;;;;;;;;;AAaA,MAAMA,cAAc,GAAG,yBAAyB,CAAA;AAChD,MAAMC,SAAS,GAAG,oCAAoC,CAAA;;AAEtD;AACA;AACA;AACO,MAAMC,uBAA2E,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACpH,MAAM;MACJC,QAAQ;MACRC,SAAS;MACTC,WAAW;MACXC,gBAAgB;MAChBC,IAAI;MACJC,SAAS;MACTC,SAAS;MACTC,IAAI;MACJC,SAAS;AACTC,MAAAA,MAAAA;AAEF,KAAC,GAAGX,KAAK;AADJY,IAAAA,cAAc,GAAAC,wBAAA,CACfb,KAAK,EAAAc,SAAA,CAAA,CAAA;EAET,oBACEC,
|
|
1
|
+
{"version":3,"file":"DetailedCardSectionItem.js","sources":["../../../src/components/detailed-card-section-item/DetailedCardSectionItem.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\n\nimport { Comp } from '../../types';\nimport { Flexbox } from '../flexbox';\nimport { Shield } from '../shield';\nimport { Icon } from '../icon';\nimport { Pill } from '../pill';\nimport { Text } from '../text';\nimport { DetailedCardSectionItemProps } from './types';\nimport { StyledDetailedCardSectionItem } from './styles';\nimport { Skeleton } from '../skeleton';\n\nconst COMPONENT_NAME = 'DetailedCardSectionItem';\nconst CLASSNAME = 'redsift-detailed-card-section-item';\n\n/**\n * The DetailedCardSectionItems component.\n */\nexport const DetailedCardSectionItem: Comp<DetailedCardSectionItemProps, HTMLDivElement> = forwardRef((props, ref) => {\n const {\n children,\n className,\n description,\n descriptionProps,\n icon,\n iconProps,\n isLoading,\n pill,\n pillProps,\n shield,\n ...forwardedProps\n } = props;\n\n return (\n <StyledDetailedCardSectionItem\n {...forwardedProps}\n className={classNames(DetailedCardSectionItem.className, className)}\n ref={ref as RefObject<HTMLDivElement>}\n >\n <Flexbox alignItems=\"flex-start\" className={`${DetailedCardSectionItem.className}__header`}>\n {shield ? (\n <Skeleton isLoaded={!isLoading}>\n <Shield variant={shield} className={`${DetailedCardSectionItem.className}-header__shield`} />\n </Skeleton>\n ) : icon ? (\n <Skeleton isLoaded={!isLoading}>\n <div className={`${DetailedCardSectionItem.className}-header__icon`}>\n <Icon icon={icon} {...iconProps} size=\"large\" />\n </div>\n </Skeleton>\n ) : null}\n {description || pill ? (\n <div className={`${DetailedCardSectionItem.className}-header__description`}>\n <Skeleton isLoaded={!isLoading}>\n {pill && (\n <Pill className={`${DetailedCardSectionItem.className}-header__pill`} {...pillProps}>\n {pill}\n </Pill>\n )}\n {typeof description === 'string' ? <Text {...descriptionProps}>{description}</Text> : description}\n </Skeleton>\n </div>\n ) : null}\n </Flexbox>\n {children}\n </StyledDetailedCardSectionItem>\n );\n});\nDetailedCardSectionItem.className = CLASSNAME;\nDetailedCardSectionItem.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","DetailedCardSectionItem","forwardRef","props","ref","children","className","description","descriptionProps","icon","iconProps","isLoading","pill","pillProps","shield","forwardedProps","_objectWithoutProperties","_excluded","React","createElement","StyledDetailedCardSectionItem","_extends","classNames","Flexbox","alignItems","Skeleton","isLoaded","Shield","variant","Icon","size","Pill","Text","displayName"],"mappings":";;;;;;;;;;;;AAaA,MAAMA,cAAc,GAAG,yBAAyB,CAAA;AAChD,MAAMC,SAAS,GAAG,oCAAoC,CAAA;;AAEtD;AACA;AACA;AACO,MAAMC,uBAA2E,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACpH,MAAM;MACJC,QAAQ;MACRC,SAAS;MACTC,WAAW;MACXC,gBAAgB;MAChBC,IAAI;MACJC,SAAS;MACTC,SAAS;MACTC,IAAI;MACJC,SAAS;AACTC,MAAAA,MAAAA;AAEF,KAAC,GAAGX,KAAK;AADJY,IAAAA,cAAc,GAAAC,wBAAA,CACfb,KAAK,EAAAc,SAAA,CAAA,CAAA;EAET,oBACEC,KAAA,CAAAC,aAAA,CAACC,6BAA6B,EAAAC,QAAA,KACxBN,cAAc,EAAA;IAClBT,SAAS,EAAEgB,UAAU,CAACrB,uBAAuB,CAACK,SAAS,EAAEA,SAAS,CAAE;AACpEF,IAAAA,GAAG,EAAEA,GAAAA;AAAiC,GAAA,CAAA,eAEtCc,KAAA,CAAAC,aAAA,CAACI,OAAO,EAAA;AAACC,IAAAA,UAAU,EAAC,YAAY;AAAClB,IAAAA,SAAS,EAAG,CAAA,EAAEL,uBAAuB,CAACK,SAAU,CAAA,QAAA,CAAA;AAAU,GAAA,EACxFQ,MAAM,gBACLI,KAAA,CAAAC,aAAA,CAACM,QAAQ,EAAA;AAACC,IAAAA,QAAQ,EAAE,CAACf,SAAAA;AAAU,GAAA,eAC7BO,KAAA,CAAAC,aAAA,CAACQ,MAAM,EAAA;AAACC,IAAAA,OAAO,EAAEd,MAAO;AAACR,IAAAA,SAAS,EAAG,CAAA,EAAEL,uBAAuB,CAACK,SAAU,CAAA,eAAA,CAAA;GAAmB,CACpF,CAAC,GACTG,IAAI,gBACNS,KAAA,CAAAC,aAAA,CAACM,QAAQ,EAAA;AAACC,IAAAA,QAAQ,EAAE,CAACf,SAAAA;GACnBO,eAAAA,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKb,IAAAA,SAAS,EAAG,CAAA,EAAEL,uBAAuB,CAACK,SAAU,CAAA,aAAA,CAAA;AAAe,GAAA,eAClEY,KAAA,CAAAC,aAAA,CAACU,IAAI,EAAAR,QAAA,CAAA;AAACZ,IAAAA,IAAI,EAAEA,IAAAA;AAAK,GAAA,EAAKC,SAAS,EAAA;AAAEoB,IAAAA,IAAI,EAAC,OAAA;AAAO,GAAA,CAAE,CAC5C,CACG,CAAC,GACT,IAAI,EACPvB,WAAW,IAAIK,IAAI,gBAClBM,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKb,IAAAA,SAAS,EAAG,CAAA,EAAEL,uBAAuB,CAACK,SAAU,CAAA,oBAAA,CAAA;AAAsB,GAAA,eACzEY,KAAA,CAAAC,aAAA,CAACM,QAAQ,EAAA;AAACC,IAAAA,QAAQ,EAAE,CAACf,SAAAA;GAClBC,EAAAA,IAAI,iBACHM,KAAA,CAAAC,aAAA,CAACY,IAAI,EAAAV,QAAA,CAAA;AAACf,IAAAA,SAAS,EAAG,CAAA,EAAEL,uBAAuB,CAACK,SAAU,CAAA,aAAA,CAAA;AAAe,GAAA,EAAKO,SAAS,CAAA,EAChFD,IACG,CACP,EACA,OAAOL,WAAW,KAAK,QAAQ,gBAAGW,KAAA,CAAAC,aAAA,CAACa,IAAI,EAAKxB,gBAAgB,EAAGD,WAAkB,CAAC,GAAGA,WAC9E,CACP,CAAC,GACJ,IACG,CAAC,EACTF,QAC4B,CAAC,CAAA;AAEpC,CAAC,EAAC;AACFJ,uBAAuB,CAACK,SAAS,GAAGN,SAAS,CAAA;AAC7CC,uBAAuB,CAACgC,WAAW,GAAGlC,cAAc;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
-
import
|
|
2
|
+
import React, { forwardRef } from 'react';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
4
|
import { StyledFlexbox } from './styles.js';
|
|
5
5
|
import { ThemeProvider } from '../theme/context.js';
|
|
@@ -23,11 +23,11 @@ const Flexbox = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
23
23
|
} = props,
|
|
24
24
|
forwardedProps = _objectWithoutProperties(props, _excluded);
|
|
25
25
|
const theme = useTheme(propsTheme);
|
|
26
|
-
return /*#__PURE__*/
|
|
26
|
+
return /*#__PURE__*/React.createElement(ThemeProvider, {
|
|
27
27
|
value: {
|
|
28
28
|
theme
|
|
29
29
|
}
|
|
30
|
-
}, /*#__PURE__*/
|
|
30
|
+
}, /*#__PURE__*/React.createElement(StyledFlexbox, _extends({
|
|
31
31
|
as: as
|
|
32
32
|
}, forwardedProps, {
|
|
33
33
|
gap: divider ? `${divider.rowGap}px ${divider.colGap}px` : gap,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Flexbox.js","sources":["../../../src/components/flexbox/Flexbox.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { StyledFlexbox } from './styles';\nimport { FlexboxProps } from './types';\nimport { ThemeProvider, useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Flexbox';\nconst CLASSNAME = 'redsift-flex-box';\n\n/**\n * The Flexbox component.\n */\nexport const Flexbox: Comp<FlexboxProps, HTMLDivElement> = forwardRef((props, ref) => {\n const { as, children, className, divider, gap = '16px', theme: propsTheme, ...forwardedProps } = props;\n\n const theme = useTheme(propsTheme);\n\n return (\n <ThemeProvider value={{ theme }}>\n <StyledFlexbox\n as={as}\n {...forwardedProps}\n gap={divider ? `${divider.rowGap}px ${divider.colGap}px` : gap}\n className={classNames(Flexbox.className, className)}\n ref={ref as RefObject<HTMLDivElement>}\n $divider={divider}\n $theme={theme}\n >\n {children}\n </StyledFlexbox>\n </ThemeProvider>\n );\n});\nFlexbox.className = CLASSNAME;\nFlexbox.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","Flexbox","forwardRef","props","ref","as","children","className","divider","gap","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","useTheme","React","createElement","ThemeProvider","value","StyledFlexbox","_extends","rowGap","colGap","classNames","$divider","$theme","displayName"],"mappings":";;;;;;;;AAOA,MAAMA,cAAc,GAAG,SAAS,CAAA;AAChC,MAAMC,SAAS,GAAG,kBAAkB,CAAA;;AAEpC;AACA;AACA;AACO,MAAMC,OAA2C,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACpF,MAAM;MAAEC,EAAE;MAAEC,QAAQ;MAAEC,SAAS;MAAEC,OAAO;AAAEC,MAAAA,GAAG,GAAG,MAAM;AAAEC,MAAAA,KAAK,EAAEC,UAAAA;AAA8B,KAAC,GAAGR,KAAK;AAAxBS,IAAAA,cAAc,GAAAC,wBAAA,CAAKV,KAAK,EAAAW,SAAA,CAAA,CAAA;AAEtG,EAAA,MAAMJ,KAAK,GAAGK,QAAQ,CAACJ,UAAU,CAAC,CAAA;AAElC,EAAA,oBACEK,
|
|
1
|
+
{"version":3,"file":"Flexbox.js","sources":["../../../src/components/flexbox/Flexbox.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { StyledFlexbox } from './styles';\nimport { FlexboxProps } from './types';\nimport { ThemeProvider, useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Flexbox';\nconst CLASSNAME = 'redsift-flex-box';\n\n/**\n * The Flexbox component.\n */\nexport const Flexbox: Comp<FlexboxProps, HTMLDivElement> = forwardRef((props, ref) => {\n const { as, children, className, divider, gap = '16px', theme: propsTheme, ...forwardedProps } = props;\n\n const theme = useTheme(propsTheme);\n\n return (\n <ThemeProvider value={{ theme }}>\n <StyledFlexbox\n as={as}\n {...forwardedProps}\n gap={divider ? `${divider.rowGap}px ${divider.colGap}px` : gap}\n className={classNames(Flexbox.className, className)}\n ref={ref as RefObject<HTMLDivElement>}\n $divider={divider}\n $theme={theme}\n >\n {children}\n </StyledFlexbox>\n </ThemeProvider>\n );\n});\nFlexbox.className = CLASSNAME;\nFlexbox.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","Flexbox","forwardRef","props","ref","as","children","className","divider","gap","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","useTheme","React","createElement","ThemeProvider","value","StyledFlexbox","_extends","rowGap","colGap","classNames","$divider","$theme","displayName"],"mappings":";;;;;;;;AAOA,MAAMA,cAAc,GAAG,SAAS,CAAA;AAChC,MAAMC,SAAS,GAAG,kBAAkB,CAAA;;AAEpC;AACA;AACA;AACO,MAAMC,OAA2C,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACpF,MAAM;MAAEC,EAAE;MAAEC,QAAQ;MAAEC,SAAS;MAAEC,OAAO;AAAEC,MAAAA,GAAG,GAAG,MAAM;AAAEC,MAAAA,KAAK,EAAEC,UAAAA;AAA8B,KAAC,GAAGR,KAAK;AAAxBS,IAAAA,cAAc,GAAAC,wBAAA,CAAKV,KAAK,EAAAW,SAAA,CAAA,CAAA;AAEtG,EAAA,MAAMJ,KAAK,GAAGK,QAAQ,CAACJ,UAAU,CAAC,CAAA;AAElC,EAAA,oBACEK,KAAA,CAAAC,aAAA,CAACC,aAAa,EAAA;AAACC,IAAAA,KAAK,EAAE;AAAET,MAAAA,KAAAA;AAAM,KAAA;AAAE,GAAA,eAC9BM,KAAA,CAAAC,aAAA,CAACG,aAAa,EAAAC,QAAA,CAAA;AACZhB,IAAAA,EAAE,EAAEA,EAAAA;AAAG,GAAA,EACHO,cAAc,EAAA;AAClBH,IAAAA,GAAG,EAAED,OAAO,GAAI,CAAA,EAAEA,OAAO,CAACc,MAAO,CAAA,GAAA,EAAKd,OAAO,CAACe,MAAO,CAAA,EAAA,CAAG,GAAGd,GAAI;IAC/DF,SAAS,EAAEiB,UAAU,CAACvB,OAAO,CAACM,SAAS,EAAEA,SAAS,CAAE;AACpDH,IAAAA,GAAG,EAAEA,GAAiC;AACtCqB,IAAAA,QAAQ,EAAEjB,OAAQ;AAClBkB,IAAAA,MAAM,EAAEhB,KAAAA;GAEPJ,CAAAA,EAAAA,QACY,CACF,CAAC,CAAA;AAEpB,CAAC,EAAC;AACFL,OAAO,CAACM,SAAS,GAAGP,SAAS,CAAA;AAC7BC,OAAO,CAAC0B,WAAW,GAAG5B,cAAc;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
-
import
|
|
2
|
+
import React, { useReducer, useEffect, useMemo } from 'react';
|
|
3
3
|
import { FocusWithinGroupActionType } from './types.js';
|
|
4
4
|
import { FOCUS_WITHING_GROUP_INITIAL_STATE, FocusWithinGroupContext } from './context.js';
|
|
5
5
|
import { FocusWithinGroupReducer } from './reducer.js';
|
|
@@ -82,7 +82,7 @@ const FocusWithinGroup = props => {
|
|
|
82
82
|
state,
|
|
83
83
|
dispatch
|
|
84
84
|
}), [state]);
|
|
85
|
-
return /*#__PURE__*/
|
|
85
|
+
return /*#__PURE__*/React.createElement(FocusWithinGroupContext.Provider, {
|
|
86
86
|
value: context
|
|
87
87
|
}, children);
|
|
88
88
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FocusWithinGroup.js","sources":["../../../src/components/focus-within-group/FocusWithinGroup.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useReducer } from 'react';\nimport {\n FocusWithinGroupActionType,\n FocusWithinGroupContextProps,\n FocusWithinGroupProps,\n FocusWithinGroupState,\n} from './types';\nimport { FOCUS_WITHING_GROUP_INITIAL_STATE, FocusWithinGroupContext } from './context';\nimport { FocusWithinGroupReducer } from './reducer';\n\n/**\n * The FocusWithinGroup component.\n *\n * @param {ReactNode} children - The child content, which will\n * include the DOM elements to rove between using the tab key.\n * @param {KeyDirection} direction - An optional direction value\n * that only applies when the roving tabindex is not being\n * used within a grid. This value specifies the arrow key behaviour.\n * The default value is 'horizontal'.\n * When set to 'horizontal' then only the ArrowLeft and ArrowRight\n * keys move to the previous and next tab stop respectively.\n * When set to 'vertical' then only the ArrowUp and ArrowDown keys\n * move to the previous and next tab stop respectively. When set\n * to 'both' then both the ArrowLeft and ArrowUp keys can be used\n * to move to the previous tab stop, and both the ArrowRight\n * and ArrowDown keys can be used to move to the next tab stop.\n * If you do not pass an explicit value then the 'horizontal'\n * behaviour applies.\n * @param {boolean} focusOnClick - An optional flag for indicating\n * if `focus()` should invoked on an item in the roving tabindex\n * when it is clicked. The default value for this flag is `false`,\n * meaning that `focus()` will not be invoked on click.\n * Browsers are\n * [inconsistent in their behaviour](https://zellwk.com/blog/inconsistent-button-behavior/)\n * when a button is clicked so you will see some variation between\n * the browsers with the default value. Prior to version 3 of this library,\n * the behaviour was to always invoke `focus()` on click; this behaviour\n * can be maintained by passing `true`.\n * @param {boolean} loopAround - An optional flag that,\n * when set to `true`, will loop the tabindex around when the user\n * tries to tab to the first or last elements in the roving tabindex,\n * rather than stopping. The default value is `false` (no looping).\n * Note that this option does not apply if the roving tabindex\n * is being used on a grid.\n */\nexport const FocusWithinGroup: React.FC<FocusWithinGroupProps> = (props) => {\n const {\n children,\n direction,\n focusOnClick,\n loopAround,\n focusType,\n listRole,\n focusOnInit,\n activedescendant,\n maxOptionsLength,\n } = props;\n\n const [state, dispatch] = useReducer(FocusWithinGroupReducer, {\n ...FOCUS_WITHING_GROUP_INITIAL_STATE,\n direction,\n focusOnClick,\n loopAround,\n focusType,\n listRole,\n focusOnInit,\n activedescendant,\n maxOptionsLength,\n } as FocusWithinGroupState);\n\n // Update the options whenever they change:\n useEffect(() => {\n dispatch({\n type: FocusWithinGroupActionType.OPTIONS_UPDATED,\n payload: {\n direction: direction ?? FOCUS_WITHING_GROUP_INITIAL_STATE.direction,\n focusOnClick: focusOnClick ?? FOCUS_WITHING_GROUP_INITIAL_STATE.focusOnClick,\n loopAround: loopAround ?? FOCUS_WITHING_GROUP_INITIAL_STATE.loopAround,\n focusType: focusType ?? FOCUS_WITHING_GROUP_INITIAL_STATE.focusType,\n listRole: listRole ?? FOCUS_WITHING_GROUP_INITIAL_STATE.listRole,\n focusOnInit: focusOnInit ?? FOCUS_WITHING_GROUP_INITIAL_STATE.focusOnInit,\n activedescendant: activedescendant ?? FOCUS_WITHING_GROUP_INITIAL_STATE.activedescendant,\n maxOptionsLength: maxOptionsLength ?? FOCUS_WITHING_GROUP_INITIAL_STATE.maxOptionsLength,\n },\n });\n }, [direction, focusOnClick, focusOnInit, loopAround, focusType, listRole, activedescendant, maxOptionsLength]);\n\n const context = useMemo<FocusWithinGroupContextProps>(\n () => ({\n state,\n dispatch,\n }),\n [state]\n );\n\n return <FocusWithinGroupContext.Provider value={context}>{children}</FocusWithinGroupContext.Provider>;\n};\n"],"names":["FocusWithinGroup","props","children","direction","focusOnClick","loopAround","focusType","listRole","focusOnInit","activedescendant","maxOptionsLength","state","dispatch","useReducer","FocusWithinGroupReducer","_objectSpread","FOCUS_WITHING_GROUP_INITIAL_STATE","useEffect","type","FocusWithinGroupActionType","OPTIONS_UPDATED","payload","context","useMemo","React","createElement","FocusWithinGroupContext","Provider","value"],"mappings":";;;;;;AAUA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACaA,MAAAA,gBAAiD,GAAIC,KAAK,IAAK;EAC1E,MAAM;IACJC,QAAQ;IACRC,SAAS;IACTC,YAAY;IACZC,UAAU;IACVC,SAAS;IACTC,QAAQ;IACRC,WAAW;IACXC,gBAAgB;AAChBC,IAAAA,gBAAAA;AACF,GAAC,GAAGT,KAAK,CAAA;AAET,EAAA,MAAM,CAACU,KAAK,EAAEC,QAAQ,CAAC,GAAGC,UAAU,CAACC,uBAAuB,EAAAC,cAAA,CAAAA,cAAA,KACvDC,iCAAiC,CAAA,EAAA,EAAA,EAAA;IACpCb,SAAS;IACTC,YAAY;IACZC,UAAU;IACVC,SAAS;IACTC,QAAQ;IACRC,WAAW;IACXC,gBAAgB;AAChBC,IAAAA,gBAAAA;AAAgB,GAAA,CACQ,CAAC,CAAA;;AAE3B;AACAO,EAAAA,SAAS,CAAC,MAAM;AACdL,IAAAA,QAAQ,CAAC;MACPM,IAAI,EAAEC,0BAA0B,CAACC,eAAe;AAChDC,MAAAA,OAAO,EAAE;QACPlB,SAAS,EAAEA,SAAS,KAATA,IAAAA,IAAAA,SAAS,cAATA,SAAS,GAAIa,iCAAiC,CAACb,SAAS;QACnEC,YAAY,EAAEA,YAAY,KAAZA,IAAAA,IAAAA,YAAY,cAAZA,YAAY,GAAIY,iCAAiC,CAACZ,YAAY;QAC5EC,UAAU,EAAEA,UAAU,KAAVA,IAAAA,IAAAA,UAAU,cAAVA,UAAU,GAAIW,iCAAiC,CAACX,UAAU;QACtEC,SAAS,EAAEA,SAAS,KAATA,IAAAA,IAAAA,SAAS,cAATA,SAAS,GAAIU,iCAAiC,CAACV,SAAS;QACnEC,QAAQ,EAAEA,QAAQ,KAARA,IAAAA,IAAAA,QAAQ,cAARA,QAAQ,GAAIS,iCAAiC,CAACT,QAAQ;QAChEC,WAAW,EAAEA,WAAW,KAAXA,IAAAA,IAAAA,WAAW,cAAXA,WAAW,GAAIQ,iCAAiC,CAACR,WAAW;QACzEC,gBAAgB,EAAEA,gBAAgB,KAAhBA,IAAAA,IAAAA,gBAAgB,cAAhBA,gBAAgB,GAAIO,iCAAiC,CAACP,gBAAgB;QACxFC,gBAAgB,EAAEA,gBAAgB,KAAhBA,IAAAA,IAAAA,gBAAgB,cAAhBA,gBAAgB,GAAIM,iCAAiC,CAACN,gBAAAA;AAC1E,OAAA;AACF,KAAC,CAAC,CAAA;AACJ,GAAC,EAAE,CAACP,SAAS,EAAEC,YAAY,EAAEI,WAAW,EAAEH,UAAU,EAAEC,SAAS,EAAEC,QAAQ,EAAEE,gBAAgB,EAAEC,gBAAgB,CAAC,CAAC,CAAA;AAE/G,EAAA,MAAMY,OAAO,GAAGC,OAAO,CACrB,OAAO;IACLZ,KAAK;AACLC,IAAAA,QAAAA;AACF,GAAC,CAAC,EACF,CAACD,KAAK,CACR,CAAC,CAAA;AAED,EAAA,oBAAOa,
|
|
1
|
+
{"version":3,"file":"FocusWithinGroup.js","sources":["../../../src/components/focus-within-group/FocusWithinGroup.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useReducer } from 'react';\nimport {\n FocusWithinGroupActionType,\n FocusWithinGroupContextProps,\n FocusWithinGroupProps,\n FocusWithinGroupState,\n} from './types';\nimport { FOCUS_WITHING_GROUP_INITIAL_STATE, FocusWithinGroupContext } from './context';\nimport { FocusWithinGroupReducer } from './reducer';\n\n/**\n * The FocusWithinGroup component.\n *\n * @param {ReactNode} children - The child content, which will\n * include the DOM elements to rove between using the tab key.\n * @param {KeyDirection} direction - An optional direction value\n * that only applies when the roving tabindex is not being\n * used within a grid. This value specifies the arrow key behaviour.\n * The default value is 'horizontal'.\n * When set to 'horizontal' then only the ArrowLeft and ArrowRight\n * keys move to the previous and next tab stop respectively.\n * When set to 'vertical' then only the ArrowUp and ArrowDown keys\n * move to the previous and next tab stop respectively. When set\n * to 'both' then both the ArrowLeft and ArrowUp keys can be used\n * to move to the previous tab stop, and both the ArrowRight\n * and ArrowDown keys can be used to move to the next tab stop.\n * If you do not pass an explicit value then the 'horizontal'\n * behaviour applies.\n * @param {boolean} focusOnClick - An optional flag for indicating\n * if `focus()` should invoked on an item in the roving tabindex\n * when it is clicked. The default value for this flag is `false`,\n * meaning that `focus()` will not be invoked on click.\n * Browsers are\n * [inconsistent in their behaviour](https://zellwk.com/blog/inconsistent-button-behavior/)\n * when a button is clicked so you will see some variation between\n * the browsers with the default value. Prior to version 3 of this library,\n * the behaviour was to always invoke `focus()` on click; this behaviour\n * can be maintained by passing `true`.\n * @param {boolean} loopAround - An optional flag that,\n * when set to `true`, will loop the tabindex around when the user\n * tries to tab to the first or last elements in the roving tabindex,\n * rather than stopping. The default value is `false` (no looping).\n * Note that this option does not apply if the roving tabindex\n * is being used on a grid.\n */\nexport const FocusWithinGroup: React.FC<FocusWithinGroupProps> = (props) => {\n const {\n children,\n direction,\n focusOnClick,\n loopAround,\n focusType,\n listRole,\n focusOnInit,\n activedescendant,\n maxOptionsLength,\n } = props;\n\n const [state, dispatch] = useReducer(FocusWithinGroupReducer, {\n ...FOCUS_WITHING_GROUP_INITIAL_STATE,\n direction,\n focusOnClick,\n loopAround,\n focusType,\n listRole,\n focusOnInit,\n activedescendant,\n maxOptionsLength,\n } as FocusWithinGroupState);\n\n // Update the options whenever they change:\n useEffect(() => {\n dispatch({\n type: FocusWithinGroupActionType.OPTIONS_UPDATED,\n payload: {\n direction: direction ?? FOCUS_WITHING_GROUP_INITIAL_STATE.direction,\n focusOnClick: focusOnClick ?? FOCUS_WITHING_GROUP_INITIAL_STATE.focusOnClick,\n loopAround: loopAround ?? FOCUS_WITHING_GROUP_INITIAL_STATE.loopAround,\n focusType: focusType ?? FOCUS_WITHING_GROUP_INITIAL_STATE.focusType,\n listRole: listRole ?? FOCUS_WITHING_GROUP_INITIAL_STATE.listRole,\n focusOnInit: focusOnInit ?? FOCUS_WITHING_GROUP_INITIAL_STATE.focusOnInit,\n activedescendant: activedescendant ?? FOCUS_WITHING_GROUP_INITIAL_STATE.activedescendant,\n maxOptionsLength: maxOptionsLength ?? FOCUS_WITHING_GROUP_INITIAL_STATE.maxOptionsLength,\n },\n });\n }, [direction, focusOnClick, focusOnInit, loopAround, focusType, listRole, activedescendant, maxOptionsLength]);\n\n const context = useMemo<FocusWithinGroupContextProps>(\n () => ({\n state,\n dispatch,\n }),\n [state]\n );\n\n return <FocusWithinGroupContext.Provider value={context}>{children}</FocusWithinGroupContext.Provider>;\n};\n"],"names":["FocusWithinGroup","props","children","direction","focusOnClick","loopAround","focusType","listRole","focusOnInit","activedescendant","maxOptionsLength","state","dispatch","useReducer","FocusWithinGroupReducer","_objectSpread","FOCUS_WITHING_GROUP_INITIAL_STATE","useEffect","type","FocusWithinGroupActionType","OPTIONS_UPDATED","payload","context","useMemo","React","createElement","FocusWithinGroupContext","Provider","value"],"mappings":";;;;;;AAUA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACaA,MAAAA,gBAAiD,GAAIC,KAAK,IAAK;EAC1E,MAAM;IACJC,QAAQ;IACRC,SAAS;IACTC,YAAY;IACZC,UAAU;IACVC,SAAS;IACTC,QAAQ;IACRC,WAAW;IACXC,gBAAgB;AAChBC,IAAAA,gBAAAA;AACF,GAAC,GAAGT,KAAK,CAAA;AAET,EAAA,MAAM,CAACU,KAAK,EAAEC,QAAQ,CAAC,GAAGC,UAAU,CAACC,uBAAuB,EAAAC,cAAA,CAAAA,cAAA,KACvDC,iCAAiC,CAAA,EAAA,EAAA,EAAA;IACpCb,SAAS;IACTC,YAAY;IACZC,UAAU;IACVC,SAAS;IACTC,QAAQ;IACRC,WAAW;IACXC,gBAAgB;AAChBC,IAAAA,gBAAAA;AAAgB,GAAA,CACQ,CAAC,CAAA;;AAE3B;AACAO,EAAAA,SAAS,CAAC,MAAM;AACdL,IAAAA,QAAQ,CAAC;MACPM,IAAI,EAAEC,0BAA0B,CAACC,eAAe;AAChDC,MAAAA,OAAO,EAAE;QACPlB,SAAS,EAAEA,SAAS,KAATA,IAAAA,IAAAA,SAAS,cAATA,SAAS,GAAIa,iCAAiC,CAACb,SAAS;QACnEC,YAAY,EAAEA,YAAY,KAAZA,IAAAA,IAAAA,YAAY,cAAZA,YAAY,GAAIY,iCAAiC,CAACZ,YAAY;QAC5EC,UAAU,EAAEA,UAAU,KAAVA,IAAAA,IAAAA,UAAU,cAAVA,UAAU,GAAIW,iCAAiC,CAACX,UAAU;QACtEC,SAAS,EAAEA,SAAS,KAATA,IAAAA,IAAAA,SAAS,cAATA,SAAS,GAAIU,iCAAiC,CAACV,SAAS;QACnEC,QAAQ,EAAEA,QAAQ,KAARA,IAAAA,IAAAA,QAAQ,cAARA,QAAQ,GAAIS,iCAAiC,CAACT,QAAQ;QAChEC,WAAW,EAAEA,WAAW,KAAXA,IAAAA,IAAAA,WAAW,cAAXA,WAAW,GAAIQ,iCAAiC,CAACR,WAAW;QACzEC,gBAAgB,EAAEA,gBAAgB,KAAhBA,IAAAA,IAAAA,gBAAgB,cAAhBA,gBAAgB,GAAIO,iCAAiC,CAACP,gBAAgB;QACxFC,gBAAgB,EAAEA,gBAAgB,KAAhBA,IAAAA,IAAAA,gBAAgB,cAAhBA,gBAAgB,GAAIM,iCAAiC,CAACN,gBAAAA;AAC1E,OAAA;AACF,KAAC,CAAC,CAAA;AACJ,GAAC,EAAE,CAACP,SAAS,EAAEC,YAAY,EAAEI,WAAW,EAAEH,UAAU,EAAEC,SAAS,EAAEC,QAAQ,EAAEE,gBAAgB,EAAEC,gBAAgB,CAAC,CAAC,CAAA;AAE/G,EAAA,MAAMY,OAAO,GAAGC,OAAO,CACrB,OAAO;IACLZ,KAAK;AACLC,IAAAA,QAAAA;AACF,GAAC,CAAC,EACF,CAACD,KAAK,CACR,CAAC,CAAA;AAED,EAAA,oBAAOa,KAAA,CAAAC,aAAA,CAACC,uBAAuB,CAACC,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEN,OAAAA;AAAQ,GAAA,EAAEpB,QAA2C,CAAC,CAAA;AACxG;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from 'react';
|
|
2
2
|
|
|
3
3
|
const FOCUS_WITHING_GROUP_INITIAL_STATE = {
|
|
4
4
|
selectedId: null,
|
|
@@ -12,7 +12,7 @@ const FOCUS_WITHING_GROUP_INITIAL_STATE = {
|
|
|
12
12
|
focusType: 'roving-tabindex',
|
|
13
13
|
listRole: 'listbox'
|
|
14
14
|
};
|
|
15
|
-
const FocusWithinGroupContext = /*#__PURE__*/
|
|
15
|
+
const FocusWithinGroupContext = /*#__PURE__*/React.createContext({
|
|
16
16
|
state: FOCUS_WITHING_GROUP_INITIAL_STATE,
|
|
17
17
|
dispatch: () => {}
|
|
18
18
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context.js","sources":["../../../src/components/focus-within-group/context.ts"],"sourcesContent":["import React from 'react';\nimport { FocusWithinGroupContextProps, FocusWithinGroupState } from './types';\n\nexport const FOCUS_WITHING_GROUP_INITIAL_STATE: FocusWithinGroupState = {\n selectedId: null,\n allowFocusing: false,\n tabStops: [],\n direction: 'vertical',\n focusOnClick: false,\n focusOnInit: true,\n loopAround: false,\n rowStartMap: null,\n focusType: 'roving-tabindex',\n listRole: 'listbox',\n};\n\nexport const FocusWithinGroupContext = React.createContext<FocusWithinGroupContextProps>({\n state: FOCUS_WITHING_GROUP_INITIAL_STATE,\n dispatch: () => {},\n});\n"],"names":["FOCUS_WITHING_GROUP_INITIAL_STATE","selectedId","allowFocusing","tabStops","direction","focusOnClick","focusOnInit","loopAround","rowStartMap","focusType","listRole","FocusWithinGroupContext","React","createContext","state","dispatch"],"mappings":";;AAGO,MAAMA,iCAAwD,GAAG;AACtEC,EAAAA,UAAU,EAAE,IAAI;AAChBC,EAAAA,aAAa,EAAE,KAAK;AACpBC,EAAAA,QAAQ,EAAE,EAAE;AACZC,EAAAA,SAAS,EAAE,UAAU;AACrBC,EAAAA,YAAY,EAAE,KAAK;AACnBC,EAAAA,WAAW,EAAE,IAAI;AACjBC,EAAAA,UAAU,EAAE,KAAK;AACjBC,EAAAA,WAAW,EAAE,IAAI;AACjBC,EAAAA,SAAS,EAAE,iBAAiB;AAC5BC,EAAAA,QAAQ,EAAE,SAAA;AACZ,EAAC;MAEYC,uBAAuB,gBAAGC,
|
|
1
|
+
{"version":3,"file":"context.js","sources":["../../../src/components/focus-within-group/context.ts"],"sourcesContent":["import React from 'react';\nimport { FocusWithinGroupContextProps, FocusWithinGroupState } from './types';\n\nexport const FOCUS_WITHING_GROUP_INITIAL_STATE: FocusWithinGroupState = {\n selectedId: null,\n allowFocusing: false,\n tabStops: [],\n direction: 'vertical',\n focusOnClick: false,\n focusOnInit: true,\n loopAround: false,\n rowStartMap: null,\n focusType: 'roving-tabindex',\n listRole: 'listbox',\n};\n\nexport const FocusWithinGroupContext = React.createContext<FocusWithinGroupContextProps>({\n state: FOCUS_WITHING_GROUP_INITIAL_STATE,\n dispatch: () => {},\n});\n"],"names":["FOCUS_WITHING_GROUP_INITIAL_STATE","selectedId","allowFocusing","tabStops","direction","focusOnClick","focusOnInit","loopAround","rowStartMap","focusType","listRole","FocusWithinGroupContext","React","createContext","state","dispatch"],"mappings":";;AAGO,MAAMA,iCAAwD,GAAG;AACtEC,EAAAA,UAAU,EAAE,IAAI;AAChBC,EAAAA,aAAa,EAAE,KAAK;AACpBC,EAAAA,QAAQ,EAAE,EAAE;AACZC,EAAAA,SAAS,EAAE,UAAU;AACrBC,EAAAA,YAAY,EAAE,KAAK;AACnBC,EAAAA,WAAW,EAAE,IAAI;AACjBC,EAAAA,UAAU,EAAE,KAAK;AACjBC,EAAAA,WAAW,EAAE,IAAI;AACjBC,EAAAA,SAAS,EAAE,iBAAiB;AAC5BC,EAAAA,QAAQ,EAAE,SAAA;AACZ,EAAC;MAEYC,uBAAuB,gBAAGC,KAAK,CAACC,aAAa,CAA+B;AACvFC,EAAAA,KAAK,EAAEd,iCAAiC;EACxCe,QAAQ,EAAEA,MAAM,EAAC;AACnB,CAAC;;;;"}
|
package/components/grid/Grid.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
-
import
|
|
2
|
+
import React, { forwardRef } from 'react';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
4
|
import { StyledGrid } from './styles.js';
|
|
5
5
|
import { GridItem } from '../grid-item/GridItem.js';
|
|
@@ -23,11 +23,11 @@ const BaseGrid = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
23
23
|
} = props,
|
|
24
24
|
forwardedProps = _objectWithoutProperties(props, _excluded);
|
|
25
25
|
const theme = useTheme(propsTheme);
|
|
26
|
-
return /*#__PURE__*/
|
|
26
|
+
return /*#__PURE__*/React.createElement(ThemeProvider, {
|
|
27
27
|
value: {
|
|
28
28
|
theme
|
|
29
29
|
}
|
|
30
|
-
}, /*#__PURE__*/
|
|
30
|
+
}, /*#__PURE__*/React.createElement(StyledGrid, _extends({}, forwardedProps, {
|
|
31
31
|
gap: divider ? `${divider.rowGap}px ${divider.colGap}px` : gap,
|
|
32
32
|
className: classNames(BaseGrid.className, className),
|
|
33
33
|
ref: ref,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.js","sources":["../../../src/components/grid/Grid.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { StyledGrid } from './styles';\nimport { GridProps } from './types';\nimport { GridItem } from '../grid-item';\nimport { ThemeProvider, useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Grid';\nconst CLASSNAME = 'redsift-grid';\n\n/**\n * The Grid component.\n */\nexport const BaseGrid: Comp<GridProps, HTMLDivElement> = forwardRef((props, ref) => {\n const { children, className, divider, gap, theme: propsTheme, ...forwardedProps } = props;\n const theme = useTheme(propsTheme);\n\n return (\n <ThemeProvider value={{ theme }}>\n <StyledGrid\n {...forwardedProps}\n gap={divider ? `${divider.rowGap}px ${divider.colGap}px` : gap}\n className={classNames(BaseGrid.className, className)}\n ref={ref as RefObject<HTMLDivElement>}\n $divider={divider}\n $theme={theme}\n >\n {children}\n </StyledGrid>\n </ThemeProvider>\n );\n});\nBaseGrid.className = CLASSNAME;\nBaseGrid.displayName = COMPONENT_NAME;\n\nexport const Grid = Object.assign(BaseGrid, {\n Item: GridItem,\n});\n"],"names":["COMPONENT_NAME","CLASSNAME","BaseGrid","forwardRef","props","ref","children","className","divider","gap","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","useTheme","React","createElement","ThemeProvider","value","StyledGrid","_extends","rowGap","colGap","classNames","$divider","$theme","displayName","Grid","Object","assign","Item","GridItem"],"mappings":";;;;;;;;;AAQA,MAAMA,cAAc,GAAG,MAAM,CAAA;AAC7B,MAAMC,SAAS,GAAG,cAAc,CAAA;;AAEhC;AACA;AACA;AACO,MAAMC,QAAyC,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAClF,MAAM;MAAEC,QAAQ;MAAEC,SAAS;MAAEC,OAAO;MAAEC,GAAG;AAAEC,MAAAA,KAAK,EAAEC,UAAAA;AAA8B,KAAC,GAAGP,KAAK;AAAxBQ,IAAAA,cAAc,GAAAC,wBAAA,CAAKT,KAAK,EAAAU,SAAA,CAAA,CAAA;AACzF,EAAA,MAAMJ,KAAK,GAAGK,QAAQ,CAACJ,UAAU,CAAC,CAAA;AAElC,EAAA,oBACEK,
|
|
1
|
+
{"version":3,"file":"Grid.js","sources":["../../../src/components/grid/Grid.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { StyledGrid } from './styles';\nimport { GridProps } from './types';\nimport { GridItem } from '../grid-item';\nimport { ThemeProvider, useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Grid';\nconst CLASSNAME = 'redsift-grid';\n\n/**\n * The Grid component.\n */\nexport const BaseGrid: Comp<GridProps, HTMLDivElement> = forwardRef((props, ref) => {\n const { children, className, divider, gap, theme: propsTheme, ...forwardedProps } = props;\n const theme = useTheme(propsTheme);\n\n return (\n <ThemeProvider value={{ theme }}>\n <StyledGrid\n {...forwardedProps}\n gap={divider ? `${divider.rowGap}px ${divider.colGap}px` : gap}\n className={classNames(BaseGrid.className, className)}\n ref={ref as RefObject<HTMLDivElement>}\n $divider={divider}\n $theme={theme}\n >\n {children}\n </StyledGrid>\n </ThemeProvider>\n );\n});\nBaseGrid.className = CLASSNAME;\nBaseGrid.displayName = COMPONENT_NAME;\n\nexport const Grid = Object.assign(BaseGrid, {\n Item: GridItem,\n});\n"],"names":["COMPONENT_NAME","CLASSNAME","BaseGrid","forwardRef","props","ref","children","className","divider","gap","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","useTheme","React","createElement","ThemeProvider","value","StyledGrid","_extends","rowGap","colGap","classNames","$divider","$theme","displayName","Grid","Object","assign","Item","GridItem"],"mappings":";;;;;;;;;AAQA,MAAMA,cAAc,GAAG,MAAM,CAAA;AAC7B,MAAMC,SAAS,GAAG,cAAc,CAAA;;AAEhC;AACA;AACA;AACO,MAAMC,QAAyC,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAClF,MAAM;MAAEC,QAAQ;MAAEC,SAAS;MAAEC,OAAO;MAAEC,GAAG;AAAEC,MAAAA,KAAK,EAAEC,UAAAA;AAA8B,KAAC,GAAGP,KAAK;AAAxBQ,IAAAA,cAAc,GAAAC,wBAAA,CAAKT,KAAK,EAAAU,SAAA,CAAA,CAAA;AACzF,EAAA,MAAMJ,KAAK,GAAGK,QAAQ,CAACJ,UAAU,CAAC,CAAA;AAElC,EAAA,oBACEK,KAAA,CAAAC,aAAA,CAACC,aAAa,EAAA;AAACC,IAAAA,KAAK,EAAE;AAAET,MAAAA,KAAAA;AAAM,KAAA;GAC5BM,eAAAA,KAAA,CAAAC,aAAA,CAACG,UAAU,EAAAC,QAAA,KACLT,cAAc,EAAA;AAClBH,IAAAA,GAAG,EAAED,OAAO,GAAI,CAAA,EAAEA,OAAO,CAACc,MAAO,CAAA,GAAA,EAAKd,OAAO,CAACe,MAAO,CAAA,EAAA,CAAG,GAAGd,GAAI;IAC/DF,SAAS,EAAEiB,UAAU,CAACtB,QAAQ,CAACK,SAAS,EAAEA,SAAS,CAAE;AACrDF,IAAAA,GAAG,EAAEA,GAAiC;AACtCoB,IAAAA,QAAQ,EAAEjB,OAAQ;AAClBkB,IAAAA,MAAM,EAAEhB,KAAAA;GAEPJ,CAAAA,EAAAA,QACS,CACC,CAAC,CAAA;AAEpB,CAAC,EAAC;AACFJ,QAAQ,CAACK,SAAS,GAAGN,SAAS,CAAA;AAC9BC,QAAQ,CAACyB,WAAW,GAAG3B,cAAc,CAAA;AAE9B,MAAM4B,IAAI,GAAGC,MAAM,CAACC,MAAM,CAAC5B,QAAQ,EAAE;AAC1C6B,EAAAA,IAAI,EAAEC,QAAAA;AACR,CAAC;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
-
import
|
|
2
|
+
import React, { forwardRef } from 'react';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
4
|
import { StyledGridItem } from './styles.js';
|
|
5
5
|
|
|
@@ -16,7 +16,7 @@ const GridItem = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
16
16
|
className
|
|
17
17
|
} = props,
|
|
18
18
|
forwardedProps = _objectWithoutProperties(props, _excluded);
|
|
19
|
-
return /*#__PURE__*/
|
|
19
|
+
return /*#__PURE__*/React.createElement(StyledGridItem, _extends({}, forwardedProps, {
|
|
20
20
|
className: classNames(GridItem.className, className),
|
|
21
21
|
ref: ref
|
|
22
22
|
}), children);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GridItem.js","sources":["../../../src/components/grid-item/GridItem.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { StyledGridItem } from './styles';\nimport { GridItemProps } from './types';\n\nconst COMPONENT_NAME = 'GridItem';\nconst CLASSNAME = 'redsift-grid-item';\n\n/**\n * The GridItem component.\n */\nexport const GridItem: Comp<GridItemProps, HTMLDivElement> = forwardRef((props, ref) => {\n const { children, className, ...forwardedProps } = props;\n\n return (\n <StyledGridItem\n {...forwardedProps}\n className={classNames(GridItem.className, className)}\n ref={ref as RefObject<HTMLDivElement>}\n >\n {children}\n </StyledGridItem>\n );\n});\nGridItem.className = CLASSNAME;\nGridItem.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","GridItem","forwardRef","props","ref","children","className","forwardedProps","_objectWithoutProperties","_excluded","React","createElement","StyledGridItem","_extends","classNames","displayName"],"mappings":";;;;;;AAMA,MAAMA,cAAc,GAAG,UAAU,CAAA;AACjC,MAAMC,SAAS,GAAG,mBAAmB,CAAA;;AAErC;AACA;AACA;AACO,MAAMC,QAA6C,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACtF,MAAM;MAAEC,QAAQ;AAAEC,MAAAA,SAAAA;AAA6B,KAAC,GAAGH,KAAK;AAAxBI,IAAAA,cAAc,GAAAC,wBAAA,CAAKL,KAAK,EAAAM,SAAA,CAAA,CAAA;EAExD,oBACEC,
|
|
1
|
+
{"version":3,"file":"GridItem.js","sources":["../../../src/components/grid-item/GridItem.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { StyledGridItem } from './styles';\nimport { GridItemProps } from './types';\n\nconst COMPONENT_NAME = 'GridItem';\nconst CLASSNAME = 'redsift-grid-item';\n\n/**\n * The GridItem component.\n */\nexport const GridItem: Comp<GridItemProps, HTMLDivElement> = forwardRef((props, ref) => {\n const { children, className, ...forwardedProps } = props;\n\n return (\n <StyledGridItem\n {...forwardedProps}\n className={classNames(GridItem.className, className)}\n ref={ref as RefObject<HTMLDivElement>}\n >\n {children}\n </StyledGridItem>\n );\n});\nGridItem.className = CLASSNAME;\nGridItem.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","GridItem","forwardRef","props","ref","children","className","forwardedProps","_objectWithoutProperties","_excluded","React","createElement","StyledGridItem","_extends","classNames","displayName"],"mappings":";;;;;;AAMA,MAAMA,cAAc,GAAG,UAAU,CAAA;AACjC,MAAMC,SAAS,GAAG,mBAAmB,CAAA;;AAErC;AACA;AACA;AACO,MAAMC,QAA6C,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACtF,MAAM;MAAEC,QAAQ;AAAEC,MAAAA,SAAAA;AAA6B,KAAC,GAAGH,KAAK;AAAxBI,IAAAA,cAAc,GAAAC,wBAAA,CAAKL,KAAK,EAAAM,SAAA,CAAA,CAAA;EAExD,oBACEC,KAAA,CAAAC,aAAA,CAACC,cAAc,EAAAC,QAAA,KACTN,cAAc,EAAA;IAClBD,SAAS,EAAEQ,UAAU,CAACb,QAAQ,CAACK,SAAS,EAAEA,SAAS,CAAE;AACrDF,IAAAA,GAAG,EAAEA,GAAAA;AAAiC,GAAA,CAAA,EAErCC,QACa,CAAC,CAAA;AAErB,CAAC,EAAC;AACFJ,QAAQ,CAACK,SAAS,GAAGN,SAAS,CAAA;AAC9BC,QAAQ,CAACc,WAAW,GAAGhB,cAAc;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
-
import
|
|
2
|
+
import React, { forwardRef } from 'react';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
4
|
import { StyledHeading } from './styles.js';
|
|
5
5
|
import { FontFamily } from '../../types/fonts.js';
|
|
@@ -28,7 +28,7 @@ const Heading = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
28
28
|
} = props,
|
|
29
29
|
forwardedProps = _objectWithoutProperties(props, _excluded);
|
|
30
30
|
const theme = useTheme(propsTheme);
|
|
31
|
-
return /*#__PURE__*/
|
|
31
|
+
return /*#__PURE__*/React.createElement(StyledHeading, _extends({
|
|
32
32
|
as: as
|
|
33
33
|
}, forwardedProps, {
|
|
34
34
|
className: classNames(Heading.className, className),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Heading.js","sources":["../../../src/components/heading/Heading.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { Comp, FontFamily } from '../../types';\nimport { StyledHeading } from './styles';\nimport { HeadingProps } from './types';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Heading';\nconst CLASSNAME = 'redsift-heading';\n\n/**\n * The Heading component.\n */\nexport const Heading: Comp<HeadingProps, HTMLDivElement> = forwardRef((props, ref) => {\n const {\n as,\n children,\n className,\n color,\n fontFamily = FontFamily.poppins,\n fontSize,\n fontWeight,\n lineHeight,\n noWrap,\n theme: propsTheme,\n variant,\n ...forwardedProps\n } = props;\n\n const theme = useTheme(propsTheme);\n\n return (\n <StyledHeading\n as={as}\n {...forwardedProps}\n className={classNames(Heading.className, className)}\n ref={ref as RefObject<HTMLDivElement>}\n $noWrap={noWrap}\n $theme={theme}\n $color={color}\n $fontFamily={fontFamily}\n $fontSize={fontSize}\n $fontWeight={fontWeight}\n $lineHeight={lineHeight}\n $variant={variant ? variant : as === 'span' ? 'body' : as}\n >\n {children}\n </StyledHeading>\n );\n});\nHeading.className = CLASSNAME;\nHeading.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","Heading","forwardRef","props","ref","as","children","className","color","fontFamily","FontFamily","poppins","fontSize","fontWeight","lineHeight","noWrap","theme","propsTheme","variant","forwardedProps","_objectWithoutProperties","_excluded","useTheme","React","createElement","StyledHeading","_extends","classNames","$noWrap","$theme","$color","$fontFamily","$fontSize","$fontWeight","$lineHeight","$variant","displayName"],"mappings":";;;;;;;;AAOA,MAAMA,cAAc,GAAG,SAAS,CAAA;AAChC,MAAMC,SAAS,GAAG,iBAAiB,CAAA;;AAEnC;AACA;AACA;AACO,MAAMC,OAA2C,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACpF,MAAM;MACJC,EAAE;MACFC,QAAQ;MACRC,SAAS;MACTC,KAAK;MACLC,UAAU,GAAGC,UAAU,CAACC,OAAO;MAC/BC,QAAQ;MACRC,UAAU;MACVC,UAAU;MACVC,MAAM;AACNC,MAAAA,KAAK,EAAEC,UAAU;AACjBC,MAAAA,OAAAA;AAEF,KAAC,GAAGf,KAAK;AADJgB,IAAAA,cAAc,GAAAC,wBAAA,CACfjB,KAAK,EAAAkB,SAAA,CAAA,CAAA;AAET,EAAA,MAAML,KAAK,GAAGM,QAAQ,CAACL,UAAU,CAAC,CAAA;AAElC,EAAA,oBACEM,
|
|
1
|
+
{"version":3,"file":"Heading.js","sources":["../../../src/components/heading/Heading.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { Comp, FontFamily } from '../../types';\nimport { StyledHeading } from './styles';\nimport { HeadingProps } from './types';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Heading';\nconst CLASSNAME = 'redsift-heading';\n\n/**\n * The Heading component.\n */\nexport const Heading: Comp<HeadingProps, HTMLDivElement> = forwardRef((props, ref) => {\n const {\n as,\n children,\n className,\n color,\n fontFamily = FontFamily.poppins,\n fontSize,\n fontWeight,\n lineHeight,\n noWrap,\n theme: propsTheme,\n variant,\n ...forwardedProps\n } = props;\n\n const theme = useTheme(propsTheme);\n\n return (\n <StyledHeading\n as={as}\n {...forwardedProps}\n className={classNames(Heading.className, className)}\n ref={ref as RefObject<HTMLDivElement>}\n $noWrap={noWrap}\n $theme={theme}\n $color={color}\n $fontFamily={fontFamily}\n $fontSize={fontSize}\n $fontWeight={fontWeight}\n $lineHeight={lineHeight}\n $variant={variant ? variant : as === 'span' ? 'body' : as}\n >\n {children}\n </StyledHeading>\n );\n});\nHeading.className = CLASSNAME;\nHeading.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","Heading","forwardRef","props","ref","as","children","className","color","fontFamily","FontFamily","poppins","fontSize","fontWeight","lineHeight","noWrap","theme","propsTheme","variant","forwardedProps","_objectWithoutProperties","_excluded","useTheme","React","createElement","StyledHeading","_extends","classNames","$noWrap","$theme","$color","$fontFamily","$fontSize","$fontWeight","$lineHeight","$variant","displayName"],"mappings":";;;;;;;;AAOA,MAAMA,cAAc,GAAG,SAAS,CAAA;AAChC,MAAMC,SAAS,GAAG,iBAAiB,CAAA;;AAEnC;AACA;AACA;AACO,MAAMC,OAA2C,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACpF,MAAM;MACJC,EAAE;MACFC,QAAQ;MACRC,SAAS;MACTC,KAAK;MACLC,UAAU,GAAGC,UAAU,CAACC,OAAO;MAC/BC,QAAQ;MACRC,UAAU;MACVC,UAAU;MACVC,MAAM;AACNC,MAAAA,KAAK,EAAEC,UAAU;AACjBC,MAAAA,OAAAA;AAEF,KAAC,GAAGf,KAAK;AADJgB,IAAAA,cAAc,GAAAC,wBAAA,CACfjB,KAAK,EAAAkB,SAAA,CAAA,CAAA;AAET,EAAA,MAAML,KAAK,GAAGM,QAAQ,CAACL,UAAU,CAAC,CAAA;AAElC,EAAA,oBACEM,KAAA,CAAAC,aAAA,CAACC,aAAa,EAAAC,QAAA,CAAA;AACZrB,IAAAA,EAAE,EAAEA,EAAAA;AAAG,GAAA,EACHc,cAAc,EAAA;IAClBZ,SAAS,EAAEoB,UAAU,CAAC1B,OAAO,CAACM,SAAS,EAAEA,SAAS,CAAE;AACpDH,IAAAA,GAAG,EAAEA,GAAiC;AACtCwB,IAAAA,OAAO,EAAEb,MAAO;AAChBc,IAAAA,MAAM,EAAEb,KAAM;AACdc,IAAAA,MAAM,EAAEtB,KAAM;AACduB,IAAAA,WAAW,EAAEtB,UAAW;AACxBuB,IAAAA,SAAS,EAAEpB,QAAS;AACpBqB,IAAAA,WAAW,EAAEpB,UAAW;AACxBqB,IAAAA,WAAW,EAAEpB,UAAW;IACxBqB,QAAQ,EAAEjB,OAAO,GAAGA,OAAO,GAAGb,EAAE,KAAK,MAAM,GAAG,MAAM,GAAGA,EAAAA;AAAG,GAAA,CAAA,EAEzDC,QACY,CAAC,CAAA;AAEpB,CAAC,EAAC;AACFL,OAAO,CAACM,SAAS,GAAGP,SAAS,CAAA;AAC7BC,OAAO,CAACmC,WAAW,GAAGrC,cAAc;;;;"}
|
package/components/icon/Icon.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
-
import
|
|
2
|
+
import React, { forwardRef } from 'react';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
4
|
import { StyledIcon } from './styles.js';
|
|
5
5
|
import { IconSize } from './types.js';
|
|
@@ -82,7 +82,7 @@ const Icon = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
82
82
|
fontSize,
|
|
83
83
|
lineHeight
|
|
84
84
|
} = sizeToDimension(size);
|
|
85
|
-
return /*#__PURE__*/
|
|
85
|
+
return /*#__PURE__*/React.createElement(StyledIcon, _extends({}, forwardedProps, {
|
|
86
86
|
$color: color,
|
|
87
87
|
$width: width,
|
|
88
88
|
$height: height,
|
|
@@ -93,13 +93,13 @@ const Icon = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
93
93
|
"aria-label": ariaLabel,
|
|
94
94
|
className: classNames(Icon.className, className, color ? 'colored' : undefined),
|
|
95
95
|
ref: ref
|
|
96
|
-
}), /*#__PURE__*/
|
|
96
|
+
}), /*#__PURE__*/React.cloneElement(typeof icon === 'string' || Array.isArray(icon) && icon.every(it => typeof it === 'string') ? /*#__PURE__*/React.createElement("svg", {
|
|
97
97
|
viewBox: "0 0 24 24"
|
|
98
|
-
}, (Array.isArray(icon) ? icon : [icon]).map(path => /*#__PURE__*/
|
|
98
|
+
}, (Array.isArray(icon) ? icon : [icon]).map(path => /*#__PURE__*/React.createElement("path", {
|
|
99
99
|
key: path,
|
|
100
100
|
d: path,
|
|
101
101
|
fill: "currentColor"
|
|
102
|
-
}))) : /*#__PURE__*/
|
|
102
|
+
}))) : /*#__PURE__*/React.isValidElement(icon) ? icon : /*#__PURE__*/React.createElement(React.Fragment, null), _objectSpread2({
|
|
103
103
|
'aria-hidden': ariaLabel ? ariaHidden ? ariaHidden : undefined : true,
|
|
104
104
|
'aria-label': ariaLabel,
|
|
105
105
|
focusable: 'false',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","sources":["../../../src/components/icon/Icon.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { StyledIcon } from './styles';\nimport { IconDimensions, IconProps, IconSize } from './types';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Icon';\nconst CLASSNAME = 'redsift-icon';\n\nexport const sizeToDimension = (size: IconSize | IconDimensions): IconDimensions => {\n if (typeof size !== 'string') {\n return size;\n }\n\n switch (size) {\n case IconSize.xsmall:\n return { width: 16, height: 16, fontSize: 16, lineHeight: 16 };\n case IconSize.small:\n return { width: 20, height: 20, fontSize: 20, lineHeight: 20 };\n case IconSize.medium:\n default:\n return { width: 24, height: 24, fontSize: 24, lineHeight: 24 };\n case IconSize.large:\n return { width: 30, height: 30, fontSize: 30, lineHeight: 30 };\n case IconSize.xlarge:\n return { width: 40, height: 40, fontSize: 40, lineHeight: 40 };\n case IconSize.xxlarge:\n return { width: 55, height: 55, fontSize: 55, lineHeight: 55 };\n }\n};\n\n/**\n * The Icon component.\n */\nexport const Icon: Comp<IconProps, HTMLSpanElement> = forwardRef((props, ref) => {\n const {\n 'aria-hidden': ariaHidden,\n 'aria-label': ariaLabel,\n badge,\n className,\n color,\n icon,\n size = IconSize.medium,\n svgProps,\n theme: propsTheme,\n ...forwardedProps\n } = props;\n\n const theme = useTheme(propsTheme);\n\n const { width, height, fontSize, lineHeight } = sizeToDimension(size!);\n\n return (\n <StyledIcon\n {...forwardedProps}\n $color={color}\n $width={width}\n $height={height}\n $fontSize={fontSize}\n $lineHeight={lineHeight}\n $theme={theme}\n aria-hidden={ariaLabel ? (ariaHidden ? ariaHidden : undefined) : true}\n aria-label={ariaLabel}\n className={classNames(Icon.className, className, color ? 'colored' : undefined)}\n ref={ref as RefObject<HTMLSpanElement>}\n >\n {React.cloneElement(\n typeof icon === 'string' || (Array.isArray(icon) && icon.every((it) => typeof it === 'string')) ? (\n <svg viewBox=\"0 0 24 24\">\n {(Array.isArray(icon) ? icon : [icon]).map((path) => (\n <path key={path} d={path} fill=\"currentColor\" />\n ))}\n </svg>\n ) : React.isValidElement(icon) ? (\n icon\n ) : (\n <></>\n ),\n {\n 'aria-hidden': ariaLabel ? (ariaHidden ? ariaHidden : undefined) : true,\n 'aria-label': ariaLabel,\n focusable: 'false',\n height,\n preserveAspectRatio: 'xMidYMid meet',\n role: 'img',\n width,\n ...svgProps,\n }\n )}\n {badge ? badge : null}\n </StyledIcon>\n );\n});\nIcon.className = CLASSNAME;\nIcon.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","sizeToDimension","size","IconSize","xsmall","width","height","fontSize","lineHeight","small","medium","large","xlarge","xxlarge","Icon","forwardRef","props","ref","ariaHidden","ariaLabel","badge","className","color","icon","svgProps","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","useTheme","React","createElement","StyledIcon","_extends","$color","$width","$height","$fontSize","$lineHeight","$theme","undefined","classNames","cloneElement","Array","isArray","every","it","viewBox","map","path","key","d","fill","isValidElement","Fragment","_objectSpread","focusable","preserveAspectRatio","role","displayName"],"mappings":";;;;;;;;AAOA,MAAMA,cAAc,GAAG,MAAM,CAAA;AAC7B,MAAMC,SAAS,GAAG,cAAc,CAAA;AAEnBC,MAAAA,eAAe,GAAIC,IAA+B,IAAqB;AAClF,EAAA,IAAI,OAAOA,IAAI,KAAK,QAAQ,EAAE;AAC5B,IAAA,OAAOA,IAAI,CAAA;AACb,GAAA;AAEA,EAAA,QAAQA,IAAI;IACV,KAAKC,QAAQ,CAACC,MAAM;MAClB,OAAO;AAAEC,QAAAA,KAAK,EAAE,EAAE;AAAEC,QAAAA,MAAM,EAAE,EAAE;AAAEC,QAAAA,QAAQ,EAAE,EAAE;AAAEC,QAAAA,UAAU,EAAE,EAAA;OAAI,CAAA;IAChE,KAAKL,QAAQ,CAACM,KAAK;MACjB,OAAO;AAAEJ,QAAAA,KAAK,EAAE,EAAE;AAAEC,QAAAA,MAAM,EAAE,EAAE;AAAEC,QAAAA,QAAQ,EAAE,EAAE;AAAEC,QAAAA,UAAU,EAAE,EAAA;OAAI,CAAA;IAChE,KAAKL,QAAQ,CAACO,MAAM,CAAA;AACpB,IAAA;MACE,OAAO;AAAEL,QAAAA,KAAK,EAAE,EAAE;AAAEC,QAAAA,MAAM,EAAE,EAAE;AAAEC,QAAAA,QAAQ,EAAE,EAAE;AAAEC,QAAAA,UAAU,EAAE,EAAA;OAAI,CAAA;IAChE,KAAKL,QAAQ,CAACQ,KAAK;MACjB,OAAO;AAAEN,QAAAA,KAAK,EAAE,EAAE;AAAEC,QAAAA,MAAM,EAAE,EAAE;AAAEC,QAAAA,QAAQ,EAAE,EAAE;AAAEC,QAAAA,UAAU,EAAE,EAAA;OAAI,CAAA;IAChE,KAAKL,QAAQ,CAACS,MAAM;MAClB,OAAO;AAAEP,QAAAA,KAAK,EAAE,EAAE;AAAEC,QAAAA,MAAM,EAAE,EAAE;AAAEC,QAAAA,QAAQ,EAAE,EAAE;AAAEC,QAAAA,UAAU,EAAE,EAAA;OAAI,CAAA;IAChE,KAAKL,QAAQ,CAACU,OAAO;MACnB,OAAO;AAAER,QAAAA,KAAK,EAAE,EAAE;AAAEC,QAAAA,MAAM,EAAE,EAAE;AAAEC,QAAAA,QAAQ,EAAE,EAAE;AAAEC,QAAAA,UAAU,EAAE,EAAA;OAAI,CAAA;AAClE,GAAA;AACF,EAAC;;AAED;AACA;AACA;AACO,MAAMM,IAAsC,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC/E,MAAM;AACJ,MAAA,aAAa,EAAEC,UAAU;AACzB,MAAA,YAAY,EAAEC,SAAS;MACvBC,KAAK;MACLC,SAAS;MACTC,KAAK;MACLC,IAAI;MACJrB,IAAI,GAAGC,QAAQ,CAACO,MAAM;MACtBc,QAAQ;AACRC,MAAAA,KAAK,EAAEC,UAAAA;AAET,KAAC,GAAGV,KAAK;AADJW,IAAAA,cAAc,GAAAC,wBAAA,CACfZ,KAAK,EAAAa,SAAA,CAAA,CAAA;AAET,EAAA,MAAMJ,KAAK,GAAGK,QAAQ,CAACJ,UAAU,CAAC,CAAA;EAElC,MAAM;IAAErB,KAAK;IAAEC,MAAM;IAAEC,QAAQ;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAGP,eAAe,CAACC,IAAK,CAAC,CAAA;EAEtE,oBACE6B,
|
|
1
|
+
{"version":3,"file":"Icon.js","sources":["../../../src/components/icon/Icon.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { StyledIcon } from './styles';\nimport { IconDimensions, IconProps, IconSize } from './types';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Icon';\nconst CLASSNAME = 'redsift-icon';\n\nexport const sizeToDimension = (size: IconSize | IconDimensions): IconDimensions => {\n if (typeof size !== 'string') {\n return size;\n }\n\n switch (size) {\n case IconSize.xsmall:\n return { width: 16, height: 16, fontSize: 16, lineHeight: 16 };\n case IconSize.small:\n return { width: 20, height: 20, fontSize: 20, lineHeight: 20 };\n case IconSize.medium:\n default:\n return { width: 24, height: 24, fontSize: 24, lineHeight: 24 };\n case IconSize.large:\n return { width: 30, height: 30, fontSize: 30, lineHeight: 30 };\n case IconSize.xlarge:\n return { width: 40, height: 40, fontSize: 40, lineHeight: 40 };\n case IconSize.xxlarge:\n return { width: 55, height: 55, fontSize: 55, lineHeight: 55 };\n }\n};\n\n/**\n * The Icon component.\n */\nexport const Icon: Comp<IconProps, HTMLSpanElement> = forwardRef((props, ref) => {\n const {\n 'aria-hidden': ariaHidden,\n 'aria-label': ariaLabel,\n badge,\n className,\n color,\n icon,\n size = IconSize.medium,\n svgProps,\n theme: propsTheme,\n ...forwardedProps\n } = props;\n\n const theme = useTheme(propsTheme);\n\n const { width, height, fontSize, lineHeight } = sizeToDimension(size!);\n\n return (\n <StyledIcon\n {...forwardedProps}\n $color={color}\n $width={width}\n $height={height}\n $fontSize={fontSize}\n $lineHeight={lineHeight}\n $theme={theme}\n aria-hidden={ariaLabel ? (ariaHidden ? ariaHidden : undefined) : true}\n aria-label={ariaLabel}\n className={classNames(Icon.className, className, color ? 'colored' : undefined)}\n ref={ref as RefObject<HTMLSpanElement>}\n >\n {React.cloneElement(\n typeof icon === 'string' || (Array.isArray(icon) && icon.every((it) => typeof it === 'string')) ? (\n <svg viewBox=\"0 0 24 24\">\n {(Array.isArray(icon) ? icon : [icon]).map((path) => (\n <path key={path} d={path} fill=\"currentColor\" />\n ))}\n </svg>\n ) : React.isValidElement(icon) ? (\n icon\n ) : (\n <></>\n ),\n {\n 'aria-hidden': ariaLabel ? (ariaHidden ? ariaHidden : undefined) : true,\n 'aria-label': ariaLabel,\n focusable: 'false',\n height,\n preserveAspectRatio: 'xMidYMid meet',\n role: 'img',\n width,\n ...svgProps,\n }\n )}\n {badge ? badge : null}\n </StyledIcon>\n );\n});\nIcon.className = CLASSNAME;\nIcon.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","sizeToDimension","size","IconSize","xsmall","width","height","fontSize","lineHeight","small","medium","large","xlarge","xxlarge","Icon","forwardRef","props","ref","ariaHidden","ariaLabel","badge","className","color","icon","svgProps","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","useTheme","React","createElement","StyledIcon","_extends","$color","$width","$height","$fontSize","$lineHeight","$theme","undefined","classNames","cloneElement","Array","isArray","every","it","viewBox","map","path","key","d","fill","isValidElement","Fragment","_objectSpread","focusable","preserveAspectRatio","role","displayName"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
-
import
|
|
2
|
+
import React, { forwardRef, useRef } from 'react';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
4
|
import { warnIfNoAccessibleLabelFound } from '../../utils/warnIfNoAccessibleLabelFound.js';
|
|
5
5
|
import { StyledIconButton } from './styles.js';
|
|
@@ -43,16 +43,16 @@ const IconButton = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
43
43
|
const variant = Object.values(IconButtonVariant).includes(propsVariant) ? propsVariant : 'unstyled';
|
|
44
44
|
warnIfNoAccessibleLabelFound(props, undefined, 'IconButton');
|
|
45
45
|
const isGradient = color === ButtonsColorPalette.radar;
|
|
46
|
-
return /*#__PURE__*/
|
|
46
|
+
return /*#__PURE__*/React.createElement(ConditionalWrapper, {
|
|
47
47
|
condition: isGradient && variant === IconButtonVariant.secondary,
|
|
48
|
-
wrapper: children => /*#__PURE__*/
|
|
48
|
+
wrapper: children => /*#__PURE__*/React.createElement(StyledGradientBorder, {
|
|
49
49
|
$color: color,
|
|
50
50
|
$isActive: isActive,
|
|
51
51
|
$isDisabled: isDisabled,
|
|
52
52
|
$isHovered: isHovered,
|
|
53
53
|
$theme: theme
|
|
54
54
|
}, children)
|
|
55
|
-
}, /*#__PURE__*/
|
|
55
|
+
}, /*#__PURE__*/React.createElement(StyledIconButton, _extends({
|
|
56
56
|
type: "button"
|
|
57
57
|
}, forwardedProps, {
|
|
58
58
|
$color: color,
|
|
@@ -67,10 +67,10 @@ const IconButton = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
67
67
|
className: classNames(IconButton.className, className),
|
|
68
68
|
disabled: isDisabled,
|
|
69
69
|
ref: buttonRef
|
|
70
|
-
}), isLoading ? /*#__PURE__*/
|
|
70
|
+
}), isLoading ? /*#__PURE__*/React.createElement(Spinner, {
|
|
71
71
|
size: "small",
|
|
72
72
|
color: variant === IconButtonVariant.primary ? 'grey-l1' : 'grey-l2'
|
|
73
|
-
}) : /*#__PURE__*/
|
|
73
|
+
}) : /*#__PURE__*/React.createElement(Icon, _extends({}, iconProps, {
|
|
74
74
|
icon: icon
|
|
75
75
|
}))));
|
|
76
76
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.js","sources":["../../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["import React, { forwardRef, RefObject, useRef } from 'react';\nimport classNames from 'classnames';\nimport { ButtonsColorPalette, Comp } from '../../types';\nimport { Icon } from '../icon';\nimport { warnIfNoAccessibleLabelFound } from '../../utils/warnIfNoAccessibleLabelFound';\nimport { StyledIconButton } from './styles';\nimport { IconButtonProps, IconButtonVariant } from './types';\nimport { Spinner } from '../../components/spinner';\nimport { useTheme } from '../theme';\nimport { ConditionalWrapper } from '../conditional-wrapper';\nimport { StyledGradientBorder } from '../gradient-border';\n\nconst COMPONENT_NAME = 'IconButton';\nconst CLASSNAME = 'redsift-icon-button';\n\n/**\n * The Icon Button is a component that contains only one icon as a child, without text.\n *\n * This component should use aria-label, aria-labelledby or aria-describedby to make this\n * component usable with a screen reader.\n */\nexport const IconButton: Comp<IconButtonProps, HTMLButtonElement> = forwardRef((props, ref) => {\n const buttonRef = ref || useRef<HTMLButtonElement>();\n\n const {\n className,\n color: propsColor,\n disabled,\n icon,\n iconProps,\n isActive,\n isDisabled: propsIsDisabled,\n isHovered,\n isLoading,\n theme: propsTheme,\n variant: propsVariant,\n ...forwardedProps\n } = props;\n const isDisabled = props.isLoading || propsIsDisabled || disabled;\n\n const theme = useTheme(propsTheme);\n const color = Object.values(ButtonsColorPalette).includes(propsColor!) ? propsColor : 'primary';\n const variant = Object.values(IconButtonVariant).includes(propsVariant!) ? propsVariant : 'unstyled';\n\n warnIfNoAccessibleLabelFound(props, undefined, 'IconButton');\n const isGradient = color === ButtonsColorPalette.radar;\n\n return (\n <ConditionalWrapper\n condition={isGradient && variant === IconButtonVariant.secondary}\n wrapper={(children) => (\n <StyledGradientBorder\n $color={color}\n $isActive={isActive}\n $isDisabled={isDisabled}\n $isHovered={isHovered}\n $theme={theme}\n >\n {children}\n </StyledGradientBorder>\n )}\n >\n <StyledIconButton\n type=\"button\"\n {...forwardedProps}\n $color={color}\n $isActive={isActive}\n $isDisabled={isDisabled}\n $isGradient={isGradient}\n $isHovered={isHovered}\n $isLoading={isLoading}\n $theme={theme}\n $variant={variant}\n aria-disabled={isDisabled}\n className={classNames(IconButton.className, className)}\n disabled={isDisabled}\n ref={buttonRef as RefObject<HTMLButtonElement>}\n >\n {isLoading ? (\n <Spinner size=\"small\" color={variant === IconButtonVariant.primary ? 'grey-l1' : 'grey-l2'} />\n ) : (\n <Icon {...iconProps} icon={icon} />\n )}\n </StyledIconButton>\n </ConditionalWrapper>\n );\n});\nIconButton.className = CLASSNAME;\nIconButton.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","IconButton","forwardRef","props","ref","buttonRef","useRef","className","color","propsColor","disabled","icon","iconProps","isActive","isDisabled","propsIsDisabled","isHovered","isLoading","theme","propsTheme","variant","propsVariant","forwardedProps","_objectWithoutProperties","_excluded","useTheme","Object","values","ButtonsColorPalette","includes","IconButtonVariant","warnIfNoAccessibleLabelFound","undefined","isGradient","radar","React","createElement","ConditionalWrapper","condition","secondary","wrapper","children","StyledGradientBorder","$color","$isActive","$isDisabled","$isHovered","$theme","StyledIconButton","_extends","type","$isGradient","$isLoading","$variant","classNames","Spinner","size","primary","Icon","displayName"],"mappings":";;;;;;;;;;;;;;AAYA,MAAMA,cAAc,GAAG,YAAY,CAAA;AACnC,MAAMC,SAAS,GAAG,qBAAqB,CAAA;;AAEvC;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,UAAoD,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;AAC7F,EAAA,MAAMC,SAAS,GAAGD,GAAG,IAAIE,MAAM,EAAqB,CAAA;EAEpD,MAAM;MACJC,SAAS;AACTC,MAAAA,KAAK,EAAEC,UAAU;MACjBC,QAAQ;MACRC,IAAI;MACJC,SAAS;MACTC,QAAQ;AACRC,MAAAA,UAAU,EAAEC,eAAe;MAC3BC,SAAS;MACTC,SAAS;AACTC,MAAAA,KAAK,EAAEC,UAAU;AACjBC,MAAAA,OAAO,EAAEC,YAAAA;AAEX,KAAC,GAAGlB,KAAK;AADJmB,IAAAA,cAAc,GAAAC,wBAAA,CACfpB,KAAK,EAAAqB,SAAA,CAAA,CAAA;EACT,MAAMV,UAAU,GAAGX,KAAK,CAACc,SAAS,IAAIF,eAAe,IAAIL,QAAQ,CAAA;AAEjE,EAAA,MAAMQ,KAAK,GAAGO,QAAQ,CAACN,UAAU,CAAC,CAAA;AAClC,EAAA,MAAMX,KAAK,GAAGkB,MAAM,CAACC,MAAM,CAACC,mBAAmB,CAAC,CAACC,QAAQ,CAACpB,UAAW,CAAC,GAAGA,UAAU,GAAG,SAAS,CAAA;AAC/F,EAAA,MAAMW,OAAO,GAAGM,MAAM,CAACC,MAAM,CAACG,iBAAiB,CAAC,CAACD,QAAQ,CAACR,YAAa,CAAC,GAAGA,YAAY,GAAG,UAAU,CAAA;AAEpGU,EAAAA,4BAA4B,CAAC5B,KAAK,EAAE6B,SAAS,EAAE,YAAY,CAAC,CAAA;AAC5D,EAAA,MAAMC,UAAU,GAAGzB,KAAK,KAAKoB,mBAAmB,CAACM,KAAK,CAAA;AAEtD,EAAA,oBACEC,
|
|
1
|
+
{"version":3,"file":"IconButton.js","sources":["../../../src/components/icon-button/IconButton.tsx"],"sourcesContent":["import React, { forwardRef, RefObject, useRef } from 'react';\nimport classNames from 'classnames';\nimport { ButtonsColorPalette, Comp } from '../../types';\nimport { Icon } from '../icon';\nimport { warnIfNoAccessibleLabelFound } from '../../utils/warnIfNoAccessibleLabelFound';\nimport { StyledIconButton } from './styles';\nimport { IconButtonProps, IconButtonVariant } from './types';\nimport { Spinner } from '../../components/spinner';\nimport { useTheme } from '../theme';\nimport { ConditionalWrapper } from '../conditional-wrapper';\nimport { StyledGradientBorder } from '../gradient-border';\n\nconst COMPONENT_NAME = 'IconButton';\nconst CLASSNAME = 'redsift-icon-button';\n\n/**\n * The Icon Button is a component that contains only one icon as a child, without text.\n *\n * This component should use aria-label, aria-labelledby or aria-describedby to make this\n * component usable with a screen reader.\n */\nexport const IconButton: Comp<IconButtonProps, HTMLButtonElement> = forwardRef((props, ref) => {\n const buttonRef = ref || useRef<HTMLButtonElement>();\n\n const {\n className,\n color: propsColor,\n disabled,\n icon,\n iconProps,\n isActive,\n isDisabled: propsIsDisabled,\n isHovered,\n isLoading,\n theme: propsTheme,\n variant: propsVariant,\n ...forwardedProps\n } = props;\n const isDisabled = props.isLoading || propsIsDisabled || disabled;\n\n const theme = useTheme(propsTheme);\n const color = Object.values(ButtonsColorPalette).includes(propsColor!) ? propsColor : 'primary';\n const variant = Object.values(IconButtonVariant).includes(propsVariant!) ? propsVariant : 'unstyled';\n\n warnIfNoAccessibleLabelFound(props, undefined, 'IconButton');\n const isGradient = color === ButtonsColorPalette.radar;\n\n return (\n <ConditionalWrapper\n condition={isGradient && variant === IconButtonVariant.secondary}\n wrapper={(children) => (\n <StyledGradientBorder\n $color={color}\n $isActive={isActive}\n $isDisabled={isDisabled}\n $isHovered={isHovered}\n $theme={theme}\n >\n {children}\n </StyledGradientBorder>\n )}\n >\n <StyledIconButton\n type=\"button\"\n {...forwardedProps}\n $color={color}\n $isActive={isActive}\n $isDisabled={isDisabled}\n $isGradient={isGradient}\n $isHovered={isHovered}\n $isLoading={isLoading}\n $theme={theme}\n $variant={variant}\n aria-disabled={isDisabled}\n className={classNames(IconButton.className, className)}\n disabled={isDisabled}\n ref={buttonRef as RefObject<HTMLButtonElement>}\n >\n {isLoading ? (\n <Spinner size=\"small\" color={variant === IconButtonVariant.primary ? 'grey-l1' : 'grey-l2'} />\n ) : (\n <Icon {...iconProps} icon={icon} />\n )}\n </StyledIconButton>\n </ConditionalWrapper>\n );\n});\nIconButton.className = CLASSNAME;\nIconButton.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","IconButton","forwardRef","props","ref","buttonRef","useRef","className","color","propsColor","disabled","icon","iconProps","isActive","isDisabled","propsIsDisabled","isHovered","isLoading","theme","propsTheme","variant","propsVariant","forwardedProps","_objectWithoutProperties","_excluded","useTheme","Object","values","ButtonsColorPalette","includes","IconButtonVariant","warnIfNoAccessibleLabelFound","undefined","isGradient","radar","React","createElement","ConditionalWrapper","condition","secondary","wrapper","children","StyledGradientBorder","$color","$isActive","$isDisabled","$isHovered","$theme","StyledIconButton","_extends","type","$isGradient","$isLoading","$variant","classNames","Spinner","size","primary","Icon","displayName"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
-
import
|
|
2
|
+
import React, { forwardRef } from 'react';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
4
|
import { StyledGradientBorder } from '../gradient-border/index.js';
|
|
5
5
|
import { StyledIconButton } from '../icon-button/styles.js';
|
|
@@ -40,16 +40,16 @@ const IconButtonLink = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
40
40
|
const color = Object.values(ButtonsColorPalette).includes(propsColor) ? propsColor : 'primary';
|
|
41
41
|
const variant = Object.values(IconButtonVariant).includes(propsVariant) ? propsVariant : 'unstyled';
|
|
42
42
|
const isGradient = color === ButtonsColorPalette.radar;
|
|
43
|
-
return /*#__PURE__*/
|
|
43
|
+
return /*#__PURE__*/React.createElement(ConditionalWrapper, {
|
|
44
44
|
condition: isGradient && variant === IconButtonVariant.secondary,
|
|
45
|
-
wrapper: children => /*#__PURE__*/
|
|
45
|
+
wrapper: children => /*#__PURE__*/React.createElement(StyledGradientBorder, {
|
|
46
46
|
$color: color,
|
|
47
47
|
$isActive: isActive,
|
|
48
48
|
$isDisabled: isDisabled,
|
|
49
49
|
$isHovered: isHovered,
|
|
50
50
|
$theme: theme
|
|
51
51
|
}, children)
|
|
52
|
-
}, /*#__PURE__*/
|
|
52
|
+
}, /*#__PURE__*/React.createElement(StyledIconButton, _extends({
|
|
53
53
|
as: as || 'a',
|
|
54
54
|
role: "link",
|
|
55
55
|
tabIndex: !isDisabled ? 0 : undefined
|
|
@@ -65,7 +65,7 @@ const IconButtonLink = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
65
65
|
href: !isDisabled ? href : undefined,
|
|
66
66
|
ref: ref,
|
|
67
67
|
target: target
|
|
68
|
-
}), /*#__PURE__*/
|
|
68
|
+
}), /*#__PURE__*/React.createElement(Icon, _extends({}, iconProps, {
|
|
69
69
|
icon: icon
|
|
70
70
|
}))));
|
|
71
71
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButtonLink.js","sources":["../../../src/components/icon-button-link/IconButtonLink.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { Comp, ButtonsColorPalette } from '../../types';\nimport { Icon } from '../icon';\nimport { IconButtonLinkProps } from './types';\nimport { useTheme } from '../theme';\nimport { ConditionalWrapper } from '../conditional-wrapper';\nimport { StyledGradientBorder } from '../gradient-border';\nimport { StyledIconButton } from '../icon-button/styles';\nimport { IconButtonVariant } from '../icon-button/types';\n\nconst COMPONENT_NAME = 'IconButtonLink';\nconst CLASSNAME = 'redsift-icon-button-link';\n\n/**\n * The IconButtonLink is a semantic link that looks like an icon button.\n *\n * For a semantic button that looks like an icon button, please use the IconButton component.\n * For a semantic link that looks like a link, please use the Link component.\n * For a semantic button that looks like a link, please use the LinkButton component.\n */\nexport const IconButtonLink: Comp<IconButtonLinkProps, HTMLAnchorElement> = forwardRef((props, ref) => {\n const {\n as,\n className,\n color: propsColor,\n href,\n icon,\n iconProps,\n isActive,\n isDisabled,\n isHovered,\n target,\n theme: propsTheme,\n variant: propsVariant,\n ...forwardedProps\n } = props;\n\n const theme = useTheme(propsTheme);\n const color = Object.values(ButtonsColorPalette).includes(propsColor!) ? propsColor : 'primary';\n const variant = Object.values(IconButtonVariant).includes(propsVariant!) ? propsVariant : 'unstyled';\n const isGradient = color === ButtonsColorPalette.radar;\n\n return (\n <ConditionalWrapper\n condition={isGradient && variant === IconButtonVariant.secondary}\n wrapper={(children) => (\n <StyledGradientBorder\n $color={color}\n $isActive={isActive}\n $isDisabled={isDisabled}\n $isHovered={isHovered}\n $theme={theme}\n >\n {children}\n </StyledGradientBorder>\n )}\n >\n <StyledIconButton\n as={(as || 'a') as any}\n role=\"link\"\n tabIndex={!isDisabled ? 0 : undefined}\n {...forwardedProps}\n $color={color}\n $isActive={isActive}\n $isDisabled={isDisabled}\n $isGradient={isGradient}\n $isHovered={isHovered}\n $theme={theme}\n $variant={variant}\n className={classNames(IconButtonLink.className, className)}\n href={!isDisabled ? href : undefined}\n ref={ref as RefObject<HTMLAnchorElement>}\n target={target}\n >\n <Icon {...iconProps} icon={icon} />\n </StyledIconButton>\n </ConditionalWrapper>\n );\n});\nIconButtonLink.className = CLASSNAME;\nIconButtonLink.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","IconButtonLink","forwardRef","props","ref","as","className","color","propsColor","href","icon","iconProps","isActive","isDisabled","isHovered","target","theme","propsTheme","variant","propsVariant","forwardedProps","_objectWithoutProperties","_excluded","useTheme","Object","values","ButtonsColorPalette","includes","IconButtonVariant","isGradient","radar","React","createElement","ConditionalWrapper","condition","secondary","wrapper","children","StyledGradientBorder","$color","$isActive","$isDisabled","$isHovered","$theme","StyledIconButton","_extends","role","tabIndex","undefined","$isGradient","$variant","classNames","Icon","displayName"],"mappings":";;;;;;;;;;;;AAWA,MAAMA,cAAc,GAAG,gBAAgB,CAAA;AACvC,MAAMC,SAAS,GAAG,0BAA0B,CAAA;;AAE5C;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,cAA4D,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACrG,MAAM;MACJC,EAAE;MACFC,SAAS;AACTC,MAAAA,KAAK,EAAEC,UAAU;MACjBC,IAAI;MACJC,IAAI;MACJC,SAAS;MACTC,QAAQ;MACRC,UAAU;MACVC,SAAS;MACTC,MAAM;AACNC,MAAAA,KAAK,EAAEC,UAAU;AACjBC,MAAAA,OAAO,EAAEC,YAAAA;AAEX,KAAC,GAAGhB,KAAK;AADJiB,IAAAA,cAAc,GAAAC,wBAAA,CACflB,KAAK,EAAAmB,SAAA,CAAA,CAAA;AAET,EAAA,MAAMN,KAAK,GAAGO,QAAQ,CAACN,UAAU,CAAC,CAAA;AAClC,EAAA,MAAMV,KAAK,GAAGiB,MAAM,CAACC,MAAM,CAACC,mBAAmB,CAAC,CAACC,QAAQ,CAACnB,UAAW,CAAC,GAAGA,UAAU,GAAG,SAAS,CAAA;AAC/F,EAAA,MAAMU,OAAO,GAAGM,MAAM,CAACC,MAAM,CAACG,iBAAiB,CAAC,CAACD,QAAQ,CAACR,YAAa,CAAC,GAAGA,YAAY,GAAG,UAAU,CAAA;AACpG,EAAA,MAAMU,UAAU,GAAGtB,KAAK,KAAKmB,mBAAmB,CAACI,KAAK,CAAA;AAEtD,EAAA,oBACEC,
|
|
1
|
+
{"version":3,"file":"IconButtonLink.js","sources":["../../../src/components/icon-button-link/IconButtonLink.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { Comp, ButtonsColorPalette } from '../../types';\nimport { Icon } from '../icon';\nimport { IconButtonLinkProps } from './types';\nimport { useTheme } from '../theme';\nimport { ConditionalWrapper } from '../conditional-wrapper';\nimport { StyledGradientBorder } from '../gradient-border';\nimport { StyledIconButton } from '../icon-button/styles';\nimport { IconButtonVariant } from '../icon-button/types';\n\nconst COMPONENT_NAME = 'IconButtonLink';\nconst CLASSNAME = 'redsift-icon-button-link';\n\n/**\n * The IconButtonLink is a semantic link that looks like an icon button.\n *\n * For a semantic button that looks like an icon button, please use the IconButton component.\n * For a semantic link that looks like a link, please use the Link component.\n * For a semantic button that looks like a link, please use the LinkButton component.\n */\nexport const IconButtonLink: Comp<IconButtonLinkProps, HTMLAnchorElement> = forwardRef((props, ref) => {\n const {\n as,\n className,\n color: propsColor,\n href,\n icon,\n iconProps,\n isActive,\n isDisabled,\n isHovered,\n target,\n theme: propsTheme,\n variant: propsVariant,\n ...forwardedProps\n } = props;\n\n const theme = useTheme(propsTheme);\n const color = Object.values(ButtonsColorPalette).includes(propsColor!) ? propsColor : 'primary';\n const variant = Object.values(IconButtonVariant).includes(propsVariant!) ? propsVariant : 'unstyled';\n const isGradient = color === ButtonsColorPalette.radar;\n\n return (\n <ConditionalWrapper\n condition={isGradient && variant === IconButtonVariant.secondary}\n wrapper={(children) => (\n <StyledGradientBorder\n $color={color}\n $isActive={isActive}\n $isDisabled={isDisabled}\n $isHovered={isHovered}\n $theme={theme}\n >\n {children}\n </StyledGradientBorder>\n )}\n >\n <StyledIconButton\n as={(as || 'a') as any}\n role=\"link\"\n tabIndex={!isDisabled ? 0 : undefined}\n {...forwardedProps}\n $color={color}\n $isActive={isActive}\n $isDisabled={isDisabled}\n $isGradient={isGradient}\n $isHovered={isHovered}\n $theme={theme}\n $variant={variant}\n className={classNames(IconButtonLink.className, className)}\n href={!isDisabled ? href : undefined}\n ref={ref as RefObject<HTMLAnchorElement>}\n target={target}\n >\n <Icon {...iconProps} icon={icon} />\n </StyledIconButton>\n </ConditionalWrapper>\n );\n});\nIconButtonLink.className = CLASSNAME;\nIconButtonLink.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","IconButtonLink","forwardRef","props","ref","as","className","color","propsColor","href","icon","iconProps","isActive","isDisabled","isHovered","target","theme","propsTheme","variant","propsVariant","forwardedProps","_objectWithoutProperties","_excluded","useTheme","Object","values","ButtonsColorPalette","includes","IconButtonVariant","isGradient","radar","React","createElement","ConditionalWrapper","condition","secondary","wrapper","children","StyledGradientBorder","$color","$isActive","$isDisabled","$isHovered","$theme","StyledIconButton","_extends","role","tabIndex","undefined","$isGradient","$variant","classNames","Icon","displayName"],"mappings":";;;;;;;;;;;;AAWA,MAAMA,cAAc,GAAG,gBAAgB,CAAA;AACvC,MAAMC,SAAS,GAAG,0BAA0B,CAAA;;AAE5C;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,cAA4D,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACrG,MAAM;MACJC,EAAE;MACFC,SAAS;AACTC,MAAAA,KAAK,EAAEC,UAAU;MACjBC,IAAI;MACJC,IAAI;MACJC,SAAS;MACTC,QAAQ;MACRC,UAAU;MACVC,SAAS;MACTC,MAAM;AACNC,MAAAA,KAAK,EAAEC,UAAU;AACjBC,MAAAA,OAAO,EAAEC,YAAAA;AAEX,KAAC,GAAGhB,KAAK;AADJiB,IAAAA,cAAc,GAAAC,wBAAA,CACflB,KAAK,EAAAmB,SAAA,CAAA,CAAA;AAET,EAAA,MAAMN,KAAK,GAAGO,QAAQ,CAACN,UAAU,CAAC,CAAA;AAClC,EAAA,MAAMV,KAAK,GAAGiB,MAAM,CAACC,MAAM,CAACC,mBAAmB,CAAC,CAACC,QAAQ,CAACnB,UAAW,CAAC,GAAGA,UAAU,GAAG,SAAS,CAAA;AAC/F,EAAA,MAAMU,OAAO,GAAGM,MAAM,CAACC,MAAM,CAACG,iBAAiB,CAAC,CAACD,QAAQ,CAACR,YAAa,CAAC,GAAGA,YAAY,GAAG,UAAU,CAAA;AACpG,EAAA,MAAMU,UAAU,GAAGtB,KAAK,KAAKmB,mBAAmB,CAACI,KAAK,CAAA;AAEtD,EAAA,oBACEC,KAAA,CAAAC,aAAA,CAACC,kBAAkB,EAAA;AACjBC,IAAAA,SAAS,EAAEL,UAAU,IAAIX,OAAO,KAAKU,iBAAiB,CAACO,SAAU;AACjEC,IAAAA,OAAO,EAAGC,QAAQ,iBAChBN,KAAA,CAAAC,aAAA,CAACM,oBAAoB,EAAA;AACnBC,MAAAA,MAAM,EAAEhC,KAAM;AACdiC,MAAAA,SAAS,EAAE5B,QAAS;AACpB6B,MAAAA,WAAW,EAAE5B,UAAW;AACxB6B,MAAAA,UAAU,EAAE5B,SAAU;AACtB6B,MAAAA,MAAM,EAAE3B,KAAAA;AAAM,KAAA,EAEbqB,QACmB,CAAA;AACtB,GAAA,eAEFN,KAAA,CAAAC,aAAA,CAACY,gBAAgB,EAAAC,QAAA,CAAA;IACfxC,EAAE,EAAGA,EAAE,IAAI,GAAY;AACvByC,IAAAA,IAAI,EAAC,MAAM;AACXC,IAAAA,QAAQ,EAAE,CAAClC,UAAU,GAAG,CAAC,GAAGmC,SAAAA;AAAU,GAAA,EAClC5B,cAAc,EAAA;AAClBmB,IAAAA,MAAM,EAAEhC,KAAM;AACdiC,IAAAA,SAAS,EAAE5B,QAAS;AACpB6B,IAAAA,WAAW,EAAE5B,UAAW;AACxBoC,IAAAA,WAAW,EAAEpB,UAAW;AACxBa,IAAAA,UAAU,EAAE5B,SAAU;AACtB6B,IAAAA,MAAM,EAAE3B,KAAM;AACdkC,IAAAA,QAAQ,EAAEhC,OAAQ;IAClBZ,SAAS,EAAE6C,UAAU,CAAClD,cAAc,CAACK,SAAS,EAAEA,SAAS,CAAE;AAC3DG,IAAAA,IAAI,EAAE,CAACI,UAAU,GAAGJ,IAAI,GAAGuC,SAAU;AACrC5C,IAAAA,GAAG,EAAEA,GAAoC;AACzCW,IAAAA,MAAM,EAAEA,MAAAA;GAERgB,CAAAA,eAAAA,KAAA,CAAAC,aAAA,CAACoB,IAAI,EAAAP,QAAA,KAAKlC,SAAS,EAAA;AAAED,IAAAA,IAAI,EAAEA,IAAAA;GAAO,CAAA,CAClB,CACA,CAAC,CAAA;AAEzB,CAAC,EAAC;AACFT,cAAc,CAACK,SAAS,GAAGN,SAAS,CAAA;AACpCC,cAAc,CAACoD,WAAW,GAAGtD,cAAc;;;;"}
|