@xfers/design-system 4.4.1-dev.d2697aaa21 → 4.4.1-dev.f6d416eb3b

package/dist/components/Coachmark/index.js

@@ -0,0 +1,53 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Coachmark;
+var styled_1 = require("@emotion/styled");
+var react_1 = require("react");
+var Typography_1 = require("src/constants/Typography/Typography");
+var MaterialSymbols_1 = require("src/icons/MaterialSymbols");
+var theme_1 = require("src/theme/theme");
+var Link_1 = require("../Link");
+function Coachmark(_a) {
+    var index = _a.index, primaryProps = _a.primaryProps, size = _a.size, skipProps = _a.skipProps, step = _a.step, tooltipProps = _a.tooltipProps, backProps = _a.backProps;
+    var title = step.title, content = step.content, data = step.data;
+    return (react_1.default.createElement(Container, { role: tooltipProps.role },
+        react_1.default.createElement(TextContainer, null,
+            react_1.default.createElement(Header, null,
+                react_1.default.createElement(Typography_1.Typography.Label, { size: "md" }, title),
+                react_1.default.createElement(SkipAction, { role: skipProps.role },
+                    react_1.default.createElement(MaterialSymbols_1.MaterialSymbols, { icon: "close", size: "m" }))),
+            react_1.default.createElement(Typography_1.Typography.Body, { size: "md" }, content)),
+        react_1.default.createElement(Footer, null,
+            react_1.default.createElement(Dots, null, Array.from({ length: size }, function (_, i) {
+                if (index === 0 && (data === null || data === void 0 ? void 0 : data.skipZeroIndex) === true) {
+                    return react_1.default.createElement(react_1.default.Fragment, null);
+                }
+                return react_1.default.createElement(Dot, { key: i, isActive: i === index });
+            })),
+            react_1.default.createElement(ButtonContainer, null,
+                backProps && (react_1.default.createElement(BackButton, { role: backProps === null || backProps === void 0 ? void 0 : backProps.role, isDisabled: index === 0 }, "Back")),
+                react_1.default.createElement(Link_1.default, { role: primaryProps.role }, "Next")))));
+}
+var Container = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 8px;\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  padding: 12px;\n  min-width: 200px;\n  max-width: 260px;\n"], ["\n  background-color: ", ";\n  border-radius: 8px;\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  padding: 12px;\n  min-width: 200px;\n  max-width: 260px;\n"])), theme_1.straitsXTheme.color.surface.secondaryNeutral);
+var TextContainer = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  color: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  color: ", ";\n"])), theme_1.straitsXTheme.color.base.onNeutral);
+var Header = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
+var SkipAction = (0, styled_1.default)(Link_1.default)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  text-decoration: none !important;\n"], ["\n  text-decoration: none !important;\n"])));
+var Footer = styled_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
+var Dots = styled_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n"])));
+var Dot = styled_1.default.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background-color: ", ";\n"], ["\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background-color: ", ";\n"])), function (props) {
+    return props.isActive
+        ? "".concat(theme_1.straitsXTheme.color.base.primary3)
+        : "".concat(theme_1.straitsXTheme.color.surface.disabledOnSurface);
+});
+var BackButton = (0, styled_1.default)(Link_1.default)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  color: ", ";\n  pointer-events: ", ";\n"], ["\n  color: ", ";\n  pointer-events: ", ";\n"])), function (props) {
+    return props.isDisabled
+        ? "".concat(theme_1.straitsXTheme.color.surface.disabledOnSurface)
+        : "".concat(theme_1.straitsXTheme.color.base.link);
+}, function (props) { return (props.isDisabled ? 'none' : 'auto'); });
+var ButtonContainer = styled_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  gap: 8px;\n"], ["\n  display: flex;\n  gap: 8px;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+//# sourceMappingURL=index.js.map

package/dist/components/Coachmark/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Coachmark/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Link/index.js

@@ -28,19 +28,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
 var styled_1 = require("@emotion/styled");
