@antscorp/antsomi-ui 1.3.3-beta.34 → 1.3.3-beta.35

package/es/components/atoms/InputDynamic/styled.js

@@ -1,281 +1,19 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
 // Libraries
 import styled from 'styled-components';
 import { Input } from '../Input/Input';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const WrapperInputStyle = styled.div `
-  color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorText};
-  position: relative;
-
-  .input-wrapper-outter {
-    position: relative;
-    max-width: 100%;
-    min-height: 22px;
-    max-height: 6rem;
-    overflow: auto;
-    padding: 5px;
-    border-bottom: 1px solid ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.blue1};
-  }
-
-  .customize-antsomi-profile {
-    position: absolute;
-    font-size: 20px;
-    right: 4px;
-    top: 50%;
-    transform: translateY(-50%);
-    cursor: pointer;
-    color: rgb(0, 94, 184);
-  }
-
-  .styles-input-wrapper {
-    border-bottom: 1px solid ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.blue1} !important;
-    :hover {
-      cursor: text;
-      background-color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.blue};
-      border-bottom: 1px solid ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.blue1};
-    }
-    :focus-within {
-      background-color: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.bw0};
-      border-bottom: 1px solid rgb(0, 94, 184);
-    }
-    :active {
-      background-color: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.bw0};
-      border-bottom: 1px solid rgb(0, 94, 184);
-    }
-  }
-
-  .input-error {
-    border-bottom-color: rgb(239, 51, 64);
-  }
-
-  .customize-antsomi-profile-outter {
-    position: absolute;
-    font-size: 20px;
-    right: 2.8rem;
-    top: 2.3rem;
-    transform: translateY(-50%);
-    cursor: pointer;
-    color: ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.blue7};
-  }
-
-  .input-personal {
-    padding: 0px 4px;
-    padding-right: 32px;
-    outline: none;
-    overflow-wrap: normal;
-    overflow: hidden;
-    text-overflow: unset;
-    white-space: normal;
-    // display: inline-block;
-
-    .detect-url {
-      background-color: #e8feca;
-      display: inline;
-      position: relative;
-      cursor: pointer;
-    }
-  }
-  /*
-  $base-color: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.blue7};
-  $bg-base-color: #fff;
-  $border-base-color: ${(_k = THEME.token) === null || _k === void 0 ? void 0 : _k.bw3_5};
-  $bg-btn-base-color: #f4f6f8; */
-
-  .antsomi-wrapper-personalization {
-    width: 100%;
-    height: 100%;
-    background: $bg-base-color;
-    border: 1px solid $border-base-color;
-    border-radius: ${(_l = THEME.token) === null || _l === void 0 ? void 0 : _l.borderRadius}px;
-    display: flex;
-    flex-direction: column;
-    font-size: 14px;
-    font-family: Roboto, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
-    // box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-    .header {
-      padding: 13px 20px;
-      position: relative;
-
-      .title {
-        font-size: 20px;
-        font-weight: bold;
-        color: $base-color;
-      }
-
-      &:before {
-        content: '';
-        position: absolute;
-        left: 0;
-        bottom: 0;
-        height: 15px;
-        width: 95%;
-        border-bottom: 1px solid $border-base-color;
-      }
-    }
-
-    .body {
-      overflow: auto;
-      flex-grow: 1;
-      padding: 0 5px;
-
-      table {
-        width: 100%;
-        height: 100%;
-        table-layout: fixed;
-        border-collapse: collapse;
-        border-spacing: 0;
-        th,
-        td {
-          text-align: left;
-          padding: 0 15px;
-        }
-      }
-    }
-
-    .footer {
-      display: flex;
-      padding: 15px 25px;
-      justify-content: flex-end;
-    }
-  }
-
-  .btn {
-    min-width: 100px;
-    min-height: 40px;
-    border-radius: ${(_m = THEME.token) === null || _m === void 0 ? void 0 : _m.borderRadius}px;
-    outline: none;
-    border: none;
-    cursor: pointer;
-
-    &:focus {
-      outline: none !important;
-    }
-  }
-
-  .group-btn {
-    width: 222px;
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .btn-default {
-    background-color: $bg-btn-base-color;
-    color: $base-color;
-    border: 1px solid #d7dfe8;
-
-    &:hover {
-      background-color: #e3e9ef;
-    }
-  }
-
-  .btn-blue {
-    background-color: $base-color;
-    color: $bg-base-color;
-    border: 1px solid #707070;
-    opacity: 0.9;
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-
-  .input-outline {
-    border-top-style: hidden;
-    border-right-style: hidden;
-    border-left-style: hidden;
-    height: 27px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
-
-    &:focus {
-      outline: none;
-    }
-  }
-
-  .insert-word {
-    padding: 5px 8px;
-    color: white;
-    border: 1px solid;
-    border-radius: 20px;
-    height: 30px;
-    cursor: pointer;
-    line-height: 1px;
-    background: #bbefbe;
-
-    &.blue {
-      background: #3c39ba;
-    }
-
-    &.orange {
-      background: #fbac00;
-    }
-
-    &.violet-pc {
-      background: #6750a7;
-    }
-
-    &.disabled {
-      background: #ccc;
-    }
-    &.custom {
-      background: #bbefbe;
-      // border: 1px solid #BBEFBE;
-    }
-
-    em {
-      color: white;
-      font-style: normal;
-      font-size: 13px;
-      opacity: 0;
-      user-select: none;
-    }
-
-    &:hover {
-      em {
-        opacity: 1;
-      }
-    }
-  }
-`;
-export const SpanIcon = styled.span `
-  ${({ isDisabled }) => isDisabled && `cursor: not-allowed !important; opacity: 0.5;`}
-  font-size: 20px;
-`;
-export const InputWrapper = styled.div `
-  .input__wrapper {
-    display: flex;
-    align-items: center;
-
-    div.--default {
-      min-width: 120px;
-    }
-  }
-`;
-export const InputShortLink = styled(Input) ``;
-export const TooltipHover = styled.div `
-  position: fixed;
-  left: ${props => `${props.left}px`};
-  top: ${props => `${props.top}px`};
-
-  display: ${props => (props.isShow ? 'flex' : 'none')};
-  justify-content: center;
-  align-items: center;
-
-  background: rgba(0, 0, 0, 0.62);
-  transition: opacity 186ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
-    transform 124ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  color: #fff;
-  font-size: 12px;
-  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14),
-    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
-  border-radius: 4px;
-  height: 24px;
-  width: auto;
-  z-index: 999;
-  padding: 5px 10px;
-  user-select: none;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  box-sizing: border-box;
-`;
+export var WrapperInputStyle = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n  position: relative;\n\n  .input-wrapper-outter {\n    position: relative;\n    max-width: 100%;\n    min-height: 22px;\n    max-height: 6rem;\n    overflow: auto;\n    padding: 5px;\n    border-bottom: 1px solid ", ";\n  }\n\n  .customize-antsomi-profile {\n    position: absolute;\n    font-size: 20px;\n    right: 4px;\n    top: 50%;\n    transform: translateY(-50%);\n    cursor: pointer;\n    color: rgb(0, 94, 184);\n  }\n\n  .styles-input-wrapper {\n    border-bottom: 1px solid ", " !important;\n    :hover {\n      cursor: text;\n      background-color: ", ";\n      border-bottom: 1px solid ", ";\n    }\n    :focus-within {\n      background-color: ", ";\n      border-bottom: 1px solid rgb(0, 94, 184);\n    }\n    :active {\n      background-color: ", ";\n      border-bottom: 1px solid rgb(0, 94, 184);\n    }\n  }\n\n  .input-error {\n    border-bottom-color: rgb(239, 51, 64);\n  }\n\n  .customize-antsomi-profile-outter {\n    position: absolute;\n    font-size: 20px;\n    right: 2.8rem;\n    top: 2.3rem;\n    transform: translateY(-50%);\n    cursor: pointer;\n    color: ", ";\n  }\n\n  .input-personal {\n    padding: 0px 4px;\n    padding-right: 32px;\n    outline: none;\n    overflow-wrap: normal;\n    overflow: hidden;\n    text-overflow: unset;\n    white-space: normal;\n    // display: inline-block;\n\n    .detect-url {\n      background-color: #e8feca;\n      display: inline;\n      position: relative;\n      cursor: pointer;\n    }\n  }\n  /*\n  $base-color: ", ";\n  $bg-base-color: #fff;\n  $border-base-color: ", ";\n  $bg-btn-base-color: #f4f6f8; */\n\n  .antsomi-wrapper-personalization {\n    width: 100%;\n    height: 100%;\n    background: $bg-base-color;\n    border: 1px solid $border-base-color;\n    border-radius: ", "px;\n    display: flex;\n    flex-direction: column;\n    font-size: 14px;\n    font-family: Roboto, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;\n    // box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\n    .header {\n      padding: 13px 20px;\n      position: relative;\n\n      .title {\n        font-size: 20px;\n        font-weight: bold;\n        color: $base-color;\n      }\n\n      &:before {\n        content: '';\n        position: absolute;\n        left: 0;\n        bottom: 0;\n        height: 15px;\n        width: 95%;\n        border-bottom: 1px solid $border-base-color;\n      }\n    }\n\n    .body {\n      overflow: auto;\n      flex-grow: 1;\n      padding: 0 5px;\n\n      table {\n        width: 100%;\n        height: 100%;\n        table-layout: fixed;\n        border-collapse: collapse;\n        border-spacing: 0;\n        th,\n        td {\n          text-align: left;\n          padding: 0 15px;\n        }\n      }\n    }\n\n    .footer {\n      display: flex;\n      padding: 15px 25px;\n      justify-content: flex-end;\n    }\n  }\n\n  .btn {\n    min-width: 100px;\n    min-height: 40px;\n    border-radius: ", "px;\n    outline: none;\n    border: none;\n    cursor: pointer;\n\n    &:focus {\n      outline: none !important;\n    }\n  }\n\n  .group-btn {\n    width: 222px;\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .btn-default {\n    background-color: $bg-btn-base-color;\n    color: $base-color;\n    border: 1px solid #d7dfe8;\n\n    &:hover {\n      background-color: #e3e9ef;\n    }\n  }\n\n  .btn-blue {\n    background-color: $base-color;\n    color: $bg-base-color;\n    border: 1px solid #707070;\n    opacity: 0.9;\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n\n  .input-outline {\n    border-top-style: hidden;\n    border-right-style: hidden;\n    border-left-style: hidden;\n    height: 27px;\n    border-bottom: 1px solid rgba(0, 0, 0, 0.4);\n\n    &:focus {\n      outline: none;\n    }\n  }\n\n  .insert-word {\n    padding: 5px 8px;\n    color: white;\n    border: 1px solid;\n    border-radius: 20px;\n    height: 30px;\n    cursor: pointer;\n    line-height: 1px;\n    background: #bbefbe;\n\n    &.blue {\n      background: #3c39ba;\n    }\n\n    &.orange {\n      background: #fbac00;\n    }\n\n    &.violet-pc {\n      background: #6750a7;\n    }\n\n    &.disabled {\n      background: #ccc;\n    }\n    &.custom {\n      background: #bbefbe;\n      // border: 1px solid #BBEFBE;\n    }\n\n    em {\n      color: white;\n      font-style: normal;\n      font-size: 13px;\n      opacity: 0;\n      user-select: none;\n    }\n\n    &:hover {\n      em {\n        opacity: 1;\n      }\n    }\n  }\n"], ["\n  color: ", ";\n  position: relative;\n\n  .input-wrapper-outter {\n    position: relative;\n    max-width: 100%;\n    min-height: 22px;\n    max-height: 6rem;\n    overflow: auto;\n    padding: 5px;\n    border-bottom: 1px solid ", ";\n  }\n\n  .customize-antsomi-profile {\n    position: absolute;\n    font-size: 20px;\n    right: 4px;\n    top: 50%;\n    transform: translateY(-50%);\n    cursor: pointer;\n    color: rgb(0, 94, 184);\n  }\n\n  .styles-input-wrapper {\n    border-bottom: 1px solid ", " !important;\n    :hover {\n      cursor: text;\n      background-color: ", ";\n      border-bottom: 1px solid ", ";\n    }\n    :focus-within {\n      background-color: ", ";\n      border-bottom: 1px solid rgb(0, 94, 184);\n    }\n    :active {\n      background-color: ", ";\n      border-bottom: 1px solid rgb(0, 94, 184);\n    }\n  }\n\n  .input-error {\n    border-bottom-color: rgb(239, 51, 64);\n  }\n\n  .customize-antsomi-profile-outter {\n    position: absolute;\n    font-size: 20px;\n    right: 2.8rem;\n    top: 2.3rem;\n    transform: translateY(-50%);\n    cursor: pointer;\n    color: ", ";\n  }\n\n  .input-personal {\n    padding: 0px 4px;\n    padding-right: 32px;\n    outline: none;\n    overflow-wrap: normal;\n    overflow: hidden;\n    text-overflow: unset;\n    white-space: normal;\n    // display: inline-block;\n\n    .detect-url {\n      background-color: #e8feca;\n      display: inline;\n      position: relative;\n      cursor: pointer;\n    }\n  }\n  /*\n  $base-color: ", ";\n  $bg-base-color: #fff;\n  $border-base-color: ", ";\n  $bg-btn-base-color: #f4f6f8; */\n\n  .antsomi-wrapper-personalization {\n    width: 100%;\n    height: 100%;\n    background: $bg-base-color;\n    border: 1px solid $border-base-color;\n    border-radius: ", "px;\n    display: flex;\n    flex-direction: column;\n    font-size: 14px;\n    font-family: Roboto, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;\n    // box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\n    .header {\n      padding: 13px 20px;\n      position: relative;\n\n      .title {\n        font-size: 20px;\n        font-weight: bold;\n        color: $base-color;\n      }\n\n      &:before {\n        content: '';\n        position: absolute;\n        left: 0;\n        bottom: 0;\n        height: 15px;\n        width: 95%;\n        border-bottom: 1px solid $border-base-color;\n      }\n    }\n\n    .body {\n      overflow: auto;\n      flex-grow: 1;\n      padding: 0 5px;\n\n      table {\n        width: 100%;\n        height: 100%;\n        table-layout: fixed;\n        border-collapse: collapse;\n        border-spacing: 0;\n        th,\n        td {\n          text-align: left;\n          padding: 0 15px;\n        }\n      }\n    }\n\n    .footer {\n      display: flex;\n      padding: 15px 25px;\n      justify-content: flex-end;\n    }\n  }\n\n  .btn {\n    min-width: 100px;\n    min-height: 40px;\n    border-radius: ", "px;\n    outline: none;\n    border: none;\n    cursor: pointer;\n\n    &:focus {\n      outline: none !important;\n    }\n  }\n\n  .group-btn {\n    width: 222px;\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .btn-default {\n    background-color: $bg-btn-base-color;\n    color: $base-color;\n    border: 1px solid #d7dfe8;\n\n    &:hover {\n      background-color: #e3e9ef;\n    }\n  }\n\n  .btn-blue {\n    background-color: $base-color;\n    color: $bg-base-color;\n    border: 1px solid #707070;\n    opacity: 0.9;\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n\n  .input-outline {\n    border-top-style: hidden;\n    border-right-style: hidden;\n    border-left-style: hidden;\n    height: 27px;\n    border-bottom: 1px solid rgba(0, 0, 0, 0.4);\n\n    &:focus {\n      outline: none;\n    }\n  }\n\n  .insert-word {\n    padding: 5px 8px;\n    color: white;\n    border: 1px solid;\n    border-radius: 20px;\n    height: 30px;\n    cursor: pointer;\n    line-height: 1px;\n    background: #bbefbe;\n\n    &.blue {\n      background: #3c39ba;\n    }\n\n    &.orange {\n      background: #fbac00;\n    }\n\n    &.violet-pc {\n      background: #6750a7;\n    }\n\n    &.disabled {\n      background: #ccc;\n    }\n    &.custom {\n      background: #bbefbe;\n      // border: 1px solid #BBEFBE;\n    }\n\n    em {\n      color: white;\n      font-style: normal;\n      font-size: 13px;\n      opacity: 0;\n      user-select: none;\n    }\n\n    &:hover {\n      em {\n        opacity: 1;\n      }\n    }\n  }\n"])), (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorText, (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.blue1, (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.blue1, (_d = THEME.token) === null || _d === void 0 ? void 0 : _d.blue, (_e = THEME.token) === null || _e === void 0 ? void 0 : _e.blue1, (_f = THEME.token) === null || _f === void 0 ? void 0 : _f.bw0, (_g = THEME.token) === null || _g === void 0 ? void 0 : _g.bw0, (_h = THEME.token) === null || _h === void 0 ? void 0 : _h.blue7, (_j = THEME.token) === null || _j === void 0 ? void 0 : _j.blue7, (_k = THEME.token) === null || _k === void 0 ? void 0 : _k.bw3_5, (_l = THEME.token) === null || _l === void 0 ? void 0 : _l.borderRadius, (_m = THEME.token) === null || _m === void 0 ? void 0 : _m.borderRadius);
+export var SpanIcon = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  font-size: 20px;\n"], ["\n  ", "\n  font-size: 20px;\n"])), function (_a) {
+    var isDisabled = _a.isDisabled;
+    return isDisabled && "cursor: not-allowed !important; opacity: 0.5;";
+});
+export var InputWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  .input__wrapper {\n    display: flex;\n    align-items: center;\n\n    div.--default {\n      min-width: 120px;\n    }\n  }\n"], ["\n  .input__wrapper {\n    display: flex;\n    align-items: center;\n\n    div.--default {\n      min-width: 120px;\n    }\n  }\n"])));
+export var InputShortLink = styled(Input)(templateObject_4 || (templateObject_4 = __makeTemplateObject([""], [""])));
+export var TooltipHover = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: fixed;\n  left: ", ";\n  top: ", ";\n\n  display: ", ";\n  justify-content: center;\n  align-items: center;\n\n  background: rgba(0, 0, 0, 0.62);\n  transition: opacity 186ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n    transform 124ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  color: #fff;\n  font-size: 12px;\n  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14),\n    0px 3px 14px 2px rgba(0, 0, 0, 0.12);\n  border-radius: 4px;\n  height: 24px;\n  width: auto;\n  z-index: 999;\n  padding: 5px 10px;\n  user-select: none;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  box-sizing: border-box;\n"], ["\n  position: fixed;\n  left: ", ";\n  top: ", ";\n\n  display: ", ";\n  justify-content: center;\n  align-items: center;\n\n  background: rgba(0, 0, 0, 0.62);\n  transition: opacity 186ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n    transform 124ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  color: #fff;\n  font-size: 12px;\n  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14),\n    0px 3px 14px 2px rgba(0, 0, 0, 0.12);\n  border-radius: 4px;\n  height: 24px;\n  width: auto;\n  z-index: 999;\n  padding: 5px 10px;\n  user-select: none;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  box-sizing: border-box;\n"])), function (props) { return "".concat(props.left, "px"); }, function (props) { return "".concat(props.top, "px"); }, function (props) { return (props.isShow ? 'flex' : 'none'); });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;