reshaped 3.9.0-canary.15 → 3.9.0-canary.17
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/bundle.js +2 -2
- package/dist/components/Card/Card.d.ts +1 -1
- package/dist/components/Card/Card.types.d.ts +5 -5
- package/dist/components/Flyout/Flyout.constants.d.ts +1 -0
- package/dist/components/Flyout/Flyout.constants.js +1 -0
- package/dist/components/Flyout/FlyoutControlled.js +16 -5
- package/dist/components/Flyout/utilities/calculatePosition.js +17 -10
- package/dist/components/Flyout/utilities/flyout.js +15 -3
- package/dist/components/Grid/Grid.types.d.ts +4 -4
- package/dist/components/Text/Text.d.ts +1 -1
- package/dist/components/Text/Text.types.d.ts +3 -3
- package/dist/components/View/View.types.d.ts +4 -4
- package/dist/themes/figma/theme.css +1 -1
- package/dist/themes/reshaped/theme.css +1 -1
- package/dist/themes/slate/theme.css +1 -1
- package/dist/types/global.d.ts +1 -1
- package/package.json +4 -98
- package/README.md +0 -24
|
@@ -7,10 +7,10 @@ declare const Card: React.ForwardRefExoticComponent<{
|
|
|
7
7
|
children?: React.ReactNode;
|
|
8
8
|
onClick?: import("../Actionable").ActionableProps["onClick"];
|
|
9
9
|
href?: string;
|
|
10
|
-
as?: keyof React.JSX.IntrinsicElements | undefined;
|
|
11
10
|
className?: import("../../types/global").ClassName;
|
|
12
11
|
attributes?: (import("../..").Attributes<keyof React.JSX.IntrinsicElements> & ((import("../..").Attributes<"button"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "form" | "slot" | "style" | "title" | "disabled" | "key" | "value" | "hidden" | "color" | "content" | "children" | "className" | "ref" | "aria-orientation" | "role" | "translate" | "suppressHydrationWarning" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dir" | "name" | "type" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture"> & {
|
|
13
12
|
ref?: import("../Actionable/Actionable.types").AttributesRef;
|
|
14
13
|
}) | undefined)) | undefined;
|
|
14
|
+
as?: keyof React.JSX.IntrinsicElements | undefined;
|
|
15
15
|
} & Pick<import("../View").ViewProps, "height"> & React.RefAttributes<HTMLElement>>;
|
|
16
16
|
export default Card;
|
|
@@ -2,7 +2,7 @@ import type { ActionableProps } from "../Actionable";
|
|
|
2
2
|
import type { ViewProps } from "../View";
|
|
3
3
|
import type React from "react";
|
|
4
4
|
import type * as G from "../../types/global";
|
|
5
|
-
export type Props<TagName extends keyof React.JSX.IntrinsicElements =
|
|
5
|
+
export type Props<TagName extends keyof React.JSX.IntrinsicElements | void = void> = {
|
|
6
6
|
/** Component padding, base unit multiplier */
|
|
7
7
|
padding?: G.Responsive<number>;
|
|
8
8
|
/** Remove side borders and apply negative margins, base unit multiplier */
|
|
@@ -17,12 +17,12 @@ export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
|
|
|
17
17
|
onClick?: ActionableProps["onClick"];
|
|
18
18
|
/** URL to navigate to when the component is clicked, turns component into a link */
|
|
19
19
|
href?: string;
|
|
20
|
-
/** Custom component tag name
|
|
21
|
-
* @default "div"
|
|
22
|
-
*/
|
|
23
|
-
as?: TagName;
|
|
24
20
|
/** Additional classname for the root element */
|
|
25
21
|
className?: G.ClassName;
|
|
26
22
|
/** Additional attributes for the root element */
|
|
27
23
|
attributes?: G.Attributes<TagName> & ActionableProps["attributes"];
|
|
24
|
+
/** Custom component tag name
|
|
25
|
+
* @default "div"
|
|
26
|
+
*/
|
|
27
|
+
as?: TagName extends keyof React.JSX.IntrinsicElements ? TagName : keyof React.JSX.IntrinsicElements;
|
|
28
28
|
} & Pick<ViewProps, "height">;
|
|
@@ -104,7 +104,7 @@ const FlyoutControlled = (props) => {
|
|
|
104
104
|
return;
|
|
105
105
|
onCloseRef.current?.({ reason: options.reason });
|
|
106
106
|
if (options?.closeParents) {
|
|
107
|
-
parentFlyoutContext?.handleClose?.({});
|
|
107
|
+
parentFlyoutContext?.handleClose?.({ closeParents: true, reason: options.reason });
|
|
108
108
|
}
|
|
109
109
|
}, [isRendered, isDismissible, triggerType, onCloseRef, disabled, parentFlyoutContext]);
|
|
110
110
|
/**
|
|
@@ -144,9 +144,13 @@ const FlyoutControlled = (props) => {
|
|
|
144
144
|
cooldown.warm();
|
|
145
145
|
timerRef.current = setTimeout(() => {
|
|
146
146
|
handleOpen();
|
|
147
|
-
}, groupTimeouts && cooldown.status === "warming"
|
|
147
|
+
}, groupTimeouts && cooldown.status === "warming"
|
|
148
|
+
? timeouts.mouseEnter
|
|
149
|
+
: isSubmenu
|
|
150
|
+
? timeouts.mouseEnter
|
|
151
|
+
: 0);
|
|
148
152
|
}
|
|
149
|
-
}, [clearTimer, handleOpen, groupTimeouts]);
|
|
153
|
+
}, [clearTimer, handleOpen, groupTimeouts, isSubmenu]);
|
|
150
154
|
const handleMouseLeave = React.useCallback((e) => {
|
|
151
155
|
if (e.relatedTarget === flyoutElRef.current ||
|
|
152
156
|
(e.relatedTarget instanceof Node && flyoutElRef.current?.contains(e.relatedTarget)))
|
|
@@ -156,8 +160,15 @@ const FlyoutControlled = (props) => {
|
|
|
156
160
|
return;
|
|
157
161
|
cooldown.cool();
|
|
158
162
|
clearTimer();
|
|
159
|
-
|
|
160
|
-
|
|
163
|
+
if (isSubmenu) {
|
|
164
|
+
timerRef.current = setTimeout(() => {
|
|
165
|
+
handleClose({});
|
|
166
|
+
}, timeouts.mouseLeave);
|
|
167
|
+
}
|
|
168
|
+
else {
|
|
169
|
+
handleClose({});
|
|
170
|
+
}
|
|
171
|
+
}, [clearTimer, handleClose, triggerElRef, flyoutElRef, isSubmenu]);
|
|
161
172
|
const handleTriggerClick = React.useCallback(() => {
|
|
162
173
|
if (!isRendered) {
|
|
163
174
|
handleOpen();
|
|
@@ -4,7 +4,9 @@ import { getRTLPosition, centerBySize } from "./helpers.js";
|
|
|
4
4
|
* Calculate styles for the current position
|
|
5
5
|
*/
|
|
6
6
|
const calculatePosition = (args) => {
|
|
7
|
-
const { triggerBounds, flyoutBounds, containerBounds, position: passedPosition, rtl, width: passedWidth, contentGap = 0, contentShift = 0, passedContainer, fallbackAdjustLayout,
|
|
7
|
+
const { triggerBounds, flyoutBounds, containerBounds, position: passedPosition, rtl, width: passedWidth, contentGap = 0, contentShift = 0, passedContainer, fallbackAdjustLayout,
|
|
8
|
+
// fallbackMinWidth,
|
|
9
|
+
fallbackMinHeight, } = args;
|
|
8
10
|
const isFullWidth = passedWidth === "full" || passedWidth === "100%";
|
|
9
11
|
let left = 0;
|
|
10
12
|
let top = 0;
|
|
@@ -137,15 +139,20 @@ const calculatePosition = (args) => {
|
|
|
137
139
|
if (bottom !== null)
|
|
138
140
|
bottom = bottom + (flyoutHeight - height);
|
|
139
141
|
}
|
|
140
|
-
if
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
142
|
+
// TODO: Decide if we need horizontal scrolling for the fallbacks, might be a bad practice anyways
|
|
143
|
+
// if (updatedOverflow.left > 0) {
|
|
144
|
+
// width = Math.max(
|
|
145
|
+
// fallbackMinWidth ? parseInt(fallbackMinWidth) : 0,
|
|
146
|
+
// flyoutWidth - updatedOverflow.left
|
|
147
|
+
// );
|
|
148
|
+
// left = left + (flyoutWidth - width);
|
|
149
|
+
// } else if (updatedOverflow.right > 0) {
|
|
150
|
+
// width = Math.max(
|
|
151
|
+
// fallbackMinWidth ? parseInt(fallbackMinWidth) : 0,
|
|
152
|
+
// flyoutWidth - updatedOverflow.right
|
|
153
|
+
// );
|
|
154
|
+
// if (right !== null) right = right + (flyoutWidth - width);
|
|
155
|
+
// }
|
|
149
156
|
}
|
|
150
157
|
if (isFullWidth) {
|
|
151
158
|
left = SCREEN_OFFSET;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { getRectFromCoordinates, getShadowRoot, findClosestPositionContainer } from "../../../utilities/dom/index.js";
|
|
2
2
|
import { resetStyles } from "../Flyout.constants.js";
|
|
3
3
|
import calculatePosition from "./calculatePosition.js";
|
|
4
|
+
import { SCREEN_OFFSET } from "./constants.js";
|
|
4
5
|
import getPositionFallbacks from "./getPositionFallbacks.js";
|
|
5
6
|
import isFullyVisible from "./isFullyVisible.js";
|
|
6
7
|
/**
|
|
@@ -33,8 +34,6 @@ const flyout = (args) => {
|
|
|
33
34
|
const shadowRoot = triggerEl && getShadowRoot(triggerEl);
|
|
34
35
|
// Insert inside shadow root if possible to make sure styles are applied correctly
|
|
35
36
|
(shadowRoot || document.body).appendChild(targetClone);
|
|
36
|
-
const cloneRect = targetClone.getBoundingClientRect();
|
|
37
|
-
const flyoutBounds = { width: cloneRect.width, height: cloneRect.height };
|
|
38
37
|
const closestFixedContainer = !passedContainer && triggerEl ? findClosestPositionContainer({ el: triggerEl }) : undefined;
|
|
39
38
|
const container = passedContainer ||
|
|
40
39
|
// Render inside fixed position container automatically to keep their position synced on scroll
|
|
@@ -42,6 +41,19 @@ const flyout = (args) => {
|
|
|
42
41
|
document.body;
|
|
43
42
|
const renderContainerBounds = container.getBoundingClientRect();
|
|
44
43
|
const applyPosition = (position, options) => {
|
|
44
|
+
const widthOption = options?.width || width;
|
|
45
|
+
// If there is a width override, apply it to calculate the position and the height correctly
|
|
46
|
+
if (widthOption === "full") {
|
|
47
|
+
targetClone.style.width = `calc(100% - ${SCREEN_OFFSET * 2}px)`;
|
|
48
|
+
}
|
|
49
|
+
else if (widthOption === "trigger") {
|
|
50
|
+
targetClone.style.width = `${resolvedTriggerBounds.width}px`;
|
|
51
|
+
}
|
|
52
|
+
else {
|
|
53
|
+
targetClone.style.width = "";
|
|
54
|
+
}
|
|
55
|
+
const cloneRect = targetClone.getBoundingClientRect();
|
|
56
|
+
const flyoutBounds = { width: cloneRect.width, height: cloneRect.height };
|
|
45
57
|
return calculatePosition({
|
|
46
58
|
triggerBounds: resolvedTriggerBounds,
|
|
47
59
|
flyoutBounds,
|
|
@@ -50,7 +62,7 @@ const flyout = (args) => {
|
|
|
50
62
|
contentGap: contentGap * unitModifier,
|
|
51
63
|
contentShift: contentShift * unitModifier,
|
|
52
64
|
rtl,
|
|
53
|
-
width:
|
|
65
|
+
width: widthOption,
|
|
54
66
|
passedContainer: passedContainer ||
|
|
55
67
|
(closestFixedContainer !== document.body ? closestFixedContainer : undefined),
|
|
56
68
|
fallbackAdjustLayout,
|
|
@@ -2,7 +2,7 @@ import type { Property } from "csstype";
|
|
|
2
2
|
import type React from "react";
|
|
3
3
|
import type * as TStyles from "../../styles/types";
|
|
4
4
|
import type * as G from "../../types/global";
|
|
5
|
-
export type Props<TagName extends keyof React.JSX.IntrinsicElements =
|
|
5
|
+
export type Props<TagName extends keyof React.JSX.IntrinsicElements | void = void> = {
|
|
6
6
|
/** Gap between grid items */
|
|
7
7
|
gap?: G.Responsive<number>;
|
|
8
8
|
/** Horizontal gap between grid items */
|
|
@@ -34,13 +34,13 @@ export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
|
|
|
34
34
|
/** Node for inserting children */
|
|
35
35
|
children?: React.ReactNode;
|
|
36
36
|
/** Custom root element html tag */
|
|
37
|
-
as?: TagName;
|
|
37
|
+
as?: TagName extends keyof React.JSX.IntrinsicElements ? TagName : keyof React.JSX.IntrinsicElements;
|
|
38
38
|
/** Additional classname for the root element */
|
|
39
39
|
className?: G.ClassName;
|
|
40
40
|
/** Additional attributes for the root element */
|
|
41
41
|
attributes?: G.Attributes<TagName>;
|
|
42
42
|
};
|
|
43
|
-
export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements =
|
|
43
|
+
export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements | void = void> = {
|
|
44
44
|
/** Grid area for template syntax */
|
|
45
45
|
area?: string;
|
|
46
46
|
/** Starting column position */
|
|
@@ -58,7 +58,7 @@ export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements = "div">
|
|
|
58
58
|
/** Node for inserting children */
|
|
59
59
|
children?: React.ReactNode;
|
|
60
60
|
/** Custom item element html tag */
|
|
61
|
-
as?: TagName;
|
|
61
|
+
as?: TagName extends keyof React.JSX.IntrinsicElements ? TagName : keyof React.JSX.IntrinsicElements;
|
|
62
62
|
/** Additional classname for the item element */
|
|
63
63
|
className?: G.ClassName;
|
|
64
64
|
/** Additional attributes for the item element */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type * as T from "./Text.types";
|
|
2
2
|
declare const Text: {
|
|
3
|
-
<As extends keyof React.JSX.IntrinsicElements>(props: T.Props<As>): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
<As extends keyof React.JSX.IntrinsicElements = "div">(props: T.Props<As>): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
displayName: string;
|
|
5
5
|
};
|
|
6
6
|
export default Text;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type React from "react";
|
|
2
2
|
import type * as G from "../../types/global";
|
|
3
3
|
export type Variant = "title-1" | "title-2" | "title-3" | "title-4" | "title-5" | "title-6" | "featured-1" | "featured-2" | "featured-3" | "body-1" | "body-2" | "body-3" | "caption-1" | "caption-2";
|
|
4
|
-
export type Props<TagName extends keyof React.JSX.IntrinsicElements =
|
|
4
|
+
export type Props<TagName extends keyof React.JSX.IntrinsicElements | void = void> = {
|
|
5
5
|
/** Text render variant */
|
|
6
6
|
variant?: G.Responsive<Variant>;
|
|
7
7
|
/** Text font weight */
|
|
@@ -20,12 +20,12 @@ export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
|
|
|
20
20
|
maxLines?: number;
|
|
21
21
|
/** Render as a numeric value to preserve the width of each character */
|
|
22
22
|
numeric?: true;
|
|
23
|
-
/** Render as a different html tag */
|
|
24
|
-
as?: TagName;
|
|
25
23
|
/** Node for inserting children */
|
|
26
24
|
children?: React.ReactNode;
|
|
27
25
|
/** Additional classname for the root element */
|
|
28
26
|
className?: G.ClassName;
|
|
29
27
|
/** Additional attributes for the root element */
|
|
30
28
|
attributes?: G.Attributes<TagName>;
|
|
29
|
+
/** Render as a different html tag */
|
|
30
|
+
as?: TagName extends keyof React.JSX.IntrinsicElements ? TagName : keyof React.JSX.IntrinsicElements;
|
|
31
31
|
};
|
|
@@ -3,11 +3,11 @@ import type * as TStyles from "../../styles/types";
|
|
|
3
3
|
import type * as G from "../../types/global";
|
|
4
4
|
type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "auto";
|
|
5
5
|
export type Direction = "row" | "column" | "row-reverse" | "column-reverse";
|
|
6
|
-
export type Props<TagName extends keyof React.JSX.IntrinsicElements =
|
|
6
|
+
export type Props<TagName extends keyof React.JSX.IntrinsicElements | void = void> = {
|
|
7
7
|
/** Node for inserting the content */
|
|
8
8
|
children?: React.ReactNode;
|
|
9
9
|
/** Render as a different element */
|
|
10
|
-
as?: TagName;
|
|
10
|
+
as?: TagName extends keyof React.JSX.IntrinsicElements ? TagName : keyof React.JSX.IntrinsicElements;
|
|
11
11
|
/** Render a divider between each child */
|
|
12
12
|
divided?: boolean;
|
|
13
13
|
/** Flex direction for the content */
|
|
@@ -97,7 +97,7 @@ export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
|
|
|
97
97
|
/** Additional attributes for the root element */
|
|
98
98
|
attributes?: G.Attributes<TagName>;
|
|
99
99
|
} & Pick<ItemProps, "grow" | "shrink">;
|
|
100
|
-
export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements =
|
|
100
|
+
export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements | void = void> = {
|
|
101
101
|
/** Flex order of the item inside the parent */
|
|
102
102
|
order?: G.Responsive<number>;
|
|
103
103
|
/** Number of columns the item should span in the parent, View uses 12 columns */
|
|
@@ -109,7 +109,7 @@ export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements = "div">
|
|
|
109
109
|
/** Individual gap before the item, overrides the parent View gap */
|
|
110
110
|
gapBefore?: G.Responsive<number> | "auto";
|
|
111
111
|
/** Render as a different element */
|
|
112
|
-
as?: TagName;
|
|
112
|
+
as?: TagName extends keyof React.JSX.IntrinsicElements ? TagName : keyof React.JSX.IntrinsicElements;
|
|
113
113
|
/** Additional attributes for the root element */
|
|
114
114
|
attributes?: G.Attributes<TagName>;
|
|
115
115
|
/** Additional classname for the root element */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
[data-rs-theme~=figma]{--rs-font-family-title:
|
|
1
|
+
[data-rs-theme~=figma]{--rs-font-family-title:inter,blinkmacsystemfont,-apple-system,roboto,helvetica,arial,sans-serif;--rs-font-family-body:inter,blinkmacsystemfont,-apple-system,roboto,helvetica,arial,sans-serif;--rs-font-family-monospace:sfmono-regular,menlo,monaco,consolas,liberation mono,courier new,monospace;--rs-font-weight-regular:400;--rs-font-weight-medium:500;--rs-font-weight-semibold:600;--rs-font-weight-bold:700;--rs-font-weight-extrabold:800;--rs-font-weight-black:900;--rs-font-size-title-1:5rem;--rs-line-height-title-1:5.25rem;--rs-font-family-title-1:var(--rs-font-family-title);--rs-font-weight-title-1:var(--rs-font-weight-semibold);--rs-letter-spacing-title-1:normal;--rs-font-size-title-2:4rem;--rs-line-height-title-2:4.25rem;--rs-font-family-title-2:var(--rs-font-family-title);--rs-font-weight-title-2:var(--rs-font-weight-semibold);--rs-letter-spacing-title-2:normal;--rs-font-size-title-3:3.5rem;--rs-line-height-title-3:3.75rem;--rs-font-family-title-3:var(--rs-font-family-title);--rs-font-weight-title-3:var(--rs-font-weight-semibold);--rs-letter-spacing-title-3:normal;--rs-font-size-title-4:2.5rem;--rs-line-height-title-4:2.75rem;--rs-font-family-title-4:var(--rs-font-family-title);--rs-font-weight-title-4:var(--rs-font-weight-semibold);--rs-letter-spacing-title-4:normal;--rs-font-size-title-5:2.25rem;--rs-line-height-title-5:2.5rem;--rs-font-family-title-5:var(--rs-font-family-title);--rs-font-weight-title-5:var(--rs-font-weight-semibold);--rs-letter-spacing-title-5:normal;--rs-font-size-title-6:1.5rem;--rs-line-height-title-6:1.75rem;--rs-font-family-title-6:var(--rs-font-family-title);--rs-font-weight-title-6:var(--rs-font-weight-semibold);--rs-letter-spacing-title-6:normal;--rs-font-size-featured-1:1.375rem;--rs-line-height-featured-1:1.75rem;--rs-font-family-featured-1:var(--rs-font-family-body);--rs-letter-spacing-featured-1:normal;--rs-font-size-featured-2:1.25rem;--rs-line-height-featured-2:1.75rem;--rs-font-family-featured-2:var(--rs-font-family-body);--rs-letter-spacing-featured-2:normal;--rs-font-size-featured-3:1.125rem;--rs-line-height-featured-3:1.5rem;--rs-font-family-featured-3:var(--rs-font-family-body);--rs-letter-spacing-featured-3:normal;--rs-font-size-body-1:0.875rem;--rs-line-height-body-1:1.25rem;--rs-font-family-body-1:var(--rs-font-family-body);--rs-letter-spacing-body-1:normal;--rs-font-size-body-2:0.8125rem;--rs-line-height-body-2:1.25rem;--rs-font-family-body-2:var(--rs-font-family-body);--rs-letter-spacing-body-2:normal;--rs-font-size-body-3:0.6875rem;--rs-line-height-body-3:1rem;--rs-font-family-body-3:var(--rs-font-family-body);--rs-letter-spacing-body-3:normal;--rs-font-size-caption-1:0.6875rem;--rs-line-height-caption-1:1rem;--rs-font-family-caption-1:var(--rs-font-family-body);--rs-letter-spacing-caption-1:normal;--rs-font-size-caption-2:0.625rem;--rs-line-height-caption-2:0.75rem;--rs-font-family-caption-2:var(--rs-font-family-body);--rs-letter-spacing-caption-2:normal;--rs-unit-base:4px;--rs-unit-radius-small:4px;--rs-unit-radius-medium:4px;--rs-unit-radius-large:4px;--rs-unit-x1:4px;--rs-unit-x2:8px;--rs-unit-x3:12px;--rs-unit-x4:16px;--rs-unit-x5:20px;--rs-unit-x6:24px;--rs-unit-x7:28px;--rs-unit-x8:32px;--rs-unit-x9:36px;--rs-unit-x10:40px;--rs-radius-small:4px;--rs-radius-medium:8px;--rs-radius-large:12px;--rs-color-brand:#0d99ff;--rs-color-white:#fff;--rs-color-black:#000;--rs-color-on-background-primary:#fff;--rs-color-on-background-critical:oklch(0% 0 0deg);--rs-color-on-background-warning:oklch(0% 0 0deg);--rs-color-on-background-positive:oklch(0% 0 0deg);--rs-color-on-brand:oklch(0% 0 0deg);--rs-color-rgb-white:255,255,255;--rs-color-rgb-black:0,0,0;--rs-duration-rapid:100ms;--rs-duration-fast:200ms;--rs-duration-medium:300ms;--rs-duration-slow:400ms;--rs-easing-standard:cubic-bezier(0.4,0,0.2,1);--rs-easing-accelerate:cubic-bezier(0.4,0,1,1);--rs-easing-decelerate:cubic-bezier(0,0,0.2,1);--rs-shadow-raised:0px 1px 3px 0px rgba(0,0,0,.15);--rs-shadow-overlay:0px 10px 24px 0px rgba(0,0,0,.1),0px 2px 5px 0px rgba(0,0,0,.04);--rs-viewport-m-min:660;--rs-viewport-l-min:900;--rs-viewport-xl-min:1280;--rs-z-index-relative:10;--rs-z-index-absolute:100;--rs-z-index-fixed:200}[data-rs-theme~=figma][data-rs-color-mode=light]{--rs-color-background-primary:#0d99ff;--rs-color-background-primary-faded:#e5f4ff;--rs-color-border-primary:#007be5;--rs-color-border-primary-faded:#bde3ff;--rs-color-foreground-primary:#007be5;--rs-color-background-critical:#f24822;--rs-color-background-critical-faded:#ffe2e0;--rs-color-border-critical:#dc3412;--rs-color-border-critical-faded:#ffc7c2;--rs-color-foreground-critical:#dc3412;--rs-color-background-warning:#facc15;--rs-color-background-warning-faded:#fffae9;--rs-color-border-warning:#cfa90f;--rs-color-border-warning-faded:#ece2c4;--rs-color-foreground-warning:#7b6305;--rs-color-background-positive:#14ae5c;--rs-color-background-positive-faded:#daecdf;--rs-color-border-positive:#009951;--rs-color-border-positive-faded:#bbddc6;--rs-color-foreground-positive:#009951;--rs-color-background-neutral:#dfe2ea;--rs-color-background-neutral-faded:#f5f5f5;--rs-color-border-neutral:#e6e6e6;--rs-color-border-neutral-faded:#e6e6e6;--rs-color-foreground-neutral:#191919;--rs-color-foreground-neutral-faded:#474747;--rs-color-background-disabled:#e4e4e4;--rs-color-background-disabled-faded:#f5f5f5;--rs-color-border-disabled:#e6e6e6;--rs-color-foreground-disabled:#b2b2b2;--rs-color-background-elevation-base:#fff;--rs-color-background-elevation-raised:#fff;--rs-color-background-elevation-overlay:#fff;--rs-color-background-page:#fff;--rs-color-background-page-faded:#fafafa;--rs-color-rgb-background-primary:13.004999999999999,153,255;--rs-color-rgb-background-primary-faded:228.99,244.0095,255;--rs-color-rgb-background-critical:241.99499999999998,72.012,33.9915;--rs-color-rgb-background-critical-faded:255,226.0065,223.992;--rs-color-rgb-background-warning:250.002,204,21.012;--rs-color-rgb-background-warning-faded:255,250.002,232.99349999999998;--rs-color-rgb-background-positive:19.992,174.012,92.004;--rs-color-rgb-background-positive-faded:217.9995,236.0025,222.9975;--rs-color-on-background-neutral:oklch(0% 0 0deg);--rs-color-rgb-background-neutral:222.9975,226.0065,233.988;--rs-color-rgb-background-neutral-faded:245.004,245.004,245.004;--rs-color-rgb-background-disabled:227.9955,227.9955,227.9955;--rs-color-rgb-background-disabled-faded:245.004,245.004,245.004;--rs-color-rgb-background-elevation-base:255,255,255;--rs-color-rgb-background-elevation-raised:255,255,255;--rs-color-rgb-background-elevation-overlay:255,255,255;--rs-color-rgb-background-page:255,255,255;--rs-color-rgb-background-page-faded:250.002,250.002,250.002}[data-rs-theme~=figma][data-rs-color-mode=dark]{--rs-color-background-primary:#0c8ce9;--rs-color-background-primary-faded:#394360;--rs-color-border-primary:#7cc4f8;--rs-color-border-primary-faded:#2a4d72;--rs-color-foreground-primary:#7cc4f8;--rs-color-background-critical:#e03e1a;--rs-color-background-critical-faded:#60332a;--rs-color-border-critical:#fca397;--rs-color-border-critical-faded:#803226;--rs-color-foreground-critical:#fca397;--rs-color-background-warning:#f1c512;--rs-color-background-warning-faded:#2c271f;--rs-color-border-warning:#b4920a;--rs-color-border-warning-faded:#453c1e;--rs-color-foreground-warning:#b4920c;--rs-color-background-positive:#198f51;--rs-color-background-positive-faded:#3d5749;--rs-color-border-positive:#79d297;--rs-color-border-positive-faded:#086338;--rs-color-foreground-positive:#79d297;--rs-color-background-neutral:#444;--rs-color-background-neutral-faded:#383838;--rs-color-border-neutral:#444;--rs-color-border-neutral-faded:#444;--rs-color-foreground-neutral:#fff;--rs-color-foreground-neutral-faded:#b2b2b2;--rs-color-background-disabled:#474747;--rs-color-background-disabled-faded:#3a3a3a;--rs-color-border-disabled:#3e3e3e;--rs-color-foreground-disabled:#656565;--rs-color-background-elevation-base:#2c2c2c;--rs-color-background-elevation-raised:#2c2c2c;--rs-color-background-elevation-overlay:#2c2c2c;--rs-color-background-page:#2c2c2c;--rs-color-background-page-faded:#1e1e1e;--rs-color-rgb-background-primary:12.0105,139.995,232.99349999999998;--rs-color-rgb-background-primary-faded:56.9925,66.9885,96.00750000000001;--rs-color-rgb-background-critical:223.992,61.990500000000004,26.009999999999998;--rs-color-rgb-background-critical-faded:96.00750000000001,51,41.9985;--rs-color-rgb-background-warning:241.00050000000002,196.98749999999998,18.003;--rs-color-rgb-background-warning-faded:43.9875,38.9895,31.008;--rs-color-rgb-background-positive:24.990000000000002,143.004,80.988;--rs-color-rgb-background-positive-faded:60.996,87.006,73.0065;--rs-color-on-background-neutral:oklch(100% 0 0deg);--rs-color-rgb-background-neutral:68.0085,68.0085,68.0085;--rs-color-rgb-background-neutral-faded:55.998,55.998,55.998;--rs-color-rgb-background-disabled:70.99199999999999,70.99199999999999,70.99199999999999;--rs-color-rgb-background-disabled-faded:58.0125,58.0125,58.0125;--rs-color-rgb-background-elevation-base:43.9875,43.9875,43.9875;--rs-color-rgb-background-elevation-raised:43.9875,43.9875,43.9875;--rs-color-rgb-background-elevation-overlay:43.9875,43.9875,43.9875;--rs-color-rgb-background-page:43.9875,43.9875,43.9875;--rs-color-rgb-background-page-faded:29.988,29.988,29.988}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
[data-rs-theme~=reshaped]{--rs-font-family-title:
|
|
1
|
+
[data-rs-theme~=reshaped]{--rs-font-family-title:inter,blinkmacsystemfont,-apple-system,roboto,helvetica,arial,sans-serif;--rs-font-family-body:inter,blinkmacsystemfont,-apple-system,roboto,helvetica,arial,sans-serif;--rs-font-family-monospace:geist mono,sfmono-regular,menlo,monaco,consolas,liberation mono,courier new,monospace;--rs-font-weight-regular:400;--rs-font-weight-medium:500;--rs-font-weight-semibold:600;--rs-font-weight-bold:700;--rs-font-weight-extrabold:800;--rs-font-weight-black:900;--rs-font-size-title-1:6rem;--rs-line-height-title-1:6.25rem;--rs-font-family-title-1:var(--rs-font-family-title);--rs-font-weight-title-1:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-1:normal;--rs-font-size-title-2:5rem;--rs-line-height-title-2:5.25rem;--rs-font-family-title-2:var(--rs-font-family-title);--rs-font-weight-title-2:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-2:normal;--rs-font-size-title-3:4rem;--rs-line-height-title-3:4.25rem;--rs-font-family-title-3:var(--rs-font-family-title);--rs-font-weight-title-3:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-3:normal;--rs-font-size-title-4:3.5rem;--rs-line-height-title-4:3.75rem;--rs-font-family-title-4:var(--rs-font-family-title);--rs-font-weight-title-4:var(--rs-font-weight-bold);--rs-letter-spacing-title-4:normal;--rs-font-size-title-5:3rem;--rs-line-height-title-5:3.25rem;--rs-font-family-title-5:var(--rs-font-family-title);--rs-font-weight-title-5:var(--rs-font-weight-bold);--rs-letter-spacing-title-5:normal;--rs-font-size-title-6:2.25rem;--rs-line-height-title-6:2.5rem;--rs-font-family-title-6:var(--rs-font-family-title);--rs-font-weight-title-6:var(--rs-font-weight-bold);--rs-letter-spacing-title-6:normal;--rs-font-size-featured-1:2rem;--rs-line-height-featured-1:2.5rem;--rs-font-family-featured-1:var(--rs-font-family-body);--rs-letter-spacing-featured-1:normal;--rs-font-size-featured-2:1.5rem;--rs-line-height-featured-2:2rem;--rs-font-family-featured-2:var(--rs-font-family-body);--rs-letter-spacing-featured-2:normal;--rs-font-size-featured-3:1.25rem;--rs-line-height-featured-3:1.75rem;--rs-font-family-featured-3:var(--rs-font-family-body);--rs-letter-spacing-featured-3:normal;--rs-font-size-body-1:1.125rem;--rs-line-height-body-1:1.75rem;--rs-font-family-body-1:var(--rs-font-family-body);--rs-letter-spacing-body-1:normal;--rs-font-size-body-2:1rem;--rs-line-height-body-2:1.5rem;--rs-font-family-body-2:var(--rs-font-family-body);--rs-letter-spacing-body-2:normal;--rs-font-size-body-3:0.875rem;--rs-line-height-body-3:1.25rem;--rs-font-family-body-3:var(--rs-font-family-body);--rs-letter-spacing-body-3:normal;--rs-font-size-caption-1:0.75rem;--rs-line-height-caption-1:1rem;--rs-font-family-caption-1:var(--rs-font-family-body);--rs-letter-spacing-caption-1:normal;--rs-font-size-caption-2:0.625rem;--rs-line-height-caption-2:0.75rem;--rs-font-family-caption-2:var(--rs-font-family-body);--rs-letter-spacing-caption-2:normal;--rs-unit-base:4px;--rs-unit-x1:4px;--rs-unit-x2:8px;--rs-unit-x3:12px;--rs-unit-x4:16px;--rs-unit-x5:20px;--rs-unit-x6:24px;--rs-unit-x7:28px;--rs-unit-x8:32px;--rs-unit-x9:36px;--rs-unit-x10:40px;--rs-radius-small:4px;--rs-radius-medium:8px;--rs-radius-large:12px;--rs-color-brand:#5a58f2;--rs-color-white:#fff;--rs-color-black:#000;--rs-color-on-background-primary:oklch(100% 0 0deg);--rs-color-on-background-critical:oklch(100% 0 0deg);--rs-color-on-background-warning:oklch(0% 0 0deg);--rs-color-on-background-positive:oklch(100% 0 0deg);--rs-color-on-brand:oklch(100% 0 0deg);--rs-color-rgb-white:255,255,255;--rs-color-rgb-black:0,0,0;--rs-duration-rapid:100ms;--rs-duration-fast:200ms;--rs-duration-medium:300ms;--rs-duration-slow:400ms;--rs-easing-standard:cubic-bezier(0.4,0,0.2,1);--rs-easing-accelerate:cubic-bezier(0.4,0,1,1);--rs-easing-decelerate:cubic-bezier(0,0,0.2,1);--rs-shadow-raised:0px 1px 5px -4px rgba(0,0,0,.5),0px 4px 8px 0px rgba(0,0,0,.05);--rs-shadow-overlay:0px 5px 10px 0px rgba(0,0,0,.05),0px 15px 25px 0px rgba(0,0,0,.07);--rs-viewport-m-min:660;--rs-viewport-l-min:900;--rs-viewport-xl-min:1280;--rs-z-index-relative:10;--rs-z-index-absolute:100;--rs-z-index-fixed:200}[data-rs-theme~=reshaped][data-rs-color-mode=light]{--rs-color-background-primary:#5a58f2;--rs-color-background-primary-faded:#ecebfe;--rs-color-border-primary:#3b38ed;--rs-color-border-primary-faded:#dedcfb;--rs-color-foreground-primary:#4f4cf0;--rs-color-background-critical:#e22c2c;--rs-color-background-critical-faded:#fdeded;--rs-color-border-critical:#bf2424;--rs-color-border-critical-faded:#f3dad6;--rs-color-foreground-critical:#c42525;--rs-color-background-warning:#facc15;--rs-color-background-warning-faded:#fffae9;--rs-color-border-warning:#cfa90f;--rs-color-border-warning-faded:#ece2c4;--rs-color-foreground-warning:#7b6305;--rs-color-background-positive:#118850;--rs-color-background-positive-faded:#edfdf5;--rs-color-border-positive:#0c6e40;--rs-color-border-positive-faded:#d2eddb;--rs-color-foreground-positive:#0d7544;--rs-color-background-neutral:#dfe2ea;--rs-color-background-neutral-faded:#f3f3f5;--rs-color-border-neutral:#0000001f;--rs-color-border-neutral-faded:#00000014;--rs-color-foreground-neutral:#14181f;--rs-color-foreground-neutral-faded:#5b667e;--rs-color-background-disabled:#eceef2;--rs-color-background-disabled-faded:#f5f6f9;--rs-color-border-disabled:#dfe2ea;--rs-color-foreground-disabled:#c6ccda;--rs-color-background-elevation-base:#fff;--rs-color-background-elevation-raised:#fff;--rs-color-background-elevation-overlay:#fff;--rs-color-background-page:#fff;--rs-color-background-page-faded:#f9f9fb;--rs-color-rgb-background-primary:89.98949999999999,88.0005,241.99499999999998;--rs-color-rgb-background-primary-faded:236.0025,235.00799999999998,254.00549999999998;--rs-color-rgb-background-critical:226.0065,43.9875,43.9875;--rs-color-rgb-background-critical-faded:253.011,236.997,236.997;--rs-color-rgb-background-warning:250.002,204,21.012;--rs-color-rgb-background-warning-faded:255,250.002,232.99349999999998;--rs-color-rgb-background-positive:17.008499999999998,135.9915,79.9935;--rs-color-rgb-background-positive-faded:236.997,253.011,245.004;--rs-color-on-background-neutral:oklch(0% 0 0deg);--rs-color-rgb-background-neutral:222.9975,226.0065,233.988;--rs-color-rgb-background-neutral-faded:242.9895,242.9895,245.004;--rs-color-rgb-background-disabled:236.0025,237.9915,241.99499999999998;--rs-color-rgb-background-disabled-faded:245.004,245.9985,249.00750000000002;--rs-color-rgb-background-elevation-base:255,255,255;--rs-color-rgb-background-elevation-raised:255,255,255;--rs-color-rgb-background-elevation-overlay:255,255,255;--rs-color-rgb-background-page:255,255,255;--rs-color-rgb-background-page-faded:249.00750000000002,249.00750000000002,250.9965}[data-rs-theme~=reshaped][data-rs-color-mode=dark]{--rs-color-background-primary:#524fea;--rs-color-background-primary-faded:#252544;--rs-color-border-primary:#8c8bf3;--rs-color-border-primary-faded:#323164;--rs-color-foreground-primary:#8b8af7;--rs-color-background-critical:#d02626;--rs-color-background-critical-faded:#3e1f1f;--rs-color-border-critical:#f46969;--rs-color-border-critical-faded:#5a2e29;--rs-color-foreground-critical:#f36a6a;--rs-color-background-warning:#f1c512;--rs-color-background-warning-faded:#2c271f;--rs-color-border-warning:#b4920a;--rs-color-border-warning-faded:#453c1e;--rs-color-foreground-warning:#b4920c;--rs-color-background-positive:#14784a;--rs-color-background-positive-faded:#1f2a23;--rs-color-border-positive:#21ab6b;--rs-color-border-positive-faded:#264431;--rs-color-foreground-positive:#18ab66;--rs-color-background-neutral:#494f60;--rs-color-background-neutral-faded:#222835;--rs-color-border-neutral:#ffffff24;--rs-color-border-neutral-faded:#ffffff14;--rs-color-foreground-neutral:#eff1f5;--rs-color-foreground-neutral-faded:#c0c6d6;--rs-color-background-disabled:#1e212a;--rs-color-background-disabled-faded:#171921;--rs-color-border-disabled:#262a34;--rs-color-foreground-disabled:#434959;--rs-color-background-elevation-base:#15171e;--rs-color-background-elevation-raised:#191b23;--rs-color-background-elevation-overlay:#1c1f28;--rs-color-background-page:#0f1116;--rs-color-background-page-faded:#111319;--rs-color-rgb-background-primary:82.008,78.99900000000001,233.988;--rs-color-rgb-background-primary-faded:37.0005,37.0005,68.0085;--rs-color-rgb-background-critical:208.0035,37.995,37.995;--rs-color-rgb-background-critical-faded:61.990500000000004,31.008,31.008;--rs-color-rgb-background-warning:241.00050000000002,196.98749999999998,18.003;--rs-color-rgb-background-warning-faded:43.9875,38.9895,31.008;--rs-color-rgb-background-positive:19.992,120.003,74.001;--rs-color-rgb-background-positive-faded:31.008,41.9985,35.0115;--rs-color-on-background-neutral:oklch(100% 0 0deg);--rs-color-rgb-background-neutral:73.0065,78.99900000000001,96.00750000000001;--rs-color-rgb-background-neutral-faded:33.9915,40.0095,52.989000000000004;--rs-color-rgb-background-disabled:29.988,32.997,41.9985;--rs-color-rgb-background-disabled-faded:23.001,24.990000000000002,32.997;--rs-color-rgb-background-elevation-base:21.012,23.001,29.988;--rs-color-rgb-background-elevation-raised:24.990000000000002,27.0045,35.0115;--rs-color-rgb-background-elevation-overlay:27.999,31.008,40.0095;--rs-color-rgb-background-page:14.994,17.008499999999998,22.0065;--rs-color-rgb-background-page-faded:17.008499999999998,18.9975,24.990000000000002}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
[data-rs-theme~=slate]{--rs-font-family-title:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-family-body:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-family-monospace:Geist Mono,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;--rs-font-weight-regular:400;--rs-font-weight-medium:500;--rs-font-weight-semibold:600;--rs-font-weight-bold:700;--rs-font-weight-extrabold:800;--rs-font-weight-black:900;--rs-font-size-title-1:6rem;--rs-line-height-title-1:6.25rem;--rs-font-family-title-1:var(--rs-font-family-title);--rs-font-weight-title-1:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-1:normal;--rs-font-size-title-2:5rem;--rs-line-height-title-2:5.25rem;--rs-font-family-title-2:var(--rs-font-family-title);--rs-font-weight-title-2:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-2:normal;--rs-font-size-title-3:4rem;--rs-line-height-title-3:4.25rem;--rs-font-family-title-3:var(--rs-font-family-title);--rs-font-weight-title-3:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-3:normal;--rs-font-size-title-4:3.5rem;--rs-line-height-title-4:3.75rem;--rs-font-family-title-4:var(--rs-font-family-title);--rs-font-weight-title-4:var(--rs-font-weight-bold);--rs-letter-spacing-title-4:normal;--rs-font-size-title-5:3rem;--rs-line-height-title-5:3.25rem;--rs-font-family-title-5:var(--rs-font-family-title);--rs-font-weight-title-5:var(--rs-font-weight-bold);--rs-letter-spacing-title-5:normal;--rs-font-size-title-6:2.25rem;--rs-line-height-title-6:2.5rem;--rs-font-family-title-6:var(--rs-font-family-title);--rs-font-weight-title-6:var(--rs-font-weight-bold);--rs-letter-spacing-title-6:normal;--rs-font-size-featured-1:2rem;--rs-line-height-featured-1:2.5rem;--rs-font-family-featured-1:var(--rs-font-family-body);--rs-letter-spacing-featured-1:normal;--rs-font-size-featured-2:1.5rem;--rs-line-height-featured-2:2rem;--rs-font-family-featured-2:var(--rs-font-family-body);--rs-letter-spacing-featured-2:normal;--rs-font-size-featured-3:1.25rem;--rs-line-height-featured-3:1.75rem;--rs-font-family-featured-3:var(--rs-font-family-body);--rs-letter-spacing-featured-3:normal;--rs-font-size-body-1:1.125rem;--rs-line-height-body-1:1.75rem;--rs-font-family-body-1:var(--rs-font-family-body);--rs-letter-spacing-body-1:normal;--rs-font-size-body-2:1rem;--rs-line-height-body-2:1.5rem;--rs-font-family-body-2:var(--rs-font-family-body);--rs-letter-spacing-body-2:normal;--rs-font-size-body-3:0.875rem;--rs-line-height-body-3:1.25rem;--rs-font-family-body-3:var(--rs-font-family-body);--rs-letter-spacing-body-3:normal;--rs-font-size-caption-1:0.75rem;--rs-line-height-caption-1:1rem;--rs-font-family-caption-1:var(--rs-font-family-body);--rs-letter-spacing-caption-1:normal;--rs-font-size-caption-2:0.625rem;--rs-line-height-caption-2:0.75rem;--rs-font-family-caption-2:var(--rs-font-family-body);--rs-letter-spacing-caption-2:normal;--rs-unit-base:4px;--rs-unit-x1:4px;--rs-unit-x2:8px;--rs-unit-x3:12px;--rs-unit-x4:16px;--rs-unit-x5:20px;--rs-unit-x6:24px;--rs-unit-x7:28px;--rs-unit-x8:32px;--rs-unit-x9:36px;--rs-unit-x10:40px;--rs-radius-small:4px;--rs-radius-medium:8px;--rs-radius-large:12px;--rs-color-brand:oklch(0.55 0.24 262.67);--rs-color-white:oklch(1 0 0);--rs-color-black:oklch(0 0 0);--rs-color-on-background-primary:oklch(1 0 0);--rs-color-on-background-critical:oklch(1 0 0);--rs-color-on-background-warning:oklch(0 0 0);--rs-color-on-background-positive:oklch(1 0 0);--rs-color-on-brand:oklch(1 0 0);--rs-color-rgb-white:255,255,255;--rs-color-rgb-black:0,0,0;--rs-duration-rapid:100ms;--rs-duration-fast:200ms;--rs-duration-medium:300ms;--rs-duration-slow:400ms;--rs-easing-standard:cubic-bezier(0.4,0,0.2,1);--rs-easing-accelerate:cubic-bezier(0.4,0,1,1);--rs-easing-decelerate:cubic-bezier(0,0,0.2,1);--rs-shadow-raised:0px 1px 5px -4px rgba(0,0,0,.5),0px 4px 8px 0px rgba(0,0,0,.05);--rs-shadow-overlay:0px 5px 10px 0px rgba(0,0,0,.05),0px 15px 25px 0px rgba(0,0,0,.07);--rs-viewport-m-min:660;--rs-viewport-l-min:900;--rs-viewport-xl-min:1280;--rs-z-index-relative:10;--rs-z-index-absolute:100;--rs-z-index-fixed:200}[data-rs-theme~=slate][data-rs-color-mode=light]{--rs-color-background-primary:oklch(0.55 0.24 262.67);--rs-color-background-primary-faded:oklch(0.97 0.02 262.67);--rs-color-border-primary:oklch(0.47 0.24 262.67);--rs-color-border-primary-faded:oklch(0.92 0.03 262.67);--rs-color-foreground-primary:oklch(0.5 0.24 262.67);--rs-color-background-critical:oklch(0.59 0.22 26.97);--rs-color-background-critical-faded:oklch(0.97 0.02 26.97);--rs-color-border-critical:oklch(0.51 0.22 26.97);--rs-color-border-critical-faded:oklch(0.92 0.03 26.97);--rs-color-foreground-critical:oklch(0.5 0.22 26.97);--rs-color-background-warning:oklch(0.83 0.2 80);--rs-color-background-warning-faded:oklch(0.97 0.04 80);--rs-color-border-warning:oklch(0.75 0.2 80);--rs-color-border-warning-faded:oklch(0.92 0.05 80);--rs-color-foreground-warning:oklch(0.5 0.2 80);--rs-color-background-positive:oklch(0.53 0.13 153.78);--rs-color-background-positive-faded:oklch(0.97 0.02 153.78);--rs-color-border-positive:oklch(0.45 0.13 153.78);--rs-color-border-positive-faded:oklch(0.92 0.03 153.78);--rs-color-foreground-positive:oklch(0.5 0.13 153.78);--rs-color-background-neutral:oklch(0.92 0.01 262.67);--rs-color-background-neutral-faded:oklch(0.97 0.005 262.67);--rs-color-border-neutral:oklch(0 0.01 262.67/0.12);--rs-color-border-neutral-faded:oklch(0 0.005 262.67/0.08);--rs-color-foreground-neutral:oklch(0.2 0.01 262.67);--rs-color-foreground-neutral-faded:oklch(0.45 0.01 262.67);--rs-color-background-disabled:oklch(0.95 0 262.67);--rs-color-background-disabled-faded:oklch(0.98 0 262.67);--rs-color-border-disabled:oklch(0 0.01 262.67/0.06);--rs-color-foreground-disabled:oklch(0.84 0 262.67);--rs-color-background-elevation-base:oklch(1 0 262.67);--rs-color-background-elevation-raised:oklch(1 0 262.67);--rs-color-background-elevation-overlay:oklch(1 0 262.67);--rs-color-background-page:oklch(1 0 262.67);--rs-color-background-page-faded:oklch(0.97 0 262.67);--rs-color-rgb-background-primary:23.536499999999997,95.6505,250.1295;--rs-color-rgb-background-primary-faded:238.017,245.4885,259.182;--rs-color-rgb-background-critical:226.593,39.168,41.0295;--rs-color-rgb-background-critical-faded:258.5445,240.3885,237.8895;--rs-color-rgb-background-warning:265.7865,180.5145,-70.15050000000001;--rs-color-rgb-background-warning-faded:259.6665,242.862,215.577;--rs-color-rgb-background-positive:14.177999999999999,128.673,70.788;--rs-color-rgb-background-positive-faded:235.4415,249.3645,239.0115;--rs-color-on-background-neutral:oklch(0 0 0);--rs-color-rgb-background-neutral:224.96099999999998,228.6585,235.416;--rs-color-rgb-background-neutral-faded:243.219,245.10600000000002,248.523;--rs-color-rgb-background-disabled:238.29749999999999,238.29749999999999,238.29749999999999;--rs-color-rgb-background-disabled-faded:248.2935,248.2935,248.2935;--rs-color-rgb-background-elevation-base:255,255,255;--rs-color-rgb-background-elevation-raised:255,255,255;--rs-color-rgb-background-elevation-overlay:255,255,255;--rs-color-rgb-background-page:255,255,255;--rs-color-rgb-background-page-faded:244.953,244.953,244.953}[data-rs-theme~=slate][data-rs-color-mode=dark]{--rs-color-background-primary:oklch(0.5498 0.192 262.67);--rs-color-background-primary-faded:oklch(0.25 0.0384 262.67);--rs-color-border-primary:oklch(0.6498 0.192 262.67);--rs-color-border-primary-faded:oklch(0.35 0.0384 262.67);--rs-color-foreground-primary:oklch(0.75 0.204 262.67);--rs-color-background-critical:oklch(0.5874 0.176 26.97);--rs-color-background-critical-faded:oklch(0.25 0.0352 26.97);--rs-color-border-critical:oklch(0.6874 0.176 26.97);--rs-color-border-critical-faded:oklch(0.35 0.0352 26.97);--rs-color-foreground-critical:oklch(0.75 0.187 26.97);--rs-color-background-warning:oklch(0.8036 0.16 80);--rs-color-background-warning-faded:oklch(0.25 0.032 80);--rs-color-border-warning:oklch(0.9036 0.16 80);--rs-color-border-warning-faded:oklch(0.35 0.032 80);--rs-color-foreground-warning:oklch(0.75 0.17 80);--rs-color-background-positive:oklch(0.5162 0.104 153.78);--rs-color-background-positive-faded:oklch(0.25 0.0208 153.78);--rs-color-border-positive:oklch(0.6162 0.104 153.78);--rs-color-border-positive-faded:oklch(0.35 0.0208 153.78);--rs-color-foreground-positive:oklch(0.75 0.1105 153.78);--rs-color-background-neutral:oklch(0.36 0.008 262.67);--rs-color-background-neutral-faded:oklch(0.25 0.01 262.67);--rs-color-border-neutral:oklch(1 0.008 262.67/0.16);--rs-color-border-neutral-faded:oklch(1 0.01 262.67/0.08);--rs-color-foreground-neutral:oklch(0.96 0.008 262.67);--rs-color-foreground-neutral-faded:oklch(0.81 0.008 262.67);--rs-color-background-disabled:oklch(0.28 0 262.67);--rs-color-background-disabled-faded:oklch(0.23 0 262.67);--rs-color-border-disabled:oklch(0.28 0 262.67);--rs-color-foreground-disabled:oklch(0.4 0 262.67);--rs-color-background-elevation-base:oklch(0.2 0 262.67);--rs-color-background-elevation-raised:oklch(0.21 0 262.67);--rs-color-background-elevation-overlay:oklch(0.22 0 262.67);--rs-color-background-page:oklch(0.16 0 262.67);--rs-color-background-page-faded:oklch(0.18 0 262.67);--rs-color-rgb-background-primary:47.277,104.0655,223.3545;--rs-color-rgb-background-primary-faded:23.6385,33.456,52.122;--rs-color-rgb-background-critical:208.437,69.87,62.526;--rs-color-rgb-background-critical-faded:48.6285,26.877,24.378;--rs-color-rgb-background-warning:244.1625,177.3525,31.7985;--rs-color-rgb-background-warning-faded:41.6925,31.900499999999997,15.1215;--rs-color-rgb-background-positive:45.5685,120.86999999999999,75.1995;--rs-color-rgb-background-positive-faded:25.9335,36.643499999999996,29.0445;--rs-color-on-background-neutral:oklch(1 0 0);--rs-color-rgb-background-neutral:58.8285,61.149,65.43299999999999;--rs-color-rgb-background-neutral-faded:31.0335,33.6855,38.556;--rs-color-rgb-background-disabled:40.774499999999996,40.774499999999996,40.774499999999996;--rs-color-rgb-background-disabled-faded:28.815,28.815,28.815;--rs-color-rgb-background-elevation-base:21.9555,21.9555,21.9555;--rs-color-rgb-background-elevation-raised:24.225,24.225,24.225;--rs-color-rgb-background-elevation-overlay:26.52,26.52,26.52;--rs-color-rgb-background-page:13.209,13.209,13.209;--rs-color-rgb-background-page-faded:17.5185,17.5185,17.5185}
|
|
1
|
+
[data-rs-theme~=slate]{--rs-font-family-title:inter,blinkmacsystemfont,-apple-system,roboto,helvetica,arial,sans-serif;--rs-font-family-body:inter,blinkmacsystemfont,-apple-system,roboto,helvetica,arial,sans-serif;--rs-font-family-monospace:geist mono,sfmono-regular,menlo,monaco,consolas,liberation mono,courier new,monospace;--rs-font-weight-regular:400;--rs-font-weight-medium:500;--rs-font-weight-semibold:600;--rs-font-weight-bold:700;--rs-font-weight-extrabold:800;--rs-font-weight-black:900;--rs-font-size-title-1:6rem;--rs-line-height-title-1:6.25rem;--rs-font-family-title-1:var(--rs-font-family-title);--rs-font-weight-title-1:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-1:normal;--rs-font-size-title-2:5rem;--rs-line-height-title-2:5.25rem;--rs-font-family-title-2:var(--rs-font-family-title);--rs-font-weight-title-2:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-2:normal;--rs-font-size-title-3:4rem;--rs-line-height-title-3:4.25rem;--rs-font-family-title-3:var(--rs-font-family-title);--rs-font-weight-title-3:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-3:normal;--rs-font-size-title-4:3.5rem;--rs-line-height-title-4:3.75rem;--rs-font-family-title-4:var(--rs-font-family-title);--rs-font-weight-title-4:var(--rs-font-weight-bold);--rs-letter-spacing-title-4:normal;--rs-font-size-title-5:3rem;--rs-line-height-title-5:3.25rem;--rs-font-family-title-5:var(--rs-font-family-title);--rs-font-weight-title-5:var(--rs-font-weight-bold);--rs-letter-spacing-title-5:normal;--rs-font-size-title-6:2.25rem;--rs-line-height-title-6:2.5rem;--rs-font-family-title-6:var(--rs-font-family-title);--rs-font-weight-title-6:var(--rs-font-weight-bold);--rs-letter-spacing-title-6:normal;--rs-font-size-featured-1:2rem;--rs-line-height-featured-1:2.5rem;--rs-font-family-featured-1:var(--rs-font-family-body);--rs-letter-spacing-featured-1:normal;--rs-font-size-featured-2:1.5rem;--rs-line-height-featured-2:2rem;--rs-font-family-featured-2:var(--rs-font-family-body);--rs-letter-spacing-featured-2:normal;--rs-font-size-featured-3:1.25rem;--rs-line-height-featured-3:1.75rem;--rs-font-family-featured-3:var(--rs-font-family-body);--rs-letter-spacing-featured-3:normal;--rs-font-size-body-1:1.125rem;--rs-line-height-body-1:1.75rem;--rs-font-family-body-1:var(--rs-font-family-body);--rs-letter-spacing-body-1:normal;--rs-font-size-body-2:1rem;--rs-line-height-body-2:1.5rem;--rs-font-family-body-2:var(--rs-font-family-body);--rs-letter-spacing-body-2:normal;--rs-font-size-body-3:0.875rem;--rs-line-height-body-3:1.25rem;--rs-font-family-body-3:var(--rs-font-family-body);--rs-letter-spacing-body-3:normal;--rs-font-size-caption-1:0.75rem;--rs-line-height-caption-1:1rem;--rs-font-family-caption-1:var(--rs-font-family-body);--rs-letter-spacing-caption-1:normal;--rs-font-size-caption-2:0.625rem;--rs-line-height-caption-2:0.75rem;--rs-font-family-caption-2:var(--rs-font-family-body);--rs-letter-spacing-caption-2:normal;--rs-unit-base:4px;--rs-unit-x1:4px;--rs-unit-x2:8px;--rs-unit-x3:12px;--rs-unit-x4:16px;--rs-unit-x5:20px;--rs-unit-x6:24px;--rs-unit-x7:28px;--rs-unit-x8:32px;--rs-unit-x9:36px;--rs-unit-x10:40px;--rs-radius-small:4px;--rs-radius-medium:8px;--rs-radius-large:12px;--rs-color-brand:oklch(55.% 0.24 262.67deg);--rs-color-white:oklch(100% 0 0deg);--rs-color-black:oklch(0% 0 0deg);--rs-color-on-background-primary:oklch(100% 0 0deg);--rs-color-on-background-critical:oklch(100% 0 0deg);--rs-color-on-background-warning:oklch(0% 0 0deg);--rs-color-on-background-positive:oklch(100% 0 0deg);--rs-color-on-brand:oklch(100% 0 0deg);--rs-color-rgb-white:255,255,255;--rs-color-rgb-black:0,0,0;--rs-duration-rapid:100ms;--rs-duration-fast:200ms;--rs-duration-medium:300ms;--rs-duration-slow:400ms;--rs-easing-standard:cubic-bezier(0.4,0,0.2,1);--rs-easing-accelerate:cubic-bezier(0.4,0,1,1);--rs-easing-decelerate:cubic-bezier(0,0,0.2,1);--rs-shadow-raised:0px 1px 5px -4px rgba(0,0,0,.5),0px 4px 8px 0px rgba(0,0,0,.05);--rs-shadow-overlay:0px 5px 10px 0px rgba(0,0,0,.05),0px 15px 25px 0px rgba(0,0,0,.07);--rs-viewport-m-min:660;--rs-viewport-l-min:900;--rs-viewport-xl-min:1280;--rs-z-index-relative:10;--rs-z-index-absolute:100;--rs-z-index-fixed:200}[data-rs-theme~=slate][data-rs-color-mode=light]{--rs-color-background-primary:oklch(55.% 0.24 262.67deg);--rs-color-background-primary-faded:oklch(97% 0.02 262.67deg);--rs-color-border-primary:oklch(47% 0.24 262.67deg);--rs-color-border-primary-faded:oklch(92% 0.03 262.67deg);--rs-color-foreground-primary:oklch(50% 0.24 262.67deg);--rs-color-background-critical:oklch(59% 0.22 26.97deg);--rs-color-background-critical-faded:oklch(97% 0.02 26.97deg);--rs-color-border-critical:oklch(51% 0.22 26.97deg);--rs-color-border-critical-faded:oklch(92% 0.03 26.97deg);--rs-color-foreground-critical:oklch(50% 0.22 26.97deg);--rs-color-background-warning:oklch(83% 0.2 80deg);--rs-color-background-warning-faded:oklch(97% 0.04 80deg);--rs-color-border-warning:oklch(75% 0.2 80deg);--rs-color-border-warning-faded:oklch(92% 0.05 80deg);--rs-color-foreground-warning:oklch(50% 0.2 80deg);--rs-color-background-positive:oklch(53% 0.13 153.78deg);--rs-color-background-positive-faded:oklch(97% 0.02 153.78deg);--rs-color-border-positive:oklch(45% 0.13 153.78deg);--rs-color-border-positive-faded:oklch(92% 0.03 153.78deg);--rs-color-foreground-positive:oklch(50% 0.13 153.78deg);--rs-color-background-neutral:oklch(92% 0.01 262.67deg);--rs-color-background-neutral-faded:oklch(97% 0.005 262.67deg);--rs-color-border-neutral:oklch(0% 0.01 262.67deg/12%);--rs-color-border-neutral-faded:oklch(0% 0.005 262.67deg/8%);--rs-color-foreground-neutral:oklch(20% 0.01 262.67deg);--rs-color-foreground-neutral-faded:oklch(45% 0.01 262.67deg);--rs-color-background-disabled:oklch(95% 0 262.67deg);--rs-color-background-disabled-faded:oklch(98% 0 262.67deg);--rs-color-border-disabled:oklch(0% 0.01 262.67deg/6%);--rs-color-foreground-disabled:oklch(84% 0 262.67deg);--rs-color-background-elevation-base:oklch(100% 0 262.67deg);--rs-color-background-elevation-raised:oklch(100% 0 262.67deg);--rs-color-background-elevation-overlay:oklch(100% 0 262.67deg);--rs-color-background-page:oklch(100% 0 262.67deg);--rs-color-background-page-faded:oklch(97% 0 262.67deg);--rs-color-rgb-background-primary:23.536499999999997,95.6505,250.1295;--rs-color-rgb-background-primary-faded:238.017,245.4885,259.182;--rs-color-rgb-background-critical:226.593,39.168,41.0295;--rs-color-rgb-background-critical-faded:258.5445,240.3885,237.8895;--rs-color-rgb-background-warning:265.7865,180.5145,-70.15050000000001;--rs-color-rgb-background-warning-faded:259.6665,242.862,215.577;--rs-color-rgb-background-positive:14.177999999999999,128.673,70.788;--rs-color-rgb-background-positive-faded:235.4415,249.3645,239.0115;--rs-color-on-background-neutral:oklch(0% 0 0deg);--rs-color-rgb-background-neutral:224.96099999999998,228.6585,235.416;--rs-color-rgb-background-neutral-faded:243.219,245.10600000000002,248.523;--rs-color-rgb-background-disabled:238.29749999999999,238.29749999999999,238.29749999999999;--rs-color-rgb-background-disabled-faded:248.2935,248.2935,248.2935;--rs-color-rgb-background-elevation-base:255,255,255;--rs-color-rgb-background-elevation-raised:255,255,255;--rs-color-rgb-background-elevation-overlay:255,255,255;--rs-color-rgb-background-page:255,255,255;--rs-color-rgb-background-page-faded:244.953,244.953,244.953}[data-rs-theme~=slate][data-rs-color-mode=dark]{--rs-color-background-primary:oklch(54.98% 0.192 262.67deg);--rs-color-background-primary-faded:oklch(25% 0.0384 262.67deg);--rs-color-border-primary:oklch(64.98% 0.192 262.67deg);--rs-color-border-primary-faded:oklch(35% 0.0384 262.67deg);--rs-color-foreground-primary:oklch(75% 0.204 262.67deg);--rs-color-background-critical:oklch(58.74% 0.176 26.97deg);--rs-color-background-critical-faded:oklch(25% 0.0352 26.97deg);--rs-color-border-critical:oklch(68.74% 0.176 26.97deg);--rs-color-border-critical-faded:oklch(35% 0.0352 26.97deg);--rs-color-foreground-critical:oklch(75% 0.187 26.97deg);--rs-color-background-warning:oklch(80.36% 0.16 80deg);--rs-color-background-warning-faded:oklch(25% 0.032 80deg);--rs-color-border-warning:oklch(90.36% 0.16 80deg);--rs-color-border-warning-faded:oklch(35% 0.032 80deg);--rs-color-foreground-warning:oklch(75% 0.17 80deg);--rs-color-background-positive:oklch(51.62% 0.104 153.78deg);--rs-color-background-positive-faded:oklch(25% 0.0208 153.78deg);--rs-color-border-positive:oklch(61.62% 0.104 153.78deg);--rs-color-border-positive-faded:oklch(35% 0.0208 153.78deg);--rs-color-foreground-positive:oklch(75% 0.1105 153.78deg);--rs-color-background-neutral:oklch(36% 0.008 262.67deg);--rs-color-background-neutral-faded:oklch(25% 0.01 262.67deg);--rs-color-border-neutral:oklch(100% 0.008 262.67deg/16%);--rs-color-border-neutral-faded:oklch(100% 0.01 262.67deg/8%);--rs-color-foreground-neutral:oklch(96% 0.008 262.67deg);--rs-color-foreground-neutral-faded:oklch(81% 0.008 262.67deg);--rs-color-background-disabled:oklch(28.% 0 262.67deg);--rs-color-background-disabled-faded:oklch(23% 0 262.67deg);--rs-color-border-disabled:oklch(28.% 0 262.67deg);--rs-color-foreground-disabled:oklch(40% 0 262.67deg);--rs-color-background-elevation-base:oklch(20% 0 262.67deg);--rs-color-background-elevation-raised:oklch(21% 0 262.67deg);--rs-color-background-elevation-overlay:oklch(22% 0 262.67deg);--rs-color-background-page:oklch(16% 0 262.67deg);--rs-color-background-page-faded:oklch(18% 0 262.67deg);--rs-color-rgb-background-primary:47.277,104.0655,223.3545;--rs-color-rgb-background-primary-faded:23.6385,33.456,52.122;--rs-color-rgb-background-critical:208.437,69.87,62.526;--rs-color-rgb-background-critical-faded:48.6285,26.877,24.378;--rs-color-rgb-background-warning:244.1625,177.3525,31.7985;--rs-color-rgb-background-warning-faded:41.6925,31.900499999999997,15.1215;--rs-color-rgb-background-positive:45.5685,120.86999999999999,75.1995;--rs-color-rgb-background-positive-faded:25.9335,36.643499999999996,29.0445;--rs-color-on-background-neutral:oklch(100% 0 0deg);--rs-color-rgb-background-neutral:58.8285,61.149,65.43299999999999;--rs-color-rgb-background-neutral-faded:31.0335,33.6855,38.556;--rs-color-rgb-background-disabled:40.774499999999996,40.774499999999996,40.774499999999996;--rs-color-rgb-background-disabled-faded:28.815,28.815,28.815;--rs-color-rgb-background-elevation-base:21.9555,21.9555,21.9555;--rs-color-rgb-background-elevation-raised:24.225,24.225,24.225;--rs-color-rgb-background-elevation-overlay:26.52,26.52,26.52;--rs-color-rgb-background-page:13.209,13.209,13.209;--rs-color-rgb-background-page-faded:17.5185,17.5185,17.5185}
|
package/dist/types/global.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ export type ClassName = ClassNameValue | ClassNameValue[] | ClassName[];
|
|
|
7
7
|
export type CSSVariable = `--${string}`;
|
|
8
8
|
export type StyleAttribute = React.CSSProperties | (React.CSSProperties & Record<CSSVariable, string | number | undefined>);
|
|
9
9
|
type DataAttributes = object | Record<`data-${string}`, string | boolean>;
|
|
10
|
-
export type Attributes<TagName extends keyof React.JSX.IntrinsicElements =
|
|
10
|
+
export type Attributes<TagName extends keyof React.JSX.IntrinsicElements | void = void> = (TagName extends keyof React.JSX.IntrinsicElements ? React.JSX.IntrinsicElements[TagName] : React.HTMLAttributes<HTMLElement>) & DataAttributes & {
|
|
11
11
|
style?: StyleAttribute;
|
|
12
12
|
};
|
|
13
13
|
export type Viewport = "s" | "m" | "l" | "xl";
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "reshaped",
|
|
3
3
|
"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
|
|
4
|
-
"version": "3.9.0-canary.
|
|
4
|
+
"version": "3.9.0-canary.17",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"email": "hello@reshaped.so",
|
|
7
7
|
"homepage": "https://reshaped.so",
|
|
@@ -20,7 +20,8 @@
|
|
|
20
20
|
],
|
|
21
21
|
"repository": {
|
|
22
22
|
"type": "git",
|
|
23
|
-
"url": "https://github.com/reshaped-ui/reshaped.git"
|
|
23
|
+
"url": "https://github.com/reshaped-ui/reshaped.git",
|
|
24
|
+
"directory": "packages/reshaped"
|
|
24
25
|
},
|
|
25
26
|
"bugs": {
|
|
26
27
|
"url": "https://github.com/reshaped-ui/reshaped/issues"
|
|
@@ -77,69 +78,12 @@
|
|
|
77
78
|
"browserslist": [
|
|
78
79
|
"defaults and not IE 11"
|
|
79
80
|
],
|
|
80
|
-
"devDependencies": {
|
|
81
|
-
"@changesets/cli": "2.29.7",
|
|
82
|
-
"@commitlint/cli": "20.1.0",
|
|
83
|
-
"@commitlint/config-conventional": "20.0.0",
|
|
84
|
-
"@commitlint/types": "20.0.0",
|
|
85
|
-
"@eslint/js": "9.38.0",
|
|
86
|
-
"@size-limit/preset-big-lib": "11.2.0",
|
|
87
|
-
"@storybook/addon-a11y": "10.0.0",
|
|
88
|
-
"@storybook/addon-docs": "10.0.0",
|
|
89
|
-
"@storybook/addon-vitest": "10.0.0",
|
|
90
|
-
"@storybook/react": "10.0.0",
|
|
91
|
-
"@storybook/react-vite": "10.0.0",
|
|
92
|
-
"@testing-library/user-event": "14.6.1",
|
|
93
|
-
"@types/culori": "4.0.1",
|
|
94
|
-
"@types/events": "3.0.3",
|
|
95
|
-
"@types/node": "24.9.2",
|
|
96
|
-
"@types/react": "19.2.2",
|
|
97
|
-
"@types/react-dom": "19.2.2",
|
|
98
|
-
"@vitejs/plugin-react": "5.1.0",
|
|
99
|
-
"@vitest/browser": "4.0.4",
|
|
100
|
-
"@vitest/browser-playwright": "4.0.4",
|
|
101
|
-
"@vitest/coverage-istanbul": "4.0.4",
|
|
102
|
-
"@vitest/coverage-v8": "4.0.4",
|
|
103
|
-
"chromatic": "13.3.2",
|
|
104
|
-
"eslint": "9.38.0",
|
|
105
|
-
"eslint-config-prettier": "10.1.8",
|
|
106
|
-
"eslint-import-resolver-typescript": "^4.4.4",
|
|
107
|
-
"eslint-plugin-import": "2.32.0",
|
|
108
|
-
"eslint-plugin-jsx-a11y": "6.10.2",
|
|
109
|
-
"eslint-plugin-prettier": "5.5.4",
|
|
110
|
-
"eslint-plugin-react": "7.37.5",
|
|
111
|
-
"eslint-plugin-react-hooks": "7.0.1",
|
|
112
|
-
"lefthook": "2.0.1",
|
|
113
|
-
"playwright": "1.56.1",
|
|
114
|
-
"postcss": "8.5.6",
|
|
115
|
-
"postcss-cli": "11.0.1",
|
|
116
|
-
"postcss-each": "1.1.0",
|
|
117
|
-
"postcss-nested": "7.0.2",
|
|
118
|
-
"prettier": "3.6.2",
|
|
119
|
-
"react": "18",
|
|
120
|
-
"react-dom": "18",
|
|
121
|
-
"react-shadow": "20.6.0",
|
|
122
|
-
"resolve-tspaths": "0.8.23",
|
|
123
|
-
"size-limit": "11.2.0",
|
|
124
|
-
"storybook": "10.0.0",
|
|
125
|
-
"stylelint": "16.25.0",
|
|
126
|
-
"stylelint-config-prettier": "9.0.5",
|
|
127
|
-
"stylelint-config-standard": "39.0.1",
|
|
128
|
-
"ts-node": "10.9.2",
|
|
129
|
-
"typescript": "5.9.3",
|
|
130
|
-
"typescript-eslint": "8.46.2",
|
|
131
|
-
"vite": "7.1.12",
|
|
132
|
-
"vite-tsconfig-paths": "5.1.4",
|
|
133
|
-
"vitest": "4.0.4",
|
|
134
|
-
"vitest-browser-react": "2.0.2"
|
|
135
|
-
},
|
|
136
81
|
"peerDependencies": {
|
|
137
82
|
"postcss": "^8",
|
|
138
83
|
"react": "^18 || ^19",
|
|
139
84
|
"react-dom": "^18 || ^19"
|
|
140
85
|
},
|
|
141
86
|
"dependencies": {
|
|
142
|
-
"@changesets/changelog-github": "0.5.1",
|
|
143
87
|
"@csstools/postcss-global-data": "3.1.0",
|
|
144
88
|
"chalk": "4.1.2",
|
|
145
89
|
"commander": "14.0.2",
|
|
@@ -148,36 +92,8 @@
|
|
|
148
92
|
"culori": "4.0.2",
|
|
149
93
|
"postcss-custom-media": "11.0.6"
|
|
150
94
|
},
|
|
151
|
-
"size-limit": [
|
|
152
|
-
{
|
|
153
|
-
"name": "Library / JS",
|
|
154
|
-
"path": "dist/bundle.js",
|
|
155
|
-
"webpack": false
|
|
156
|
-
},
|
|
157
|
-
{
|
|
158
|
-
"name": "Library / CSS",
|
|
159
|
-
"path": "dist/bundle.css",
|
|
160
|
-
"webpack": false
|
|
161
|
-
},
|
|
162
|
-
{
|
|
163
|
-
"name": "Theming / JS",
|
|
164
|
-
"path": "dist/tests/themingWithoutDefinition.js",
|
|
165
|
-
"webpack": true
|
|
166
|
-
},
|
|
167
|
-
{
|
|
168
|
-
"name": "Theming with a default theme definition / JS",
|
|
169
|
-
"path": "dist/tests/themingWithDefinition.js",
|
|
170
|
-
"webpack": true
|
|
171
|
-
}
|
|
172
|
-
],
|
|
173
|
-
"engines": {
|
|
174
|
-
"node": ">=22"
|
|
175
|
-
},
|
|
176
95
|
"scripts": {
|
|
177
|
-
"dev": "storybook dev -p 3001 --disable-telemetry",
|
|
178
96
|
"clean": "sh ./bin/clean.sh",
|
|
179
|
-
"commit": "git-cz",
|
|
180
|
-
"changeset": "changeset",
|
|
181
97
|
"build": "pnpm clean && pnpm build:esm && pnpm build:css && pnpm build:bundle",
|
|
182
98
|
"build:themes": "node bin/cli.js theming --config dist/cli/theming/reshaped.config.js --output src/themes",
|
|
183
99
|
"build:esm": "tsc -p tsconfig.esm.json && resolve-tspaths -p tsconfig.esm.json",
|
|
@@ -185,19 +101,9 @@
|
|
|
185
101
|
"build:stories": "tsc -p tsconfig.stories.json && resolve-tspaths -p tsconfig.stories.json",
|
|
186
102
|
"build:bundle": "vite build && cp dist/index.d.ts dist/bundle.d.ts",
|
|
187
103
|
"build:size": "pnpm clean && pnpm build:esm && pnpm build:bundle",
|
|
188
|
-
"build:storybook": "storybook build -o dist/app --disable-telemetry",
|
|
189
|
-
"build:chromatic": "STORYBOOK_ENV=chromatic storybook build",
|
|
190
|
-
"release": "sh ./bin/release.sh",
|
|
191
|
-
"release:canary": "sh ./bin/release-canary.sh",
|
|
192
104
|
"release:local": "pnpm build && pnpm pack --out reshaped-local.tgz",
|
|
193
|
-
"chromatic": "chromatic -b build:chromatic --project-token=$(cat .chromatic)",
|
|
194
|
-
"test:vrt": "pnpm chromatic",
|
|
195
|
-
"test:vrt:turbo": "pnpm chromatic --only-changed",
|
|
196
105
|
"test:browser": "vitest run --project=storybook",
|
|
197
106
|
"test:unit": "vitest run --project=unit",
|
|
198
|
-
"test:size": "size-limit"
|
|
199
|
-
"lint": "pnpm lint:js && pnpm lint:css",
|
|
200
|
-
"lint:js": "eslint './src/**/*.{ts,tsx}' --fix",
|
|
201
|
-
"lint:css": "stylelint 'src/**/*.css'"
|
|
107
|
+
"test:size": "size-limit"
|
|
202
108
|
}
|
|
203
109
|
}
|
package/README.md
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
# Reshaped
|
|
2
|
-
|
|
3
|
-
<img width="2400" height="1260" alt="3 0 (1)" src="https://github.com/user-attachments/assets/ef632fe9-9446-430f-b87d-bebebe6fb595" />
|
|
4
|
-
<br /><br />
|
|
5
|
-
|
|
6
|
-
Reshaped is a library with professionally crafted React & Figma components for building beautiful products or starting your own design system.
|
|
7
|
-
|
|
8
|
-
<br />
|
|
9
|
-
|
|
10
|
-
## Documentation
|
|
11
|
-
|
|
12
|
-
To get started, check out the [Reshaped documentation](https://reshaped.so/docs/getting-started/overview).
|
|
13
|
-
|
|
14
|
-
## Contributing
|
|
15
|
-
|
|
16
|
-
Read our [contribution guide](CONTRIBUTING.md) to learn about our principles, development process and testing.
|
|
17
|
-
|
|
18
|
-
## Maintainers
|
|
19
|
-
|
|
20
|
-
- Dmitry Belyaev, [@blvdmitry](https://x.com/blvdmitry)
|
|
21
|
-
|
|
22
|
-
## License
|
|
23
|
-
|
|
24
|
-
This project is licensed under the terms of the MIT license.
|