-var Typography_1 = require("src/constants/Typography/Typography");
-var theme_1 = require("src/theme/theme");
+var ThemeContext_1 = require("src/theme/ThemeContext");
+var fontStyles_1 = require("src/constants/fontStyles");
 var Link = function (_a) {
-    var _b = _a.typographyType, typographyType = _b === void 0 ? 'body' : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, textContent = _a.textContent, children = _a.children, href = _a.href, target = _a.target, rel = _a.rel, _d = _a.isUnderlined, isUnderlined = _d === void 0 ? true : _d, icon = _a.icon, _e = _a.iconPlacement, iconPlacement = _e === void 0 ? 'left' : _e, onClick = _a.onClick, props = __rest(_a, ["typographyType", "size", "textContent", "children", "href", "target", "rel", "isUnderlined", "icon", "iconPlacement", "onClick"]);
-    var StyledLink = styled_1.default.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: ", ";\n    align-items: center;\n    gap: 4px;\n    .material-symbols-rounded {\n      color: ", " !important;\n    }\n    text-decoration: ", ";\n    text-decoration-color: ", ";\n    :hover {\n      text-decoration: ", ";\n    }\n    user-select: none;\n  "], ["\n    display: ", ";\n    align-items: center;\n    gap: 4px;\n    .material-symbols-rounded {\n      color: ", " !important;\n    }\n    text-decoration: ", ";\n    text-decoration-color: ", ";\n    :hover {\n      text-decoration: ", ";\n    }\n    user-select: none;\n  "])), icon ? 'flex' : 'inline-flex', theme_1.straitsXTheme.color.base.link, isUnderlined ? 'underline' : 'none', theme_1.straitsXTheme.color.base.link, isUnderlined ? 'underline' : 'none');
-    var toShowIconOnLeft = icon && iconPlacement === 'left';
-    var toShowIconOnRight = icon && iconPlacement === 'right';
-    var content = textContent || children;
-    return (react_1.default.createElement(StyledLink, __assign({ href: href, target: target, rel: rel, onClick: onClick }, props),
-        toShowIconOnLeft && icon,
-        typographyType === 'body' && (react_1.default.createElement(Typography_1.Typography.Body, { size: size, color: theme_1.straitsXTheme.color.base.link }, content)),
-        typographyType === 'label' && (react_1.default.createElement(Typography_1.Typography.Label, { size: size, color: theme_1.straitsXTheme.color.base.link }, content)),
-        toShowIconOnRight && icon));
+    var size = _a.size, children = _a.children, props = __rest(_a, ["size", "children"]);
+    var primary = (0, ThemeContext_1.useTheme)().brand.primary;
+    var StyledLink = styled_1.default.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", ";\n    color: ", ";\n    user-select: none;\n    text-decoration: underline;\n\n    &:hover {\n      color: ", ";\n      text-decoration: underline;\n    }\n  "], ["\n    ", ";\n    color: ", ";\n    user-select: none;\n    text-decoration: underline;\n\n    &:hover {\n      color: ", ";\n      text-decoration: underline;\n    }\n  "])), size === 'small' ? fontStyles_1.smallPStyle : fontStyles_1.pStyle, primary.link, primary.default);
+    return react_1.default.createElement(StyledLink, __assign({}, props), children);
 };
 exports.default = Link;
 var templateObject_1;

