@backstage/ui 0.7.0-next.3 → 0.7.1-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (81) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/css/styles.css +263 -176
  3. package/dist/components/Avatar/Avatar.esm.js.map +1 -1
  4. package/dist/components/Box/Box.esm.js.map +1 -1
  5. package/dist/components/Box/Box.props.esm.js.map +1 -1
  6. package/dist/components/Button/Button.esm.js.map +1 -1
  7. package/dist/components/ButtonIcon/ButtonIcon.esm.js.map +1 -1
  8. package/dist/components/ButtonLink/ButtonLink.esm.js.map +1 -1
  9. package/dist/components/Card/Card.esm.js +4 -4
  10. package/dist/components/Card/Card.esm.js.map +1 -1
  11. package/dist/components/Checkbox/Checkbox.esm.js +5 -8
  12. package/dist/components/Checkbox/Checkbox.esm.js.map +1 -1
  13. package/dist/components/Collapsible/Collapsible.esm.js.map +1 -1
  14. package/dist/components/Container/Container.esm.js.map +1 -1
  15. package/dist/components/FieldError/FieldError.esm.js.map +1 -1
  16. package/dist/components/FieldLabel/FieldLabel.esm.js.map +1 -1
  17. package/dist/components/Flex/Flex.esm.js.map +1 -1
  18. package/dist/components/Flex/Flex.props.esm.js.map +1 -1
  19. package/dist/components/Grid/Grid.esm.js.map +1 -1
  20. package/dist/components/Grid/Grid.props.esm.js.map +1 -1
  21. package/dist/components/Header/Header.esm.js +1 -10
  22. package/dist/components/Header/Header.esm.js.map +1 -1
  23. package/dist/components/Header/HeaderToolbar.esm.js +3 -34
  24. package/dist/components/Header/HeaderToolbar.esm.js.map +1 -1
  25. package/dist/components/HeaderPage/HeaderPage.esm.js +30 -93
  26. package/dist/components/HeaderPage/HeaderPage.esm.js.map +1 -1
  27. package/dist/components/Icon/Icon.esm.js.map +1 -1
  28. package/dist/components/Icon/context.esm.js.map +1 -1
  29. package/dist/components/Icon/icons.esm.js +1 -1
  30. package/dist/components/Icon/icons.esm.js.map +1 -1
  31. package/dist/components/Icon/provider.esm.js.map +1 -1
  32. package/dist/components/Link/Link.esm.js.map +1 -1
  33. package/dist/components/Menu/Menu.esm.js +144 -202
  34. package/dist/components/Menu/Menu.esm.js.map +1 -1
  35. package/dist/components/RadioGroup/RadioGroup.esm.js.map +1 -1
  36. package/dist/components/ScrollArea/ScrollArea.esm.js.map +1 -1
  37. package/dist/components/SearchField/SearchField.esm.js.map +1 -1
  38. package/dist/components/Select/Select.esm.js +2 -0
  39. package/dist/components/Select/Select.esm.js.map +1 -1
  40. package/dist/components/Skeleton/Skeleton.esm.js.map +1 -1
  41. package/dist/components/Switch/Switch.esm.js.map +1 -1
  42. package/dist/components/Table/components/Cell.esm.js.map +1 -1
  43. package/dist/components/Table/components/CellProfile.esm.js.map +1 -1
  44. package/dist/components/Table/components/Column.esm.js.map +1 -1
  45. package/dist/components/Table/components/Row.esm.js.map +1 -1
  46. package/dist/components/Table/components/Table.esm.js.map +1 -1
  47. package/dist/components/Table/components/TableBody.esm.js.map +1 -1
  48. package/dist/components/Table/components/TableHeader.esm.js.map +1 -1
  49. package/dist/components/Table/hooks/useTable.esm.js.map +1 -1
  50. package/dist/components/TablePagination/TablePagination.esm.js +5 -8
  51. package/dist/components/TablePagination/TablePagination.esm.js.map +1 -1
  52. package/dist/components/Tabs/Tabs.esm.js.map +1 -1
  53. package/dist/components/Tabs/TabsIndicators.esm.js.map +1 -1
  54. package/dist/components/TagGroup/TagGroup.esm.js +62 -0
  55. package/dist/components/TagGroup/TagGroup.esm.js.map +1 -0
  56. package/dist/components/Text/Text.esm.js.map +1 -1
  57. package/dist/components/TextField/TextField.esm.js.map +1 -1
  58. package/dist/components/Tooltip/Tooltip.esm.js.map +1 -1
  59. package/dist/hooks/useBreakpoint.esm.js.map +1 -1
  60. package/dist/hooks/useIsomorphicLayoutEffect.esm.js.map +1 -1
  61. package/dist/hooks/useMediaQuery.esm.js.map +1 -1
  62. package/dist/hooks/useStyles.esm.js.map +1 -1
  63. package/dist/index.d.ts +137 -72
  64. package/dist/index.esm.js +3 -2
  65. package/dist/index.esm.js.map +1 -1
  66. package/dist/props/display.props.esm.js.map +1 -1
  67. package/dist/props/gap-props.esm.js.map +1 -1
  68. package/dist/props/height.props.esm.js.map +1 -1
  69. package/dist/props/margin.props.esm.js.map +1 -1
  70. package/dist/props/padding.props.esm.js.map +1 -1
  71. package/dist/props/position.props.esm.js.map +1 -1
  72. package/dist/props/prop-def.esm.js.map +1 -1
  73. package/dist/props/spacing.props.esm.js.map +1 -1
  74. package/dist/props/width.props.esm.js.map +1 -1
  75. package/dist/utils/componentDefinitions.esm.js +25 -26
  76. package/dist/utils/componentDefinitions.esm.js.map +1 -1
  77. package/dist/utils/extractProps.esm.js.map +1 -1
  78. package/dist/utils/isExternalLink.esm.js.map +1 -1
  79. package/package.json +3 -15
  80. package/dist/components/Menu/Combobox.esm.js +0 -214
  81. package/dist/components/Menu/Combobox.esm.js.map +0 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,35 @@
1
1
  # @backstage/ui
2
2
 
