@digdir/designsystemet-react 0.62.0 → 1.0.0-rc.1
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/dist/cjs/components/Accordion/Accordion.js +5 -1
- package/dist/cjs/components/Button/Button.js +3 -1
- package/dist/cjs/components/Card/Card.js +3 -1
- package/dist/cjs/components/ErrorSummary/ErrorSummaryHeading.js +1 -1
- package/dist/cjs/components/Link/Link.js +1 -1
- package/dist/cjs/components/Modal/ModalHeader.js +1 -1
- package/dist/cjs/components/Pagination/PaginationButton.js +1 -1
- package/dist/cjs/components/SkipLink/SkipLink.js +1 -1
- package/dist/cjs/components/Spinner/Spinner.js +3 -1
- package/dist/cjs/components/Tabs/Tab/Tab.js +1 -1
- package/dist/cjs/components/Tag/Tag.js +3 -1
- package/dist/cjs/components/ToggleGroup/ToggleGroupItem/ToggleGroupItem.js +1 -1
- package/dist/cjs/components/Tooltip/Tooltip.js +2 -2
- package/dist/cjs/components/form/Combobox/internal/ComboboxInput.js +1 -1
- package/dist/cjs/components/form/Combobox/useFloatingCombobox.js +1 -1
- package/dist/cjs/node_modules/@radix-ui/react-slot/dist/index.js +1 -1
- package/dist/cjs/utilities/getColor.js +27 -0
- package/dist/cjs/utilities/getSize.js +2 -0
- package/dist/esm/components/Accordion/Accordion.js +5 -1
- package/dist/esm/components/Button/Button.js +3 -1
- package/dist/esm/components/Card/Card.js +3 -1
- package/dist/esm/components/ErrorSummary/ErrorSummaryHeading.js +1 -1
- package/dist/esm/components/Link/Link.js +1 -1
- package/dist/esm/components/Modal/ModalHeader.js +1 -1
- package/dist/esm/components/Pagination/PaginationButton.js +1 -1
- package/dist/esm/components/SkipLink/SkipLink.js +1 -1
- package/dist/esm/components/Spinner/Spinner.js +3 -1
- package/dist/esm/components/Tabs/Tab/Tab.js +1 -1
- package/dist/esm/components/Tag/Tag.js +3 -1
- package/dist/esm/components/ToggleGroup/ToggleGroupItem/ToggleGroupItem.js +1 -1
- package/dist/esm/components/Tooltip/Tooltip.js +2 -2
- package/dist/esm/components/form/Combobox/internal/ComboboxInput.js +1 -1
- package/dist/esm/components/form/Combobox/useFloatingCombobox.js +1 -1
- package/dist/esm/node_modules/@radix-ui/react-slot/dist/index.js +1 -1
- package/dist/esm/utilities/getColor.js +25 -0
- package/dist/esm/utilities/getSize.js +2 -0
- package/dist/types/components/Accordion/Accordion.d.ts +4 -2
- package/dist/types/components/Accordion/Accordion.d.ts.map +1 -1
- package/dist/types/components/Button/Button.d.ts +13 -6
- package/dist/types/components/Button/Button.d.ts.map +1 -1
- package/dist/types/components/Card/Card.d.ts +4 -2
- package/dist/types/components/Card/Card.d.ts.map +1 -1
- package/dist/types/components/DropdownMenu/DropdownMenuTrigger.d.ts +1 -1
- package/dist/types/components/ErrorSummary/ErrorSummaryHeading.d.ts.map +1 -1
- package/dist/types/components/Link/Link.d.ts +8 -2
- package/dist/types/components/Link/Link.d.ts.map +1 -1
- package/dist/types/components/List/ListHeading.d.ts +1 -1
- package/dist/types/components/Modal/ModalTrigger.d.ts +1 -1
- package/dist/types/components/Pagination/PaginationButton.d.ts.map +1 -1
- package/dist/types/components/Popover/PopoverTrigger.d.ts +1 -1
- package/dist/types/components/Spinner/Spinner.d.ts +5 -1
- package/dist/types/components/Spinner/Spinner.d.ts.map +1 -1
- package/dist/types/components/Tag/Tag.d.ts +3 -2
- package/dist/types/components/Tag/Tag.d.ts.map +1 -1
- package/dist/types/components/ToggleGroup/ToggleGroupItem/ToggleGroupItem.d.ts.map +1 -1
- package/dist/types/components/Tooltip/Tooltip.d.ts +8 -2
- package/dist/types/components/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/types/components/Typography/Heading/Heading.d.ts +3 -3
- package/dist/types/components/Typography/Heading/Heading.d.ts.map +1 -1
- package/dist/types/utilities/getColor.d.ts +2 -0
- package/dist/types/utilities/getColor.d.ts.map +1 -0
- package/dist/types/utilities/getSize.d.ts +1 -1
- package/dist/types/utilities/getSize.d.ts.map +1 -1
- package/dist/types/utilities/index.d.ts +2 -0
- package/dist/types/utilities/index.d.ts.map +1 -1
- package/package.json +2 -2
- /package/dist/cjs/node_modules/{@radix-ui/react-slot/node_modules/@babel → @babel}/runtime/helpers/esm/extends.js +0 -0
- /package/dist/esm/node_modules/{@radix-ui/react-slot/node_modules/@babel → @babel}/runtime/helpers/esm/extends.js +0 -0
|
@@ -4,8 +4,12 @@
|
|
|
4
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var lite = require('../../node_modules/clsx/dist/lite.js');
|
|
7
|
+
var getColor = require('../../utilities/getColor.js');
|
|
7
8
|
|
|
8
|
-
const Accordion = React.forwardRef(({ border = false,
|
|
9
|
+
const Accordion = React.forwardRef(({ border = false, className, ...rest }, ref) => {
|
|
10
|
+
const color = getColor.getColor(rest.color || 'neutral');
|
|
11
|
+
return (jsxRuntime.jsx("div", { className: lite.clsx('fds-accordion', border && 'fds-accordion--border', color && `fds-accordion--${color}`, className), ref: ref, ...rest }));
|
|
12
|
+
});
|
|
9
13
|
Accordion.displayName = 'Accordion';
|
|
10
14
|
|
|
11
15
|
exports.Accordion = Accordion;
|
|
@@ -6,12 +6,14 @@ var React = require('react');
|
|
|
6
6
|
var lite = require('../../node_modules/clsx/dist/lite.js');
|
|
7
7
|
var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
|
|
8
8
|
var getSize = require('../../utilities/getSize.js');
|
|
9
|
+
var getColor = require('../../utilities/getColor.js');
|
|
9
10
|
|
|
10
11
|
/**
|
|
11
12
|
* Button used for interaction
|
|
12
13
|
*/
|
|
13
|
-
const Button = React.forwardRef(({ children,
|
|
14
|
+
const Button = React.forwardRef(({ children, variant = 'primary', fullWidth = false, icon = false, type = 'button', className, asChild, ...rest }, ref) => {
|
|
14
15
|
const size = getSize.getSize(rest.size || 'md');
|
|
16
|
+
const color = getColor.getColor(rest.color || 'accent', 'action');
|
|
15
17
|
const Component = asChild ? index.Slot : 'button';
|
|
16
18
|
return (jsxRuntime.jsx(Component, { ref: ref, type: type, className: lite.clsx('fds-btn', `fds-focus`, `fds-btn--${size}`, `fds-btn--${variant}`, `fds-btn--${color}`, fullWidth && 'fds-btn--full-width', icon && 'fds-btn--icon-only', className), ...rest, children: children }));
|
|
17
19
|
});
|
|
@@ -5,9 +5,11 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var lite = require('../../node_modules/clsx/dist/lite.js');
|
|
7
7
|
var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
|
|
8
|
+
var getColor = require('../../utilities/getColor.js');
|
|
8
9
|
|
|
9
|
-
const Card = React.forwardRef(({
|
|
10
|
+
const Card = React.forwardRef(({ isLink = false, asChild = false, className, ...rest }, ref) => {
|
|
10
11
|
const Component = asChild ? index.Slot : 'div';
|
|
12
|
+
const color = getColor.getColor(rest.color || 'neutral');
|
|
11
13
|
return (jsxRuntime.jsx(Component, { ref: ref, className: lite.clsx(`fds-card`, `fds-card--${color}`, isLink && `fds-card--link`, isLink && `fds-focus`, className), ...rest }));
|
|
12
14
|
});
|
|
13
15
|
Card.displayName = 'Card';
|
|
@@ -13,7 +13,7 @@ const ErrorSummaryHeading = ({ id, ...rest }) => {
|
|
|
13
13
|
setHeadingId(id);
|
|
14
14
|
}
|
|
15
15
|
}, [headingId, id, setHeadingId]);
|
|
16
|
-
return (jsxRuntime.jsx(index.List.Heading, { ...rest, id: headingId }));
|
|
16
|
+
return (jsxRuntime.jsx(index.List.Heading, { ...rest, id: headingId, className: 'fds-error-summary__heading' }));
|
|
17
17
|
};
|
|
18
18
|
ErrorSummaryHeading.displayName = 'ErrorSummaryHeading';
|
|
19
19
|
|
|
@@ -8,7 +8,7 @@ var index = require('../../node_modules/@radix-ui/react-slot/dist/index.js');
|
|
|
8
8
|
|
|
9
9
|
const Link = React.forwardRef(({ asChild, children, className, inverted = false, ...rest }, ref) => {
|
|
10
10
|
const Component = asChild ? index.Slot : 'a';
|
|
11
|
-
return (jsxRuntime.jsx(Component, { className: lite.clsx('fds-link',
|
|
11
|
+
return (jsxRuntime.jsx(Component, { className: lite.clsx('fds-link', className), ref: ref, "data-ds-theme": inverted ? 'dark' : undefined, ...rest, children: children }));
|
|
12
12
|
});
|
|
13
13
|
Link.displayName = 'Link';
|
|
14
14
|
|
|
@@ -14,7 +14,7 @@ var Heading = require('../Typography/Heading/Heading.js');
|
|
|
14
14
|
const ModalHeader = React.forwardRef(({ closeButton = true, children, subtitle, asChild, className, ...rest }, ref) => {
|
|
15
15
|
const Component = asChild ? index.Slot : 'div';
|
|
16
16
|
const context = React.useContext(ModalRoot.ModalContext);
|
|
17
|
-
return (jsxRuntime.jsxs(Component, { ref: ref, className: lite.clsx('fds-modal__header', !closeButton && 'fds-modal__header--no-button', className), ...rest, children: [subtitle && (jsxRuntime.jsx(Paragraph.Paragraph, { size: 'sm', variant: 'short', children: subtitle })), jsxRuntime.jsx(Heading.Heading, { level: 2, size: 'xs', children: children }), closeButton && (jsxRuntime.jsx(Button.Button, { name: 'close', variant: 'tertiary', color: '
|
|
17
|
+
return (jsxRuntime.jsxs(Component, { ref: ref, className: lite.clsx('fds-modal__header', !closeButton && 'fds-modal__header--no-button', className), ...rest, children: [subtitle && (jsxRuntime.jsx(Paragraph.Paragraph, { size: 'sm', variant: 'short', children: subtitle })), jsxRuntime.jsx(Heading.Heading, { level: 2, size: 'xs', children: children }), closeButton && (jsxRuntime.jsx(Button.Button, { name: 'close', variant: 'tertiary', color: 'neutral', size: 'md', onClick: context?.closeModal, autoFocus: true, icon: true, className: 'fds-modal__header__button', children: jsxRuntime.jsx(akselIcons.XMarkIcon, { title: 'close modal', fontSize: '1.5em' }) }))] }));
|
|
18
18
|
});
|
|
19
19
|
ModalHeader.displayName = 'ModalHeader';
|
|
20
20
|
|
|
@@ -8,7 +8,7 @@ var Button = require('../Button/Button.js');
|
|
|
8
8
|
|
|
9
9
|
const PaginationButton = React.forwardRef(({ isActive, ...rest }, ref) => {
|
|
10
10
|
const { size } = React.useContext(PaginationRoot.PaginationContext);
|
|
11
|
-
return (jsxRuntime.jsx(Button.Button, { ref: ref, variant: isActive ? 'primary' : 'tertiary', "aria-current": isActive,
|
|
11
|
+
return (jsxRuntime.jsx(Button.Button, { ref: ref, variant: isActive ? 'primary' : 'tertiary', "aria-current": isActive, size: size, ...rest }));
|
|
12
12
|
});
|
|
13
13
|
|
|
14
14
|
exports.PaginationButton = PaginationButton;
|
|
@@ -5,7 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
5
5
|
var lite = require('../../node_modules/clsx/dist/lite.js');
|
|
6
6
|
|
|
7
7
|
const SkipLink = ({ href, children, className, ...rest }) => {
|
|
8
|
-
return (jsxRuntime.jsx("a", { href: href, className: lite.clsx(`fds-sr-only`, 'fds-skiplink', className), ...rest, children: children }));
|
|
8
|
+
return (jsxRuntime.jsx("a", { href: href, className: lite.clsx(`fds-sr-only`, 'fds-skiplink', className), ...rest, children: jsxRuntime.jsx("p", { className: 'fds-skiplink__content', children: children }) }));
|
|
9
9
|
};
|
|
10
10
|
SkipLink.displayName = 'SkipLink';
|
|
11
11
|
|
|
@@ -19,7 +19,9 @@ const Spinner = ({ title, variant = 'default', className, style, ...rest }) => {
|
|
|
19
19
|
const size = getSize.getSize(rest.size || 'md');
|
|
20
20
|
const svgRef = useSynchronizedAnimation.useSynchronizedAnimation('fds-spinner-rotate-animation');
|
|
21
21
|
const strokeRef = useSynchronizedAnimation.useSynchronizedAnimation('fds-spinner-stroke-animation');
|
|
22
|
-
return (jsxRuntime.jsxs("svg", { className: lite.clsx('fds-spinner',
|
|
22
|
+
return (jsxRuntime.jsxs("svg", { className: lite.clsx('fds-spinner', variant !== 'inverted'
|
|
23
|
+
? `fds-spinner--${variant}`
|
|
24
|
+
: 'fds-spinner--default', className), "data-ds-theme": variant === 'inverted' ? 'dark' : undefined, style: { width: sizeMap[size], height: sizeMap[size], ...style }, viewBox: '0 0 50 50', ref: svgRef, ...rest, children: [jsxRuntime.jsx("title", { children: title }), jsxRuntime.jsx("circle", { className: lite.clsx('fds-spinner__background', variant === 'inverted' && 'fds-spinner__background--inverted'), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5' }), jsxRuntime.jsx("circle", { className: lite.clsx(`fds-spinner__circle`), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5', ref: strokeRef })] }));
|
|
23
25
|
};
|
|
24
26
|
Spinner.displayName = 'Spinner';
|
|
25
27
|
|
|
@@ -10,7 +10,7 @@ var RovingTabindexItem = require('../../../utilities/RovingTabIndex/RovingTabind
|
|
|
10
10
|
const Tab = React.forwardRef((props, ref) => {
|
|
11
11
|
const { children, className, ...rest } = props;
|
|
12
12
|
const { ...useTabRest } = useTab.useTabItem(props);
|
|
13
|
-
return (jsxRuntime.jsx(RovingTabindexItem.RovingTabindexItem, { ...rest, asChild: true, children: jsxRuntime.jsx("button", { ...useTabRest, className: lite.clsx('fds-tabs__tab', className), ref: ref, children: children }) }));
|
|
13
|
+
return (jsxRuntime.jsx(RovingTabindexItem.RovingTabindexItem, { ...rest, asChild: true, children: jsxRuntime.jsx("button", { ...useTabRest, className: lite.clsx('fds-tabs__tab', 'fds-focus', className), ref: ref, children: children }) }));
|
|
14
14
|
});
|
|
15
15
|
Tab.displayName = 'Tab';
|
|
16
16
|
|
|
@@ -5,10 +5,12 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var lite = require('../../node_modules/clsx/dist/lite.js');
|
|
7
7
|
var getSize = require('../../utilities/getSize.js');
|
|
8
|
+
var getColor = require('../../utilities/getColor.js');
|
|
8
9
|
var Paragraph = require('../Typography/Paragraph/Paragraph.js');
|
|
9
10
|
|
|
10
|
-
const Tag = React.forwardRef(({ children,
|
|
11
|
+
const Tag = React.forwardRef(({ children, className, ...rest }, ref) => {
|
|
11
12
|
const size = getSize.getSize(rest.size || 'md');
|
|
13
|
+
const color = getColor.getColor(rest.color || 'neutral');
|
|
12
14
|
return (jsxRuntime.jsx(Paragraph.Paragraph, { asChild: true, size: size, children: jsxRuntime.jsx("span", { className: lite.clsx('fds-tag', `fds-tag--${color}`, `fds-tag--${size}`, className), ref: ref, ...rest, children: children }) }));
|
|
13
15
|
});
|
|
14
16
|
Tag.displayName = 'Tag';
|
|
@@ -11,7 +11,7 @@ var Button = require('../../Button/Button.js');
|
|
|
11
11
|
const ToggleGroupItem = React.forwardRef((props, ref) => {
|
|
12
12
|
const { children, icon, className, ...rest } = props;
|
|
13
13
|
const { active, size = 'md', buttonProps } = useToggleGroupitem.useToggleGroupItem(props);
|
|
14
|
-
return (jsxRuntime.jsx(RovingTabindexItem.RovingTabindexItem, { asChild: true, value: rest.value, children: jsxRuntime.jsx(Button.Button, { className: lite.clsx('fds-togglegroup__item', className), icon: icon,
|
|
14
|
+
return (jsxRuntime.jsx(RovingTabindexItem.RovingTabindexItem, { asChild: true, value: rest.value, children: jsxRuntime.jsx(Button.Button, { className: lite.clsx('fds-togglegroup__item', className), icon: icon, variant: active ? 'primary' : 'tertiary', size: size, ref: ref, ...rest, ...buttonProps, children: children }) }));
|
|
15
15
|
});
|
|
16
16
|
ToggleGroupItem.displayName = 'ToggleGroupItem';
|
|
17
17
|
|
|
@@ -77,8 +77,8 @@ const Tooltip = React.forwardRef(({ children, content, placement = 'top', delay
|
|
|
77
77
|
}
|
|
78
78
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [React.cloneElement(children, getReferenceProps({
|
|
79
79
|
ref: childMergedRef,
|
|
80
|
-
})), internalOpen && (jsxRuntime.jsx(Container, { children: jsxRuntime.jsxs("div", { ref: refs.setFloating, style: { ...floatingStyles, ...animationStyles, ...style }, role: 'tooltip', ...getFloatingProps({
|
|
81
|
-
className: lite.clsx('fds-tooltip',
|
|
80
|
+
})), internalOpen && (jsxRuntime.jsx(Container, { children: jsxRuntime.jsxs("div", { ref: refs.setFloating, style: { ...floatingStyles, ...animationStyles, ...style }, role: 'tooltip', "data-ds-theme": inverted ? 'light' : 'dark', ...getFloatingProps({
|
|
81
|
+
className: lite.clsx('fds-tooltip', className),
|
|
82
82
|
ref: mergedRef,
|
|
83
83
|
...rest,
|
|
84
84
|
}), children: [content, jsxRuntime.jsx(floatingUi_react.FloatingArrow, { ref: arrowRef, context: context, className: 'fds-tooltip__arrow', height: ARROW_HEIGHT })] }) }))] }));
|
|
@@ -66,7 +66,7 @@ const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDow
|
|
|
66
66
|
}
|
|
67
67
|
},
|
|
68
68
|
});
|
|
69
|
-
return (jsxRuntime.jsxs(Box.Box, { ...props, "aria-disabled": disabled, className: lite.clsx('fds-textfield__input', 'fds-combobox__input__wrapper', readOnly && 'fds-combobox--readonly', error && 'fds-combobox--error'), children: [jsxRuntime.jsxs("div", { className: 'fds-combobox__chip-and-input', children: [multiple && !hideChips && jsxRuntime.jsx(ComboboxChips.default, {}), jsxRuntime.jsx("input", { ref: mergedRefs, "aria-activedescendant": props['aria-activedescendant'], readOnly: readOnly, "aria-autocomplete": 'list', role: 'combobox', "aria-expanded": open, "aria-controls": listId, autoComplete: 'off', size: htmlSize, value: inputValue, ...objectUtils.omit(['style', 'className'], rest), ...formFieldProps.inputProps, className: 'fds-combobox__input', onChange: (e) => {
|
|
69
|
+
return (jsxRuntime.jsxs(Box.Box, { ...props, "aria-disabled": disabled ? 'true' : undefined, className: lite.clsx('fds-textfield__input', 'fds-combobox__input__wrapper', readOnly && 'fds-combobox--readonly', error && 'fds-combobox--error'), children: [jsxRuntime.jsxs("div", { className: 'fds-combobox__chip-and-input', children: [multiple && !hideChips && jsxRuntime.jsx(ComboboxChips.default, {}), jsxRuntime.jsx("input", { ref: mergedRefs, "aria-activedescendant": props['aria-activedescendant'], readOnly: readOnly, "aria-autocomplete": 'list', role: 'combobox', "aria-expanded": open, "aria-controls": listId, autoComplete: 'off', size: htmlSize, value: inputValue, ...objectUtils.omit(['style', 'className'], rest), ...formFieldProps.inputProps, className: 'fds-combobox__input', onChange: (e) => {
|
|
70
70
|
onChange(e);
|
|
71
71
|
!open && setOpen(true);
|
|
72
72
|
rest.onChange && rest.onChange(e);
|
|
@@ -39,7 +39,7 @@ const useFloatingCombobox = ({ listRef }) => {
|
|
|
39
39
|
apply({ rects, elements }) {
|
|
40
40
|
requestAnimationFrame(() => {
|
|
41
41
|
Object.assign(elements.floating.style, {
|
|
42
|
-
width: `calc(${rects.reference.width}px - calc(var(--
|
|
42
|
+
width: `calc(${rects.reference.width}px - calc(var(--ds-spacing-2) * 2))`,
|
|
43
43
|
maxHeight: `200px`,
|
|
44
44
|
});
|
|
45
45
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
|
-
var _extends = require('
|
|
4
|
+
var _extends = require('../../../@babel/runtime/helpers/esm/extends.js');
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var index = require('../../react-compose-refs/dist/index.js');
|
|
7
7
|
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
function getColor(color, type) {
|
|
5
|
+
if (type === 'action') {
|
|
6
|
+
switch (color) {
|
|
7
|
+
case 'first':
|
|
8
|
+
return 'accent';
|
|
9
|
+
case 'second':
|
|
10
|
+
return 'neutral';
|
|
11
|
+
default:
|
|
12
|
+
return color;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
switch (color) {
|
|
16
|
+
case 'first':
|
|
17
|
+
return 'brand1';
|
|
18
|
+
case 'second':
|
|
19
|
+
return 'brand2';
|
|
20
|
+
case 'third':
|
|
21
|
+
return 'brand3';
|
|
22
|
+
default:
|
|
23
|
+
return color;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
exports.getColor = getColor;
|
|
@@ -2,8 +2,12 @@
|
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
4
|
import { clsx } from '../../node_modules/clsx/dist/lite.js';
|
|
5
|
+
import { getColor } from '../../utilities/getColor.js';
|
|
5
6
|
|
|
6
|
-
const Accordion = forwardRef(({ border = false,
|
|
7
|
+
const Accordion = forwardRef(({ border = false, className, ...rest }, ref) => {
|
|
8
|
+
const color = getColor(rest.color || 'neutral');
|
|
9
|
+
return (jsx("div", { className: clsx('fds-accordion', border && 'fds-accordion--border', color && `fds-accordion--${color}`, className), ref: ref, ...rest }));
|
|
10
|
+
});
|
|
7
11
|
Accordion.displayName = 'Accordion';
|
|
8
12
|
|
|
9
13
|
export { Accordion };
|
|
@@ -4,12 +4,14 @@ import { forwardRef } from 'react';
|
|
|
4
4
|
import { clsx } from '../../node_modules/clsx/dist/lite.js';
|
|
5
5
|
import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
|
|
6
6
|
import { getSize } from '../../utilities/getSize.js';
|
|
7
|
+
import { getColor } from '../../utilities/getColor.js';
|
|
7
8
|
|
|
8
9
|
/**
|
|
9
10
|
* Button used for interaction
|
|
10
11
|
*/
|
|
11
|
-
const Button = forwardRef(({ children,
|
|
12
|
+
const Button = forwardRef(({ children, variant = 'primary', fullWidth = false, icon = false, type = 'button', className, asChild, ...rest }, ref) => {
|
|
12
13
|
const size = getSize(rest.size || 'md');
|
|
14
|
+
const color = getColor(rest.color || 'accent', 'action');
|
|
13
15
|
const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'button';
|
|
14
16
|
return (jsx(Component, { ref: ref, type: type, className: clsx('fds-btn', `fds-focus`, `fds-btn--${size}`, `fds-btn--${variant}`, `fds-btn--${color}`, fullWidth && 'fds-btn--full-width', icon && 'fds-btn--icon-only', className), ...rest, children: children }));
|
|
15
17
|
});
|
|
@@ -3,9 +3,11 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
4
|
import { clsx } from '../../node_modules/clsx/dist/lite.js';
|
|
5
5
|
import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
|
|
6
|
+
import { getColor } from '../../utilities/getColor.js';
|
|
6
7
|
|
|
7
|
-
const Card = forwardRef(({
|
|
8
|
+
const Card = forwardRef(({ isLink = false, asChild = false, className, ...rest }, ref) => {
|
|
8
9
|
const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
|
|
10
|
+
const color = getColor(rest.color || 'neutral');
|
|
9
11
|
return (jsx(Component, { ref: ref, className: clsx(`fds-card`, `fds-card--${color}`, isLink && `fds-card--link`, isLink && `fds-focus`, className), ...rest }));
|
|
10
12
|
});
|
|
11
13
|
Card.displayName = 'Card';
|
|
@@ -11,7 +11,7 @@ const ErrorSummaryHeading = ({ id, ...rest }) => {
|
|
|
11
11
|
setHeadingId(id);
|
|
12
12
|
}
|
|
13
13
|
}, [headingId, id, setHeadingId]);
|
|
14
|
-
return (jsx(List.Heading, { ...rest, id: headingId }));
|
|
14
|
+
return (jsx(List.Heading, { ...rest, id: headingId, className: 'fds-error-summary__heading' }));
|
|
15
15
|
};
|
|
16
16
|
ErrorSummaryHeading.displayName = 'ErrorSummaryHeading';
|
|
17
17
|
|
|
@@ -6,7 +6,7 @@ import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_mo
|
|
|
6
6
|
|
|
7
7
|
const Link = forwardRef(({ asChild, children, className, inverted = false, ...rest }, ref) => {
|
|
8
8
|
const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'a';
|
|
9
|
-
return (jsx(Component, { className: clsx('fds-link',
|
|
9
|
+
return (jsx(Component, { className: clsx('fds-link', className), ref: ref, "data-ds-theme": inverted ? 'dark' : undefined, ...rest, children: children }));
|
|
10
10
|
});
|
|
11
11
|
Link.displayName = 'Link';
|
|
12
12
|
|
|
@@ -12,7 +12,7 @@ import { Heading } from '../Typography/Heading/Heading.js';
|
|
|
12
12
|
const ModalHeader = forwardRef(({ closeButton = true, children, subtitle, asChild, className, ...rest }, ref) => {
|
|
13
13
|
const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
|
|
14
14
|
const context = useContext(ModalContext);
|
|
15
|
-
return (jsxs(Component, { ref: ref, className: clsx('fds-modal__header', !closeButton && 'fds-modal__header--no-button', className), ...rest, children: [subtitle && (jsx(Paragraph, { size: 'sm', variant: 'short', children: subtitle })), jsx(Heading, { level: 2, size: 'xs', children: children }), closeButton && (jsx(Button, { name: 'close', variant: 'tertiary', color: '
|
|
15
|
+
return (jsxs(Component, { ref: ref, className: clsx('fds-modal__header', !closeButton && 'fds-modal__header--no-button', className), ...rest, children: [subtitle && (jsx(Paragraph, { size: 'sm', variant: 'short', children: subtitle })), jsx(Heading, { level: 2, size: 'xs', children: children }), closeButton && (jsx(Button, { name: 'close', variant: 'tertiary', color: 'neutral', size: 'md', onClick: context?.closeModal, autoFocus: true, icon: true, className: 'fds-modal__header__button', children: jsx(XMarkIcon, { title: 'close modal', fontSize: '1.5em' }) }))] }));
|
|
16
16
|
});
|
|
17
17
|
ModalHeader.displayName = 'ModalHeader';
|
|
18
18
|
|
|
@@ -6,7 +6,7 @@ import { Button } from '../Button/Button.js';
|
|
|
6
6
|
|
|
7
7
|
const PaginationButton = forwardRef(({ isActive, ...rest }, ref) => {
|
|
8
8
|
const { size } = useContext(PaginationContext);
|
|
9
|
-
return (jsx(Button, { ref: ref, variant: isActive ? 'primary' : 'tertiary', "aria-current": isActive,
|
|
9
|
+
return (jsx(Button, { ref: ref, variant: isActive ? 'primary' : 'tertiary', "aria-current": isActive, size: size, ...rest }));
|
|
10
10
|
});
|
|
11
11
|
|
|
12
12
|
export { PaginationButton };
|
|
@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
3
3
|
import { clsx } from '../../node_modules/clsx/dist/lite.js';
|
|
4
4
|
|
|
5
5
|
const SkipLink = ({ href, children, className, ...rest }) => {
|
|
6
|
-
return (jsx("a", { href: href, className: clsx(`fds-sr-only`, 'fds-skiplink', className), ...rest, children: children }));
|
|
6
|
+
return (jsx("a", { href: href, className: clsx(`fds-sr-only`, 'fds-skiplink', className), ...rest, children: jsx("p", { className: 'fds-skiplink__content', children: children }) }));
|
|
7
7
|
};
|
|
8
8
|
SkipLink.displayName = 'SkipLink';
|
|
9
9
|
|
|
@@ -17,7 +17,9 @@ const Spinner = ({ title, variant = 'default', className, style, ...rest }) => {
|
|
|
17
17
|
const size = getSize(rest.size || 'md');
|
|
18
18
|
const svgRef = useSynchronizedAnimation('fds-spinner-rotate-animation');
|
|
19
19
|
const strokeRef = useSynchronizedAnimation('fds-spinner-stroke-animation');
|
|
20
|
-
return (jsxs("svg", { className: clsx('fds-spinner',
|
|
20
|
+
return (jsxs("svg", { className: clsx('fds-spinner', variant !== 'inverted'
|
|
21
|
+
? `fds-spinner--${variant}`
|
|
22
|
+
: 'fds-spinner--default', className), "data-ds-theme": variant === 'inverted' ? 'dark' : undefined, style: { width: sizeMap[size], height: sizeMap[size], ...style }, viewBox: '0 0 50 50', ref: svgRef, ...rest, children: [jsx("title", { children: title }), jsx("circle", { className: clsx('fds-spinner__background', variant === 'inverted' && 'fds-spinner__background--inverted'), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5' }), jsx("circle", { className: clsx(`fds-spinner__circle`), cx: '25', cy: '25', r: '20', fill: 'none', strokeWidth: '5', ref: strokeRef })] }));
|
|
21
23
|
};
|
|
22
24
|
Spinner.displayName = 'Spinner';
|
|
23
25
|
|
|
@@ -8,7 +8,7 @@ import { RovingTabindexItem } from '../../../utilities/RovingTabIndex/RovingTabi
|
|
|
8
8
|
const Tab = forwardRef((props, ref) => {
|
|
9
9
|
const { children, className, ...rest } = props;
|
|
10
10
|
const { ...useTabRest } = useTabItem(props);
|
|
11
|
-
return (jsx(RovingTabindexItem, { ...rest, asChild: true, children: jsx("button", { ...useTabRest, className: clsx('fds-tabs__tab', className), ref: ref, children: children }) }));
|
|
11
|
+
return (jsx(RovingTabindexItem, { ...rest, asChild: true, children: jsx("button", { ...useTabRest, className: clsx('fds-tabs__tab', 'fds-focus', className), ref: ref, children: children }) }));
|
|
12
12
|
});
|
|
13
13
|
Tab.displayName = 'Tab';
|
|
14
14
|
|
|
@@ -3,10 +3,12 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
4
|
import { clsx } from '../../node_modules/clsx/dist/lite.js';
|
|
5
5
|
import { getSize } from '../../utilities/getSize.js';
|
|
6
|
+
import { getColor } from '../../utilities/getColor.js';
|
|
6
7
|
import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
|
|
7
8
|
|
|
8
|
-
const Tag = forwardRef(({ children,
|
|
9
|
+
const Tag = forwardRef(({ children, className, ...rest }, ref) => {
|
|
9
10
|
const size = getSize(rest.size || 'md');
|
|
11
|
+
const color = getColor(rest.color || 'neutral');
|
|
10
12
|
return (jsx(Paragraph, { asChild: true, size: size, children: jsx("span", { className: clsx('fds-tag', `fds-tag--${color}`, `fds-tag--${size}`, className), ref: ref, ...rest, children: children }) }));
|
|
11
13
|
});
|
|
12
14
|
Tag.displayName = 'Tag';
|
|
@@ -9,7 +9,7 @@ import { Button } from '../../Button/Button.js';
|
|
|
9
9
|
const ToggleGroupItem = forwardRef((props, ref) => {
|
|
10
10
|
const { children, icon, className, ...rest } = props;
|
|
11
11
|
const { active, size = 'md', buttonProps } = useToggleGroupItem(props);
|
|
12
|
-
return (jsx(RovingTabindexItem, { asChild: true, value: rest.value, children: jsx(Button, { className: clsx('fds-togglegroup__item', className), icon: icon,
|
|
12
|
+
return (jsx(RovingTabindexItem, { asChild: true, value: rest.value, children: jsx(Button, { className: clsx('fds-togglegroup__item', className), icon: icon, variant: active ? 'primary' : 'tertiary', size: size, ref: ref, ...rest, ...buttonProps, children: children }) }));
|
|
13
13
|
});
|
|
14
14
|
ToggleGroupItem.displayName = 'ToggleGroupItem';
|
|
15
15
|
|
|
@@ -57,8 +57,8 @@ const Tooltip = forwardRef(({ children, content, placement = 'top', delay = 150,
|
|
|
57
57
|
}
|
|
58
58
|
return (jsxs(Fragment, { children: [cloneElement(children, getReferenceProps({
|
|
59
59
|
ref: childMergedRef,
|
|
60
|
-
})), internalOpen && (jsx(Container, { children: jsxs("div", { ref: refs.setFloating, style: { ...floatingStyles, ...animationStyles, ...style }, role: 'tooltip', ...getFloatingProps({
|
|
61
|
-
className: clsx('fds-tooltip',
|
|
60
|
+
})), internalOpen && (jsx(Container, { children: jsxs("div", { ref: refs.setFloating, style: { ...floatingStyles, ...animationStyles, ...style }, role: 'tooltip', "data-ds-theme": inverted ? 'light' : 'dark', ...getFloatingProps({
|
|
61
|
+
className: clsx('fds-tooltip', className),
|
|
62
62
|
ref: mergedRef,
|
|
63
63
|
...rest,
|
|
64
64
|
}), children: [content, jsx(FloatingArrow, { ref: arrowRef, context: context, className: 'fds-tooltip__arrow', height: ARROW_HEIGHT })] }) }))] }));
|
|
@@ -62,7 +62,7 @@ const ComboboxInput = ({ hideClearButton, listId, error, hideChips, handleKeyDow
|
|
|
62
62
|
}
|
|
63
63
|
},
|
|
64
64
|
});
|
|
65
|
-
return (jsxs(Box, { ...props, "aria-disabled": disabled, className: clsx('fds-textfield__input', 'fds-combobox__input__wrapper', readOnly && 'fds-combobox--readonly', error && 'fds-combobox--error'), children: [jsxs("div", { className: 'fds-combobox__chip-and-input', children: [multiple && !hideChips && jsx(ComboboxChips, {}), jsx("input", { ref: mergedRefs, "aria-activedescendant": props['aria-activedescendant'], readOnly: readOnly, "aria-autocomplete": 'list', role: 'combobox', "aria-expanded": open, "aria-controls": listId, autoComplete: 'off', size: htmlSize, value: inputValue, ...omit(['style', 'className'], rest), ...formFieldProps.inputProps, className: 'fds-combobox__input', onChange: (e) => {
|
|
65
|
+
return (jsxs(Box, { ...props, "aria-disabled": disabled ? 'true' : undefined, className: clsx('fds-textfield__input', 'fds-combobox__input__wrapper', readOnly && 'fds-combobox--readonly', error && 'fds-combobox--error'), children: [jsxs("div", { className: 'fds-combobox__chip-and-input', children: [multiple && !hideChips && jsx(ComboboxChips, {}), jsx("input", { ref: mergedRefs, "aria-activedescendant": props['aria-activedescendant'], readOnly: readOnly, "aria-autocomplete": 'list', role: 'combobox', "aria-expanded": open, "aria-controls": listId, autoComplete: 'off', size: htmlSize, value: inputValue, ...omit(['style', 'className'], rest), ...formFieldProps.inputProps, className: 'fds-combobox__input', onChange: (e) => {
|
|
66
66
|
onChange(e);
|
|
67
67
|
!open && setOpen(true);
|
|
68
68
|
rest.onChange && rest.onChange(e);
|
|
@@ -37,7 +37,7 @@ const useFloatingCombobox = ({ listRef }) => {
|
|
|
37
37
|
apply({ rects, elements }) {
|
|
38
38
|
requestAnimationFrame(() => {
|
|
39
39
|
Object.assign(elements.floating.style, {
|
|
40
|
-
width: `calc(${rects.reference.width}px - calc(var(--
|
|
40
|
+
width: `calc(${rects.reference.width}px - calc(var(--ds-spacing-2) * 2))`,
|
|
41
41
|
maxHeight: `200px`,
|
|
42
42
|
});
|
|
43
43
|
});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import _extends from '
|
|
2
|
+
import _extends from '../../../@babel/runtime/helpers/esm/extends.js';
|
|
3
3
|
import { forwardRef, Children, isValidElement, createElement, cloneElement, Fragment } from 'react';
|
|
4
4
|
import { composeRefs as $6ed0406888f73fc4$export$43e446d32b3d21af } from '../../react-compose-refs/dist/index.js';
|
|
5
5
|
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
function getColor(color, type) {
|
|
3
|
+
if (type === 'action') {
|
|
4
|
+
switch (color) {
|
|
5
|
+
case 'first':
|
|
6
|
+
return 'accent';
|
|
7
|
+
case 'second':
|
|
8
|
+
return 'neutral';
|
|
9
|
+
default:
|
|
10
|
+
return color;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
switch (color) {
|
|
14
|
+
case 'first':
|
|
15
|
+
return 'brand1';
|
|
16
|
+
case 'second':
|
|
17
|
+
return 'brand2';
|
|
18
|
+
case 'third':
|
|
19
|
+
return 'brand3';
|
|
20
|
+
default:
|
|
21
|
+
return color;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
export { getColor };
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import type { ReactNode, HTMLAttributes } from 'react';
|
|
2
|
+
type OldColors = 'first' | 'second' | 'third';
|
|
2
3
|
export type AccordionProps = {
|
|
3
4
|
/** Accordion background color */
|
|
4
|
-
color?: '
|
|
5
|
+
color?: 'brand1' | 'brand2' | 'brand3' | 'neutral' | 'subtle' | OldColors;
|
|
5
6
|
/** Show border */
|
|
6
7
|
border?: boolean;
|
|
7
8
|
/** Instances of `Accordion.Item` */
|
|
@@ -9,10 +10,11 @@ export type AccordionProps = {
|
|
|
9
10
|
} & HTMLAttributes<HTMLDivElement>;
|
|
10
11
|
export declare const Accordion: import("react").ForwardRefExoticComponent<{
|
|
11
12
|
/** Accordion background color */
|
|
12
|
-
color?: "
|
|
13
|
+
color?: "neutral" | "brand1" | "brand2" | "brand3" | OldColors | "subtle" | undefined;
|
|
13
14
|
/** Show border */
|
|
14
15
|
border?: boolean | undefined;
|
|
15
16
|
/** Instances of `Accordion.Item` */
|
|
16
17
|
children: ReactNode;
|
|
17
18
|
} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
|
|
19
|
+
export {};
|
|
18
20
|
//# sourceMappingURL=Accordion.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAMvD,KAAK,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE9C,MAAM,MAAM,cAAc,GAAG;IAC3B,iCAAiC;IACjC,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC1E,kBAAkB;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,eAAO,MAAM,SAAS;IARpB,iCAAiC;;IAEjC,kBAAkB;;IAElB,oCAAoC;cAC1B,SAAS;mFAoBpB,CAAC"}
|
|
@@ -1,13 +1,17 @@
|
|
|
1
1
|
import type { ButtonHTMLAttributes } from 'react';
|
|
2
2
|
type OldButtonSizes = 'small' | 'medium' | 'large';
|
|
3
|
+
type OldColors = 'first' | 'second' | 'success';
|
|
3
4
|
export type ButtonProps = {
|
|
4
5
|
/** Specify which variant to use */
|
|
5
6
|
variant?: 'primary' | 'secondary' | 'tertiary';
|
|
6
|
-
/** Specify which color palette to use
|
|
7
|
-
|
|
7
|
+
/** Specify which color palette to use
|
|
8
|
+
* @default accent
|
|
9
|
+
* @note `first`, `second`, `success` is deprecated
|
|
10
|
+
*/
|
|
11
|
+
color?: 'accent' | 'neutral' | 'danger' | OldColors;
|
|
8
12
|
/**
|
|
9
13
|
* Size
|
|
10
|
-
* @default
|
|
14
|
+
* @default md
|
|
11
15
|
* @note `small`, `medium`, `large` is deprecated
|
|
12
16
|
*/
|
|
13
17
|
size?: 'sm' | 'md' | 'lg' | OldButtonSizes;
|
|
@@ -29,11 +33,14 @@ export type ButtonProps = {
|
|
|
29
33
|
export declare const Button: import("react").ForwardRefExoticComponent<{
|
|
30
34
|
/** Specify which variant to use */
|
|
31
35
|
variant?: "primary" | "secondary" | "tertiary" | undefined;
|
|
32
|
-
/** Specify which color palette to use
|
|
33
|
-
|
|
36
|
+
/** Specify which color palette to use
|
|
37
|
+
* @default accent
|
|
38
|
+
* @note `first`, `second`, `success` is deprecated
|
|
39
|
+
*/
|
|
40
|
+
color?: "accent" | "neutral" | OldColors | "danger" | undefined;
|
|
34
41
|
/**
|
|
35
42
|
* Size
|
|
36
|
-
* @default
|
|
43
|
+
* @default md
|
|
37
44
|
* @note `small`, `medium`, `large` is deprecated
|
|
38
45
|
*/
|
|
39
46
|
size?: "sm" | "md" | "lg" | OldButtonSizes | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAMlD,KAAK,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAMlD,KAAK,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AACnD,KAAK,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEhD,MAAM,MAAM,WAAW,GAAG;IACxB,mCAAmC;IACnC,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC/C;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;IACpD;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,cAAc,CAAC;IAC3C,0DAA0D;IAC1D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE5C;;GAEG;AACH,eAAO,MAAM,MAAM;IA7BjB,mCAAmC;;IAEnC;;;OAGG;;IAEH;;;;OAIG;;IAEH,0DAA0D;;IAE1D;;OAEG;;IAEH;;;OAGG;;+FA6CJ,CAAC"}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import type { ReactNode, HTMLAttributes } from 'react';
|
|
2
|
+
type OldColors = 'first' | 'second' | 'third';
|
|
2
3
|
export type CardProps = {
|
|
3
4
|
/**
|
|
4
5
|
* Changes background & border color
|
|
5
6
|
* @default neutral
|
|
6
7
|
*/
|
|
7
|
-
color?: 'neutral' | 'subtle' | '
|
|
8
|
+
color?: 'neutral' | 'subtle' | 'brand1' | 'brand2' | 'brand3' | OldColors;
|
|
8
9
|
/**
|
|
9
10
|
* Change the default rendered element for the one passed as a child, merging their props and behavior.
|
|
10
11
|
* @default false
|
|
@@ -27,7 +28,7 @@ export declare const Card: import("react").ForwardRefExoticComponent<{
|
|
|
27
28
|
* Changes background & border color
|
|
28
29
|
* @default neutral
|
|
29
30
|
*/
|
|
30
|
-
color?: "
|
|
31
|
+
color?: "neutral" | "brand1" | "brand2" | "brand3" | "subtle" | OldColors | undefined;
|
|
31
32
|
/**
|
|
32
33
|
* Change the default rendered element for the one passed as a child, merging their props and behavior.
|
|
33
34
|
* @default false
|
|
@@ -45,4 +46,5 @@ export declare const Card: import("react").ForwardRefExoticComponent<{
|
|
|
45
46
|
*/
|
|
46
47
|
href?: undefined;
|
|
47
48
|
} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
|
|
49
|
+
export {};
|
|
48
50
|
//# sourceMappingURL=Card.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAOvD,KAAK,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE9C,MAAM,MAAM,SAAS,GAAG;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;IAC1E;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oGAAoG;IACpG,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC;CACd,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,eAAO,MAAM,IAAI;IAxBf;;;OAGG;;IAEH;;;OAGG;;IAEH;;;OAGG;;IAEH,oGAAoG;cAC1F,SAAS;IAEnB;;OAEG;;mFAuBJ,CAAC"}
|
|
@@ -3,7 +3,7 @@ import { Button } from '../Button';
|
|
|
3
3
|
export type DropdownMenuTriggerProps = React.ComponentPropsWithRef<typeof Button>;
|
|
4
4
|
export declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<Omit<{
|
|
5
5
|
variant?: "primary" | "secondary" | "tertiary" | undefined;
|
|
6
|
-
color?: "first" | "second" | "success" | "danger" | undefined;
|
|
6
|
+
color?: "accent" | "neutral" | ("first" | "second" | "success") | "danger" | undefined;
|
|
7
7
|
size?: "sm" | "md" | "lg" | ("small" | "medium" | "large") | undefined;
|
|
8
8
|
fullWidth?: boolean | undefined;
|
|
9
9
|
icon?: boolean | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ErrorSummaryHeading.d.ts","sourceRoot":"","sources":["../../../../src/components/ErrorSummary/ErrorSummaryHeading.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAKhD,MAAM,MAAM,wBAAwB,GAAG,gBAAgB,CAAC;AAExD,eAAO,MAAM,mBAAmB;sBAG7B,wBAAwB;;
|
|
1
|
+
{"version":3,"file":"ErrorSummaryHeading.d.ts","sourceRoot":"","sources":["../../../../src/components/ErrorSummary/ErrorSummaryHeading.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAKhD,MAAM,MAAM,wBAAwB,GAAG,gBAAgB,CAAC;AAExD,eAAO,MAAM,mBAAmB;sBAG7B,wBAAwB;;CAgB1B,CAAC"}
|
|
@@ -4,7 +4,10 @@ export type LinkProps = {
|
|
|
4
4
|
children: ReactNode;
|
|
5
5
|
/** Custom class name for the link. This will be appended to the design system class names. */
|
|
6
6
|
className?: string;
|
|
7
|
-
/**
|
|
7
|
+
/**
|
|
8
|
+
* Inverts the color of the link. Use this on dark backgrounds.
|
|
9
|
+
* @deprecated Use `data-ds-theme="dark"` instead.
|
|
10
|
+
*/
|
|
8
11
|
inverted?: boolean;
|
|
9
12
|
/** The URL that the link points to. This can also be an email address (starting with `mailto:`) or a phone number (staring with `tel:`). */
|
|
10
13
|
href?: string;
|
|
@@ -19,7 +22,10 @@ export declare const Link: import("react").ForwardRefExoticComponent<{
|
|
|
19
22
|
children: ReactNode;
|
|
20
23
|
/** Custom class name for the link. This will be appended to the design system class names. */
|
|
21
24
|
className?: string | undefined;
|
|
22
|
-
/**
|
|
25
|
+
/**
|
|
26
|
+
* Inverts the color of the link. Use this on dark backgrounds.
|
|
27
|
+
* @deprecated Use `data-ds-theme="dark"` instead.
|
|
28
|
+
*/
|
|
23
29
|
inverted?: boolean | undefined;
|
|
24
30
|
/** The URL that the link points to. This can also be an email address (starting with `mailto:`) or a phone number (staring with `tel:`). */
|
|
25
31
|
href?: string | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../src/components/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAK7D,MAAM,MAAM,SAAS,GAAG;IACtB,8CAA8C;IAC9C,QAAQ,EAAE,SAAS,CAAC;IAEpB,8FAA8F;IAC9F,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB
|
|
1
|
+
{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../src/components/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAK7D,MAAM,MAAM,SAAS,GAAG;IACtB,8CAA8C;IAC9C,QAAQ,EAAE,SAAS,CAAC;IAEpB,8FAA8F;IAC9F,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,4IAA4I;IAC5I,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE5C,eAAO,MAAM,IAAI;IArBf,8CAA8C;cACpC,SAAS;IAEnB,8FAA8F;;IAG9F;;;OAGG;;IAGH,4IAA4I;;IAE5I;;;OAGG;;+FAmBJ,CAAC"}
|
|
@@ -2,7 +2,7 @@ import { type HeadingProps } from '../Typography';
|
|
|
2
2
|
export type ListHeadingProps = HeadingProps;
|
|
3
3
|
export declare const ListHeading: import("react").ForwardRefExoticComponent<{
|
|
4
4
|
level?: 1 | 2 | 3 | 4 | 5 | 6 | undefined;
|
|
5
|
-
size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" |
|
|
5
|
+
size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | ("xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge") | undefined;
|
|
6
6
|
spacing?: boolean | undefined;
|
|
7
7
|
asChild?: boolean | undefined;
|
|
8
8
|
} & import("react").HTMLAttributes<HTMLHeadingElement> & import("react").RefAttributes<HTMLHeadingElement>>;
|
|
@@ -3,7 +3,7 @@ import { Button } from '../Button';
|
|
|
3
3
|
export type ModalTriggerProps = React.ComponentPropsWithRef<typeof Button>;
|
|
4
4
|
export declare const ModalTrigger: React.ForwardRefExoticComponent<Omit<{
|
|
5
5
|
variant?: "primary" | "secondary" | "tertiary" | undefined;
|
|
6
|
-
color?: "first" | "second" | "success" | "danger" | undefined;
|
|
6
|
+
color?: "accent" | "neutral" | ("first" | "second" | "success") | "danger" | undefined;
|
|
7
7
|
size?: "sm" | "md" | "lg" | ("small" | "medium" | "large") | undefined;
|
|
8
8
|
fullWidth?: boolean | undefined;
|
|
9
9
|
icon?: boolean | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Pagination/PaginationButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAK7C,MAAM,MAAM,qBAAqB,GAAG;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;AAEvC,eAAO,MAAM,gBAAgB;IAP3B;;;OAGG;;
|
|
1
|
+
{"version":3,"file":"PaginationButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Pagination/PaginationButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAK7C,MAAM,MAAM,qBAAqB,GAAG;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;AAEvC,eAAO,MAAM,gBAAgB;IAP3B;;;OAGG;;0FAmBH,CAAC"}
|
|
@@ -3,7 +3,7 @@ import { Button } from '../Button';
|
|
|
3
3
|
export type PopoverTriggerProps = React.ComponentPropsWithRef<typeof Button>;
|
|
4
4
|
export declare const PopoverTrigger: React.ForwardRefExoticComponent<Omit<{
|
|
5
5
|
variant?: "primary" | "secondary" | "tertiary" | undefined;
|
|
6
|
-
color?: "first" | "second" | "success" | "danger" | undefined;
|
|
6
|
+
color?: "accent" | "neutral" | ("first" | "second" | "success") | "danger" | undefined;
|
|
7
7
|
size?: "sm" | "md" | "lg" | ("small" | "medium" | "large") | undefined;
|
|
8
8
|
fullWidth?: boolean | undefined;
|
|
9
9
|
icon?: boolean | undefined;
|
|
@@ -10,7 +10,11 @@ export type SpinnerProps = {
|
|
|
10
10
|
* @note `xxsmall`, `xsmall`, `small`, `medium`, `large`, `xlarge` is deprecated
|
|
11
11
|
*/
|
|
12
12
|
size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | OldSpinnerSizes;
|
|
13
|
-
/**
|
|
13
|
+
/**
|
|
14
|
+
* Spinner appearance
|
|
15
|
+
* @default default
|
|
16
|
+
* @note `inverted` is deprecated
|
|
17
|
+
*/
|
|
14
18
|
variant?: 'default' | 'interaction' | 'inverted';
|
|
15
19
|
} & React.ComponentPropsWithoutRef<'svg'>;
|
|
16
20
|
/** Spinner component used for indicating busy or indeterminate loading */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAMpC,KAAK,eAAe,GAChB,SAAS,GACT,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,QAAQ,CAAC;AAab,MAAM,MAAM,YAAY,GAAG;IACzB,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,eAAe,CAAC;IAClE
|
|
1
|
+
{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAMpC,KAAK,eAAe,GAChB,SAAS,GACT,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,QAAQ,CAAC;AAab,MAAM,MAAM,YAAY,GAAG;IACzB,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,eAAe,CAAC;IAClE;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,GAAG,UAAU,CAAC;CAClD,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;AAE1C,2EAA2E;AAC3E,eAAO,MAAM,OAAO;oDAMjB,YAAY,GAAG,WAAW;;CAuD5B,CAAC"}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import type { HTMLAttributes } from 'react';
|
|
2
2
|
import type { ParagraphProps } from '../Typography';
|
|
3
3
|
type Size = Exclude<ParagraphProps['size'], 'xsmall' | 'xs'>;
|
|
4
|
+
type OldColors = 'first' | 'second' | 'third';
|
|
4
5
|
export type TagProps = {
|
|
5
6
|
/** Color of the tag
|
|
6
7
|
* @default neutral
|
|
7
8
|
*/
|
|
8
|
-
color?: 'neutral' | 'success' | 'warning' | 'danger' | 'info' | '
|
|
9
|
+
color?: 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'brand1' | 'brand2' | 'brand3' | OldColors;
|
|
9
10
|
/**
|
|
10
11
|
* Size of the tag
|
|
11
12
|
* @default md
|
|
@@ -17,7 +18,7 @@ export declare const Tag: import("react").ForwardRefExoticComponent<{
|
|
|
17
18
|
/** Color of the tag
|
|
18
19
|
* @default neutral
|
|
19
20
|
*/
|
|
20
|
-
color?: "
|
|
21
|
+
color?: "neutral" | "brand1" | "brand2" | "brand3" | "success" | "danger" | "info" | "warning" | OldColors | undefined;
|
|
21
22
|
/**
|
|
22
23
|
* Size of the tag
|
|
23
24
|
* @default md
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAIpD,KAAK,IAAI,GAAG,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAIpD,KAAK,IAAI,GAAG,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC,CAAC;AAC7D,KAAK,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE9C,MAAM,MAAM,QAAQ,GAAG;IACrB;;OAEG;IACH,KAAK,CAAC,EACF,SAAS,GACT,SAAS,GACT,SAAS,GACT,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,SAAS,CAAC;IACd;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;CACb,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAEpC,eAAO,MAAM,GAAG;IArBd;;OAEG;;IAWH;;;;OAIG;WACI,IAAI;qFA4BZ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleGroupItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/ToggleGroup/ToggleGroupItem/ToggleGroupItem.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAMhD,MAAM,MAAM,oBAAoB,GAAG;IACjC,yGAAyG;IACzG,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;AAE/B,eAAO,MAAM,eAAe;IAJ1B,yGAAyG;;
|
|
1
|
+
{"version":3,"file":"ToggleGroupItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/ToggleGroup/ToggleGroupItem/ToggleGroupItem.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAMhD,MAAM,MAAM,oBAAoB,GAAG;IACjC,yGAAyG;IACzG,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;AAE/B,eAAO,MAAM,eAAe;IAJ1B,yGAAyG;;kFA4BzG,CAAC"}
|
|
@@ -23,7 +23,10 @@ export type TooltipProps = {
|
|
|
23
23
|
open?: boolean;
|
|
24
24
|
/** Whether the tooltip is open by default or not. */
|
|
25
25
|
defaultOpen?: boolean;
|
|
26
|
-
/**
|
|
26
|
+
/**
|
|
27
|
+
* Inverts the color of the tooltip. Use this on dark backgrounds.
|
|
28
|
+
* @deprecated Use the `data-ds-theme` attribute instead.
|
|
29
|
+
*/
|
|
27
30
|
inverted?: boolean;
|
|
28
31
|
/**
|
|
29
32
|
* Portals the floating element outside of the app root and into the body.
|
|
@@ -55,7 +58,10 @@ export declare const Tooltip: React.ForwardRefExoticComponent<{
|
|
|
55
58
|
open?: boolean | undefined;
|
|
56
59
|
/** Whether the tooltip is open by default or not. */
|
|
57
60
|
defaultOpen?: boolean | undefined;
|
|
58
|
-
/**
|
|
61
|
+
/**
|
|
62
|
+
* Inverts the color of the tooltip. Use this on dark backgrounds.
|
|
63
|
+
* @deprecated Use the `data-ds-theme` attribute instead.
|
|
64
|
+
*/
|
|
59
65
|
inverted?: boolean | undefined;
|
|
60
66
|
/**
|
|
61
67
|
* Portals the floating element outside of the app root and into the body.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAuB/B,MAAM,MAAM,YAAY,GAAG;IACzB;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAChE,6BAA6B;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAChD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,qDAAqD;IACrD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB
|
|
1
|
+
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAuB/B,MAAM,MAAM,YAAY,GAAG;IACzB;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAChE,6BAA6B;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAChD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,qDAAqD;IACrD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO;IAnClB;;;OAGG;cACO,MAAM,YAAY,GAAG,MAAM,aAAa,CAAC,WAAW,CAAC;IAC/D,6BAA6B;aACpB,MAAM;IACf;;;OAGG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH,qDAAqD;;IAErD;;;OAGG;;IAEH;;;;OAIG;;yEAgHJ,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { HTMLAttributes } from 'react';
|
|
2
|
-
type OldHeadingSizes = 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge'
|
|
2
|
+
type OldHeadingSizes = 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge';
|
|
3
3
|
export type HeadingProps = {
|
|
4
4
|
/** Heading level. This will translate into any h1-6 level unless `as` is defined */
|
|
5
5
|
level?: 1 | 2 | 3 | 4 | 5 | 6;
|
|
@@ -8,7 +8,7 @@ export type HeadingProps = {
|
|
|
8
8
|
*
|
|
9
9
|
* @note `xxsmall`, `xsmall`, `small`, `medium`, `large`, `xlarge`, `2xlarge`, `3xlarge` is deprecated
|
|
10
10
|
*/
|
|
11
|
-
size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' |
|
|
11
|
+
size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | OldHeadingSizes;
|
|
12
12
|
/** Adds margin-bottom */
|
|
13
13
|
spacing?: boolean;
|
|
14
14
|
/**
|
|
@@ -26,7 +26,7 @@ export declare const Heading: import("react").ForwardRefExoticComponent<{
|
|
|
26
26
|
*
|
|
27
27
|
* @note `xxsmall`, `xsmall`, `small`, `medium`, `large`, `xlarge`, `2xlarge`, `3xlarge` is deprecated
|
|
28
28
|
*/
|
|
29
|
-
size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" |
|
|
29
|
+
size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | OldHeadingSizes | undefined;
|
|
30
30
|
/** Adds margin-bottom */
|
|
31
31
|
spacing?: boolean | undefined;
|
|
32
32
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../../../src/components/Typography/Heading/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,cAAc,EAAE,MAAM,OAAO,CAAC;AAOzD,KAAK,eAAe,GAChB,SAAS,GACT,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,SAAS,
|
|
1
|
+
{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../../../src/components/Typography/Heading/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,cAAc,EAAE,MAAM,OAAO,CAAC;AAOzD,KAAK,eAAe,GAChB,SAAS,GACT,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,SAAS,CAAC;AAEd,MAAM,MAAM,YAAY,GAAG;IACzB,oFAAoF;IACpF,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC9B;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,eAAe,CAAC;IAC1E,yBAAyB;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,cAAc,CAAC,kBAAkB,CAAC,CAAC;AAEvC,uEAAuE;AACvE,eAAO,MAAM,OAAO;IAlBlB,oFAAoF;;IAEpF;;;;OAIG;;IAEH,yBAAyB;;IAEzB;;;OAGG;;2FAuBJ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getColor.d.ts","sourceRoot":"","sources":["../../../src/utilities/getColor.ts"],"names":[],"mappings":"AAAA,wBAAgB,QAAQ,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,CAAC,EAAE,QAAQ,6DAsBpD"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare function getSize(size:
|
|
1
|
+
export declare function getSize<T>(size: T): T | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
|
|
2
2
|
//# sourceMappingURL=getSize.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getSize.d.ts","sourceRoot":"","sources":["../../../src/utilities/getSize.ts"],"names":[],"mappings":"AAAA,wBAAgB,OAAO,CAAC,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"getSize.d.ts","sourceRoot":"","sources":["../../../src/utilities/getSize.ts"],"names":[],"mappings":"AAAA,wBAAgB,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,gFA2BjC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utilities/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utilities/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@digdir/designsystemet-react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.0-rc.1",
|
|
4
4
|
"description": "React components for Designsystemet",
|
|
5
5
|
"author": "Designsystemet team",
|
|
6
6
|
"repository": "https://github.com/digdir/designsystemet",
|
|
@@ -39,5 +39,5 @@
|
|
|
39
39
|
"rollup": "^4.12.1",
|
|
40
40
|
"typescript": "^5.4.2"
|
|
41
41
|
},
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "8840f56d037879099652b2c7275ce08e93584f74"
|
|
43
43
|
}
|
|
File without changes
|
|
File without changes
|