package/dist/components/Link/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Link/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAyB;AACzB,0CAAoC;AACpC,kEAAgE;AAChE,yCAA+C;AAgB/C,IAAM,IAAI,GAAG,UAAC,EAaN;IAZN,IAAA,sBAAuB,EAAvB,cAAc,mBAAG,MAAM,KAAA,EACvB,YAAW,EAAX,IAAI,mBAAG,IAAI,KAAA,EACX,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,IAAI,UAAA,EACJ,MAAM,YAAA,EACN,GAAG,SAAA,EACH,oBAAmB,EAAnB,YAAY,mBAAG,IAAI,KAAA,EACnB,IAAI,UAAA,EACJ,qBAAsB,EAAtB,aAAa,mBAAG,MAAM,KAAA,EACtB,OAAO,aAAA,EACJ,KAAK,cAZI,kIAab,CADS;IAER,IAAM,UAAU,GAAG,gBAAM,CAAC,CAAC,sVAAA,iBACd,EAA6B,4FAI7B,EAA6B,4CAErB,EAAmC,gCAC7B,EAA6B,0CAEjC,EAAmC,sCAGzD,KAZY,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,EAI7B,qBAAa,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,EAErB,YAAY,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,EAC7B,qBAAa,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,EAEjC,YAAY,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAGzD,CAAA;IAED,IAAM,gBAAgB,GAAG,IAAI,IAAI,aAAa,KAAK,MAAM,CAAA;IACzD,IAAM,iBAAiB,GAAG,IAAI,IAAI,aAAa,KAAK,OAAO,CAAA;IAC3D,IAAM,OAAO,GAAG,WAAW,IAAI,QAAQ,CAAA;IAEvC,OAAO,CACL,8BAAC,UAAU,aACT,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,IACZ,KAAK;QAER,gBAAgB,IAAI,IAAI;QACxB,cAAc,KAAK,MAAM,IAAI,CAC5B,8BAAC,uBAAU,CAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,qBAAa,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,IAC9D,OAAO,CACQ,CACnB;QACA,cAAc,KAAK,OAAO,IAAI,CAC7B,8BAAC,uBAAU,CAAC,KAAK,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,qBAAa,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,IAC/D,OAAO,CACS,CACpB;QACA,iBAAiB,IAAI,IAAI,CACf,CACd,CAAA;AACH,CAAC,CAAA;AACD,kBAAe,IAAI,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Link/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAyB;AACzB,0CAAoC;AACpC,uDAAiD;AACjD,uDAA8D;AAM9D,IAAM,IAAI,GAAG,UAAC,EAAuC;IAArC,IAAA,IAAI,UAAA,EAAE,QAAQ,cAAA,EAAK,KAAK,cAA1B,oBAA4B,CAAF;IAE3B,IAAA,OAAO,GACd,IAAA,uBAAQ,GAAE,cADI,CACJ;IAEd,IAAM,UAAU,GAAG,gBAAM,CAAC,CAAC,8OAAA,QACvB,EAAuC,gBAChC,EAAY,4FAKV,EAAe,iDAG3B,KATG,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,wBAAW,CAAC,CAAC,CAAC,mBAAM,EAChC,OAAO,CAAC,IAAI,EAKV,OAAO,CAAC,OAAO,CAG3B,CAAA;IACD,OAAO,8BAAC,UAAU,eAAK,KAAK,GAAG,QAAQ,CAAc,CAAA;AACvD,CAAC,CAAA;AACD,kBAAe,IAAI,CAAA"}

package/dist/types/components/Coachmark/index.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+type CoachmarkProps = {
+    index: number;
+    size: number;
+    step: {
+        title: string;
+        content: string;
+        data?: {
+            skipZeroIndex?: boolean;
+        };
+    };
+    tooltipProps: {
+        role: string;
+    };
+    skipProps: {
+        role: string;
+    };
+    primaryProps: {
+        role: string;
+    };
+    backProps?: {
+        role: string;
+    };
+};
+export default function Coachmark({ index, primaryProps, size, skipProps, step, tooltipProps, backProps, }: CoachmarkProps): React.JSX.Element;
+export {};

package/dist/types/components/Link/index.d.ts

@@ -1,16 +1,6 @@
 import React from 'react';
-type Props = {
-    typographyType?: 'body' | 'label';
-    size?: 'md' | 'sm';
-    textContent?: string;
-    children?: React.ReactNode;
-    href?: string;
-    target?: string;
-    rel?: string;
-    isUnderlined?: boolean;
-    icon?: React.ReactNode;
-    iconPlacement?: 'left' | 'right';
-    onClick?: () => void;
+type LinkProps = {
+    size?: 'small';
 } & React.AnchorHTMLAttributes<HTMLAnchorElement>;
-declare const Link: ({ typographyType, size, textContent, children, href, target, rel, isUnderlined, icon, iconPlacement, onClick, ...props }: Props) => React.JSX.Element;
+declare const Link: ({ size, children, ...props }: LinkProps) => React.JSX.Element;
 export default Link;