@primer/react 38.0.0-rc.195178541 → 38.0.0-rc.2
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/CHANGELOG.md +193 -2
- package/dist/browser.esm.js +3 -3
- package/dist/browser.esm.js.map +1 -1
- package/dist/browser.umd.js +3 -3
- package/dist/browser.umd.js.map +1 -1
- package/dist/components.css +1311 -350
- package/generated/components.json +560 -766
- package/lib/ActionList/ActionList-167cf6c7.css +2 -0
- package/lib/ActionList/ActionList-167cf6c7.css.map +1 -0
- package/lib/ActionList/ActionList.module.css.js +2 -2
- package/lib/ActionList/ActionListContainerContext.d.ts +1 -1
- package/lib/ActionList/ActionListContainerContext.d.ts.map +1 -1
- package/lib/ActionList/Description.d.ts.map +1 -1
- package/lib/ActionList/Description.js +1 -2
- package/lib/ActionList/Divider.d.ts.map +1 -1
- package/lib/ActionList/Divider.js +1 -2
- package/lib/ActionList/Group.d.ts.map +1 -1
- package/lib/ActionList/Group.js +1 -6
- package/lib/ActionList/Item.d.ts.map +1 -1
- package/lib/ActionList/Item.js +6 -3
- package/lib/ActionList/LinkItem.d.ts +1 -1
- package/lib/ActionList/LinkItem.d.ts.map +1 -1
- package/lib/ActionList/LinkItem.js +3 -2
- package/lib/ActionList/List.d.ts.map +1 -1
- package/lib/ActionList/List.js +3 -5
- package/lib/ActionList/Selection.js +2 -1
- package/lib/ActionList/Visuals.d.ts.map +1 -1
- package/lib/ActionList/Visuals.js +0 -7
- package/lib/ActionList/shared.d.ts +2 -1
- package/lib/ActionList/shared.d.ts.map +1 -1
- package/lib/Autocomplete/AutocompleteMenu.js +7 -7
- package/lib/Avatar/Avatar.d.ts.map +1 -1
- package/lib/Avatar/Avatar.js +39 -41
- package/lib/AvatarStack/AvatarStack-802bdd7c.css +2 -0
- package/lib/AvatarStack/AvatarStack-802bdd7c.css.map +1 -0
- package/lib/AvatarStack/AvatarStack.d.ts +4 -3
- package/lib/AvatarStack/AvatarStack.d.ts.map +1 -1
- package/lib/AvatarStack/AvatarStack.js +10 -6
- package/lib/AvatarStack/AvatarStack.module.css.js +1 -1
- package/lib/Banner/Banner-6396546f.css +2 -0
- package/lib/Banner/Banner-6396546f.css.map +1 -0
- package/lib/Banner/Banner.d.ts.map +1 -1
- package/lib/Banner/Banner.js +3 -1
- package/lib/Banner/Banner.module.css.js +2 -2
- package/lib/{BaseStyles-7880c337.css → BaseStyles-79fd37c4.css} +2 -2
- package/lib/BaseStyles-79fd37c4.css.map +1 -0
- package/lib/BaseStyles.module.css.js +1 -1
- package/lib/Blankslate/{Blankslate-a68ed307.css → Blankslate-2be5efdc.css} +2 -2
- package/lib/Blankslate/Blankslate-2be5efdc.css.map +1 -0
- package/lib/Blankslate/Blankslate.js +38 -40
- package/lib/Blankslate/Blankslate.module.css.js +1 -1
- package/lib/BranchName/BranchName.d.ts +6 -3
- package/lib/BranchName/BranchName.d.ts.map +1 -1
- package/lib/BranchName/BranchName.js +1 -3
- package/lib/Breadcrumbs/Breadcrumbs.d.ts.map +1 -1
- package/lib/Breadcrumbs/Breadcrumbs.js +5 -5
- package/lib/Button/{ButtonBase-ec78dde7.css → ButtonBase-0a7871f4.css} +2 -2
- package/lib/Button/{ButtonBase-ec78dde7.css.map → ButtonBase-0a7871f4.css.map} +1 -1
- package/lib/Button/ButtonBase.js +2 -2
- package/lib/Button/ButtonBase.module.css.js +1 -1
- package/lib/ButtonGroup/ButtonGroup.d.ts.map +1 -1
- package/lib/ButtonGroup/ButtonGroup.js +24 -61
- package/lib/Checkbox/Checkbox.js +187 -56
- package/lib/CircleBadge/CircleBadge.d.ts +4 -0
- package/lib/CircleBadge/CircleBadge.d.ts.map +1 -1
- package/lib/CircleBadge/CircleBadge.js +4 -0
- package/lib/ConfirmationDialog/ConfirmationDialog.d.ts +8 -0
- package/lib/ConfirmationDialog/ConfirmationDialog.d.ts.map +1 -1
- package/lib/ConfirmationDialog/ConfirmationDialog.js +6 -2
- package/lib/CounterLabel/CounterLabel.d.ts.map +1 -1
- package/lib/CounterLabel/CounterLabel.js +43 -87
- package/lib/DataTable/Pagination-b6f8418c.css +2 -0
- package/lib/DataTable/Pagination-b6f8418c.css.map +1 -0
- package/lib/DataTable/Pagination.d.ts.map +1 -1
- package/lib/DataTable/Pagination.js +81 -88
- package/lib/DataTable/Pagination.module.css.js +7 -0
- package/lib/DataTable/Table.d.ts +1 -1
- package/lib/DataTable/Table.d.ts.map +1 -1
- package/lib/DataTable/Table.js +18 -26
- package/lib/DataTable/storyHelpers.d.ts +1 -1
- package/lib/DataTable/storyHelpers.d.ts.map +1 -1
- package/lib/DataTable/useTable.js +63 -82
- package/lib/Details/Details.d.ts +2 -3
- package/lib/Details/Details.d.ts.map +1 -1
- package/lib/Details/Details.js +33 -82
- package/lib/FeatureFlags/DefaultFeatureFlags.d.ts.map +1 -1
- package/lib/FeatureFlags/DefaultFeatureFlags.js +2 -3
- package/lib/FeatureFlags/FeatureFlags.js +10 -12
- package/lib/FilteredActionList/FilteredActionList-96b126d7.css +2 -0
- package/lib/FilteredActionList/FilteredActionList-96b126d7.css.map +1 -0
- package/lib/FilteredActionList/{FilteredActionListWithModernActionList.d.ts → FilteredActionList.d.ts} +9 -4
- package/lib/FilteredActionList/FilteredActionList.d.ts.map +1 -0
- package/lib/FilteredActionList/{FilteredActionListWithModernActionList.js → FilteredActionList.js} +156 -42
- package/lib/FilteredActionList/FilteredActionList.module.css.js +2 -2
- package/lib/FilteredActionList/FilteredActionListLoaders.js +1 -1
- package/lib/FilteredActionList/index.d.ts +3 -2
- package/lib/FilteredActionList/index.d.ts.map +1 -1
- package/lib/FilteredActionList/types.d.ts +159 -0
- package/lib/FilteredActionList/types.d.ts.map +1 -0
- package/lib/FilteredActionList/useAnnouncements.d.ts +5 -2
- package/lib/FilteredActionList/useAnnouncements.d.ts.map +1 -1
- package/lib/FilteredActionList/useAnnouncements.js +112 -65
- package/lib/FormControl/FormControl.d.ts.map +1 -1
- package/lib/FormControl/FormControl.js +3 -12
- package/lib/Header/Header.d.ts.map +1 -1
- package/lib/Header/Header.js +64 -170
- package/lib/InlineMessage/InlineMessage.d.ts +1 -1
- package/lib/InlineMessage/InlineMessage.d.ts.map +1 -1
- package/lib/InlineMessage/InlineMessage.js +31 -69
- package/lib/Label/Label.d.ts.map +1 -1
- package/lib/Label/Label.js +10 -8
- package/lib/LabelGroup/LabelGroup.d.ts +1 -2
- package/lib/LabelGroup/LabelGroup.d.ts.map +1 -1
- package/lib/LabelGroup/LabelGroup.js +13 -16
- package/lib/NavList/NavList.js +219 -53
- package/lib/Overlay/Overlay-40e80d0e.css +2 -0
- package/lib/Overlay/Overlay-40e80d0e.css.map +1 -0
- package/lib/Overlay/Overlay.module.css.js +1 -1
- package/lib/PageHeader/PageHeader.d.ts.map +1 -1
- package/lib/PageHeader/PageHeader.js +21 -30
- package/lib/PageLayout/PageLayout.d.ts.map +1 -1
- package/lib/PageLayout/PageLayout.js +466 -476
- package/lib/Pagehead/Pagehead.d.ts +1 -1
- package/lib/Pagehead/Pagehead.d.ts.map +1 -1
- package/lib/Pagehead/Pagehead.js +2 -11
- package/lib/PointerBox/PointerBox.d.ts +9 -1
- package/lib/PointerBox/PointerBox.d.ts.map +1 -1
- package/lib/PointerBox/PointerBox.js +5 -1
- package/lib/Popover/Popover-b609f443.css +2 -0
- package/lib/Popover/Popover-b609f443.css.map +1 -0
- package/lib/Popover/Popover.d.ts +5 -0
- package/lib/Popover/Popover.d.ts.map +1 -1
- package/lib/Popover/Popover.js +40 -21
- package/lib/Popover/Popover.module.css.js +1 -1
- package/lib/Portal/Portal.d.ts.map +1 -1
- package/lib/Portal/Portal.js +1 -0
- package/lib/ProgressBar/ProgressBar-36f689cb.css +2 -0
- package/lib/ProgressBar/ProgressBar-36f689cb.css.map +1 -0
- package/lib/ProgressBar/ProgressBar.d.ts +3 -4
- package/lib/ProgressBar/ProgressBar.d.ts.map +1 -1
- package/lib/ProgressBar/ProgressBar.js +53 -49
- package/lib/ProgressBar/ProgressBar.module.css.js +1 -1
- package/lib/ProgressBar/index.d.ts +2 -2
- package/lib/ProgressBar/index.d.ts.map +1 -1
- package/lib/Radio/{Radio-b2a92b7d.css → Radio-df9a5c02.css} +2 -2
- package/lib/Radio/{Radio-b2a92b7d.css.map → Radio-df9a5c02.css.map} +1 -1
- package/lib/Radio/Radio.d.ts.map +1 -1
- package/lib/Radio/Radio.js +40 -91
- package/lib/Radio/Radio.module.css.js +1 -1
- package/lib/SegmentedControl/SegmentedControl.d.ts.map +1 -1
- package/lib/SegmentedControl/SegmentedControl.js +23 -25
- package/lib/SegmentedControl/SegmentedControlButton.d.ts.map +1 -1
- package/lib/SegmentedControl/SegmentedControlButton.js +70 -72
- package/lib/SegmentedControl/SegmentedControlIconButton.d.ts.map +1 -1
- package/lib/SegmentedControl/SegmentedControlIconButton.js +110 -112
- package/lib/Select/Select.d.ts +1 -1
- package/lib/Select/Select.d.ts.map +1 -1
- package/lib/Select/Select.js +79 -83
- package/lib/SelectPanel/SelectPanel-e11ce210.css +2 -0
- package/lib/SelectPanel/SelectPanel-e11ce210.css.map +1 -0
- package/lib/SelectPanel/SelectPanel.d.ts +8 -4
- package/lib/SelectPanel/SelectPanel.d.ts.map +1 -1
- package/lib/SelectPanel/SelectPanel.js +66 -29
- package/lib/SelectPanel/SelectPanel.module.css.js +2 -2
- package/lib/SelectPanel/SelectPanelMessage.d.ts +13 -0
- package/lib/SelectPanel/SelectPanelMessage.d.ts.map +1 -1
- package/lib/SelectPanel/SelectPanelMessage.js +10 -4
- package/lib/SelectPanel/index.d.ts +1 -0
- package/lib/SelectPanel/index.d.ts.map +1 -1
- package/lib/SideNav.d.ts +2 -3
- package/lib/SideNav.d.ts.map +1 -1
- package/lib/SideNav.js +4 -11
- package/lib/Skeleton/SkeletonBox.d.ts +2 -2
- package/lib/Skeleton/SkeletonBox.d.ts.map +1 -1
- package/lib/Skeleton/SkeletonBox.js +25 -24
- package/lib/SkeletonAvatar/SkeletonAvatar-e00fff32.css +2 -0
- package/lib/SkeletonAvatar/SkeletonAvatar-e00fff32.css.map +1 -0
- package/lib/SkeletonAvatar/SkeletonAvatar.d.ts +12 -0
- package/lib/SkeletonAvatar/SkeletonAvatar.d.ts.map +1 -0
- package/lib/{experimental/Skeleton → SkeletonAvatar}/SkeletonAvatar.js +5 -5
- package/lib/{experimental/Skeleton → SkeletonAvatar}/SkeletonAvatar.module.css.js +1 -1
- package/lib/SkeletonAvatar/index.d.ts +3 -0
- package/lib/SkeletonAvatar/index.d.ts.map +1 -0
- package/lib/SkeletonText/SkeletonText-5cf908c1.css +2 -0
- package/lib/SkeletonText/SkeletonText-5cf908c1.css.map +1 -0
- package/lib/{experimental/Skeleton → SkeletonText}/SkeletonText.d.ts +5 -4
- package/lib/SkeletonText/SkeletonText.d.ts.map +1 -0
- package/lib/SkeletonText/SkeletonText.js +142 -0
- package/lib/SkeletonText/SkeletonText.module.css.js +7 -0
- package/lib/SkeletonText/index.d.ts +3 -0
- package/lib/SkeletonText/index.d.ts.map +1 -0
- package/lib/Spinner/Spinner.d.ts +1 -1
- package/lib/Spinner/Spinner.d.ts.map +1 -1
- package/lib/Spinner/Spinner.js +13 -51
- package/lib/SplitPageLayout/SplitPageLayout.d.ts +1 -2
- package/lib/SplitPageLayout/SplitPageLayout.d.ts.map +1 -1
- package/{lib-esm/Stack/Stack-83ac2229.css → lib/Stack/Stack-9e7b935d.css} +2 -2
- package/lib/Stack/Stack-9e7b935d.css.map +1 -0
- package/lib/Stack/Stack.d.ts +5 -0
- package/lib/Stack/Stack.d.ts.map +1 -1
- package/lib/Stack/Stack.js +125 -112
- package/lib/Stack/Stack.module.css.js +1 -1
- package/lib/StateLabel/StateLabel-50420ff5.css +2 -0
- package/lib/StateLabel/StateLabel-50420ff5.css.map +1 -0
- package/lib/StateLabel/StateLabel.d.ts +7 -7
- package/lib/StateLabel/StateLabel.d.ts.map +1 -1
- package/lib/StateLabel/StateLabel.js +56 -130
- package/lib/StateLabel/StateLabel.module.css.js +7 -0
- package/lib/SubNav/SubNav.d.ts +8 -16
- package/lib/SubNav/SubNav.d.ts.map +1 -1
- package/lib/SubNav/SubNav.js +74 -215
- package/lib/TabNav/TabNav-83c6145e.css +2 -0
- package/lib/TabNav/TabNav-83c6145e.css.map +1 -0
- package/lib/TabNav/TabNav.module.css.js +1 -1
- package/lib/Text/Text.d.ts.map +1 -1
- package/lib/Text/Text.js +2 -3
- package/lib/TextInput/TextInput.d.ts +1 -1
- package/lib/TextInput/TextInput.d.ts.map +1 -1
- package/lib/TextInputWithTokens/TextInputWithTokens.d.ts +6 -0
- package/lib/TextInputWithTokens/TextInputWithTokens.d.ts.map +1 -1
- package/lib/TextInputWithTokens/TextInputWithTokens.js +343 -331
- package/lib/Textarea/Textarea.d.ts +24 -0
- package/lib/Textarea/Textarea.d.ts.map +1 -1
- package/lib/Textarea/Textarea.js +72 -44
- package/lib/Timeline/Timeline.d.ts +1 -1
- package/lib/Timeline/Timeline.d.ts.map +1 -1
- package/lib/Timeline/Timeline.js +92 -264
- package/lib/ToggleSwitch/ToggleSwitch-4b23d166.css +2 -0
- package/lib/ToggleSwitch/ToggleSwitch-4b23d166.css.map +1 -0
- package/lib/ToggleSwitch/ToggleSwitch.d.ts +14 -5
- package/lib/ToggleSwitch/ToggleSwitch.d.ts.map +1 -1
- package/lib/ToggleSwitch/ToggleSwitch.js +263 -275
- package/lib/ToggleSwitch/ToggleSwitch.module.css.js +7 -0
- package/lib/ToggleSwitch/ToggleSwitchStoryWrapper.d.ts.map +1 -1
- package/lib/Token/IssueLabelToken-0dbbbcdf.css +2 -0
- package/lib/Token/IssueLabelToken-0dbbbcdf.css.map +1 -0
- package/lib/Token/IssueLabelToken.d.ts.map +1 -1
- package/lib/Token/IssueLabelToken.js +7 -65
- package/lib/Token/IssueLabelToken.module.css.js +1 -1
- package/lib/Token/Token.d.ts.map +1 -1
- package/lib/Token/Token.js +120 -128
- package/lib/Token/TokenBase.js +78 -83
- package/lib/Token/_RemoveTokenButton.js +106 -26
- package/lib/Token/index.d.ts +0 -1
- package/lib/Token/index.d.ts.map +1 -1
- package/lib/Tooltip/Tooltip.js +15 -17
- package/lib/TooltipV2/Tooltip-5a80d7b2.css +2 -0
- package/lib/TooltipV2/Tooltip-5a80d7b2.css.map +1 -0
- package/lib/TooltipV2/Tooltip.d.ts.map +1 -1
- package/lib/TooltipV2/Tooltip.js +3 -3
- package/lib/TooltipV2/Tooltip.module.css.js +1 -1
- package/lib/TreeView/TreeView.js +20 -22
- package/lib/TreeView/shared.js +2 -2
- package/lib/VisuallyHidden/VisuallyHidden.d.ts +2 -3
- package/lib/VisuallyHidden/VisuallyHidden.d.ts.map +1 -1
- package/lib/VisuallyHidden/VisuallyHidden.js +17 -51
- package/lib/_VisuallyHidden-5c0a2499.css +2 -0
- package/lib/_VisuallyHidden-5c0a2499.css.map +1 -0
- package/lib/_VisuallyHidden.d.ts +3 -2
- package/lib/_VisuallyHidden.d.ts.map +1 -1
- package/lib/_VisuallyHidden.js +63 -26
- package/lib/_VisuallyHidden.module.css.js +7 -0
- package/lib/deprecated/ActionList/List.d.ts.map +1 -1
- package/lib/deprecated/ActionList/List.js +115 -138
- package/lib/deprecated/ActionMenu.js +19 -21
- package/lib/deprecated/UnderlineNav/UnderlineNav.d.ts +2 -3
- package/lib/deprecated/UnderlineNav/UnderlineNav.d.ts.map +1 -1
- package/lib/deprecated/UnderlineNav/UnderlineNav.js +2 -3
- package/lib/deprecated/index.d.ts +2 -0
- package/lib/deprecated/index.d.ts.map +1 -1
- package/lib/deprecated/index.js +2 -0
- package/lib/experimental/IssueLabel/IssueLabel-6581d1bd.css +2 -0
- package/lib/experimental/IssueLabel/IssueLabel-6581d1bd.css.map +1 -0
- package/lib/experimental/IssueLabel/IssueLabel.d.ts +28 -13
- package/lib/experimental/IssueLabel/IssueLabel.d.ts.map +1 -1
- package/lib/experimental/IssueLabel/IssueLabel.js +129 -135
- package/lib/experimental/IssueLabel/IssueLabel.module.css.js +1 -1
- package/lib/experimental/UnderlinePanels/UnderlinePanels.d.ts.map +1 -1
- package/lib/experimental/UnderlinePanels/UnderlinePanels.js +30 -40
- package/lib/experimental/index.d.ts +6 -1
- package/lib/experimental/index.d.ts.map +1 -1
- package/lib/experimental/index.js +4 -4
- package/lib/hooks/useMenuKeyboardNavigation.js +23 -43
- package/lib/hooks/useMnemonics.js +37 -77
- package/lib/hooks/useOpenAndCloseFocus.js +7 -14
- package/lib/hooks/useOverflow.js +7 -11
- package/lib/hooks/useScrollFlash.js +25 -14
- package/lib/index.d.ts +6 -9
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +10 -16
- package/lib/internal/components/BoxWithFallback.js +40 -35
- package/lib/internal/components/ButtonReset-904f2483.css +2 -0
- package/lib/internal/components/ButtonReset-904f2483.css.map +1 -0
- package/lib/internal/components/ButtonReset.d.ts +1 -2
- package/lib/internal/components/ButtonReset.d.ts.map +1 -1
- package/lib/internal/components/ButtonReset.js +49 -13
- package/lib/internal/components/ButtonReset.module.css.js +7 -0
- package/lib/internal/components/Caret-e686f04c.css +2 -0
- package/lib/internal/components/Caret-e686f04c.css.map +1 -0
- package/{lib-esm → lib/internal/components}/Caret.d.ts +1 -3
- package/lib/internal/components/Caret.d.ts.map +1 -0
- package/lib/{Caret.js → internal/components/Caret.js} +14 -48
- package/lib/internal/components/Caret.module.css.js +7 -0
- package/lib/internal/components/LiveRegion.js +8 -10
- package/lib/internal/components/{TextInputWrapper-ca608f70.css → TextInputWrapper-889df5d3.css} +2 -2
- package/{lib-esm/internal/components/TextInputWrapper-ca608f70.css.map → lib/internal/components/TextInputWrapper-889df5d3.css.map} +1 -1
- package/lib/internal/components/TextInputWrapper.module.css.js +1 -1
- package/lib/internal/components/UnderlineTabbedInterface.d.ts.map +1 -1
- package/lib/internal/components/UnderlineTabbedInterface.js +60 -108
- package/lib/internal/utils/getGlobalFocusStyles.js +1 -1
- package/lib/live-region/Announce.js +2 -2
- package/lib/test-helpers.js +3 -0
- package/lib/utils/form-story-helpers.d.ts +1 -1
- package/lib/utils/form-story-helpers.d.ts.map +1 -1
- package/lib-esm/ActionList/ActionList-167cf6c7.css +2 -0
- package/lib-esm/ActionList/ActionList-167cf6c7.css.map +1 -0
- package/lib-esm/ActionList/ActionList.module.css.js +2 -2
- package/lib-esm/ActionList/ActionListContainerContext.d.ts +1 -1
- package/lib-esm/ActionList/Description.js +1 -2
- package/lib-esm/ActionList/Divider.js +1 -2
- package/lib-esm/ActionList/Group.js +1 -6
- package/lib-esm/ActionList/Item.js +6 -3
- package/lib-esm/ActionList/LinkItem.d.ts +1 -1
- package/lib-esm/ActionList/LinkItem.js +3 -2
- package/lib-esm/ActionList/List.js +3 -5
- package/lib-esm/ActionList/Selection.js +2 -1
- package/lib-esm/ActionList/Visuals.js +0 -7
- package/lib-esm/ActionList/shared.d.ts +2 -1
- package/lib-esm/Autocomplete/AutocompleteMenu.js +1 -1
- package/lib-esm/Avatar/Avatar.js +39 -41
- package/lib-esm/AvatarStack/AvatarStack-802bdd7c.css +2 -0
- package/lib-esm/AvatarStack/AvatarStack-802bdd7c.css.map +1 -0
- package/lib-esm/AvatarStack/AvatarStack.d.ts +4 -3
- package/lib-esm/AvatarStack/AvatarStack.js +10 -6
- package/lib-esm/AvatarStack/AvatarStack.module.css.js +1 -1
- package/lib-esm/Banner/Banner-6396546f.css +2 -0
- package/lib-esm/Banner/Banner-6396546f.css.map +1 -0
- package/lib-esm/Banner/Banner.js +3 -1
- package/lib-esm/Banner/Banner.module.css.js +2 -2
- package/lib-esm/{BaseStyles-7880c337.css → BaseStyles-79fd37c4.css} +2 -2
- package/lib-esm/BaseStyles-79fd37c4.css.map +1 -0
- package/lib-esm/BaseStyles.module.css.js +1 -1
- package/lib-esm/Blankslate/{Blankslate-a68ed307.css → Blankslate-2be5efdc.css} +2 -2
- package/lib-esm/Blankslate/Blankslate-2be5efdc.css.map +1 -0
- package/lib-esm/Blankslate/Blankslate.js +38 -40
- package/lib-esm/Blankslate/Blankslate.module.css.js +1 -1
- package/lib-esm/BranchName/BranchName.d.ts +6 -3
- package/lib-esm/BranchName/BranchName.js +1 -3
- package/lib-esm/Breadcrumbs/Breadcrumbs.js +5 -5
- package/lib-esm/Button/{ButtonBase-ec78dde7.css → ButtonBase-0a7871f4.css} +2 -2
- package/lib-esm/Button/{ButtonBase-ec78dde7.css.map → ButtonBase-0a7871f4.css.map} +1 -1
- package/lib-esm/Button/ButtonBase.js +2 -2
- package/lib-esm/Button/ButtonBase.module.css.js +1 -1
- package/lib-esm/ButtonGroup/ButtonGroup.js +24 -61
- package/lib-esm/Checkbox/Checkbox.js +187 -56
- package/lib-esm/CircleBadge/CircleBadge.d.ts +4 -0
- package/lib-esm/CircleBadge/CircleBadge.js +4 -0
- package/lib-esm/ConfirmationDialog/ConfirmationDialog.d.ts +8 -0
- package/lib-esm/ConfirmationDialog/ConfirmationDialog.js +6 -2
- package/lib-esm/CounterLabel/CounterLabel.js +43 -87
- package/lib-esm/DataTable/Pagination-b6f8418c.css +2 -0
- package/lib-esm/DataTable/Pagination-b6f8418c.css.map +1 -0
- package/lib-esm/DataTable/Pagination.js +81 -84
- package/lib-esm/DataTable/Pagination.module.css.js +5 -0
- package/lib-esm/DataTable/Table.d.ts +1 -1
- package/lib-esm/DataTable/Table.js +18 -26
- package/lib-esm/DataTable/storyHelpers.d.ts +1 -1
- package/lib-esm/DataTable/useTable.js +64 -83
- package/lib-esm/Details/Details.d.ts +2 -3
- package/lib-esm/Details/Details.js +33 -82
- package/lib-esm/FeatureFlags/DefaultFeatureFlags.js +2 -3
- package/lib-esm/FeatureFlags/FeatureFlags.js +10 -12
- package/lib-esm/FilteredActionList/FilteredActionList-96b126d7.css +2 -0
- package/lib-esm/FilteredActionList/FilteredActionList-96b126d7.css.map +1 -0
- package/lib-esm/FilteredActionList/{FilteredActionListWithModernActionList.d.ts → FilteredActionList.d.ts} +9 -4
- package/lib-esm/FilteredActionList/{FilteredActionListWithModernActionList.js → FilteredActionList.js} +156 -42
- package/lib-esm/FilteredActionList/FilteredActionList.module.css.js +2 -2
- package/lib-esm/FilteredActionList/FilteredActionListLoaders.js +1 -1
- package/lib-esm/FilteredActionList/index.d.ts +3 -2
- package/lib-esm/FilteredActionList/types.d.ts +159 -0
- package/lib-esm/FilteredActionList/useAnnouncements.d.ts +5 -2
- package/lib-esm/FilteredActionList/useAnnouncements.js +112 -65
- package/lib-esm/FormControl/FormControl.js +3 -12
- package/lib-esm/Header/Header.js +64 -170
- package/lib-esm/InlineMessage/InlineMessage.d.ts +1 -1
- package/lib-esm/InlineMessage/InlineMessage.js +31 -69
- package/lib-esm/Label/Label.js +10 -8
- package/lib-esm/LabelGroup/LabelGroup.d.ts +1 -2
- package/lib-esm/LabelGroup/LabelGroup.js +13 -16
- package/lib-esm/NavList/NavList.js +219 -53
- package/lib-esm/Overlay/Overlay-40e80d0e.css +2 -0
- package/lib-esm/Overlay/Overlay-40e80d0e.css.map +1 -0
- package/lib-esm/Overlay/Overlay.module.css.js +1 -1
- package/lib-esm/PageHeader/PageHeader.js +21 -30
- package/lib-esm/PageLayout/PageLayout.js +466 -476
- package/lib-esm/Pagehead/Pagehead.d.ts +1 -1
- package/lib-esm/Pagehead/Pagehead.js +2 -11
- package/lib-esm/PointerBox/PointerBox.d.ts +9 -1
- package/lib-esm/PointerBox/PointerBox.js +5 -1
- package/lib-esm/Popover/Popover-b609f443.css +2 -0
- package/lib-esm/Popover/Popover-b609f443.css.map +1 -0
- package/lib-esm/Popover/Popover.d.ts +5 -0
- package/lib-esm/Popover/Popover.js +40 -21
- package/lib-esm/Popover/Popover.module.css.js +1 -1
- package/lib-esm/Portal/Portal.js +1 -0
- package/lib-esm/ProgressBar/ProgressBar-36f689cb.css +2 -0
- package/lib-esm/ProgressBar/ProgressBar-36f689cb.css.map +1 -0
- package/lib-esm/ProgressBar/ProgressBar.d.ts +3 -4
- package/lib-esm/ProgressBar/ProgressBar.js +53 -49
- package/lib-esm/ProgressBar/ProgressBar.module.css.js +1 -1
- package/lib-esm/ProgressBar/index.d.ts +2 -2
- package/lib-esm/Radio/{Radio-b2a92b7d.css → Radio-df9a5c02.css} +2 -2
- package/lib-esm/Radio/{Radio-b2a92b7d.css.map → Radio-df9a5c02.css.map} +1 -1
- package/lib-esm/Radio/Radio.js +40 -91
- package/lib-esm/Radio/Radio.module.css.js +1 -1
- package/lib-esm/SegmentedControl/SegmentedControl.js +23 -25
- package/lib-esm/SegmentedControl/SegmentedControlButton.js +70 -72
- package/lib-esm/SegmentedControl/SegmentedControlIconButton.js +110 -112
- package/lib-esm/Select/Select.d.ts +1 -1
- package/lib-esm/Select/Select.js +79 -83
- package/lib-esm/SelectPanel/SelectPanel-e11ce210.css +2 -0
- package/lib-esm/SelectPanel/SelectPanel-e11ce210.css.map +1 -0
- package/lib-esm/SelectPanel/SelectPanel.d.ts +8 -4
- package/lib-esm/SelectPanel/SelectPanel.js +64 -27
- package/lib-esm/SelectPanel/SelectPanel.module.css.js +2 -2
- package/lib-esm/SelectPanel/SelectPanelMessage.d.ts +13 -0
- package/lib-esm/SelectPanel/SelectPanelMessage.js +10 -4
- package/lib-esm/SelectPanel/index.d.ts +1 -0
- package/lib-esm/SideNav.d.ts +2 -3
- package/lib-esm/SideNav.js +4 -11
- package/lib-esm/Skeleton/SkeletonBox.d.ts +2 -2
- package/lib-esm/Skeleton/SkeletonBox.js +25 -24
- package/lib-esm/SkeletonAvatar/SkeletonAvatar-e00fff32.css +2 -0
- package/lib-esm/SkeletonAvatar/SkeletonAvatar-e00fff32.css.map +1 -0
- package/lib-esm/SkeletonAvatar/SkeletonAvatar.d.ts +12 -0
- package/lib-esm/{experimental/Skeleton → SkeletonAvatar}/SkeletonAvatar.js +5 -5
- package/lib-esm/SkeletonAvatar/SkeletonAvatar.module.css.js +5 -0
- package/lib-esm/SkeletonAvatar/index.d.ts +3 -0
- package/lib-esm/SkeletonText/SkeletonText-5cf908c1.css +2 -0
- package/lib-esm/SkeletonText/SkeletonText-5cf908c1.css.map +1 -0
- package/lib-esm/{experimental/Skeleton → SkeletonText}/SkeletonText.d.ts +5 -4
- package/lib-esm/SkeletonText/SkeletonText.js +140 -0
- package/lib-esm/SkeletonText/SkeletonText.module.css.js +5 -0
- package/lib-esm/SkeletonText/index.d.ts +3 -0
- package/lib-esm/Spinner/Spinner.d.ts +1 -1
- package/lib-esm/Spinner/Spinner.js +13 -47
- package/lib-esm/SplitPageLayout/SplitPageLayout.d.ts +1 -2
- package/{lib/Stack/Stack-83ac2229.css → lib-esm/Stack/Stack-9e7b935d.css} +2 -2
- package/lib-esm/Stack/Stack-9e7b935d.css.map +1 -0
- package/lib-esm/Stack/Stack.d.ts +5 -0
- package/lib-esm/Stack/Stack.js +125 -112
- package/lib-esm/Stack/Stack.module.css.js +1 -1
- package/lib-esm/StateLabel/StateLabel-50420ff5.css +2 -0
- package/lib-esm/StateLabel/StateLabel-50420ff5.css.map +1 -0
- package/lib-esm/StateLabel/StateLabel.d.ts +7 -7
- package/lib-esm/StateLabel/StateLabel.js +57 -127
- package/lib-esm/StateLabel/StateLabel.module.css.js +5 -0
- package/lib-esm/SubNav/SubNav.d.ts +8 -16
- package/lib-esm/SubNav/SubNav.js +74 -215
- package/lib-esm/TabNav/TabNav-83c6145e.css +2 -0
- package/lib-esm/TabNav/TabNav-83c6145e.css.map +1 -0
- package/lib-esm/TabNav/TabNav.module.css.js +1 -1
- package/lib-esm/Text/Text.js +2 -3
- package/lib-esm/TextInput/TextInput.d.ts +1 -1
- package/lib-esm/TextInputWithTokens/TextInputWithTokens.d.ts +6 -0
- package/lib-esm/TextInputWithTokens/TextInputWithTokens.js +343 -331
- package/lib-esm/Textarea/Textarea.d.ts +24 -0
- package/lib-esm/Textarea/Textarea.js +72 -44
- package/lib-esm/Timeline/Timeline.d.ts +1 -1
- package/lib-esm/Timeline/Timeline.js +92 -264
- package/lib-esm/ToggleSwitch/ToggleSwitch-4b23d166.css +2 -0
- package/lib-esm/ToggleSwitch/ToggleSwitch-4b23d166.css.map +1 -0
- package/lib-esm/ToggleSwitch/ToggleSwitch.d.ts +14 -5
- package/lib-esm/ToggleSwitch/ToggleSwitch.js +263 -274
- package/lib-esm/ToggleSwitch/ToggleSwitch.module.css.js +5 -0
- package/lib-esm/Token/IssueLabelToken-0dbbbcdf.css +2 -0
- package/lib-esm/Token/IssueLabelToken-0dbbbcdf.css.map +1 -0
- package/lib-esm/Token/IssueLabelToken.js +7 -65
- package/lib-esm/Token/IssueLabelToken.module.css.js +1 -1
- package/lib-esm/Token/Token.js +120 -128
- package/lib-esm/Token/TokenBase.js +78 -83
- package/lib-esm/Token/_RemoveTokenButton.js +106 -26
- package/lib-esm/Token/index.d.ts +0 -1
- package/lib-esm/Tooltip/Tooltip.js +15 -17
- package/lib-esm/TooltipV2/Tooltip-5a80d7b2.css +2 -0
- package/lib-esm/TooltipV2/Tooltip-5a80d7b2.css.map +1 -0
- package/lib-esm/TooltipV2/Tooltip.js +3 -3
- package/lib-esm/TooltipV2/Tooltip.module.css.js +1 -1
- package/lib-esm/TreeView/TreeView.js +20 -22
- package/lib-esm/TreeView/shared.js +2 -2
- package/lib-esm/VisuallyHidden/VisuallyHidden.d.ts +2 -3
- package/lib-esm/VisuallyHidden/VisuallyHidden.js +17 -51
- package/lib-esm/_VisuallyHidden-5c0a2499.css +2 -0
- package/lib-esm/_VisuallyHidden-5c0a2499.css.map +1 -0
- package/lib-esm/_VisuallyHidden.d.ts +3 -2
- package/lib-esm/_VisuallyHidden.js +63 -22
- package/lib-esm/_VisuallyHidden.module.css.js +5 -0
- package/lib-esm/deprecated/ActionList/List.js +116 -138
- package/lib-esm/deprecated/ActionMenu.js +19 -21
- package/lib-esm/deprecated/UnderlineNav/UnderlineNav.d.ts +2 -3
- package/lib-esm/deprecated/UnderlineNav/UnderlineNav.js +2 -3
- package/lib-esm/deprecated/index.d.ts +2 -0
- package/lib-esm/deprecated/index.js +1 -0
- package/lib-esm/experimental/IssueLabel/IssueLabel-6581d1bd.css +2 -0
- package/lib-esm/experimental/IssueLabel/IssueLabel-6581d1bd.css.map +1 -0
- package/lib-esm/experimental/IssueLabel/IssueLabel.d.ts +28 -13
- package/lib-esm/experimental/IssueLabel/IssueLabel.js +129 -135
- package/lib-esm/experimental/IssueLabel/IssueLabel.module.css.js +1 -1
- package/lib-esm/experimental/UnderlinePanels/UnderlinePanels.js +30 -40
- package/lib-esm/experimental/index.d.ts +6 -1
- package/lib-esm/experimental/index.js +3 -3
- package/lib-esm/hooks/useMenuKeyboardNavigation.js +23 -43
- package/lib-esm/hooks/useMnemonics.js +37 -77
- package/lib-esm/hooks/useOpenAndCloseFocus.js +7 -14
- package/lib-esm/hooks/useOverflow.js +7 -11
- package/lib-esm/hooks/useScrollFlash.js +25 -14
- package/lib-esm/index.d.ts +6 -9
- package/lib-esm/index.js +1 -4
- package/lib-esm/internal/components/BoxWithFallback.js +40 -35
- package/lib-esm/internal/components/ButtonReset-904f2483.css +2 -0
- package/lib-esm/internal/components/ButtonReset-904f2483.css.map +1 -0
- package/lib-esm/internal/components/ButtonReset.d.ts +1 -2
- package/lib-esm/internal/components/ButtonReset.js +49 -9
- package/lib-esm/internal/components/ButtonReset.module.css.js +5 -0
- package/lib-esm/internal/components/Caret-e686f04c.css +2 -0
- package/lib-esm/internal/components/Caret-e686f04c.css.map +1 -0
- package/{lib → lib-esm/internal/components}/Caret.d.ts +1 -3
- package/lib-esm/{Caret.js → internal/components/Caret.js} +14 -44
- package/lib-esm/internal/components/Caret.module.css.js +5 -0
- package/lib-esm/internal/components/LiveRegion.js +8 -10
- package/lib-esm/internal/components/{TextInputWrapper-ca608f70.css → TextInputWrapper-889df5d3.css} +2 -2
- package/{lib/internal/components/TextInputWrapper-ca608f70.css.map → lib-esm/internal/components/TextInputWrapper-889df5d3.css.map} +1 -1
- package/lib-esm/internal/components/TextInputWrapper.module.css.js +1 -1
- package/lib-esm/internal/components/UnderlineTabbedInterface.js +60 -108
- package/lib-esm/internal/utils/getGlobalFocusStyles.js +1 -1
- package/lib-esm/live-region/Announce.js +2 -2
- package/lib-esm/test-helpers.js +3 -0
- package/lib-esm/utils/form-story-helpers.d.ts +1 -1
- package/package.json +31 -34
- package/lib/ActionList/ActionList-49cba224.css +0 -2
- package/lib/ActionList/ActionList-49cba224.css.map +0 -1
- package/lib/AvatarPair/AvatarPair-68990abe.css +0 -2
- package/lib/AvatarPair/AvatarPair-68990abe.css.map +0 -1
- package/lib/AvatarPair/AvatarPair.d.ts +0 -8
- package/lib/AvatarPair/AvatarPair.d.ts.map +0 -1
- package/lib/AvatarPair/AvatarPair.js +0 -92
- package/lib/AvatarPair/AvatarPair.module.css.js +0 -7
- package/lib/AvatarPair/index.d.ts +0 -3
- package/lib/AvatarPair/index.d.ts.map +0 -1
- package/lib/AvatarStack/AvatarStack-f0712fca.css +0 -2
- package/lib/AvatarStack/AvatarStack-f0712fca.css.map +0 -1
- package/lib/Banner/Banner-43e2cd6a.css +0 -2
- package/lib/Banner/Banner-43e2cd6a.css.map +0 -1
- package/lib/BaseStyles-7880c337.css.map +0 -1
- package/lib/Blankslate/Blankslate-a68ed307.css.map +0 -1
- package/lib/Caret.d.ts.map +0 -1
- package/lib/CircleOcticon/CircleOcticon.d.ts +0 -13
- package/lib/CircleOcticon/CircleOcticon.d.ts.map +0 -1
- package/lib/CircleOcticon/CircleOcticon.js +0 -96
- package/lib/CircleOcticon/index.d.ts +0 -3
- package/lib/CircleOcticon/index.d.ts.map +0 -1
- package/lib/FilteredActionList/FilteredActionList-e1dde781.css +0 -2
- package/lib/FilteredActionList/FilteredActionList-e1dde781.css.map +0 -1
- package/lib/FilteredActionList/FilteredActionListEntry.d.ts +0 -7
- package/lib/FilteredActionList/FilteredActionListEntry.d.ts.map +0 -1
- package/lib/FilteredActionList/FilteredActionListEntry.js +0 -40
- package/lib/FilteredActionList/FilteredActionListWithDeprecatedActionList.d.ts +0 -23
- package/lib/FilteredActionList/FilteredActionListWithDeprecatedActionList.d.ts.map +0 -1
- package/lib/FilteredActionList/FilteredActionListWithDeprecatedActionList.js +0 -219
- package/lib/FilteredActionList/FilteredActionListWithModernActionList.d.ts.map +0 -1
- package/lib/Overlay/Overlay-aeb12fc3.css +0 -2
- package/lib/Overlay/Overlay-aeb12fc3.css.map +0 -1
- package/lib/Popover/Popover-e16fd997.css +0 -2
- package/lib/Popover/Popover-e16fd997.css.map +0 -1
- package/lib/ProgressBar/ProgressBar-430cdef7.css +0 -2
- package/lib/ProgressBar/ProgressBar-430cdef7.css.map +0 -1
- package/lib/SelectPanel/SelectPanel-bfde365c.css +0 -2
- package/lib/SelectPanel/SelectPanel-bfde365c.css.map +0 -1
- package/lib/SelectPanel/types.d.ts +0 -4
- package/lib/SelectPanel/types.d.ts.map +0 -1
- package/lib/Stack/Stack-83ac2229.css.map +0 -1
- package/lib/TabNav/TabNav-9753d6ed.css +0 -2
- package/lib/TabNav/TabNav-9753d6ed.css.map +0 -1
- package/lib/Token/AvatarToken-ff45cc85.css +0 -2
- package/lib/Token/AvatarToken-ff45cc85.css.map +0 -1
- package/lib/Token/AvatarToken.d.ts +0 -8
- package/lib/Token/AvatarToken.d.ts.map +0 -1
- package/lib/Token/AvatarToken.js +0 -99
- package/lib/Token/AvatarToken.module.css.js +0 -7
- package/lib/Token/IssueLabelToken-99c9b914.css +0 -2
- package/lib/Token/IssueLabelToken-99c9b914.css.map +0 -1
- package/lib/TooltipV2/Tooltip-59734b6f.css +0 -2
- package/lib/TooltipV2/Tooltip-59734b6f.css.map +0 -1
- package/lib/experimental/IssueLabel/IssueLabel-5507fbf3.css +0 -2
- package/lib/experimental/IssueLabel/IssueLabel-5507fbf3.css.map +0 -1
- package/lib/experimental/Skeleton/SkeletonAvatar-e00fff32.css +0 -2
- package/lib/experimental/Skeleton/SkeletonAvatar-e00fff32.css.map +0 -1
- package/lib/experimental/Skeleton/SkeletonAvatar.d.ts +0 -8
- package/lib/experimental/Skeleton/SkeletonAvatar.d.ts.map +0 -1
- package/lib/experimental/Skeleton/SkeletonText-5cf908c1.css +0 -2
- package/lib/experimental/Skeleton/SkeletonText-5cf908c1.css.map +0 -1
- package/lib/experimental/Skeleton/SkeletonText.d.ts.map +0 -1
- package/lib/experimental/Skeleton/SkeletonText.js +0 -149
- package/lib/experimental/Skeleton/SkeletonText.module.css.js +0 -7
- package/lib/experimental/Skeleton/index.d.ts +0 -4
- package/lib/experimental/Skeleton/index.d.ts.map +0 -1
- package/lib/internal/utils/toggleStyledComponent.d.ts +0 -20
- package/lib/internal/utils/toggleStyledComponent.d.ts.map +0 -1
- package/lib/internal/utils/toggleSxComponent.d.ts +0 -15
- package/lib/internal/utils/toggleSxComponent.d.ts.map +0 -1
- package/lib/internal/utils/toggleSxComponent.js +0 -83
- package/lib/node_modules/@github/mini-throttle/dist/index.js +0 -43
- package/lib-esm/ActionList/ActionList-49cba224.css +0 -2
- package/lib-esm/ActionList/ActionList-49cba224.css.map +0 -1
- package/lib-esm/AvatarPair/AvatarPair-68990abe.css +0 -2
- package/lib-esm/AvatarPair/AvatarPair-68990abe.css.map +0 -1
- package/lib-esm/AvatarPair/AvatarPair.d.ts +0 -8
- package/lib-esm/AvatarPair/AvatarPair.js +0 -86
- package/lib-esm/AvatarPair/AvatarPair.module.css.js +0 -5
- package/lib-esm/AvatarPair/index.d.ts +0 -3
- package/lib-esm/AvatarStack/AvatarStack-f0712fca.css +0 -2
- package/lib-esm/AvatarStack/AvatarStack-f0712fca.css.map +0 -1
- package/lib-esm/Banner/Banner-43e2cd6a.css +0 -2
- package/lib-esm/Banner/Banner-43e2cd6a.css.map +0 -1
- package/lib-esm/BaseStyles-7880c337.css.map +0 -1
- package/lib-esm/Blankslate/Blankslate-a68ed307.css.map +0 -1
- package/lib-esm/CircleOcticon/CircleOcticon.d.ts +0 -13
- package/lib-esm/CircleOcticon/CircleOcticon.js +0 -94
- package/lib-esm/CircleOcticon/index.d.ts +0 -3
- package/lib-esm/FilteredActionList/FilteredActionList-e1dde781.css +0 -2
- package/lib-esm/FilteredActionList/FilteredActionList-e1dde781.css.map +0 -1
- package/lib-esm/FilteredActionList/FilteredActionListEntry.d.ts +0 -7
- package/lib-esm/FilteredActionList/FilteredActionListEntry.js +0 -38
- package/lib-esm/FilteredActionList/FilteredActionListWithDeprecatedActionList.d.ts +0 -23
- package/lib-esm/FilteredActionList/FilteredActionListWithDeprecatedActionList.js +0 -213
- package/lib-esm/Overlay/Overlay-aeb12fc3.css +0 -2
- package/lib-esm/Overlay/Overlay-aeb12fc3.css.map +0 -1
- package/lib-esm/Popover/Popover-e16fd997.css +0 -2
- package/lib-esm/Popover/Popover-e16fd997.css.map +0 -1
- package/lib-esm/ProgressBar/ProgressBar-430cdef7.css +0 -2
- package/lib-esm/ProgressBar/ProgressBar-430cdef7.css.map +0 -1
- package/lib-esm/SelectPanel/SelectPanel-bfde365c.css +0 -2
- package/lib-esm/SelectPanel/SelectPanel-bfde365c.css.map +0 -1
- package/lib-esm/SelectPanel/types.d.ts +0 -4
- package/lib-esm/Stack/Stack-83ac2229.css.map +0 -1
- package/lib-esm/TabNav/TabNav-9753d6ed.css +0 -2
- package/lib-esm/TabNav/TabNav-9753d6ed.css.map +0 -1
- package/lib-esm/Token/AvatarToken-ff45cc85.css +0 -2
- package/lib-esm/Token/AvatarToken-ff45cc85.css.map +0 -1
- package/lib-esm/Token/AvatarToken.d.ts +0 -8
- package/lib-esm/Token/AvatarToken.js +0 -97
- package/lib-esm/Token/AvatarToken.module.css.js +0 -5
- package/lib-esm/Token/IssueLabelToken-99c9b914.css +0 -2
- package/lib-esm/Token/IssueLabelToken-99c9b914.css.map +0 -1
- package/lib-esm/TooltipV2/Tooltip-59734b6f.css +0 -2
- package/lib-esm/TooltipV2/Tooltip-59734b6f.css.map +0 -1
- package/lib-esm/experimental/IssueLabel/IssueLabel-5507fbf3.css +0 -2
- package/lib-esm/experimental/IssueLabel/IssueLabel-5507fbf3.css.map +0 -1
- package/lib-esm/experimental/Skeleton/SkeletonAvatar-e00fff32.css +0 -2
- package/lib-esm/experimental/Skeleton/SkeletonAvatar-e00fff32.css.map +0 -1
- package/lib-esm/experimental/Skeleton/SkeletonAvatar.d.ts +0 -8
- package/lib-esm/experimental/Skeleton/SkeletonAvatar.module.css.js +0 -5
- package/lib-esm/experimental/Skeleton/SkeletonText-5cf908c1.css +0 -2
- package/lib-esm/experimental/Skeleton/SkeletonText-5cf908c1.css.map +0 -1
- package/lib-esm/experimental/Skeleton/SkeletonText.js +0 -143
- package/lib-esm/experimental/Skeleton/SkeletonText.module.css.js +0 -5
- package/lib-esm/experimental/Skeleton/index.d.ts +0 -4
- package/lib-esm/internal/utils/toggleStyledComponent.d.ts +0 -20
- package/lib-esm/internal/utils/toggleSxComponent.d.ts +0 -15
- package/lib-esm/internal/utils/toggleSxComponent.js +0 -77
- package/lib-esm/node_modules/@github/mini-throttle/dist/index.js +0 -40
package/lib/Avatar/Avatar.js
CHANGED
|
@@ -6,7 +6,6 @@ var reactCompilerRuntime = require('react-compiler-runtime');
|
|
|
6
6
|
var clsx = require('clsx');
|
|
7
7
|
var React = require('react');
|
|
8
8
|
var useResponsiveValue = require('../hooks/useResponsiveValue.js');
|
|
9
|
-
var defaultSxProp = require('../utils/defaultSxProp.js');
|
|
10
9
|
var BoxWithFallback = require('../internal/components/BoxWithFallback.js');
|
|
11
10
|
var Avatar_module = require('./Avatar.module.css.js');
|
|
12
11
|
var jsxRuntime = require('react/jsx-runtime');
|
|
@@ -21,16 +20,16 @@ const Avatar = /*#__PURE__*/React__default.default.forwardRef(function Avatar(t0
|
|
|
21
20
|
let className;
|
|
22
21
|
let rest;
|
|
23
22
|
let style;
|
|
23
|
+
let sxProp;
|
|
24
24
|
let t1;
|
|
25
25
|
let t2;
|
|
26
26
|
let t3;
|
|
27
|
-
let t4;
|
|
28
27
|
if ($[0] !== t0) {
|
|
29
28
|
({
|
|
30
29
|
alt: t1,
|
|
31
30
|
size: t2,
|
|
32
31
|
square: t3,
|
|
33
|
-
sx:
|
|
32
|
+
sx: sxProp,
|
|
34
33
|
className,
|
|
35
34
|
style,
|
|
36
35
|
...rest
|
|
@@ -39,32 +38,31 @@ const Avatar = /*#__PURE__*/React__default.default.forwardRef(function Avatar(t0
|
|
|
39
38
|
$[1] = className;
|
|
40
39
|
$[2] = rest;
|
|
41
40
|
$[3] = style;
|
|
42
|
-
$[4] =
|
|
43
|
-
$[5] =
|
|
44
|
-
$[6] =
|
|
45
|
-
$[7] =
|
|
41
|
+
$[4] = sxProp;
|
|
42
|
+
$[5] = t1;
|
|
43
|
+
$[6] = t2;
|
|
44
|
+
$[7] = t3;
|
|
46
45
|
} else {
|
|
47
46
|
className = $[1];
|
|
48
47
|
rest = $[2];
|
|
49
48
|
style = $[3];
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
49
|
+
sxProp = $[4];
|
|
50
|
+
t1 = $[5];
|
|
51
|
+
t2 = $[6];
|
|
52
|
+
t3 = $[7];
|
|
54
53
|
}
|
|
55
54
|
const alt = t1 === undefined ? "" : t1;
|
|
56
55
|
const size = t2 === undefined ? DEFAULT_AVATAR_SIZE : t2;
|
|
57
56
|
const square = t3 === undefined ? false : t3;
|
|
58
|
-
|
|
59
|
-
let t5;
|
|
57
|
+
let t4;
|
|
60
58
|
if ($[8] !== size) {
|
|
61
|
-
|
|
59
|
+
t4 = useResponsiveValue.isResponsiveValue(size);
|
|
62
60
|
$[8] = size;
|
|
63
|
-
$[9] =
|
|
61
|
+
$[9] = t4;
|
|
64
62
|
} else {
|
|
65
|
-
|
|
63
|
+
t4 = $[9];
|
|
66
64
|
}
|
|
67
|
-
const isResponsive =
|
|
65
|
+
const isResponsive = t4;
|
|
68
66
|
let cssSizeVars;
|
|
69
67
|
if ($[10] !== isResponsive || $[11] !== size) {
|
|
70
68
|
cssSizeVars = {};
|
|
@@ -81,43 +79,43 @@ const Avatar = /*#__PURE__*/React__default.default.forwardRef(function Avatar(t0
|
|
|
81
79
|
} else {
|
|
82
80
|
cssSizeVars = $[12];
|
|
83
81
|
}
|
|
84
|
-
let
|
|
82
|
+
let t5;
|
|
85
83
|
if ($[13] !== className) {
|
|
86
|
-
|
|
84
|
+
t5 = clsx.clsx(className, Avatar_module.Avatar);
|
|
87
85
|
$[13] = className;
|
|
88
|
-
$[14] =
|
|
86
|
+
$[14] = t5;
|
|
89
87
|
} else {
|
|
90
|
-
|
|
88
|
+
t5 = $[14];
|
|
91
89
|
}
|
|
92
|
-
const
|
|
93
|
-
const
|
|
90
|
+
const t6 = isResponsive ? "" : undefined;
|
|
91
|
+
const t7 = square ? "" : undefined;
|
|
92
|
+
const t8 = isResponsive ? undefined : size;
|
|
94
93
|
const t9 = isResponsive ? undefined : size;
|
|
95
|
-
|
|
96
|
-
let t11;
|
|
94
|
+
let t10;
|
|
97
95
|
if ($[15] !== cssSizeVars || $[16] !== style) {
|
|
98
|
-
|
|
96
|
+
t10 = style ? {
|
|
99
97
|
...cssSizeVars,
|
|
100
98
|
...style
|
|
101
99
|
} : cssSizeVars;
|
|
102
100
|
$[15] = cssSizeVars;
|
|
103
101
|
$[16] = style;
|
|
104
|
-
$[17] =
|
|
102
|
+
$[17] = t10;
|
|
105
103
|
} else {
|
|
106
|
-
|
|
104
|
+
t10 = $[17];
|
|
107
105
|
}
|
|
108
|
-
let
|
|
109
|
-
if ($[18] !== alt || $[19] !== ref || $[20] !== rest || $[21] !== sxProp || $[22] !== t10 || $[23] !==
|
|
110
|
-
|
|
106
|
+
let t11;
|
|
107
|
+
if ($[18] !== alt || $[19] !== ref || $[20] !== rest || $[21] !== sxProp || $[22] !== t10 || $[23] !== t5 || $[24] !== t6 || $[25] !== t7 || $[26] !== t8 || $[27] !== t9) {
|
|
108
|
+
t11 = /*#__PURE__*/jsxRuntime.jsx(BoxWithFallback.BoxWithFallback, {
|
|
111
109
|
as: "img",
|
|
112
110
|
"data-component": "Avatar",
|
|
113
|
-
className:
|
|
111
|
+
className: t5,
|
|
114
112
|
ref: ref,
|
|
115
113
|
alt: alt,
|
|
116
|
-
"data-responsive":
|
|
117
|
-
"data-square":
|
|
118
|
-
width:
|
|
119
|
-
height:
|
|
120
|
-
style:
|
|
114
|
+
"data-responsive": t6,
|
|
115
|
+
"data-square": t7,
|
|
116
|
+
width: t8,
|
|
117
|
+
height: t9,
|
|
118
|
+
style: t10,
|
|
121
119
|
sx: sxProp,
|
|
122
120
|
...rest
|
|
123
121
|
});
|
|
@@ -126,16 +124,16 @@ const Avatar = /*#__PURE__*/React__default.default.forwardRef(function Avatar(t0
|
|
|
126
124
|
$[20] = rest;
|
|
127
125
|
$[21] = sxProp;
|
|
128
126
|
$[22] = t10;
|
|
129
|
-
$[23] =
|
|
127
|
+
$[23] = t5;
|
|
130
128
|
$[24] = t6;
|
|
131
129
|
$[25] = t7;
|
|
132
130
|
$[26] = t8;
|
|
133
131
|
$[27] = t9;
|
|
134
|
-
$[28] =
|
|
132
|
+
$[28] = t11;
|
|
135
133
|
} else {
|
|
136
|
-
|
|
134
|
+
t11 = $[28];
|
|
137
135
|
}
|
|
138
|
-
return
|
|
136
|
+
return t11;
|
|
139
137
|
});
|
|
140
138
|
if (process.env.NODE_ENV !== "production") {
|
|
141
139
|
Avatar.displayName = 'Avatar';
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
.prc-AvatarStack-AvatarStack-N-r3C{--avatar-border-width:1px;--mask-size:calc(100% + var(--avatar-border-width)*2);--mask-start:-1;--opacity-step:15%;display:flex;height:var(--avatar-stack-size);isolation:isolate;min-width:var(--avatar-stack-size);position:relative}.prc-AvatarStack-AvatarStack-N-r3C:where([data-variant=cascade]){--overlap-size:calc(var(--avatar-stack-size)*0.55);--overlap-size-avatar-three-plus:calc(var(--avatar-stack-size)*0.85)}.prc-AvatarStack-AvatarStack-N-r3C:where([data-variant=stack]){--overlap-size:calc(var(--avatar-stack-size)*0.55);--overlap-size-avatar-three-plus:calc(var(--avatar-stack-size)*0.55)}@media screen and (max-width:calc(48rem - 0.02px)){.prc-AvatarStack-AvatarStack-N-r3C:where([data-responsive]){--avatar-stack-size:var(--stackSize-narrow)}}@media screen and (min-width:48rem){.prc-AvatarStack-AvatarStack-N-r3C:where([data-responsive]){--avatar-stack-size:var(--stackSize-regular)}}@media screen and (min-width:87.5rem){.prc-AvatarStack-AvatarStack-N-r3C:where([data-responsive]){--avatar-stack-size:var(--stackSize-wide)}}.prc-AvatarStack-AvatarStack-N-r3C:where([data-avatar-count="1"][data-shape=circle]) .prc-AvatarStack-AvatarItem-nS1mt{box-shadow:0 0 0 var(--avatar-border-width) var(--avatar-borderColor,var(--color-avatar-border))}.prc-AvatarStack-AvatarStack-N-r3C:where([data-avatar-count="1"][data-shape=square]) .prc-AvatarStack-AvatarItem-nS1mt{box-shadow:1px 0 #000}.prc-AvatarStack-AvatarStack-N-r3C:where([data-avatar-count="1"][data-shape=square][data-align-right]) .prc-AvatarStack-AvatarItem-nS1mt{box-shadow:-1px 0 #000}.prc-AvatarStack-AvatarStack-N-r3C:where([data-avatar-count="2"]){min-width:calc(var(--avatar-stack-size) + var(--avatar-stack-size) - var(--overlap-size))}.prc-AvatarStack-AvatarStack-N-r3C:where([data-avatar-count="3"][data-variant=cascade]){min-width:calc(var(--avatar-stack-size) + var(--avatar-stack-size) - var(--overlap-size) + var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))}.prc-AvatarStack-AvatarStack-N-r3C:where([data-avatar-count="3"][data-variant=stack]){min-width:calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))*2)}.prc-AvatarStack-AvatarStack-N-r3C:where([data-avatar-count="3+"][data-variant=cascade]){min-width:calc(var(--avatar-stack-size) + var(--avatar-stack-size) - var(--overlap-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))*2)}.prc-AvatarStack-AvatarStack-N-r3C:where([data-avatar-count="3+"][data-variant=stack]){min-width:calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))*3);--overlap-size:var(--overlap-size-avatar-three-plus)}.prc-AvatarStack-AvatarStack-N-r3C:where([data-align-right]){--mask-start:1;direction:rtl}.prc-AvatarStack-AvatarStackBody-mSyoJ{display:flex;position:absolute}.prc-AvatarStack-AvatarStackBody-mSyoJ:where([data-disable-expand]){position:relative}.prc-AvatarStack-AvatarItem-nS1mt{--avatarSize-regular:var(--avatar-stack-size);display:flex;flex-shrink:0;height:var(--avatar-stack-size);overflow:hidden;position:relative;transition:margin .2s ease-in-out,opacity .2s ease-in-out,mask-position .2s ease-in-out,mask-size .2s ease-in-out;width:var(--avatar-stack-size)}.prc-AvatarStack-AvatarStack-N-r3C:where([data-shape=circle]) .prc-AvatarStack-AvatarItem-nS1mt:is(img){box-shadow:0 0 0 var(--avatar-border-width) transparent}.prc-AvatarStack-AvatarStack-N-r3C:where([data-shape=square]) .prc-AvatarStack-AvatarItem-nS1mt:is(img){box-shadow:1px 0 #fff}.prc-AvatarStack-AvatarStack-N-r3C:where([data-shape=square][data-align-right]) .prc-AvatarStack-AvatarItem-nS1mt:is(img){box-shadow:-1px 0 #fff}.prc-AvatarStack-AvatarItem-nS1mt:first-child{margin-inline-start:0}.prc-AvatarStack-AvatarItem-nS1mt:nth-child(n+2){margin-inline-start:calc(var(--overlap-size)*-1);mask-composite:exclude;mask-position:calc((var(--avatar-stack-size) - var(--overlap-size))*var(--mask-start) - var(--avatar-border-width)) center,0 0;mask-repeat:no-repeat,no-repeat;mask-size:var(--mask-size) var(--mask-size),auto;padding:.1px}.prc-AvatarStack-AvatarStack-N-r3C:where([data-shape=circle]) .prc-AvatarStack-AvatarItem-nS1mt:nth-child(n+2){mask-image:radial-gradient(at 50% 50%,#000 70%,transparent 71%),linear-gradient(#000 0 0)}.prc-AvatarStack-AvatarStack-N-r3C:where([data-shape=square]) .prc-AvatarStack-AvatarItem-nS1mt:nth-child(n+2){mask-image:linear-gradient(at 50% 50%,#000 70%,transparent 71%),linear-gradient(#000 0 0)}.prc-AvatarStack-AvatarStack-N-r3C:where([data-variant=cascade]) .prc-AvatarStack-AvatarItem-nS1mt:nth-child(n+3){--overlap-size:var(--overlap-size-avatar-three-plus);opacity:calc(100% - var(--opacity-step)*2)}.prc-AvatarStack-AvatarStack-N-r3C:where([data-variant=cascade]) .prc-AvatarStack-AvatarItem-nS1mt:nth-child(n+4){opacity:calc(100% - var(--opacity-step)*3)}.prc-AvatarStack-AvatarStack-N-r3C:where([data-variant=cascade]) .prc-AvatarStack-AvatarItem-nS1mt:nth-child(n+5){opacity:calc(100% - var(--opacity-step)*4)}.prc-AvatarStack-AvatarStack-N-r3C:where([data-shape=square]) .prc-AvatarStack-AvatarItem-nS1mt:first-child{z-index:5}.prc-AvatarStack-AvatarStack-N-r3C:where([data-shape=square]) .prc-AvatarStack-AvatarItem-nS1mt:nth-child(2){z-index:4}.prc-AvatarStack-AvatarStack-N-r3C:where([data-shape=square]) .prc-AvatarStack-AvatarItem-nS1mt:nth-child(3){z-index:3}.prc-AvatarStack-AvatarStack-N-r3C:where([data-shape=square]) .prc-AvatarStack-AvatarItem-nS1mt:nth-child(4){z-index:2}.prc-AvatarStack-AvatarStack-N-r3C:where([data-shape=square]) .prc-AvatarStack-AvatarItem-nS1mt:nth-child(5){z-index:1}.prc-AvatarStack-AvatarItem-nS1mt:nth-child(n+6){opacity:0;visibility:hidden}.prc-AvatarStack-AvatarStackBody-mSyoJ:not([data-disable-expand]):focus-within,.prc-AvatarStack-AvatarStackBody-mSyoJ:not([data-disable-expand]):hover{width:auto}:is(.prc-AvatarStack-AvatarStackBody-mSyoJ:not([data-disable-expand]):hover,.prc-AvatarStack-AvatarStackBody-mSyoJ:not([data-disable-expand]):focus-within) .prc-AvatarStack-AvatarItem-nS1mt{--mask-size:100%;margin-inline-start:var(--base-size-4,.25rem);mask-position:calc(var(--avatar-stack-size)*var(--mask-start)) center,0 0;opacity:1;visibility:visible}:is(:is(.prc-AvatarStack-AvatarStackBody-mSyoJ:not([data-disable-expand]):hover,.prc-AvatarStack-AvatarStackBody-mSyoJ:not([data-disable-expand]):focus-within) .prc-AvatarStack-AvatarItem-nS1mt):first-child{margin-inline-start:0}
|
|
2
|
+
/*# sourceMappingURL=AvatarStack-802bdd7c.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/AvatarStack/AvatarStack.module.css"],"names":[],"mappings":"AACA,mCACE,yBAA0B,CAC1B,qDAA0D,CAC1D,eAAgB,CAChB,kBAAmB,CAGnB,YAAa,CAEb,+BAAgC,CAChC,iBAAkB,CAFlB,kCAAmC,CAFnC,iBA2GF,CArGE,iEACE,kDAAqD,CACrD,oEACF,CAEA,+DACE,kDAAqD,CACrD,oEACF,CAGE,mDADF,4DAEI,2CAUJ,CATE,CAEA,oCALF,4DAMI,4CAMJ,CALE,CAEA,sCATF,4DAUI,yCAEJ,CADE,CAIA,uHAEE,gGACF,CAGF,uHAEE,qBACF,CAEA,yIAEE,sBACF,CAEA,kEAME,yFACF,CAEA,wFAOE,4JAIF,CAEA,sFAME,+GACF,CAEA,yFAOE,gKAIF,CAEA,uFAME,+GAAkH,CAElH,oDACF,CAEA,6DACE,cAAe,CAEf,aACF,CAGF,uCAEE,YAAa,CADb,iBAMF,CAHE,oEACE,iBACF,CAGF,kCACE,6CAA8C,CAG9C,YAAa,CAIb,aAAc,CAFd,+BAAgC,CAChC,eAAgB,CAJhB,iBAAkB,CAMlB,iHAI4B,CAR5B,8BA6GF,CAnGE,wGAEE,uDACF,CAEA,wGAEE,qBACF,CAEA,0HAEE,sBACF,CAEA,8CACE,qBACF,CAEA,iDAEE,gDAAmD,CAKnD,sBAAuB,CAQvB,8HAEK,CAdL,+BAAiC,CACjC,gDAEM,CAeN,YACF,CAGA,+GAEE,yFACF,CAGA,+GAEE,yFACF,CAGA,kHACE,oDAAqD,CAGrD,0CACF,CAGA,kHAEE,0CACF,CAGA,kHAEE,0CACF,CAEA,4GACE,SACF,CAEA,6GACE,SACF,CAEA,6GACE,SACF,CAEA,6GACE,SACF,CAEA,6GACE,SACF,CAEA,iDAEE,SAAU,CADV,iBAEF,CAGF,uJAEE,UAsBF,CApBE,8LACE,gBAAiB,CAEjB,6CAAuC,CASvC,yEAEK,CATL,SAAU,CADV,kBAeF,CAHE,+MACE,qBACF","file":"AvatarStack-802bdd7c.css","sourcesContent":["/* stylelint-disable selector-max-specificity */\n.AvatarStack {\n --avatar-border-width: 1px;\n --mask-size: calc(100% + (var(--avatar-border-width) * 2));\n --mask-start: -1;\n --opacity-step: 15%;\n\n position: relative;\n display: flex;\n min-width: var(--avatar-stack-size);\n height: var(--avatar-stack-size);\n isolation: isolate;\n\n &:where([data-variant='cascade']) {\n --overlap-size: calc(var(--avatar-stack-size) * 0.55);\n --overlap-size-avatar-three-plus: calc(var(--avatar-stack-size) * 0.85);\n }\n\n &:where([data-variant='stack']) {\n --overlap-size: calc(var(--avatar-stack-size) * 0.55);\n --overlap-size-avatar-three-plus: calc(var(--avatar-stack-size) * 0.55);\n }\n\n &:where([data-responsive]) {\n @media screen and (--viewportRange-narrow) {\n --avatar-stack-size: var(--stackSize-narrow);\n }\n\n @media screen and (--viewportRange-regular) {\n --avatar-stack-size: var(--stackSize-regular);\n }\n\n @media screen and (--viewportRange-wide) {\n --avatar-stack-size: var(--stackSize-wide);\n }\n }\n\n &:where([data-avatar-count='1'][data-shape='circle']) {\n .AvatarItem {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 0 0 0 var(--avatar-border-width) var(--avatar-borderColor);\n }\n }\n\n &:where([data-avatar-count='1'][data-shape='square']) .AvatarItem {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 1px 0 rgba(0, 0, 0, 1);\n }\n\n &:where([data-avatar-count='1'][data-shape='square'][data-align-right]) .AvatarItem {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: -1px 0 rgba(0, 0, 0, 1);\n }\n\n &:where([data-avatar-count='2']) {\n /*\n MIN-WIDTH CALC FORMULA EXPLAINED:\n avatar size ➡️ var(--avatar-stack-size)\n plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)\n */\n min-width: calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)));\n }\n\n &:where([data-avatar-count='3'][data-variant='cascade']) {\n /*\n MIN-WIDTH CALC FORMULA EXPLAINED:\n avatar size ➡️ var(--avatar-stack-size)\n plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)\n plus the visible part of the 3rd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)\n */\n min-width: calc(\n var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)) +\n (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))\n );\n }\n\n &:where([data-avatar-count='3'][data-variant='stack']) {\n /*\n MIN-WIDTH CALC FORMULA EXPLAINED:\n avatar size ➡️ var(--avatar-stack-size)\n plus the visible part of the 2nd avatar & 3rd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus) * 2\n */\n min-width: calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2);\n }\n\n &:where([data-avatar-count='3+'][data-variant='cascade']) {\n /*\n MIN-WIDTH CALC FORMULA EXPLAINED:\n avatar size ➡️ var(--avatar-stack-size)\n plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)\n plus the visible part of the 3rd AND 4th avatar ➡️ (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2\n */\n min-width: calc(\n var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)) +\n (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2\n );\n }\n\n &:where([data-avatar-count='3+'][data-variant='stack']) {\n /*\n MIN-WIDTH CALC FORMULA EXPLAINED:\n avatar size ➡️ var(--avatar-stack-size)\n plus the visible part of the 2nd to 4th avatars ➡️ var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus) * 3\n */\n min-width: calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 3);\n\n --overlap-size: var(--overlap-size-avatar-three-plus);\n }\n\n &:where([data-align-right]) {\n --mask-start: 1;\n\n direction: rtl;\n }\n}\n\n.AvatarStackBody {\n position: absolute;\n display: flex;\n\n &:where([data-disable-expand]) {\n position: relative;\n }\n}\n\n.AvatarItem {\n --avatarSize-regular: var(--avatar-stack-size);\n\n position: relative;\n display: flex;\n width: var(--avatar-stack-size);\n height: var(--avatar-stack-size);\n overflow: hidden;\n flex-shrink: 0;\n transition:\n margin 0.2s ease-in-out,\n opacity 0.2s ease-in-out,\n mask-position 0.2s ease-in-out,\n mask-size 0.2s ease-in-out;\n\n .AvatarStack:where([data-shape='circle']) &:is(img) {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 0 0 0 var(--avatar-border-width) transparent;\n }\n\n .AvatarStack:where([data-shape='square']) &:is(img) {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 1px 0 rgba(255, 255, 255, 1);\n }\n\n .AvatarStack:where([data-shape='square'][data-align-right]) &:is(img) {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: -1px 0 rgba(255, 255, 255, 1);\n }\n\n &:first-child {\n margin-inline-start: 0;\n }\n\n &:nth-child(n + 2) {\n /* stylelint-disable-next-line primer/spacing */\n margin-inline-start: calc(var(--overlap-size) * -1);\n mask-repeat: no-repeat, no-repeat;\n mask-size:\n var(--mask-size) var(--mask-size),\n auto;\n mask-composite: exclude;\n\n /*\n HORIZONTAL POSITION CALC FORMULA EXPLAINED:\n width of the visible part of the avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)\n multiply by -1 for left-aligned, 1 for right-aligned ➡️ var(--mask-start)\n subtract the avatar border width ➡️ var(--avatar-border-width)\n */\n mask-position:\n calc((var(--avatar-stack-size) - var(--overlap-size)) * var(--mask-start) - var(--avatar-border-width)) center,\n 0 0;\n\n /* HACK: This padding fixes a weird rendering bug where a tiiiiny outline is visible at the edges of the element */\n /* stylelint-disable-next-line primer/spacing */\n padding: 0.1px;\n }\n\n /* Circular mask */\n .AvatarStack:where([data-shape='circle']) &:nth-child(n + 2) {\n /* stylelint-disable-next-line declaration-property-value-no-unknown */\n mask-image: radial-gradient(at 50% 50%, rgb(0, 0, 0) 70%, rgba(0, 0, 0, 0) 71%), linear-gradient(rgb(0, 0, 0) 0 0);\n }\n\n /* Square mask */\n .AvatarStack:where([data-shape='square']) &:nth-child(n + 2) {\n /* stylelint-disable-next-line declaration-property-value-no-unknown */\n mask-image: linear-gradient(at 50% 50%, rgb(0, 0, 0) 70%, rgba(0, 0, 0, 0) 71%), linear-gradient(rgb(0, 0, 0) 0 0);\n }\n\n /* Cascade variant override for nth-child(n + 3) */\n .AvatarStack:where([data-variant='cascade']) &:nth-child(n + 3) {\n --overlap-size: var(--overlap-size-avatar-three-plus);\n\n /* stylelint-disable-next-line alpha-value-notation */\n opacity: calc(100% - 2 * var(--opacity-step));\n }\n\n /* Cascade variant override for nth-child(n + 4) */\n .AvatarStack:where([data-variant='cascade']) &:nth-child(n + 4) {\n /* stylelint-disable-next-line alpha-value-notation */\n opacity: calc(100% - 3 * var(--opacity-step));\n }\n\n /* Cascade variant override for nth-child(n + 5) */\n .AvatarStack:where([data-variant='cascade']) &:nth-child(n + 5) {\n /* stylelint-disable-next-line alpha-value-notation */\n opacity: calc(100% - 4 * var(--opacity-step));\n }\n\n .AvatarStack:where([data-shape='square']) &:nth-child(1) {\n z-index: 5;\n }\n\n .AvatarStack:where([data-shape='square']) &:nth-child(2) {\n z-index: 4;\n }\n\n .AvatarStack:where([data-shape='square']) &:nth-child(3) {\n z-index: 3;\n }\n\n .AvatarStack:where([data-shape='square']) &:nth-child(4) {\n z-index: 2;\n }\n\n .AvatarStack:where([data-shape='square']) &:nth-child(5) {\n z-index: 1;\n }\n\n &:nth-child(n + 6) {\n visibility: hidden;\n opacity: 0;\n }\n}\n\n.AvatarStackBody:not([data-disable-expand]):hover,\n.AvatarStackBody:not([data-disable-expand]):focus-within {\n width: auto;\n\n .AvatarItem {\n --mask-size: 100%; /* reset size of the mask to prevent unintentially clipping due to the additional size created by the border width */\n\n margin-inline-start: var(--base-size-4);\n visibility: visible;\n opacity: 1;\n\n /*\n HORIZONTAL POSITION CALC FORMULA EXPLAINED:\n width of the full avatar ➡️ var(--avatar-stack-size)\n multiply by -1 for left-aligned, 1 for right-aligned ➡️ var(--mask-start)\n */\n mask-position:\n calc(var(--avatar-stack-size) * var(--mask-start)) center,\n 0 0;\n\n &:first-child {\n margin-inline-start: 0;\n }\n }\n}\n"]}
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type { SxProp } from '../sx';
|
|
3
2
|
import type { ResponsiveValue } from '../hooks/useResponsiveValue';
|
|
4
3
|
export type AvatarStackProps = {
|
|
5
4
|
alignRight?: boolean;
|
|
6
5
|
disableExpand?: boolean;
|
|
6
|
+
variant?: 'cascade' | 'stack';
|
|
7
|
+
shape?: 'circle' | 'square';
|
|
7
8
|
size?: number | ResponsiveValue<number>;
|
|
8
9
|
className?: string;
|
|
9
10
|
children: React.ReactNode;
|
|
10
11
|
style?: React.CSSProperties;
|
|
11
|
-
}
|
|
12
|
-
declare const AvatarStack: ({ children, alignRight, disableExpand, size, className, style,
|
|
12
|
+
};
|
|
13
|
+
declare const AvatarStack: ({ children, variant, shape, alignRight, disableExpand, size, className, style, }: AvatarStackProps) => React.JSX.Element;
|
|
13
14
|
export default AvatarStack;
|
|
14
15
|
//# sourceMappingURL=AvatarStack.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarStack.d.ts","sourceRoot":"","sources":["../../src/AvatarStack/AvatarStack.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoC,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"AvatarStack.d.ts","sourceRoot":"","sources":["../../src/AvatarStack/AvatarStack.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoC,MAAM,OAAO,CAAA;AAGxD,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,6BAA6B,CAAA;AAkBhE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAC7B,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC3B,IAAI,CAAC,EAAE,MAAM,GAAG,eAAe,CAAC,MAAM,CAAC,CAAA;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,CAAA;AA8BD,QAAA,MAAM,WAAW,GAAI,kFASlB,gBAAgB,sBAyHlB,CAAA;AAED,eAAe,WAAW,CAAA"}
|
|
@@ -4,7 +4,6 @@ var clsx = require('clsx');
|
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var Avatar = require('../Avatar/Avatar.js');
|
|
6
6
|
var useResponsiveValue = require('../hooks/useResponsiveValue.js');
|
|
7
|
-
var defaultSxProp = require('../utils/defaultSxProp.js');
|
|
8
7
|
var AvatarStack_module = require('./AvatarStack.module.css.js');
|
|
9
8
|
var hasInteractiveNodes = require('../internal/utils/hasInteractiveNodes.js');
|
|
10
9
|
var BoxWithFallback = require('../internal/components/BoxWithFallback.js');
|
|
@@ -14,11 +13,12 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
|
14
13
|
|
|
15
14
|
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
16
15
|
|
|
17
|
-
const transformChildren = children => {
|
|
16
|
+
const transformChildren = (children, shape) => {
|
|
18
17
|
return React__default.default.Children.map(children, child => {
|
|
19
18
|
if (! /*#__PURE__*/React__default.default.isValidElement(child)) return child;
|
|
20
19
|
return /*#__PURE__*/React__default.default.cloneElement(child, {
|
|
21
20
|
...child.props,
|
|
21
|
+
square: shape === 'square' ? true : undefined,
|
|
22
22
|
className: clsx.clsx(child.props.className, 'pc-AvatarItem', AvatarStack_module.AvatarItem)
|
|
23
23
|
});
|
|
24
24
|
});
|
|
@@ -42,12 +42,13 @@ const AvatarStackBody = ({
|
|
|
42
42
|
AvatarStackBody.displayName = "AvatarStackBody";
|
|
43
43
|
const AvatarStack = ({
|
|
44
44
|
children,
|
|
45
|
+
variant = 'cascade',
|
|
46
|
+
shape = 'circle',
|
|
45
47
|
alignRight,
|
|
46
48
|
disableExpand,
|
|
47
49
|
size,
|
|
48
50
|
className,
|
|
49
|
-
style
|
|
50
|
-
sx: sxProp = defaultSxProp.defaultSxProp
|
|
51
|
+
style
|
|
51
52
|
}) => {
|
|
52
53
|
const [hasInteractiveChildren, setHasInteractiveChildren] = React.useState(false);
|
|
53
54
|
const stackContainer = React.useRef(null);
|
|
@@ -125,10 +126,14 @@ const AvatarStack = ({
|
|
|
125
126
|
};
|
|
126
127
|
return /*#__PURE__*/jsxRuntime.jsx(BoxWithFallback.BoxWithFallback, {
|
|
127
128
|
as: "span",
|
|
129
|
+
"data-variant": variant,
|
|
130
|
+
"data-shape": shape,
|
|
128
131
|
"data-avatar-count": count > 3 ? '3+' : count,
|
|
129
132
|
"data-align-right": alignRight ? '' : undefined,
|
|
130
133
|
"data-responsive": !size || useResponsiveValue.isResponsiveValue(size) ? '' : undefined,
|
|
131
134
|
className: clsx.clsx({
|
|
135
|
+
'pc-AvatarStack--variant': variant,
|
|
136
|
+
'pc-AvatarStack--shape': shape,
|
|
132
137
|
'pc-AvatarStack--two': count === 2,
|
|
133
138
|
'pc-AvatarStack--three': count === 3,
|
|
134
139
|
'pc-AvatarStack--three-plus': count > 3,
|
|
@@ -138,12 +143,11 @@ const AvatarStack = ({
|
|
|
138
143
|
...getResponsiveAvatarSizeStyles(),
|
|
139
144
|
...style
|
|
140
145
|
},
|
|
141
|
-
sx: sxProp,
|
|
142
146
|
children: /*#__PURE__*/jsxRuntime.jsxs(AvatarStackBody, {
|
|
143
147
|
disableExpand: disableExpand,
|
|
144
148
|
hasInteractiveChildren: hasInteractiveChildren,
|
|
145
149
|
stackContainer: stackContainer,
|
|
146
|
-
children: [' ', transformChildren(children)]
|
|
150
|
+
children: [' ', transformChildren(children, shape)]
|
|
147
151
|
})
|
|
148
152
|
});
|
|
149
153
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
require('./AvatarStack-
|
|
3
|
+
require('./AvatarStack-802bdd7c.css');
|
|
4
4
|
|
|
5
5
|
var classes = {"AvatarStack":"prc-AvatarStack-AvatarStack-N-r3C","AvatarItem":"prc-AvatarStack-AvatarItem-nS1mt","AvatarStackBody":"prc-AvatarStack-AvatarStackBody-mSyoJ"};
|
|
6
6
|
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
.prc-Banner-Banner-IR8eJ{align-items:start;background-color:var(--banner-bgColor);border:var(--borderWidth-thin,.0625rem) solid var(--banner-borderColor);border-radius:var(--borderRadius-medium,.375rem);display:grid;grid-template-columns:auto minmax(0,1fr) auto;padding:var(--base-size-8,.5rem)}@supports (container-type:inline-size){.prc-Banner-Banner-IR8eJ{container:banner/inline-size}}.prc-Banner-Banner-IR8eJ[data-variant=critical]{--banner-bgColor:var(--bgColor-danger-muted,var(--color-danger-subtle));--banner-borderColor:var(--borderColor-danger-muted,var(--color-danger-muted));--banner-icon-fgColor:var(--fgColor-danger,var(--color-danger-fg))}.prc-Banner-Banner-IR8eJ[data-variant=info]{--banner-bgColor:var(--bgColor-accent-muted,var(--color-accent-subtle));--banner-borderColor:var(--borderColor-accent-muted,var(--color-accent-muted));--banner-icon-fgColor:var(--fgColor-accent,var(--color-accent-fg))}.prc-Banner-Banner-IR8eJ[data-variant=success]{--banner-bgColor:var(--bgColor-success-muted,var(--color-success-subtle));--banner-borderColor:var(--borderColor-success-muted,var(--color-success-muted));--banner-icon-fgColor:var(--fgColor-success,var(--color-success-fg))}.prc-Banner-Banner-IR8eJ[data-variant=upsell]{--banner-bgColor:var(--bgColor-upsell-muted,#fbefff);--banner-borderColor:var(--borderColor-upsell-muted,#c297ff66);--banner-icon-fgColor:var(--fgColor-upsell,#8250df)}.prc-Banner-Banner-IR8eJ[data-variant=warning]{--banner-bgColor:var(--bgColor-attention-muted,var(--color-attention-subtle));--banner-borderColor:var(--borderColor-attention-muted,var(--color-attention-muted));--banner-icon-fgColor:var(--fgColor-attention,var(--color-attention-fg))}.prc-Banner-BannerContainer-lbx3d{align-items:start;column-gap:var(--base-size-4,.25rem);font-size:var(--text-body-size-medium,.875rem);line-height:var(--text-body-lineHeight-medium,1.4285);row-gap:var(--base-size-4,.25rem)}.prc-Banner-Banner-IR8eJ :where(.prc-Banner-BannerContainer-lbx3d){display:flex;flex-wrap:wrap;justify-content:space-between}.prc-Banner-Banner-IR8eJ[data-dismissible]:not([data-title-hidden=""]) .prc-Banner-BannerContainer-lbx3d{display:grid;grid-template-columns:auto;grid-template-rows:auto}.prc-Banner-BannerContent-zTITK{display:grid;grid-column-start:1;margin-block:var(--base-size-8,.5rem);row-gap:var(--base-size-4,.25rem)}.prc-Banner-Banner-IR8eJ[data-title-hidden]:not(:has(.prc-Banner-BannerActions-XCfHL)) .prc-Banner-BannerContent-zTITK{margin-block:var(--base-size-6,.375rem)}@media screen and (min-width:544px){.prc-Banner-BannerContent-zTITK{flex:1 1 0%}}.prc-Banner-BannerTitle-TcuJl{font-size:inherit;font-weight:var(--base-text-weight-semibold,600);margin:0}.prc-Banner-BannerIcon-WuOyf{display:grid;padding:var(--base-size-8,.5rem);place-items:center}.prc-Banner-BannerIcon-WuOyf svg{color:var(--banner-icon-fgColor);height:var(--base-size-20,1.25rem);fill:var(--banner-icon-fgColor)}.prc-Banner-Banner-IR8eJ[data-title-hidden]:not(:has(.prc-Banner-BannerActions-XCfHL)) .prc-Banner-BannerIcon-WuOyf svg{height:var(--base-size-16,1rem)}.prc-Banner-BannerDismiss-uBZVm{display:grid;margin-inline-start:var(--base-size-4,.25rem);padding:var(--base-size-8,.5rem);place-items:center}:where(.prc-Banner-Banner-IR8eJ):has(.prc-Banner-BannerActions-XCfHL) .prc-Banner-BannerDismiss-uBZVm{margin-block:var(--base-size-2,.125rem)}.prc-Banner-BannerDismiss-uBZVm svg{color:var(--banner-icon-fgColor)}.prc-Banner-BannerActionsContainer-ukGMH{align-items:center;column-gap:var(--base-size-12,.75rem);display:flex;margin-block:var(--base-size-2,.125rem)}.prc-Banner-BannerActions-XCfHL :where([data-primary-action=trailing]){display:none}@media screen and (min-width:48rem){.prc-Banner-BannerActions-XCfHL :where([data-primary-action=trailing]){display:flex}.prc-Banner-BannerActions-XCfHL :where([data-primary-action=leading]){display:none}}.prc-Banner-Banner-IR8eJ[data-dismissible]:not([data-title-hidden]) .prc-Banner-BannerActions-XCfHL{margin-block-end:var(--base-size-6,.375rem)}.prc-Banner-Banner-IR8eJ[data-dismissible]:not([data-title-hidden]) .prc-Banner-BannerActionsContainer-ukGMH[data-primary-action=trailing]{display:none}.prc-Banner-Banner-IR8eJ[data-dismissible]:not([data-title-hidden]) .prc-Banner-BannerActionsContainer-ukGMH[data-primary-action=leading]{display:flex}@container banner (max-width: 500px){.prc-Banner-BannerContainer-lbx3d{display:grid}.prc-Banner-BannerContainer-lbx3d:has(.prc-Banner-BannerActionsContainer-ukGMH){grid-template-rows:auto auto}.prc-Banner-BannerActions-XCfHL{margin-block-end:var(--base-size-6,.375rem)}.prc-Banner-BannerActions-XCfHL [data-primary-action=trailing]{display:none}.prc-Banner-BannerActions-XCfHL [data-primary-action=leading]{display:flex}}@container banner (min-width: 500px){.prc-Banner-BannerContainer-lbx3d{display:grid;grid-template-columns:auto auto}:where(.prc-Banner-Banner-IR8eJ):not([data-dismissible]) :where(.prc-Banner-BannerActionsContainer-ukGMH[data-primary-action=trailing]) :where([data-variant=link]:only-child){padding-inline:0 var(--base-size-12,.75rem)}.prc-Banner-BannerActions-XCfHL [data-primary-action=trailing]{display:flex;min-height:var(--base-size-32,2rem)}.prc-Banner-BannerActions-XCfHL [data-primary-action=leading]{display:none}}
|
|
2
|
+
/*# sourceMappingURL=Banner-6396546f.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Banner/Banner.module.css"],"names":[],"mappings":"AAAA,yBASE,iBAAkB,CALlB,sCAAuC,CAEvC,uEAA+D,CAC/D,gDAAyC,CANzC,YAAa,CAOb,6CAA+C,CAN/C,gCA0CF,CAjCE,uCAXF,yBAYI,4BAgCJ,CA/BE,CAEA,gDACE,uEAA6C,CAC7C,8EAAqD,CACrD,kEACF,CAEA,4CACE,uEAA6C,CAC7C,8EAAqD,CACrD,kEACF,CAEA,+CACE,yEAA8C,CAC9C,gFAAsD,CACtD,oEACF,CAEA,8CACE,oDAA6C,CAC7C,8DAAqD,CACrD,mDACF,CAEA,+CACE,6EAAgD,CAChD,oFAAwD,CACxD,wEACF,CAKF,kCAEE,iBAAkB,CAGlB,oCAA8B,CAJ9B,8CAAuC,CAEvC,qDAA+C,CAC/C,iCAEF,CAEA,mEACE,YAAa,CACb,cAAe,CACf,6BACF,CAEA,yGACE,YAAa,CACb,0BAA2B,CAC3B,uBACF,CAIA,gCACE,YAAa,CAEb,mBAAoB,CACpB,qCAAgC,CAFhC,iCAGF,CAEA,uHACE,uCACF,CAEA,oCACE,gCACE,WACF,CACF,CAEA,8BAEE,iBAAkB,CAClB,gDAA6C,CAF7C,QAGF,CAIA,6BACE,YAAa,CAEb,gCAA2B,CAD3B,kBAEF,CAEA,iCAIE,gCAAiC,CAFjC,kCAA2B,CAI3B,+BACF,CAGA,wHACE,+BACF,CAIA,gCACE,YAAa,CAGb,6CAAuC,CADvC,gCAA2B,CAD3B,kBAGF,CAEA,sGACE,uCACF,CAEA,oCAEE,gCACF,CAIA,yCAGE,kBAAmB,CADnB,qCAA+B,CAD/B,YAAa,CAGb,uCACF,CAEA,uEACE,YACF,CAEA,oCACE,uEACE,YACF,CAEA,sEACE,YACF,CACF,CAEA,oGACE,2CACF,CAGA,2IACE,YACF,CAGA,0IACE,YACF,CAIA,qCACE,kCACE,YACF,CAEA,gFACE,4BACF,CAEA,gCACE,2CACF,CAEA,+DACE,YACF,CAEA,8DACE,YACF,CACF,CAEA,qCACE,kCACE,YAAa,CACb,+BACF,CAEA,+KAGE,2CACF,CAEA,+DACE,YAAa,CACb,mCACF,CAEA,8DACE,YACF,CACF","file":"Banner-6396546f.css","sourcesContent":[".Banner {\n display: grid;\n padding: var(--base-size-8);\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--banner-bgColor);\n /* stylelint-disable-next-line primer/colors */\n border: var(--borderWidth-thin) solid var(--banner-borderColor);\n border-radius: var(--borderRadius-medium);\n grid-template-columns: auto minmax(0, 1fr) auto;\n align-items: start;\n\n @supports (container-type: inline-size) {\n container: banner / inline-size;\n }\n\n &[data-variant='critical'] {\n --banner-bgColor: var(--bgColor-danger-muted);\n --banner-borderColor: var(--borderColor-danger-muted);\n --banner-icon-fgColor: var(--fgColor-danger);\n }\n\n &[data-variant='info'] {\n --banner-bgColor: var(--bgColor-accent-muted);\n --banner-borderColor: var(--borderColor-accent-muted);\n --banner-icon-fgColor: var(--fgColor-accent);\n }\n\n &[data-variant='success'] {\n --banner-bgColor: var(--bgColor-success-muted);\n --banner-borderColor: var(--borderColor-success-muted);\n --banner-icon-fgColor: var(--fgColor-success);\n }\n\n &[data-variant='upsell'] {\n --banner-bgColor: var(--bgColor-upsell-muted);\n --banner-borderColor: var(--borderColor-upsell-muted);\n --banner-icon-fgColor: var(--fgColor-upsell);\n }\n\n &[data-variant='warning'] {\n --banner-bgColor: var(--bgColor-attention-muted);\n --banner-borderColor: var(--borderColor-attention-muted);\n --banner-icon-fgColor: var(--fgColor-attention);\n }\n}\n\n/* BannerContainer -------------------------------------------------------- */\n\n.BannerContainer {\n font-size: var(--text-body-size-medium);\n align-items: start;\n line-height: var(--text-body-lineHeight-medium);\n row-gap: var(--base-size-4);\n column-gap: var(--base-size-4);\n}\n\n.Banner :where(.BannerContainer) {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n}\n\n.Banner[data-dismissible]:not([data-title-hidden='']) .BannerContainer {\n display: grid;\n grid-template-columns: auto;\n grid-template-rows: auto;\n}\n\n/* BannerContent ---------------------------------------------------------- */\n\n.BannerContent {\n display: grid;\n row-gap: var(--base-size-4);\n grid-column-start: 1;\n margin-block: var(--base-size-8);\n}\n\n.Banner[data-title-hidden]:not(:has(.BannerActions)) .BannerContent {\n margin-block: var(--base-size-6);\n}\n\n@media screen and (min-width: 544px) {\n .BannerContent {\n flex: 1 1 0%;\n }\n}\n\n.BannerTitle {\n margin: 0;\n font-size: inherit;\n font-weight: var(--base-text-weight-semibold);\n}\n\n/* BannerIcon ------------------------------------------------------------- */\n\n.BannerIcon {\n display: grid;\n place-items: center;\n padding: var(--base-size-8);\n}\n\n.BannerIcon svg {\n /* 20px is the line box height of the trailing action buttons */\n height: var(--base-size-20);\n /* stylelint-disable-next-line primer/colors */\n color: var(--banner-icon-fgColor);\n /* stylelint-disable-next-line primer/colors */\n fill: var(--banner-icon-fgColor);\n}\n\n/* stylelint-disable-next-line selector-max-specificity */\n.Banner[data-title-hidden]:not(:has(.BannerActions)) .BannerIcon svg {\n height: var(--base-size-16);\n}\n\n/* BannerDismiss ---------------------------------------------------------- */\n\n.BannerDismiss {\n display: grid;\n place-items: center;\n padding: var(--base-size-8);\n margin-inline-start: var(--base-size-4);\n}\n\n:where(.Banner):has(.BannerActions) .BannerDismiss {\n margin-block: var(--base-size-2);\n}\n\n.BannerDismiss svg {\n /* stylelint-disable-next-line primer/colors */\n color: var(--banner-icon-fgColor);\n}\n\n/* BannerActions ---------------------------------------------------------- */\n\n.BannerActionsContainer {\n display: flex;\n column-gap: var(--base-size-12);\n align-items: center;\n margin-block: var(--base-size-2);\n}\n\n.BannerActions :where([data-primary-action='trailing']) {\n display: none;\n}\n\n@media screen and (--viewportRange-regular) {\n .BannerActions :where([data-primary-action='trailing']) {\n display: flex;\n }\n\n .BannerActions :where([data-primary-action='leading']) {\n display: none;\n }\n}\n\n.Banner[data-dismissible]:not([data-title-hidden]) .BannerActions {\n margin-block-end: var(--base-size-6);\n}\n\n/* stylelint-disable-next-line selector-max-specificity */\n.Banner[data-dismissible]:not([data-title-hidden]) .BannerActionsContainer[data-primary-action='trailing'] {\n display: none;\n}\n\n/* stylelint-disable-next-line selector-max-specificity */\n.Banner[data-dismissible]:not([data-title-hidden]) .BannerActionsContainer[data-primary-action='leading'] {\n display: flex;\n}\n\n/* Layout ------------------------------------------------------------------- */\n\n@container banner (max-width: 500px) {\n .BannerContainer {\n display: grid;\n }\n\n .BannerContainer:has(.BannerActionsContainer) {\n grid-template-rows: auto auto;\n }\n\n .BannerActions {\n margin-block-end: var(--base-size-6);\n }\n\n .BannerActions [data-primary-action='trailing'] {\n display: none;\n }\n\n .BannerActions [data-primary-action='leading'] {\n display: flex;\n }\n}\n\n@container banner (min-width: 500px) {\n .BannerContainer {\n display: grid;\n grid-template-columns: auto auto;\n }\n\n :where(.Banner):not([data-dismissible])\n :where(.BannerActionsContainer[data-primary-action='trailing'])\n :where([data-variant='link']:only-child) {\n padding-inline: 0 var(--base-size-12);\n }\n\n .BannerActions [data-primary-action='trailing'] {\n display: flex;\n min-height: var(--base-size-32, 2rem);\n }\n\n .BannerActions [data-primary-action='leading'] {\n display: none;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAElD,OAAO,EAAqB,KAAK,WAAW,EAAC,MAAM,WAAW,CAAA;AAI9D,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAE/F,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAA;AAElF,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,wBAAwB,CAAC,SAAS,CAAC,GAAG;IACpE;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE7B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAEtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IAEtB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE/B;;OAEG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAEjC;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAEvB;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAA;CACxB,CAAA;AAkBD,eAAO,MAAM,MAAM;IAxEjB;;;OAGG;mBACY,MAAM;IAErB;;;OAGG;gBACS,MAAM;IAElB;;;OAGG;kBACW,KAAK,CAAC,SAAS;IAE7B;;OAEG;gBACS,OAAO;IAEnB;;OAEG;WACI,KAAK,CAAC,SAAS;IAEtB;;;OAGG;gBACS,MAAM,IAAI;IAEtB;;OAEG;oBACa,KAAK,CAAC,SAAS;IAE/B;;OAEG;sBACe,KAAK,CAAC,SAAS;IAEjC;;;OAGG;YACK,KAAK,CAAC,SAAS;IAEvB;;OAEG;cACO,aAAa;
|
|
1
|
+
{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/Banner/Banner.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAElD,OAAO,EAAqB,KAAK,WAAW,EAAC,MAAM,WAAW,CAAA;AAI9D,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAE/F,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAA;AAElF,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,wBAAwB,CAAC,SAAS,CAAC,GAAG;IACpE;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE7B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAEtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IAEtB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE/B;;OAEG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAEjC;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAEvB;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAA;CACxB,CAAA;AAkBD,eAAO,MAAM,MAAM;IAxEjB;;;OAGG;mBACY,MAAM;IAErB;;;OAGG;gBACS,MAAM;IAElB;;;OAGG;kBACW,KAAK,CAAC,SAAS;IAE7B;;OAEG;gBACS,OAAO;IAEnB;;OAEG;WACI,KAAK,CAAC,SAAS;IAEtB;;;OAGG;gBACS,MAAM,IAAI;IAEtB;;OAEG;oBACa,KAAK,CAAC,SAAS;IAE/B;;OAEG;sBACe,KAAK,CAAC,SAAS;IAEjC;;;OAGG;YACK,KAAK,CAAC,SAAS;IAEvB;;OAEG;cACO,aAAa;qCA0GvB,CAAA;AAEF,KAAK,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEtD,MAAM,MAAM,gBAAgB,CAAC,EAAE,SAAS,cAAc,IAAI;IACxD,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,KAAK,CAAC,wBAAwB,CAAC,EAAE,SAAS,IAAI,GAAG,IAAI,GAAG,EAAE,CAAC,CAAA;AAE/D,wBAAgB,WAAW,CAAC,EAAE,SAAS,cAAc,EAAE,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,qBAOjF;AAED,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAE1E,wBAAgB,iBAAiB,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAC,EAAE,sBAAsB,qBAMvF;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAClC,CAAA;AAED,wBAAgB,aAAa,CAAC,EAAC,aAAa,EAAE,eAAe,EAAC,EAAE,kBAAkB,qBAajF;AAED,MAAM,MAAM,wBAAwB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAA;AAEnE,QAAA,MAAM,mBAAmB,EAMnB,8BAA8B,CAAC,QAAQ,EAAE,wBAAwB,CAAC,CAAA;AAIxE,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAA;AAErE,QAAA,MAAM,qBAAqB,EAMrB,8BAA8B,CAAC,QAAQ,EAAE,0BAA0B,CAAC,CAAA;AAI1E,OAAO,EAAC,mBAAmB,EAAE,qBAAqB,EAAC,CAAA"}
|
package/lib/Banner/Banner.js
CHANGED
|
@@ -31,6 +31,7 @@ const labels = {
|
|
|
31
31
|
};
|
|
32
32
|
const Banner = /*#__PURE__*/React__default.default.forwardRef(function Banner({
|
|
33
33
|
'aria-label': label,
|
|
34
|
+
'aria-labelledby': labelledBy,
|
|
34
35
|
children,
|
|
35
36
|
className,
|
|
36
37
|
description,
|
|
@@ -70,7 +71,8 @@ const Banner = /*#__PURE__*/React__default.default.forwardRef(function Banner({
|
|
|
70
71
|
}
|
|
71
72
|
return /*#__PURE__*/jsxRuntime.jsxs("section", {
|
|
72
73
|
...rest,
|
|
73
|
-
"aria-
|
|
74
|
+
"aria-labelledby": labelledBy,
|
|
75
|
+
"aria-label": labelledBy ? undefined : label !== null && label !== void 0 ? label : labels[variant],
|
|
74
76
|
className: clsx.clsx(className, Banner_module.Banner),
|
|
75
77
|
"data-dismissible": onDismiss ? '' : undefined,
|
|
76
78
|
"data-title-hidden": hideTitle ? '' : undefined,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
require('./Banner-
|
|
3
|
+
require('./Banner-6396546f.css');
|
|
4
4
|
|
|
5
|
-
var classes = {"Banner":"prc-Banner-Banner-IR8eJ","BannerContainer":"prc-Banner-BannerContainer-lbx3d","BannerContent":"prc-Banner-BannerContent-zTITK","
|
|
5
|
+
var classes = {"Banner":"prc-Banner-Banner-IR8eJ","BannerContainer":"prc-Banner-BannerContainer-lbx3d","BannerContent":"prc-Banner-BannerContent-zTITK","BannerActions":"prc-Banner-BannerActions-XCfHL","BannerTitle":"prc-Banner-BannerTitle-TcuJl","BannerIcon":"prc-Banner-BannerIcon-WuOyf","BannerDismiss":"prc-Banner-BannerDismiss-uBZVm","BannerActionsContainer":"prc-Banner-BannerActionsContainer-ukGMH"};
|
|
6
6
|
|
|
7
7
|
module.exports = classes;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
*{box-sizing:border-box}body{margin:0}table{border-collapse:collapse}[data-color-mode=light] input{--csstools-color-scheme--light:initial;color-scheme:light}[data-color-mode=dark] input{--csstools-color-scheme--light: ;color-scheme:dark}@media (prefers-color-scheme:light){[data-color-mode=auto][data-light-theme*=light]{--csstools-color-scheme--light:initial;color-scheme:light}}@media (prefers-color-scheme:dark){[data-color-mode=auto][data-dark-theme*=dark]{--csstools-color-scheme--light: ;color-scheme:dark}}[role=button]:focus:not(:focus-visible):not(.focus-visible),[role=tabpanel][tabindex="0"]:focus:not(:focus-visible):not(.focus-visible),a:focus:not(:focus-visible):not(.focus-visible),button:focus:not(:focus-visible):not(.focus-visible),summary:focus:not(:focus-visible):not(.focus-visible){box-shadow:none;outline:none}[tabindex="0"]:focus:not(:focus-visible):not(.focus-visible),details-dialog:focus:not(:focus-visible):not(.focus-visible){outline:none}.prc-src-BaseStyles-dl-St{color:var(--BaseStyles-fgColor,var(--fgColor-default,var(--color-fg-default)));font-family:var(--BaseStyles-fontFamily,var(--fontStack-system,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"));line-height:var(--BaseStyles-lineHeight,1.5)}input .prc-src-BaseStyles-dl-St:has([data-color-mode=light]){--csstools-color-scheme--light:initial;color-scheme:light}input .prc-src-BaseStyles-dl-St:has([data-color-mode=dark]){--csstools-color-scheme--light: ;color-scheme:dark}
|
|
2
|
-
/*# sourceMappingURL=BaseStyles-
|
|
1
|
+
*{box-sizing:border-box}body{margin:0}table{border-collapse:collapse}[data-color-mode=light] input{--csstools-color-scheme--light:initial;color-scheme:light}[data-color-mode=dark] input{--csstools-color-scheme--light: ;color-scheme:dark}@media (prefers-color-scheme:light){[data-color-mode=auto][data-light-theme*=light]{--csstools-color-scheme--light:initial;color-scheme:light}}@media (prefers-color-scheme:dark){[data-color-mode=auto][data-dark-theme*=dark]{--csstools-color-scheme--light: ;color-scheme:dark}}[role=button]:focus:not(:focus-visible):not(.focus-visible),[role=tabpanel][tabindex="0"]:focus:not(:focus-visible):not(.focus-visible),a:focus:not(:focus-visible):not(.focus-visible),button:focus:not(:focus-visible):not(.focus-visible),summary:focus:not(:focus-visible):not(.focus-visible){box-shadow:none;outline:none}[tabindex="0"]:focus:not(:focus-visible):not(.focus-visible),details-dialog:focus:not(:focus-visible):not(.focus-visible){outline:none}.prc-src-BaseStyles-dl-St{color:var(--BaseStyles-fgColor,var(--fgColor-default,var(--color-fg-default)));font-family:var(--BaseStyles-fontFamily,var(--fontStack-system,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"));line-height:var(--BaseStyles-lineHeight,1.5)}input .prc-src-BaseStyles-dl-St:has([data-color-mode=light]){--csstools-color-scheme--light:initial;color-scheme:light}input .prc-src-BaseStyles-dl-St:has([data-color-mode=dark]){--csstools-color-scheme--light: ;color-scheme:dark}.prc-src-BaseStyles-dl-St :where(a:not([class*=prc-]):not([class*=PRC-]):not([class*=Primer_Brand__])){color:var(--fgColor-accent,var(--color-accent-fg));-webkit-text-decoration:none;text-decoration:none}:is(.prc-src-BaseStyles-dl-St :where(a:not([class*=prc-]):not([class*=PRC-]):not([class*=Primer_Brand__]))):hover{-webkit-text-decoration:underline;text-decoration:underline}
|
|
2
|
+
/*# sourceMappingURL=BaseStyles-79fd37c4.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["src/BaseStyles.module.css"],"names":[],"mappings":"AAMA,EACE,qBACF,CAEA,KACE,QACF,CAEA,MAEE,wBACF,CAEA,8BACE,sCAAmB,CAAnB,kBACF,CAEA,6BACE,gCAAkB,CAAlB,iBACF,CAEA,oCACE,gDACE,sCAAmB,CAAnB,kBACF,CACF,CAEA,mCACE,8CACE,gCAAkB,CAAlB,iBACF,CACF,CAEA,mSAME,eAAgB,CADhB,YAEF,CAEA,0HAEE,YACF,CAIA,0BAKE,8EAAwD,CAJxD,wLAAkE,CAElE,4CA2BF,CArBI,6DACE,sCAAmB,CAAnB,kBACF,CAKA,4DACE,gCAAkB,CAAlB,iBACF,CAIF,uGACE,kDAAoD,CACpD,4BAAqB,CAArB,oBAKF,CAHE,kHACE,iCAA0B,CAA1B,yBACF","file":"BaseStyles-79fd37c4.css","sourcesContent":["/* stylelint-disable selector-max-specificity */\n/* stylelint-disable selector-type-no-unknown */\n\n/* -------------------------------- \n * Global Styles \n *--------------------------------- */\n* {\n box-sizing: border-box;\n}\n\nbody {\n margin: 0;\n}\n\ntable {\n /* stylelint-disable-next-line primer/borders */\n border-collapse: collapse;\n}\n\n[data-color-mode='light'] input {\n color-scheme: light;\n}\n\n[data-color-mode='dark'] input {\n color-scheme: dark;\n}\n\n@media (prefers-color-scheme: light) {\n [data-color-mode='auto'][data-light-theme*='light'] {\n color-scheme: light;\n }\n}\n\n@media (prefers-color-scheme: dark) {\n [data-color-mode='auto'][data-dark-theme*='dark'] {\n color-scheme: dark;\n }\n}\n\n[role='button']:focus:not(:focus-visible):not(:global(.focus-visible)),\n[role='tabpanel'][tabindex='0']:focus:not(:focus-visible):not(:global(.focus-visible)),\nbutton:focus:not(:focus-visible):not(:global(.focus-visible)),\nsummary:focus:not(:focus-visible):not(:global(.focus-visible)),\na:focus:not(:focus-visible):not(:global(.focus-visible)) {\n outline: none;\n box-shadow: none;\n}\n\n[tabindex='0']:focus:not(:focus-visible):not(:global(.focus-visible)),\ndetails-dialog:focus:not(:focus-visible):not(:global(.focus-visible)) {\n outline: none;\n}\n\n/* -------------------------------------------------------------------------- */\n\n.BaseStyles {\n font-family: var(--BaseStyles-fontFamily, var(--fontStack-system));\n /* stylelint-disable-next-line primer/typography */\n line-height: var(--BaseStyles-lineHeight, 1.5);\n /* stylelint-disable-next-line primer/colors */\n color: var(--BaseStyles-fgColor, var(--fgColor-default));\n\n /* Global styles for light mode */\n &:has([data-color-mode='light']) {\n input & {\n color-scheme: light;\n }\n }\n\n /* Global styles for dark mode */\n &:has([data-color-mode='dark']) {\n input & {\n color-scheme: dark;\n }\n }\n\n /* Low-specificity default link styling */\n :where(a:not([class*='prc-']):not([class*='PRC-']):not([class*='Primer_Brand__'])) {\n color: var(--fgColor-accent, var(--color-accent-fg));\n text-decoration: none;\n\n &:hover {\n text-decoration: underline;\n }\n }\n}\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.prc-Blankslate-Container-XATLP{container:blankslate/inline-size}.prc-Blankslate-Blankslate-7GPW-{display:grid;justify-items:center;padding:var(--blankslate-padding)}.prc-Blankslate-Blankslate-7GPW-:where([data-border]){border:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,.375rem)}.prc-Blankslate-Blankslate-7GPW-:where([data-narrow]){margin:0 auto;max-width:485px}.prc-Blankslate-Blankslate-7GPW-:where([data-size=medium]){--blankslate-heading-text:var(--text-title-shorthand-medium,600 1.25rem/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");--blankslate-heading-margin-block:0 var(--base-size-4,0.25rem);--blankslate-description-text:var(--text-body-shorthand-large,400 1rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");--blankslate-padding:var(--base-size-32,2rem);--blankslate-action-margin-block-end:var(--base-size-16,1rem)}.prc-Blankslate-Blankslate-7GPW-:where([data-size=medium][data-spacious]){--blankslate-padding:var(--base-size-80,5rem) var(--base-size-40,2.5rem)}.prc-Blankslate-Blankslate-7GPW-:where([data-size=small]){--blankslate-heading-text:var(--text-title-shorthand-small,600 1rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");--blankslate-heading-margin-block:0 var(--base-size-4,0.25rem);--blankslate-description-text:var(--text-body-shorthand-medium,400 0.875rem/1.4285 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");--blankslate-padding:var(--base-size-32,2rem) var(--base-size-20,1.25rem);--blankslate-action-margin-block-end:var(--base-size-12,0.75rem);--blankslate-visual-size:var(--base-size-24,1.5rem)}.prc-Blankslate-Blankslate-7GPW-:where([data-size=small][data-spacious]){--blankslate-padding:var(--base-size-44,2.75rem) var(--base-size-28,1.75rem)}.prc-Blankslate-Blankslate-7GPW-:where([data-size=large]){--blankslate-heading-text:var(--text-title-shorthand-large,600 2rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");--blankslate-heading-margin-block:var(--base-size-8,0.5rem) var(--base-size-4,0.25rem);--blankslate-description-text:var(--text-body-shorthand-large,400 1rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");--blankslate-description-margin-block:0 var(--base-size-8,0.5rem);--blankslate-padding:var(--base-size-32,2rem);--blankslate-action-margin-block-end:var(--base-size-16,1rem)}.prc-Blankslate-Blankslate-7GPW-:where([data-size=large][data-spacious]){--blankslate-padding:var(--base-size-80,5rem) var(--base-size-40,2.5rem)}.prc-Blankslate-Description-OGHRk,.prc-Blankslate-Heading-H4xby{margin:0}.prc-Blankslate-Heading-H4xby{font:var(--blankslate-heading-text);margin-block:var(--blankslate-heading-margin-block)}.prc-Blankslate-Description-OGHRk{
|
|
2
|
-
/*# sourceMappingURL=Blankslate-
|
|
1
|
+
.prc-Blankslate-Container-XATLP{container:blankslate/inline-size}.prc-Blankslate-Blankslate-7GPW-{display:grid;justify-items:center;padding:var(--blankslate-padding)}.prc-Blankslate-Blankslate-7GPW-:where([data-border]){border:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,.375rem)}.prc-Blankslate-Blankslate-7GPW-:where([data-narrow]){margin:0 auto;max-width:485px}.prc-Blankslate-Blankslate-7GPW-:where([data-size=medium]){--blankslate-heading-text:var(--text-title-shorthand-medium,600 1.25rem/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");--blankslate-heading-margin-block:0 var(--base-size-4,0.25rem);--blankslate-description-text:var(--text-body-shorthand-large,400 1rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");--blankslate-padding:var(--base-size-32,2rem);--blankslate-action-margin-block-end:var(--base-size-16,1rem)}.prc-Blankslate-Blankslate-7GPW-:where([data-size=medium][data-spacious]){--blankslate-padding:var(--base-size-80,5rem) var(--base-size-40,2.5rem)}.prc-Blankslate-Blankslate-7GPW-:where([data-size=small]){--blankslate-heading-text:var(--text-title-shorthand-small,600 1rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");--blankslate-heading-margin-block:0 var(--base-size-4,0.25rem);--blankslate-description-text:var(--text-body-shorthand-medium,400 0.875rem/1.4285 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");--blankslate-padding:var(--base-size-32,2rem) var(--base-size-20,1.25rem);--blankslate-action-margin-block-end:var(--base-size-12,0.75rem);--blankslate-visual-size:var(--base-size-24,1.5rem)}.prc-Blankslate-Blankslate-7GPW-:where([data-size=small][data-spacious]){--blankslate-padding:var(--base-size-44,2.75rem) var(--base-size-28,1.75rem)}.prc-Blankslate-Blankslate-7GPW-:where([data-size=large]){--blankslate-heading-text:var(--text-title-shorthand-large,600 2rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");--blankslate-heading-margin-block:var(--base-size-8,0.5rem) var(--base-size-4,0.25rem);--blankslate-description-text:var(--text-body-shorthand-large,400 1rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");--blankslate-description-margin-block:0 var(--base-size-8,0.5rem);--blankslate-padding:var(--base-size-32,2rem);--blankslate-action-margin-block-end:var(--base-size-16,1rem)}.prc-Blankslate-Blankslate-7GPW-:where([data-size=large][data-spacious]){--blankslate-padding:var(--base-size-80,5rem) var(--base-size-40,2.5rem)}.prc-Blankslate-Description-OGHRk,.prc-Blankslate-Heading-H4xby{margin:0}.prc-Blankslate-Heading-H4xby{font:var(--blankslate-heading-text);margin-block:var(--blankslate-heading-margin-block)}.prc-Blankslate-Description-OGHRk{font:var(--blankslate-description-text);margin-block:var(--blankslate-description-margin-block)}.prc-Blankslate-Description-OGHRk,.prc-Blankslate-Visual-PeTD-{color:var(--fgColor-muted,var(--color-fg-muted))}.prc-Blankslate-Visual-PeTD-{display:inline-flex;margin-block-end:var(--base-size-8,.5rem);max-width:var(--blankslate-visual-size)}.prc-Blankslate-Visual-PeTD- svg{width:100%}.prc-Blankslate-Action-SK5XS{font:var(--blankslate-description-text);margin-block-start:var(--base-size-16,1rem)}.prc-Blankslate-Action-SK5XS:where(:last-of-type){margin-block-end:var(--blankslate-action-margin-block-end)}@container blankslate (max-width: 34rem){.prc-Blankslate-Blankslate-7GPW-{--blankslate-padding:var(--base-size-20,1.25rem)}.prc-Blankslate-Blankslate-7GPW-:where([data-spacious=true]){--blankslate-padding:var(--base-size-44,2.75rem) var(--base-size-28,1.75rem)}.prc-Blankslate-Blankslate-7GPW-{--blankslate-heading-text:var(--text-title-shorthand-small,600 1rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");--blankslate-description-text:var(--text-body-shorthand-medium,400 0.875rem/1.4285 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji")}.prc-Blankslate-Visual-PeTD-{color:var(--fgColor-muted,var(--color-fg-muted));margin-bottom:var(--base-size-8,.5rem);max-width:var(--base-size-24,1.5rem)}.prc-Blankslate-Action-SK5XS{margin-top:var(--base-size-8,.5rem)}.prc-Blankslate-Action-SK5XS:first-of-type{margin-top:var(--base-size-16,1rem)}.prc-Blankslate-Action-SK5XS:last-of-type{margin-bottom:calc(var(--base-size-8,.5rem)/2)}}
|
|
2
|
+
/*# sourceMappingURL=Blankslate-2be5efdc.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Blankslate/Blankslate.module.css"],"names":[],"mappings":"AAAA,gCACE,gCACF,CAEA,iCACE,YAAa,CACb,oBAAqB,CAErB,iCAiDF,CA/CE,sDACE,oGAAgE,CAChE,gDACF,CAEA,sDAEE,aAAc,CADd,eAEF,CAEA,2DACE,oMAA6D,CAC7D,8DAAuD,CACvD,mMAA+D,CAC/D,6CAAyC,CACzC,6DACF,CAEA,0EACE,wEACF,CAEA,0DACE,gMAA4D,CAC5D,8DAAuD,CACvD,2MAAgE,CAChE,yEAA6D,CAC7D,gEAAyD,CACzD,mDACF,CAEA,yEACE,4EACF,CAEA,0DACE,gMAA4D,CAC5D,sFAAwE,CACxE,mMAA+D,CAC/D,iEAA2D,CAC3D,6CAAyC,CACzC,6DACF,CAEA,yEACE,wEACF,CAGF,gEAEE,QACF,CAEA,8BAEE,mCAAoC,CAEpC,mDACF,CAEA,kCAEE,uCAAwC,CAGxC,uDACF,CAEA,+DALE,gDAeF,CAVA,6BAGE,mBAAoB,CACpB,yCAAoC,CACpC,uCAKF,CAHE,iCACE,UACF,CAGF,6BAEE,uCAAwC,CACxC,2CAMF,CAJE,kDAEE,0DACF,CAIF,yCACE,iCACE,gDAQF,CANE,6DACE,4EACF,CALF,iCAOE,gMAA4D,CAC5D,2MACF,CAEA,6BAGE,gDAA2B,CAD3B,sCAAiC,CADjC,oCAGF,CAEA,6BACE,mCASF,CAPE,2CACE,mCACF,CAEA,0CACE,8CACF,CAEJ","file":"Blankslate-2be5efdc.css","sourcesContent":[".Container {\n container: blankslate / inline-size;\n}\n\n.Blankslate {\n display: grid;\n justify-items: center;\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--blankslate-padding);\n\n &:where([data-border]) {\n border: var(--borderWidth-thin) solid var(--borderColor-default);\n border-radius: var(--borderRadius-medium);\n }\n\n &:where([data-narrow]) {\n max-width: 485px;\n margin: 0 auto;\n }\n\n &:where([data-size='medium']) {\n --blankslate-heading-text: var(--text-title-shorthand-medium);\n --blankslate-heading-margin-block: 0 var(--base-size-4);\n --blankslate-description-text: var(--text-body-shorthand-large);\n --blankslate-padding: var(--base-size-32);\n --blankslate-action-margin-block-end: var(--base-size-16);\n }\n\n &:where([data-size='medium'][data-spacious]) {\n --blankslate-padding: var(--base-size-80) var(--base-size-40);\n }\n\n &:where([data-size='small']) {\n --blankslate-heading-text: var(--text-title-shorthand-small);\n --blankslate-heading-margin-block: 0 var(--base-size-4);\n --blankslate-description-text: var(--text-body-shorthand-medium);\n --blankslate-padding: var(--base-size-32) var(--base-size-20);\n --blankslate-action-margin-block-end: var(--base-size-12);\n --blankslate-visual-size: var(--base-size-24);\n }\n\n &:where([data-size='small'][data-spacious]) {\n --blankslate-padding: var(--base-size-44) var(--base-size-28);\n }\n\n &:where([data-size='large']) {\n --blankslate-heading-text: var(--text-title-shorthand-large);\n --blankslate-heading-margin-block: var(--base-size-8) var(--base-size-4);\n --blankslate-description-text: var(--text-body-shorthand-large);\n --blankslate-description-margin-block: 0 var(--base-size-8);\n --blankslate-padding: var(--base-size-32);\n --blankslate-action-margin-block-end: var(--base-size-16);\n }\n\n &:where([data-size='large'][data-spacious]) {\n --blankslate-padding: var(--base-size-80) var(--base-size-40);\n }\n}\n\n.Heading,\n.Description {\n margin: 0;\n}\n\n.Heading {\n /* stylelint-disable-next-line primer/typography */\n font: var(--blankslate-heading-text);\n /* stylelint-disable-next-line primer/spacing */\n margin-block: var(--blankslate-heading-margin-block);\n}\n\n.Description {\n /* stylelint-disable-next-line primer/typography */\n font: var(--blankslate-description-text);\n color: var(--fgColor-muted);\n /* stylelint-disable-next-line primer/spacing */\n margin-block: var(--blankslate-description-margin-block);\n}\n\n.Visual {\n color: var(--fgColor-muted);\n /* This display property exists so that the container matches the size of the inner svg element */\n display: inline-flex;\n margin-block-end: var(--base-size-8);\n max-width: var(--blankslate-visual-size);\n\n & svg {\n width: 100%;\n }\n}\n\n.Action {\n /* stylelint-disable-next-line primer/typography */\n font: var(--blankslate-description-text);\n margin-block-start: var(--base-size-16);\n\n &:where(:last-of-type) {\n /* stylelint-disable-next-line primer/spacing */\n margin-block-end: var(--blankslate-action-margin-block-end);\n }\n}\n\n/* At the time these styles were written, 34rem was our \"small\" breakpoint width */\n@container blankslate (max-width: 34rem) {\n .Blankslate {\n --blankslate-padding: var(--base-size-20);\n\n &:where([data-spacious='true']) {\n --blankslate-padding: var(--base-size-44) var(--base-size-28);\n }\n\n --blankslate-heading-text: var(--text-title-shorthand-small);\n --blankslate-description-text: var(--text-body-shorthand-medium);\n }\n\n .Visual {\n max-width: var(--base-size-24);\n margin-bottom: var(--base-size-8);\n color: var(--fgColor-muted);\n }\n\n .Action {\n margin-top: var(--base-size-8);\n\n &:first-of-type {\n margin-top: var(--base-size-16);\n }\n\n &:last-of-type {\n margin-bottom: calc(var(--base-size-8) / 2);\n }\n }\n}\n"]}
|
|
@@ -47,75 +47,73 @@ function Blankslate(t0) {
|
|
|
47
47
|
}
|
|
48
48
|
const size = t1 === undefined ? "medium" : t1;
|
|
49
49
|
let t2;
|
|
50
|
-
let t3;
|
|
51
50
|
if ($[8] !== size) {
|
|
52
|
-
|
|
51
|
+
t2 = {
|
|
53
52
|
size
|
|
54
53
|
};
|
|
55
54
|
$[8] = size;
|
|
56
|
-
$[9] =
|
|
55
|
+
$[9] = t2;
|
|
57
56
|
} else {
|
|
58
|
-
|
|
57
|
+
t2 = $[9];
|
|
59
58
|
}
|
|
60
|
-
t2 = t3;
|
|
61
59
|
const value = t2;
|
|
62
|
-
let
|
|
60
|
+
let t3;
|
|
63
61
|
if ($[10] !== className) {
|
|
64
|
-
|
|
62
|
+
t3 = clsx.clsx(Blankslate_module.Blankslate, className);
|
|
65
63
|
$[10] = className;
|
|
66
|
-
$[11] =
|
|
64
|
+
$[11] = t3;
|
|
67
65
|
} else {
|
|
68
|
-
|
|
66
|
+
t3 = $[11];
|
|
69
67
|
}
|
|
70
|
-
const
|
|
71
|
-
const
|
|
72
|
-
const
|
|
73
|
-
let
|
|
74
|
-
if ($[12] !== children || $[13] !== size || $[14] !==
|
|
75
|
-
|
|
76
|
-
className:
|
|
77
|
-
"data-border":
|
|
78
|
-
"data-narrow":
|
|
79
|
-
"data-spacious":
|
|
68
|
+
const t4 = border ? "" : undefined;
|
|
69
|
+
const t5 = narrow ? "" : undefined;
|
|
70
|
+
const t6 = spacious ? "" : undefined;
|
|
71
|
+
let t7;
|
|
72
|
+
if ($[12] !== children || $[13] !== size || $[14] !== t3 || $[15] !== t4 || $[16] !== t5 || $[17] !== t6) {
|
|
73
|
+
t7 = /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
74
|
+
className: t3,
|
|
75
|
+
"data-border": t4,
|
|
76
|
+
"data-narrow": t5,
|
|
77
|
+
"data-spacious": t6,
|
|
80
78
|
"data-size": size,
|
|
81
79
|
children: children
|
|
82
80
|
});
|
|
83
81
|
$[12] = children;
|
|
84
82
|
$[13] = size;
|
|
85
|
-
$[14] =
|
|
86
|
-
$[15] =
|
|
87
|
-
$[16] =
|
|
88
|
-
$[17] =
|
|
89
|
-
$[18] =
|
|
83
|
+
$[14] = t3;
|
|
84
|
+
$[15] = t4;
|
|
85
|
+
$[16] = t5;
|
|
86
|
+
$[17] = t6;
|
|
87
|
+
$[18] = t7;
|
|
90
88
|
} else {
|
|
91
|
-
|
|
89
|
+
t7 = $[18];
|
|
92
90
|
}
|
|
93
|
-
let
|
|
94
|
-
if ($[19] !== rest || $[20] !==
|
|
95
|
-
|
|
91
|
+
let t8;
|
|
92
|
+
if ($[19] !== rest || $[20] !== t7) {
|
|
93
|
+
t8 = /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
96
94
|
...rest,
|
|
97
95
|
className: Blankslate_module.Container,
|
|
98
|
-
children:
|
|
96
|
+
children: t7
|
|
99
97
|
});
|
|
100
98
|
$[19] = rest;
|
|
101
|
-
$[20] =
|
|
102
|
-
$[21] =
|
|
99
|
+
$[20] = t7;
|
|
100
|
+
$[21] = t8;
|
|
103
101
|
} else {
|
|
104
|
-
|
|
102
|
+
t8 = $[21];
|
|
105
103
|
}
|
|
106
|
-
let
|
|
107
|
-
if ($[22] !==
|
|
108
|
-
|
|
104
|
+
let t9;
|
|
105
|
+
if ($[22] !== t8 || $[23] !== value) {
|
|
106
|
+
t9 = /*#__PURE__*/jsxRuntime.jsx(BlankslateContext.Provider, {
|
|
109
107
|
value: value,
|
|
110
|
-
children:
|
|
108
|
+
children: t8
|
|
111
109
|
});
|
|
112
|
-
$[22] =
|
|
110
|
+
$[22] = t8;
|
|
113
111
|
$[23] = value;
|
|
114
|
-
$[24] =
|
|
112
|
+
$[24] = t9;
|
|
115
113
|
} else {
|
|
116
|
-
|
|
114
|
+
t9 = $[24];
|
|
117
115
|
}
|
|
118
|
-
return
|
|
116
|
+
return t9;
|
|
119
117
|
}
|
|
120
118
|
function Visual(t0) {
|
|
121
119
|
const $ = reactCompilerRuntime.c(10);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
require('./Blankslate-
|
|
3
|
+
require('./Blankslate-2be5efdc.css');
|
|
4
4
|
|
|
5
5
|
var classes = {"Container":"prc-Blankslate-Container-XATLP","Blankslate":"prc-Blankslate-Blankslate-7GPW-","Description":"prc-Blankslate-Description-OGHRk","Heading":"prc-Blankslate-Heading-H4xby","Visual":"prc-Blankslate-Visual-PeTD-","Action":"prc-Blankslate-Action-SK5XS"};
|
|
6
6
|
|
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type { SxProp } from '../sx';
|
|
3
2
|
type BranchNameProps<As extends React.ElementType> = {
|
|
4
3
|
as?: As;
|
|
5
|
-
} & DistributiveOmit<React.ComponentPropsWithRef<React.ElementType extends As ? 'a' : As>, 'as'> &
|
|
4
|
+
} & DistributiveOmit<React.ComponentPropsWithRef<React.ElementType extends As ? 'a' : As>, 'as'> & {
|
|
5
|
+
className?: string;
|
|
6
|
+
};
|
|
6
7
|
type DistributiveOmit<T, TOmitted extends PropertyKey> = T extends any ? Omit<T, TOmitted> : never;
|
|
7
8
|
export type { BranchNameProps };
|
|
8
9
|
declare const _default: <As extends React.ElementType>(props: {
|
|
9
10
|
as?: As | undefined;
|
|
10
|
-
} & DistributiveOmit<React.ComponentPropsWithRef<React.ElementType<any, keyof React.JSX.IntrinsicElements> extends As ? "a" : As>, "as"> &
|
|
11
|
+
} & DistributiveOmit<React.ComponentPropsWithRef<React.ElementType<any, keyof React.JSX.IntrinsicElements> extends As ? "a" : As>, "as"> & {
|
|
12
|
+
className?: string;
|
|
13
|
+
} & React.RefAttributes<any>) => React.ReactNode;
|
|
11
14
|
export default _default;
|
|
12
15
|
//# sourceMappingURL=BranchName.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BranchName.d.ts","sourceRoot":"","sources":["../../src/BranchName/BranchName.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"BranchName.d.ts","sourceRoot":"","sources":["../../src/BranchName/BranchName.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAA;AAI9C,KAAK,eAAe,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI;IACnD,EAAE,CAAC,EAAE,EAAE,CAAA;CACR,GAAG,gBAAgB,CAAC,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,WAAW,SAAS,EAAE,GAAG,GAAG,GAAG,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG;IAC/F,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAoBH,KAAK,gBAAgB,CAAC,CAAC,EAAE,QAAQ,SAAS,WAAW,IAAI,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,CAAC,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAA;AAIlG,YAAY,EAAC,eAAe,EAAC,CAAA;yBArBT,EAAE,SAAS,KAAK,CAAC,WAAW;;;gBAJhC,MAAM;iCAgBsB,KAAK,CAAC,SAAS;AAU3D,wBAA0C"}
|
|
@@ -4,7 +4,6 @@ var reactCompilerRuntime = require('react-compiler-runtime');
|
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var clsx = require('clsx');
|
|
6
6
|
var BranchName_module = require('./BranchName.module.css.js');
|
|
7
|
-
var BoxWithFallback = require('../internal/components/BoxWithFallback.js');
|
|
8
7
|
var jsxRuntime = require('react/jsx-runtime');
|
|
9
8
|
|
|
10
9
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
@@ -47,8 +46,7 @@ function BranchName(props, ref) {
|
|
|
47
46
|
}
|
|
48
47
|
let t2;
|
|
49
48
|
if ($[7] !== Component || $[8] !== children || $[9] !== ref || $[10] !== rest || $[11] !== t1) {
|
|
50
|
-
t2 = /*#__PURE__*/jsxRuntime.jsx(
|
|
51
|
-
as: Component,
|
|
49
|
+
t2 = /*#__PURE__*/jsxRuntime.jsx(Component, {
|
|
52
50
|
...rest,
|
|
53
51
|
ref: ref,
|
|
54
52
|
className: t1,
|