3
+ ## 0.7.1-next.0
4
+
5
+ ### Patch Changes
6
+
7
+ - 7307930: Add missing class for flex: baseline
8
+ - 89da341: Fix Select component to properly attach aria-label and aria-labelledby props to the rendered element for improved accessibility.
9
+
10
+ ## 0.7.0
11
+
12
+ ### Minor Changes
13
+
14
+ - 0615e54: We are moving our DataTable component to React Aria. We removed our DataTable to only use Table as a single and opinionated option for tables. This new structure is made possible by using React Aria under the hood.
15
+ - b245c9d: Backstage UI - HeaderPage - We are updating the breadcrumb to be more visible and accessible.
16
+ - 800f593: **Breaking change** We are updating the Menu component to use React Aria under the hood. The structure and all props are changing to follow React Aria's guidance.
17
+ - b0e47f3: **Breaking** We are upgrading our `Text` component to support all font sizes making the `Heading` component redundant. The new `Text` component introduces 4 sizes for title and 4 sizes for body text. All of these work in multiple colors and font weights. We improved the `as` prop to include all possible values. The `Link` component has also been updated to match the new `Text` component.
18
+
19
+ ### Patch Changes
20
+
21
+ - de89a3d: Fixes some styles on the Select component in BUI.
22
+ - a251b3e: Export CardHeader, CardBody and CardFooter from Card component index
23
+ - f761306: Add new TagGroup component to Backstage UI.
24
+ - 75fead9: Fixes a couple of small bugs in BUI including setting H1 and H2 correctly on the Header and HeaderPage.
25
+ - e7ff178: Update styling of Tooltip element
26
+ - 230b410: **Breaking change** Move breadcrumb to fit in the `HeaderPage` instead of the `Header` in Backstage UI.
27
+ - 2f9a084: We are motion away from `motion` to use `gsap` instead to make Backstage UI backward compatible with React 17.
28
+ - d4e603e: Updated Menu component in Backstage UI to use useId() from React Aria instead of React to support React 17.
29
+ - 8bdc491: Remove stylesheet import from Select component.
30
+ - 404b426: Add `startCollapsed` prop on the `SearchField` component in BUI.
31
+ - e0e886f: Adds onTabSelectionChange to ui header component.
32
+
3
33
  ## 0.7.0-next.3
4
34
 
5
35
  ### Minor Changes
package/css/styles.css CHANGED
@@ -8797,6 +8797,10 @@
8797
8797
  align-items: end;
8798
8798
  }
8799
8799
 
8800
+ .bui-align-baseline {
8801
+ align-items: baseline;
8802
+ }
8803
+
8800
8804
  .bui-align-stretch {
8801
8805
  align-items: stretch;
8802
8806
  }
@@ -9182,7 +9186,7 @@
9182
9186
  --bui-animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
9183
9187
  }
9184
9188
 
