@liner-fe/prism 2.1.24 → 2.1.25
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/components/Typography/index.d.ts +0 -2
- package/lib/index.cjs +145 -239
- package/lib/index.cjs.map +4 -4
- package/lib/index.css +21 -13
- package/lib/index.css.map +2 -2
- package/lib/index.mjs +85 -179
- package/lib/index.mjs.map +4 -4
- package/package.json +1 -1
package/lib/index.cjs
CHANGED
|
@@ -41,8 +41,6 @@ __export(index_exports, {
|
|
|
41
41
|
IconButton: () => IconButton,
|
|
42
42
|
Label: () => Label,
|
|
43
43
|
List: () => List,
|
|
44
|
-
Media: () => Media,
|
|
45
|
-
MediaContextProvider: () => MediaContextProvider,
|
|
46
44
|
Paragraph: () => Paragraph,
|
|
47
45
|
Popover: () => Popover,
|
|
48
46
|
Radio: () => Radio,
|
|
@@ -53,7 +51,6 @@ __export(index_exports, {
|
|
|
53
51
|
Title: () => Title2,
|
|
54
52
|
Toaster: () => Toaster,
|
|
55
53
|
Tooltip: () => Tooltip,
|
|
56
|
-
Typography: () => Typography,
|
|
57
54
|
arrayToStyleObject: () => arrayToStyleObject,
|
|
58
55
|
colorKeys: () => colorKeys,
|
|
59
56
|
getIconComponent: () => getIconComponent,
|
|
@@ -61,7 +58,6 @@ __export(index_exports, {
|
|
|
61
58
|
iconMap: () => iconMap,
|
|
62
59
|
isEmptyObject: () => isEmptyObject,
|
|
63
60
|
objectToArray: () => objectToArray,
|
|
64
|
-
rootMediaStyle: () => rootMediaStyle,
|
|
65
61
|
useToast: () => useToast
|
|
66
62
|
});
|
|
67
63
|
module.exports = __toCommonJS(index_exports);
|
|
@@ -8815,96 +8811,6 @@ var Display = (0, import_react8.forwardRef)(
|
|
|
8815
8811
|
}
|
|
8816
8812
|
);
|
|
8817
8813
|
|
|
8818
|
-
// src/components/Typography/Responsive/lib.ts
|
|
8819
|
-
var import_fresnel = require("@artsy/fresnel");
|
|
8820
|
-
var import_design_token = require("@liner-fe/design-token");
|
|
8821
|
-
|
|
8822
|
-
// src/components/Typography/Responsive/constant.ts
|
|
8823
|
-
var breakPointKeyArray = ["xs", "s", "m", "l", "xl", "xxl", "xxxl"];
|
|
8824
|
-
|
|
8825
|
-
// src/components/Typography/Responsive/lib.ts
|
|
8826
|
-
var removePx = /* @__PURE__ */ __name((breakPoint) => {
|
|
8827
|
-
return +breakPoint.replace("px", "");
|
|
8828
|
-
}, "removePx");
|
|
8829
|
-
var AppMedia = (0, import_fresnel.createMedia)({
|
|
8830
|
-
breakpoints: breakPointKeyArray.reduce((acc, key) => {
|
|
8831
|
-
acc[key] = removePx(import_design_token.breakpointOrigin[key]);
|
|
8832
|
-
return acc;
|
|
8833
|
-
}, {})
|
|
8834
|
-
});
|
|
8835
|
-
var rootMediaStyle = AppMedia.createMediaStyle();
|
|
8836
|
-
var { MediaContextProvider, Media } = AppMedia;
|
|
8837
|
-
|
|
8838
|
-
// src/components/Typography/Responsive/index.tsx
|
|
8839
|
-
var import_jsx_runtime171 = require("react/jsx-runtime");
|
|
8840
|
-
var import_react9 = require("react");
|
|
8841
|
-
var TypographyImpl = /* @__PURE__ */ __name(({ level, text, ...rest }) => {
|
|
8842
|
-
const commonProps = {
|
|
8843
|
-
...rest,
|
|
8844
|
-
children: text
|
|
8845
|
-
};
|
|
8846
|
-
switch (level) {
|
|
8847
|
-
case "caption":
|
|
8848
|
-
return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(Caption, { ...commonProps });
|
|
8849
|
-
case "display":
|
|
8850
|
-
return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(Display, { ...commonProps });
|
|
8851
|
-
case "heading":
|
|
8852
|
-
return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(Heading, { ...commonProps });
|
|
8853
|
-
case "paragraph":
|
|
8854
|
-
return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(Paragraph, { ...commonProps });
|
|
8855
|
-
case "title":
|
|
8856
|
-
return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(Title2, { ...commonProps });
|
|
8857
|
-
default:
|
|
8858
|
-
return null;
|
|
8859
|
-
}
|
|
8860
|
-
}, "TypographyImpl");
|
|
8861
|
-
var Typography = /* @__PURE__ */ __name((props) => {
|
|
8862
|
-
const { children } = props;
|
|
8863
|
-
const createMediaProps = /* @__PURE__ */ __name((current) => {
|
|
8864
|
-
let returnValue = {};
|
|
8865
|
-
breakPointKeyArray.forEach((breakPointKey, idx, originArray) => {
|
|
8866
|
-
const isFoundCurrentBreakPointKey = current === breakPointKey;
|
|
8867
|
-
if (isFoundCurrentBreakPointKey) {
|
|
8868
|
-
const lagerCurrentBreakPointKeyArray = originArray.slice(idx + 1);
|
|
8869
|
-
const isEmptyLagerCurrentBreakPointKeyArray = lagerCurrentBreakPointKeyArray.length === 0;
|
|
8870
|
-
if (isEmptyLagerCurrentBreakPointKeyArray) {
|
|
8871
|
-
returnValue = { greaterThanOrEqual: current };
|
|
8872
|
-
} else {
|
|
8873
|
-
lagerCurrentBreakPointKeyArray.forEach((lagerCurrentBreakPointKey, idx2, originArray2) => {
|
|
8874
|
-
const isExistReturnValue = !isEmptyObject(returnValue);
|
|
8875
|
-
const isEarlyReturn = isExistReturnValue;
|
|
8876
|
-
if (isEarlyReturn) {
|
|
8877
|
-
return;
|
|
8878
|
-
}
|
|
8879
|
-
const isExistLagerCurrentBreakPoint = !!props[lagerCurrentBreakPointKey];
|
|
8880
|
-
if (isExistLagerCurrentBreakPoint) {
|
|
8881
|
-
returnValue = { between: [current, lagerCurrentBreakPointKey] };
|
|
8882
|
-
return;
|
|
8883
|
-
}
|
|
8884
|
-
const isLast = idx2 === originArray2.length - 1;
|
|
8885
|
-
if (isLast) {
|
|
8886
|
-
returnValue = { greaterThanOrEqual: current };
|
|
8887
|
-
return;
|
|
8888
|
-
}
|
|
8889
|
-
});
|
|
8890
|
-
}
|
|
8891
|
-
}
|
|
8892
|
-
});
|
|
8893
|
-
return returnValue;
|
|
8894
|
-
}, "createMediaProps");
|
|
8895
|
-
return (
|
|
8896
|
-
// Fragment없이도 원래 동작해야하는데 liner-web에서 JSX.Element가 배열로 오면 에러 띄워서 임시로 Fragment로 래핑합니다.
|
|
8897
|
-
/* @__PURE__ */ (0, import_jsx_runtime171.jsx)(import_jsx_runtime171.Fragment, { children: breakPointKeyArray.map((breakPointKey) => {
|
|
8898
|
-
const variable = props[breakPointKey];
|
|
8899
|
-
const isExistVariable = !!variable;
|
|
8900
|
-
if (isExistVariable) {
|
|
8901
|
-
return /* @__PURE__ */ (0, import_react9.createElement)(Media, { ...createMediaProps(breakPointKey), key: breakPointKey }, /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(TypographyImpl, { ...variable, text: variable.text || children }));
|
|
8902
|
-
}
|
|
8903
|
-
return null;
|
|
8904
|
-
}) })
|
|
8905
|
-
);
|
|
8906
|
-
}, "Typography");
|
|
8907
|
-
|
|
8908
8814
|
// src/components/Popover/index.tsx
|
|
8909
8815
|
var React3 = __toESM(require("react"));
|
|
8910
8816
|
var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"));
|
|
@@ -8950,9 +8856,9 @@ var style_module_default7 = {
|
|
|
8950
8856
|
};
|
|
8951
8857
|
|
|
8952
8858
|
// src/components/TextButton/index.tsx
|
|
8953
|
-
var
|
|
8859
|
+
var import_react9 = require("react");
|
|
8954
8860
|
var import_clsx8 = __toESM(require("clsx"));
|
|
8955
|
-
var
|
|
8861
|
+
var import_jsx_runtime171 = require("react/jsx-runtime");
|
|
8956
8862
|
var textButtonLevelIconTypeMap = {
|
|
8957
8863
|
primary: "brand-label-primary",
|
|
8958
8864
|
secondary: "neutral-label-primary",
|
|
@@ -8989,7 +8895,7 @@ var textButtonVariants = (0, import_cva5.cva)({
|
|
|
8989
8895
|
}
|
|
8990
8896
|
}
|
|
8991
8897
|
});
|
|
8992
|
-
var TextButton = (0,
|
|
8898
|
+
var TextButton = (0, import_react9.forwardRef)(
|
|
8993
8899
|
({
|
|
8994
8900
|
level = "primary",
|
|
8995
8901
|
thick = false,
|
|
@@ -9009,14 +8915,14 @@ var TextButton = (0, import_react10.forwardRef)(
|
|
|
9009
8915
|
fillType: textButtonLevelIconFillTypeMap[level],
|
|
9010
8916
|
...icon
|
|
9011
8917
|
}), "getIconProps");
|
|
9012
|
-
const renderContent = /* @__PURE__ */ __name((children2) => /* @__PURE__ */ (0,
|
|
9013
|
-
leftIcon && /* @__PURE__ */ (0,
|
|
9014
|
-
/* @__PURE__ */ (0,
|
|
9015
|
-
rightIcon && /* @__PURE__ */ (0,
|
|
8918
|
+
const renderContent = /* @__PURE__ */ __name((children2) => /* @__PURE__ */ (0, import_jsx_runtime171.jsxs)("span", { className: style_module_default7["text-children"], children: [
|
|
8919
|
+
leftIcon && /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(Icon, { ...getIconProps(leftIcon) }),
|
|
8920
|
+
/* @__PURE__ */ (0, import_jsx_runtime171.jsx)("p", { children: children2 }),
|
|
8921
|
+
rightIcon && /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(Icon, { ...getIconProps(rightIcon) })
|
|
9016
8922
|
] }), "renderContent");
|
|
9017
8923
|
if (asChild) {
|
|
9018
|
-
const parent =
|
|
9019
|
-
return (0,
|
|
8924
|
+
const parent = import_react9.Children.only(children);
|
|
8925
|
+
return (0, import_react9.cloneElement)(
|
|
9020
8926
|
parent,
|
|
9021
8927
|
{
|
|
9022
8928
|
...rest,
|
|
@@ -9026,12 +8932,12 @@ var TextButton = (0, import_react10.forwardRef)(
|
|
|
9026
8932
|
renderContent(parent.props.children)
|
|
9027
8933
|
);
|
|
9028
8934
|
}
|
|
9029
|
-
return /* @__PURE__ */ (0,
|
|
8935
|
+
return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("button", { className: (0, import_clsx8.default)(textButtonVariants({ level, thick, underline, size }), className), ref, ...rest, children: renderContent(children) });
|
|
9030
8936
|
}
|
|
9031
8937
|
);
|
|
9032
8938
|
|
|
9033
8939
|
// src/components/Popover/index.tsx
|
|
9034
|
-
var
|
|
8940
|
+
var import_jsx_runtime172 = require("react/jsx-runtime");
|
|
9035
8941
|
var DEFAULT_OFFSET = -6;
|
|
9036
8942
|
var popoverVariants = (0, import_cva6.cva)({
|
|
9037
8943
|
base: style_module_default6.content,
|
|
@@ -9055,9 +8961,9 @@ var popoverTagVariants = (0, import_cva6.cva)({ base: [style_module_default6.tag
|
|
|
9055
8961
|
var popoverTitleVariants = (0, import_cva6.cva)({ base: [style_module_default6.title, "lp-sys-typo-paragraph3-normal-bold"] });
|
|
9056
8962
|
var popoverDescriptionVariants = (0, import_cva6.cva)({ base: [style_module_default6.description, "lp-sys-typo-caption1-normal-regular"] });
|
|
9057
8963
|
var popoverFooterVariants = (0, import_cva6.cva)({ base: [style_module_default6.footer, "lp-sys-typo-caption1-normal-medium"] });
|
|
9058
|
-
var PopoverRoot = /* @__PURE__ */ __name(({ isOpen, children, onChange }) => /* @__PURE__ */ (0,
|
|
9059
|
-
var PopoverTrigger = /* @__PURE__ */ __name(({ by }) => /* @__PURE__ */ (0,
|
|
9060
|
-
var PopoverAnchor = /* @__PURE__ */ __name(({ className }) => /* @__PURE__ */ (0,
|
|
8964
|
+
var PopoverRoot = /* @__PURE__ */ __name(({ isOpen, children, onChange }) => /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(PopoverPrimitive.Root, { open: isOpen, onOpenChange: onChange, children }), "PopoverRoot");
|
|
8965
|
+
var PopoverTrigger = /* @__PURE__ */ __name(({ by }) => /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(PopoverPrimitive.Trigger, { asChild: true, children: by }), "PopoverTrigger");
|
|
8966
|
+
var PopoverAnchor = /* @__PURE__ */ __name(({ className }) => /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("svg", { className, xmlns: "http://www.w3.org/2000/svg", width: "30", height: "10", viewBox: "0 0 30 10", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
|
|
9061
8967
|
"path",
|
|
9062
8968
|
{
|
|
9063
8969
|
fillRule: "evenodd",
|
|
@@ -9084,8 +8990,8 @@ var PopoverContent = React3.forwardRef(
|
|
|
9084
8990
|
children,
|
|
9085
8991
|
container,
|
|
9086
8992
|
...props
|
|
9087
|
-
}, ref) => /* @__PURE__ */ (0,
|
|
9088
|
-
/* @__PURE__ */ (0,
|
|
8993
|
+
}, ref) => /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(PopoverPrimitive.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)(import_jsx_runtime172.Fragment, { children: [
|
|
8994
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsxs)(
|
|
9089
8995
|
PopoverPrimitive.Content,
|
|
9090
8996
|
{
|
|
9091
8997
|
ref,
|
|
@@ -9096,24 +9002,24 @@ var PopoverContent = React3.forwardRef(
|
|
|
9096
9002
|
className: (0, import_clsx9.clsx)(popoverVariants({ level }), className),
|
|
9097
9003
|
...props,
|
|
9098
9004
|
children: [
|
|
9099
|
-
/* @__PURE__ */ (0,
|
|
9100
|
-
(tag || icon || onClose) && /* @__PURE__ */ (0,
|
|
9101
|
-
tag && /* @__PURE__ */ (0,
|
|
9102
|
-
icon && /* @__PURE__ */ (0,
|
|
9103
|
-
/* @__PURE__ */ (0,
|
|
9104
|
-
onClose && /* @__PURE__ */ (0,
|
|
9005
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsxs)("div", { className: style_module_default6.contentContainer, children: [
|
|
9006
|
+
(tag || icon || onClose) && /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)("div", { className: style_module_default6.heading, children: [
|
|
9007
|
+
tag && /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("span", { className: popoverTagVariants(), children: tag }),
|
|
9008
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(Icon, { name: icon.name, size: "xs", thick: icon.thick, fill: icon.fill }),
|
|
9009
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)("p", { className: popoverTitleVariants(), children: title }),
|
|
9010
|
+
onClose && /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
|
|
9105
9011
|
PopoverPrimitive.PopoverClose,
|
|
9106
9012
|
{
|
|
9107
9013
|
className: style_module_default6.closeButton,
|
|
9108
9014
|
onClick: () => {
|
|
9109
9015
|
onClose();
|
|
9110
9016
|
},
|
|
9111
|
-
children: /* @__PURE__ */ (0,
|
|
9017
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(Icon, { name: "close-fill", size: "s", fill: true, thick: true, type: "neutral-label-static-primary" })
|
|
9112
9018
|
}
|
|
9113
9019
|
)
|
|
9114
9020
|
] }),
|
|
9115
|
-
description && /* @__PURE__ */ (0,
|
|
9116
|
-
onConfirm && /* @__PURE__ */ (0,
|
|
9021
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("p", { className: popoverDescriptionVariants(), children: description }),
|
|
9022
|
+
onConfirm && /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("div", { className: popoverFooterVariants(), children: /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
|
|
9117
9023
|
TextButton,
|
|
9118
9024
|
{
|
|
9119
9025
|
level: "inverse-static",
|
|
@@ -9125,11 +9031,11 @@ var PopoverContent = React3.forwardRef(
|
|
|
9125
9031
|
) }),
|
|
9126
9032
|
children
|
|
9127
9033
|
] }),
|
|
9128
|
-
/* @__PURE__ */ (0,
|
|
9034
|
+
/* @__PURE__ */ (0, import_jsx_runtime172.jsx)(PopoverPrimitive.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(PopoverAnchor, { className: (0, import_clsx9.clsx)(popoverAnchorVariants({ level })) }) })
|
|
9129
9035
|
]
|
|
9130
9036
|
}
|
|
9131
9037
|
),
|
|
9132
|
-
isOverlay && /* @__PURE__ */ (0,
|
|
9038
|
+
isOverlay && /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("div", { "data-radix-popper-overlay": true, className: style_module_default6.overlay })
|
|
9133
9039
|
] }) })
|
|
9134
9040
|
);
|
|
9135
9041
|
var Popover = Object.assign(PopoverRoot, {
|
|
@@ -9141,7 +9047,7 @@ var Popover = Object.assign(PopoverRoot, {
|
|
|
9141
9047
|
|
|
9142
9048
|
// src/components/Tooltip/index.tsx
|
|
9143
9049
|
var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
|
|
9144
|
-
var
|
|
9050
|
+
var import_react10 = require("react");
|
|
9145
9051
|
|
|
9146
9052
|
// src/components/Tooltip/style.module.scss
|
|
9147
9053
|
var style_module_default8 = {
|
|
@@ -9152,14 +9058,14 @@ var style_module_default8 = {
|
|
|
9152
9058
|
// src/components/Tooltip/index.tsx
|
|
9153
9059
|
var import_cva7 = require("cva");
|
|
9154
9060
|
var import_clsx10 = __toESM(require("clsx"));
|
|
9155
|
-
var
|
|
9061
|
+
var import_jsx_runtime173 = require("react/jsx-runtime");
|
|
9156
9062
|
var DEFAULT_OFFSET2 = "medium";
|
|
9157
9063
|
var tooltipVariants = (0, import_cva7.cva)({ base: [style_module_default8.tooltip, "lp-sys-typo-caption1-normal-medium"] });
|
|
9158
9064
|
var TooltipProvider = TooltipPrimitive.Provider;
|
|
9159
|
-
var TooltipRoot = /* @__PURE__ */ __name(({ children, ...props }) => /* @__PURE__ */ (0,
|
|
9160
|
-
var TooltipTrigger = /* @__PURE__ */ __name(({ by }) => /* @__PURE__ */ (0,
|
|
9161
|
-
var TooltipContent = (0,
|
|
9162
|
-
({ description, position = "top", className, offset = DEFAULT_OFFSET2, collisionPadding, ...props }, ref) => /* @__PURE__ */ (0,
|
|
9065
|
+
var TooltipRoot = /* @__PURE__ */ __name(({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(TooltipPrimitive.Root, { delayDuration: 0, ...props, children }), "TooltipRoot");
|
|
9066
|
+
var TooltipTrigger = /* @__PURE__ */ __name(({ by }) => /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(TooltipPrimitive.Trigger, { asChild: true, children: by }), "TooltipTrigger");
|
|
9067
|
+
var TooltipContent = (0, import_react10.forwardRef)(
|
|
9068
|
+
({ description, position = "top", className, offset = DEFAULT_OFFSET2, collisionPadding, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
|
|
9163
9069
|
TooltipPrimitive.Content,
|
|
9164
9070
|
{
|
|
9165
9071
|
ref,
|
|
@@ -9168,7 +9074,7 @@ var TooltipContent = (0, import_react11.forwardRef)(
|
|
|
9168
9074
|
collisionPadding,
|
|
9169
9075
|
className: (0, import_clsx10.default)(tooltipVariants(), className),
|
|
9170
9076
|
...props,
|
|
9171
|
-
children: /* @__PURE__ */ (0,
|
|
9077
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("p", { className: style_module_default8.tooltipContent, children: description })
|
|
9172
9078
|
}
|
|
9173
9079
|
)
|
|
9174
9080
|
);
|
|
@@ -9180,7 +9086,7 @@ var Tooltip = Object.assign(TooltipRoot, {
|
|
|
9180
9086
|
|
|
9181
9087
|
// src/components/IconButton/index.tsx
|
|
9182
9088
|
var import_cva8 = require("cva");
|
|
9183
|
-
var
|
|
9089
|
+
var import_react11 = require("react");
|
|
9184
9090
|
var import_clsx11 = __toESM(require("clsx"));
|
|
9185
9091
|
|
|
9186
9092
|
// src/components/IconButton/style.module.scss
|
|
@@ -9203,7 +9109,7 @@ var style_module_default9 = {
|
|
|
9203
9109
|
|
|
9204
9110
|
// src/components/IconButton/index.tsx
|
|
9205
9111
|
var import_react_slot = require("@radix-ui/react-slot");
|
|
9206
|
-
var
|
|
9112
|
+
var import_jsx_runtime174 = require("react/jsx-runtime");
|
|
9207
9113
|
var iconButtonSizeIconSizeMap = {
|
|
9208
9114
|
l: "m",
|
|
9209
9115
|
m: "s",
|
|
@@ -9264,7 +9170,7 @@ var iconButtonVariants = (0, import_cva8.cva)({
|
|
|
9264
9170
|
}
|
|
9265
9171
|
}
|
|
9266
9172
|
});
|
|
9267
|
-
var IconButton = (0,
|
|
9173
|
+
var IconButton = (0, import_react11.forwardRef)(
|
|
9268
9174
|
({
|
|
9269
9175
|
asChild,
|
|
9270
9176
|
level = "primary",
|
|
@@ -9277,14 +9183,14 @@ var IconButton = (0, import_react12.forwardRef)(
|
|
|
9277
9183
|
...rest
|
|
9278
9184
|
}, ref) => {
|
|
9279
9185
|
const Comp = asChild ? import_react_slot.Slot : "button";
|
|
9280
|
-
return /* @__PURE__ */ (0,
|
|
9186
|
+
return /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
|
|
9281
9187
|
Comp,
|
|
9282
9188
|
{
|
|
9283
9189
|
...rest,
|
|
9284
9190
|
className: (0, import_clsx11.default)(iconButtonVariants({ level, size, fill }), className),
|
|
9285
9191
|
ref,
|
|
9286
9192
|
disabled: disabled && !isLoading,
|
|
9287
|
-
children: isLoading ? /* @__PURE__ */ (0,
|
|
9193
|
+
children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(ButtonLoading, { size: iconButtonLoadingSizeMap[size], level }) : /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
|
|
9288
9194
|
Icon,
|
|
9289
9195
|
{
|
|
9290
9196
|
size: iconButtonSizeIconSizeMap[size],
|
|
@@ -9309,11 +9215,11 @@ var style_module_default10 = {
|
|
|
9309
9215
|
};
|
|
9310
9216
|
|
|
9311
9217
|
// src/components/CheckBox/index.tsx
|
|
9312
|
-
var
|
|
9218
|
+
var import_react13 = require("react");
|
|
9313
9219
|
var import_clsx13 = __toESM(require("clsx"));
|
|
9314
9220
|
|
|
9315
9221
|
// src/components/Label/index.tsx
|
|
9316
|
-
var
|
|
9222
|
+
var import_react12 = require("react");
|
|
9317
9223
|
var LabelPrimitive = __toESM(require("@radix-ui/react-label"));
|
|
9318
9224
|
var import_clsx12 = __toESM(require("clsx"));
|
|
9319
9225
|
|
|
@@ -9336,7 +9242,7 @@ var style_module_default11 = {
|
|
|
9336
9242
|
|
|
9337
9243
|
// src/components/Label/index.tsx
|
|
9338
9244
|
var import_cva9 = require("cva");
|
|
9339
|
-
var
|
|
9245
|
+
var import_jsx_runtime175 = require("react/jsx-runtime");
|
|
9340
9246
|
var defaultLabelVariants = (0, import_cva9.cva)({
|
|
9341
9247
|
base: ["lp-sys-typo-paragraph2-normal-medium", style_module_default11.label],
|
|
9342
9248
|
variants: {
|
|
@@ -9366,7 +9272,7 @@ var defaultLabelVariants = (0, import_cva9.cva)({
|
|
|
9366
9272
|
}
|
|
9367
9273
|
}
|
|
9368
9274
|
});
|
|
9369
|
-
var Label = (0,
|
|
9275
|
+
var Label = (0, import_react12.forwardRef)(
|
|
9370
9276
|
({
|
|
9371
9277
|
className,
|
|
9372
9278
|
level = "primary",
|
|
@@ -9377,7 +9283,7 @@ var Label = (0, import_react13.forwardRef)(
|
|
|
9377
9283
|
error = false,
|
|
9378
9284
|
...props
|
|
9379
9285
|
}, ref) => {
|
|
9380
|
-
return /* @__PURE__ */ (0,
|
|
9286
|
+
return /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(
|
|
9381
9287
|
LabelPrimitive.Root,
|
|
9382
9288
|
{
|
|
9383
9289
|
ref,
|
|
@@ -9389,48 +9295,48 @@ var Label = (0, import_react13.forwardRef)(
|
|
|
9389
9295
|
);
|
|
9390
9296
|
|
|
9391
9297
|
// src/components/CheckBox/index.tsx
|
|
9392
|
-
var
|
|
9393
|
-
var Checkbox = (0,
|
|
9298
|
+
var import_jsx_runtime176 = require("react/jsx-runtime");
|
|
9299
|
+
var Checkbox = (0, import_react13.forwardRef)(
|
|
9394
9300
|
({ className, label, description, ...props }, ref) => {
|
|
9395
|
-
const CheckboxWrapper = /* @__PURE__ */ __name(({ children }) => label ? /* @__PURE__ */ (0,
|
|
9396
|
-
/* @__PURE__ */ (0,
|
|
9301
|
+
const CheckboxWrapper = /* @__PURE__ */ __name(({ children }) => label ? /* @__PURE__ */ (0, import_jsx_runtime176.jsxs)(Label, { position: "right", htmlFor: props.id, children: [
|
|
9302
|
+
/* @__PURE__ */ (0, import_jsx_runtime176.jsxs)("div", { className: style_module_default10["label-wrapper"], children: [
|
|
9397
9303
|
label,
|
|
9398
|
-
/* @__PURE__ */ (0,
|
|
9304
|
+
/* @__PURE__ */ (0, import_jsx_runtime176.jsx)(Paragraph, { className: style_module_default10.description, size: 3, type: "normal", weight: "regular", children: description })
|
|
9399
9305
|
] }),
|
|
9400
9306
|
children
|
|
9401
|
-
] }) : /* @__PURE__ */ (0,
|
|
9402
|
-
return /* @__PURE__ */ (0,
|
|
9307
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(import_jsx_runtime176.Fragment, { children }), "CheckboxWrapper");
|
|
9308
|
+
return /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(CheckboxWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(CheckboxPrimitive.Root, { className: (0, import_clsx13.default)(style_module_default10.checkbox, className), ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(CheckboxPrimitive.Indicator, { className: style_module_default10["checkbox-indicator"], children: /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(Icon, { name: "check-mark", thick: true, size: "xs", type: "inverse-label-primary" }) }) }) });
|
|
9403
9309
|
}
|
|
9404
9310
|
);
|
|
9405
9311
|
|
|
9406
9312
|
// src/components/Radio/index.tsx
|
|
9407
9313
|
var RadioGroupPrimitive = __toESM(require("@radix-ui/react-radio-group"));
|
|
9408
9314
|
var import_clsx14 = __toESM(require("clsx"));
|
|
9409
|
-
var
|
|
9315
|
+
var import_react14 = require("react");
|
|
9410
9316
|
|
|
9411
9317
|
// src/components/Radio/style.module.scss
|
|
9412
9318
|
var style_module_default12 = {
|
|
9413
|
-
"radio": "
|
|
9414
|
-
"radio-item": "_radio-
|
|
9415
|
-
"indicator": "
|
|
9416
|
-
"label-wrapper": "_label-
|
|
9417
|
-
"description": "
|
|
9319
|
+
"radio": "_radio_igep6_1",
|
|
9320
|
+
"radio-item": "_radio-item_igep6_5",
|
|
9321
|
+
"indicator": "_indicator_igep6_45",
|
|
9322
|
+
"label-wrapper": "_label-wrapper_igep6_51",
|
|
9323
|
+
"description": "_description_igep6_61"
|
|
9418
9324
|
};
|
|
9419
9325
|
|
|
9420
9326
|
// src/components/Radio/index.tsx
|
|
9421
|
-
var
|
|
9422
|
-
var RadioIndicator = /* @__PURE__ */ __name(() => /* @__PURE__ */ (0,
|
|
9423
|
-
var RadioRoot = (0,
|
|
9424
|
-
var RadioItem = (0,
|
|
9327
|
+
var import_jsx_runtime177 = require("react/jsx-runtime");
|
|
9328
|
+
var RadioIndicator = /* @__PURE__ */ __name(() => /* @__PURE__ */ (0, import_jsx_runtime177.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_runtime177.jsx)("circle", { cx: "5", cy: "5", r: "5", fill: "#313133" }) }), "RadioIndicator");
|
|
9329
|
+
var RadioRoot = (0, import_react14.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(RadioGroupPrimitive.Root, { className: (0, import_clsx14.default)(style_module_default12.radio, className), ...props }));
|
|
9330
|
+
var RadioItem = (0, import_react14.forwardRef)(
|
|
9425
9331
|
({ className, label, description, ...props }, ref) => {
|
|
9426
|
-
const RadioItemWrapper = /* @__PURE__ */ __name(({ children }) => label ? /* @__PURE__ */ (0,
|
|
9427
|
-
/* @__PURE__ */ (0,
|
|
9332
|
+
const RadioItemWrapper = /* @__PURE__ */ __name(({ children }) => label ? /* @__PURE__ */ (0, import_jsx_runtime177.jsxs)(Label, { position: "right", htmlFor: props.id, children: [
|
|
9333
|
+
/* @__PURE__ */ (0, import_jsx_runtime177.jsxs)("div", { className: style_module_default12["label-wrapper"], children: [
|
|
9428
9334
|
label,
|
|
9429
|
-
/* @__PURE__ */ (0,
|
|
9335
|
+
/* @__PURE__ */ (0, import_jsx_runtime177.jsx)(Paragraph, { className: style_module_default12.description, size: 3, type: "normal", weight: "regular", children: description })
|
|
9430
9336
|
] }),
|
|
9431
9337
|
children
|
|
9432
|
-
] }) : /* @__PURE__ */ (0,
|
|
9433
|
-
return /* @__PURE__ */ (0,
|
|
9338
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(import_jsx_runtime177.Fragment, { children }), "RadioItemWrapper");
|
|
9339
|
+
return /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(RadioItemWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(RadioGroupPrimitive.Item, { ref, className: (0, import_clsx14.default)(style_module_default12["radio-item"], className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(RadioGroupPrimitive.Indicator, { className: style_module_default12.indicator, children: /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(RadioIndicator, {}) }) }) });
|
|
9434
9340
|
}
|
|
9435
9341
|
);
|
|
9436
9342
|
var Radio = Object.assign(RadioRoot, {
|
|
@@ -9438,7 +9344,7 @@ var Radio = Object.assign(RadioRoot, {
|
|
|
9438
9344
|
});
|
|
9439
9345
|
|
|
9440
9346
|
// src/components/Textfield/index.tsx
|
|
9441
|
-
var
|
|
9347
|
+
var import_react15 = require("react");
|
|
9442
9348
|
|
|
9443
9349
|
// src/components/Textfield/style.module.scss
|
|
9444
9350
|
var style_module_default13 = {
|
|
@@ -9466,7 +9372,7 @@ var style_module_default13 = {
|
|
|
9466
9372
|
var import_cva10 = require("cva");
|
|
9467
9373
|
var import_clsx15 = __toESM(require("clsx"));
|
|
9468
9374
|
var import_react_dom = require("react-dom");
|
|
9469
|
-
var
|
|
9375
|
+
var import_jsx_runtime178 = require("react/jsx-runtime");
|
|
9470
9376
|
var defaultTextfieldVariants = (0, import_cva10.cva)({
|
|
9471
9377
|
base: style_module_default13.textfield,
|
|
9472
9378
|
variants: {
|
|
@@ -9476,9 +9382,9 @@ var defaultTextfieldVariants = (0, import_cva10.cva)({
|
|
|
9476
9382
|
}
|
|
9477
9383
|
}
|
|
9478
9384
|
});
|
|
9479
|
-
var Textfield = (0,
|
|
9385
|
+
var Textfield = (0, import_react15.forwardRef)((props, ref) => {
|
|
9480
9386
|
const {
|
|
9481
|
-
id = (0,
|
|
9387
|
+
id = (0, import_react15.useId)(),
|
|
9482
9388
|
type,
|
|
9483
9389
|
label,
|
|
9484
9390
|
value: controlledValue,
|
|
@@ -9492,9 +9398,9 @@ var Textfield = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
9492
9398
|
onClear,
|
|
9493
9399
|
...rest
|
|
9494
9400
|
} = props;
|
|
9495
|
-
const inputRef = (0,
|
|
9496
|
-
const [value, setValue] = (0,
|
|
9497
|
-
const [deidentifiy, setDeidentifiy] = (0,
|
|
9401
|
+
const inputRef = (0, import_react15.useRef)(null);
|
|
9402
|
+
const [value, setValue] = (0, import_react15.useState)("");
|
|
9403
|
+
const [deidentifiy, setDeidentifiy] = (0, import_react15.useState)(true);
|
|
9498
9404
|
const isControlled = controlledValue !== void 0;
|
|
9499
9405
|
const isPassword = type === "password";
|
|
9500
9406
|
const isDeidentified = isPassword && deidentifiy;
|
|
@@ -9534,9 +9440,9 @@ var Textfield = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
9534
9440
|
inputRef.current.setSelectionRange(length, length);
|
|
9535
9441
|
}
|
|
9536
9442
|
}, "handleDeidentify");
|
|
9537
|
-
(0,
|
|
9538
|
-
return /* @__PURE__ */ (0,
|
|
9539
|
-
/* @__PURE__ */ (0,
|
|
9443
|
+
(0, import_react15.useImperativeHandle)(ref, () => inputRef.current);
|
|
9444
|
+
return /* @__PURE__ */ (0, import_jsx_runtime178.jsxs)("div", { className: style_module_default13["textfield-container"], children: [
|
|
9445
|
+
/* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
|
|
9540
9446
|
"div",
|
|
9541
9447
|
{
|
|
9542
9448
|
className: (0, import_clsx15.default)(defaultTextfieldVariants({ color }), {
|
|
@@ -9544,8 +9450,8 @@ var Textfield = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
9544
9450
|
[style_module_default13["label-out-textfield"]]: !label || labelType === "out"
|
|
9545
9451
|
}),
|
|
9546
9452
|
onClick: handleTextfieldClick,
|
|
9547
|
-
children: /* @__PURE__ */ (0,
|
|
9548
|
-
/* @__PURE__ */ (0,
|
|
9453
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime178.jsxs)("div", { className: style_module_default13["input-wrapper"], children: [
|
|
9454
|
+
/* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
|
|
9549
9455
|
"input",
|
|
9550
9456
|
{
|
|
9551
9457
|
className: (0, import_clsx15.default)(style_module_default13.input, {
|
|
@@ -9560,7 +9466,7 @@ var Textfield = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
9560
9466
|
...rest
|
|
9561
9467
|
}
|
|
9562
9468
|
),
|
|
9563
|
-
/* @__PURE__ */ (0,
|
|
9469
|
+
/* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
|
|
9564
9470
|
Label,
|
|
9565
9471
|
{
|
|
9566
9472
|
className: (0, import_clsx15.default)(style_module_default13.label, {
|
|
@@ -9572,8 +9478,8 @@ var Textfield = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
9572
9478
|
children: labelText
|
|
9573
9479
|
}
|
|
9574
9480
|
),
|
|
9575
|
-
/* @__PURE__ */ (0,
|
|
9576
|
-
textfieldValue && !disabled && /* @__PURE__ */ (0,
|
|
9481
|
+
/* @__PURE__ */ (0, import_jsx_runtime178.jsxs)("div", { className: style_module_default13["input-action-buttons"], children: [
|
|
9482
|
+
textfieldValue && !disabled && /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
|
|
9577
9483
|
IconButton,
|
|
9578
9484
|
{
|
|
9579
9485
|
tabIndex: -1,
|
|
@@ -9591,7 +9497,7 @@ var Textfield = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
9591
9497
|
}
|
|
9592
9498
|
}
|
|
9593
9499
|
),
|
|
9594
|
-
isPassword && !disabled && /* @__PURE__ */ (0,
|
|
9500
|
+
isPassword && !disabled && /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
|
|
9595
9501
|
IconButton,
|
|
9596
9502
|
{
|
|
9597
9503
|
tabIndex: -1,
|
|
@@ -9609,17 +9515,17 @@ var Textfield = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
9609
9515
|
}
|
|
9610
9516
|
}
|
|
9611
9517
|
),
|
|
9612
|
-
buttonProps && /* @__PURE__ */ (0,
|
|
9518
|
+
buttonProps && /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(Button, { ...buttonProps, size: "m", type: "button" })
|
|
9613
9519
|
] })
|
|
9614
9520
|
] })
|
|
9615
9521
|
}
|
|
9616
9522
|
),
|
|
9617
|
-
displayFooter && /* @__PURE__ */ (0,
|
|
9618
|
-
/* @__PURE__ */ (0,
|
|
9619
|
-
/* @__PURE__ */ (0,
|
|
9620
|
-
/* @__PURE__ */ (0,
|
|
9523
|
+
displayFooter && /* @__PURE__ */ (0, import_jsx_runtime178.jsxs)("div", { className: style_module_default13.footer, children: [
|
|
9524
|
+
/* @__PURE__ */ (0, import_jsx_runtime178.jsx)("div", { className: style_module_default13["error-wrapper"], children: error && /* @__PURE__ */ (0, import_jsx_runtime178.jsxs)(import_jsx_runtime178.Fragment, { children: [
|
|
9525
|
+
/* @__PURE__ */ (0, import_jsx_runtime178.jsx)(Icon, { name: "exclamationmark-fill", fill: true, thick: true, size: "xs", type: "function-label-negative" }),
|
|
9526
|
+
/* @__PURE__ */ (0, import_jsx_runtime178.jsx)(Caption, { size: 3, type: "normal", weight: "regular", className: style_module_default13["error-message"], children: error })
|
|
9621
9527
|
] }) }),
|
|
9622
|
-
maxCharacter && /* @__PURE__ */ (0,
|
|
9528
|
+
maxCharacter && /* @__PURE__ */ (0, import_jsx_runtime178.jsxs)(Caption, { className: style_module_default13.character, size: 3, type: "normal", weight: "regular", children: [
|
|
9623
9529
|
isControlled ? controlledValue.length : value.length,
|
|
9624
9530
|
"/",
|
|
9625
9531
|
maxCharacter
|
|
@@ -9629,7 +9535,7 @@ var Textfield = (0, import_react16.forwardRef)((props, ref) => {
|
|
|
9629
9535
|
});
|
|
9630
9536
|
|
|
9631
9537
|
// src/components/Slider/index.tsx
|
|
9632
|
-
var
|
|
9538
|
+
var import_react16 = require("react");
|
|
9633
9539
|
|
|
9634
9540
|
// src/components/Slider/style.module.scss
|
|
9635
9541
|
var style_module_default14 = {
|
|
@@ -9646,29 +9552,29 @@ var style_module_default14 = {
|
|
|
9646
9552
|
|
|
9647
9553
|
// src/components/Slider/index.tsx
|
|
9648
9554
|
var SliderPrimitive = __toESM(require("@radix-ui/react-slider"));
|
|
9649
|
-
var
|
|
9650
|
-
var SliderRoot = (0,
|
|
9555
|
+
var import_jsx_runtime179 = require("react/jsx-runtime");
|
|
9556
|
+
var SliderRoot = (0, import_react16.forwardRef)((props, ref) => {
|
|
9651
9557
|
const { label, tooltip, rangeLeft, rangeRight, min, max, step = 50, ...rest } = props;
|
|
9652
|
-
return /* @__PURE__ */ (0,
|
|
9653
|
-
/* @__PURE__ */ (0,
|
|
9654
|
-
/* @__PURE__ */ (0,
|
|
9655
|
-
/* @__PURE__ */ (0,
|
|
9656
|
-
/* @__PURE__ */ (0,
|
|
9657
|
-
/* @__PURE__ */ (0,
|
|
9558
|
+
return /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(import_jsx_runtime179.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)(Tooltip.Provider, { children: [
|
|
9559
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsx)(Label, { level: "secondary", size: "m", offset: "high", className: style_module_default14.label, children: label }),
|
|
9560
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsxs)("div", { className: style_module_default14["slider-wrapper"], children: [
|
|
9561
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsxs)("div", { className: style_module_default14["slider-option-wrapper"], children: [
|
|
9562
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsx)(Icon, { name: rangeLeft.icon, size: "xs" }),
|
|
9563
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsx)(Caption, { size: 1, type: "normal", weight: "medium", className: style_module_default14.optionText, children: rangeLeft.text })
|
|
9658
9564
|
] }),
|
|
9659
|
-
/* @__PURE__ */ (0,
|
|
9660
|
-
/* @__PURE__ */ (0,
|
|
9661
|
-
Array.from({ length: 100 / step + 1 }).map((_, index) => /* @__PURE__ */ (0,
|
|
9662
|
-
/* @__PURE__ */ (0,
|
|
9565
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsxs)(SliderPrimitive.Root, { ...rest, step, className: style_module_default14["slider-root"], ref, children: [
|
|
9566
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsxs)(SliderPrimitive.Track, { className: style_module_default14["slider-track"], children: [
|
|
9567
|
+
Array.from({ length: 100 / step + 1 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("span", { className: style_module_default14["slider-step"] }, index)),
|
|
9568
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsx)(SliderPrimitive.Range, { className: style_module_default14["slider-range"] })
|
|
9663
9569
|
] }),
|
|
9664
|
-
/* @__PURE__ */ (0,
|
|
9665
|
-
/* @__PURE__ */ (0,
|
|
9666
|
-
/* @__PURE__ */ (0,
|
|
9570
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsxs)(Tooltip, { children: [
|
|
9571
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsx)(Tooltip.Trigger, { by: /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(SliderPrimitive.Thumb, { className: style_module_default14["slider-thumb"] }) }),
|
|
9572
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsx)(Tooltip.Content, { description: tooltip })
|
|
9667
9573
|
] })
|
|
9668
9574
|
] }),
|
|
9669
|
-
/* @__PURE__ */ (0,
|
|
9670
|
-
/* @__PURE__ */ (0,
|
|
9671
|
-
/* @__PURE__ */ (0,
|
|
9575
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsxs)("div", { className: style_module_default14["slider-option-wrapper"], children: [
|
|
9576
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsx)(Icon, { name: rangeRight.icon, size: "xs" }),
|
|
9577
|
+
/* @__PURE__ */ (0, import_jsx_runtime179.jsx)(Caption, { size: 1, type: "normal", weight: "medium", className: style_module_default14.optionText, children: rangeRight.text })
|
|
9672
9578
|
] })
|
|
9673
9579
|
] })
|
|
9674
9580
|
] }) });
|
|
@@ -9706,13 +9612,13 @@ var style_module_default15 = {
|
|
|
9706
9612
|
};
|
|
9707
9613
|
|
|
9708
9614
|
// src/components/Select/index.tsx
|
|
9709
|
-
var
|
|
9615
|
+
var import_react17 = require("react");
|
|
9710
9616
|
var import_clsx16 = __toESM(require("clsx"));
|
|
9711
|
-
var
|
|
9712
|
-
var Badge = /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ (0,
|
|
9713
|
-
var SelectContent = (0,
|
|
9617
|
+
var import_jsx_runtime180 = require("react/jsx-runtime");
|
|
9618
|
+
var Badge = /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("div", { className: style_module_default15.badgeContainer, children: /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(Caption, { className: style_module_default15.badge, size: 2, type: "normal", weight: "medium", children }) }), "Badge");
|
|
9619
|
+
var SelectContent = (0, import_react17.forwardRef)((props, ref) => {
|
|
9714
9620
|
const { id, isResponsive, popSide, sideOffset, listLabel, children, container } = props;
|
|
9715
|
-
return /* @__PURE__ */ (0,
|
|
9621
|
+
return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(SelectPrimitive.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
|
|
9716
9622
|
SelectPrimitive.Content,
|
|
9717
9623
|
{
|
|
9718
9624
|
id: `select-content-${id}`,
|
|
@@ -9734,17 +9640,17 @@ var SelectContent = (0, import_react18.forwardRef)((props, ref) => {
|
|
|
9734
9640
|
side: popSide,
|
|
9735
9641
|
sideOffset,
|
|
9736
9642
|
avoidCollisions: false,
|
|
9737
|
-
children: /* @__PURE__ */ (0,
|
|
9738
|
-
/* @__PURE__ */ (0,
|
|
9739
|
-
listLabel && /* @__PURE__ */ (0,
|
|
9643
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)(ScrollArea.Root, { className: style_module_default15.scrollAreaRoot, type: "always", children: [
|
|
9644
|
+
/* @__PURE__ */ (0, import_jsx_runtime180.jsx)(SelectPrimitive.Viewport, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(ScrollArea.Viewport, { className: style_module_default15.scrollAreaViewport, style: { maxHeight: "268px", overflowY: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)(SelectPrimitive.Group, { children: [
|
|
9645
|
+
listLabel && /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(SelectPrimitive.Label, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(Label, { className: style_module_default15["desktop-label"], level: "secondary", size: "m", offset: "low", children: listLabel }) }),
|
|
9740
9646
|
children
|
|
9741
9647
|
] }) }) }),
|
|
9742
|
-
/* @__PURE__ */ (0,
|
|
9648
|
+
/* @__PURE__ */ (0, import_jsx_runtime180.jsx)(ScrollArea.Scrollbar, { className: style_module_default15.scrollAreaScrollbar, orientation: "vertical", children: /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(ScrollArea.Thumb, { className: style_module_default15.scrollAreaThumb }) })
|
|
9743
9649
|
] })
|
|
9744
9650
|
}
|
|
9745
9651
|
) });
|
|
9746
9652
|
});
|
|
9747
|
-
var SelectRoot = (0,
|
|
9653
|
+
var SelectRoot = (0, import_react17.forwardRef)((props, ref) => {
|
|
9748
9654
|
const {
|
|
9749
9655
|
id,
|
|
9750
9656
|
placeholder,
|
|
@@ -9763,16 +9669,16 @@ var SelectRoot = (0, import_react18.forwardRef)((props, ref) => {
|
|
|
9763
9669
|
...rest
|
|
9764
9670
|
} = props;
|
|
9765
9671
|
const contentProps = { id, isResponsive, popSide, sideOffset, listLabel, children, container };
|
|
9766
|
-
const [isOpen, setIsOpen] = (0,
|
|
9767
|
-
(0,
|
|
9672
|
+
const [isOpen, setIsOpen] = (0, import_react17.useState)(false);
|
|
9673
|
+
(0, import_react17.useEffect)(() => {
|
|
9768
9674
|
setIsOpen(open);
|
|
9769
9675
|
}, [open]);
|
|
9770
|
-
return /* @__PURE__ */ (0,
|
|
9771
|
-
/* @__PURE__ */ (0,
|
|
9772
|
-
/* @__PURE__ */ (0,
|
|
9773
|
-
badge && /* @__PURE__ */ (0,
|
|
9676
|
+
return /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)("div", { children: [
|
|
9677
|
+
/* @__PURE__ */ (0, import_jsx_runtime180.jsxs)("div", { className: style_module_default15["label-container"], children: [
|
|
9678
|
+
/* @__PURE__ */ (0, import_jsx_runtime180.jsx)(Label, { className: style_module_default15["select-label"], level: "secondary", size: "m", offset: "low", htmlFor: id, children: label }),
|
|
9679
|
+
badge && /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(Badge, { children: badge })
|
|
9774
9680
|
] }),
|
|
9775
|
-
/* @__PURE__ */ (0,
|
|
9681
|
+
/* @__PURE__ */ (0, import_jsx_runtime180.jsxs)(
|
|
9776
9682
|
SelectPrimitive.Root,
|
|
9777
9683
|
{
|
|
9778
9684
|
...rest,
|
|
@@ -9782,17 +9688,17 @@ var SelectRoot = (0, import_react18.forwardRef)((props, ref) => {
|
|
|
9782
9688
|
setIsOpen(open2);
|
|
9783
9689
|
},
|
|
9784
9690
|
children: [
|
|
9785
|
-
/* @__PURE__ */ (0,
|
|
9786
|
-
/* @__PURE__ */ (0,
|
|
9787
|
-
/* @__PURE__ */ (0,
|
|
9691
|
+
/* @__PURE__ */ (0, import_jsx_runtime180.jsxs)(SelectPrimitive.Trigger, { className: style_module_default15.trigger, ref, id, children: [
|
|
9692
|
+
/* @__PURE__ */ (0, import_jsx_runtime180.jsx)(SelectPrimitive.Value, { className: style_module_default15.placeholder, placeholder }),
|
|
9693
|
+
/* @__PURE__ */ (0, import_jsx_runtime180.jsx)(SelectPrimitive.Icon, { className: style_module_default15.openIcon, children: /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(Icon, { name: "arrow-drop-down", fill: true, thick: true, size: "xs" }) })
|
|
9788
9694
|
] }),
|
|
9789
|
-
/* @__PURE__ */ (0,
|
|
9695
|
+
/* @__PURE__ */ (0, import_jsx_runtime180.jsx)(SelectContent, { ...contentProps })
|
|
9790
9696
|
]
|
|
9791
9697
|
}
|
|
9792
9698
|
)
|
|
9793
9699
|
] });
|
|
9794
9700
|
});
|
|
9795
|
-
var SelectItem = /* @__PURE__ */ __name(({ value, text, disabled, icon, onClick }) => /* @__PURE__ */ (0,
|
|
9701
|
+
var SelectItem = /* @__PURE__ */ __name(({ value, text, disabled, icon, onClick }) => /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)(
|
|
9796
9702
|
SelectPrimitive.Item,
|
|
9797
9703
|
{
|
|
9798
9704
|
className: style_module_default15.item,
|
|
@@ -9803,9 +9709,9 @@ var SelectItem = /* @__PURE__ */ __name(({ value, text, disabled, icon, onClick
|
|
|
9803
9709
|
onClick?.();
|
|
9804
9710
|
},
|
|
9805
9711
|
children: [
|
|
9806
|
-
/* @__PURE__ */ (0,
|
|
9807
|
-
icon && /* @__PURE__ */ (0,
|
|
9808
|
-
/* @__PURE__ */ (0,
|
|
9712
|
+
/* @__PURE__ */ (0, import_jsx_runtime180.jsx)(SelectPrimitive.ItemText, { children: /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(Paragraph, { size: 3, type: "normal", weight: "medium", children: text ?? value }) }),
|
|
9713
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(SelectPrimitive.Icon, { className: style_module_default15.icon, children: /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(Icon, { size: "xs", ...icon }) }),
|
|
9714
|
+
/* @__PURE__ */ (0, import_jsx_runtime180.jsx)(SelectPrimitive.ItemIndicator, { className: style_module_default15.itemIndicator, children: /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(Icon, { fill: false, thick: true, size: "xs", name: "check-mark", type: "brand-label-primary" }) })
|
|
9809
9715
|
]
|
|
9810
9716
|
}
|
|
9811
9717
|
), "SelectItem");
|
|
@@ -9821,18 +9727,18 @@ var style_module_default16 = {
|
|
|
9821
9727
|
};
|
|
9822
9728
|
|
|
9823
9729
|
// src/components/List/index.tsx
|
|
9824
|
-
var
|
|
9730
|
+
var import_react19 = require("react");
|
|
9825
9731
|
|
|
9826
9732
|
// src/hooks/collection.tsx
|
|
9827
|
-
var
|
|
9828
|
-
var
|
|
9829
|
-
var CollectionContext = (0,
|
|
9733
|
+
var import_react18 = require("react");
|
|
9734
|
+
var import_jsx_runtime181 = require("react/jsx-runtime");
|
|
9735
|
+
var CollectionContext = (0, import_react18.createContext)(void 0);
|
|
9830
9736
|
var CollectionProvider = /* @__PURE__ */ __name(({ value, onChangeValue, children }) => {
|
|
9831
|
-
const contextValue = (0,
|
|
9832
|
-
return /* @__PURE__ */ (0,
|
|
9737
|
+
const contextValue = (0, import_react18.useMemo)(() => ({ value, onChangeValue }), [value, onChangeValue]);
|
|
9738
|
+
return /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(CollectionContext.Provider, { value: contextValue, children });
|
|
9833
9739
|
}, "CollectionProvider");
|
|
9834
9740
|
var useCollectionContext = /* @__PURE__ */ __name(() => {
|
|
9835
|
-
const context = (0,
|
|
9741
|
+
const context = (0, import_react18.useContext)(CollectionContext);
|
|
9836
9742
|
if (!context) {
|
|
9837
9743
|
throw new Error("useCollectionContext must be used within a CollectionProvider");
|
|
9838
9744
|
}
|
|
@@ -9841,16 +9747,16 @@ var useCollectionContext = /* @__PURE__ */ __name(() => {
|
|
|
9841
9747
|
|
|
9842
9748
|
// src/components/List/index.tsx
|
|
9843
9749
|
var import_clsx17 = __toESM(require("clsx"));
|
|
9844
|
-
var
|
|
9750
|
+
var import_jsx_runtime182 = require("react/jsx-runtime");
|
|
9845
9751
|
var ListRoot = /* @__PURE__ */ __name(({ children, className, ...props }) => {
|
|
9846
|
-
return /* @__PURE__ */ (0,
|
|
9752
|
+
return /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CollectionProvider, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime182.jsx)("ul", { className: (0, import_clsx17.default)(style_module_default16.list, className), children }) });
|
|
9847
9753
|
}, "ListRoot");
|
|
9848
9754
|
var Item3 = /* @__PURE__ */ __name(({ value, text, disabled, icon, onClick }) => {
|
|
9849
|
-
const [isFocused, setIsFocused] = (0,
|
|
9755
|
+
const [isFocused, setIsFocused] = (0, import_react19.useState)(false);
|
|
9850
9756
|
const { value: contextValue, onChangeValue } = useCollectionContext();
|
|
9851
9757
|
const isSelected = contextValue === value;
|
|
9852
9758
|
const iconProps = isSelected ? { name: "check-mark", type: "brand-label-primary", thick: true } : icon ? icon : {};
|
|
9853
|
-
return /* @__PURE__ */ (0,
|
|
9759
|
+
return /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)(
|
|
9854
9760
|
"li",
|
|
9855
9761
|
{
|
|
9856
9762
|
className: style_module_default16.item,
|
|
@@ -9868,8 +9774,8 @@ var Item3 = /* @__PURE__ */ __name(({ value, text, disabled, icon, onClick }) =>
|
|
|
9868
9774
|
onChangeValue?.(value);
|
|
9869
9775
|
},
|
|
9870
9776
|
children: [
|
|
9871
|
-
/* @__PURE__ */ (0,
|
|
9872
|
-
(icon || isSelected) && /* @__PURE__ */ (0,
|
|
9777
|
+
/* @__PURE__ */ (0, import_jsx_runtime182.jsx)(Paragraph, { size: 3, type: "normal", weight: "medium", children: text }),
|
|
9778
|
+
(icon || isSelected) && /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(Icon, { className: style_module_default16.icon, size: "xs", ...iconProps })
|
|
9873
9779
|
]
|
|
9874
9780
|
}
|
|
9875
9781
|
);
|