@galaxy-io/dls 1.1.3 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/accordion/Accordion.js +1 -1
- package/dist/chips/Chip.js +1 -1
- package/dist/containers/FlexItem.d.ts +20 -0
- package/dist/containers/FlexItem.js +10 -16
- package/dist/containers/FlexWrapper.d.ts +16 -0
- package/dist/containers/FlexWrapper.js +23 -14
- package/dist/inputs/CheckboxInput.js +1 -1
- package/dist/inputs/ColorInput.js +1 -1
- package/dist/inputs/CopyInput.js +1 -1
- package/dist/inputs/DateInput.js +1 -1
- package/dist/inputs/Input.js +1 -1
- package/dist/inputs/MultiSelectInput.js +1 -1
- package/dist/inputs/SelectInput.js +1 -1
- package/dist/spreadsheet/SpreadsheetHeaderCell.js +1 -1
- package/dist/spreadsheet/SpreadsheetRowActionCell.js +1 -1
- package/dist/styles.css +1 -1
- package/dist/toast/Toast.js +2 -2
- package/package.json +1 -1
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { withTheme } from "../theme/GalaxyTheme.js";
|
|
2
2
|
import { getCssSizeValue } from "../utils/linaria.js";
|
|
3
3
|
import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
|
|
4
|
-
import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
|
|
5
4
|
import FlexItem from "../containers/FlexItem.js";
|
|
6
5
|
import Icon, { IconVariant } from "../icons/Icon.js";
|
|
6
|
+
import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
|
|
7
7
|
import RotateWithTransition from "../animations/RotateWithTransition.js";
|
|
8
8
|
import HorizontalDivider from "../dividers/HorizontalDivider.js";
|
|
9
9
|
/* empty css */
|
package/dist/chips/Chip.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { withTheme } from "../theme/GalaxyTheme.js";
|
|
2
2
|
import Text, { TextSize, TextVariant } from "../text/Text.js";
|
|
3
|
-
import FlexWrapper from "../containers/FlexWrapper.js";
|
|
4
3
|
import FlexItem from "../containers/FlexItem.js";
|
|
5
4
|
import Icon, { IconVariant } from "../icons/Icon.js";
|
|
5
|
+
import FlexWrapper from "../containers/FlexWrapper.js";
|
|
6
6
|
import TextShimmer from "../text/TextShimmer.js";
|
|
7
7
|
import Ellipsis from "../text/Ellipsis.js";
|
|
8
8
|
import AvatarShimmer from "../avatar/AvatarShimmer.js";
|
|
@@ -2,8 +2,19 @@ import { type CSSProperties } from "react";
|
|
|
2
2
|
import { AlignItems, JustifyContent } from "./FlexWrapper";
|
|
3
3
|
interface FlexItemProps {
|
|
4
4
|
position?: CSSProperties["position"];
|
|
5
|
+
/**
|
|
6
|
+
* flex-grow of this item within its parent flex container.
|
|
7
|
+
* Defaults to 0 (content-sized), matching the CSS default.
|
|
8
|
+
*/
|
|
5
9
|
grow?: number;
|
|
10
|
+
/**
|
|
11
|
+
* flex-shrink of this item within its parent flex container.
|
|
12
|
+
* Defaults to 1, matching the CSS default.
|
|
13
|
+
*/
|
|
6
14
|
shrink?: number;
|
|
15
|
+
/**
|
|
16
|
+
* flex-basis of this item. Defaults to auto.
|
|
17
|
+
*/
|
|
7
18
|
basis?: number | string;
|
|
8
19
|
overflow?: CSSProperties["overflow"];
|
|
9
20
|
whiteSpace?: CSSProperties["whiteSpace"];
|
|
@@ -12,9 +23,18 @@ interface FlexItemProps {
|
|
|
12
23
|
height?: number | string;
|
|
13
24
|
fillWidth?: boolean;
|
|
14
25
|
fillHeight?: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* Defaults to "flex" (not "block"): a FlexItem is itself a flex container,
|
|
28
|
+
* which sidesteps inline-baseline gaps around svg/icon children and makes
|
|
29
|
+
* alignItems/justifyContent work without extra props.
|
|
30
|
+
*/
|
|
15
31
|
display?: CSSProperties["display"];
|
|
16
32
|
alignItems?: AlignItems;
|
|
17
33
|
justifyContent?: JustifyContent;
|
|
34
|
+
/**
|
|
35
|
+
* Accepts 0 explicitly - `minWidth={0}` is the standard way to let a flex
|
|
36
|
+
* child shrink below its content size so nested text can ellipsize.
|
|
37
|
+
*/
|
|
18
38
|
minWidth?: number | string;
|
|
19
39
|
minHeight?: number | string;
|
|
20
40
|
maxWidth?: number | string;
|
|
@@ -1,36 +1,30 @@
|
|
|
1
1
|
import { getCssSizeValue } from "../utils/linaria.js";
|
|
2
|
-
import { AlignItems, JustifyContent } from "./FlexWrapper.js";
|
|
3
2
|
/* empty css */
|
|
4
3
|
import { styled } from "@linaria/react";
|
|
5
|
-
import { match } from "ts-pattern";
|
|
6
4
|
import { forwardRef } from "react";
|
|
7
5
|
import { jsx } from "react/jsx-runtime";
|
|
8
6
|
//#region src/containers/FlexItem.tsx
|
|
9
7
|
var _exp = () => ({ $position }) => $position ?? "static";
|
|
10
8
|
var _exp2 = () => ({ $display }) => $display ?? "flex";
|
|
11
|
-
var _exp3 = () => ({ $alignItems }) =>
|
|
12
|
-
|
|
13
|
-
};
|
|
14
|
-
var _exp4 = () => ({ $justifyContent }) => {
|
|
15
|
-
return match($justifyContent).with(JustifyContent.START, () => "flex-start").with(JustifyContent.CENTER, () => "center").with(JustifyContent.END, () => "flex-end").otherwise(() => "flex-start");
|
|
16
|
-
};
|
|
17
|
-
var _exp5 = () => ({ $grow }) => $grow ?? 1;
|
|
9
|
+
var _exp3 = () => ({ $alignItems }) => $alignItems ?? "inherit";
|
|
10
|
+
var _exp4 = () => ({ $justifyContent }) => $justifyContent ?? "flex-start";
|
|
11
|
+
var _exp5 = () => ({ $grow }) => $grow ?? 0;
|
|
18
12
|
var _exp6 = () => ({ $shrink }) => $shrink ?? 1;
|
|
19
|
-
var _exp7 = () => ({ $basis }) => $basis
|
|
13
|
+
var _exp7 = () => ({ $basis }) => $basis != null ? getCssSizeValue($basis) : "auto";
|
|
20
14
|
var _exp8 = () => ({ $width, $fillWidth }) => {
|
|
21
15
|
if ($fillWidth) return "100%";
|
|
22
|
-
if ($width) return getCssSizeValue($width, "0");
|
|
16
|
+
if ($width != null) return getCssSizeValue($width, "0");
|
|
23
17
|
return "auto";
|
|
24
18
|
};
|
|
25
19
|
var _exp9 = () => ({ $height, $fillHeight }) => {
|
|
26
20
|
if ($fillHeight) return "100%";
|
|
27
|
-
if ($height) return getCssSizeValue($height);
|
|
21
|
+
if ($height != null) return getCssSizeValue($height);
|
|
28
22
|
return "auto";
|
|
29
23
|
};
|
|
30
|
-
var _exp0 = () => ({ $minWidth }) => $minWidth ? getCssSizeValue($minWidth) : "auto";
|
|
31
|
-
var _exp1 = () => ({ $maxWidth }) => $maxWidth ? getCssSizeValue($maxWidth) : "none";
|
|
32
|
-
var _exp10 = () => ({ $minHeight }) => $minHeight ? getCssSizeValue($minHeight) : "auto";
|
|
33
|
-
var _exp11 = () => ({ $maxHeight }) => $maxHeight ? getCssSizeValue($maxHeight) : "none";
|
|
24
|
+
var _exp0 = () => ({ $minWidth }) => $minWidth != null ? getCssSizeValue($minWidth) : "auto";
|
|
25
|
+
var _exp1 = () => ({ $maxWidth }) => $maxWidth != null ? getCssSizeValue($maxWidth) : "none";
|
|
26
|
+
var _exp10 = () => ({ $minHeight }) => $minHeight != null ? getCssSizeValue($minHeight) : "auto";
|
|
27
|
+
var _exp11 = () => ({ $maxHeight }) => $maxHeight != null ? getCssSizeValue($maxHeight) : "none";
|
|
34
28
|
var _exp12 = () => ({ $overflow }) => $overflow ?? "visible";
|
|
35
29
|
var _exp13 = () => ({ $whiteSpace }) => $whiteSpace ?? "normal";
|
|
36
30
|
var _exp14 = () => ({ $textOverflow }) => $textOverflow ?? "clip";
|
|
@@ -73,6 +73,22 @@ interface FlexWrapperProps {
|
|
|
73
73
|
* Sets the gap between flex items in pixels or string (for other units)
|
|
74
74
|
*/
|
|
75
75
|
gap?: number | string;
|
|
76
|
+
/**
|
|
77
|
+
* flex-grow of this wrapper when it is itself a child of a flex container.
|
|
78
|
+
* Defaults to the CSS initial value (0). Saves wrapping in a FlexItem just
|
|
79
|
+
* to control how the wrapper flexes.
|
|
80
|
+
*/
|
|
81
|
+
grow?: number;
|
|
82
|
+
/**
|
|
83
|
+
* flex-shrink of this wrapper when it is itself a child of a flex container.
|
|
84
|
+
* Defaults to the CSS initial value (1).
|
|
85
|
+
*/
|
|
86
|
+
shrink?: number;
|
|
87
|
+
/**
|
|
88
|
+
* flex-basis of this wrapper when it is itself a child of a flex container.
|
|
89
|
+
* Defaults to the CSS initial value (auto).
|
|
90
|
+
*/
|
|
91
|
+
basis?: number | string;
|
|
76
92
|
/**
|
|
77
93
|
* Sets the width of the flex container in pixels
|
|
78
94
|
*/
|
|
@@ -50,24 +50,27 @@ var _exp2 = () => ({ alignItems = "start" }) => alignItems;
|
|
|
50
50
|
var _exp3 = () => ({ justifyContent = "start" }) => justifyContent;
|
|
51
51
|
var _exp4 = () => ({ gap }) => getCssSizeValue(gap);
|
|
52
52
|
var _exp5 = () => ({ wrap = "nowrap" }) => wrap;
|
|
53
|
-
var _exp6 = () => ({
|
|
53
|
+
var _exp6 = () => ({ grow }) => grow ?? "initial";
|
|
54
|
+
var _exp7 = () => ({ shrink }) => shrink ?? "initial";
|
|
55
|
+
var _exp8 = () => ({ basis }) => basis != null ? getCssSizeValue(basis) : "initial";
|
|
56
|
+
var _exp9 = () => ({ width, fillWidth }) => {
|
|
54
57
|
if (fillWidth) return "100%";
|
|
55
|
-
if (width) return getCssSizeValue(width, "0");
|
|
58
|
+
if (width != null) return getCssSizeValue(width, "0");
|
|
56
59
|
return "auto";
|
|
57
60
|
};
|
|
58
|
-
var
|
|
61
|
+
var _exp0 = () => ({ height, fillHeight }) => {
|
|
59
62
|
if (fillHeight) return "100%";
|
|
60
|
-
if (height) return getCssSizeValue(height);
|
|
63
|
+
if (height != null) return getCssSizeValue(height);
|
|
61
64
|
return "auto";
|
|
62
65
|
};
|
|
63
|
-
var
|
|
64
|
-
var
|
|
65
|
-
var
|
|
66
|
-
var
|
|
67
|
-
var
|
|
68
|
-
var
|
|
69
|
-
var
|
|
70
|
-
var
|
|
66
|
+
var _exp1 = () => ({ minWidth }) => minWidth != null ? getCssSizeValue(minWidth) : "auto";
|
|
67
|
+
var _exp10 = () => ({ maxWidth }) => maxWidth != null ? getCssSizeValue(maxWidth) : "none";
|
|
68
|
+
var _exp11 = () => ({ minHeight }) => minHeight != null ? getCssSizeValue(minHeight) : "auto";
|
|
69
|
+
var _exp12 = () => ({ maxHeight }) => maxHeight != null ? getCssSizeValue(maxHeight) : "none";
|
|
70
|
+
var _exp13 = () => ({ overflow = "visible" }) => overflow;
|
|
71
|
+
var _exp14 = () => ({ padding = "0" }) => padding;
|
|
72
|
+
var _exp15 = () => ({ margin = "0" }) => margin;
|
|
73
|
+
var _exp16 = () => ({ onClick }) => onClick ? "pointer" : "inherit";
|
|
71
74
|
var StyledFlexWrapper = /*#__PURE__*/ styled("div")({
|
|
72
75
|
name: "StyledFlexWrapper",
|
|
73
76
|
class: "s12krdms",
|
|
@@ -87,10 +90,13 @@ var StyledFlexWrapper = /*#__PURE__*/ styled("div")({
|
|
|
87
90
|
"s12krdms-11": [_exp10()],
|
|
88
91
|
"s12krdms-12": [_exp11()],
|
|
89
92
|
"s12krdms-13": [_exp12()],
|
|
90
|
-
"s12krdms-14": [_exp13()]
|
|
93
|
+
"s12krdms-14": [_exp13()],
|
|
94
|
+
"s12krdms-15": [_exp14()],
|
|
95
|
+
"s12krdms-16": [_exp15()],
|
|
96
|
+
"s12krdms-17": [_exp16()]
|
|
91
97
|
}
|
|
92
98
|
});
|
|
93
|
-
var FlexWrapper = forwardRef(({ children, direction, alignItems, justifyContent, wrap, gap, width, height, minWidth, maxWidth, minHeight, maxHeight, fillWidth = false, fillHeight = false, overflow, padding, margin, onClick, onMouseDown, onMouseEnter, onMouseLeave, onScroll }, ref) => {
|
|
99
|
+
var FlexWrapper = forwardRef(({ children, direction, alignItems, justifyContent, wrap, gap, grow, shrink, basis, width, height, minWidth, maxWidth, minHeight, maxHeight, fillWidth = false, fillHeight = false, overflow, padding, margin, onClick, onMouseDown, onMouseEnter, onMouseLeave, onScroll }, ref) => {
|
|
94
100
|
return /* @__PURE__ */ jsx(StyledFlexWrapper, {
|
|
95
101
|
ref,
|
|
96
102
|
direction,
|
|
@@ -98,6 +104,9 @@ var FlexWrapper = forwardRef(({ children, direction, alignItems, justifyContent,
|
|
|
98
104
|
justifyContent,
|
|
99
105
|
wrap,
|
|
100
106
|
gap,
|
|
107
|
+
grow,
|
|
108
|
+
shrink,
|
|
109
|
+
basis,
|
|
101
110
|
width,
|
|
102
111
|
height,
|
|
103
112
|
minWidth,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { withTheme } from "../theme/GalaxyTheme.js";
|
|
2
2
|
import Text, { TextVariant } from "../text/Text.js";
|
|
3
|
-
import FlexWrapper, { AlignItems } from "../containers/FlexWrapper.js";
|
|
4
3
|
import Icon, { IconVariant, IconWeight } from "../icons/Icon.js";
|
|
4
|
+
import FlexWrapper, { AlignItems } from "../containers/FlexWrapper.js";
|
|
5
5
|
import RequiredMarker from "../text/RequiredMarker.js";
|
|
6
6
|
/* empty css */
|
|
7
7
|
import { styled } from "@linaria/react";
|
|
@@ -2,8 +2,8 @@ import { withTheme } from "../theme/GalaxyTheme.js";
|
|
|
2
2
|
import { getCssSizeValue } from "../utils/linaria.js";
|
|
3
3
|
import { hexToHsva, hsvaToHex } from "../utils/colors.js";
|
|
4
4
|
import Text, { TextSize, TextVariant } from "../text/Text.js";
|
|
5
|
-
import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
|
|
6
5
|
import Icon, { IconVariant } from "../icons/Icon.js";
|
|
6
|
+
import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
|
|
7
7
|
import Dropdown, { DropdownVariant } from "../dropdown/Dropdown.js";
|
|
8
8
|
import GridWrapper from "../containers/GridWrapper.js";
|
|
9
9
|
import Spacing from "../containers/Spacing.js";
|
package/dist/inputs/CopyInput.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import FlexWrapper, { AlignItems } from "../containers/FlexWrapper.js";
|
|
2
1
|
import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
|
|
2
|
+
import FlexWrapper, { AlignItems } from "../containers/FlexWrapper.js";
|
|
3
3
|
import { InputSize } from "./Input.js";
|
|
4
4
|
import TextInput from "./TextInput.js";
|
|
5
5
|
import { useCallback, useState } from "react";
|
package/dist/inputs/DateInput.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { withTheme } from "../theme/GalaxyTheme.js";
|
|
2
2
|
import { getCssSizeValue } from "../utils/linaria.js";
|
|
3
3
|
import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
|
|
4
|
-
import FlexWrapper, { AlignItems, FlexDirection, JustifyContent } from "../containers/FlexWrapper.js";
|
|
5
4
|
import Icon, { IconVariant } from "../icons/Icon.js";
|
|
5
|
+
import FlexWrapper, { AlignItems, FlexDirection, JustifyContent } from "../containers/FlexWrapper.js";
|
|
6
6
|
import Dropdown, { DropdownVariant } from "../dropdown/Dropdown.js";
|
|
7
7
|
import GridWrapper from "../containers/GridWrapper.js";
|
|
8
8
|
import Spacing from "../containers/Spacing.js";
|
package/dist/inputs/Input.js
CHANGED
|
@@ -2,8 +2,8 @@ import { withTheme } from "../theme/GalaxyTheme.js";
|
|
|
2
2
|
import { getCssSizeValue } from "../utils/linaria.js";
|
|
3
3
|
import Text, { TextSize, TextVariant } from "../text/Text.js";
|
|
4
4
|
import Tooltip, { TooltipPosition } from "../tooltip/Tooltip.js";
|
|
5
|
-
import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
|
|
6
5
|
import Icon, { IconVariant } from "../icons/Icon.js";
|
|
6
|
+
import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
|
|
7
7
|
import RequiredMarker from "../text/RequiredMarker.js";
|
|
8
8
|
import Spacing from "../containers/Spacing.js";
|
|
9
9
|
import HelpIcon from "../icons/HelpIcon.js";
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { withTheme } from "../theme/GalaxyTheme.js";
|
|
2
2
|
import { getCssSizeValue } from "../utils/linaria.js";
|
|
3
3
|
import Text, { TextSize, TextVariant } from "../text/Text.js";
|
|
4
|
-
import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
|
|
5
4
|
import FlexItem from "../containers/FlexItem.js";
|
|
6
5
|
import Icon, { IconVariant } from "../icons/Icon.js";
|
|
6
|
+
import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
|
|
7
7
|
import Dropdown, { DropdownPosition, DropdownVariant } from "../dropdown/Dropdown.js";
|
|
8
8
|
import { InputLabel } from "./Input.js";
|
|
9
9
|
import RotateWithTransition from "../animations/RotateWithTransition.js";
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { withTheme } from "../theme/GalaxyTheme.js";
|
|
2
2
|
import { getCssSizeValue } from "../utils/linaria.js";
|
|
3
3
|
import Text, { TextSize, TextVariant } from "../text/Text.js";
|
|
4
|
-
import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
|
|
5
4
|
import FlexItem from "../containers/FlexItem.js";
|
|
6
5
|
import Icon, { IconVariant, IconWeight } from "../icons/Icon.js";
|
|
6
|
+
import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
|
|
7
7
|
import Dropdown, { DropdownVariant } from "../dropdown/Dropdown.js";
|
|
8
8
|
import Spacing from "../containers/Spacing.js";
|
|
9
9
|
import { InputLabel } from "./Input.js";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { withTheme } from "../theme/GalaxyTheme.js";
|
|
2
2
|
import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
|
|
3
|
-
import FlexWrapper, { FlexDirection } from "../containers/FlexWrapper.js";
|
|
4
3
|
import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
|
|
4
|
+
import FlexWrapper, { FlexDirection } from "../containers/FlexWrapper.js";
|
|
5
5
|
import { ColumnAlign, ColumnPin } from "../table/InfiniteTable.js";
|
|
6
6
|
import Dropdown, { DropdownPosition } from "../dropdown/Dropdown.js";
|
|
7
7
|
import DropdownItem from "../dropdown/DropdownItem.js";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { withTheme } from "../theme/GalaxyTheme.js";
|
|
2
|
-
import FlexWrapper, { FlexDirection } from "../containers/FlexWrapper.js";
|
|
3
2
|
import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
|
|
3
|
+
import FlexWrapper, { FlexDirection } from "../containers/FlexWrapper.js";
|
|
4
4
|
import Dropdown, { DropdownPosition } from "../dropdown/Dropdown.js";
|
|
5
5
|
import DropdownItem from "../dropdown/DropdownItem.js";
|
|
6
6
|
/* empty css */
|
package/dist/styles.css
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
.a1f5gwwu{overflow:hidden;overscroll-behavior:auto;}
|
|
5
5
|
.r94gjni{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-transition:rotate var(--r94gjni-0) ease-in-out;transition:rotate var(--r94gjni-0) ease-in-out;rotate:var(--r94gjni-1);}
|
|
6
6
|
.s1he36jx{position:var(--s1he36jx-0);display:var(--s1he36jx-1);-webkit-align-items:var(--s1he36jx-2);-webkit-box-align:var(--s1he36jx-2);-ms-flex-align:var(--s1he36jx-2);align-items:var(--s1he36jx-2);-webkit-box-pack:var(--s1he36jx-3);-ms-flex-pack:var(--s1he36jx-3);-webkit-justify-content:var(--s1he36jx-3);justify-content:var(--s1he36jx-3);-webkit-box-flex:var(--s1he36jx-4);-webkit-flex-grow:var(--s1he36jx-4);-ms-flex-positive:var(--s1he36jx-4);flex-grow:var(--s1he36jx-4);-webkit-flex-shrink:var(--s1he36jx-5);-ms-flex-negative:var(--s1he36jx-5);flex-shrink:var(--s1he36jx-5);-webkit-flex-basis:var(--s1he36jx-6);-ms-flex-preferred-size:var(--s1he36jx-6);flex-basis:var(--s1he36jx-6);width:var(--s1he36jx-7);height:var(--s1he36jx-8);min-width:var(--s1he36jx-9);max-width:var(--s1he36jx-10);min-height:var(--s1he36jx-11);max-height:var(--s1he36jx-12);overflow:var(--s1he36jx-13);white-space:var(--s1he36jx-14);text-overflow:var(--s1he36jx-15);padding:var(--s1he36jx-16);overscroll-behavior:auto;cursor:var(--s1he36jx-17);}
|
|
7
|
-
.s12krdms{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;box-sizing:border-box;-webkit-flex-direction:var(--s12krdms-0);-ms-flex-direction:var(--s12krdms-0);flex-direction:var(--s12krdms-0);-webkit-align-items:var(--s12krdms-1);-webkit-box-align:var(--s12krdms-1);-ms-flex-align:var(--s12krdms-1);align-items:var(--s12krdms-1);-webkit-box-pack:var(--s12krdms-2);-ms-flex-pack:var(--s12krdms-2);-webkit-justify-content:var(--s12krdms-2);justify-content:var(--s12krdms-2);gap:var(--s12krdms-3);-webkit-box-flex-wrap:var(--s12krdms-4);-webkit-flex-wrap:var(--s12krdms-4);-ms-flex-wrap:var(--s12krdms-4);flex-wrap:var(--s12krdms-4);
|
|
7
|
+
.s12krdms{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;box-sizing:border-box;-webkit-flex-direction:var(--s12krdms-0);-ms-flex-direction:var(--s12krdms-0);flex-direction:var(--s12krdms-0);-webkit-align-items:var(--s12krdms-1);-webkit-box-align:var(--s12krdms-1);-ms-flex-align:var(--s12krdms-1);align-items:var(--s12krdms-1);-webkit-box-pack:var(--s12krdms-2);-ms-flex-pack:var(--s12krdms-2);-webkit-justify-content:var(--s12krdms-2);justify-content:var(--s12krdms-2);gap:var(--s12krdms-3);-webkit-box-flex-wrap:var(--s12krdms-4);-webkit-flex-wrap:var(--s12krdms-4);-ms-flex-wrap:var(--s12krdms-4);flex-wrap:var(--s12krdms-4);-webkit-box-flex:var(--s12krdms-5);-webkit-flex-grow:var(--s12krdms-5);-ms-flex-positive:var(--s12krdms-5);flex-grow:var(--s12krdms-5);-webkit-flex-shrink:var(--s12krdms-6);-ms-flex-negative:var(--s12krdms-6);flex-shrink:var(--s12krdms-6);-webkit-flex-basis:var(--s12krdms-7);-ms-flex-preferred-size:var(--s12krdms-7);flex-basis:var(--s12krdms-7);width:var(--s12krdms-8);height:var(--s12krdms-9);min-width:var(--s12krdms-10);max-width:var(--s12krdms-11);min-height:var(--s12krdms-12);max-height:var(--s12krdms-13);overflow:var(--s12krdms-14);padding:var(--s12krdms-15);margin:var(--s12krdms-16);overscroll-behavior:auto;cursor:var(--s12krdms-17);}
|
|
8
8
|
.h1sww5hz{width:100%;height:0.5px;background-color:var(--h1sww5hz-0);}
|
|
9
9
|
.shbcgkd{color:var(--shbcgkd-0);font-family:var(--shbcgkd-1);font-size:var(--shbcgkd-2);font-weight:var(--shbcgkd-3);line-height:var(--shbcgkd-4);letter-spacing:var(--shbcgkd-5);text-align:var(--shbcgkd-6);-webkit-text-decoration:var(--shbcgkd-7);text-decoration:var(--shbcgkd-7);cursor:var(--shbcgkd-8);-webkit-user-select:var(--shbcgkd-9);-moz-user-select:var(--shbcgkd-9);-ms-user-select:var(--shbcgkd-9);user-select:var(--shbcgkd-9);-webkit-user-select:var(--shbcgkd-9);-moz-user-select:var(--shbcgkd-9);-ms-user-select:var(--shbcgkd-9);overflow:var(--shbcgkd-10);text-overflow:var(--shbcgkd-11);white-space:var(--shbcgkd-12);width:var(--shbcgkd-13);overscroll-behavior:auto;-webkit-transition:color 0.075s ease-in-out;transition:color 0.075s ease-in-out;}
|
|
10
10
|
.s1v6noph{-webkit-animation:flash-s1v6noph 1s ease-in-out infinite;animation:flash-s1v6noph 1s ease-in-out infinite;}@-webkit-keyframes flash-s1v6noph{0%,100%{opacity:1;}50%{opacity:0.4;}}@keyframes flash-s1v6noph{0%,100%{opacity:1;}50%{opacity:0.4;}}
|
package/dist/toast/Toast.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { withTheme } from "../theme/GalaxyTheme.js";
|
|
2
2
|
import Text, { TextVariant } from "../text/Text.js";
|
|
3
|
-
import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
|
|
4
3
|
import FlexItem from "../containers/FlexItem.js";
|
|
5
4
|
import Icon, { IconVariant, IconWeight } from "../icons/Icon.js";
|
|
6
5
|
import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
|
|
6
|
+
import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
|
|
7
7
|
/* empty css */
|
|
8
8
|
import { styled } from "@linaria/react";
|
|
9
9
|
import { match } from "ts-pattern";
|
|
@@ -19,7 +19,7 @@ var ToastVariant = /* @__PURE__ */ function(ToastVariant) {
|
|
|
19
19
|
}({});
|
|
20
20
|
var _exp = () => ({ $hasActions }) => $hasActions ? "12px 12px 8px 12px" : "12px";
|
|
21
21
|
var _exp2 = () => ({ theme, $variant }) => match($variant).with("PRIMARY", () => theme.color.background.tertiary).with("SUCCESS", () => theme.color.background.tertiary).with("WARNING", () => theme.color.background.tertiary).with("ERROR", () => theme.color.background.tertiary).exhaustive();
|
|
22
|
-
var _exp3 = () => ({ theme, $variant }) => match($variant).with("PRIMARY", () => theme.color.border.
|
|
22
|
+
var _exp3 = () => ({ theme, $variant }) => match($variant).with("PRIMARY", () => theme.color.border.secondary).with("SUCCESS", () => theme.color.border.success).with("WARNING", () => theme.color.border.warning).with("ERROR", () => theme.color.border.error).exhaustive();
|
|
23
23
|
var StyledToast = withTheme(/*#__PURE__*/ styled("div")({
|
|
24
24
|
name: "StyledToast",
|
|
25
25
|
class: "sgmrm4",
|