@liner-fe/prism 2.1.72 → 2.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/lib/index.d.ts +3 -11
- package/lib/index.js +172 -193
- package/lib/index.js.map +1 -1
- package/package.json +3 -2
package/lib/index.js
CHANGED
|
@@ -35,7 +35,6 @@ __export(index_exports, {
|
|
|
35
35
|
Caption: () => Caption,
|
|
36
36
|
Checkbox: () => Checkbox,
|
|
37
37
|
DefaultButton: () => DefaultButton,
|
|
38
|
-
Display: () => Display,
|
|
39
38
|
Heading: () => Heading,
|
|
40
39
|
Icon: () => Icon,
|
|
41
40
|
IconButton: () => IconButton,
|
|
@@ -10831,24 +10830,6 @@ var Title2 = (0, import_react9.forwardRef)(
|
|
|
10831
10830
|
}
|
|
10832
10831
|
);
|
|
10833
10832
|
|
|
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
|
-
({ size, type, weight, className, children, color = "neutral-label-primary", as: Element = "p", ...rest }, ref) => {
|
|
10840
|
-
return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
|
|
10841
|
-
Element,
|
|
10842
|
-
{
|
|
10843
|
-
...rest,
|
|
10844
|
-
ref,
|
|
10845
|
-
className: (0, import_clsx7.default)(`lp-sys-typo-display${size}-${type}-${weight}`, colorVariants({ type: color }), className),
|
|
10846
|
-
children
|
|
10847
|
-
}
|
|
10848
|
-
);
|
|
10849
|
-
}
|
|
10850
|
-
);
|
|
10851
|
-
|
|
10852
10833
|
// src/components/Typography/Responsive/lib.ts
|
|
10853
10834
|
var import_fresnel = require("@artsy/fresnel");
|
|
10854
10835
|
var import_design_token = require("@liner-fe/design-token");
|
|
@@ -10870,8 +10851,8 @@ var rootMediaStyle = AppMedia.createMediaStyle();
|
|
|
10870
10851
|
var { MediaContextProvider, Media } = AppMedia;
|
|
10871
10852
|
|
|
10872
10853
|
// src/components/Typography/Responsive/index.tsx
|
|
10873
|
-
var
|
|
10874
|
-
var
|
|
10854
|
+
var import_jsx_runtime187 = require("react/jsx-runtime");
|
|
10855
|
+
var import_react10 = require("react");
|
|
10875
10856
|
var TypographyImpl = /* @__PURE__ */ __name(({ level, text, ...rest }) => {
|
|
10876
10857
|
const commonProps = {
|
|
10877
10858
|
...rest,
|
|
@@ -10879,15 +10860,13 @@ var TypographyImpl = /* @__PURE__ */ __name(({ level, text, ...rest }) => {
|
|
|
10879
10860
|
};
|
|
10880
10861
|
switch (level) {
|
|
10881
10862
|
case "caption":
|
|
10882
|
-
return /* @__PURE__ */ (0,
|
|
10883
|
-
case "display":
|
|
10884
|
-
return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(Display, { ...commonProps });
|
|
10863
|
+
return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(Caption, { ...commonProps });
|
|
10885
10864
|
case "heading":
|
|
10886
|
-
return /* @__PURE__ */ (0,
|
|
10865
|
+
return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(Heading, { ...commonProps });
|
|
10887
10866
|
case "paragraph":
|
|
10888
|
-
return /* @__PURE__ */ (0,
|
|
10867
|
+
return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(Paragraph, { ...commonProps });
|
|
10889
10868
|
case "title":
|
|
10890
|
-
return /* @__PURE__ */ (0,
|
|
10869
|
+
return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(Title2, { ...commonProps });
|
|
10891
10870
|
default:
|
|
10892
10871
|
return null;
|
|
10893
10872
|
}
|
|
@@ -10928,11 +10907,11 @@ var Typography = /* @__PURE__ */ __name((props) => {
|
|
|
10928
10907
|
}, "createMediaProps");
|
|
10929
10908
|
return (
|
|
10930
10909
|
// Fragment없이도 원래 동작해야하는데 liner-web에서 JSX.Element가 배열로 오면 에러 띄워서 임시로 Fragment로 래핑합니다.
|
|
10931
|
-
/* @__PURE__ */ (0,
|
|
10910
|
+
/* @__PURE__ */ (0, import_jsx_runtime187.jsx)(import_jsx_runtime187.Fragment, { children: breakPointKeyArray.map((breakPointKey) => {
|
|
10932
10911
|
const variable = props[breakPointKey];
|
|
10933
10912
|
const isExistVariable = !!variable;
|
|
10934
10913
|
if (isExistVariable) {
|
|
10935
|
-
return /* @__PURE__ */ (0,
|
|
10914
|
+
return /* @__PURE__ */ (0, import_react10.createElement)(Media, { ...createMediaProps(breakPointKey), key: breakPointKey }, /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(TypographyImpl, { ...variable, text: variable.text || children }));
|
|
10936
10915
|
}
|
|
10937
10916
|
return null;
|
|
10938
10917
|
}) })
|
|
@@ -10962,7 +10941,7 @@ var style_module_default6 = {
|
|
|
10962
10941
|
|
|
10963
10942
|
// src/components/Popover/index.tsx
|
|
10964
10943
|
var import_cva6 = require("cva");
|
|
10965
|
-
var
|
|
10944
|
+
var import_clsx8 = require("clsx");
|
|
10966
10945
|
|
|
10967
10946
|
// src/components/TextButton/index.tsx
|
|
10968
10947
|
var import_cva5 = require("cva");
|
|
@@ -10984,9 +10963,9 @@ var style_module_default7 = {
|
|
|
10984
10963
|
};
|
|
10985
10964
|
|
|
10986
10965
|
// src/components/TextButton/index.tsx
|
|
10987
|
-
var
|
|
10988
|
-
var
|
|
10989
|
-
var
|
|
10966
|
+
var import_react11 = require("react");
|
|
10967
|
+
var import_clsx7 = __toESM(require("clsx"));
|
|
10968
|
+
var import_jsx_runtime188 = require("react/jsx-runtime");
|
|
10990
10969
|
var textButtonLevelIconTypeMap = {
|
|
10991
10970
|
primary: "brand-label-primary",
|
|
10992
10971
|
secondary: "neutral-label-primary",
|
|
@@ -11023,7 +11002,7 @@ var textButtonVariants = (0, import_cva5.cva)({
|
|
|
11023
11002
|
}
|
|
11024
11003
|
}
|
|
11025
11004
|
});
|
|
11026
|
-
var TextButton = (0,
|
|
11005
|
+
var TextButton = (0, import_react11.forwardRef)(
|
|
11027
11006
|
({
|
|
11028
11007
|
level = "primary",
|
|
11029
11008
|
thick = false,
|
|
@@ -11043,27 +11022,27 @@ var TextButton = (0, import_react12.forwardRef)(
|
|
|
11043
11022
|
fillType: textButtonLevelIconFillTypeMap[level],
|
|
11044
11023
|
...icon
|
|
11045
11024
|
}), "getIconProps");
|
|
11046
|
-
const renderContent = /* @__PURE__ */ __name((children2) => /* @__PURE__ */ (0,
|
|
11047
|
-
leftIcon && /* @__PURE__ */ (0,
|
|
11048
|
-
/* @__PURE__ */ (0,
|
|
11049
|
-
rightIcon && /* @__PURE__ */ (0,
|
|
11025
|
+
const renderContent = /* @__PURE__ */ __name((children2) => /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)("span", { className: style_module_default7["text-children"], children: [
|
|
11026
|
+
leftIcon && /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(Icon, { ...getIconProps(leftIcon) }),
|
|
11027
|
+
/* @__PURE__ */ (0, import_jsx_runtime188.jsx)("p", { children: children2 }),
|
|
11028
|
+
rightIcon && /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(Icon, { ...getIconProps(rightIcon) })
|
|
11050
11029
|
] }), "renderContent");
|
|
11051
11030
|
if (asChild) {
|
|
11052
|
-
const parent =
|
|
11053
|
-
return (0,
|
|
11031
|
+
const parent = import_react11.Children.only(children);
|
|
11032
|
+
return (0, import_react11.cloneElement)(
|
|
11054
11033
|
parent,
|
|
11055
11034
|
{
|
|
11056
11035
|
...rest,
|
|
11057
|
-
className: (0,
|
|
11036
|
+
className: (0, import_clsx7.default)(textButtonVariants({ level, thick, underline, size }), className),
|
|
11058
11037
|
ref
|
|
11059
11038
|
},
|
|
11060
11039
|
renderContent(parent.props.children)
|
|
11061
11040
|
);
|
|
11062
11041
|
}
|
|
11063
|
-
return /* @__PURE__ */ (0,
|
|
11042
|
+
return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(
|
|
11064
11043
|
"button",
|
|
11065
11044
|
{
|
|
11066
|
-
className: (0,
|
|
11045
|
+
className: (0, import_clsx7.default)(textButtonVariants({ level, thick, underline, size }), className),
|
|
11067
11046
|
ref,
|
|
11068
11047
|
...rest,
|
|
11069
11048
|
children: renderContent(children)
|
|
@@ -11074,7 +11053,7 @@ var TextButton = (0, import_react12.forwardRef)(
|
|
|
11074
11053
|
TextButton.displayName = "TextButton";
|
|
11075
11054
|
|
|
11076
11055
|
// src/components/Popover/index.tsx
|
|
11077
|
-
var
|
|
11056
|
+
var import_jsx_runtime189 = require("react/jsx-runtime");
|
|
11078
11057
|
var DEFAULT_OFFSET = -6;
|
|
11079
11058
|
var popoverVariants = (0, import_cva6.cva)({
|
|
11080
11059
|
base: style_module_default6.content,
|
|
@@ -11100,9 +11079,9 @@ var popoverDescriptionVariants = (0, import_cva6.cva)({
|
|
|
11100
11079
|
base: [style_module_default6.description, "lp-sys-typo-caption1-normal-regular"]
|
|
11101
11080
|
});
|
|
11102
11081
|
var popoverFooterVariants = (0, import_cva6.cva)({ base: [style_module_default6.footer, "lp-sys-typo-caption1-normal-medium"] });
|
|
11103
|
-
var PopoverRoot = /* @__PURE__ */ __name(({ isOpen, children, onChange }) => /* @__PURE__ */ (0,
|
|
11104
|
-
var PopoverTrigger = /* @__PURE__ */ __name(({ by }) => /* @__PURE__ */ (0,
|
|
11105
|
-
var PopoverAnchor = /* @__PURE__ */ __name(({ className }) => /* @__PURE__ */ (0,
|
|
11082
|
+
var PopoverRoot = /* @__PURE__ */ __name(({ isOpen, children, onChange }) => /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(import_radix_ui.Popover.Root, { open: isOpen, onOpenChange: onChange, children }), "PopoverRoot");
|
|
11083
|
+
var PopoverTrigger = /* @__PURE__ */ __name(({ by }) => /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(import_radix_ui.Popover.Trigger, { asChild: true, children: by }), "PopoverTrigger");
|
|
11084
|
+
var PopoverAnchor = /* @__PURE__ */ __name(({ className }) => /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(
|
|
11106
11085
|
"svg",
|
|
11107
11086
|
{
|
|
11108
11087
|
className,
|
|
@@ -11111,7 +11090,7 @@ var PopoverAnchor = /* @__PURE__ */ __name(({ className }) => /* @__PURE__ */ (0
|
|
|
11111
11090
|
height: "10",
|
|
11112
11091
|
viewBox: "0 0 30 10",
|
|
11113
11092
|
fill: "none",
|
|
11114
|
-
children: /* @__PURE__ */ (0,
|
|
11093
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(
|
|
11115
11094
|
"path",
|
|
11116
11095
|
{
|
|
11117
11096
|
fillRule: "evenodd",
|
|
@@ -11140,8 +11119,8 @@ var PopoverContent = React17.forwardRef(
|
|
|
11140
11119
|
children,
|
|
11141
11120
|
container,
|
|
11142
11121
|
...props
|
|
11143
|
-
}, ref) => /* @__PURE__ */ (0,
|
|
11144
|
-
/* @__PURE__ */ (0,
|
|
11122
|
+
}, ref) => /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(import_radix_ui.Popover.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)(import_jsx_runtime189.Fragment, { children: [
|
|
11123
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsxs)(
|
|
11145
11124
|
import_radix_ui.Popover.Content,
|
|
11146
11125
|
{
|
|
11147
11126
|
ref,
|
|
@@ -11149,22 +11128,22 @@ var PopoverContent = React17.forwardRef(
|
|
|
11149
11128
|
side: position,
|
|
11150
11129
|
sideOffset: DEFAULT_OFFSET,
|
|
11151
11130
|
onPointerDownOutside,
|
|
11152
|
-
className: (0,
|
|
11131
|
+
className: (0, import_clsx8.clsx)(popoverVariants({ level }), className),
|
|
11153
11132
|
...props,
|
|
11154
11133
|
children: [
|
|
11155
|
-
/* @__PURE__ */ (0,
|
|
11156
|
-
(tag || icon || onClose) && /* @__PURE__ */ (0,
|
|
11157
|
-
tag && /* @__PURE__ */ (0,
|
|
11158
|
-
icon && /* @__PURE__ */ (0,
|
|
11159
|
-
/* @__PURE__ */ (0,
|
|
11160
|
-
onClose && /* @__PURE__ */ (0,
|
|
11134
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsxs)("div", { className: style_module_default6.contentContainer, children: [
|
|
11135
|
+
(tag || icon || onClose) && /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)("div", { className: style_module_default6.heading, children: [
|
|
11136
|
+
tag && /* @__PURE__ */ (0, import_jsx_runtime189.jsx)("span", { className: popoverTagVariants(), children: tag }),
|
|
11137
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(Icon, { name: icon.name, size: "xs", thick: icon.thick, fill: icon.fill }),
|
|
11138
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsx)("p", { className: popoverTitleVariants(), children: title }),
|
|
11139
|
+
onClose && /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(
|
|
11161
11140
|
import_radix_ui.Popover.PopoverClose,
|
|
11162
11141
|
{
|
|
11163
11142
|
className: style_module_default6.closeButton,
|
|
11164
11143
|
onClick: () => {
|
|
11165
11144
|
onClose();
|
|
11166
11145
|
},
|
|
11167
|
-
children: /* @__PURE__ */ (0,
|
|
11146
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(
|
|
11168
11147
|
Icon,
|
|
11169
11148
|
{
|
|
11170
11149
|
name: "close-fill",
|
|
@@ -11177,8 +11156,8 @@ var PopoverContent = React17.forwardRef(
|
|
|
11177
11156
|
}
|
|
11178
11157
|
)
|
|
11179
11158
|
] }),
|
|
11180
|
-
description && /* @__PURE__ */ (0,
|
|
11181
|
-
onConfirm && /* @__PURE__ */ (0,
|
|
11159
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime189.jsx)("p", { className: popoverDescriptionVariants(), children: description }),
|
|
11160
|
+
onConfirm && /* @__PURE__ */ (0, import_jsx_runtime189.jsx)("div", { className: popoverFooterVariants(), children: /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(
|
|
11182
11161
|
TextButton,
|
|
11183
11162
|
{
|
|
11184
11163
|
level: "inverse-static",
|
|
@@ -11190,11 +11169,11 @@ var PopoverContent = React17.forwardRef(
|
|
|
11190
11169
|
) }),
|
|
11191
11170
|
children
|
|
11192
11171
|
] }),
|
|
11193
|
-
/* @__PURE__ */ (0,
|
|
11172
|
+
/* @__PURE__ */ (0, import_jsx_runtime189.jsx)(import_radix_ui.Popover.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(PopoverAnchor, { className: (0, import_clsx8.clsx)(popoverAnchorVariants({ level })) }) })
|
|
11194
11173
|
]
|
|
11195
11174
|
}
|
|
11196
11175
|
),
|
|
11197
|
-
isOverlay && /* @__PURE__ */ (0,
|
|
11176
|
+
isOverlay && /* @__PURE__ */ (0, import_jsx_runtime189.jsx)("div", { "data-radix-popper-overlay": true, className: style_module_default6.overlay })
|
|
11198
11177
|
] }) })
|
|
11199
11178
|
);
|
|
11200
11179
|
var Popover = Object.assign(PopoverRoot, {
|
|
@@ -11206,7 +11185,7 @@ var Popover = Object.assign(PopoverRoot, {
|
|
|
11206
11185
|
|
|
11207
11186
|
// src/components/Tooltip/index.tsx
|
|
11208
11187
|
var import_radix_ui2 = require("radix-ui");
|
|
11209
|
-
var
|
|
11188
|
+
var import_react12 = require("react");
|
|
11210
11189
|
|
|
11211
11190
|
// src/components/Tooltip/style.module.scss
|
|
11212
11191
|
var style_module_default8 = {
|
|
@@ -11216,14 +11195,14 @@ var style_module_default8 = {
|
|
|
11216
11195
|
|
|
11217
11196
|
// src/components/Tooltip/index.tsx
|
|
11218
11197
|
var import_cva7 = require("cva");
|
|
11219
|
-
var
|
|
11220
|
-
var
|
|
11198
|
+
var import_clsx9 = __toESM(require("clsx"));
|
|
11199
|
+
var import_jsx_runtime190 = require("react/jsx-runtime");
|
|
11221
11200
|
var DEFAULT_OFFSET2 = "medium";
|
|
11222
11201
|
var tooltipVariants = (0, import_cva7.cva)({ base: [style_module_default8.tooltip, "lp-sys-typo-caption1-normal-medium"] });
|
|
11223
11202
|
var TooltipProvider = import_radix_ui2.Tooltip.Provider;
|
|
11224
|
-
var TooltipRoot = /* @__PURE__ */ __name(({ children, ...props }) => /* @__PURE__ */ (0,
|
|
11225
|
-
var TooltipTrigger = /* @__PURE__ */ __name(({ by }) => /* @__PURE__ */ (0,
|
|
11226
|
-
var TooltipContent = (0,
|
|
11203
|
+
var TooltipRoot = /* @__PURE__ */ __name(({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(import_radix_ui2.Tooltip.Root, { delayDuration: 0, ...props, children }), "TooltipRoot");
|
|
11204
|
+
var TooltipTrigger = /* @__PURE__ */ __name(({ by }) => /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(import_radix_ui2.Tooltip.Trigger, { asChild: true, children: by }), "TooltipTrigger");
|
|
11205
|
+
var TooltipContent = (0, import_react12.forwardRef)(
|
|
11227
11206
|
({
|
|
11228
11207
|
description,
|
|
11229
11208
|
position = "top",
|
|
@@ -11231,16 +11210,16 @@ var TooltipContent = (0, import_react13.forwardRef)(
|
|
|
11231
11210
|
offset = DEFAULT_OFFSET2,
|
|
11232
11211
|
collisionPadding,
|
|
11233
11212
|
...props
|
|
11234
|
-
}, ref) => /* @__PURE__ */ (0,
|
|
11213
|
+
}, ref) => /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
|
|
11235
11214
|
import_radix_ui2.Tooltip.Content,
|
|
11236
11215
|
{
|
|
11237
11216
|
ref,
|
|
11238
11217
|
side: position,
|
|
11239
11218
|
sideOffset: offset === "medium" ? 4 : 8,
|
|
11240
11219
|
collisionPadding,
|
|
11241
|
-
className: (0,
|
|
11220
|
+
className: (0, import_clsx9.default)(tooltipVariants(), className),
|
|
11242
11221
|
...props,
|
|
11243
|
-
children: /* @__PURE__ */ (0,
|
|
11222
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime190.jsx)("p", { className: style_module_default8.tooltipContent, children: description })
|
|
11244
11223
|
}
|
|
11245
11224
|
)
|
|
11246
11225
|
);
|
|
@@ -11252,8 +11231,8 @@ var Tooltip = Object.assign(TooltipRoot, {
|
|
|
11252
11231
|
|
|
11253
11232
|
// src/components/IconButton/index.tsx
|
|
11254
11233
|
var import_cva8 = require("cva");
|
|
11255
|
-
var
|
|
11256
|
-
var
|
|
11234
|
+
var import_react13 = require("react");
|
|
11235
|
+
var import_clsx10 = __toESM(require("clsx"));
|
|
11257
11236
|
|
|
11258
11237
|
// src/components/IconButton/style.module.scss
|
|
11259
11238
|
var style_module_default9 = {
|
|
@@ -11275,7 +11254,7 @@ var style_module_default9 = {
|
|
|
11275
11254
|
|
|
11276
11255
|
// src/components/IconButton/index.tsx
|
|
11277
11256
|
var import_radix_ui3 = require("radix-ui");
|
|
11278
|
-
var
|
|
11257
|
+
var import_jsx_runtime191 = require("react/jsx-runtime");
|
|
11279
11258
|
var { Slot } = import_radix_ui3.Slot;
|
|
11280
11259
|
var iconButtonSizeIconSizeMap = {
|
|
11281
11260
|
l: "m",
|
|
@@ -11347,7 +11326,7 @@ var iconButtonVariants = (0, import_cva8.cva)({
|
|
|
11347
11326
|
}
|
|
11348
11327
|
}
|
|
11349
11328
|
});
|
|
11350
|
-
var IconButton = (0,
|
|
11329
|
+
var IconButton = (0, import_react13.forwardRef)(
|
|
11351
11330
|
({
|
|
11352
11331
|
asChild,
|
|
11353
11332
|
level = "primary",
|
|
@@ -11360,16 +11339,16 @@ var IconButton = (0, import_react14.forwardRef)(
|
|
|
11360
11339
|
...rest
|
|
11361
11340
|
}, ref) => {
|
|
11362
11341
|
const Comp = asChild ? Slot : "button";
|
|
11363
|
-
return /* @__PURE__ */ (0,
|
|
11342
|
+
return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
|
|
11364
11343
|
Comp,
|
|
11365
11344
|
{
|
|
11366
11345
|
...rest,
|
|
11367
|
-
className: (0,
|
|
11346
|
+
className: (0, import_clsx10.default)(iconButtonVariants({ level, size, fill }), className),
|
|
11368
11347
|
ref,
|
|
11369
11348
|
disabled: disabled && !isLoading,
|
|
11370
11349
|
"aria-label": icon.name,
|
|
11371
11350
|
role: "button",
|
|
11372
|
-
children: isLoading ? /* @__PURE__ */ (0,
|
|
11351
|
+
children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(Loading, { size: iconButtonLoadingSizeMap[size], level: iconButtonLoadingLevelMap[level] }) : /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
|
|
11373
11352
|
Icon,
|
|
11374
11353
|
{
|
|
11375
11354
|
size: iconButtonSizeIconSizeMap[size],
|
|
@@ -11395,13 +11374,13 @@ var style_module_default10 = {
|
|
|
11395
11374
|
};
|
|
11396
11375
|
|
|
11397
11376
|
// src/components/CheckBox/index.tsx
|
|
11398
|
-
var
|
|
11399
|
-
var
|
|
11377
|
+
var import_react15 = require("react");
|
|
11378
|
+
var import_clsx12 = __toESM(require("clsx"));
|
|
11400
11379
|
|
|
11401
11380
|
// src/components/Label/index.tsx
|
|
11402
|
-
var
|
|
11381
|
+
var import_react14 = require("react");
|
|
11403
11382
|
var import_radix_ui4 = require("radix-ui");
|
|
11404
|
-
var
|
|
11383
|
+
var import_clsx11 = __toESM(require("clsx"));
|
|
11405
11384
|
|
|
11406
11385
|
// src/components/Label/style.module.scss
|
|
11407
11386
|
var style_module_default11 = {
|
|
@@ -11422,7 +11401,7 @@ var style_module_default11 = {
|
|
|
11422
11401
|
|
|
11423
11402
|
// src/components/Label/index.tsx
|
|
11424
11403
|
var import_cva9 = require("cva");
|
|
11425
|
-
var
|
|
11404
|
+
var import_jsx_runtime192 = require("react/jsx-runtime");
|
|
11426
11405
|
var defaultLabelVariants = (0, import_cva9.cva)({
|
|
11427
11406
|
base: ["lp-sys-typo-paragraph2-normal-medium", style_module_default11.label],
|
|
11428
11407
|
variants: {
|
|
@@ -11452,7 +11431,7 @@ var defaultLabelVariants = (0, import_cva9.cva)({
|
|
|
11452
11431
|
}
|
|
11453
11432
|
}
|
|
11454
11433
|
});
|
|
11455
|
-
var Label = (0,
|
|
11434
|
+
var Label = (0, import_react14.forwardRef)(
|
|
11456
11435
|
({
|
|
11457
11436
|
className,
|
|
11458
11437
|
level = "primary",
|
|
@@ -11463,11 +11442,11 @@ var Label = (0, import_react15.forwardRef)(
|
|
|
11463
11442
|
error = false,
|
|
11464
11443
|
...props
|
|
11465
11444
|
}, ref) => {
|
|
11466
|
-
return /* @__PURE__ */ (0,
|
|
11445
|
+
return /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
|
|
11467
11446
|
import_radix_ui4.Label.Root,
|
|
11468
11447
|
{
|
|
11469
11448
|
ref,
|
|
11470
|
-
className: (0,
|
|
11449
|
+
className: (0, import_clsx11.default)(
|
|
11471
11450
|
defaultLabelVariants({ level, position, size, offset, disabled, error }),
|
|
11472
11451
|
className
|
|
11473
11452
|
),
|
|
@@ -11479,24 +11458,24 @@ var Label = (0, import_react15.forwardRef)(
|
|
|
11479
11458
|
Label.displayName = "Label";
|
|
11480
11459
|
|
|
11481
11460
|
// src/components/CheckBox/index.tsx
|
|
11482
|
-
var
|
|
11483
|
-
var Checkbox = (0,
|
|
11461
|
+
var import_jsx_runtime193 = require("react/jsx-runtime");
|
|
11462
|
+
var Checkbox = (0, import_react15.forwardRef)(
|
|
11484
11463
|
({ className, label, description, ...props }, ref) => {
|
|
11485
|
-
const CheckboxWrapper = /* @__PURE__ */ __name(({ children }) => label ? /* @__PURE__ */ (0,
|
|
11486
|
-
/* @__PURE__ */ (0,
|
|
11464
|
+
const CheckboxWrapper = /* @__PURE__ */ __name(({ children }) => label ? /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(Label, { position: "right", htmlFor: props.id, children: [
|
|
11465
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { className: style_module_default10["label-wrapper"], children: [
|
|
11487
11466
|
label,
|
|
11488
|
-
/* @__PURE__ */ (0,
|
|
11467
|
+
/* @__PURE__ */ (0, import_jsx_runtime193.jsx)(Paragraph, { className: style_module_default10.description, size: 3, type: "normal", weight: "regular", children: description })
|
|
11489
11468
|
] }),
|
|
11490
11469
|
children
|
|
11491
|
-
] }) : /* @__PURE__ */ (0,
|
|
11492
|
-
return /* @__PURE__ */ (0,
|
|
11470
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(import_jsx_runtime193.Fragment, { children }), "CheckboxWrapper");
|
|
11471
|
+
return /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(CheckboxWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(import_radix_ui5.Checkbox.Root, { className: (0, import_clsx12.default)(style_module_default10.checkbox, className), ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(import_radix_ui5.Checkbox.Indicator, { className: style_module_default10["checkbox-indicator"], children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(Icon, { name: "check-mark", thick: true, size: "xs", type: "inverse-label-primary" }) }) }) });
|
|
11493
11472
|
}
|
|
11494
11473
|
);
|
|
11495
11474
|
|
|
11496
11475
|
// src/components/Radio/index.tsx
|
|
11497
11476
|
var import_radix_ui6 = require("radix-ui");
|
|
11498
|
-
var
|
|
11499
|
-
var
|
|
11477
|
+
var import_clsx13 = __toESM(require("clsx"));
|
|
11478
|
+
var import_react16 = require("react");
|
|
11500
11479
|
|
|
11501
11480
|
// src/components/Radio/style.module.scss
|
|
11502
11481
|
var style_module_default12 = {
|
|
@@ -11507,27 +11486,27 @@ var style_module_default12 = {
|
|
|
11507
11486
|
};
|
|
11508
11487
|
|
|
11509
11488
|
// src/components/Radio/index.tsx
|
|
11510
|
-
var
|
|
11511
|
-
var RadioIndicator = /* @__PURE__ */ __name(() => /* @__PURE__ */ (0,
|
|
11512
|
-
var RadioRoot = (0,
|
|
11489
|
+
var import_jsx_runtime194 = require("react/jsx-runtime");
|
|
11490
|
+
var RadioIndicator = /* @__PURE__ */ __name(() => /* @__PURE__ */ (0, import_jsx_runtime194.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_runtime194.jsx)("circle", { cx: "5", cy: "5", r: "5", fill: "#313133" }) }), "RadioIndicator");
|
|
11491
|
+
var RadioRoot = (0, import_react16.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(import_radix_ui6.RadioGroup.Root, { ref, className, ...props }));
|
|
11513
11492
|
RadioRoot.displayName = "RadioRoot";
|
|
11514
|
-
var RadioItem = (0,
|
|
11493
|
+
var RadioItem = (0, import_react16.forwardRef)(
|
|
11515
11494
|
({ className, label, description, ...props }, ref) => {
|
|
11516
|
-
const RadioItemWrapper = /* @__PURE__ */ __name(({ children }) => label ? /* @__PURE__ */ (0,
|
|
11517
|
-
/* @__PURE__ */ (0,
|
|
11495
|
+
const RadioItemWrapper = /* @__PURE__ */ __name(({ children }) => label ? /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)(Label, { position: "right", children: [
|
|
11496
|
+
/* @__PURE__ */ (0, import_jsx_runtime194.jsxs)("div", { className: style_module_default12["label-wrapper"], children: [
|
|
11518
11497
|
label,
|
|
11519
|
-
description && /* @__PURE__ */ (0,
|
|
11498
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(Paragraph, { className: style_module_default12.description, size: 3, type: "normal", weight: "regular", children: description })
|
|
11520
11499
|
] }),
|
|
11521
11500
|
children
|
|
11522
|
-
] }) : /* @__PURE__ */ (0,
|
|
11523
|
-
return /* @__PURE__ */ (0,
|
|
11501
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(import_jsx_runtime194.Fragment, { children }), "RadioItemWrapper");
|
|
11502
|
+
return /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(RadioItemWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
|
|
11524
11503
|
import_radix_ui6.RadioGroup.Item,
|
|
11525
11504
|
{
|
|
11526
11505
|
ref,
|
|
11527
|
-
className: (0,
|
|
11506
|
+
className: (0, import_clsx13.default)(style_module_default12["radio-item"], className),
|
|
11528
11507
|
...props,
|
|
11529
11508
|
"aria-label": label,
|
|
11530
|
-
children: /* @__PURE__ */ (0,
|
|
11509
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(import_radix_ui6.RadioGroup.Indicator, { className: style_module_default12.indicator, children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(RadioIndicator, {}) })
|
|
11531
11510
|
}
|
|
11532
11511
|
) });
|
|
11533
11512
|
}
|
|
@@ -11538,7 +11517,7 @@ var Radio = Object.assign(RadioRoot, {
|
|
|
11538
11517
|
});
|
|
11539
11518
|
|
|
11540
11519
|
// src/components/Textfield/index.tsx
|
|
11541
|
-
var
|
|
11520
|
+
var import_react17 = require("react");
|
|
11542
11521
|
|
|
11543
11522
|
// src/components/Textfield/style.module.scss
|
|
11544
11523
|
var style_module_default13 = {
|
|
@@ -11564,9 +11543,9 @@ var style_module_default13 = {
|
|
|
11564
11543
|
|
|
11565
11544
|
// src/components/Textfield/index.tsx
|
|
11566
11545
|
var import_cva10 = require("cva");
|
|
11567
|
-
var
|
|
11546
|
+
var import_clsx14 = __toESM(require("clsx"));
|
|
11568
11547
|
var import_react_dom2 = require("react-dom");
|
|
11569
|
-
var
|
|
11548
|
+
var import_jsx_runtime195 = require("react/jsx-runtime");
|
|
11570
11549
|
var defaultTextfieldVariants = (0, import_cva10.cva)({
|
|
11571
11550
|
base: style_module_default13.textfield,
|
|
11572
11551
|
variants: {
|
|
@@ -11576,9 +11555,9 @@ var defaultTextfieldVariants = (0, import_cva10.cva)({
|
|
|
11576
11555
|
}
|
|
11577
11556
|
}
|
|
11578
11557
|
});
|
|
11579
|
-
var Textfield = (0,
|
|
11558
|
+
var Textfield = (0, import_react17.forwardRef)((props, ref) => {
|
|
11580
11559
|
const {
|
|
11581
|
-
id = (0,
|
|
11560
|
+
id = (0, import_react17.useId)(),
|
|
11582
11561
|
type,
|
|
11583
11562
|
label,
|
|
11584
11563
|
value: controlledValue,
|
|
@@ -11592,9 +11571,9 @@ var Textfield = (0, import_react18.forwardRef)((props, ref) => {
|
|
|
11592
11571
|
onClear,
|
|
11593
11572
|
...rest
|
|
11594
11573
|
} = props;
|
|
11595
|
-
const inputRef = (0,
|
|
11596
|
-
const [value, setValue] = (0,
|
|
11597
|
-
const [deidentifiy, setDeidentifiy] = (0,
|
|
11574
|
+
const inputRef = (0, import_react17.useRef)(null);
|
|
11575
|
+
const [value, setValue] = (0, import_react17.useState)("");
|
|
11576
|
+
const [deidentifiy, setDeidentifiy] = (0, import_react17.useState)(true);
|
|
11598
11577
|
const isControlled = controlledValue !== void 0;
|
|
11599
11578
|
const isPassword = type === "password";
|
|
11600
11579
|
const isDeidentified = isPassword && deidentifiy;
|
|
@@ -11634,21 +11613,21 @@ var Textfield = (0, import_react18.forwardRef)((props, ref) => {
|
|
|
11634
11613
|
inputRef.current.setSelectionRange(length, length);
|
|
11635
11614
|
}
|
|
11636
11615
|
}, "handleDeidentify");
|
|
11637
|
-
(0,
|
|
11638
|
-
return /* @__PURE__ */ (0,
|
|
11639
|
-
/* @__PURE__ */ (0,
|
|
11616
|
+
(0, import_react17.useImperativeHandle)(ref, () => inputRef.current);
|
|
11617
|
+
return /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("div", { className: style_module_default13["textfield-container"], children: [
|
|
11618
|
+
/* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
|
|
11640
11619
|
"div",
|
|
11641
11620
|
{
|
|
11642
|
-
className: (0,
|
|
11621
|
+
className: (0, import_clsx14.default)(defaultTextfieldVariants({ color }), {
|
|
11643
11622
|
[style_module_default13.error]: !!error,
|
|
11644
11623
|
[style_module_default13["label-out-textfield"]]: !label || labelType === "out"
|
|
11645
11624
|
}),
|
|
11646
11625
|
onClick: handleTextfieldClick,
|
|
11647
|
-
children: /* @__PURE__ */ (0,
|
|
11648
|
-
/* @__PURE__ */ (0,
|
|
11626
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("div", { className: style_module_default13["input-wrapper"], children: [
|
|
11627
|
+
/* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
|
|
11649
11628
|
"input",
|
|
11650
11629
|
{
|
|
11651
|
-
className: (0,
|
|
11630
|
+
className: (0, import_clsx14.default)(style_module_default13.input, {
|
|
11652
11631
|
[style_module_default13["label-out-input"]]: !label || labelType === "out"
|
|
11653
11632
|
}),
|
|
11654
11633
|
type: isDeidentified ? "password" : "text",
|
|
@@ -11660,10 +11639,10 @@ var Textfield = (0, import_react18.forwardRef)((props, ref) => {
|
|
|
11660
11639
|
...rest
|
|
11661
11640
|
}
|
|
11662
11641
|
),
|
|
11663
|
-
/* @__PURE__ */ (0,
|
|
11642
|
+
/* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
|
|
11664
11643
|
Label,
|
|
11665
11644
|
{
|
|
11666
|
-
className: (0,
|
|
11645
|
+
className: (0, import_clsx14.default)(style_module_default13.label, {
|
|
11667
11646
|
[style_module_default13["label-in"]]: labelType === "in",
|
|
11668
11647
|
[style_module_default13["label-out"]]: !label || labelType === "out"
|
|
11669
11648
|
}),
|
|
@@ -11672,8 +11651,8 @@ var Textfield = (0, import_react18.forwardRef)((props, ref) => {
|
|
|
11672
11651
|
children: labelText
|
|
11673
11652
|
}
|
|
11674
11653
|
),
|
|
11675
|
-
/* @__PURE__ */ (0,
|
|
11676
|
-
textfieldValue && !disabled && /* @__PURE__ */ (0,
|
|
11654
|
+
/* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("div", { className: style_module_default13["input-action-buttons"], children: [
|
|
11655
|
+
textfieldValue && !disabled && /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
|
|
11677
11656
|
IconButton,
|
|
11678
11657
|
{
|
|
11679
11658
|
tabIndex: -1,
|
|
@@ -11691,7 +11670,7 @@ var Textfield = (0, import_react18.forwardRef)((props, ref) => {
|
|
|
11691
11670
|
}
|
|
11692
11671
|
}
|
|
11693
11672
|
),
|
|
11694
|
-
isPassword && !disabled && /* @__PURE__ */ (0,
|
|
11673
|
+
isPassword && !disabled && /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
|
|
11695
11674
|
IconButton,
|
|
11696
11675
|
{
|
|
11697
11676
|
tabIndex: -1,
|
|
@@ -11709,14 +11688,14 @@ var Textfield = (0, import_react18.forwardRef)((props, ref) => {
|
|
|
11709
11688
|
}
|
|
11710
11689
|
}
|
|
11711
11690
|
),
|
|
11712
|
-
buttonProps && /* @__PURE__ */ (0,
|
|
11691
|
+
buttonProps && /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(Button, { ...buttonProps, size: "m", type: "button" })
|
|
11713
11692
|
] })
|
|
11714
11693
|
] })
|
|
11715
11694
|
}
|
|
11716
11695
|
),
|
|
11717
|
-
displayFooter && /* @__PURE__ */ (0,
|
|
11718
|
-
/* @__PURE__ */ (0,
|
|
11719
|
-
/* @__PURE__ */ (0,
|
|
11696
|
+
displayFooter && /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("div", { className: style_module_default13.footer, children: [
|
|
11697
|
+
/* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { className: style_module_default13["error-wrapper"], children: error && /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)(import_jsx_runtime195.Fragment, { children: [
|
|
11698
|
+
/* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
|
|
11720
11699
|
Icon,
|
|
11721
11700
|
{
|
|
11722
11701
|
name: "exclamationmark-fill",
|
|
@@ -11726,9 +11705,9 @@ var Textfield = (0, import_react18.forwardRef)((props, ref) => {
|
|
|
11726
11705
|
type: "function-label-negative"
|
|
11727
11706
|
}
|
|
11728
11707
|
),
|
|
11729
|
-
/* @__PURE__ */ (0,
|
|
11708
|
+
/* @__PURE__ */ (0, import_jsx_runtime195.jsx)(Caption, { size: 3, type: "normal", weight: "regular", className: style_module_default13["error-message"], children: error })
|
|
11730
11709
|
] }) }),
|
|
11731
|
-
maxCharacter && /* @__PURE__ */ (0,
|
|
11710
|
+
maxCharacter && /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)(Caption, { className: style_module_default13.character, size: 3, type: "normal", weight: "regular", children: [
|
|
11732
11711
|
isControlled ? controlledValue.length : value.length,
|
|
11733
11712
|
"/",
|
|
11734
11713
|
maxCharacter
|
|
@@ -11739,7 +11718,7 @@ var Textfield = (0, import_react18.forwardRef)((props, ref) => {
|
|
|
11739
11718
|
Textfield.displayName = "Textfield";
|
|
11740
11719
|
|
|
11741
11720
|
// src/components/Slider/index.tsx
|
|
11742
|
-
var
|
|
11721
|
+
var import_react18 = require("react");
|
|
11743
11722
|
|
|
11744
11723
|
// src/components/Slider/style.module.scss
|
|
11745
11724
|
var style_module_default14 = {
|
|
@@ -11756,30 +11735,30 @@ var style_module_default14 = {
|
|
|
11756
11735
|
|
|
11757
11736
|
// src/components/Slider/index.tsx
|
|
11758
11737
|
var import_radix_ui7 = require("radix-ui");
|
|
11759
|
-
var
|
|
11760
|
-
var SliderRoot = (0,
|
|
11738
|
+
var import_jsx_runtime196 = require("react/jsx-runtime");
|
|
11739
|
+
var SliderRoot = (0, import_react18.forwardRef)(
|
|
11761
11740
|
(props, ref) => {
|
|
11762
11741
|
const { label, tooltip, rangeLeft, rangeRight, min, max, step = 50, ...rest } = props;
|
|
11763
|
-
return /* @__PURE__ */ (0,
|
|
11764
|
-
/* @__PURE__ */ (0,
|
|
11765
|
-
/* @__PURE__ */ (0,
|
|
11766
|
-
/* @__PURE__ */ (0,
|
|
11767
|
-
/* @__PURE__ */ (0,
|
|
11768
|
-
/* @__PURE__ */ (0,
|
|
11742
|
+
return /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(import_jsx_runtime196.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)(Tooltip.Provider, { children: [
|
|
11743
|
+
/* @__PURE__ */ (0, import_jsx_runtime196.jsx)(Label, { level: "secondary", size: "m", offset: "high", className: style_module_default14.label, children: label }),
|
|
11744
|
+
/* @__PURE__ */ (0, import_jsx_runtime196.jsxs)("div", { className: style_module_default14["slider-wrapper"], children: [
|
|
11745
|
+
/* @__PURE__ */ (0, import_jsx_runtime196.jsxs)("div", { className: style_module_default14["slider-option-wrapper"], children: [
|
|
11746
|
+
/* @__PURE__ */ (0, import_jsx_runtime196.jsx)(Icon, { name: rangeLeft.icon, size: "xs" }),
|
|
11747
|
+
/* @__PURE__ */ (0, import_jsx_runtime196.jsx)(Caption, { size: 1, type: "normal", weight: "medium", className: style_module_default14.optionText, children: rangeLeft.text })
|
|
11769
11748
|
] }),
|
|
11770
|
-
/* @__PURE__ */ (0,
|
|
11771
|
-
/* @__PURE__ */ (0,
|
|
11772
|
-
Array.from({ length: 100 / step + 1 }).map((_, index) => /* @__PURE__ */ (0,
|
|
11773
|
-
/* @__PURE__ */ (0,
|
|
11749
|
+
/* @__PURE__ */ (0, import_jsx_runtime196.jsxs)(import_radix_ui7.Slider.Root, { ...rest, step, className: style_module_default14["slider-root"], ref, children: [
|
|
11750
|
+
/* @__PURE__ */ (0, import_jsx_runtime196.jsxs)(import_radix_ui7.Slider.Track, { className: style_module_default14["slider-track"], children: [
|
|
11751
|
+
Array.from({ length: 100 / step + 1 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("span", { className: style_module_default14["slider-step"] }, index)),
|
|
11752
|
+
/* @__PURE__ */ (0, import_jsx_runtime196.jsx)(import_radix_ui7.Slider.Range, { className: style_module_default14["slider-range"] })
|
|
11774
11753
|
] }),
|
|
11775
|
-
/* @__PURE__ */ (0,
|
|
11776
|
-
/* @__PURE__ */ (0,
|
|
11777
|
-
/* @__PURE__ */ (0,
|
|
11754
|
+
/* @__PURE__ */ (0, import_jsx_runtime196.jsxs)(Tooltip, { children: [
|
|
11755
|
+
/* @__PURE__ */ (0, import_jsx_runtime196.jsx)(Tooltip.Trigger, { by: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(import_radix_ui7.Slider.Thumb, { className: style_module_default14["slider-thumb"] }) }),
|
|
11756
|
+
/* @__PURE__ */ (0, import_jsx_runtime196.jsx)(Tooltip.Content, { description: tooltip })
|
|
11778
11757
|
] })
|
|
11779
11758
|
] }),
|
|
11780
|
-
/* @__PURE__ */ (0,
|
|
11781
|
-
/* @__PURE__ */ (0,
|
|
11782
|
-
/* @__PURE__ */ (0,
|
|
11759
|
+
/* @__PURE__ */ (0, import_jsx_runtime196.jsxs)("div", { className: style_module_default14["slider-option-wrapper"], children: [
|
|
11760
|
+
/* @__PURE__ */ (0, import_jsx_runtime196.jsx)(Icon, { name: rangeRight.icon, size: "xs" }),
|
|
11761
|
+
/* @__PURE__ */ (0, import_jsx_runtime196.jsx)(Caption, { size: 1, type: "normal", weight: "medium", className: style_module_default14.optionText, children: rangeRight.text })
|
|
11783
11762
|
] })
|
|
11784
11763
|
] })
|
|
11785
11764
|
] }) });
|
|
@@ -11818,14 +11797,14 @@ var style_module_default15 = {
|
|
|
11818
11797
|
};
|
|
11819
11798
|
|
|
11820
11799
|
// src/components/Select/index.tsx
|
|
11821
|
-
var
|
|
11822
|
-
var
|
|
11823
|
-
var
|
|
11824
|
-
var Badge = /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ (0,
|
|
11825
|
-
var SelectContent = (0,
|
|
11800
|
+
var import_react19 = require("react");
|
|
11801
|
+
var import_clsx15 = __toESM(require("clsx"));
|
|
11802
|
+
var import_jsx_runtime197 = require("react/jsx-runtime");
|
|
11803
|
+
var Badge = /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("div", { className: style_module_default15.badgeContainer, children: /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(Caption, { className: style_module_default15.badge, size: 2, type: "normal", weight: "medium", children }) }), "Badge");
|
|
11804
|
+
var SelectContent = (0, import_react19.forwardRef)(
|
|
11826
11805
|
(props, ref) => {
|
|
11827
11806
|
const { id, isResponsive, popSide, sideOffset, listLabel, children, container } = props;
|
|
11828
|
-
return /* @__PURE__ */ (0,
|
|
11807
|
+
return /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(import_radix_ui8.Select.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(
|
|
11829
11808
|
import_radix_ui8.Select.Content,
|
|
11830
11809
|
{
|
|
11831
11810
|
id: `select-content-${id}`,
|
|
@@ -11840,21 +11819,21 @@ var SelectContent = (0, import_react20.forwardRef)(
|
|
|
11840
11819
|
e.stopPropagation();
|
|
11841
11820
|
};
|
|
11842
11821
|
},
|
|
11843
|
-
className: (0,
|
|
11822
|
+
className: (0, import_clsx15.default)(style_module_default15["desktop-content"], {
|
|
11844
11823
|
[style_module_default15["responsive"]]: isResponsive
|
|
11845
11824
|
}),
|
|
11846
11825
|
position: "popper",
|
|
11847
11826
|
side: popSide,
|
|
11848
11827
|
sideOffset,
|
|
11849
11828
|
avoidCollisions: false,
|
|
11850
|
-
children: /* @__PURE__ */ (0,
|
|
11851
|
-
/* @__PURE__ */ (0,
|
|
11829
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)(import_radix_ui9.ScrollArea.Root, { className: style_module_default15.scrollAreaRoot, type: "always", children: [
|
|
11830
|
+
/* @__PURE__ */ (0, import_jsx_runtime197.jsx)(import_radix_ui8.Select.Viewport, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(
|
|
11852
11831
|
import_radix_ui9.ScrollArea.Viewport,
|
|
11853
11832
|
{
|
|
11854
11833
|
className: style_module_default15.scrollAreaViewport,
|
|
11855
11834
|
style: { maxHeight: "268px", overflowY: "auto" },
|
|
11856
|
-
children: /* @__PURE__ */ (0,
|
|
11857
|
-
listLabel && /* @__PURE__ */ (0,
|
|
11835
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)(import_radix_ui8.Select.Group, { children: [
|
|
11836
|
+
listLabel && /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(import_radix_ui8.Select.Label, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(
|
|
11858
11837
|
Label,
|
|
11859
11838
|
{
|
|
11860
11839
|
className: style_module_default15["desktop-label"],
|
|
@@ -11868,13 +11847,13 @@ var SelectContent = (0, import_react20.forwardRef)(
|
|
|
11868
11847
|
] })
|
|
11869
11848
|
}
|
|
11870
11849
|
) }),
|
|
11871
|
-
/* @__PURE__ */ (0,
|
|
11850
|
+
/* @__PURE__ */ (0, import_jsx_runtime197.jsx)(import_radix_ui9.ScrollArea.Scrollbar, { className: style_module_default15.scrollAreaScrollbar, orientation: "vertical", children: /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(import_radix_ui9.ScrollArea.Thumb, { className: style_module_default15.scrollAreaThumb }) })
|
|
11872
11851
|
] })
|
|
11873
11852
|
}
|
|
11874
11853
|
) });
|
|
11875
11854
|
}
|
|
11876
11855
|
);
|
|
11877
|
-
var SelectRoot = (0,
|
|
11856
|
+
var SelectRoot = (0, import_react19.forwardRef)(
|
|
11878
11857
|
(props, ref) => {
|
|
11879
11858
|
const {
|
|
11880
11859
|
id,
|
|
@@ -11894,13 +11873,13 @@ var SelectRoot = (0, import_react20.forwardRef)(
|
|
|
11894
11873
|
...rest
|
|
11895
11874
|
} = props;
|
|
11896
11875
|
const contentProps = { id, isResponsive, popSide, sideOffset, listLabel, children, container };
|
|
11897
|
-
const [isOpen, setIsOpen] = (0,
|
|
11898
|
-
(0,
|
|
11876
|
+
const [isOpen, setIsOpen] = (0, import_react19.useState)(false);
|
|
11877
|
+
(0, import_react19.useEffect)(() => {
|
|
11899
11878
|
setIsOpen(open);
|
|
11900
11879
|
}, [open]);
|
|
11901
|
-
return /* @__PURE__ */ (0,
|
|
11902
|
-
/* @__PURE__ */ (0,
|
|
11903
|
-
/* @__PURE__ */ (0,
|
|
11880
|
+
return /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)("div", { children: [
|
|
11881
|
+
/* @__PURE__ */ (0, import_jsx_runtime197.jsxs)("div", { className: style_module_default15["label-container"], children: [
|
|
11882
|
+
/* @__PURE__ */ (0, import_jsx_runtime197.jsx)(
|
|
11904
11883
|
Label,
|
|
11905
11884
|
{
|
|
11906
11885
|
className: style_module_default15["select-label"],
|
|
@@ -11911,9 +11890,9 @@ var SelectRoot = (0, import_react20.forwardRef)(
|
|
|
11911
11890
|
children: label
|
|
11912
11891
|
}
|
|
11913
11892
|
),
|
|
11914
|
-
badge && /* @__PURE__ */ (0,
|
|
11893
|
+
badge && /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(Badge, { children: badge })
|
|
11915
11894
|
] }),
|
|
11916
|
-
/* @__PURE__ */ (0,
|
|
11895
|
+
/* @__PURE__ */ (0, import_jsx_runtime197.jsxs)(
|
|
11917
11896
|
import_radix_ui8.Select.Root,
|
|
11918
11897
|
{
|
|
11919
11898
|
...rest,
|
|
@@ -11923,18 +11902,18 @@ var SelectRoot = (0, import_react20.forwardRef)(
|
|
|
11923
11902
|
setIsOpen(open2);
|
|
11924
11903
|
},
|
|
11925
11904
|
children: [
|
|
11926
|
-
/* @__PURE__ */ (0,
|
|
11927
|
-
/* @__PURE__ */ (0,
|
|
11928
|
-
/* @__PURE__ */ (0,
|
|
11905
|
+
/* @__PURE__ */ (0, import_jsx_runtime197.jsxs)(import_radix_ui8.Select.Trigger, { className: style_module_default15.trigger, ref, id, children: [
|
|
11906
|
+
/* @__PURE__ */ (0, import_jsx_runtime197.jsx)(import_radix_ui8.Select.Value, { className: style_module_default15.placeholder, placeholder }),
|
|
11907
|
+
/* @__PURE__ */ (0, import_jsx_runtime197.jsx)(import_radix_ui8.Select.Icon, { className: style_module_default15.openIcon, children: /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(Icon, { name: "arrow-drop-down", fill: true, thick: true, size: "xs" }) })
|
|
11929
11908
|
] }),
|
|
11930
|
-
/* @__PURE__ */ (0,
|
|
11909
|
+
/* @__PURE__ */ (0, import_jsx_runtime197.jsx)(SelectContent, { ...contentProps })
|
|
11931
11910
|
]
|
|
11932
11911
|
}
|
|
11933
11912
|
)
|
|
11934
11913
|
] });
|
|
11935
11914
|
}
|
|
11936
11915
|
);
|
|
11937
|
-
var SelectItem = /* @__PURE__ */ __name(({ value, text, disabled, icon, onClick }) => /* @__PURE__ */ (0,
|
|
11916
|
+
var SelectItem = /* @__PURE__ */ __name(({ value, text, disabled, icon, onClick }) => /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)(
|
|
11938
11917
|
import_radix_ui8.Select.Item,
|
|
11939
11918
|
{
|
|
11940
11919
|
className: style_module_default15.item,
|
|
@@ -11945,9 +11924,9 @@ var SelectItem = /* @__PURE__ */ __name(({ value, text, disabled, icon, onClick
|
|
|
11945
11924
|
onClick?.();
|
|
11946
11925
|
},
|
|
11947
11926
|
children: [
|
|
11948
|
-
/* @__PURE__ */ (0,
|
|
11949
|
-
icon && /* @__PURE__ */ (0,
|
|
11950
|
-
/* @__PURE__ */ (0,
|
|
11927
|
+
/* @__PURE__ */ (0, import_jsx_runtime197.jsx)(import_radix_ui8.Select.ItemText, { children: /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(Paragraph, { size: 3, type: "normal", weight: "medium", children: text ?? value }) }),
|
|
11928
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(import_radix_ui8.Select.Icon, { className: style_module_default15.icon, children: /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(Icon, { size: "xs", ...icon }) }),
|
|
11929
|
+
/* @__PURE__ */ (0, import_jsx_runtime197.jsx)(import_radix_ui8.Select.ItemIndicator, { className: style_module_default15.itemIndicator, children: /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(Icon, { fill: false, thick: true, size: "xs", name: "check-mark", type: "brand-label-primary" }) })
|
|
11951
11930
|
]
|
|
11952
11931
|
}
|
|
11953
11932
|
), "SelectItem");
|
|
@@ -11963,18 +11942,18 @@ var style_module_default16 = {
|
|
|
11963
11942
|
};
|
|
11964
11943
|
|
|
11965
11944
|
// src/components/List/index.tsx
|
|
11966
|
-
var
|
|
11945
|
+
var import_react21 = require("react");
|
|
11967
11946
|
|
|
11968
11947
|
// src/hooks/collection.tsx
|
|
11969
|
-
var
|
|
11970
|
-
var
|
|
11971
|
-
var CollectionContext = (0,
|
|
11948
|
+
var import_react20 = require("react");
|
|
11949
|
+
var import_jsx_runtime198 = require("react/jsx-runtime");
|
|
11950
|
+
var CollectionContext = (0, import_react20.createContext)(void 0);
|
|
11972
11951
|
var CollectionProvider = /* @__PURE__ */ __name(({ value, onChangeValue, children }) => {
|
|
11973
|
-
const contextValue = (0,
|
|
11974
|
-
return /* @__PURE__ */ (0,
|
|
11952
|
+
const contextValue = (0, import_react20.useMemo)(() => ({ value, onChangeValue }), [value, onChangeValue]);
|
|
11953
|
+
return /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(CollectionContext.Provider, { value: contextValue, children });
|
|
11975
11954
|
}, "CollectionProvider");
|
|
11976
11955
|
var useCollectionContext = /* @__PURE__ */ __name(() => {
|
|
11977
|
-
const context = (0,
|
|
11956
|
+
const context = (0, import_react20.useContext)(CollectionContext);
|
|
11978
11957
|
if (!context) {
|
|
11979
11958
|
throw new Error("useCollectionContext must be used within a CollectionProvider");
|
|
11980
11959
|
}
|
|
@@ -11982,17 +11961,17 @@ var useCollectionContext = /* @__PURE__ */ __name(() => {
|
|
|
11982
11961
|
}, "useCollectionContext");
|
|
11983
11962
|
|
|
11984
11963
|
// src/components/List/index.tsx
|
|
11985
|
-
var
|
|
11986
|
-
var
|
|
11964
|
+
var import_clsx16 = __toESM(require("clsx"));
|
|
11965
|
+
var import_jsx_runtime199 = require("react/jsx-runtime");
|
|
11987
11966
|
var ListRoot = /* @__PURE__ */ __name(({ children, className, ...props }) => {
|
|
11988
|
-
return /* @__PURE__ */ (0,
|
|
11967
|
+
return /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(CollectionProvider, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("ul", { className: (0, import_clsx16.default)(style_module_default16.list, className), children }) });
|
|
11989
11968
|
}, "ListRoot");
|
|
11990
11969
|
var Item = /* @__PURE__ */ __name(({ value, text, disabled, icon, onClick }) => {
|
|
11991
|
-
const [isFocused, setIsFocused] = (0,
|
|
11970
|
+
const [isFocused, setIsFocused] = (0, import_react21.useState)(false);
|
|
11992
11971
|
const { value: contextValue, onChangeValue } = useCollectionContext();
|
|
11993
11972
|
const isSelected = contextValue === value;
|
|
11994
11973
|
const iconProps = isSelected ? { name: "check-mark", type: "brand-label-primary", thick: true } : icon ? icon : {};
|
|
11995
|
-
return /* @__PURE__ */ (0,
|
|
11974
|
+
return /* @__PURE__ */ (0, import_jsx_runtime199.jsxs)(
|
|
11996
11975
|
"li",
|
|
11997
11976
|
{
|
|
11998
11977
|
className: style_module_default16.item,
|
|
@@ -12010,8 +11989,8 @@ var Item = /* @__PURE__ */ __name(({ value, text, disabled, icon, onClick }) =>
|
|
|
12010
11989
|
onChangeValue?.(value);
|
|
12011
11990
|
},
|
|
12012
11991
|
children: [
|
|
12013
|
-
/* @__PURE__ */ (0,
|
|
12014
|
-
(icon || isSelected) && /* @__PURE__ */ (0,
|
|
11992
|
+
/* @__PURE__ */ (0, import_jsx_runtime199.jsx)(Paragraph, { size: 3, type: "normal", weight: "medium", children: text }),
|
|
11993
|
+
(icon || isSelected) && /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(Icon, { className: style_module_default16.icon, size: "xs", ...iconProps })
|
|
12015
11994
|
]
|
|
12016
11995
|
}
|
|
12017
11996
|
);
|