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