@backstage/ui 0.12.0-next.0 → 0.12.0-next.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 +147 -0
- package/dist/components/Accordion/Accordion.module.css.esm.js +2 -2
- package/dist/components/Alert/Alert.module.css.esm.js +2 -2
- package/dist/components/Avatar/Avatar.module.css.esm.js +2 -2
- package/dist/components/Box/Box.module.css.esm.js +2 -2
- package/dist/components/Button/Button.module.css.esm.js +2 -2
- package/dist/components/Button/definition.esm.js +1 -0
- package/dist/components/Button/definition.esm.js.map +1 -1
- package/dist/components/ButtonIcon/ButtonIcon.module.css.esm.js +2 -2
- package/dist/components/ButtonLink/ButtonLink.module.css.esm.js +2 -2
- package/dist/components/Card/Card.module.css.esm.js +2 -2
- package/dist/components/Checkbox/Checkbox.module.css.esm.js +2 -2
- package/dist/components/Dialog/Dialog.module.css.esm.js +2 -2
- package/dist/components/Flex/Flex.module.css.esm.js +2 -2
- package/dist/components/Grid/Grid.module.css.esm.js +2 -2
- package/dist/components/Header/Header.module.css.esm.js +2 -2
- package/dist/components/HeaderPage/HeaderPage.esm.js +1 -0
- package/dist/components/HeaderPage/HeaderPage.esm.js.map +1 -1
- package/dist/components/Link/Link.esm.js +1 -0
- package/dist/components/Link/Link.esm.js.map +1 -1
- package/dist/components/Link/Link.module.css.esm.js +2 -2
- package/dist/components/Link/definition.esm.js +10 -2
- package/dist/components/Link/definition.esm.js.map +1 -1
- package/dist/components/Menu/Menu.module.css.esm.js +2 -2
- package/dist/components/PasswordField/PasswordField.esm.js +129 -0
- package/dist/components/PasswordField/PasswordField.esm.js.map +1 -0
- package/dist/components/PasswordField/PasswordField.module.css.esm.js +8 -0
- package/dist/components/PasswordField/PasswordField.module.css.esm.js.map +1 -0
- package/dist/components/PasswordField/definition.esm.js +15 -0
- package/dist/components/PasswordField/definition.esm.js.map +1 -0
- package/dist/components/Popover/Popover.module.css.esm.js +2 -2
- package/dist/components/RadioGroup/RadioGroup.module.css.esm.js +2 -2
- package/dist/components/SearchField/SearchField.module.css.esm.js +2 -2
- package/dist/components/Select/Select.module.css.esm.js +2 -2
- package/dist/components/Skeleton/Skeleton.module.css.esm.js +2 -2
- package/dist/components/Switch/Switch.module.css.esm.js +2 -2
- package/dist/components/Table/components/Table.esm.js +61 -54
- package/dist/components/Table/components/Table.esm.js.map +1 -1
- package/dist/components/Table/hooks/useCompletePagination.esm.js +12 -7
- package/dist/components/Table/hooks/useCompletePagination.esm.js.map +1 -1
- package/dist/components/Tabs/Tabs.module.css.esm.js +2 -2
- package/dist/components/TagGroup/TagGroup.esm.js +45 -41
- package/dist/components/TagGroup/TagGroup.esm.js.map +1 -1
- package/dist/components/TagGroup/TagGroup.module.css.esm.js +2 -2
- package/dist/components/Text/Text.module.css.esm.js +2 -2
- package/dist/components/Text/definition.esm.js +8 -1
- package/dist/components/Text/definition.esm.js.map +1 -1
- package/dist/components/TextField/TextField.module.css.esm.js +2 -2
- package/dist/components/ToggleButton/ToggleButton.module.css.esm.js +2 -2
- package/dist/components/Tooltip/Tooltip.module.css.esm.js +2 -2
- package/{css → dist/css}/styles.css +940 -618
- package/dist/hooks/useDefinition/useDefinition.esm.js +2 -4
- package/dist/hooks/useDefinition/useDefinition.esm.js.map +1 -1
- package/dist/index.d.ts +58 -10
- package/dist/index.esm.js +2 -0
- package/dist/index.esm.js.map +1 -1
- package/package.json +28 -28
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,152 @@
|
|
|
1
1
|
# @backstage/ui
|
|
2
2
|
|
|
3
|
+
## 0.12.0-next.2
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- b63c25b: **BREAKING**: Removed gray scale tokens and renamed background surface tokens to neutral tokens
|
|
8
|
+
|
|
9
|
+
The `--bui-gray-1` through `--bui-gray-8` tokens have been removed. The `--bui-bg-surface-*` and `--bui-bg-neutral-on-surface-*` tokens have been replaced by a unified `--bui-bg-neutral-*` scale.
|
|
10
|
+
|
|
11
|
+
**Migration:**
|
|
12
|
+
|
|
13
|
+
Replace surface tokens directly:
|
|
14
|
+
|
|
15
|
+
```diff
|
|
16
|
+
- background: var(--bui-bg-surface-0);
|
|
17
|
+
+ background: var(--bui-bg-neutral-0);
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
Replace on-surface tokens shifted by +1:
|
|
21
|
+
|
|
22
|
+
```diff
|
|
23
|
+
- background: var(--bui-bg-neutral-on-surface-0);
|
|
24
|
+
+ background: var(--bui-bg-neutral-1);
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
Replace gray tokens 1-4 with neutral equivalents (`--bui-gray-5` through `--bui-gray-8` have no direct replacement):
|
|
28
|
+
|
|
29
|
+
```diff
|
|
30
|
+
- background: var(--bui-gray-1);
|
|
31
|
+
+ background: var(--bui-bg-neutral-1);
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
### Patch Changes
|
|
35
|
+
|
|
36
|
+
- c8ae765: Fixed nested Accordion icon state issue where the inner accordion's arrow icon would incorrectly show as expanded when only the outer accordion was expanded. The CSS selector now uses a direct parent selector to ensure the icon only responds to its own accordion's expanded state.
|
|
37
|
+
|
|
38
|
+
Affected components: Accordion
|
|
39
|
+
|
|
40
|
+
- 5c76d13: Allow `ref` as a prop on the `Tag` component
|
|
41
|
+
|
|
42
|
+
Affected components: Tag
|
|
43
|
+
|
|
44
|
+
- 741a98d: Allow data to be passed directly to the `useTable` hook using the property `data` instead of `getData()` for mode `"complete"`.
|
|
45
|
+
|
|
46
|
+
This simplifies usage as data changes, rather than having to perform a `useEffect` when data changes, and then reloading the data. It also happens immediately, so stale data won't remain until a rerender (with an internal async state change), so less flickering.
|
|
47
|
+
|
|
48
|
+
Affected components: Table
|
|
49
|
+
|
|
50
|
+
- a0fe1b2: Fixed changing columns after first render from crashing. It now renders the table with the new column layout as columns change.
|
|
51
|
+
|
|
52
|
+
Affected components: Table
|
|
53
|
+
|
|
54
|
+
- becf851: export PasswordField component
|
|
55
|
+
- a7e0d50: Prepare for React Router v7 migration by updating to v6.30.2 across all NFS packages and enabling v7 future flags. Convert routes from splat paths to parent/child structure with Outlet components.
|
|
56
|
+
- 8c39412: The Table component now wraps the react-aria-components `Table` with a `ResizableTableContainer` only if any column has a width property set. This means that column widths can adapt to the content otherwise (if no width is explicitly set).
|
|
57
|
+
|
|
58
|
+
Affected components: Table
|
|
59
|
+
|
|
60
|
+
- 20131c5: Migrated to use the standard `backstage-cli package build` for CSS bundling instead of a custom build script.
|
|
61
|
+
- Updated dependencies
|
|
62
|
+
- @backstage/version-bridge@1.0.12-next.0
|
|
63
|
+
|
|
64
|
+
## 0.12.0-next.1
|
|
65
|
+
|
|
66
|
+
### Minor Changes
|
|
67
|
+
|
|
68
|
+
- 058ffd9: **BREAKING**: Removed `large` size variant from Button component as it was never implemented.
|
|
69
|
+
|
|
70
|
+
**Migration:**
|
|
71
|
+
|
|
72
|
+
```diff
|
|
73
|
+
- <Button size="large">Click me</Button>
|
|
74
|
+
+ <Button size="medium">Click me</Button>
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
**Affected components:** Button
|
|
78
|
+
|
|
79
|
+
- 110fec0: **BREAKING**: Removed link and tint color tokens, added new status foreground tokens, and improved Link component styling
|
|
80
|
+
|
|
81
|
+
The following color tokens have been removed:
|
|
82
|
+
|
|
83
|
+
- `--bui-fg-link` (and all related tokens: `-hover`, `-pressed`, `-disabled`)
|
|
84
|
+
- `--bui-fg-tint` (and all related tokens: `-hover`, `-pressed`, `-disabled`)
|
|
85
|
+
- `--bui-bg-tint` (and all related tokens: `-hover`, `-pressed`, `-disabled`)
|
|
86
|
+
- `--bui-border-tint` (and all related tokens)
|
|
87
|
+
|
|
88
|
+
**New Status Tokens:**
|
|
89
|
+
|
|
90
|
+
Added dedicated tokens for status colors that distinguish between usage on status backgrounds vs. standalone usage:
|
|
91
|
+
|
|
92
|
+
- `--bui-fg-danger-on-bg` / `--bui-fg-danger`
|
|
93
|
+
- `--bui-fg-warning-on-bg` / `--bui-fg-warning`
|
|
94
|
+
- `--bui-fg-success-on-bg` / `--bui-fg-success`
|
|
95
|
+
- `--bui-fg-info-on-bg` / `--bui-fg-info`
|
|
96
|
+
|
|
97
|
+
The `-on-bg` variants are designed for text on colored backgrounds, while the base variants are for standalone status indicators with improved visibility and contrast.
|
|
98
|
+
|
|
99
|
+
**Migration:**
|
|
100
|
+
|
|
101
|
+
For link colors, migrate to one of the following alternatives:
|
|
102
|
+
|
|
103
|
+
```diff
|
|
104
|
+
.custom-link {
|
|
105
|
+
- color: var(--bui-fg-link);
|
|
106
|
+
+ color: var(--bui-fg-info); /* For informational links */
|
|
107
|
+
+ /* or */
|
|
108
|
+
+ color: var(--bui-fg-primary); /* For standard text links */
|
|
109
|
+
}
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
For tint colors (backgrounds, foregrounds, borders), migrate to appropriate status or neutral colors:
|
|
113
|
+
|
|
114
|
+
```diff
|
|
115
|
+
.info-section {
|
|
116
|
+
- background: var(--bui-bg-tint);
|
|
117
|
+
+ background: var(--bui-bg-info); /* For informational sections */
|
|
118
|
+
+ /* or */
|
|
119
|
+
+ background: var(--bui-bg-neutral-on-surface-0); /* For neutral emphasis */
|
|
120
|
+
}
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
If you're using status foreground colors on colored backgrounds, update to the new `-on-bg` tokens:
|
|
124
|
+
|
|
125
|
+
```diff
|
|
126
|
+
.error-badge {
|
|
127
|
+
- color: var(--bui-fg-danger);
|
|
128
|
+
+ color: var(--bui-fg-danger-on-bg);
|
|
129
|
+
background: var(--bui-bg-danger);
|
|
130
|
+
}
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
**Affected components:** Link
|
|
134
|
+
|
|
135
|
+
### Patch Changes
|
|
136
|
+
|
|
137
|
+
- 4d1b7f4: Fixed CSS Module syntax to comply with Next.js 16 Turbopack validation by flattening nested dark theme selectors.
|
|
138
|
+
|
|
139
|
+
**Affected components:** Popover, Tooltip
|
|
140
|
+
|
|
141
|
+
- 2c219b9: Added `destructive` prop to Button for dangerous actions like delete or remove. Works with all variants (primary, secondary, tertiary).
|
|
142
|
+
|
|
143
|
+
**Affected components:** Button
|
|
144
|
+
|
|
145
|
+
- 5af9e14: Fixed `useDefinition` hook adding literal "undefined" class name when no className prop was passed.
|
|
146
|
+
- 74c5a76: Fixed Switch component disabled state styling to show `not-allowed` cursor and disabled text color.
|
|
147
|
+
|
|
148
|
+
**Affected components:** Switch
|
|
149
|
+
|
|
3
150
|
## 0.12.0-next.0
|
|
4
151
|
|
|
5
152
|
### Minor Changes
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\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\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Accordion_bui-
|
|
4
|
-
var styles = {"bui-Accordion":"Accordion_bui-
|
|
3
|
+
var css_248z = "/*\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\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Accordion_bui-Accordion__089e06ba75 {\n width: 100%;\n background-color: var(--bui-bg-neutral-1);\n border-radius: var(--bui-radius-3);\n padding: var(--bui-space-3);\n }\n\n .Accordion_bui-AccordionTrigger__089e06ba75 {\n all: unset;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n .Accordion_bui-AccordionTriggerButton__089e06ba75 {\n all: unset;\n width: 100%;\n color: var(--bui-fg-primary);\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n text-align: left;\n\n &:focus-visible {\n outline: none;\n transition: none;\n box-shadow: inset 0 0 0 2px var(--bui-ring);\n }\n\n &[data-disabled='true'] {\n background-color: transparent;\n color: var(--bui-fg-disabled);\n cursor: not-allowed;\n }\n }\n\n .Accordion_bui-AccordionTriggerTitle__089e06ba75 {\n font-size: var(--bui-font-size-4);\n font-weight: var(--bui-font-weight-bold);\n line-height: 140%;\n }\n\n .Accordion_bui-AccordionTriggerSubtitle__089e06ba75 {\n font-size: var(--bui-font-size-2);\n line-height: 140%;\n color: var(--bui-fg-secondary);\n }\n\n .Accordion_bui-AccordionTriggerIcon__089e06ba75 {\n transition: transform 150ms ease-out;\n flex-shrink: 0;\n width: 1rem;\n height: 1rem;\n\n .Accordion_bui-Accordion__089e06ba75[data-expanded='true'] > .Accordion_bui-AccordionTrigger__089e06ba75 & {\n transform: rotate(180deg);\n }\n }\n\n .Accordion_bui-AccordionPanel__089e06ba75 {\n .Accordion_bui-Accordion__089e06ba75[data-expanded='true'] > & {\n padding-top: var(--bui-space-1);\n }\n }\n\n .Accordion_bui-AccordionGroup__089e06ba75 {\n display: flex;\n flex-direction: column;\n gap: var(--bui-space-3);\n width: 100%;\n }\n}\n";
|
|
4
|
+
var styles = {"bui-Accordion":"Accordion_bui-Accordion__089e06ba75","bui-AccordionTrigger":"Accordion_bui-AccordionTrigger__089e06ba75","bui-AccordionTriggerButton":"Accordion_bui-AccordionTriggerButton__089e06ba75","bui-AccordionTriggerTitle":"Accordion_bui-AccordionTriggerTitle__089e06ba75","bui-AccordionTriggerSubtitle":"Accordion_bui-AccordionTriggerSubtitle__089e06ba75","bui-AccordionTriggerIcon":"Accordion_bui-AccordionTriggerIcon__089e06ba75","bui-AccordionPanel":"Accordion_bui-AccordionPanel__089e06ba75","bui-AccordionGroup":"Accordion_bui-AccordionGroup__089e06ba75"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\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\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Alert_bui-
|
|
4
|
-
var styles = {"bui-Alert":"Alert_bui-
|
|
3
|
+
var css_248z = "/*\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\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Alert_bui-Alert__aec8196e6c {\n --alert-bg: var(--bui-bg-neutral-1);\n --alert-fg: var(--bui-fg-primary);\n\n display: flex;\n gap: var(--bui-space-6);\n padding: var(--bui-space-3) var(--bui-space-3);\n border-radius: var(--bui-radius-3);\n font-family: var(--bui-font-regular);\n font-size: var(--bui-font-size-3);\n line-height: 1.5;\n\n /* Apply variables */\n background-color: var(--alert-bg);\n color: var(--alert-fg);\n }\n\n .Alert_bui-Alert__aec8196e6c[data-status='info'] {\n --alert-bg: var(--bui-bg-info);\n --alert-fg: var(--bui-fg-info-on-bg);\n }\n\n .Alert_bui-Alert__aec8196e6c[data-status='success'] {\n --alert-bg: var(--bui-bg-success);\n --alert-fg: var(--bui-fg-success-on-bg);\n }\n\n .Alert_bui-Alert__aec8196e6c[data-status='warning'] {\n --alert-bg: var(--bui-bg-warning);\n --alert-fg: var(--bui-fg-warning-on-bg);\n }\n\n .Alert_bui-Alert__aec8196e6c[data-status='danger'] {\n --alert-bg: var(--bui-bg-danger);\n --alert-fg: var(--bui-fg-danger-on-bg);\n }\n\n .Alert_bui-AlertIcon__aec8196e6c {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n width: 1rem;\n height: 1rem;\n }\n\n /* Add slight top margin when there's a description for better alignment */\n .Alert_bui-Alert__aec8196e6c[data-has-description='true'] & {\n margin-top: 0.125rem;\n }\n }\n\n .Alert_bui-AlertContentWrapper__aec8196e6c {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n gap: var(--bui-space-3);\n flex: 1;\n min-width: 0;\n\n /* Center align when there's no description */\n .Alert_bui-Alert__aec8196e6c[data-has-description='false'] & {\n align-items: center;\n }\n }\n\n .Alert_bui-AlertContent__aec8196e6c {\n flex: 1;\n min-width: 0;\n word-wrap: break-word;\n }\n\n .Alert_bui-AlertTitle__aec8196e6c {\n font-weight: var(--bui-font-weight-bold);\n font-size: var(--bui-font-size-3);\n }\n\n .Alert_bui-AlertDescription__aec8196e6c {\n font-size: var(--bui-font-size-2);\n opacity: 0.9;\n }\n\n .Alert_bui-AlertSpinner__aec8196e6c {\n display: flex;\n\n & svg {\n width: 1rem;\n height: 1rem;\n animation: Alert_bui-spin__aec8196e6c 1s linear infinite;\n }\n }\n\n .Alert_bui-AlertActions__aec8196e6c {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n gap: var(--bui-space-2);\n margin-left: auto;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .Alert_bui-AlertSpinner__aec8196e6c svg {\n animation: none;\n }\n }\n\n @keyframes Alert_bui-spin__aec8196e6c {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n }\n}\n";
|
|
4
|
+
var styles = {"bui-Alert":"Alert_bui-Alert__aec8196e6c","bui-AlertIcon":"Alert_bui-AlertIcon__aec8196e6c","bui-AlertContentWrapper":"Alert_bui-AlertContentWrapper__aec8196e6c","bui-AlertContent":"Alert_bui-AlertContent__aec8196e6c","bui-AlertTitle":"Alert_bui-AlertTitle__aec8196e6c","bui-AlertDescription":"Alert_bui-AlertDescription__aec8196e6c","bui-AlertSpinner":"Alert_bui-AlertSpinner__aec8196e6c","bui-spin":"Alert_bui-spin__aec8196e6c","bui-AlertActions":"Alert_bui-AlertActions__aec8196e6c"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\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\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Avatar_bui-
|
|
4
|
-
var styles = {"bui-AvatarRoot":"Avatar_bui-
|
|
3
|
+
var css_248z = "/*\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\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Avatar_bui-AvatarRoot__00c2bf8db3 {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n vertical-align: middle;\n border-radius: 100%;\n user-select: none;\n font-weight: 500;\n color: var(--bui-fg-primary);\n background-color: var(--bui-bg-neutral-2);\n font-size: 1rem;\n line-height: 1;\n overflow: hidden;\n height: 2rem;\n width: 2rem;\n }\n\n .Avatar_bui-AvatarRoot__00c2bf8db3[data-size='x-small'] {\n height: 1.25rem;\n width: 1.25rem;\n }\n\n .Avatar_bui-AvatarRoot__00c2bf8db3[data-size='small'] {\n height: 1.5rem;\n width: 1.5rem;\n }\n\n .Avatar_bui-AvatarRoot__00c2bf8db3[data-size='medium'] {\n height: 2rem;\n width: 2rem;\n }\n\n .Avatar_bui-AvatarRoot__00c2bf8db3[data-size='large'] {\n height: 2.5rem;\n width: 2.5rem;\n }\n\n .Avatar_bui-AvatarRoot__00c2bf8db3[data-size='x-large'] {\n height: 3rem;\n width: 3rem;\n }\n\n .Avatar_bui-AvatarImage__00c2bf8db3 {\n object-fit: cover;\n height: 100%;\n width: 100%;\n display: block;\n }\n\n .Avatar_bui-AvatarFallback__00c2bf8db3 {\n align-items: center;\n display: flex;\n justify-content: center;\n height: 100%;\n width: 100%;\n font-size: var(--bui-font-size-3);\n font-weight: var(--bui-font-weight-regular);\n box-shadow: inset 0 0 0 1px var(--bui-border);\n border-radius: var(--bui-radius-full);\n }\n}\n";
|
|
4
|
+
var styles = {"bui-AvatarRoot":"Avatar_bui-AvatarRoot__00c2bf8db3","bui-AvatarImage":"Avatar_bui-AvatarImage__00c2bf8db3","bui-AvatarFallback":"Avatar_bui-AvatarFallback__00c2bf8db3"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\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\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Box_bui-
|
|
4
|
-
var styles = {"bui-Box":"Box_bui-
|
|
3
|
+
var css_248z = "/*\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\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Box_bui-Box__e31c8ab801 {\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-regular);\n color: var(--bui-fg-primary);\n }\n\n .Box_bui-Box__e31c8ab801[data-surface='0'] {\n background-color: var(--bui-bg-neutral-0);\n }\n\n .Box_bui-Box__e31c8ab801[data-surface='1'] {\n background-color: var(--bui-bg-neutral-1);\n }\n\n .Box_bui-Box__e31c8ab801[data-surface='2'] {\n background-color: var(--bui-bg-neutral-2);\n }\n\n .Box_bui-Box__e31c8ab801[data-surface='3'] {\n background-color: var(--bui-bg-neutral-3);\n }\n\n .Box_bui-Box__e31c8ab801[data-surface='danger'] {\n background-color: var(--bui-bg-danger);\n }\n\n .Box_bui-Box__e31c8ab801[data-surface='warning'] {\n background-color: var(--bui-bg-warning);\n }\n\n .Box_bui-Box__e31c8ab801[data-surface='success'] {\n background-color: var(--bui-bg-success);\n }\n}\n";
|
|
4
|
+
var styles = {"bui-Box":"Box_bui-Box__e31c8ab801"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\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\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Button_bui-
|
|
4
|
-
var styles = {"bui-Button":"Button_bui-
|
|
3
|
+
var css_248z = "/*\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\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Button_bui-Button__0181170b3d {\n --loading-duration: 200ms;\n --bg: transparent;\n --bg-hover: transparent;\n --bg-active: transparent;\n --fg: inherit;\n\n position: relative;\n display: inline-flex;\n border: none;\n user-select: none;\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-bold);\n padding: 0;\n cursor: pointer;\n border-radius: var(--bui-radius-2);\n flex-shrink: 0;\n transition: background-color var(--loading-duration) ease-out,\n box-shadow var(--loading-duration) ease-out;\n\n /* Apply variables */\n color: var(--fg);\n background-color: var(--bg);\n\n &:hover {\n background-color: var(--bg-hover);\n transition: background-color 150ms ease;\n }\n\n &:active {\n background-color: var(--bg-active);\n }\n\n &[data-disabled='true'] {\n cursor: not-allowed;\n }\n\n &[data-loading='true'] {\n cursor: wait;\n }\n }\n\n .Button_bui-Button__0181170b3d[data-variant='primary'] {\n --bg: var(--bui-bg-solid);\n --bg-hover: var(--bui-bg-solid-hover);\n --bg-active: var(--bui-bg-solid-pressed);\n --fg: var(--bui-fg-solid);\n\n &[data-disabled='true'],\n &[data-loading='true'] {\n --bg: var(--bui-bg-solid-disabled);\n --bg-hover: var(--bui-bg-solid-disabled);\n --bg-active: var(--bui-bg-solid-disabled);\n --fg: var(--bui-fg-solid-disabled);\n }\n\n &:focus-visible {\n outline: 2px solid var(--bui-ring);\n outline-offset: 2px;\n }\n }\n\n .Button_bui-Button__0181170b3d[data-variant='primary'][data-destructive='true'] {\n /* Custom properties matching future token names (without bui- prefix) */\n --bg-solid-danger: #dc2626;\n --bg-solid-danger-hover: #b91c1c;\n --bg-solid-danger-pressed: #991b1b;\n --bg-solid-danger-disabled: #fca5a5;\n --fg-solid-danger: var(--bui-white);\n\n [data-theme-mode='dark'] & {\n --bg-solid-danger: #ef4444;\n --bg-solid-danger-hover: #dc2626;\n --bg-solid-danger-pressed: #b91c1c;\n --bg-solid-danger-disabled: #7f1d1d;\n }\n\n --bg: var(--bg-solid-danger);\n --bg-hover: var(--bg-solid-danger-hover);\n --bg-active: var(--bg-solid-danger-pressed);\n --fg: var(--fg-solid-danger);\n\n &[data-disabled='true'],\n &[data-loading='true'] {\n --bg: var(--bg-solid-danger-disabled);\n --bg-hover: var(--bg-solid-danger-disabled);\n --bg-active: var(--bg-solid-danger-disabled);\n }\n\n &:focus-visible {\n outline: 2px solid var(--bui-border-danger);\n outline-offset: 2px;\n }\n }\n\n .Button_bui-Button__0181170b3d[data-variant='secondary'] {\n --bg: var(--bui-bg-neutral-1);\n --bg-hover: var(--bui-bg-neutral-1-hover);\n --bg-active: var(--bui-bg-neutral-1-pressed);\n --fg: var(--bui-fg-primary);\n\n &[data-on-surface='1'] {\n --bg: var(--bui-bg-neutral-2);\n --bg-hover: var(--bui-bg-neutral-2-hover);\n --bg-active: var(--bui-bg-neutral-2-pressed);\n }\n\n &[data-on-surface='2'] {\n --bg: var(--bui-bg-neutral-3);\n --bg-hover: var(--bui-bg-neutral-3-hover);\n --bg-active: var(--bui-bg-neutral-3-pressed);\n }\n\n &[data-on-surface='3'] {\n --bg: var(--bui-bg-neutral-4);\n --bg-hover: var(--bui-bg-neutral-4-hover);\n --bg-active: var(--bui-bg-neutral-4-pressed);\n }\n\n &[data-disabled='true'],\n &[data-loading='true'] {\n --bg-hover: var(--bg);\n --bg-active: var(--bg);\n --fg: var(--bui-fg-disabled);\n }\n\n &:focus-visible {\n outline: none;\n transition: none;\n box-shadow: inset 0 0 0 2px var(--bui-ring);\n }\n }\n\n .Button_bui-Button__0181170b3d[data-variant='secondary'][data-destructive='true'] {\n /* Custom properties for hover/active states (no tokens exist yet) */\n --bg-danger-hover: #fecaca;\n --bg-danger-pressed: #fca5a5;\n\n [data-theme-mode='dark'] & {\n --bg-danger-hover: #450a0a;\n --bg-danger-pressed: #7f1d1d;\n }\n\n --bg: var(--bui-bg-danger);\n --bg-hover: var(--bg-danger-hover);\n --bg-active: var(--bg-danger-pressed);\n --fg: var(--bui-fg-danger);\n\n &[data-disabled='true'],\n &[data-loading='true'] {\n --bg-hover: var(--bg);\n --bg-active: var(--bg);\n --fg: var(--bui-fg-disabled);\n }\n\n &:focus-visible {\n box-shadow: inset 0 0 0 2px var(--bui-border-danger);\n }\n }\n\n .Button_bui-Button__0181170b3d[data-variant='tertiary'] {\n --bg-hover: var(--bui-bg-neutral-1-hover);\n --bg-active: var(--bui-bg-neutral-1-pressed);\n --fg: var(--bui-fg-primary);\n\n &[data-on-surface='1'] {\n --bg-hover: var(--bui-bg-neutral-2-hover);\n --bg-active: var(--bui-bg-neutral-2-pressed);\n }\n\n &[data-on-surface='2'] {\n --bg-hover: var(--bui-bg-neutral-3-hover);\n --bg-active: var(--bui-bg-neutral-3-pressed);\n }\n\n &[data-on-surface='3'] {\n --bg-hover: var(--bui-bg-neutral-4-hover);\n --bg-active: var(--bui-bg-neutral-4-pressed);\n }\n\n &[data-disabled='true'],\n &[data-loading='true'] {\n --bg-hover: var(--bg);\n --bg-active: var(--bg);\n --fg: var(--bui-fg-disabled);\n }\n\n &:focus-visible {\n outline: none;\n transition: none;\n box-shadow: inset 0 0 0 2px var(--bui-ring);\n }\n }\n\n .Button_bui-Button__0181170b3d[data-variant='tertiary'][data-destructive='true'] {\n /* Custom properties for hover/active states (no tokens exist yet) */\n --bg-danger-hover: #fecaca;\n --bg-danger-pressed: #fca5a5;\n\n [data-theme-mode='dark'] & {\n --bg-danger-hover: #450a0a;\n --bg-danger-pressed: #7f1d1d;\n }\n\n --bg-hover: var(--bui-bg-danger);\n --bg-active: var(--bg-danger-pressed);\n --fg: var(--bui-fg-danger);\n\n &[data-disabled='true'],\n &[data-loading='true'] {\n --bg-hover: var(--bg);\n --bg-active: var(--bg);\n --fg: var(--bui-fg-disabled);\n }\n\n &:focus-visible {\n box-shadow: inset 0 0 0 2px var(--bui-border-danger);\n }\n }\n\n .Button_bui-Button__0181170b3d[data-size='small'] {\n font-size: var(--bui-font-size-3);\n padding: 0 var(--bui-space-2);\n height: 2rem;\n\n svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .Button_bui-Button__0181170b3d[data-size='medium'] {\n font-size: var(--bui-font-size-4);\n padding: 0 var(--bui-space-3);\n height: 2.5rem;\n\n svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n }\n\n .Button_bui-ButtonContent__0181170b3d {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--bui-space-1_5);\n height: 100%;\n width: 100%;\n transition: opacity var(--loading-duration) ease-out;\n\n .Button_bui-Button__0181170b3d[data-loading='true'] & {\n opacity: 0;\n }\n }\n\n .Button_bui-ButtonSpinner__0181170b3d {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: flex;\n opacity: 0;\n transition: opacity var(--loading-duration) ease-in;\n\n .Button_bui-Button__0181170b3d[data-loading='true'] & {\n opacity: 1;\n }\n\n & svg {\n animation: Button_bui-spin__0181170b3d 1s linear infinite;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .Button_bui-Button__0181170b3d {\n transition-duration: 50ms;\n }\n\n .Button_bui-ButtonContent__0181170b3d {\n transition-duration: 50ms;\n }\n\n .Button_bui-ButtonSpinner__0181170b3d {\n transition-duration: 50ms;\n }\n\n .Button_bui-ButtonSpinner__0181170b3d svg {\n animation: none;\n }\n }\n\n @keyframes Button_bui-spin__0181170b3d {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n }\n}\n";
|
|
4
|
+
var styles = {"bui-Button":"Button_bui-Button__0181170b3d","bui-ButtonContent":"Button_bui-ButtonContent__0181170b3d","bui-ButtonSpinner":"Button_bui-ButtonSpinner__0181170b3d","bui-spin":"Button_bui-spin__0181170b3d"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -17,6 +17,7 @@ const ButtonDefinition = defineComponent()({
|
|
|
17
17
|
propDefs: {
|
|
18
18
|
size: { dataAttribute: true, default: "small" },
|
|
19
19
|
variant: { dataAttribute: true, default: "primary" },
|
|
20
|
+
destructive: { dataAttribute: true },
|
|
20
21
|
loading: { dataAttribute: true },
|
|
21
22
|
iconStart: {},
|
|
22
23
|
iconEnd: {},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Button/definition.ts"],"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 { defineComponent } from '../../hooks/useDefinition';\nimport type { ButtonOwnProps } from './types';\nimport styles from './Button.module.css';\n\n/**\n * Component definition for Button\n * @public\n */\nexport const ButtonDefinition = defineComponent<ButtonOwnProps>()({\n styles,\n classNames: {\n root: 'bui-Button',\n content: 'bui-ButtonContent',\n spinner: 'bui-ButtonSpinner',\n },\n surface: 'leaf',\n propDefs: {\n size: { dataAttribute: true, default: 'small' },\n variant: { dataAttribute: true, default: 'primary' },\n loading: { dataAttribute: true },\n iconStart: {},\n iconEnd: {},\n onSurface: {},\n children: {},\n className: {},\n style: {},\n },\n});\n"],"names":[],"mappings":";;;;;;;;AAwBO,MAAM,gBAAA,GAAmB,iBAAgC,CAAE;AAAA,EAChE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,YAAA;AAAA,IACN,OAAA,EAAS,mBAAA;AAAA,IACT,OAAA,EAAS;AAAA,GACX;AAAA,EACA,OAAA,EAAS,MAAA;AAAA,EACT,QAAA,EAAU;AAAA,IACR,IAAA,EAAM,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,OAAA,EAAQ;AAAA,IAC9C,OAAA,EAAS,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,SAAA,EAAU;AAAA,IACnD,OAAA,EAAS,EAAE,aAAA,EAAe,IAAA,EAAK;AAAA,IAC/B,WAAW,EAAC;AAAA,IACZ,SAAS,EAAC;AAAA,IACV,WAAW,EAAC;AAAA,IACZ,UAAU,EAAC;AAAA,IACX,WAAW,EAAC;AAAA,IACZ,OAAO;AAAC;AAEZ,CAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Button/definition.ts"],"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 { defineComponent } from '../../hooks/useDefinition';\nimport type { ButtonOwnProps } from './types';\nimport styles from './Button.module.css';\n\n/**\n * Component definition for Button\n * @public\n */\nexport const ButtonDefinition = defineComponent<ButtonOwnProps>()({\n styles,\n classNames: {\n root: 'bui-Button',\n content: 'bui-ButtonContent',\n spinner: 'bui-ButtonSpinner',\n },\n surface: 'leaf',\n propDefs: {\n size: { dataAttribute: true, default: 'small' },\n variant: { dataAttribute: true, default: 'primary' },\n destructive: { dataAttribute: true },\n loading: { dataAttribute: true },\n iconStart: {},\n iconEnd: {},\n onSurface: {},\n children: {},\n className: {},\n style: {},\n },\n});\n"],"names":[],"mappings":";;;;;;;;AAwBO,MAAM,gBAAA,GAAmB,iBAAgC,CAAE;AAAA,EAChE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,YAAA;AAAA,IACN,OAAA,EAAS,mBAAA;AAAA,IACT,OAAA,EAAS;AAAA,GACX;AAAA,EACA,OAAA,EAAS,MAAA;AAAA,EACT,QAAA,EAAU;AAAA,IACR,IAAA,EAAM,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,OAAA,EAAQ;AAAA,IAC9C,OAAA,EAAS,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,SAAA,EAAU;AAAA,IACnD,WAAA,EAAa,EAAE,aAAA,EAAe,IAAA,EAAK;AAAA,IACnC,OAAA,EAAS,EAAE,aAAA,EAAe,IAAA,EAAK;AAAA,IAC/B,WAAW,EAAC;AAAA,IACZ,SAAS,EAAC;AAAA,IACV,WAAW,EAAC;AAAA,IACZ,UAAU,EAAC;AAAA,IACX,WAAW,EAAC;AAAA,IACZ,OAAO;AAAC;AAEZ,CAAC;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\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\n@layer tokens, base, components, utilities;\n\n@layer components {\n .ButtonIcon_bui-
|
|
4
|
-
var styles = {"bui-ButtonIcon":"ButtonIcon_bui-
|
|
3
|
+
var css_248z = "/*\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\n@layer tokens, base, components, utilities;\n\n@layer components {\n .ButtonIcon_bui-ButtonIcon__e74bc07c5d {\n --loading-duration: 200ms;\n --bg: transparent;\n --bg-hover: transparent;\n --bg-active: transparent;\n --fg: inherit;\n\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: none;\n user-select: none;\n padding: 0;\n cursor: pointer;\n border-radius: var(--bui-radius-2);\n flex-shrink: 0;\n transition: background-color var(--loading-duration) ease-out,\n box-shadow var(--loading-duration) ease-out;\n\n /* Apply variables */\n color: var(--fg);\n background-color: var(--bg);\n\n &:hover {\n background-color: var(--bg-hover);\n transition: background-color 150ms ease;\n }\n\n &:active {\n background-color: var(--bg-active);\n }\n\n &[data-disabled='true'] {\n cursor: not-allowed;\n }\n\n &[data-loading='true'] {\n cursor: wait;\n }\n }\n\n .ButtonIcon_bui-ButtonIcon__e74bc07c5d[data-variant='primary'] {\n --bg: var(--bui-bg-solid);\n --bg-hover: var(--bui-bg-solid-hover);\n --bg-active: var(--bui-bg-solid-pressed);\n --fg: var(--bui-fg-solid);\n\n &[data-disabled='true'],\n &[data-loading='true'] {\n --bg: var(--bui-bg-solid-disabled);\n --bg-hover: var(--bui-bg-solid-disabled);\n --bg-active: var(--bui-bg-solid-disabled);\n --fg: var(--bui-fg-solid-disabled);\n }\n\n &:focus-visible {\n outline: 2px solid var(--bui-ring);\n outline-offset: 2px;\n }\n }\n\n .ButtonIcon_bui-ButtonIcon__e74bc07c5d[data-variant='secondary'] {\n --bg: var(--bui-bg-neutral-1);\n --bg-hover: var(--bui-bg-neutral-1-hover);\n --bg-active: var(--bui-bg-neutral-1-pressed);\n --fg: var(--bui-fg-primary);\n\n &[data-on-surface='1'] {\n --bg: var(--bui-bg-neutral-2);\n --bg-hover: var(--bui-bg-neutral-2-hover);\n --bg-active: var(--bui-bg-neutral-2-pressed);\n }\n\n &[data-on-surface='2'] {\n --bg: var(--bui-bg-neutral-3);\n --bg-hover: var(--bui-bg-neutral-3-hover);\n --bg-active: var(--bui-bg-neutral-3-pressed);\n }\n\n &[data-on-surface='3'] {\n --bg: var(--bui-bg-neutral-4);\n --bg-hover: var(--bui-bg-neutral-4-hover);\n --bg-active: var(--bui-bg-neutral-4-pressed);\n }\n\n &[data-disabled='true'],\n &[data-loading='true'] {\n --bg-hover: var(--bg);\n --bg-active: var(--bg);\n --fg: var(--bui-fg-disabled);\n }\n\n &:focus-visible {\n outline: none;\n transition: none;\n box-shadow: inset 0 0 0 2px var(--bui-ring);\n }\n }\n\n .ButtonIcon_bui-ButtonIcon__e74bc07c5d[data-variant='tertiary'] {\n --bg-hover: var(--bui-bg-neutral-1-hover);\n --bg-active: var(--bui-bg-neutral-1-pressed);\n --fg: var(--bui-fg-primary);\n\n &[data-on-surface='1'] {\n --bg-hover: var(--bui-bg-neutral-2-hover);\n --bg-active: var(--bui-bg-neutral-2-pressed);\n }\n\n &[data-on-surface='2'] {\n --bg-hover: var(--bui-bg-neutral-3-hover);\n --bg-active: var(--bui-bg-neutral-3-pressed);\n }\n\n &[data-on-surface='3'] {\n --bg-hover: var(--bui-bg-neutral-4-hover);\n --bg-active: var(--bui-bg-neutral-4-pressed);\n }\n\n &[data-disabled='true'],\n &[data-loading='true'] {\n --bg-hover: var(--bg);\n --bg-active: var(--bg);\n --fg: var(--bui-fg-disabled);\n }\n\n &:focus-visible {\n outline: none;\n transition: none;\n box-shadow: inset 0 0 0 2px var(--bui-ring);\n }\n }\n\n .ButtonIcon_bui-ButtonIcon__e74bc07c5d[data-size='small'] {\n width: 2rem;\n height: 2rem;\n\n svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .ButtonIcon_bui-ButtonIcon__e74bc07c5d[data-size='medium'] {\n width: 2.5rem;\n height: 2.5rem;\n\n svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n }\n\n .ButtonIcon_bui-ButtonIconContent__e74bc07c5d {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n transition: opacity var(--loading-duration) ease-out;\n\n .ButtonIcon_bui-ButtonIcon__e74bc07c5d[data-loading='true'] & {\n opacity: 0;\n }\n }\n\n .ButtonIcon_bui-ButtonIconSpinner__e74bc07c5d {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: flex;\n opacity: 0;\n transition: opacity var(--loading-duration) ease-in;\n\n .ButtonIcon_bui-ButtonIcon__e74bc07c5d[data-loading='true'] & {\n opacity: 1;\n }\n\n & svg {\n animation: ButtonIcon_bui-spin__e74bc07c5d 1s linear infinite;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ButtonIcon_bui-ButtonIcon__e74bc07c5d {\n transition-duration: 50ms;\n }\n\n .ButtonIcon_bui-ButtonIconContent__e74bc07c5d {\n transition-duration: 50ms;\n }\n\n .ButtonIcon_bui-ButtonIconSpinner__e74bc07c5d {\n transition-duration: 50ms;\n }\n\n .ButtonIcon_bui-ButtonIconSpinner__e74bc07c5d svg {\n animation: none;\n }\n }\n}\n";
|
|
4
|
+
var styles = {"bui-ButtonIcon":"ButtonIcon_bui-ButtonIcon__e74bc07c5d","bui-ButtonIconContent":"ButtonIcon_bui-ButtonIconContent__e74bc07c5d","bui-ButtonIconSpinner":"ButtonIcon_bui-ButtonIconSpinner__e74bc07c5d","bui-spin":"ButtonIcon_bui-spin__e74bc07c5d"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\n * Copyright 2026 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\n@layer tokens, base, components, utilities;\n\n@layer components {\n .ButtonLink_bui-
|
|
4
|
-
var styles = {"bui-ButtonLink":"ButtonLink_bui-
|
|
3
|
+
var css_248z = "/*\n * Copyright 2026 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\n@layer tokens, base, components, utilities;\n\n@layer components {\n .ButtonLink_bui-ButtonLink__372a7ccc7e {\n --bg: transparent;\n --bg-hover: transparent;\n --bg-active: transparent;\n --fg: inherit;\n\n position: relative;\n display: inline-flex;\n border: none;\n user-select: none;\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-bold);\n padding: 0;\n cursor: pointer;\n border-radius: var(--bui-radius-2);\n flex-shrink: 0;\n text-decoration: none;\n transition: background-color 200ms ease-out, box-shadow 200ms ease-out;\n\n /* Apply variables */\n color: var(--fg);\n background-color: var(--bg);\n\n &:hover {\n background-color: var(--bg-hover);\n transition: background-color 150ms ease;\n }\n\n &:active {\n background-color: var(--bg-active);\n }\n\n &[data-disabled='true'] {\n cursor: not-allowed;\n }\n }\n\n .ButtonLink_bui-ButtonLink__372a7ccc7e[data-variant='primary'] {\n --bg: var(--bui-bg-solid);\n --bg-hover: var(--bui-bg-solid-hover);\n --bg-active: var(--bui-bg-solid-pressed);\n --fg: var(--bui-fg-solid);\n\n &[data-disabled='true'] {\n --bg: var(--bui-bg-solid-disabled);\n --bg-hover: var(--bui-bg-solid-disabled);\n --bg-active: var(--bui-bg-solid-disabled);\n --fg: var(--bui-fg-solid-disabled);\n }\n\n &:focus-visible {\n outline: 2px solid var(--bui-ring);\n outline-offset: 2px;\n }\n }\n\n .ButtonLink_bui-ButtonLink__372a7ccc7e[data-variant='secondary'] {\n --bg: var(--bui-bg-neutral-1);\n --bg-hover: var(--bui-bg-neutral-1-hover);\n --bg-active: var(--bui-bg-neutral-1-pressed);\n --fg: var(--bui-fg-primary);\n\n &[data-on-surface='1'] {\n --bg: var(--bui-bg-neutral-2);\n --bg-hover: var(--bui-bg-neutral-2-hover);\n --bg-active: var(--bui-bg-neutral-2-pressed);\n }\n\n &[data-on-surface='2'] {\n --bg: var(--bui-bg-neutral-3);\n --bg-hover: var(--bui-bg-neutral-3-hover);\n --bg-active: var(--bui-bg-neutral-3-pressed);\n }\n\n &[data-on-surface='3'] {\n --bg: var(--bui-bg-neutral-4);\n --bg-hover: var(--bui-bg-neutral-4-hover);\n --bg-active: var(--bui-bg-neutral-4-pressed);\n }\n\n &[data-disabled='true'] {\n --bg-hover: var(--bg);\n --bg-active: var(--bg);\n --fg: var(--bui-fg-disabled);\n }\n\n &:focus-visible {\n outline: none;\n transition: none;\n box-shadow: inset 0 0 0 2px var(--bui-ring);\n }\n }\n\n .ButtonLink_bui-ButtonLink__372a7ccc7e[data-variant='tertiary'] {\n --bg-hover: var(--bui-bg-neutral-1-hover);\n --bg-active: var(--bui-bg-neutral-1-pressed);\n --fg: var(--bui-fg-primary);\n\n &[data-on-surface='1'] {\n --bg-hover: var(--bui-bg-neutral-2-hover);\n --bg-active: var(--bui-bg-neutral-2-pressed);\n }\n\n &[data-on-surface='2'] {\n --bg-hover: var(--bui-bg-neutral-3-hover);\n --bg-active: var(--bui-bg-neutral-3-pressed);\n }\n\n &[data-on-surface='3'] {\n --bg-hover: var(--bui-bg-neutral-4-hover);\n --bg-active: var(--bui-bg-neutral-4-pressed);\n }\n\n &[data-disabled='true'] {\n --bg-hover: var(--bg);\n --bg-active: var(--bg);\n --fg: var(--bui-fg-disabled);\n }\n\n &:focus-visible {\n outline: none;\n transition: none;\n box-shadow: inset 0 0 0 2px var(--bui-ring);\n }\n }\n\n .ButtonLink_bui-ButtonLink__372a7ccc7e[data-size='small'] {\n font-size: var(--bui-font-size-3);\n padding: 0 var(--bui-space-2);\n height: 2rem;\n\n svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .ButtonLink_bui-ButtonLink__372a7ccc7e[data-size='medium'] {\n font-size: var(--bui-font-size-4);\n padding: 0 var(--bui-space-3);\n height: 2.5rem;\n\n svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n }\n\n .ButtonLink_bui-ButtonLinkContent__372a7ccc7e {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--bui-space-1_5);\n height: 100%;\n width: 100%;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ButtonLink_bui-ButtonLink__372a7ccc7e {\n transition-duration: 50ms;\n }\n }\n}\n";
|
|
4
|
+
var styles = {"bui-ButtonLink":"ButtonLink_bui-ButtonLink__372a7ccc7e","bui-ButtonLinkContent":"ButtonLink_bui-ButtonLinkContent__372a7ccc7e"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\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\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Card_bui-
|
|
4
|
-
var styles = {"bui-Card":"Card_bui-
|
|
3
|
+
var css_248z = "/*\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\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Card_bui-Card__e4b6b3d7c7 {\n display: flex;\n flex-direction: column;\n gap: var(--bui-space-3);\n background-color: var(--bui-bg-neutral-1);\n border-radius: var(--bui-radius-3);\n padding-block: var(--bui-space-3);\n color: var(--bui-fg-primary);\n border: 1px solid var(--bui-border);\n overflow: hidden;\n min-height: 0;\n width: 100%;\n }\n\n .Card_bui-CardBody__e4b6b3d7c7 {\n flex: 1;\n min-height: 0;\n overflow: auto;\n padding-inline: var(--bui-space-3);\n }\n\n .Card_bui-CardHeader__e4b6b3d7c7 {\n padding-inline: var(--bui-space-3);\n }\n\n .Card_bui-CardFooter__e4b6b3d7c7 {\n padding-inline: var(--bui-space-3);\n }\n}\n";
|
|
4
|
+
var styles = {"bui-Card":"Card_bui-Card__e4b6b3d7c7","bui-CardBody":"Card_bui-CardBody__e4b6b3d7c7","bui-CardHeader":"Card_bui-CardHeader__e4b6b3d7c7","bui-CardFooter":"Card_bui-CardFooter__e4b6b3d7c7"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\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\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Checkbox_bui-
|
|
4
|
-
var styles = {"bui-Checkbox":"Checkbox_bui-
|
|
3
|
+
var css_248z = "/*\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\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Checkbox_bui-Checkbox__ec409ffa14 {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--bui-space-2);\n font-size: var(--bui-font-size-3);\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-regular);\n color: var(--bui-fg-primary);\n user-select: none;\n cursor: pointer;\n }\n\n .Checkbox_bui-Checkbox__ec409ffa14[data-disabled] {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n .Checkbox_bui-CheckboxIndicator__ec409ffa14 {\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1rem;\n height: 1rem;\n box-shadow: inset 0 0 0 1px var(--bui-border);\n border-radius: 2px;\n transition: background-color 0.2s ease-in-out;\n background-color: var(--bui-bg-neutral-1);\n padding: 0;\n flex-shrink: 0;\n color: transparent;\n\n .Checkbox_bui-Checkbox__ec409ffa14[data-focus-visible] & {\n transition: none;\n outline: 2px solid var(--bui-ring);\n outline-offset: 2px;\n }\n\n .Checkbox_bui-Checkbox__ec409ffa14[data-selected] & {\n background-color: var(--bui-bg-solid);\n box-shadow: none;\n color: var(--bui-fg-solid);\n }\n\n .Checkbox_bui-Checkbox__ec409ffa14[data-indeterminate] & {\n background-color: var(--bui-bg-neutral-1);\n box-shadow: inset 0 0 0 1px var(--bui-border);\n color: var(--bui-fg-primary);\n }\n\n .Checkbox_bui-Checkbox__ec409ffa14[data-hovered]:not([data-selected]):not([data-indeterminate])\n & {\n box-shadow: inset 0 0 0 1px var(--bui-border-hover);\n }\n\n @media (prefers-reduced-motion: reduce) {\n & {\n transition: none;\n }\n }\n }\n}\n";
|
|
4
|
+
var styles = {"bui-Checkbox":"Checkbox_bui-Checkbox__ec409ffa14","bui-CheckboxIndicator":"Checkbox_bui-CheckboxIndicator__ec409ffa14"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\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\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Dialog_bui-
|
|
4
|
-
var styles = {"bui-DialogOverlay":"Dialog_bui-
|
|
3
|
+
var css_248z = "/*\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\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Dialog_bui-DialogOverlay__9038fccb28 {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: color-mix(in srgb, var(--bui-bg-neutral-2) 80%, transparent);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n }\n\n [data-theme='dark'] .Dialog_bui-Dialog__9038fccb28 {\n background: rgba(0, 0, 0, 0.5);\n }\n\n .Dialog_bui-DialogOverlay__9038fccb28[data-entering] {\n animation: Dialog_fade-in__9038fccb28 200ms ease-out forwards;\n }\n\n .Dialog_bui-DialogOverlay__9038fccb28[data-exiting] {\n animation: Dialog_fade-out__9038fccb28 150ms ease-out forwards;\n }\n\n .Dialog_bui-Dialog__9038fccb28 {\n background: var(--bui-bg-neutral-1);\n border-radius: 0.5rem;\n border: 1px solid var(--bui-border);\n color: var(--bui-fg-primary);\n position: relative;\n width: min(var(--bui-dialog-min-width, 400px), calc(100vw - 3rem));\n max-width: calc(100vw - 3rem);\n height: min(var(--bui-dialog-min-height, auto), calc(100vh - 3rem));\n max-height: calc(100vh - 3rem);\n display: flex;\n flex-direction: column;\n outline: none;\n }\n\n /* Dialog entering animation */\n .Dialog_bui-DialogOverlay__9038fccb28[data-entering] .Dialog_bui-Dialog__9038fccb28 {\n animation: Dialog_dialog-enter__9038fccb28 150ms ease-out forwards;\n }\n\n /* Dialog exiting animation */\n .Dialog_bui-DialogOverlay__9038fccb28[data-exiting] .Dialog_bui-Dialog__9038fccb28 {\n animation: Dialog_dialog-exit__9038fccb28 150ms ease-out forwards;\n }\n\n .Dialog_bui-DialogHeader__9038fccb28 {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-inline: var(--bui-space-3);\n padding-block: var(--bui-space-2);\n border-bottom: 1px solid var(--bui-border);\n }\n\n .Dialog_bui-DialogHeaderTitle__9038fccb28 {\n font-size: var(--bui-font-size-3);\n font-weight: var(--bui-font-weight-bold);\n margin: 0;\n }\n\n .Dialog_bui-DialogFooter__9038fccb28 {\n display: flex;\n align-items: center;\n justify-content: end;\n gap: var(--bui-space-2);\n padding-inline: var(--bui-space-3);\n padding-block: var(--bui-space-3);\n border-top: 1px solid var(--bui-border);\n }\n\n .Dialog_bui-DialogBody__9038fccb28 {\n padding: var(--bui-space-3);\n flex: 1;\n overflow-y: auto;\n }\n\n /* Keyframe animations */\n @keyframes Dialog_fade-in__9038fccb28 {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n @keyframes Dialog_fade-out__9038fccb28 {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n\n @keyframes Dialog_dialog-enter__9038fccb28 {\n from {\n opacity: 0.5;\n transform: scale(0.8);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n @keyframes Dialog_dialog-exit__9038fccb28 {\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0;\n transform: scale(0.95);\n }\n }\n}\n";
|
|
4
|
+
var styles = {"bui-DialogOverlay":"Dialog_bui-DialogOverlay__9038fccb28","bui-Dialog":"Dialog_bui-Dialog__9038fccb28","fade-in":"Dialog_fade-in__9038fccb28","fade-out":"Dialog_fade-out__9038fccb28","dialog-enter":"Dialog_dialog-enter__9038fccb28","dialog-exit":"Dialog_dialog-exit__9038fccb28","bui-DialogHeader":"Dialog_bui-DialogHeader__9038fccb28","bui-DialogHeaderTitle":"Dialog_bui-DialogHeaderTitle__9038fccb28","bui-DialogFooter":"Dialog_bui-DialogFooter__9038fccb28","bui-DialogBody":"Dialog_bui-DialogBody__9038fccb28"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\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\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Flex_bui-
|
|
4
|
-
var styles = {"bui-Flex":"Flex_bui-
|
|
3
|
+
var css_248z = "/*\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\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Flex_bui-Flex__d21378eb09 {\n display: flex;\n\n /* This helps when using `truncate` on text inside a flex container */\n min-width: 0;\n }\n\n .Flex_bui-Flex__d21378eb09[data-surface='0'] {\n background-color: var(--bui-bg-neutral-0);\n }\n\n .Flex_bui-Flex__d21378eb09[data-surface='1'] {\n background-color: var(--bui-bg-neutral-1);\n }\n\n .Flex_bui-Flex__d21378eb09[data-surface='2'] {\n background-color: var(--bui-bg-neutral-2);\n }\n\n .Flex_bui-Flex__d21378eb09[data-surface='3'] {\n background-color: var(--bui-bg-neutral-3);\n }\n\n .Flex_bui-Flex__d21378eb09[data-surface='danger'] {\n background-color: var(--bui-bg-danger);\n }\n\n .Flex_bui-Flex__d21378eb09[data-surface='warning'] {\n background-color: var(--bui-bg-warning);\n }\n\n .Flex_bui-Flex__d21378eb09[data-surface='success'] {\n background-color: var(--bui-bg-success);\n }\n}\n";
|
|
4
|
+
var styles = {"bui-Flex":"Flex_bui-Flex__d21378eb09"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\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\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Grid_bui-
|
|
4
|
-
var styles = {"bui-Grid":"Grid_bui-
|
|
3
|
+
var css_248z = "/*\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\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Grid_bui-Grid__9f67130f09 {\n display: grid;\n }\n\n .Grid_bui-Grid__9f67130f09[data-surface='0'],\n .Grid_bui-GridItem__9f67130f09[data-surface='0'] {\n background-color: var(--bui-bg-neutral-0);\n }\n\n .Grid_bui-Grid__9f67130f09[data-surface='1'],\n .Grid_bui-GridItem__9f67130f09[data-surface='1'] {\n background-color: var(--bui-bg-neutral-1);\n }\n\n .Grid_bui-Grid__9f67130f09[data-surface='2'],\n .Grid_bui-GridItem__9f67130f09[data-surface='2'] {\n background-color: var(--bui-bg-neutral-2);\n }\n\n .Grid_bui-Grid__9f67130f09[data-surface='3'],\n .Grid_bui-GridItem__9f67130f09[data-surface='3'] {\n background-color: var(--bui-bg-neutral-3);\n }\n\n .Grid_bui-Grid__9f67130f09[data-surface='danger'],\n .Grid_bui-GridItem__9f67130f09[data-surface='danger'] {\n background-color: var(--bui-bg-danger);\n }\n\n .Grid_bui-Grid__9f67130f09[data-surface='warning'],\n .Grid_bui-GridItem__9f67130f09[data-surface='warning'] {\n background-color: var(--bui-bg-warning);\n }\n\n .Grid_bui-Grid__9f67130f09[data-surface='success'],\n .Grid_bui-GridItem__9f67130f09[data-surface='success'] {\n background-color: var(--bui-bg-success);\n }\n}\n";
|
|
4
|
+
var styles = {"bui-Grid":"Grid_bui-Grid__9f67130f09","bui-GridItem":"Grid_bui-GridItem__9f67130f09"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\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\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Header_bui-
|
|
4
|
-
var styles = {"bui-HeaderToolbar":"Header_bui-
|
|
3
|
+
var css_248z = "/*\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\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Header_bui-HeaderToolbar__844bf781e8 {\n margin-bottom: var(--bui-space-6);\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0px;\n right: 0px;\n height: 16px;\n background-color: var(--bui-bg-neutral-0);\n z-index: 0;\n }\n\n &[data-has-tabs='true'] {\n margin-bottom: 0;\n }\n }\n\n .Header_bui-HeaderToolbarWrapper__844bf781e8 {\n position: relative;\n z-index: 1;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n background-color: var(--bui-bg-neutral-1);\n padding-inline: var(--bui-space-5);\n border-bottom: 1px solid var(--bui-border);\n color: var(--bui-fg-primary);\n height: 52px;\n }\n\n .Header_bui-HeaderToolbarContent__844bf781e8 {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--bui-space-2);\n }\n\n .Header_bui-HeaderToolbarName__844bf781e8 {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--bui-space-2);\n font-size: var(--bui-font-size-3);\n font-weight: var(--bui-font-weight-regular);\n flex-shrink: 0;\n }\n\n .Header_bui-HeaderToolbarIcon__844bf781e8 {\n width: 16px;\n height: 16px;\n color: var(--bui-fg-primary);\n\n & svg {\n width: 100%;\n height: 100%;\n }\n }\n\n .Header_bui-HeaderToolbarControls__844bf781e8 {\n position: absolute;\n right: var(--bui-space-5);\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--bui-space-2);\n }\n\n .Header_bui-HeaderTabsWrapper__844bf781e8 {\n margin-bottom: var(--bui-space-4);\n padding-inline: var(--bui-space-3);\n border-bottom: 1px solid var(--bui-border);\n background-color: var(--bui-bg-neutral-1);\n }\n}\n";
|
|
4
|
+
var styles = {"bui-HeaderToolbar":"Header_bui-HeaderToolbar__844bf781e8","bui-HeaderToolbarWrapper":"Header_bui-HeaderToolbarWrapper__844bf781e8","bui-HeaderToolbarContent":"Header_bui-HeaderToolbarContent__844bf781e8","bui-HeaderToolbarName":"Header_bui-HeaderToolbarName__844bf781e8","bui-HeaderToolbarIcon":"Header_bui-HeaderToolbarIcon__844bf781e8","bui-HeaderToolbarControls":"Header_bui-HeaderToolbarControls__844bf781e8","bui-HeaderTabsWrapper":"Header_bui-HeaderTabsWrapper__844bf781e8"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderPage.esm.js","sources":["../../../src/components/HeaderPage/HeaderPage.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 type { HeaderPageProps } from './types';\nimport { Text } from '../Text';\nimport { RiArrowRightSLine } from '@remixicon/react';\nimport { Tabs, TabList, Tab } from '../Tabs';\nimport { useStyles } from '../../hooks/useStyles';\nimport { HeaderPageDefinition } from './definition';\nimport { Container } from '../Container';\nimport { Link } from '../Link';\nimport { Fragment } from 'react/jsx-runtime';\nimport styles from './HeaderPage.module.css';\nimport clsx from 'clsx';\n\n/**\n * A component that renders a header page.\n *\n * @public\n */\nexport const HeaderPage = (props: HeaderPageProps) => {\n const { classNames, cleanedProps } = useStyles(HeaderPageDefinition, props);\n const { className, title, tabs, customActions, breadcrumbs } = cleanedProps;\n\n return (\n <Container\n className={clsx(classNames.root, styles[classNames.root], className)}\n >\n <div className={clsx(classNames.content, styles[classNames.content])}>\n <div\n className={clsx(\n classNames.breadcrumbs,\n styles[classNames.breadcrumbs],\n )}\n >\n {breadcrumbs &&\n breadcrumbs.map(breadcrumb => (\n <Fragment key={breadcrumb.label}>\n <Link\n href={breadcrumb.href}\n variant=\"title-small\"\n weight=\"bold\"\n color=\"secondary\"\n truncate\n style={{ maxWidth: '240px' }}\n >\n {breadcrumb.label}\n </Link>\n <RiArrowRightSLine size={16} color=\"var(--bui-fg-secondary)\" />\n </Fragment>\n ))}\n <Text variant=\"title-small\" weight=\"bold\" as=\"h2\">\n {title}\n </Text>\n </div>\n <div className={clsx(classNames.controls, styles[classNames.controls])}>\n {customActions}\n </div>\n </div>\n {tabs && (\n <div\n className={clsx(\n classNames.tabsWrapper,\n styles[classNames.tabsWrapper],\n )}\n >\n <Tabs>\n <TabList>\n {tabs.map(tab => (\n <Tab\n key={tab.id}\n id={tab.id}\n href={tab.href}\n matchStrategy={tab.matchStrategy}\n >\n {tab.label}\n </Tab>\n ))}\n </TabList>\n </Tabs>\n </div>\n )}\n </Container>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAiCO,MAAM,UAAA,GAAa,CAAC,KAAA,KAA2B;AACpD,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,sBAAsB,KAAK,CAAA;AAC1E,EAAA,MAAM,EAAE,SAAA,EAAW,KAAA,EAAO,IAAA,EAAM,aAAA,EAAe,aAAY,GAAI,YAAA;AAE/D,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAEnE,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAW,IAAA,CAAK,UAAA,CAAW,SAAS,MAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA,EACjE,QAAA,EAAA;AAAA,0BAAA,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,IAAA;AAAA,gBACT,UAAA,CAAW,WAAA;AAAA,gBACX,MAAA,CAAO,WAAW,WAAW;AAAA,eAC/B;AAAA,cAEC,QAAA,EAAA;AAAA,gBAAA,WAAA,IACC,WAAA,CAAY,GAAA,CAAI,CAAA,UAAA,qBACd,IAAA,CAAC,QAAA,EAAA,EACC,QAAA,EAAA;AAAA,kCAAA,GAAA;AAAA,oBAAC,IAAA;AAAA,oBAAA;AAAA,sBACC,MAAM,UAAA,CAAW,IAAA;AAAA,sBACjB,OAAA,EAAQ,aAAA;AAAA,sBACR,MAAA,EAAO,MAAA;AAAA,sBACP,KAAA,EAAM,WAAA;AAAA,sBACN,QAAA,EAAQ,IAAA;AAAA,sBACR,KAAA,EAAO,EAAE,QAAA,EAAU,OAAA,EAAQ;AAAA,
|
|
1
|
+
{"version":3,"file":"HeaderPage.esm.js","sources":["../../../src/components/HeaderPage/HeaderPage.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 type { HeaderPageProps } from './types';\nimport { Text } from '../Text';\nimport { RiArrowRightSLine } from '@remixicon/react';\nimport { Tabs, TabList, Tab } from '../Tabs';\nimport { useStyles } from '../../hooks/useStyles';\nimport { HeaderPageDefinition } from './definition';\nimport { Container } from '../Container';\nimport { Link } from '../Link';\nimport { Fragment } from 'react/jsx-runtime';\nimport styles from './HeaderPage.module.css';\nimport clsx from 'clsx';\n\n/**\n * A component that renders a header page.\n *\n * @public\n */\nexport const HeaderPage = (props: HeaderPageProps) => {\n const { classNames, cleanedProps } = useStyles(HeaderPageDefinition, props);\n const { className, title, tabs, customActions, breadcrumbs } = cleanedProps;\n\n return (\n <Container\n className={clsx(classNames.root, styles[classNames.root], className)}\n >\n <div className={clsx(classNames.content, styles[classNames.content])}>\n <div\n className={clsx(\n classNames.breadcrumbs,\n styles[classNames.breadcrumbs],\n )}\n >\n {breadcrumbs &&\n breadcrumbs.map(breadcrumb => (\n <Fragment key={breadcrumb.label}>\n <Link\n href={breadcrumb.href}\n variant=\"title-small\"\n weight=\"bold\"\n color=\"secondary\"\n truncate\n style={{ maxWidth: '240px' }}\n standalone\n >\n {breadcrumb.label}\n </Link>\n <RiArrowRightSLine size={16} color=\"var(--bui-fg-secondary)\" />\n </Fragment>\n ))}\n <Text variant=\"title-small\" weight=\"bold\" as=\"h2\">\n {title}\n </Text>\n </div>\n <div className={clsx(classNames.controls, styles[classNames.controls])}>\n {customActions}\n </div>\n </div>\n {tabs && (\n <div\n className={clsx(\n classNames.tabsWrapper,\n styles[classNames.tabsWrapper],\n )}\n >\n <Tabs>\n <TabList>\n {tabs.map(tab => (\n <Tab\n key={tab.id}\n id={tab.id}\n href={tab.href}\n matchStrategy={tab.matchStrategy}\n >\n {tab.label}\n </Tab>\n ))}\n </TabList>\n </Tabs>\n </div>\n )}\n </Container>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAiCO,MAAM,UAAA,GAAa,CAAC,KAAA,KAA2B;AACpD,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,sBAAsB,KAAK,CAAA;AAC1E,EAAA,MAAM,EAAE,SAAA,EAAW,KAAA,EAAO,IAAA,EAAM,aAAA,EAAe,aAAY,GAAI,YAAA;AAE/D,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAEnE,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAW,IAAA,CAAK,UAAA,CAAW,SAAS,MAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA,EACjE,QAAA,EAAA;AAAA,0BAAA,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,IAAA;AAAA,gBACT,UAAA,CAAW,WAAA;AAAA,gBACX,MAAA,CAAO,WAAW,WAAW;AAAA,eAC/B;AAAA,cAEC,QAAA,EAAA;AAAA,gBAAA,WAAA,IACC,WAAA,CAAY,GAAA,CAAI,CAAA,UAAA,qBACd,IAAA,CAAC,QAAA,EAAA,EACC,QAAA,EAAA;AAAA,kCAAA,GAAA;AAAA,oBAAC,IAAA;AAAA,oBAAA;AAAA,sBACC,MAAM,UAAA,CAAW,IAAA;AAAA,sBACjB,OAAA,EAAQ,aAAA;AAAA,sBACR,MAAA,EAAO,MAAA;AAAA,sBACP,KAAA,EAAM,WAAA;AAAA,sBACN,QAAA,EAAQ,IAAA;AAAA,sBACR,KAAA,EAAO,EAAE,QAAA,EAAU,OAAA,EAAQ;AAAA,sBAC3B,UAAA,EAAU,IAAA;AAAA,sBAET,QAAA,EAAA,UAAA,CAAW;AAAA;AAAA,mBACd;AAAA,kCACA,GAAA,CAAC,iBAAA,EAAA,EAAkB,IAAA,EAAM,EAAA,EAAI,OAAM,yBAAA,EAA0B;AAAA,iBAAA,EAAA,EAZhD,UAAA,CAAW,KAa1B,CACD,CAAA;AAAA,gCACH,GAAA,CAAC,QAAK,OAAA,EAAQ,aAAA,EAAc,QAAO,MAAA,EAAO,EAAA,EAAG,MAC1C,QAAA,EAAA,KAAA,EACH;AAAA;AAAA;AAAA,WACF;AAAA,0BACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,QAAA,EAAU,MAAA,CAAO,UAAA,CAAW,QAAQ,CAAC,CAAA,EAClE,QAAA,EAAA,aAAA,EACH;AAAA,SAAA,EACF,CAAA;AAAA,QACC,IAAA,oBACC,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,IAAA;AAAA,cACT,UAAA,CAAW,WAAA;AAAA,cACX,MAAA,CAAO,WAAW,WAAW;AAAA,aAC/B;AAAA,YAEA,8BAAC,IAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EACE,QAAA,EAAA,IAAA,CAAK,IAAI,CAAA,GAAA,qBACR,GAAA;AAAA,cAAC,GAAA;AAAA,cAAA;AAAA,gBAEC,IAAI,GAAA,CAAI,EAAA;AAAA,gBACR,MAAM,GAAA,CAAI,IAAA;AAAA,gBACV,eAAe,GAAA,CAAI,aAAA;AAAA,gBAElB,QAAA,EAAA,GAAA,CAAI;AAAA,eAAA;AAAA,cALA,GAAA,CAAI;AAAA,aAOZ,GACH,CAAA,EACF;AAAA;AAAA;AACF;AAAA;AAAA,GAEJ;AAEJ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.esm.js","sources":["../../../src/components/Link/Link.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 { forwardRef, useRef } from 'react';\nimport { useLink } from 'react-aria';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport { LinkDefinition } from './definition';\nimport type { LinkProps } from './types';\nimport { InternalLinkProvider } from '../InternalLinkProvider';\nimport styles from './Link.module.css';\n\nconst LinkInternal = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {\n const { classNames, dataAttributes, cleanedProps } = useStyles(\n LinkDefinition,\n {\n variant: 'body',\n weight: 'regular',\n color: 'primary',\n ...props,\n },\n );\n\n const {\n className,\n href,\n title,\n children,\n onPress,\n variant,\n weight,\n color,\n truncate,\n slot,\n ...restProps\n } = cleanedProps;\n\n const internalRef = useRef<HTMLAnchorElement>(null);\n const linkRef = (ref || internalRef) as React.RefObject<HTMLAnchorElement>;\n\n // Use useLink hook to get link props\n // For internal links, this will use the RouterProvider's navigate function\n const { linkProps } = useLink(\n {\n href,\n onPress,\n ...restProps,\n },\n linkRef,\n );\n\n return (\n <a\n {...linkProps}\n {...dataAttributes}\n {...(restProps as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n ref={linkRef}\n href={href}\n title={title}\n className={clsx(classNames.root, styles[classNames.root], className)}\n >\n {children}\n </a>\n );\n});\n\nLinkInternal.displayName = 'LinkInternal';\n\n/** @public */\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {\n return (\n <InternalLinkProvider href={props.href}>\n <LinkInternal {...props} ref={ref} />\n </InternalLinkProvider>\n );\n});\n\nLink.displayName = 'Link';\n"],"names":[],"mappings":";;;;;;;;;AAyBA,MAAM,YAAA,GAAe,UAAA,CAAyC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAC5E,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,SAAA;AAAA,IACnD,cAAA;AAAA,IACA;AAAA,MACE,OAAA,EAAS,MAAA;AAAA,MACT,MAAA,EAAQ,SAAA;AAAA,MACR,KAAA,EAAO,SAAA;AAAA,MACP,GAAG;AAAA;AACL,GACF;AAEA,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,YAAA;AAEJ,EAAA,MAAM,WAAA,GAAc,OAA0B,IAAI,CAAA;AAClD,EAAA,MAAM,UAAW,GAAA,IAAO,WAAA;AAIxB,EAAA,MAAM,EAAE,WAAU,GAAI,OAAA;AAAA,IACpB;AAAA,MACE,IAAA;AAAA,MACA,OAAA;AAAA,MACA,GAAG;AAAA,KACL;AAAA,IACA;AAAA,GACF;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACH,GAAG,cAAA;AAAA,MACH,GAAI,SAAA;AAAA,MACL,GAAA,EAAK,OAAA;AAAA,MACL,IAAA;AAAA,MACA,KAAA;AAAA,MACA,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAElE;AAAA;AAAA,GACH;AAEJ,CAAC,CAAA;AAED,YAAA,CAAa,WAAA,GAAc,cAAA;AAGpB,MAAM,IAAA,GAAO,UAAA,CAAyC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAC3E,EAAA,uBACE,GAAA,CAAC,oBAAA,EAAA,EAAqB,IAAA,EAAM,KAAA,CAAM,IAAA,EAChC,8BAAC,YAAA,EAAA,EAAc,GAAG,KAAA,EAAO,GAAA,EAAU,CAAA,EACrC,CAAA;AAEJ,CAAC;AAED,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}
|
|
1
|
+
{"version":3,"file":"Link.esm.js","sources":["../../../src/components/Link/Link.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 { forwardRef, useRef } from 'react';\nimport { useLink } from 'react-aria';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport { LinkDefinition } from './definition';\nimport type { LinkProps } from './types';\nimport { InternalLinkProvider } from '../InternalLinkProvider';\nimport styles from './Link.module.css';\n\nconst LinkInternal = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {\n const { classNames, dataAttributes, cleanedProps } = useStyles(\n LinkDefinition,\n {\n variant: 'body',\n weight: 'regular',\n color: 'primary',\n ...props,\n },\n );\n\n const {\n className,\n href,\n title,\n children,\n onPress,\n variant,\n weight,\n color,\n truncate,\n standalone,\n slot,\n ...restProps\n } = cleanedProps;\n\n const internalRef = useRef<HTMLAnchorElement>(null);\n const linkRef = (ref || internalRef) as React.RefObject<HTMLAnchorElement>;\n\n // Use useLink hook to get link props\n // For internal links, this will use the RouterProvider's navigate function\n const { linkProps } = useLink(\n {\n href,\n onPress,\n ...restProps,\n },\n linkRef,\n );\n\n return (\n <a\n {...linkProps}\n {...dataAttributes}\n {...(restProps as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n ref={linkRef}\n href={href}\n title={title}\n className={clsx(classNames.root, styles[classNames.root], className)}\n >\n {children}\n </a>\n );\n});\n\nLinkInternal.displayName = 'LinkInternal';\n\n/** @public */\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {\n return (\n <InternalLinkProvider href={props.href}>\n <LinkInternal {...props} ref={ref} />\n </InternalLinkProvider>\n );\n});\n\nLink.displayName = 'Link';\n"],"names":[],"mappings":";;;;;;;;;AAyBA,MAAM,YAAA,GAAe,UAAA,CAAyC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAC5E,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,SAAA;AAAA,IACnD,cAAA;AAAA,IACA;AAAA,MACE,OAAA,EAAS,MAAA;AAAA,MACT,MAAA,EAAQ,SAAA;AAAA,MACR,KAAA,EAAO,SAAA;AAAA,MACP,GAAG;AAAA;AACL,GACF;AAEA,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,YAAA;AAEJ,EAAA,MAAM,WAAA,GAAc,OAA0B,IAAI,CAAA;AAClD,EAAA,MAAM,UAAW,GAAA,IAAO,WAAA;AAIxB,EAAA,MAAM,EAAE,WAAU,GAAI,OAAA;AAAA,IACpB;AAAA,MACE,IAAA;AAAA,MACA,OAAA;AAAA,MACA,GAAG;AAAA,KACL;AAAA,IACA;AAAA,GACF;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACH,GAAG,cAAA;AAAA,MACH,GAAI,SAAA;AAAA,MACL,GAAA,EAAK,OAAA;AAAA,MACL,IAAA;AAAA,MACA,KAAA;AAAA,MACA,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAElE;AAAA;AAAA,GACH;AAEJ,CAAC,CAAA;AAED,YAAA,CAAa,WAAA,GAAc,cAAA;AAGpB,MAAM,IAAA,GAAO,UAAA,CAAyC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAC3E,EAAA,uBACE,GAAA,CAAC,oBAAA,EAAA,EAAqB,IAAA,EAAM,KAAA,CAAM,IAAA,EAChC,8BAAC,YAAA,EAAA,EAAc,GAAG,KAAA,EAAO,GAAA,EAAU,CAAA,EACrC,CAAA;AAEJ,CAAC;AAED,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}
|