@liner-fe/prism 2.2.0 → 2.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/index.d.ts +8 -1
- package/lib/index.js +204 -172
- package/lib/index.js.map +1 -1
- package/package.json +2 -2
package/lib/index.js
CHANGED
|
@@ -35,6 +35,7 @@ __export(index_exports, {
|
|
|
35
35
|
Caption: () => Caption,
|
|
36
36
|
Checkbox: () => Checkbox,
|
|
37
37
|
DefaultButton: () => DefaultButton,
|
|
38
|
+
Display: () => Display,
|
|
38
39
|
Heading: () => Heading,
|
|
39
40
|
Icon: () => Icon,
|
|
40
41
|
IconButton: () => IconButton,
|
|
@@ -10830,6 +10831,37 @@ var Title2 = (0, import_react9.forwardRef)(
|
|
|
10830
10831
|
}
|
|
10831
10832
|
);
|
|
10832
10833
|
|
|
10834
|
+
// src/components/Typography/Set/Display.tsx
|
|
10835
|
+
var import_clsx7 = __toESM(require("clsx"));
|
|
10836
|
+
var import_react10 = require("react");
|
|
10837
|
+
var import_jsx_runtime187 = require("react/jsx-runtime");
|
|
10838
|
+
var Display = (0, import_react10.forwardRef)(
|
|
10839
|
+
({
|
|
10840
|
+
size,
|
|
10841
|
+
type,
|
|
10842
|
+
weight,
|
|
10843
|
+
className,
|
|
10844
|
+
children,
|
|
10845
|
+
color = "neutral-label-primary",
|
|
10846
|
+
as: Element = "p",
|
|
10847
|
+
...rest
|
|
10848
|
+
}, ref) => {
|
|
10849
|
+
return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
|
|
10850
|
+
Element,
|
|
10851
|
+
{
|
|
10852
|
+
...rest,
|
|
10853
|
+
ref,
|
|
10854
|
+
className: (0, import_clsx7.default)(
|
|
10855
|
+
`lp-sys-typo-display${size}-${type}-${weight}`,
|
|
10856
|
+
colorVariants({ type: color }),
|
|
10857
|
+
className
|
|
10858
|
+
),
|
|
10859
|
+
children
|
|
10860
|
+
}
|
|
10861
|
+
);
|
|
10862
|
+
}
|
|
10863
|
+
);
|
|
10864
|
+
|
|
10833
10865
|
// src/components/Typography/Responsive/lib.ts
|
|
10834
10866
|
var import_fresnel = require("@artsy/fresnel");
|
|
10835
10867
|
var import_design_token = require("@liner-fe/design-token");
|
|
@@ -10851,8 +10883,8 @@ var rootMediaStyle = AppMedia.createMediaStyle();
|
|
|
10851
10883
|
var { MediaContextProvider, Media } = AppMedia;
|
|
10852
10884
|
|
|
10853
10885
|
// src/components/Typography/Responsive/index.tsx
|
|
10854
|
-
var
|
|
10855
|
-
var
|
|
10886
|
+
var import_jsx_runtime188 = require("react/jsx-runtime");
|
|
10887
|
+
var import_react11 = require("react");
|
|
10856
10888
|
var TypographyImpl = /* @__PURE__ */ __name(({ level, text, ...rest }) => {
|
|
10857
10889
|
const commonProps = {
|
|
10858
10890
|
...rest,
|
|
@@ -10860,13 +10892,13 @@ var TypographyImpl = /* @__PURE__ */ __name(({ level, text, ...rest }) => {
|
|
|
10860
10892
|
};
|
|
10861
10893
|
switch (level) {
|
|
10862
10894
|
case "caption":
|
|
10863
|
-
return /* @__PURE__ */ (0,
|
|
10895
|
+
return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(Caption, { ...commonProps });
|
|
10864
10896
|
case "heading":
|
|
10865
|
-
return /* @__PURE__ */ (0,
|
|
10897
|
+
return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(Heading, { ...commonProps });
|
|
10866
10898
|
case "paragraph":
|
|
10867
|
-
return /* @__PURE__ */ (0,
|
|
10899
|
+
return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(Paragraph, { ...commonProps });
|
|
10868
10900
|
case "title":
|
|
10869
|
-
return /* @__PURE__ */ (0,
|
|
10901
|
+
return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(Title2, { ...commonProps });
|
|
10870
10902
|
default:
|
|
10871
10903
|
return null;
|
|
10872
10904
|
}
|
|
@@ -10907,11 +10939,11 @@ var Typography = /* @__PURE__ */ __name((props) => {
|
|
|
10907
10939
|
}, "createMediaProps");
|
|
10908
10940
|
return (
|
|
10909
10941
|
// Fragment없이도 원래 동작해야하는데 liner-web에서 JSX.Element가 배열로 오면 에러 띄워서 임시로 Fragment로 래핑합니다.
|
|
10910
|
-
/* @__PURE__ */ (0,
|
|
10942
|
+
/* @__PURE__ */ (0, import_jsx_runtime188.jsx)(import_jsx_runtime188.Fragment, { children: breakPointKeyArray.map((breakPointKey) => {
|
|
10911
10943
|
const variable = props[breakPointKey];
|
|
10912
10944
|
const isExistVariable = !!variable;
|
|
10913
10945
|
if (isExistVariable) {
|
|
10914
|
-
return /* @__PURE__ */ (0,
|
|
10946
|
+
return /* @__PURE__ */ (0, import_react11.createElement)(Media, { ...createMediaProps(breakPointKey), key: breakPointKey }, /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(TypographyImpl, { ...variable, text: variable.text || children }));
|
|
10915
10947
|
}
|
|
10916
10948
|
return null;
|
|
10917
10949
|
}) })
|
|
@@ -10941,7 +10973,7 @@ var style_module_default6 = {
|
|
|
10941
10973
|
|
|
10942
10974
|
// src/components/Popover/index.tsx
|
|
10943
10975
|
var import_cva6 = require("cva");
|
|
10944
|
-
var
|
|
10976
|
+
var import_clsx9 = require("clsx");
|
|
10945
10977
|
|
|
10946
10978
|
// src/components/TextButton/index.tsx
|
|
10947
10979
|
var import_cva5 = require("cva");
|
|
@@ -10963,9 +10995,9 @@ var style_module_default7 = {
|
|
|
10963
10995
|
};
|
|
10964
10996
|
|
|
10965
10997
|
// src/components/TextButton/index.tsx
|
|
10966
|
-
var
|
|
10967
|
-
var
|
|
10968
|
-
var
|
|
10998
|
+
var import_react12 = require("react");
|
|
10999
|
+
var import_clsx8 = __toESM(require("clsx"));
|
|
11000
|
+
var import_jsx_runtime189 = require("react/jsx-runtime");
|
|
10969
11001
|
var textButtonLevelIconTypeMap = {
|
|
10970
11002
|
primary: "brand-label-primary",
|
|
10971
11003
|
secondary: "neutral-label-primary",
|
|
@@ -11002,7 +11034,7 @@ var textButtonVariants = (0, import_cva5.cva)({
|
|
|
11002
11034
|
}
|
|
11003
11035
|
}
|
|
11004
11036
|
});
|
|
11005
|
-
var TextButton = (0,
|
|
11037
|
+
var TextButton = (0, import_react12.forwardRef)(
|
|
11006
11038
|
({
|
|
11007
11039
|
level = "primary",
|
|
11008
11040
|
thick = false,
|
|
@@ -11022,27 +11054,27 @@ var TextButton = (0, import_react11.forwardRef)(
|
|
|
11022
11054
|
fillType: textButtonLevelIconFillTypeMap[level],
|
|
11023
11055
|
...icon
|
|
11024
11056
|
}), "getIconProps");
|
|
11025
|
-
const renderContent = /* @__PURE__ */ __name((children2) => /* @__PURE__ */ (0,
|
|
11026
|
-
leftIcon && /* @__PURE__ */ (0,
|
|
11027
|
-
/* @__PURE__ */ (0,
|
|
11028
|
-
rightIcon && /* @__PURE__ */ (0,
|
|
11057
|
+
const renderContent = /* @__PURE__ */ __name((children2) => /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)("span", { className: style_module_default7["text-children"], children: [
|
|
11058
|
+
leftIcon && /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(Icon, { ...getIconProps(leftIcon) }),
|
|
11059
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsx)("p", { children: children2 }),
|
|
11060
|
+
rightIcon && /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(Icon, { ...getIconProps(rightIcon) })
|
|
11029
11061
|
] }), "renderContent");
|
|
11030
11062
|
if (asChild) {
|
|
11031
|
-
const parent =
|
|
11032
|
-
return (0,
|
|
11063
|
+
const parent = import_react12.Children.only(children);
|
|
11064
|
+
return (0, import_react12.cloneElement)(
|
|
11033
11065
|
parent,
|
|
11034
11066
|
{
|
|
11035
11067
|
...rest,
|
|
11036
|
-
className: (0,
|
|
11068
|
+
className: (0, import_clsx8.default)(textButtonVariants({ level, thick, underline, size }), className),
|
|
11037
11069
|
ref
|
|
11038
11070
|
},
|
|
11039
11071
|
renderContent(parent.props.children)
|
|
11040
11072
|
);
|
|
11041
11073
|
}
|
|
11042
|
-
return /* @__PURE__ */ (0,
|
|
11074
|
+
return /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(
|
|
11043
11075
|
"button",
|
|
11044
11076
|
{
|
|
11045
|
-
className: (0,
|
|
11077
|
+
className: (0, import_clsx8.default)(textButtonVariants({ level, thick, underline, size }), className),
|
|
11046
11078
|
ref,
|
|
11047
11079
|
...rest,
|
|
11048
11080
|
children: renderContent(children)
|
|
@@ -11053,7 +11085,7 @@ var TextButton = (0, import_react11.forwardRef)(
|
|
|
11053
11085
|
TextButton.displayName = "TextButton";
|
|
11054
11086
|
|
|
11055
11087
|
// src/components/Popover/index.tsx
|
|
11056
|
-
var
|
|
11088
|
+
var import_jsx_runtime190 = require("react/jsx-runtime");
|
|
11057
11089
|
var DEFAULT_OFFSET = -6;
|
|
11058
11090
|
var popoverVariants = (0, import_cva6.cva)({
|
|
11059
11091
|
base: style_module_default6.content,
|
|
@@ -11079,9 +11111,9 @@ var popoverDescriptionVariants = (0, import_cva6.cva)({
|
|
|
11079
11111
|
base: [style_module_default6.description, "lp-sys-typo-caption1-normal-regular"]
|
|
11080
11112
|
});
|
|
11081
11113
|
var popoverFooterVariants = (0, import_cva6.cva)({ base: [style_module_default6.footer, "lp-sys-typo-caption1-normal-medium"] });
|
|
11082
|
-
var PopoverRoot = /* @__PURE__ */ __name(({ isOpen, children, onChange }) => /* @__PURE__ */ (0,
|
|
11083
|
-
var PopoverTrigger = /* @__PURE__ */ __name(({ by }) => /* @__PURE__ */ (0,
|
|
11084
|
-
var PopoverAnchor = /* @__PURE__ */ __name(({ className }) => /* @__PURE__ */ (0,
|
|
11114
|
+
var PopoverRoot = /* @__PURE__ */ __name(({ isOpen, children, onChange }) => /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(import_radix_ui.Popover.Root, { open: isOpen, onOpenChange: onChange, children }), "PopoverRoot");
|
|
11115
|
+
var PopoverTrigger = /* @__PURE__ */ __name(({ by }) => /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(import_radix_ui.Popover.Trigger, { asChild: true, children: by }), "PopoverTrigger");
|
|
11116
|
+
var PopoverAnchor = /* @__PURE__ */ __name(({ className }) => /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
|
|
11085
11117
|
"svg",
|
|
11086
11118
|
{
|
|
11087
11119
|
className,
|
|
@@ -11090,7 +11122,7 @@ var PopoverAnchor = /* @__PURE__ */ __name(({ className }) => /* @__PURE__ */ (0
|
|
|
11090
11122
|
height: "10",
|
|
11091
11123
|
viewBox: "0 0 30 10",
|
|
11092
11124
|
fill: "none",
|
|
11093
|
-
children: /* @__PURE__ */ (0,
|
|
11125
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
|
|
11094
11126
|
"path",
|
|
11095
11127
|
{
|
|
11096
11128
|
fillRule: "evenodd",
|
|
@@ -11119,8 +11151,8 @@ var PopoverContent = React17.forwardRef(
|
|
|
11119
11151
|
children,
|
|
11120
11152
|
container,
|
|
11121
11153
|
...props
|
|
11122
|
-
}, ref) => /* @__PURE__ */ (0,
|
|
11123
|
-
/* @__PURE__ */ (0,
|
|
11154
|
+
}, ref) => /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(import_radix_ui.Popover.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime190.jsxs)(import_jsx_runtime190.Fragment, { children: [
|
|
11155
|
+
/* @__PURE__ */ (0, import_jsx_runtime190.jsxs)(
|
|
11124
11156
|
import_radix_ui.Popover.Content,
|
|
11125
11157
|
{
|
|
11126
11158
|
ref,
|
|
@@ -11128,22 +11160,22 @@ var PopoverContent = React17.forwardRef(
|
|
|
11128
11160
|
side: position,
|
|
11129
11161
|
sideOffset: DEFAULT_OFFSET,
|
|
11130
11162
|
onPointerDownOutside,
|
|
11131
|
-
className: (0,
|
|
11163
|
+
className: (0, import_clsx9.clsx)(popoverVariants({ level }), className),
|
|
11132
11164
|
...props,
|
|
11133
11165
|
children: [
|
|
11134
|
-
/* @__PURE__ */ (0,
|
|
11135
|
-
(tag || icon || onClose) && /* @__PURE__ */ (0,
|
|
11136
|
-
tag && /* @__PURE__ */ (0,
|
|
11137
|
-
icon && /* @__PURE__ */ (0,
|
|
11138
|
-
/* @__PURE__ */ (0,
|
|
11139
|
-
onClose && /* @__PURE__ */ (0,
|
|
11166
|
+
/* @__PURE__ */ (0, import_jsx_runtime190.jsxs)("div", { className: style_module_default6.contentContainer, children: [
|
|
11167
|
+
(tag || icon || onClose) && /* @__PURE__ */ (0, import_jsx_runtime190.jsxs)("div", { className: style_module_default6.heading, children: [
|
|
11168
|
+
tag && /* @__PURE__ */ (0, import_jsx_runtime190.jsx)("span", { className: popoverTagVariants(), children: tag }),
|
|
11169
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(Icon, { name: icon.name, size: "xs", thick: icon.thick, fill: icon.fill }),
|
|
11170
|
+
/* @__PURE__ */ (0, import_jsx_runtime190.jsx)("p", { className: popoverTitleVariants(), children: title }),
|
|
11171
|
+
onClose && /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
|
|
11140
11172
|
import_radix_ui.Popover.PopoverClose,
|
|
11141
11173
|
{
|
|
11142
11174
|
className: style_module_default6.closeButton,
|
|
11143
11175
|
onClick: () => {
|
|
11144
11176
|
onClose();
|
|
11145
11177
|
},
|
|
11146
|
-
children: /* @__PURE__ */ (0,
|
|
11178
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
|
|
11147
11179
|
Icon,
|
|
11148
11180
|
{
|
|
11149
11181
|
name: "close-fill",
|
|
@@ -11156,8 +11188,8 @@ var PopoverContent = React17.forwardRef(
|
|
|
11156
11188
|
}
|
|
11157
11189
|
)
|
|
11158
11190
|
] }),
|
|
11159
|
-
description && /* @__PURE__ */ (0,
|
|
11160
|
-
onConfirm && /* @__PURE__ */ (0,
|
|
11191
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime190.jsx)("p", { className: popoverDescriptionVariants(), children: description }),
|
|
11192
|
+
onConfirm && /* @__PURE__ */ (0, import_jsx_runtime190.jsx)("div", { className: popoverFooterVariants(), children: /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
|
|
11161
11193
|
TextButton,
|
|
11162
11194
|
{
|
|
11163
11195
|
level: "inverse-static",
|
|
@@ -11169,11 +11201,11 @@ var PopoverContent = React17.forwardRef(
|
|
|
11169
11201
|
) }),
|
|
11170
11202
|
children
|
|
11171
11203
|
] }),
|
|
11172
|
-
/* @__PURE__ */ (0,
|
|
11204
|
+
/* @__PURE__ */ (0, import_jsx_runtime190.jsx)(import_radix_ui.Popover.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(PopoverAnchor, { className: (0, import_clsx9.clsx)(popoverAnchorVariants({ level })) }) })
|
|
11173
11205
|
]
|
|
11174
11206
|
}
|
|
11175
11207
|
),
|
|
11176
|
-
isOverlay && /* @__PURE__ */ (0,
|
|
11208
|
+
isOverlay && /* @__PURE__ */ (0, import_jsx_runtime190.jsx)("div", { "data-radix-popper-overlay": true, className: style_module_default6.overlay })
|
|
11177
11209
|
] }) })
|
|
11178
11210
|
);
|
|
11179
11211
|
var Popover = Object.assign(PopoverRoot, {
|
|
@@ -11185,7 +11217,7 @@ var Popover = Object.assign(PopoverRoot, {
|
|
|
11185
11217
|
|
|
11186
11218
|
// src/components/Tooltip/index.tsx
|
|
11187
11219
|
var import_radix_ui2 = require("radix-ui");
|
|
11188
|
-
var
|
|
11220
|
+
var import_react13 = require("react");
|
|
11189
11221
|
|
|
11190
11222
|
// src/components/Tooltip/style.module.scss
|
|
11191
11223
|
var style_module_default8 = {
|
|
@@ -11195,14 +11227,14 @@ var style_module_default8 = {
|
|
|
11195
11227
|
|
|
11196
11228
|
// src/components/Tooltip/index.tsx
|
|
11197
11229
|
var import_cva7 = require("cva");
|
|
11198
|
-
var
|
|
11199
|
-
var
|
|
11230
|
+
var import_clsx10 = __toESM(require("clsx"));
|
|
11231
|
+
var import_jsx_runtime191 = require("react/jsx-runtime");
|
|
11200
11232
|
var DEFAULT_OFFSET2 = "medium";
|
|
11201
11233
|
var tooltipVariants = (0, import_cva7.cva)({ base: [style_module_default8.tooltip, "lp-sys-typo-caption1-normal-medium"] });
|
|
11202
11234
|
var TooltipProvider = import_radix_ui2.Tooltip.Provider;
|
|
11203
|
-
var TooltipRoot = /* @__PURE__ */ __name(({ children, ...props }) => /* @__PURE__ */ (0,
|
|
11204
|
-
var TooltipTrigger = /* @__PURE__ */ __name(({ by }) => /* @__PURE__ */ (0,
|
|
11205
|
-
var TooltipContent = (0,
|
|
11235
|
+
var TooltipRoot = /* @__PURE__ */ __name(({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(import_radix_ui2.Tooltip.Root, { delayDuration: 0, ...props, children }), "TooltipRoot");
|
|
11236
|
+
var TooltipTrigger = /* @__PURE__ */ __name(({ by }) => /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(import_radix_ui2.Tooltip.Trigger, { asChild: true, children: by }), "TooltipTrigger");
|
|
11237
|
+
var TooltipContent = (0, import_react13.forwardRef)(
|
|
11206
11238
|
({
|
|
11207
11239
|
description,
|
|
11208
11240
|
position = "top",
|
|
@@ -11210,16 +11242,16 @@ var TooltipContent = (0, import_react12.forwardRef)(
|
|
|
11210
11242
|
offset = DEFAULT_OFFSET2,
|
|
11211
11243
|
collisionPadding,
|
|
11212
11244
|
...props
|
|
11213
|
-
}, ref) => /* @__PURE__ */ (0,
|
|
11245
|
+
}, ref) => /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
|
|
11214
11246
|
import_radix_ui2.Tooltip.Content,
|
|
11215
11247
|
{
|
|
11216
11248
|
ref,
|
|
11217
11249
|
side: position,
|
|
11218
11250
|
sideOffset: offset === "medium" ? 4 : 8,
|
|
11219
11251
|
collisionPadding,
|
|
11220
|
-
className: (0,
|
|
11252
|
+
className: (0, import_clsx10.default)(tooltipVariants(), className),
|
|
11221
11253
|
...props,
|
|
11222
|
-
children: /* @__PURE__ */ (0,
|
|
11254
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)("p", { className: style_module_default8.tooltipContent, children: description })
|
|
11223
11255
|
}
|
|
11224
11256
|
)
|
|
11225
11257
|
);
|
|
@@ -11231,8 +11263,8 @@ var Tooltip = Object.assign(TooltipRoot, {
|
|
|
11231
11263
|
|
|
11232
11264
|
// src/components/IconButton/index.tsx
|
|
11233
11265
|
var import_cva8 = require("cva");
|
|
11234
|
-
var
|
|
11235
|
-
var
|
|
11266
|
+
var import_react14 = require("react");
|
|
11267
|
+
var import_clsx11 = __toESM(require("clsx"));
|
|
11236
11268
|
|
|
11237
11269
|
// src/components/IconButton/style.module.scss
|
|
11238
11270
|
var style_module_default9 = {
|
|
@@ -11254,7 +11286,7 @@ var style_module_default9 = {
|
|
|
11254
11286
|
|
|
11255
11287
|
// src/components/IconButton/index.tsx
|
|
11256
11288
|
var import_radix_ui3 = require("radix-ui");
|
|
11257
|
-
var
|
|
11289
|
+
var import_jsx_runtime192 = require("react/jsx-runtime");
|
|
11258
11290
|
var { Slot } = import_radix_ui3.Slot;
|
|
11259
11291
|
var iconButtonSizeIconSizeMap = {
|
|
11260
11292
|
l: "m",
|
|
@@ -11326,7 +11358,7 @@ var iconButtonVariants = (0, import_cva8.cva)({
|
|
|
11326
11358
|
}
|
|
11327
11359
|
}
|
|
11328
11360
|
});
|
|
11329
|
-
var IconButton = (0,
|
|
11361
|
+
var IconButton = (0, import_react14.forwardRef)(
|
|
11330
11362
|
({
|
|
11331
11363
|
asChild,
|
|
11332
11364
|
level = "primary",
|
|
@@ -11339,16 +11371,16 @@ var IconButton = (0, import_react13.forwardRef)(
|
|
|
11339
11371
|
...rest
|
|
11340
11372
|
}, ref) => {
|
|
11341
11373
|
const Comp = asChild ? Slot : "button";
|
|
11342
|
-
return /* @__PURE__ */ (0,
|
|
11374
|
+
return /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
|
|
11343
11375
|
Comp,
|
|
11344
11376
|
{
|
|
11345
11377
|
...rest,
|
|
11346
|
-
className: (0,
|
|
11378
|
+
className: (0, import_clsx11.default)(iconButtonVariants({ level, size, fill }), className),
|
|
11347
11379
|
ref,
|
|
11348
11380
|
disabled: disabled && !isLoading,
|
|
11349
11381
|
"aria-label": icon.name,
|
|
11350
11382
|
role: "button",
|
|
11351
|
-
children: isLoading ? /* @__PURE__ */ (0,
|
|
11383
|
+
children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(Loading, { size: iconButtonLoadingSizeMap[size], level: iconButtonLoadingLevelMap[level] }) : /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
|
|
11352
11384
|
Icon,
|
|
11353
11385
|
{
|
|
11354
11386
|
size: iconButtonSizeIconSizeMap[size],
|
|
@@ -11374,13 +11406,13 @@ var style_module_default10 = {
|
|
|
11374
11406
|
};
|
|
11375
11407
|
|
|
11376
11408
|
// src/components/CheckBox/index.tsx
|
|
11377
|
-
var
|
|
11378
|
-
var
|
|
11409
|
+
var import_react16 = require("react");
|
|
11410
|
+
var import_clsx13 = __toESM(require("clsx"));
|
|
11379
11411
|
|
|
11380
11412
|
// src/components/Label/index.tsx
|
|
11381
|
-
var
|
|
11413
|
+
var import_react15 = require("react");
|
|
11382
11414
|
var import_radix_ui4 = require("radix-ui");
|
|
11383
|
-
var
|
|
11415
|
+
var import_clsx12 = __toESM(require("clsx"));
|
|
11384
11416
|
|
|
11385
11417
|
// src/components/Label/style.module.scss
|
|
11386
11418
|
var style_module_default11 = {
|
|
@@ -11401,7 +11433,7 @@ var style_module_default11 = {
|
|
|
11401
11433
|
|
|
11402
11434
|
// src/components/Label/index.tsx
|
|
11403
11435
|
var import_cva9 = require("cva");
|
|
11404
|
-
var
|
|
11436
|
+
var import_jsx_runtime193 = require("react/jsx-runtime");
|
|
11405
11437
|
var defaultLabelVariants = (0, import_cva9.cva)({
|
|
11406
11438
|
base: ["lp-sys-typo-paragraph2-normal-medium", style_module_default11.label],
|
|
11407
11439
|
variants: {
|
|
@@ -11431,7 +11463,7 @@ var defaultLabelVariants = (0, import_cva9.cva)({
|
|
|
11431
11463
|
}
|
|
11432
11464
|
}
|
|
11433
11465
|
});
|
|
11434
|
-
var Label = (0,
|
|
11466
|
+
var Label = (0, import_react15.forwardRef)(
|
|
11435
11467
|
({
|
|
11436
11468
|
className,
|
|
11437
11469
|
level = "primary",
|
|
@@ -11442,11 +11474,11 @@ var Label = (0, import_react14.forwardRef)(
|
|
|
11442
11474
|
error = false,
|
|
11443
11475
|
...props
|
|
11444
11476
|
}, ref) => {
|
|
11445
|
-
return /* @__PURE__ */ (0,
|
|
11477
|
+
return /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
|
|
11446
11478
|
import_radix_ui4.Label.Root,
|
|
11447
11479
|
{
|
|
11448
11480
|
ref,
|
|
11449
|
-
className: (0,
|
|
11481
|
+
className: (0, import_clsx12.default)(
|
|
11450
11482
|
defaultLabelVariants({ level, position, size, offset, disabled, error }),
|
|
11451
11483
|
className
|
|
11452
11484
|
),
|
|
@@ -11458,24 +11490,24 @@ var Label = (0, import_react14.forwardRef)(
|
|
|
11458
11490
|
Label.displayName = "Label";
|
|
11459
11491
|
|
|
11460
11492
|
// src/components/CheckBox/index.tsx
|
|
11461
|
-
var
|
|
11462
|
-
var Checkbox = (0,
|
|
11493
|
+
var import_jsx_runtime194 = require("react/jsx-runtime");
|
|
11494
|
+
var Checkbox = (0, import_react16.forwardRef)(
|
|
11463
11495
|
({ className, label, description, ...props }, ref) => {
|
|
11464
|
-
const CheckboxWrapper = /* @__PURE__ */ __name(({ children }) => label ? /* @__PURE__ */ (0,
|
|
11465
|
-
/* @__PURE__ */ (0,
|
|
11496
|
+
const CheckboxWrapper = /* @__PURE__ */ __name(({ children }) => label ? /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)(Label, { position: "right", htmlFor: props.id, children: [
|
|
11497
|
+
/* @__PURE__ */ (0, import_jsx_runtime194.jsxs)("div", { className: style_module_default10["label-wrapper"], children: [
|
|
11466
11498
|
label,
|
|
11467
|
-
/* @__PURE__ */ (0,
|
|
11499
|
+
/* @__PURE__ */ (0, import_jsx_runtime194.jsx)(Paragraph, { className: style_module_default10.description, size: 3, type: "normal", weight: "regular", children: description })
|
|
11468
11500
|
] }),
|
|
11469
11501
|
children
|
|
11470
|
-
] }) : /* @__PURE__ */ (0,
|
|
11471
|
-
return /* @__PURE__ */ (0,
|
|
11502
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(import_jsx_runtime194.Fragment, { children }), "CheckboxWrapper");
|
|
11503
|
+
return /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(CheckboxWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(import_radix_ui5.Checkbox.Root, { className: (0, import_clsx13.default)(style_module_default10.checkbox, className), ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(import_radix_ui5.Checkbox.Indicator, { className: style_module_default10["checkbox-indicator"], children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(Icon, { name: "check-mark", thick: true, size: "xs", type: "inverse-label-primary" }) }) }) });
|
|
11472
11504
|
}
|
|
11473
11505
|
);
|
|
11474
11506
|
|
|
11475
11507
|
// src/components/Radio/index.tsx
|
|
11476
11508
|
var import_radix_ui6 = require("radix-ui");
|
|
11477
|
-
var
|
|
11478
|
-
var
|
|
11509
|
+
var import_clsx14 = __toESM(require("clsx"));
|
|
11510
|
+
var import_react17 = require("react");
|
|
11479
11511
|
|
|
11480
11512
|
// src/components/Radio/style.module.scss
|
|
11481
11513
|
var style_module_default12 = {
|
|
@@ -11486,27 +11518,27 @@ var style_module_default12 = {
|
|
|
11486
11518
|
};
|
|
11487
11519
|
|
|
11488
11520
|
// src/components/Radio/index.tsx
|
|
11489
|
-
var
|
|
11490
|
-
var RadioIndicator = /* @__PURE__ */ __name(() => /* @__PURE__ */ (0,
|
|
11491
|
-
var RadioRoot = (0,
|
|
11521
|
+
var import_jsx_runtime195 = require("react/jsx-runtime");
|
|
11522
|
+
var RadioIndicator = /* @__PURE__ */ __name(() => /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("circle", { cx: "5", cy: "5", r: "5", fill: "#313133" }) }), "RadioIndicator");
|
|
11523
|
+
var RadioRoot = (0, import_react17.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(import_radix_ui6.RadioGroup.Root, { ref, className, ...props }));
|
|
11492
11524
|
RadioRoot.displayName = "RadioRoot";
|
|
11493
|
-
var RadioItem = (0,
|
|
11525
|
+
var RadioItem = (0, import_react17.forwardRef)(
|
|
11494
11526
|
({ className, label, description, ...props }, ref) => {
|
|
11495
|
-
const RadioItemWrapper = /* @__PURE__ */ __name(({ children }) => label ? /* @__PURE__ */ (0,
|
|
11496
|
-
/* @__PURE__ */ (0,
|
|
11527
|
+
const RadioItemWrapper = /* @__PURE__ */ __name(({ children }) => label ? /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)(Label, { position: "right", children: [
|
|
11528
|
+
/* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("div", { className: style_module_default12["label-wrapper"], children: [
|
|
11497
11529
|
label,
|
|
11498
|
-
description && /* @__PURE__ */ (0,
|
|
11530
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(Paragraph, { className: style_module_default12.description, size: 3, type: "normal", weight: "regular", children: description })
|
|
11499
11531
|
] }),
|
|
11500
11532
|
children
|
|
11501
|
-
] }) : /* @__PURE__ */ (0,
|
|
11502
|
-
return /* @__PURE__ */ (0,
|
|
11533
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(import_jsx_runtime195.Fragment, { children }), "RadioItemWrapper");
|
|
11534
|
+
return /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(RadioItemWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
|
|
11503
11535
|
import_radix_ui6.RadioGroup.Item,
|
|
11504
11536
|
{
|
|
11505
11537
|
ref,
|
|
11506
|
-
className: (0,
|
|
11538
|
+
className: (0, import_clsx14.default)(style_module_default12["radio-item"], className),
|
|
11507
11539
|
...props,
|
|
11508
11540
|
"aria-label": label,
|
|
11509
|
-
children: /* @__PURE__ */ (0,
|
|
11541
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(import_radix_ui6.RadioGroup.Indicator, { className: style_module_default12.indicator, children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(RadioIndicator, {}) })
|
|
11510
11542
|
}
|
|
11511
11543
|
) });
|
|
11512
11544
|
}
|
|
@@ -11517,7 +11549,7 @@ var Radio = Object.assign(RadioRoot, {
|
|
|
11517
11549
|
});
|
|
11518
11550
|
|
|
11519
11551
|
// src/components/Textfield/index.tsx
|
|
11520
|
-
var
|
|
11552
|
+
var import_react18 = require("react");
|
|
11521
11553
|
|
|
11522
11554
|
// src/components/Textfield/style.module.scss
|
|
11523
11555
|
var style_module_default13 = {
|
|
@@ -11543,9 +11575,9 @@ var style_module_default13 = {
|
|
|
11543
11575
|
|
|
11544
11576
|
// src/components/Textfield/index.tsx
|
|
11545
11577
|
var import_cva10 = require("cva");
|
|
11546
|
-
var
|
|
11578
|
+
var import_clsx15 = __toESM(require("clsx"));
|
|
11547
11579
|
var import_react_dom2 = require("react-dom");
|
|
11548
|
-
var
|
|
11580
|
+
var import_jsx_runtime196 = require("react/jsx-runtime");
|
|
11549
11581
|
var defaultTextfieldVariants = (0, import_cva10.cva)({
|
|
11550
11582
|
base: style_module_default13.textfield,
|
|
11551
11583
|
variants: {
|
|
@@ -11555,9 +11587,9 @@ var defaultTextfieldVariants = (0, import_cva10.cva)({
|
|
|
11555
11587
|
}
|
|
11556
11588
|
}
|
|
11557
11589
|
});
|
|
11558
|
-
var Textfield = (0,
|
|
11590
|
+
var Textfield = (0, import_react18.forwardRef)((props, ref) => {
|
|
11559
11591
|
const {
|
|
11560
|
-
id = (0,
|
|
11592
|
+
id = (0, import_react18.useId)(),
|
|
11561
11593
|
type,
|
|
11562
11594
|
label,
|
|
11563
11595
|
value: controlledValue,
|
|
@@ -11571,9 +11603,9 @@ var Textfield = (0, import_react17.forwardRef)((props, ref) => {
|
|
|
11571
11603
|
onClear,
|
|
11572
11604
|
...rest
|
|
11573
11605
|
} = props;
|
|
11574
|
-
const inputRef = (0,
|
|
11575
|
-
const [value, setValue] = (0,
|
|
11576
|
-
const [deidentifiy, setDeidentifiy] = (0,
|
|
11606
|
+
const inputRef = (0, import_react18.useRef)(null);
|
|
11607
|
+
const [value, setValue] = (0, import_react18.useState)("");
|
|
11608
|
+
const [deidentifiy, setDeidentifiy] = (0, import_react18.useState)(true);
|
|
11577
11609
|
const isControlled = controlledValue !== void 0;
|
|
11578
11610
|
const isPassword = type === "password";
|
|
11579
11611
|
const isDeidentified = isPassword && deidentifiy;
|
|
@@ -11613,21 +11645,21 @@ var Textfield = (0, import_react17.forwardRef)((props, ref) => {
|
|
|
11613
11645
|
inputRef.current.setSelectionRange(length, length);
|
|
11614
11646
|
}
|
|
11615
11647
|
}, "handleDeidentify");
|
|
11616
|
-
(0,
|
|
11617
|
-
return /* @__PURE__ */ (0,
|
|
11618
|
-
/* @__PURE__ */ (0,
|
|
11648
|
+
(0, import_react18.useImperativeHandle)(ref, () => inputRef.current);
|
|
11649
|
+
return /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)("div", { className: style_module_default13["textfield-container"], children: [
|
|
11650
|
+
/* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
|
|
11619
11651
|
"div",
|
|
11620
11652
|
{
|
|
11621
|
-
className: (0,
|
|
11653
|
+
className: (0, import_clsx15.default)(defaultTextfieldVariants({ color }), {
|
|
11622
11654
|
[style_module_default13.error]: !!error,
|
|
11623
11655
|
[style_module_default13["label-out-textfield"]]: !label || labelType === "out"
|
|
11624
11656
|
}),
|
|
11625
11657
|
onClick: handleTextfieldClick,
|
|
11626
|
-
children: /* @__PURE__ */ (0,
|
|
11627
|
-
/* @__PURE__ */ (0,
|
|
11658
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)("div", { className: style_module_default13["input-wrapper"], children: [
|
|
11659
|
+
/* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
|
|
11628
11660
|
"input",
|
|
11629
11661
|
{
|
|
11630
|
-
className: (0,
|
|
11662
|
+
className: (0, import_clsx15.default)(style_module_default13.input, {
|
|
11631
11663
|
[style_module_default13["label-out-input"]]: !label || labelType === "out"
|
|
11632
11664
|
}),
|
|
11633
11665
|
type: isDeidentified ? "password" : "text",
|
|
@@ -11639,10 +11671,10 @@ var Textfield = (0, import_react17.forwardRef)((props, ref) => {
|
|
|
11639
11671
|
...rest
|
|
11640
11672
|
}
|
|
11641
11673
|
),
|
|
11642
|
-
/* @__PURE__ */ (0,
|
|
11674
|
+
/* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
|
|
11643
11675
|
Label,
|
|
11644
11676
|
{
|
|
11645
|
-
className: (0,
|
|
11677
|
+
className: (0, import_clsx15.default)(style_module_default13.label, {
|
|
11646
11678
|
[style_module_default13["label-in"]]: labelType === "in",
|
|
11647
11679
|
[style_module_default13["label-out"]]: !label || labelType === "out"
|
|
11648
11680
|
}),
|
|
@@ -11651,8 +11683,8 @@ var Textfield = (0, import_react17.forwardRef)((props, ref) => {
|
|
|
11651
11683
|
children: labelText
|
|
11652
11684
|
}
|
|
11653
11685
|
),
|
|
11654
|
-
/* @__PURE__ */ (0,
|
|
11655
|
-
textfieldValue && !disabled && /* @__PURE__ */ (0,
|
|
11686
|
+
/* @__PURE__ */ (0, import_jsx_runtime196.jsxs)("div", { className: style_module_default13["input-action-buttons"], children: [
|
|
11687
|
+
textfieldValue && !disabled && /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
|
|
11656
11688
|
IconButton,
|
|
11657
11689
|
{
|
|
11658
11690
|
tabIndex: -1,
|
|
@@ -11670,7 +11702,7 @@ var Textfield = (0, import_react17.forwardRef)((props, ref) => {
|
|
|
11670
11702
|
}
|
|
11671
11703
|
}
|
|
11672
11704
|
),
|
|
11673
|
-
isPassword && !disabled && /* @__PURE__ */ (0,
|
|
11705
|
+
isPassword && !disabled && /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
|
|
11674
11706
|
IconButton,
|
|
11675
11707
|
{
|
|
11676
11708
|
tabIndex: -1,
|
|
@@ -11688,14 +11720,14 @@ var Textfield = (0, import_react17.forwardRef)((props, ref) => {
|
|
|
11688
11720
|
}
|
|
11689
11721
|
}
|
|
11690
11722
|
),
|
|
11691
|
-
buttonProps && /* @__PURE__ */ (0,
|
|
11723
|
+
buttonProps && /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(Button, { ...buttonProps, size: "m", type: "button" })
|
|
11692
11724
|
] })
|
|
11693
11725
|
] })
|
|
11694
11726
|
}
|
|
11695
11727
|
),
|
|
11696
|
-
displayFooter && /* @__PURE__ */ (0,
|
|
11697
|
-
/* @__PURE__ */ (0,
|
|
11698
|
-
/* @__PURE__ */ (0,
|
|
11728
|
+
displayFooter && /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)("div", { className: style_module_default13.footer, children: [
|
|
11729
|
+
/* @__PURE__ */ (0, import_jsx_runtime196.jsx)("div", { className: style_module_default13["error-wrapper"], children: error && /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)(import_jsx_runtime196.Fragment, { children: [
|
|
11730
|
+
/* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
|
|
11699
11731
|
Icon,
|
|
11700
11732
|
{
|
|
11701
11733
|
name: "exclamationmark-fill",
|
|
@@ -11705,9 +11737,9 @@ var Textfield = (0, import_react17.forwardRef)((props, ref) => {
|
|
|
11705
11737
|
type: "function-label-negative"
|
|
11706
11738
|
}
|
|
11707
11739
|
),
|
|
11708
|
-
/* @__PURE__ */ (0,
|
|
11740
|
+
/* @__PURE__ */ (0, import_jsx_runtime196.jsx)(Caption, { size: 3, type: "normal", weight: "regular", className: style_module_default13["error-message"], children: error })
|
|
11709
11741
|
] }) }),
|
|
11710
|
-
maxCharacter && /* @__PURE__ */ (0,
|
|
11742
|
+
maxCharacter && /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)(Caption, { className: style_module_default13.character, size: 3, type: "normal", weight: "regular", children: [
|
|
11711
11743
|
isControlled ? controlledValue.length : value.length,
|
|
11712
11744
|
"/",
|
|
11713
11745
|
maxCharacter
|
|
@@ -11718,7 +11750,7 @@ var Textfield = (0, import_react17.forwardRef)((props, ref) => {
|
|
|
11718
11750
|
Textfield.displayName = "Textfield";
|
|
11719
11751
|
|
|
11720
11752
|
// src/components/Slider/index.tsx
|
|
11721
|
-
var
|
|
11753
|
+
var import_react19 = require("react");
|
|
11722
11754
|
|
|
11723
11755
|
// src/components/Slider/style.module.scss
|
|
11724
11756
|
var style_module_default14 = {
|
|
@@ -11735,30 +11767,30 @@ var style_module_default14 = {
|
|
|
11735
11767
|
|
|
11736
11768
|
// src/components/Slider/index.tsx
|
|
11737
11769
|
var import_radix_ui7 = require("radix-ui");
|
|
11738
|
-
var
|
|
11739
|
-
var SliderRoot = (0,
|
|
11770
|
+
var import_jsx_runtime197 = require("react/jsx-runtime");
|
|
11771
|
+
var SliderRoot = (0, import_react19.forwardRef)(
|
|
11740
11772
|
(props, ref) => {
|
|
11741
11773
|
const { label, tooltip, rangeLeft, rangeRight, min, max, step = 50, ...rest } = props;
|
|
11742
|
-
return /* @__PURE__ */ (0,
|
|
11743
|
-
/* @__PURE__ */ (0,
|
|
11744
|
-
/* @__PURE__ */ (0,
|
|
11745
|
-
/* @__PURE__ */ (0,
|
|
11746
|
-
/* @__PURE__ */ (0,
|
|
11747
|
-
/* @__PURE__ */ (0,
|
|
11774
|
+
return /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(import_jsx_runtime197.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)(Tooltip.Provider, { children: [
|
|
11775
|
+
/* @__PURE__ */ (0, import_jsx_runtime197.jsx)(Label, { level: "secondary", size: "m", offset: "high", className: style_module_default14.label, children: label }),
|
|
11776
|
+
/* @__PURE__ */ (0, import_jsx_runtime197.jsxs)("div", { className: style_module_default14["slider-wrapper"], children: [
|
|
11777
|
+
/* @__PURE__ */ (0, import_jsx_runtime197.jsxs)("div", { className: style_module_default14["slider-option-wrapper"], children: [
|
|
11778
|
+
/* @__PURE__ */ (0, import_jsx_runtime197.jsx)(Icon, { name: rangeLeft.icon, size: "xs" }),
|
|
11779
|
+
/* @__PURE__ */ (0, import_jsx_runtime197.jsx)(Caption, { size: 1, type: "normal", weight: "medium", className: style_module_default14.optionText, children: rangeLeft.text })
|
|
11748
11780
|
] }),
|
|
11749
|
-
/* @__PURE__ */ (0,
|
|
11750
|
-
/* @__PURE__ */ (0,
|
|
11751
|
-
Array.from({ length: 100 / step + 1 }).map((_, index) => /* @__PURE__ */ (0,
|
|
11752
|
-
/* @__PURE__ */ (0,
|
|
11781
|
+
/* @__PURE__ */ (0, import_jsx_runtime197.jsxs)(import_radix_ui7.Slider.Root, { ...rest, step, className: style_module_default14["slider-root"], ref, children: [
|
|
11782
|
+
/* @__PURE__ */ (0, import_jsx_runtime197.jsxs)(import_radix_ui7.Slider.Track, { className: style_module_default14["slider-track"], children: [
|
|
11783
|
+
Array.from({ length: 100 / step + 1 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("span", { className: style_module_default14["slider-step"] }, index)),
|
|
11784
|
+
/* @__PURE__ */ (0, import_jsx_runtime197.jsx)(import_radix_ui7.Slider.Range, { className: style_module_default14["slider-range"] })
|
|
11753
11785
|
] }),
|
|
11754
|
-
/* @__PURE__ */ (0,
|
|
11755
|
-
/* @__PURE__ */ (0,
|
|
11756
|
-
/* @__PURE__ */ (0,
|
|
11786
|
+
/* @__PURE__ */ (0, import_jsx_runtime197.jsxs)(Tooltip, { children: [
|
|
11787
|
+
/* @__PURE__ */ (0, import_jsx_runtime197.jsx)(Tooltip.Trigger, { by: /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(import_radix_ui7.Slider.Thumb, { className: style_module_default14["slider-thumb"] }) }),
|
|
11788
|
+
/* @__PURE__ */ (0, import_jsx_runtime197.jsx)(Tooltip.Content, { description: tooltip })
|
|
11757
11789
|
] })
|
|
11758
11790
|
] }),
|
|
11759
|
-
/* @__PURE__ */ (0,
|
|
11760
|
-
/* @__PURE__ */ (0,
|
|
11761
|
-
/* @__PURE__ */ (0,
|
|
11791
|
+
/* @__PURE__ */ (0, import_jsx_runtime197.jsxs)("div", { className: style_module_default14["slider-option-wrapper"], children: [
|
|
11792
|
+
/* @__PURE__ */ (0, import_jsx_runtime197.jsx)(Icon, { name: rangeRight.icon, size: "xs" }),
|
|
11793
|
+
/* @__PURE__ */ (0, import_jsx_runtime197.jsx)(Caption, { size: 1, type: "normal", weight: "medium", className: style_module_default14.optionText, children: rangeRight.text })
|
|
11762
11794
|
] })
|
|
11763
11795
|
] })
|
|
11764
11796
|
] }) });
|
|
@@ -11797,14 +11829,14 @@ var style_module_default15 = {
|
|
|
11797
11829
|
};
|
|
11798
11830
|
|
|
11799
11831
|
// src/components/Select/index.tsx
|
|
11800
|
-
var
|
|
11801
|
-
var
|
|
11802
|
-
var
|
|
11803
|
-
var Badge = /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ (0,
|
|
11804
|
-
var SelectContent = (0,
|
|
11832
|
+
var import_react20 = require("react");
|
|
11833
|
+
var import_clsx16 = __toESM(require("clsx"));
|
|
11834
|
+
var import_jsx_runtime198 = require("react/jsx-runtime");
|
|
11835
|
+
var Badge = /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ (0, import_jsx_runtime198.jsx)("div", { className: style_module_default15.badgeContainer, children: /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(Caption, { className: style_module_default15.badge, size: 2, type: "normal", weight: "medium", children }) }), "Badge");
|
|
11836
|
+
var SelectContent = (0, import_react20.forwardRef)(
|
|
11805
11837
|
(props, ref) => {
|
|
11806
11838
|
const { id, isResponsive, popSide, sideOffset, listLabel, children, container } = props;
|
|
11807
|
-
return /* @__PURE__ */ (0,
|
|
11839
|
+
return /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(import_radix_ui8.Select.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(
|
|
11808
11840
|
import_radix_ui8.Select.Content,
|
|
11809
11841
|
{
|
|
11810
11842
|
id: `select-content-${id}`,
|
|
@@ -11819,21 +11851,21 @@ var SelectContent = (0, import_react19.forwardRef)(
|
|
|
11819
11851
|
e.stopPropagation();
|
|
11820
11852
|
};
|
|
11821
11853
|
},
|
|
11822
|
-
className: (0,
|
|
11854
|
+
className: (0, import_clsx16.default)(style_module_default15["desktop-content"], {
|
|
11823
11855
|
[style_module_default15["responsive"]]: isResponsive
|
|
11824
11856
|
}),
|
|
11825
11857
|
position: "popper",
|
|
11826
11858
|
side: popSide,
|
|
11827
11859
|
sideOffset,
|
|
11828
11860
|
avoidCollisions: false,
|
|
11829
|
-
children: /* @__PURE__ */ (0,
|
|
11830
|
-
/* @__PURE__ */ (0,
|
|
11861
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime198.jsxs)(import_radix_ui9.ScrollArea.Root, { className: style_module_default15.scrollAreaRoot, type: "always", children: [
|
|
11862
|
+
/* @__PURE__ */ (0, import_jsx_runtime198.jsx)(import_radix_ui8.Select.Viewport, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(
|
|
11831
11863
|
import_radix_ui9.ScrollArea.Viewport,
|
|
11832
11864
|
{
|
|
11833
11865
|
className: style_module_default15.scrollAreaViewport,
|
|
11834
11866
|
style: { maxHeight: "268px", overflowY: "auto" },
|
|
11835
|
-
children: /* @__PURE__ */ (0,
|
|
11836
|
-
listLabel && /* @__PURE__ */ (0,
|
|
11867
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime198.jsxs)(import_radix_ui8.Select.Group, { children: [
|
|
11868
|
+
listLabel && /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(import_radix_ui8.Select.Label, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(
|
|
11837
11869
|
Label,
|
|
11838
11870
|
{
|
|
11839
11871
|
className: style_module_default15["desktop-label"],
|
|
@@ -11847,13 +11879,13 @@ var SelectContent = (0, import_react19.forwardRef)(
|
|
|
11847
11879
|
] })
|
|
11848
11880
|
}
|
|
11849
11881
|
) }),
|
|
11850
|
-
/* @__PURE__ */ (0,
|
|
11882
|
+
/* @__PURE__ */ (0, import_jsx_runtime198.jsx)(import_radix_ui9.ScrollArea.Scrollbar, { className: style_module_default15.scrollAreaScrollbar, orientation: "vertical", children: /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(import_radix_ui9.ScrollArea.Thumb, { className: style_module_default15.scrollAreaThumb }) })
|
|
11851
11883
|
] })
|
|
11852
11884
|
}
|
|
11853
11885
|
) });
|
|
11854
11886
|
}
|
|
11855
11887
|
);
|
|
11856
|
-
var SelectRoot = (0,
|
|
11888
|
+
var SelectRoot = (0, import_react20.forwardRef)(
|
|
11857
11889
|
(props, ref) => {
|
|
11858
11890
|
const {
|
|
11859
11891
|
id,
|
|
@@ -11873,13 +11905,13 @@ var SelectRoot = (0, import_react19.forwardRef)(
|
|
|
11873
11905
|
...rest
|
|
11874
11906
|
} = props;
|
|
11875
11907
|
const contentProps = { id, isResponsive, popSide, sideOffset, listLabel, children, container };
|
|
11876
|
-
const [isOpen, setIsOpen] = (0,
|
|
11877
|
-
(0,
|
|
11908
|
+
const [isOpen, setIsOpen] = (0, import_react20.useState)(false);
|
|
11909
|
+
(0, import_react20.useEffect)(() => {
|
|
11878
11910
|
setIsOpen(open);
|
|
11879
11911
|
}, [open]);
|
|
11880
|
-
return /* @__PURE__ */ (0,
|
|
11881
|
-
/* @__PURE__ */ (0,
|
|
11882
|
-
/* @__PURE__ */ (0,
|
|
11912
|
+
return /* @__PURE__ */ (0, import_jsx_runtime198.jsxs)("div", { children: [
|
|
11913
|
+
/* @__PURE__ */ (0, import_jsx_runtime198.jsxs)("div", { className: style_module_default15["label-container"], children: [
|
|
11914
|
+
/* @__PURE__ */ (0, import_jsx_runtime198.jsx)(
|
|
11883
11915
|
Label,
|
|
11884
11916
|
{
|
|
11885
11917
|
className: style_module_default15["select-label"],
|
|
@@ -11890,9 +11922,9 @@ var SelectRoot = (0, import_react19.forwardRef)(
|
|
|
11890
11922
|
children: label
|
|
11891
11923
|
}
|
|
11892
11924
|
),
|
|
11893
|
-
badge && /* @__PURE__ */ (0,
|
|
11925
|
+
badge && /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(Badge, { children: badge })
|
|
11894
11926
|
] }),
|
|
11895
|
-
/* @__PURE__ */ (0,
|
|
11927
|
+
/* @__PURE__ */ (0, import_jsx_runtime198.jsxs)(
|
|
11896
11928
|
import_radix_ui8.Select.Root,
|
|
11897
11929
|
{
|
|
11898
11930
|
...rest,
|
|
@@ -11902,18 +11934,18 @@ var SelectRoot = (0, import_react19.forwardRef)(
|
|
|
11902
11934
|
setIsOpen(open2);
|
|
11903
11935
|
},
|
|
11904
11936
|
children: [
|
|
11905
|
-
/* @__PURE__ */ (0,
|
|
11906
|
-
/* @__PURE__ */ (0,
|
|
11907
|
-
/* @__PURE__ */ (0,
|
|
11937
|
+
/* @__PURE__ */ (0, import_jsx_runtime198.jsxs)(import_radix_ui8.Select.Trigger, { className: style_module_default15.trigger, ref, id, children: [
|
|
11938
|
+
/* @__PURE__ */ (0, import_jsx_runtime198.jsx)(import_radix_ui8.Select.Value, { className: style_module_default15.placeholder, placeholder }),
|
|
11939
|
+
/* @__PURE__ */ (0, import_jsx_runtime198.jsx)(import_radix_ui8.Select.Icon, { className: style_module_default15.openIcon, children: /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(Icon, { name: "arrow-drop-down", fill: true, thick: true, size: "xs" }) })
|
|
11908
11940
|
] }),
|
|
11909
|
-
/* @__PURE__ */ (0,
|
|
11941
|
+
/* @__PURE__ */ (0, import_jsx_runtime198.jsx)(SelectContent, { ...contentProps })
|
|
11910
11942
|
]
|
|
11911
11943
|
}
|
|
11912
11944
|
)
|
|
11913
11945
|
] });
|
|
11914
11946
|
}
|
|
11915
11947
|
);
|
|
11916
|
-
var SelectItem = /* @__PURE__ */ __name(({ value, text, disabled, icon, onClick }) => /* @__PURE__ */ (0,
|
|
11948
|
+
var SelectItem = /* @__PURE__ */ __name(({ value, text, disabled, icon, onClick }) => /* @__PURE__ */ (0, import_jsx_runtime198.jsxs)(
|
|
11917
11949
|
import_radix_ui8.Select.Item,
|
|
11918
11950
|
{
|
|
11919
11951
|
className: style_module_default15.item,
|
|
@@ -11924,9 +11956,9 @@ var SelectItem = /* @__PURE__ */ __name(({ value, text, disabled, icon, onClick
|
|
|
11924
11956
|
onClick?.();
|
|
11925
11957
|
},
|
|
11926
11958
|
children: [
|
|
11927
|
-
/* @__PURE__ */ (0,
|
|
11928
|
-
icon && /* @__PURE__ */ (0,
|
|
11929
|
-
/* @__PURE__ */ (0,
|
|
11959
|
+
/* @__PURE__ */ (0, import_jsx_runtime198.jsx)(import_radix_ui8.Select.ItemText, { children: /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(Paragraph, { size: 3, type: "normal", weight: "medium", children: text ?? value }) }),
|
|
11960
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(import_radix_ui8.Select.Icon, { className: style_module_default15.icon, children: /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(Icon, { size: "xs", ...icon }) }),
|
|
11961
|
+
/* @__PURE__ */ (0, import_jsx_runtime198.jsx)(import_radix_ui8.Select.ItemIndicator, { className: style_module_default15.itemIndicator, children: /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(Icon, { fill: false, thick: true, size: "xs", name: "check-mark", type: "brand-label-primary" }) })
|
|
11930
11962
|
]
|
|
11931
11963
|
}
|
|
11932
11964
|
), "SelectItem");
|
|
@@ -11942,18 +11974,18 @@ var style_module_default16 = {
|
|
|
11942
11974
|
};
|
|
11943
11975
|
|
|
11944
11976
|
// src/components/List/index.tsx
|
|
11945
|
-
var
|
|
11977
|
+
var import_react22 = require("react");
|
|
11946
11978
|
|
|
11947
11979
|
// src/hooks/collection.tsx
|
|
11948
|
-
var
|
|
11949
|
-
var
|
|
11950
|
-
var CollectionContext = (0,
|
|
11980
|
+
var import_react21 = require("react");
|
|
11981
|
+
var import_jsx_runtime199 = require("react/jsx-runtime");
|
|
11982
|
+
var CollectionContext = (0, import_react21.createContext)(void 0);
|
|
11951
11983
|
var CollectionProvider = /* @__PURE__ */ __name(({ value, onChangeValue, children }) => {
|
|
11952
|
-
const contextValue = (0,
|
|
11953
|
-
return /* @__PURE__ */ (0,
|
|
11984
|
+
const contextValue = (0, import_react21.useMemo)(() => ({ value, onChangeValue }), [value, onChangeValue]);
|
|
11985
|
+
return /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(CollectionContext.Provider, { value: contextValue, children });
|
|
11954
11986
|
}, "CollectionProvider");
|
|
11955
11987
|
var useCollectionContext = /* @__PURE__ */ __name(() => {
|
|
11956
|
-
const context = (0,
|
|
11988
|
+
const context = (0, import_react21.useContext)(CollectionContext);
|
|
11957
11989
|
if (!context) {
|
|
11958
11990
|
throw new Error("useCollectionContext must be used within a CollectionProvider");
|
|
11959
11991
|
}
|
|
@@ -11961,17 +11993,17 @@ var useCollectionContext = /* @__PURE__ */ __name(() => {
|
|
|
11961
11993
|
}, "useCollectionContext");
|
|
11962
11994
|
|
|
11963
11995
|
// src/components/List/index.tsx
|
|
11964
|
-
var
|
|
11965
|
-
var
|
|
11996
|
+
var import_clsx17 = __toESM(require("clsx"));
|
|
11997
|
+
var import_jsx_runtime200 = require("react/jsx-runtime");
|
|
11966
11998
|
var ListRoot = /* @__PURE__ */ __name(({ children, className, ...props }) => {
|
|
11967
|
-
return /* @__PURE__ */ (0,
|
|
11999
|
+
return /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(CollectionProvider, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime200.jsx)("ul", { className: (0, import_clsx17.default)(style_module_default16.list, className), children }) });
|
|
11968
12000
|
}, "ListRoot");
|
|
11969
12001
|
var Item = /* @__PURE__ */ __name(({ value, text, disabled, icon, onClick }) => {
|
|
11970
|
-
const [isFocused, setIsFocused] = (0,
|
|
12002
|
+
const [isFocused, setIsFocused] = (0, import_react22.useState)(false);
|
|
11971
12003
|
const { value: contextValue, onChangeValue } = useCollectionContext();
|
|
11972
12004
|
const isSelected = contextValue === value;
|
|
11973
12005
|
const iconProps = isSelected ? { name: "check-mark", type: "brand-label-primary", thick: true } : icon ? icon : {};
|
|
11974
|
-
return /* @__PURE__ */ (0,
|
|
12006
|
+
return /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)(
|
|
11975
12007
|
"li",
|
|
11976
12008
|
{
|
|
11977
12009
|
className: style_module_default16.item,
|
|
@@ -11989,8 +12021,8 @@ var Item = /* @__PURE__ */ __name(({ value, text, disabled, icon, onClick }) =>
|
|
|
11989
12021
|
onChangeValue?.(value);
|
|
11990
12022
|
},
|
|
11991
12023
|
children: [
|
|
11992
|
-
/* @__PURE__ */ (0,
|
|
11993
|
-
(icon || isSelected) && /* @__PURE__ */ (0,
|
|
12024
|
+
/* @__PURE__ */ (0, import_jsx_runtime200.jsx)(Paragraph, { size: 3, type: "normal", weight: "medium", children: text }),
|
|
12025
|
+
(icon || isSelected) && /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(Icon, { className: style_module_default16.icon, size: "xs", ...iconProps })
|
|
11994
12026
|
]
|
|
11995
12027
|
}
|
|
11996
12028
|
);
|