9185
- [data-theme="dark"] {
9189
+ [data-theme-mode="dark"] {
9186
9190
  --bui-gray-1: #191919;
9187
9191
  --bui-gray-2: #242424;
9188
9192
  --bui-gray-3: #373737;
@@ -9659,66 +9663,13 @@
9659
9663
  margin-left: -8px;
9660
9664
  }
9661
9665
 
9662
- .bui-HeaderPageControls {
9663
- align-items: center;
9664
- gap: var(--bui-space-2);
9665
- flex-direction: row;
9666
- display: flex;
9667
- }
9668
-
9669
- .bui-HeaderPageSticky {
9670
- z-index: -1;
9671
- height: 0;
9672
- color: var(--bui-fg-primary);
9673
- position: sticky;
9674
- top: 0;
9675
- }
9676
-
9677
- .bui-HeaderPageStickyWrapper {
9678
- background-color: var(--bui-bg-surface-1);
9679
- border-bottom: 1px solid var(--bui-border);
9680
- opacity: 0;
9681
- }
9682
-
9683
- .bui-HeaderPageStickyContent {
9684
- justify-content: space-between;
9685
- align-items: center;
9686
- height: 48px;
9687
- display: flex;
9688
- }
9689
-
9690
- .bui-HeaderPageBreadcrumbs {
9691
- align-items: center;
9692
- gap: var(--bui-space-2);
9693
- font-size: var(--bui-font-size-3);
9694
- font-weight: var(--bui-font-weight-regular);
9695
- flex-direction: row;
9696
- display: flex;
9697
- }
9698
-
9699
- .bui-HeaderPageBreadcrumb {
9666
+ .bui-HeaderPageControls, .bui-HeaderPageBreadcrumbs {
9700
9667
  align-items: center;
9701
9668
  gap: var(--bui-space-2);
9702
9669
  flex-direction: row;
9703
9670
  display: flex;
9704
9671
  }
9705
9672
 
9706
- .bui-HeaderPageBreadcrumbLink {
9707
- color: var(--bui-fg-secondary);
9708
- cursor: pointer;
9709
- text-decoration: none;
9710
-
9711
- &[data-active="true"] {
9712
- color: var(--bui-fg-primary);
9713
- }
9714
- }
9715
-
9716
- .bui-HeaderPageBreadcrumbSeparator {
9717
- width: 16px;
9718
- height: 16px;
9719
- color: var(--bui-fg-secondary);
9720
- }
9721
-
9722
9673
  .bui-Icon {
9723
9674
  width: 1rem;
9724
9675
  height: 1rem;
@@ -9741,184 +9692,245 @@
9741
9692
  }
9742
9693
  }
9743
9694
 
9744
- .bui-MenuPositioner {
9745
- z-index: 100;
9746
- outline: 0;
9747
- }
9748
-
9749
- .bui-MenuPopup {
9750
- background-color: var(--bui-bg-surface-1);
9695
+ .bui-MenuPopover {
9751
9696
  border: 1px solid var(--bui-border);
9697
+ border-radius: var(--bui-radius-2);
9698
+ background: var(--bui-bg-surface-1);
9752
9699
  color: var(--bui-fg-primary);
9753
- transform-origin: var(--transform-origin);
9754
- max-width: min(var(--available-width), 340px);
9755
- max-height: min(var(--available-height), 500px);
9756
- padding-bottom: var(--bui-space-1);
9757
- border-radius: .375rem;
9758
9700
  outline: none;
9759
9701
  flex-direction: column;
9760
- transition: transform .15s, opacity .15s;
9702
+ min-height: 0;
9703
+ transition: transform .2s, opacity .2s;
9761
9704
  display: flex;
9762
- position: relative;
9763
- overflow: auto;
9705
+ overflow: hidden;
9764
9706
 
9765
- &[data-starting-style], &[data-ending-style] {
9707
+ &[data-entering], &[data-exiting] {
9708
+ transform: var(--origin);
9766
9709
  opacity: 0;
9767
- transform: scale(.9);
9768
9710
  }
9769
- }
9770
9711
 
9771
- .bui-MenuItem {
9772
- user-select: none;
9773
- align-items: center;
9774
- gap: var(--bui-space-2);
9775
- height: 32px;
9776
- color: var(--bui-fg-primary);
9777
- border-radius: var(--bui-radius-2);
9778
- margin-inline: var(--bui-space-1);
9779
- padding-inline: var(--bui-space-2);
9780
- font-size: var(--bui-font-size-3);
9781
- cursor: pointer;
9782
- outline: 0;
9783
- flex-shrink: 0;
9784
- text-decoration: none;
9785
- display: flex;
9712
+ &[data-placement="top"] {
9713
+ --origin: translateY(8px);
9714
+ }
9786
9715
 
9787
- &:first-child {
9788
- margin-top: var(--bui-space-1);
9716
+ &[data-placement="bottom"] {
9717
+ --origin: translateY(-8px);
9789
9718
  }
9790
9719
 
9791
- &[data-highlighted] {
9792
- background-color: var(--bui-gray-3);
9720
+ &[data-placement="right"] {
9721
+ --origin: translateX(-8px);
9722
+ }
9723
+
9724
+ &[data-placement="left"] {
9725
+ --origin: translateX(8px);
9793
9726
  }
9794
9727
  }
9795
9728
 
9796
- .bui-MenuSubmenuTrigger {
9797
- user-select: none;
9798
- justify-content: space-between;
9799
- align-items: center;
9800
- gap: var(--bui-space-2);
9801
- height: 32px;
9802
- color: var(--bui-fg-primary);
9803
- border-radius: var(--bui-radius-2);
9804
- margin-inline: var(--bui-space-1);
9729
+ .bui-MenuContent {
9730
+ max-height: inherit;
9731
+ box-sizing: border-box;
9732
+ padding: var(--bui-space-1);
9733
+ outline: none;
9734
+ min-width: 150px;
9735
+ overflow: auto;
9736
+ }
9737
+
9738
+ .bui-MenuPopover .bui-ScrollAreaRoot {
9739
+ flex-direction: column;
9740
+ flex: 1;
9741
+ height: 100%;
9742
+ min-height: 0;
9743
+ display: flex;
9744
+ }
9745
+
9746
+ .bui-MenuPopover .bui-ScrollAreaScrollbar {
9747
+ margin-inline: var(--bui-space-1_5);
9748
+ }
9749
+
9750
+ .bui-MenuItem {
9751
+ height: 2rem;
9805
9752
  padding-inline: var(--bui-space-2);
9753
+ border-radius: var(--bui-radius-2);
9754
+ cursor: default;
9755
+ color: var(--bui-fg-primary);
9806
9756
  font-size: var(--bui-font-size-3);
9807
- cursor: pointer;
9808
- outline: 0;
9809
- flex-shrink: 0;
9810
- text-decoration: none;
9757
+ justify-content: space-between;
9758
+ align-items: center;
9759
+ gap: var(--bui-space-6);
9760
+ outline: none;
9811
9761
  display: flex;
9812
9762
 
9813
- & .bui-Icon {
9814
- color: var(--bui-fg-secondary);
9763
+ &[data-focused], &[data-open] {
9764
+ background: var(--bui-bg-surface-2);
9765
+ color: var(--bui-fg-primary);
9815
9766
  }
9816
9767
 
9817
- &:first-child {
9818
- margin-top: var(--bui-space-1);
9768
+ &[data-color="danger"] {
9769
+ color: var(--bui-fg-danger);
9819
9770
  }
9820
9771
 
9821
- &[data-popup-open], &[data-highlighted] {
9822
- background-color: var(--bui-gray-3);
9772
+ &[data-color="danger"][data-focused] {
9773
+ background: var(--bui-bg-danger);
9774
+ color: var(--bui-fg-danger);
9775
+ }
9823
9776
 
9824
- & .bui-Icon {
9825
- color: var(--bui-fg-primary);
9777
+ &[data-has-submenu] {
9778
+ & > .bui-MenuItemArrow {
9779
+ display: block;
9826
9780
  }
9827
9781
  }
9828
9782
  }
9829
9783
 
9830
- .bui-MenuSeparator {
9831
- background-color: var(--color-gray-200);
9832
- height: 1px;
9833
- margin: .375rem 1rem;
9834
- }
9835
-
9836
- .bui-SubmenuComboboxSearch {
9837
- padding-inline: var(--bui-space-3);
9838
- border: none;
9839
- border-bottom: 1px solid var(--bui-border);
9840
- background-color: var(--bui-bg-surface-1);
9841
- width: 100%;
9842
- height: 32px;
9784
+ .bui-MenuItemListBox {
9785
+ height: 2rem;
9786
+ padding-inline: var(--bui-space-2);
9787
+ border-radius: var(--bui-radius-2);
9788
+ cursor: default;
9843
9789
  color: var(--bui-fg-primary);
9844
- line-height: 140%;
9845
9790
  font-size: var(--bui-font-size-3);
9846
- z-index: 1;
9791
+ justify-content: space-between;
9792
+ align-items: center;
9793
+ gap: var(--bui-space-6);
9847
9794
  outline: none;
9848
- position: sticky;
9849
- top: 0;
9795
+ display: flex;
9850
9796
 
9851
- &::placeholder {
9852
- color: var(--bui-fg-secondary);
9797
+ &:hover {
9798
+ background: var(--bui-bg-surface-2);
9799
+ color: var(--bui-fg-primary);
9853
9800
  }
9854
9801
 
9855
- &:disabled {
9856
- opacity: .6;
9857
- cursor: not-allowed;
9802
+ &[data-selected] .bui-MenuItemListBoxCheck {
9803
+ & > svg {
9804
+ opacity: 1;
9805
+ color: var(--bui-fg-primary);
9806
+ }
9858
9807
  }
9859
9808
  }
9860
9809
 
9861
- .bui-SubmenuComboboxItems {
9862
- padding-top: var(--bui-space-2);
9863
- outline: none;
9864
- flex-direction: column;
9810
+ .bui-MenuItemListBoxCheck {
9811
+ justify-content: center;
9812
+ align-items: center;
9813
+ width: 1rem;
9814
+ height: 1rem;
9865
9815
  display: flex;
9866
- overflow-y: auto;
9867
- }
9868
9816
 
9869
- .bui-SubmenuComboboxNoResults {
9870
- padding-inline: var(--bui-space-3);
9871
- padding-top: var(--bui-space-2);
9872
- padding-bottom: var(--bui-space-4);
9873
- color: var(--bui-fg-secondary);
9874
- font-size: var(--bui-font-size-3);
9817
+ & > svg {
9818
+ opacity: 0;
9819
+ width: 1rem;
9820
+ height: 1rem;
9821
+ }
9875
9822
  }
9876
9823
 
9877
- .bui-SubmenuComboboxItem {
9878
- user-select: none;
9879
- justify-content: space-between;
9824
+ .bui-MenuItemContent {
9880
9825
  align-items: center;
9881
9826
  gap: var(--bui-space-2);
9882
- height: 32px;
9883
- color: var(--bui-fg-primary);
9884
- border-radius: var(--bui-radius-2);
9885
- margin-inline: var(--bui-space-1);
9886
- padding-inline: var(--bui-space-2);
9887
- font-size: var(--bui-font-size-3);
9888
- cursor: pointer;
9889
- outline: 0;
9890
- flex-shrink: 0;
9891
- text-decoration: none;
9892
9827
  display: flex;
9893
9828
 
9894
- &[data-highlighted] {
9895
- background-color: var(--bui-gray-3);
9829
+ & > svg {
9830
+ width: 1rem;
9831
+ height: 1rem;
9832
+ }
9833
+ }
9834
+
9835
+ .bui-MenuItemArrow {
9836
+ width: 1rem;
9837
+ height: 1rem;
9838
+ display: none;
9839
+
9840
+ & > svg {
9841
+ width: 1rem;
9842
+ height: 1rem;
9896
9843
  }
9844
+ }
9897
9845
 
9898
- &[data-disabled] {
9899
- opacity: .5;
9900
- cursor: not-allowed;
9846
+ .bui-MenuSection {
9847
+ &:first-child .bui-MenuSectionHeader {
9848
+ padding-top: 0;
9901
9849
  }
9902
9850
  }
9903
9851
 
9904
- .bui-SubmenuComboboxItemCheckbox {
9905
- width: 16px;
9906
- height: 16px;
9852
+ .bui-MenuSectionHeader {
9853
+ height: 2rem;
9854
+ padding-top: var(--bui-space-3);
9855
+ padding-left: var(--bui-space-2);
9907
9856
  color: var(--bui-fg-primary);
9908
- border-radius: var(--bui-radius-2);
9909
- border: 1px solid var(--bui-border);
9910
- background: var(--bui-bg-surface-1);
9857
+ font-size: var(--bui-font-size-1);
9858
+ letter-spacing: .05rem;
9859
+ text-transform: uppercase;
9860
+ align-items: center;
9861
+ font-weight: bold;
9862
+ display: flex;
9863
+ }
9864
+
9865
+ .bui-MenuSeparator {
9866
+ background: var(--bui-border);
9867
+ height: 1px;
9868
+ margin-inline: var(--bui-space-1_5);
9869
+ margin-block: var(--bui-space-1);
9870
+ }
9871
+
9872
+ .bui-MenuSearchField {
9873
+ font-family: var(--bui-font-regular);
9911
9874
  flex-shrink: 0;
9875
+ width: 100%;
9876
+ position: relative;
9877
+
9878
+ &[data-empty] {
9879
+ & .bui-MenuSearchFieldClear {
9880
+ display: none;
9881
+ }
9882
+ }
9883
+ }
9884
+
9885
+ .bui-MenuSearchFieldInput {
9886
+ padding: 0 var(--bui-space-3);
9887
+ border: none;
9888
+ border-bottom: 1px solid var(--bui-border);
9889
+ background-color: var(--bui-bg-surface-1);
9890
+ font-size: var(--bui-font-size-3);
9891
+ font-family: var(--bui-font-regular);
9892
+ font-weight: var(--bui-font-weight-regular);
9893
+ color: var(--bui-fg-primary);
9894
+ width: 100%;
9895
+ height: 2rem;
9896
+ cursor: inherit;
9897
+ outline: none;
9898
+ align-items: center;
9899
+ display: flex;
9900
+
9901
+ &::-webkit-search-cancel-button, &::-webkit-search-decoration {
9902
+ -webkit-appearance: none;
9903
+ }
9904
+ }
9905
+
9906
+ .bui-MenuSearchFieldClear {
9907
+ right: var(--bui-space-2);
9908
+ cursor: pointer;
9909
+ color: var(--bui-fg-secondary);
9910
+ background-color: #0000;
9911
+ border: none;
9912
9912
  justify-content: center;
9913
9913
  align-items: center;
9914
+ margin: 0;
9915
+ padding: 0;
9916
+ transition: color .2s ease-in-out;
9914
9917
  display: flex;
9918
+ position: absolute;
9919
+ top: 0;
9920
+ bottom: 0;
9921
+
9922
+ & > svg {
9923
+ width: 1rem;
9924
+ height: 1rem;
9925
+ }
9915
9926
  }
9916
9927
 
9917
- .bui-SubmenuComboboxItemLabel {
9918
- text-overflow: ellipsis;
9919
- white-space: nowrap;
9920
- flex: 1;
9921
- overflow: hidden;
9928
+ .bui-MenuEmptyState {
9929
+ padding: var(--bui-space-1);
9930
+ color: var(--bui-fg-secondary);
9931
+ font-size: var(--bui-font-size-3);
9932
+ font-family: var(--bui-font-regular);
9933
+ font-weight: var(--bui-font-weight-regular);
9922
9934
  }
9923
9935
 
9924
9936
  .bui-Popover {
@@ -10252,6 +10264,81 @@
10252
10264
  padding-top: var(--bui-space-4);
10253
10265
  }
10254
10266
 
10267
+ .bui-TagList {
10268
+ gap: var(--bui-space-2);
10269
+ flex-wrap: wrap;
10270
+ display: flex;
10271
+ }
10272
+
10273
+ .bui-Tag {
10274
+ color: var(--bui-fg-primary);
10275
+ background-color: var(--bui-gray-2);
10276
+ border-radius: var(--bui-radius-2);
10277
+ font-weight: var(--bui-font-weight-regular);
10278
+ justify-content: center;
10279
+ align-items: center;
10280
+ gap: var(--bui-space-1);
10281
+ box-sizing: border-box;
10282
+ transition-property: background-color, box-shadow, color;
10283
+ transition-duration: .2s;
10284
+ transition-timing-function: ease-in-out;
10285
+ display: flex;
10286
+ }
10287
+
10288
+ .bui-Tag[data-size="small"] {
10289
+ height: 26px;
10290
+ padding: 0 var(--bui-space-2);
10291
+ font-size: var(--bui-font-size-1);
10292
+ }
10293
+
10294
+ .bui-Tag[data-size="medium"] {
10295
+ height: 32px;
10296
+ padding: 0 var(--bui-space-2);
10297
+ font-size: var(--bui-font-size-2);
10298
+ }
10299
+
10300
+ .bui-Tag[data-hovered] {
10301
+ background-color: var(--bui-gray-3);
10302
+ cursor: pointer;
10303
+ }
10304
+
10305
+ .bui-Tag[data-focus-visible] {
10306
+ outline: 2px solid var(--bui-ring);
10307
+ outline-offset: 1px;
10308
+ }
10309
+
10310
+ .bui-Tag[data-selected] {
10311
+ box-shadow: inset 0 0 0 1px var(--bui-gray-8);
10312
+ }
10313
+
10314
+ .bui-Tag[data-disabled] {
10315
+ color: var(--bui-fg-disabled);
10316
+ cursor: not-allowed;
10317
+ }
10318
+
10319
+ .bui-TagRemoveButton {
10320
+ cursor: pointer;
10321
+ color: var(--bui-fg-primary);
10322
+ background-color: #0000;
10323
+ border: none;
10324
+ width: 1rem;
10325
+ height: 1rem;
10326
+ margin: 0;
10327
+ padding: 0;
10328
+ }
10329
+
10330
+ .bui-TagIcon {
10331
+ justify-content: center;
10332
+ align-items: center;
10333
+ transition: color .2s ease-in-out;
10334
+ display: flex;
10335
+
10336
+ & svg {
10337
+ width: 1rem;
10338
+ height: 1rem;
10339
+ }
10340
+ }
10341
+
10255
10342
  .bui-Text {
10256
10343
  font-family: var(--bui-font-regular);
10257
10344
  margin: 0;
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar.esm.js","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef, ElementRef } from 'react';\nimport { Avatar as AvatarPrimitive } from '@base-ui-components/react/avatar';\nimport clsx from 'clsx';\nimport { AvatarProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const Avatar = forwardRef<\n ElementRef<typeof AvatarPrimitive.Root>,\n AvatarProps\n>((props, ref) => {\n const { className, src, name, size = 'medium', ...rest } = props;\n const { classNames } = useStyles('Avatar', {\n size,\n });\n\n return (\n <AvatarPrimitive.Root\n ref={ref}\n className={clsx(classNames.root, className)}\n data-size={size}\n {...rest}\n >\n <AvatarPrimitive.Image className={classNames.image} src={src} />\n <AvatarPrimitive.Fallback className={classNames.fallback}>\n {(name || '')\n .split(' ')\n .map(word => word[0])\n .join('')\n .toLocaleUpperCase('en-US')\n .slice(0, 2)}\n </AvatarPrimitive.Fallback>\n </AvatarPrimitive.Root>\n );\n});\n\nAvatar.displayName = AvatarPrimitive.Root.displayName;\n"],"names":["AvatarPrimitive"],"mappings":";;;;;;AAuBO,MAAM,MAAS,GAAA,UAAA,CAGpB,CAAC,KAAA,EAAO,GAAQ,KAAA;AAChB,EAAM,MAAA,EAAE,WAAW,GAAK,EAAA,IAAA,EAAM,OAAO,QAAU,EAAA,GAAG,MAAS,GAAA,KAAA;AAC3D,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,QAAU,EAAA;AAAA,IACzC;AAAA,GACD,CAAA;AAED,EACE,uBAAA,IAAA;AAAA,IAACA,QAAgB,CAAA,IAAA;AAAA,IAAhB;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,MAC1C,WAAW,EAAA,IAAA;AAAA,MACV,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAACA,SAAgB,KAAhB,EAAA,EAAsB,SAAW,EAAA,UAAA,CAAW,OAAO,GAAU,EAAA,CAAA;AAAA,wBAC9D,GAAA,CAACA,QAAgB,CAAA,QAAA,EAAhB,EAAyB,SAAA,EAAW,UAAW,CAAA,QAAA,EAC5C,QAAQ,EAAA,CAAA,IAAA,IAAA,EAAA,EACP,KAAM,CAAA,GAAG,CACT,CAAA,GAAA,CAAI,CAAQ,IAAA,KAAA,IAAA,CAAK,CAAC,CAAC,CACnB,CAAA,IAAA,CAAK,EAAE,CAAA,CACP,iBAAkB,CAAA,OAAO,CACzB,CAAA,KAAA,CAAM,CAAG,EAAA,CAAC,CACf,EAAA;AAAA;AAAA;AAAA,GACF;AAEJ,CAAC;AAED,MAAO,CAAA,WAAA,GAAcA,SAAgB,IAAK,CAAA,WAAA;;;;"}
1
+ {"version":3,"file":"Avatar.esm.js","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef, ElementRef } from 'react';\nimport { Avatar as AvatarPrimitive } from '@base-ui-components/react/avatar';\nimport clsx from 'clsx';\nimport { AvatarProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const Avatar = forwardRef<\n ElementRef<typeof AvatarPrimitive.Root>,\n AvatarProps\n>((props, ref) => {\n const { className, src, name, size = 'medium', ...rest } = props;\n const { classNames } = useStyles('Avatar', {\n size,\n });\n\n return (\n <AvatarPrimitive.Root\n ref={ref}\n className={clsx(classNames.root, className)}\n data-size={size}\n {...rest}\n >\n <AvatarPrimitive.Image className={classNames.image} src={src} />\n <AvatarPrimitive.Fallback className={classNames.fallback}>\n {(name || '')\n .split(' ')\n .map(word => word[0])\n .join('')\n .toLocaleUpperCase('en-US')\n .slice(0, 2)}\n </AvatarPrimitive.Fallback>\n </AvatarPrimitive.Root>\n );\n});\n\nAvatar.displayName = AvatarPrimitive.Root.displayName;\n"],"names":["AvatarPrimitive"],"mappings":";;;;;;AAuBO,MAAM,MAAA,GAAS,UAAA,CAGpB,CAAC,KAAA,EAAO,GAAA,KAAQ;AAChB,EAAA,MAAM,EAAE,WAAW,GAAA,EAAK,IAAA,EAAM,OAAO,QAAA,EAAU,GAAG,MAAK,GAAI,KAAA;AAC3D,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,QAAA,EAAU;AAAA,IACzC;AAAA,GACD,CAAA;AAED,EAAA,uBACE,IAAA;AAAA,IAACA,QAAA,CAAgB,IAAA;AAAA,IAAhB;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,IAAA,EAAM,SAAS,CAAA;AAAA,MAC1C,WAAA,EAAW,IAAA;AAAA,MACV,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAACA,SAAgB,KAAA,EAAhB,EAAsB,SAAA,EAAW,UAAA,CAAW,OAAO,GAAA,EAAU,CAAA;AAAA,wBAC9D,GAAA,CAACA,QAAA,CAAgB,QAAA,EAAhB,EAAyB,SAAA,EAAW,UAAA,CAAW,QAAA,EAC5C,QAAA,EAAA,CAAA,IAAA,IAAQ,EAAA,EACP,KAAA,CAAM,GAAG,CAAA,CACT,GAAA,CAAI,CAAA,IAAA,KAAQ,IAAA,CAAK,CAAC,CAAC,CAAA,CACnB,IAAA,CAAK,EAAE,CAAA,CACP,iBAAA,CAAkB,OAAO,CAAA,CACzB,KAAA,CAAM,CAAA,EAAG,CAAC,CAAA,EACf;AAAA;AAAA;AAAA,GACF;AAEJ,CAAC;AAED,MAAA,CAAO,WAAA,GAAcA,SAAgB,IAAA,CAAK,WAAA;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Box.esm.js","sources":["../../../src/components/Box/Box.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { createElement, forwardRef } from 'react';\nimport { BoxProps } from './types';\nimport clsx from 'clsx';\nimport { extractProps } from '../../utils/extractProps';\nimport { spacingPropDefs } from '../../props/spacing.props';\nimport { boxPropDefs } from './Box.props';\nimport { widthPropDefs } from '../../props/width.props';\nimport { heightPropDefs } from '../../props/height.props';\nimport { positionPropDefs } from '../../props/position.props';\nimport { displayPropDefs } from '../../props/display.props';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {\n const { children } = props;\n\n const propDefs = {\n ...spacingPropDefs,\n ...widthPropDefs,\n ...heightPropDefs,\n ...positionPropDefs,\n ...displayPropDefs,\n ...boxPropDefs,\n };\n\n const { classNames } = useStyles('Box');\n const { className, style } = extractProps(props, propDefs);\n\n return createElement(props.as || 'div', {\n ref,\n className: clsx(classNames.root, className),\n style,\n children,\n });\n});\n\nBox.displayName = 'Box';\n"],"names":[],"mappings":";;;;;;;;;;;AA6BO,MAAM,GAAM,GAAA,UAAA,CAAqC,CAAC,KAAA,EAAO,GAAQ,KAAA;AACtE,EAAM,MAAA,EAAE,UAAa,GAAA,KAAA;AAErB,EAAA,MAAM,QAAW,GAAA;AAAA,IACf,GAAG,eAAA;AAAA,IACH,GAAG,aAAA;AAAA,IACH,GAAG,cAAA;AAAA,IACH,GAAG,gBAAA;AAAA,IACH,GAAG,eAAA;AAAA,IACH,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,KAAK,CAAA;AACtC,EAAA,MAAM,EAAE,SAAW,EAAA,KAAA,EAAU,GAAA,YAAA,CAAa,OAAO,QAAQ,CAAA;AAEzD,EAAO,OAAA,aAAA,CAAc,KAAM,CAAA,EAAA,IAAM,KAAO,EAAA;AAAA,IACtC,GAAA;AAAA,IACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,IAC1C,KAAA;AAAA,IACA;AAAA,GACD,CAAA;AACH,CAAC;AAED,GAAA,CAAI,WAAc,GAAA,KAAA;;;;"}
1
+ {"version":3,"file":"Box.esm.js","sources":["../../../src/components/Box/Box.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { createElement, forwardRef } from 'react';\nimport { BoxProps } from './types';\nimport clsx from 'clsx';\nimport { extractProps } from '../../utils/extractProps';\nimport { spacingPropDefs } from '../../props/spacing.props';\nimport { boxPropDefs } from './Box.props';\nimport { widthPropDefs } from '../../props/width.props';\nimport { heightPropDefs } from '../../props/height.props';\nimport { positionPropDefs } from '../../props/position.props';\nimport { displayPropDefs } from '../../props/display.props';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {\n const { children } = props;\n\n const propDefs = {\n ...spacingPropDefs,\n ...widthPropDefs,\n ...heightPropDefs,\n ...positionPropDefs,\n ...displayPropDefs,\n ...boxPropDefs,\n };\n\n const { classNames } = useStyles('Box');\n const { className, style } = extractProps(props, propDefs);\n\n return createElement(props.as || 'div', {\n ref,\n className: clsx(classNames.root, className),\n style,\n children,\n });\n});\n\nBox.displayName = 'Box';\n"],"names":[],"mappings":";;;;;;;;;;;AA6BO,MAAM,GAAA,GAAM,UAAA,CAAqC,CAAC,KAAA,EAAO,GAAA,KAAQ;AACtE,EAAA,MAAM,EAAE,UAAS,GAAI,KAAA;AAErB,EAAA,MAAM,QAAA,GAAW;AAAA,IACf,GAAG,eAAA;AAAA,IACH,GAAG,aAAA;AAAA,IACH,GAAG,cAAA;AAAA,IACH,GAAG,gBAAA;AAAA,IACH,GAAG,eAAA;AAAA,IACH,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,KAAK,CAAA;AACtC,EAAA,MAAM,EAAE,SAAA,EAAW,KAAA,EAAM,GAAI,YAAA,CAAa,OAAO,QAAQ,CAAA;AAEzD,EAAA,OAAO,aAAA,CAAc,KAAA,CAAM,EAAA,IAAM,KAAA,EAAO;AAAA,IACtC,GAAA;AAAA,IACA,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,IAAA,EAAM,SAAS,CAAA;AAAA,IAC1C,KAAA;AAAA,IACA;AAAA,GACD,CAAA;AACH,CAAC;AAED,GAAA,CAAI,WAAA,GAAc,KAAA;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Box.props.esm.js","sources":["../../../src/components/Box/Box.props.ts"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { PropDef, GetPropDefTypes } from '../../props/prop-def';\n\nconst as = ['div', 'span'] as const;\n\n/** @public */\nconst boxPropDefs = {\n as: { type: 'enum', values: as, default: 'div' },\n} satisfies {\n as: PropDef<(typeof as)[number]>;\n};\n\n// Use all of the imported prop defs to ensure that JSDoc works\n/** @public */\ntype BoxOwnProps = GetPropDefTypes<typeof boxPropDefs>;\n\nexport { boxPropDefs };\nexport type { BoxOwnProps };\n"],"names":[],"mappings":"AAkBA,MAAM,EAAA,GAAK,CAAC,KAAA,EAAO,MAAM,CAAA;AAGzB,MAAM,WAAc,GAAA;AAAA,EAClB,IAAI,EAAE,IAAA,EAAM,QAAQ,MAAQ,EAAA,EAAA,EAAI,SAAS,KAAM;AACjD;;;;"}
1
+ {"version":3,"file":"Box.props.esm.js","sources":["../../../src/components/Box/Box.props.ts"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { PropDef, GetPropDefTypes } from '../../props/prop-def';\n\nconst as = ['div', 'span'] as const;\n\n/** @public */\nconst boxPropDefs = {\n as: { type: 'enum', values: as, default: 'div' },\n} satisfies {\n as: PropDef<(typeof as)[number]>;\n};\n\n// Use all of the imported prop defs to ensure that JSDoc works\n/** @public */\ntype BoxOwnProps = GetPropDefTypes<typeof boxPropDefs>;\n\nexport { boxPropDefs };\nexport type { BoxOwnProps };\n"],"names":[],"mappings":"AAkBA,MAAM,EAAA,GAAK,CAAC,KAAA,EAAO,MAAM,CAAA;AAGzB,MAAM,WAAA,GAAc;AAAA,EAClB,IAAI,EAAE,IAAA,EAAM,QAAQ,MAAA,EAAQ,EAAA,EAAI,SAAS,KAAA;AAC3C;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Button.esm.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { Button as RAButton } from 'react-aria-components';\nimport type { ButtonProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const Button = forwardRef(\n (props: ButtonProps, ref: Ref<HTMLButtonElement>) => {\n const {\n size = 'small',\n variant = 'primary',\n iconStart,\n iconEnd,\n children,\n className,\n ...rest\n } = props;\n\n const { classNames, dataAttributes } = useStyles('Button', {\n size,\n variant,\n });\n\n return (\n <RAButton\n className={clsx(classNames.root, className)}\n ref={ref}\n {...dataAttributes}\n {...rest}\n >\n {iconStart}\n {children}\n {iconEnd}\n </RAButton>\n );\n },\n);\n\nButton.displayName = 'Button';\n"],"names":["RAButton"],"mappings":";;;;;;AAuBO,MAAM,MAAS,GAAA,UAAA;AAAA,EACpB,CAAC,OAAoB,GAAgC,KAAA;AACnD,IAAM,MAAA;AAAA,MACJ,IAAO,GAAA,OAAA;AAAA,MACP,OAAU,GAAA,SAAA;AAAA,MACV,SAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,UAAU,QAAU,EAAA;AAAA,MACzD,IAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IACE,uBAAA,IAAA;AAAA,MAACA,QAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,QAC1C,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,SAAA;AAAA,UACA,QAAA;AAAA,UACA;AAAA;AAAA;AAAA,KACH;AAAA;AAGN;AAEA,MAAA,CAAO,WAAc,GAAA,QAAA;;;;"}
1
+ {"version":3,"file":"Button.esm.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { Button as RAButton } from 'react-aria-components';\nimport type { ButtonProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const Button = forwardRef(\n (props: ButtonProps, ref: Ref<HTMLButtonElement>) => {\n const {\n size = 'small',\n variant = 'primary',\n iconStart,\n iconEnd,\n children,\n className,\n ...rest\n } = props;\n\n const { classNames, dataAttributes } = useStyles('Button', {\n size,\n variant,\n });\n\n return (\n <RAButton\n className={clsx(classNames.root, className)}\n ref={ref}\n {...dataAttributes}\n {...rest}\n >\n {iconStart}\n {children}\n {iconEnd}\n </RAButton>\n );\n },\n);\n\nButton.displayName = 'Button';\n"],"names":["RAButton"],"mappings":";;;;;;AAuBO,MAAM,MAAA,GAAS,UAAA;AAAA,EACpB,CAAC,OAAoB,GAAA,KAAgC;AACnD,IAAA,MAAM;AAAA,MACJ,IAAA,GAAO,OAAA;AAAA,MACP,OAAA,GAAU,SAAA;AAAA,MACV,SAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAe,GAAI,UAAU,QAAA,EAAU;AAAA,MACzD,IAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,uBACE,IAAA;AAAA,MAACA,QAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,IAAA,EAAM,SAAS,CAAA;AAAA,QAC1C,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,SAAA;AAAA,UACA,QAAA;AAAA,UACA;AAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonIcon.esm.js","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { Button as RAButton } from 'react-aria-components';\nimport type { ButtonIconProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const ButtonIcon = forwardRef(\n (props: ButtonIconProps, ref: Ref<HTMLButtonElement>) => {\n const {\n size = 'small',\n variant = 'primary',\n icon,\n className,\n style,\n ...rest\n } = props;\n\n const { classNames, dataAttributes } = useStyles('Button', {\n size,\n variant,\n });\n\n const { classNames: classNamesButtonIcon } = useStyles('ButtonIcon');\n\n return (\n <RAButton\n className={clsx(classNames.root, classNamesButtonIcon.root, className)}\n ref={ref}\n {...dataAttributes}\n {...rest}\n >\n {icon}\n </RAButton>\n );\n },\n);\n\nButtonIcon.displayName = 'ButtonIcon';\n"],"names":["RAButton"],"mappings":";;;;;;AAuBO,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAgC,KAAA;AACvD,IAAM,MAAA;AAAA,MACJ,IAAO,GAAA,OAAA;AAAA,MACP,OAAU,GAAA,SAAA;AAAA,MACV,IAAA;AAAA,MACA,SAAA;AAAA,MACA,KAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,UAAU,QAAU,EAAA;AAAA,MACzD,IAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,oBAAqB,EAAA,GAAI,UAAU,YAAY,CAAA;AAEnE,IACE,uBAAA,GAAA;AAAA,MAACA,MAAA;AAAA,MAAA;AAAA,QACC,WAAW,IAAK,CAAA,UAAA,CAAW,IAAM,EAAA,oBAAA,CAAqB,MAAM,SAAS,CAAA;AAAA,QACrE,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA;AAAA,KACH;AAAA;AAGN;AAEA,UAAA,CAAW,WAAc,GAAA,YAAA;;;;"}
1
+ {"version":3,"file":"ButtonIcon.esm.js","sources":["../../../src/components/ButtonIcon/ButtonIcon.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { Button as RAButton } from 'react-aria-components';\nimport type { ButtonIconProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const ButtonIcon = forwardRef(\n (props: ButtonIconProps, ref: Ref<HTMLButtonElement>) => {\n const {\n size = 'small',\n variant = 'primary',\n icon,\n className,\n style,\n ...rest\n } = props;\n\n const { classNames, dataAttributes } = useStyles('Button', {\n size,\n variant,\n });\n\n const { classNames: classNamesButtonIcon } = useStyles('ButtonIcon');\n\n return (\n <RAButton\n className={clsx(classNames.root, classNamesButtonIcon.root, className)}\n ref={ref}\n {...dataAttributes}\n {...rest}\n >\n {icon}\n </RAButton>\n );\n },\n);\n\nButtonIcon.displayName = 'ButtonIcon';\n"],"names":["RAButton"],"mappings":";;;;;;AAuBO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAA,KAAgC;AACvD,IAAA,MAAM;AAAA,MACJ,IAAA,GAAO,OAAA;AAAA,MACP,OAAA,GAAU,SAAA;AAAA,MACV,IAAA;AAAA,MACA,SAAA;AAAA,MACA,KAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAe,GAAI,UAAU,QAAA,EAAU;AAAA,MACzD,IAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,oBAAA,EAAqB,GAAI,UAAU,YAAY,CAAA;AAEnE,IAAA,uBACE,GAAA;AAAA,MAACA,MAAA;AAAA,MAAA;AAAA,QACC,WAAW,IAAA,CAAK,UAAA,CAAW,IAAA,EAAM,oBAAA,CAAqB,MAAM,SAAS,CAAA;AAAA,QACrE,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonLink.esm.js","sources":["../../../src/components/ButtonLink/ButtonLink.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { Link as RALink } from 'react-aria-components';\nimport type { ButtonLinkProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const ButtonLink = forwardRef(\n (props: ButtonLinkProps, ref: Ref<HTMLAnchorElement>) => {\n const {\n size = 'small',\n variant = 'primary',\n iconStart,\n iconEnd,\n children,\n className,\n ...rest\n } = props;\n\n const { classNames, dataAttributes } = useStyles('Button', {\n size,\n variant,\n });\n\n const { classNames: classNamesButtonLink } = useStyles('ButtonLink');\n\n return (\n <RALink\n className={clsx(classNames.root, classNamesButtonLink.root, className)}\n ref={ref}\n {...dataAttributes}\n {...rest}\n >\n {iconStart}\n {children}\n {iconEnd}\n </RALink>\n );\n },\n);\n\nButtonLink.displayName = 'ButtonLink';\n"],"names":["RALink"],"mappings":";;;;;;AAuBO,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAgC,KAAA;AACvD,IAAM,MAAA;AAAA,MACJ,IAAO,GAAA,OAAA;AAAA,MACP,OAAU,GAAA,SAAA;AAAA,MACV,SAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,UAAU,QAAU,EAAA;AAAA,MACzD,IAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,oBAAqB,EAAA,GAAI,UAAU,YAAY,CAAA;AAEnE,IACE,uBAAA,IAAA;AAAA,MAACA,IAAA;AAAA,MAAA;AAAA,QACC,WAAW,IAAK,CAAA,UAAA,CAAW,IAAM,EAAA,oBAAA,CAAqB,MAAM,SAAS,CAAA;AAAA,QACrE,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,SAAA;AAAA,UACA,QAAA;AAAA,UACA;AAAA;AAAA;AAAA,KACH;AAAA;AAGN;AAEA,UAAA,CAAW,WAAc,GAAA,YAAA;;;;"}
1
+ {"version":3,"file":"ButtonLink.esm.js","sources":["../../../src/components/ButtonLink/ButtonLink.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { Link as RALink } from 'react-aria-components';\nimport type { ButtonLinkProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const ButtonLink = forwardRef(\n (props: ButtonLinkProps, ref: Ref<HTMLAnchorElement>) => {\n const {\n size = 'small',\n variant = 'primary',\n iconStart,\n iconEnd,\n children,\n className,\n ...rest\n } = props;\n\n const { classNames, dataAttributes } = useStyles('Button', {\n size,\n variant,\n });\n\n const { classNames: classNamesButtonLink } = useStyles('ButtonLink');\n\n return (\n <RALink\n className={clsx(classNames.root, classNamesButtonLink.root, className)}\n ref={ref}\n {...dataAttributes}\n {...rest}\n >\n {iconStart}\n {children}\n {iconEnd}\n </RALink>\n );\n },\n);\n\nButtonLink.displayName = 'ButtonLink';\n"],"names":["RALink"],"mappings":";;;;;;AAuBO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAA,KAAgC;AACvD,IAAA,MAAM;AAAA,MACJ,IAAA,GAAO,OAAA;AAAA,MACP,OAAA,GAAU,SAAA;AAAA,MACV,SAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAe,GAAI,UAAU,QAAA,EAAU;AAAA,MACzD,IAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,oBAAA,EAAqB,GAAI,UAAU,YAAY,CAAA;AAEnE,IAAA,uBACE,IAAA;AAAA,MAACA,IAAA;AAAA,MAAA;AAAA,QACC,WAAW,IAAA,CAAK,UAAA,CAAW,IAAA,EAAM,oBAAA,CAAqB,MAAM,SAAS,CAAA;AAAA,QACrE,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,SAAA;AAAA,UACA,QAAA;AAAA,UACA;AAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}