@mailstep/design-system 0.8.27 → 0.8.28

package/ui/Forms/Input/styles.js

@@ -1,203 +1,219 @@
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n  position: absolute;\n\n  // top: 52%; // TODO fix\n  // transform: translateY(-50%); // TODO why does this do the overlap bug\n  left: ",
-        ";\n  right: ",
-        ";\n\n  svg {\n    stroke: lightGray3;\n    cursor: pointer;\n    color: ",
-        ";\n  }\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  svg {\n    color: gray1;\n  }\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n  position: absolute;\n  top: 0.2em;\n  right: 0.5em;\n"
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n  svg {\n    :hover {\n      cursor: pointer;\n      color: blue2;\n    }\n  }\n"
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject4() {
-    var data = _tagged_template_literal([
-        "\n          font-size: 30px;\n          color: gray;\n          font-weight: semiBold;\n          padding: 0 0.5rem 0 1.25rem;\n        "
-    ]);
-    _templateObject4 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject5() {
-    var data = _tagged_template_literal([
-        "\n          background-color: neutral20;\n          :focus {\n            background-color: neutral20;\n          }\n        "
-    ]);
-    _templateObject5 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject6() {
-    var data = _tagged_template_literal([
-        "\n  ",
-        ";\n  border: slim;\n  border-color: ",
-        ";\n  box-sizing: border-box;\n  background-clip: padding-box;\n  padding-top: 0.5em;\n  padding-bottom: 0.5em;\n  padding-right: ",
-        "em;\n  display: block;\n  width: ",
-        ";\n  font-family: ",
-        ";\n  font-size: 14px;\n  font-weight: normal;\n  transition: inputTransition;\n  resize: none;\n  overflow: hidden;\n\n  ~ ",
-        " {\n    svg {\n      stroke: lightGray3;\n    }\n  }\n\n  ::placeholder {\n    color: gray1;\n    opacity: 1;\n  }\n\n  :focus {\n    background-color: white;\n    border-color: blue2;\n    color: typoPrimary;\n    outline: 0;\n\n    ~ ",
-        " {\n      svg {\n        stroke: blue2;\n        color: blue2;\n      }\n    }\n  }\n  ",
-        ";\n  ",
-        ";\n  :disabled,\n  :disabled:hover {\n    background-color: bgLightGray1;\n    border-color: lightGray6;\n    color: neutral300;\n  }\n\n  text-overflow: ellipsis;\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n"
-    ]);
-    _templateObject6 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject7() {
-    var data = _tagged_template_literal([
-        "\n  position: relative;\n"
-    ]);
-    _templateObject7 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject8() {
-    var data = _tagged_template_literal([
-        "\n          cursor: pointer;\n        "
-    ]);
-    _templateObject8 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject9() {
-    var data = _tagged_template_literal([
-        "\n  position: absolute;\n  right: 0;\n  top: 0;\n  font-size: 14px;\n  font-weight: 700;\n  height: 100%;\n  width: 40px;\n  padding: 2;\n  color: typoPrimary;\n  font-family: ",
-        ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  border: slim;\n  border-top-right-radius: lg;\n  border-bottom-right-radius: lg;\n  border-left: none;\n\n  ",
-        ";\n\n  input:focus ~ &,\n  textarea:focus ~ & {\n    border-color: blue2;\n  }\n"
-    ]);
-    _templateObject9 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject10() {
-    var data = _tagged_template_literal([
-        "\n  position: relative;\n  color: ",
-        ";\n  & > * {\n    border-color: ",
-        ";\n    color: ",
-        ";\n  }\n  :hover > * {\n    border-color: ",
-        ";\n  }\n  &:focus-within {\n    color: typoPrimary;\n  }\n  .primary {\n    line-height: 0;\n    height: 38px;\n    border-radius: lg;\n    ~ ",
-        " {\n      top: 10px;\n    }\n  }\n  .grid {\n    line-height: 1.2px;\n    border-radius: md;\n    ~ ",
-        " {\n      top: 7px;\n    }\n  }\n  .left {\n    padding-left: ",
-        ";\n  }\n  .right {\n    padding-right: 1.4em;\n    padding-left: 1em;\n  }\n"
-    ]);
-    _templateObject10 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject11() {
-    var data = _tagged_template_literal([
-        "\n  span {\n    display: none;\n    position: absolute;\n    width: 120px;\n    background-color: white;\n    color: red1;\n    border-color: red1;\n    border: 1px solid;\n    text-align: center;\n    border-radius: lg;\n    padding: 1 3;\n    margin: 1;\n    z-index: 1;\n    transition: opacity 0.3s;\n    top: 0;\n    left: 100%;\n    margin-left: 2;\n    box-shadow: tooltipBoxShadow;\n\n    :after {\n      content: '';\n      position: absolute;\n      top: 0px;\n      right: 100%;\n      border: mediumThick;\n      border-color: transparent ",
-        " transparent transparent;\n    }\n  }\n\n  :hover {\n    cursor: pointer;\n    span {\n      display: block;\n    }\n  }\n"
-    ]);
-    _templateObject11 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import styled, { css, system, th } from "@xstyled/styled-components";
-var resolvePaddingRight = function resolvePaddingRight(props) {
-    var $icon = props.$icon, $iconPlacement = props.$iconPlacement, $isClearable = props.$isClearable, $hasSuffix = props.$hasSuffix;
-    var padding = 2;
-    if ($icon && $iconPlacement === "right") padding += 1;
-    if ($isClearable) padding += 1;
-    if ($hasSuffix) padding += 2;
-    return String(padding);
+import styled$1, { css, system, th } from "@xstyled/styled-components";
+//#region packages/ui/Forms/Input/styles.ts
+const resolvePaddingRight = (props) => {
+	const { $icon, $iconPlacement, $isClearable, $hasSuffix } = props;
+	let padding = 2;
+	if ($icon && $iconPlacement === "right") padding += 1;
+	if ($isClearable) padding += 1;
+	if ($hasSuffix) padding += 2;
+	return String(padding);
 };
-var InputIcon = styled.div(_templateObject(), function(param) {
-    var right = param.right;
-    return right ? "auto" : "1em";
-}, function(param) {
-    var right = param.right;
-    return right ? "0.5em" : "auto";
-}, function(param) {
-    var $isInvalid = param.$isInvalid, hasValue = param.hasValue, disabled = param.disabled;
-    return $isInvalid ? th.color("red1") : disabled || !hasValue ? th.color("lightGray6") : th.color("blue2");
-});
-var ClearableInputIcon = styled(InputIcon)(_templateObject1());
-var IconsController = styled.div(_templateObject2());
-var IconWrapper = styled.div(_templateObject3());
-var StyledInput = styled.input.attrs(function(props) {
-    return {
-        as: props.$asTextArea ? "textarea" : "input"
-    };
-})(_templateObject6(), system, function(param) {
-    var $isInvalid = param.$isInvalid;
-    return $isInvalid ? th.color("red1") : th.color("lightGray6");
-}, function(props) {
-    return resolvePaddingRight(props);
-}, function(props) {
-    return props.type !== "checkbox" ? "100%" : "auto";
-}, th("fonts.primary"), InputIcon, InputIcon, function(param) {
-    var big = param.big;
-    return big ? css(_templateObject4()) : "";
-}, function(param) {
-    var variant = param.variant;
-    return variant === "gray" ? css(_templateObject5()) : "";
-});
-var InputWrap = styled.div(_templateObject7());
-var Suffix = styled.div(_templateObject9(), th("fonts.primary"), function(param) {
-    var $isPointer = param.$isPointer;
-    return $isPointer ? css(_templateObject8()) : "";
-});
-var InputRow = styled.div(_templateObject10(), function(param) {
-    var $isInvalid = param.$isInvalid;
-    return $isInvalid ? th.color("red1") : th.color("gray");
-}, function(param) {
-    var $isInvalid = param.$isInvalid, variant = param.variant;
-    return $isInvalid ? th.color("red1") : variant === "gray" ? th.color("neutral20") : th.color("lightGray6");
-}, function(param) {
-    var hasValue = param.hasValue;
-    return hasValue ? th.color("typoPrimary") : th.color("gray");
-}, function(param) {
-    var disabled = param.disabled;
-    return disabled ? th.color("lightGray3") : th.color("gray5");
-}, InputIcon, InputIcon, function(param) {
-    var $icon = param.$icon;
-    return $icon ? "3em" : "1em";
-});
-var Tooltip = styled.div(_templateObject11(), th.color("red1"));
+const InputIcon = styled$1.div`
+  position: absolute;
+
+  // top: 52%; // TODO fix
+  // transform: translateY(-50%); // TODO why does this do the overlap bug
+  left: ${({ right }) => right ? "auto" : "1em"};
+  right: ${({ right }) => right ? "0.5em" : "auto"};
+
+  svg {
+    stroke: lightGray3;
+    cursor: pointer;
+    color: ${({ $isInvalid, hasValue, disabled }) => $isInvalid ? th.color("red1") : disabled || !hasValue ? th.color("lightGray6") : th.color("blue2")};
+  }
+`;
+const ClearableInputIcon = styled$1(InputIcon)`
+  svg {
+    color: gray1;
+  }
+`;
+const IconsController = styled$1.div`
+  position: absolute;
+  top: 0.2em;
+  right: 0.5em;
+`;
+const IconWrapper = styled$1.div`
+  display: flex;
+  svg {
+    :hover {
+      cursor: pointer;
+      color: blue2;
+    }
+  }
+`;
+const StyledInput = styled$1.input.attrs((props) => ({ as: props.$asTextArea ? "textarea" : "input" }))`
+  ${system};
+  border: slim;
+  border-color: ${({ $isInvalid }) => $isInvalid ? th.color("red1") : th.color("lightGray6")};
+  box-sizing: border-box;
+  background-clip: padding-box;
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  padding-right: ${(props) => resolvePaddingRight(props)}em;
+  display: block;
+  width: ${(props) => props.type !== "checkbox" ? "100%" : "auto"};
+  font-family: ${th("fonts.primary")};
+  font-size: 14px;
+  font-weight: normal;
+  transition: inputTransition;
+  resize: none;
+  overflow: hidden;
+
+  ~ ${InputIcon} {
+    svg {
+      stroke: lightGray3;
+    }
+  }
+
+  ::placeholder {
+    color: gray1;
+    opacity: 1;
+  }
+
+  :focus {
+    background-color: white;
+    border-color: blue2;
+    color: typoPrimary;
+    outline: 0;
+
+    ~ ${InputIcon} {
+      svg {
+        stroke: blue2;
+        color: blue2;
+      }
+    }
+  }
+  ${({ big }) => big ? css`
+          font-size: 30px;
+          color: gray;
+          font-weight: semiBold;
+          padding: 0 0.5rem 0 1.25rem;
+        ` : ""};
+  ${({ variant }) => variant === "gray" ? css`
+          background-color: neutral20;
+          :focus {
+            background-color: neutral20;
+          }
+        ` : ""};
+  :disabled,
+  :disabled:hover {
+    background-color: bgLightGray1;
+    border-color: lightGray6;
+    color: neutral300;
+  }
+
+  text-overflow: ellipsis;
+
+  -moz-appearance: textfield;
+  appearance: textfield;
+  ::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+  }
+`;
+const InputWrap = styled$1.div`
+  position: relative;
+`;
+const Suffix = styled$1.div`
+  position: absolute;
+  right: 0;
+  top: 0;
+  font-size: 14px;
+  font-weight: 700;
+  height: 100%;
+  width: 40px;
+  padding: 2;
+  color: typoPrimary;
+  font-family: ${th("fonts.primary")};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  border: slim;
+  border-top-right-radius: lg;
+  border-bottom-right-radius: lg;
+  border-left: none;
+
+  ${({ $isPointer }) => $isPointer ? css`
+          cursor: pointer;
+        ` : ""};
+
+  input:focus ~ &,
+  textarea:focus ~ & {
+    border-color: blue2;
+  }
+`;
+const InputRow = styled$1.div`
+  position: relative;
+  color: ${({ $isInvalid }) => $isInvalid ? th.color("red1") : th.color("gray")};
+  & > * {
+    border-color: ${({ $isInvalid, variant }) => $isInvalid ? th.color("red1") : variant === "gray" ? th.color("neutral20") : th.color("lightGray6")};
+    color: ${({ hasValue }) => hasValue ? th.color("typoPrimary") : th.color("gray")};
+  }
+  :hover > * {
+    border-color: ${({ disabled }) => disabled ? th.color("lightGray3") : th.color("gray5")};
+  }
+  &:focus-within {
+    color: typoPrimary;
+  }
+  .primary {
+    line-height: 0;
+    height: 38px;
+    border-radius: lg;
+    ~ ${InputIcon} {
+      top: 10px;
+    }
+  }
+  .grid {
+    line-height: 1.2px;
+    border-radius: md;
+    ~ ${InputIcon} {
+      top: 7px;
+    }
+  }
+  .left {
+    padding-left: ${({ $icon }) => $icon ? "3em" : "1em"};
+  }
+  .right {
+    padding-right: 1.4em;
+    padding-left: 1em;
+  }
+`;
+const Tooltip = styled$1.div`
+  span {
+    display: none;
+    position: absolute;
+    width: 120px;
+    background-color: white;
+    color: red1;
+    border-color: red1;
+    border: 1px solid;
+    text-align: center;
+    border-radius: lg;
+    padding: 1 3;
+    margin: 1;
+    z-index: 1;
+    transition: opacity 0.3s;
+    top: 0;
+    left: 100%;
+    margin-left: 2;
+    box-shadow: tooltipBoxShadow;
+
+    :after {
+      content: '';
+      position: absolute;
+      top: 0px;
+      right: 100%;
+      border: mediumThick;
+      border-color: transparent ${th.color("red1")} transparent transparent;
+    }
+  }
+
+  :hover {
+    cursor: pointer;
+    span {
+      display: block;
+    }
+  }
+`;
+//#endregion
 export { ClearableInputIcon, IconWrapper, IconsController, InputIcon, InputRow, InputWrap, StyledInput, Suffix, Tooltip };

package/ui/Forms/Input/types.js

@@ -0,0 +1 @@
+export {};

package/ui/Forms/RadioButton/RadioButton.js

@@ -1,103 +1,24 @@
-function _define_property(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _object_spread(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _define_property(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function _object_without_properties(source, excluded) {
-    if (source == null) return {};
-    var target = {}, sourceKeys, key, i;
-    if (typeof Reflect !== "undefined" && Reflect.ownKeys) {
-        sourceKeys = Reflect.ownKeys(Object(source));
-        for(i = 0; i < sourceKeys.length; i++){
-            key = sourceKeys[i];
-            if (excluded.indexOf(key) >= 0) continue;
-            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-            target[key] = source[key];
-        }
-        return target;
-    }
-    target = _object_without_properties_loose(source, excluded);
-    if (Object.getOwnPropertySymbols) {
-        sourceKeys = Object.getOwnPropertySymbols(source);
-        for(i = 0; i < sourceKeys.length; i++){
-            key = sourceKeys[i];
-            if (excluded.indexOf(key) >= 0) continue;
-            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-            target[key] = source[key];
-        }
-    }
-    return target;
-}
-function _object_without_properties_loose(source, excluded) {
-    if (source == null) return {};
-    var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
-    for(i = 0; i < sourceKeys.length; i++){
-        key = sourceKeys[i];
-        if (excluded.indexOf(key) >= 0) continue;
-        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-        target[key] = source[key];
-    }
-    return target;
-}
-import { jsx, jsxs } from "react/jsx-runtime";
+import { CenterDot, Item, Label, PaintoverLayer, StyledRadio, Wrapper } from "./styles.js";
 import { useId } from "react";
-import { CenterDot, Item, Label, PaintoverLayer, StyledRadio, Wrapper } from "./styles";
-var RadioButton = function RadioButton(_0) {
-    var label = _0.label, id = _0.id, name = _0.name, _0_disabled = _0.disabled, disabled = _0_disabled === void 0 ? false : _0_disabled, onChange = _0.onChange, rest = _object_without_properties(_0, [
-        "label",
-        "id",
-        "name",
-        "disabled",
-        "onChange"
-    ]);
-    var customId = useId();
-    var inputId = id || customId;
-    return /* @__PURE__ */ jsxs(Wrapper, {
-        children: [
-            /* @__PURE__ */ jsxs(Item, {
-                children: [
-                    /* @__PURE__ */ jsx(StyledRadio, _object_spread({
-                        type: "radio",
-                        id: inputId,
-                        name: name,
-                        disabled: disabled,
-                        onChange: onChange
-                    }, rest)),
-                    /* @__PURE__ */ jsx(PaintoverLayer, {
-                        disabled: disabled,
-                        children: /* @__PURE__ */ jsx(CenterDot, {})
-                    })
-                ]
-            }),
-            label && /* @__PURE__ */ jsx(Label, {
-                htmlFor: inputId,
-                children: label
-            })
-        ]
-    });
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/ui/Forms/RadioButton/RadioButton.tsx
+const RadioButton = ({ label, id, name, disabled = false, onChange, ...rest }) => {
+	const customId = useId();
+	const inputId = id || customId;
+	return /* @__PURE__ */ jsxs(Wrapper, { children: [/* @__PURE__ */ jsxs(Item, { children: [/* @__PURE__ */ jsx(StyledRadio, {
+		type: "radio",
+		id: inputId,
+		name,
+		disabled,
+		onChange,
+		...rest
+	}), /* @__PURE__ */ jsx(PaintoverLayer, {
+		disabled,
+		children: /* @__PURE__ */ jsx(CenterDot, {})
+	})] }), label && /* @__PURE__ */ jsx(Label, {
+		htmlFor: inputId,
+		children: label
+	})] });
 };
-var RadioButton_default = RadioButton;
-export { RadioButton_default as default };
+//#endregion
+export { RadioButton as default };

package/ui/Forms/RadioButton/index.js

@@ -1,3 +1,5 @@
-import RadioButton from "./RadioButton";
+import RadioButton from "./RadioButton.js";
+//#region packages/ui/Forms/RadioButton/index.ts
 var RadioButton_default = RadioButton;
+//#endregion
 export { RadioButton, RadioButton_default as default };