cakeinpanic-ui 1.0.0

package/dist/cjs/input/InputGroup.js

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const React = require('react');
+const InputStyles = require('./InputStyles.js');
+const InputGroupStyles = require('./InputGroupStyles.js');
+const jsxRuntime = require('react/jsx-runtime');
+
+const InputGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    fullwidth = false,
+    error,
+    success,
+    warning,
+    children,
+    ...rest
+  } = _ref;
+  const hasError = !!error;
+  const hasSuccess = !!success && !error;
+  const hasWarning = !hasError && !!warning; // `error` overrides `warning`
+
+  return /*#__PURE__*/jsxRuntime.jsxs(InputGroupStyles.InputGroupStyle, {
+    $fullwidth: fullwidth,
+    ...rest,
+    ref: ref,
+    children: [/*#__PURE__*/jsxRuntime.jsx(InputGroupStyles.InputGroupContentStyle, {
+      children: children
+    }), hasError && /*#__PURE__*/jsxRuntime.jsx(InputStyles.InputMessageStyle, {
+      $variant: "error",
+      children: error
+    }), hasSuccess && /*#__PURE__*/jsxRuntime.jsx(InputStyles.InputMessageStyle, {
+      $variant: "success",
+      children: success
+    }), hasWarning && /*#__PURE__*/jsxRuntime.jsx(InputStyles.InputMessageStyle, {
+      $variant: "warning",
+      children: warning
+    })]
+  });
+});
+InputGroup.displayName = 'InputGroup';
+
+exports.InputGroup = InputGroup;
+//# sourceMappingURL=InputGroup.js.map

package/dist/cjs/input/InputGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputGroup.js","sources":["../../../src/input/InputGroup.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react'\nimport { InputMessageStyle } from './InputStyles.js'\nimport { InputGroupStyle, InputGroupContentStyle } from './InputGroupStyles.js'\nimport { InputGroupProps } from './types.js'\n\nexport const InputGroup = forwardRef(\n  (\n    {\n      fullwidth = false,\n      error,\n      success,\n      warning,\n      children,\n      ...rest\n    }: InputGroupProps,\n    ref?: ForwardedRef<HTMLSpanElement>,\n  ) => {\n    const hasError = !!error\n    const hasSuccess = !!success && !error\n    const hasWarning = !hasError && !!warning // `error` overrides `warning`\n\n    return (\n      <InputGroupStyle $fullwidth={fullwidth} {...rest} ref={ref}>\n        <InputGroupContentStyle>{children}</InputGroupContentStyle>\n        {hasError && (\n          <InputMessageStyle $variant='error'>{error}</InputMessageStyle>\n        )}\n        {hasSuccess && (\n          <InputMessageStyle $variant='success'>{success}</InputMessageStyle>\n        )}\n        {hasWarning && (\n          <InputMessageStyle $variant='warning'>{warning}</InputMessageStyle>\n        )}\n      </InputGroupStyle>\n    )\n  },\n)\nInputGroup.displayName = 'InputGroup'\n"],"names":["InputGroup","forwardRef","_ref","ref","fullwidth","error","success","warning","children","rest","hasError","hasSuccess","hasWarning","_jsxs","InputGroupStyle","$fullwidth","_jsx","InputGroupContentStyle","InputMessageStyle","$variant","displayName"],"mappings":";;;;;;;;;AAKO,MAAMA,UAAU,gBAAGC,gBAAU,CAClC,CAAAC,IAAA,EASEC,GAAmC,KAChC;EAAA,IATH;AACEC,IAAAA,SAAS,GAAG,KAAK;IACjBC,KAAK;IACLC,OAAO;IACPC,OAAO;IACPC,QAAQ;IACR,GAAGC,IAAAA;AACY,GAAC,GAAAP,IAAA,CAAA;AAGlB,EAAA,MAAMQ,QAAQ,GAAG,CAAC,CAACL,KAAK,CAAA;AACxB,EAAA,MAAMM,UAAU,GAAG,CAAC,CAACL,OAAO,IAAI,CAACD,KAAK,CAAA;EACtC,MAAMO,UAAU,GAAG,CAACF,QAAQ,IAAI,CAAC,CAACH,OAAO,CAAC;;EAE1C,oBACEM,eAAA,CAACC,gCAAe,EAAA;AAACC,IAAAA,UAAU,EAAEX,SAAU;AAAA,IAAA,GAAKK,IAAI;AAAEN,IAAAA,GAAG,EAAEA,GAAI;IAAAK,QAAA,EAAA,cACzDQ,cAAA,CAACC,uCAAsB,EAAA;AAAAT,MAAAA,QAAA,EAAEA,QAAAA;AAAQ,KAAyB,CAAC,EAC1DE,QAAQ,iBACPM,cAAA,CAACE,6BAAiB,EAAA;AAACC,MAAAA,QAAQ,EAAC,OAAO;AAAAX,MAAAA,QAAA,EAAEH,KAAAA;AAAK,KAAoB,CAC/D,EACAM,UAAU,iBACTK,cAAA,CAACE,6BAAiB,EAAA;AAACC,MAAAA,QAAQ,EAAC,SAAS;AAAAX,MAAAA,QAAA,EAAEF,OAAAA;AAAO,KAAoB,CACnE,EACAM,UAAU,iBACTI,cAAA,CAACE,6BAAiB,EAAA;AAACC,MAAAA,QAAQ,EAAC,SAAS;AAAAX,MAAAA,QAAA,EAAED,OAAAA;AAAO,KAAoB,CACnE,CAAA;AAAA,GACc,CAAC,CAAA;AAEtB,CACF,EAAC;AACDP,UAAU,CAACoB,WAAW,GAAG,YAAY;;;;"}

package/dist/cjs/input/InputGroupStyles.js

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const styledComponentsWrapper = require('../utils/styled-components-wrapper.js');
+const InputStyles = require('./InputStyles.js');
+
+const InputGroupStyle = styledComponentsWrapper.default.span`
+  display: inline-flex;
+  position: relative;
+  width: ${_ref => {
+  let {
+    $fullwidth
+  } = _ref;
+  return $fullwidth ? '100%' : 'auto';
+}};
+`;
+const InputGroupContentStyle = styledComponentsWrapper.default.span`
+  display: flex;
+  width: 100%;
+
+  & > ${InputStyles.InputWrapperStyle} {
+    margin: 0 -1px 0 0;
+
+    &:first-child {
+      & ${InputStyles.InputContentStyle} {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+
+    &:last-child {
+      & ${InputStyles.InputContentStyle} {
+        margin-right: 0;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+  }
+`;
+
+exports.InputGroupContentStyle = InputGroupContentStyle;
+exports.InputGroupStyle = InputGroupStyle;
+//# sourceMappingURL=InputGroupStyles.js.map

package/dist/cjs/input/InputGroupStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputGroupStyles.js","sources":["../../../src/input/InputGroupStyles.ts"],"sourcesContent":["import styled from '../utils/styled-components-wrapper.js'\nimport { InputWrapperStyle, InputContentStyle } from './InputStyles.js'\n\nexport const InputGroupStyle = styled.span<{ $fullwidth: boolean }>`\n  display: inline-flex;\n  position: relative;\n  width: ${({ $fullwidth }) => ($fullwidth ? '100%' : 'auto')};\n`\n\nexport const InputGroupContentStyle = styled.span`\n  display: flex;\n  width: 100%;\n\n  & > ${InputWrapperStyle} {\n    margin: 0 -1px 0 0;\n\n    &:first-child {\n      & ${InputContentStyle} {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n    }\n\n    &:last-child {\n      & ${InputContentStyle} {\n        margin-right: 0;\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n      }\n    }\n  }\n`\n"],"names":["InputGroupStyle","styled","span","_ref","$fullwidth","InputGroupContentStyle","InputWrapperStyle","InputContentStyle"],"mappings":";;;;;;;AAGaA,MAAAA,eAAe,GAAGC,+BAAM,CAACC,IAA6B,CAAA;AACnE;AACA;AACA,SAAA,EAAWC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAAD,IAAA,CAAA;AAAA,EAAA,OAAMC,UAAU,GAAG,MAAM,GAAG,MAAM,CAAA;AAAA,CAAC,CAAA;AAC7D,EAAC;AAEYC,MAAAA,sBAAsB,GAAGJ,+BAAM,CAACC,IAAI,CAAA;AACjD;AACA;AACA;AACA,MAAA,EAAQI,6BAAiB,CAAA;AACzB;AACA;AACA;AACA,QAAA,EAAUC,6BAAiB,CAAA;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA,QAAA,EAAUA,6BAAiB,CAAA;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA;;;;;"}

package/dist/cjs/input/InputStyles.js

@@ -0,0 +1,418 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const styledComponentsWrapper = require('../utils/styled-components-wrapper.js');
+const LabelStyles = require('./LabelStyles.js');
+const _styled = require('styled-components');
+
+const statesCSS = _styled.css`
+  &:hover {
+    z-index: 1;
+  }
+
+  &:focus-within {
+    z-index: 2;
+    border-color: var(--lido-color-borderActive);
+
+    ${LabelStyles.InputLabelStyle} {
+      ${LabelStyles.labelFocusCSS}
+    }
+  }
+`;
+const activeCSS = _styled.css`
+  &,
+  &:hover,
+  &:focus-within {
+    z-index: 2;
+    border-color: var(--lido-color-borderActive);
+
+    ${LabelStyles.InputLabelStyle} {
+      ${LabelStyles.labelFocusCSS}
+    }
+  }
+`;
+const errorCSS = _styled.css`
+  &,
+  &:hover,
+  &:focus-within {
+    border-color: var(--lido-color-error);
+
+    ${LabelStyles.InputLabelStyle} {
+      ${LabelStyles.labelErrorCSS}
+    }
+  }
+`;
+const warningCSS = _styled.css`
+  &,
+  &:hover,
+  &:focus-within {
+    border-color: var(--lido-color-warning);
+
+    ${LabelStyles.InputLabelStyle} {
+      ${LabelStyles.labelWarningCSS}
+    }
+  }
+`;
+const wrapperColors = {
+  default: _styled.css`
+    background: var(--lido-color-controlBg);
+    border-color: var(--lido-color-border);
+    color: var(--lido-color-text);
+
+    ${_ref => {
+    let {
+      $disabled
+    } = _ref;
+    return $disabled ? `background: var(--lido-color-background);` : `
+          &:hover {
+            border-color: var(--lido-color-borderHover);
+          }
+    `;
+  }};
+  `,
+  accent: _styled.css`
+    background: var(--lido-color-accentControlBg);
+    border-color: var(--lido-color-accentBorder);
+    color: var(--lido-color-accentText);
+
+    ${_ref2 => {
+    let {
+      $disabled
+    } = _ref2;
+    return $disabled ? `background: var(--lido-color-controlBg);` : `
+          &:hover {
+            border-color: var(--lido-color-accentBorderHover);
+          }
+    `;
+  }};
+  `
+};
+const decoratorCSS = _styled.css`
+  flex-grow: 0;
+  flex-shrink: 0;
+  cursor: inherit;
+  display: flex;
+  align-items: center;
+`;
+const InputLeftDecoratorStyle = styledComponentsWrapper.default.span`
+  ${decoratorCSS}
+  padding-right: 16px;
+`;
+const InputRightDecoratorStyle = styledComponentsWrapper.default.span`
+  ${decoratorCSS}
+  padding-left: 16px;
+`;
+const InputWrapperStyle = styledComponentsWrapper.default.label`
+  position: relative;
+  display: inline-flex;
+  align-items: stretch;
+  box-sizing: border-box;
+  cursor: ${_ref3 => {
+  let {
+    $disabled
+  } = _ref3;
+  return $disabled ? 'default' : 'text';
+}};
+  width: ${_ref4 => {
+  let {
+    $fullwidth
+  } = _ref4;
+  return $fullwidth ? '100%' : 'auto';
+}};
+`;
+const contentVariants = {
+  default: _styled.css`
+    padding-top: 17px;
+    padding-bottom: 17px;
+
+    & ${InputLeftDecoratorStyle}, & ${InputRightDecoratorStyle} {
+      margin-top: -17px;
+      margin-bottom: -17px;
+    }
+  `,
+  small: _styled.css`
+    padding-top: 9px;
+    padding-bottom: 9px;
+
+    & ${InputLeftDecoratorStyle}, & ${InputRightDecoratorStyle} {
+      padding-top: -9px;
+      padding-bottom: -9px;
+    }
+  `
+};
+const InputContentStyle = styledComponentsWrapper.default.span`
+  position: relative;
+  display: flex;
+  flex-grow: 1;
+  padding-left: 15px;
+  padding-right: 15px;
+  font-weight: 400;
+  font-size: ${_ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.fontSizesMap.xs;
+}}px;
+  border: 1px solid;
+  border-radius: ${_ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.borderRadiusesMap.lg;
+}}px;
+  transition: border-color ${_ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.duration.fast;
+}} ease;
+
+  ${_ref8 => {
+  let {
+    $variant
+  } = _ref8;
+  return contentVariants[$variant];
+}};
+  ${_ref9 => {
+  let {
+    $color
+  } = _ref9;
+  return wrapperColors[$color];
+}};
+  ${_ref0 => {
+  let {
+    $disabled
+  } = _ref0;
+  return $disabled ? '' : statesCSS;
+}};
+  ${_ref1 => {
+  let {
+    $active
+  } = _ref1;
+  return $active ? activeCSS : '';
+}};
+  ${_ref10 => {
+  let {
+    $warning
+  } = _ref10;
+  return $warning ? warningCSS : '';
+}};
+  ${_ref11 => {
+  let {
+    $error
+  } = _ref11;
+  return $error ? errorCSS : '';
+}};
+`;
+const InputControlWrapperStyle = styledComponentsWrapper.default.div`
+  position: relative;
+  display: flex;
+  flex-grow: 1;
+`;
+const labeledCSS = _styled.css`
+  &:not(:focus):placeholder-shown {
+    & + ${LabelStyles.InputLabelStyle} {
+      ${LabelStyles.labelEmptyValueCSS}
+    }
+
+    &::placeholder {
+      opacity: 0;
+    }
+  }
+`;
+const inputColors = {
+  default: _styled.css`
+    color: var(--lido-color-text);
+
+    &:disabled {
+      color: var(--lido-color-textSecondary);
+    }
+
+    &::placeholder {
+      color: var(--lido-color-textSecondary);
+    }
+
+    &:-webkit-autofill {
+      box-shadow: 0 0 0 100px var(--lido-color-controlBg) inset !important;
+      color: var(--lido-color-text) !important;
+      -webkit-text-fill-color: var(--lido-color-text) !important;
+    }
+
+    &:-internal-autofill-selected {
+      color: var(--lido-color-text) !important;
+      -webkit-text-fill-color: var(--lido-color-text) !important;
+    }
+  `,
+  accent: _styled.css`
+    color: var(--lido-color-accentText);
+    opacity: 1;
+
+    &:disabled {
+      color: var(--lido-color-accentText);
+      opacity: 0.5;
+    }
+
+    &::placeholder {
+      color: var(--lido-color-accentText);
+      opacity: 0.5;
+    }
+
+    &:-webkit-autofill {
+      box-shadow: 0 0 0 100px var(--lido-color-accentControlBg) inset !important;
+      color: var(--lido-color-accentContrast) !important;
+      -webkit-text-fill-color: var(--lido-color-accentContrast) !important;
+    }
+
+    &:-internal-autofill-selected {
+      color: var(--lido-color-accentContrast) !important;
+      -webkit-text-fill-color: var(--lido-color-accentContrast) !important;
+    }
+  `
+};
+const InputStyle = styledComponentsWrapper.default.input`
+  width: 100%;
+  font-family: inherit;
+  font-weight: 400;
+  font-size: 1em;
+  line-height: 1.43em;
+  padding: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  border: none;
+  outline: none;
+  position: relative;
+  top: ${_ref12 => {
+  let {
+    $labeled
+  } = _ref12;
+  return $labeled ? 8 : 0;
+}}px;
+
+  &::placeholder {
+    transition: opacity ${_ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.duration.fast;
+}} ease;
+  }
+
+  ${_ref14 => {
+  let {
+    $color
+  } = _ref14;
+  return inputColors[$color];
+}}
+  ${_ref15 => {
+  let {
+    $labeled
+  } = _ref15;
+  return $labeled ? labeledCSS : '';
+}}
+`;
+const TextareaStyle = styledComponentsWrapper.default(InputStyle).attrs({
+  as: 'textarea'
+})`
+  resize: none;
+`;
+const messageVariants = {
+  error: _styled.css`
+    background: var(--lido-color-error);
+    color: var(--lido-color-errorContrast);
+    box-shadow: ${_ref16 => {
+    let {
+      theme
+    } = _ref16;
+    return theme.boxShadows.sm;
+  }}
+      var(--lido-color-shadowLight);
+  `,
+  warning: _styled.css`
+    background: var(--lido-color-warning);
+    color: var(--lido-color-warningContrast);
+    box-shadow: ${_ref17 => {
+    let {
+      theme
+    } = _ref17;
+    return theme.boxShadows.sm;
+  }}
+      var(--lido-color-shadowLight);
+  `,
+  success: _styled.css`
+    background: var(--lido-color-success);
+    color: var(--lido-color-successContrast);
+    box-shadow: ${_ref18 => {
+    let {
+      theme
+    } = _ref18;
+    return theme.boxShadows.sm;
+  }}
+      var(--lido-color-shadowLight);
+  `
+};
+const InputMessageStyle = styledComponentsWrapper.default.span`
+  margin-top: ${_ref19 => {
+  let {
+    $bordered
+  } = _ref19;
+  return $bordered ? 5 : 6;
+}}px;
+  left: ${_ref20 => {
+  let {
+    $bordered
+  } = _ref20;
+  return $bordered ? -1 : 0;
+}}px;
+  position: absolute;
+  top: 100%;
+  line-height: 1.6em;
+  font-weight: 400;
+  font-size: ${_ref21 => {
+  let {
+    theme
+  } = _ref21;
+  return theme.fontSizesMap.xxs;
+}}px;
+  border-radius: ${_ref22 => {
+  let {
+    theme
+  } = _ref22;
+  return theme.borderRadiusesMap.sm;
+}}px;
+  padding: 6px 10px;
+  white-space: ${_ref23 => {
+  let {
+    $wrap
+  } = _ref23;
+  return $wrap ? 'wrap' : 'nowrap';
+}};
+  overflow: hidden;
+  box-sizing: border-box;
+  text-overflow: ellipsis;
+  max-width: ${_ref24 => {
+  let {
+    $bordered
+  } = _ref24;
+  return $bordered ? 'calc(100% + 2px)' : '100%';
+}};
+  z-index: 3;
+
+  ${_ref25 => {
+  let {
+    $variant
+  } = _ref25;
+  return messageVariants[$variant];
+}}
+`;
+
+exports.InputContentStyle = InputContentStyle;
+exports.InputControlWrapperStyle = InputControlWrapperStyle;
+exports.InputLeftDecoratorStyle = InputLeftDecoratorStyle;
+exports.InputMessageStyle = InputMessageStyle;
+exports.InputRightDecoratorStyle = InputRightDecoratorStyle;
+exports.InputStyle = InputStyle;
+exports.InputWrapperStyle = InputWrapperStyle;
+exports.TextareaStyle = TextareaStyle;
+//# sourceMappingURL=InputStyles.js.map

package/dist/cjs/input/InputStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputStyles.js","sources":["../../../src/input/InputStyles.ts"],"sourcesContent":["import styled, { css } from '../utils/styled-components-wrapper.js'\nimport { InputMessageVariants, InputVariants, InputColors } from './types.js'\nimport {\n  labelEmptyValueCSS,\n  labelFocusCSS,\n  labelErrorCSS,\n  InputLabelStyle,\n  labelWarningCSS,\n} from './LabelStyles.js'\n\nconst statesCSS = css`\n  &:hover {\n    z-index: 1;\n  }\n\n  &:focus-within {\n    z-index: 2;\n    border-color: var(--lido-color-borderActive);\n\n    ${InputLabelStyle} {\n      ${labelFocusCSS}\n    }\n  }\n`\n\nconst activeCSS = css`\n  &,\n  &:hover,\n  &:focus-within {\n    z-index: 2;\n    border-color: var(--lido-color-borderActive);\n\n    ${InputLabelStyle} {\n      ${labelFocusCSS}\n    }\n  }\n`\n\nconst errorCSS = css`\n  &,\n  &:hover,\n  &:focus-within {\n    border-color: var(--lido-color-error);\n\n    ${InputLabelStyle} {\n      ${labelErrorCSS}\n    }\n  }\n`\n\nconst warningCSS = css`\n  &,\n  &:hover,\n  &:focus-within {\n    border-color: var(--lido-color-warning);\n\n    ${InputLabelStyle} {\n      ${labelWarningCSS}\n    }\n  }\n`\n\nconst wrapperColors = {\n  default: css<{ $disabled: boolean }>`\n    background: var(--lido-color-controlBg);\n    border-color: var(--lido-color-border);\n    color: var(--lido-color-text);\n\n    ${({ $disabled }) =>\n      $disabled\n        ? `background: var(--lido-color-background);`\n        : `\n          &:hover {\n            border-color: var(--lido-color-borderHover);\n          }\n    `};\n  `,\n  accent: css<{ $disabled: boolean }>`\n    background: var(--lido-color-accentControlBg);\n    border-color: var(--lido-color-accentBorder);\n    color: var(--lido-color-accentText);\n\n    ${({ $disabled }) =>\n      $disabled\n        ? `background: var(--lido-color-controlBg);`\n        : `\n          &:hover {\n            border-color: var(--lido-color-accentBorderHover);\n          }\n    `};\n  `,\n}\n\nconst decoratorCSS = css`\n  flex-grow: 0;\n  flex-shrink: 0;\n  cursor: inherit;\n  display: flex;\n  align-items: center;\n`\n\nexport const InputLeftDecoratorStyle = styled.span`\n  ${decoratorCSS}\n  padding-right: 16px;\n`\n\nexport const InputRightDecoratorStyle = styled.span`\n  ${decoratorCSS}\n  padding-left: 16px;\n`\n\nexport const InputWrapperStyle = styled.label<{\n  $fullwidth: boolean\n  $disabled: boolean\n}>`\n  position: relative;\n  display: inline-flex;\n  align-items: stretch;\n  box-sizing: border-box;\n  cursor: ${({ $disabled }) => ($disabled ? 'default' : 'text')};\n  width: ${({ $fullwidth }) => ($fullwidth ? '100%' : 'auto')};\n`\n\nconst contentVariants = {\n  default: css`\n    padding-top: 17px;\n    padding-bottom: 17px;\n\n    & ${InputLeftDecoratorStyle}, & ${InputRightDecoratorStyle} {\n      margin-top: -17px;\n      margin-bottom: -17px;\n    }\n  `,\n  small: css`\n    padding-top: 9px;\n    padding-bottom: 9px;\n\n    & ${InputLeftDecoratorStyle}, & ${InputRightDecoratorStyle} {\n      padding-top: -9px;\n      padding-bottom: -9px;\n    }\n  `,\n}\n\nexport const InputContentStyle = styled.span<{\n  $error: boolean\n  $warning: boolean\n  $active: boolean\n  $disabled: boolean\n  $color: InputColors\n  $variant: InputVariants\n}>`\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n  padding-left: 15px;\n  padding-right: 15px;\n  font-weight: 400;\n  font-size: ${({ theme }) => theme.fontSizesMap.xs}px;\n  border: 1px solid;\n  border-radius: ${({ theme }) => theme.borderRadiusesMap.lg}px;\n  transition: border-color ${({ theme }) => theme.duration.fast} ease;\n\n  ${({ $variant }) => contentVariants[$variant]};\n  ${({ $color }) => wrapperColors[$color]};\n  ${({ $disabled }) => ($disabled ? '' : statesCSS)};\n  ${({ $active }) => ($active ? activeCSS : '')};\n  ${({ $warning }) => ($warning ? warningCSS : '')};\n  ${({ $error }) => ($error ? errorCSS : '')};\n`\n\nexport const InputControlWrapperStyle = styled.div`\n  position: relative;\n  display: flex;\n  flex-grow: 1;\n`\n\nconst labeledCSS = css`\n  &:not(:focus):placeholder-shown {\n    & + ${InputLabelStyle} {\n      ${labelEmptyValueCSS}\n    }\n\n    &::placeholder {\n      opacity: 0;\n    }\n  }\n`\n\nconst inputColors = {\n  default: css`\n    color: var(--lido-color-text);\n\n    &:disabled {\n      color: var(--lido-color-textSecondary);\n    }\n\n    &::placeholder {\n      color: var(--lido-color-textSecondary);\n    }\n\n    &:-webkit-autofill {\n      box-shadow: 0 0 0 100px var(--lido-color-controlBg) inset !important;\n      color: var(--lido-color-text) !important;\n      -webkit-text-fill-color: var(--lido-color-text) !important;\n    }\n\n    &:-internal-autofill-selected {\n      color: var(--lido-color-text) !important;\n      -webkit-text-fill-color: var(--lido-color-text) !important;\n    }\n  `,\n  accent: css`\n    color: var(--lido-color-accentText);\n    opacity: 1;\n\n    &:disabled {\n      color: var(--lido-color-accentText);\n      opacity: 0.5;\n    }\n\n    &::placeholder {\n      color: var(--lido-color-accentText);\n      opacity: 0.5;\n    }\n\n    &:-webkit-autofill {\n      box-shadow: 0 0 0 100px var(--lido-color-accentControlBg) inset !important;\n      color: var(--lido-color-accentContrast) !important;\n      -webkit-text-fill-color: var(--lido-color-accentContrast) !important;\n    }\n\n    &:-internal-autofill-selected {\n      color: var(--lido-color-accentContrast) !important;\n      -webkit-text-fill-color: var(--lido-color-accentContrast) !important;\n    }\n  `,\n}\n\nexport const InputStyle = styled.input<{\n  $labeled: boolean\n  $color: InputColors\n}>`\n  width: 100%;\n  font-family: inherit;\n  font-weight: 400;\n  font-size: 1em;\n  line-height: 1.43em;\n  padding: 0;\n  border-radius: 0;\n  background: transparent;\n  box-shadow: none;\n  border: none;\n  outline: none;\n  position: relative;\n  top: ${({ $labeled }) => ($labeled ? 8 : 0)}px;\n\n  &::placeholder {\n    transition: opacity ${({ theme }) => theme.duration.fast} ease;\n  }\n\n  ${({ $color }) => inputColors[$color]}\n  ${({ $labeled }) => ($labeled ? labeledCSS : '')}\n`\n\nexport const TextareaStyle = styled(InputStyle).attrs({\n  as: 'textarea',\n})`\n  resize: none;\n`\n\nconst messageVariants = {\n  error: css`\n    background: var(--lido-color-error);\n    color: var(--lido-color-errorContrast);\n    box-shadow: ${({ theme }) => theme.boxShadows.sm}\n      var(--lido-color-shadowLight);\n  `,\n  warning: css`\n    background: var(--lido-color-warning);\n    color: var(--lido-color-warningContrast);\n    box-shadow: ${({ theme }) => theme.boxShadows.sm}\n      var(--lido-color-shadowLight);\n  `,\n  success: css`\n    background: var(--lido-color-success);\n    color: var(--lido-color-successContrast);\n    box-shadow: ${({ theme }) => theme.boxShadows.sm}\n      var(--lido-color-shadowLight);\n  `,\n}\n\nexport const InputMessageStyle = styled.span<{\n  $variant: InputMessageVariants\n  $bordered?: boolean\n  $wrap?: boolean\n}>`\n  margin-top: ${({ $bordered }) => ($bordered ? 5 : 6)}px;\n  left: ${({ $bordered }) => ($bordered ? -1 : 0)}px;\n  position: absolute;\n  top: 100%;\n  line-height: 1.6em;\n  font-weight: 400;\n  font-size: ${({ theme }) => theme.fontSizesMap.xxs}px;\n  border-radius: ${({ theme }) => theme.borderRadiusesMap.sm}px;\n  padding: 6px 10px;\n  white-space: ${({ $wrap }) => ($wrap ? 'wrap' : 'nowrap')};\n  overflow: hidden;\n  box-sizing: border-box;\n  text-overflow: ellipsis;\n  max-width: ${({ $bordered }) => ($bordered ? 'calc(100% + 2px)' : '100%')};\n  z-index: 3;\n\n  ${({ $variant }) => messageVariants[$variant]}\n`\n"],"names":["statesCSS","css","InputLabelStyle","labelFocusCSS","activeCSS","errorCSS","labelErrorCSS","warningCSS","labelWarningCSS","wrapperColors","default","_ref","$disabled","accent","_ref2","decoratorCSS","InputLeftDecoratorStyle","styled","span","InputRightDecoratorStyle","InputWrapperStyle","label","_ref3","_ref4","$fullwidth","contentVariants","small","InputContentStyle","_ref5","theme","fontSizesMap","xs","_ref6","borderRadiusesMap","lg","_ref7","duration","fast","_ref8","$variant","_ref9","$color","_ref0","_ref1","$active","_ref10","$warning","_ref11","$error","InputControlWrapperStyle","div","labeledCSS","labelEmptyValueCSS","inputColors","InputStyle","input","_ref12","$labeled","_ref13","_ref14","_ref15","TextareaStyle","attrs","as","messageVariants","error","_ref16","boxShadows","sm","warning","_ref17","success","_ref18","InputMessageStyle","_ref19","$bordered","_ref20","_ref21","xxs","_ref22","_ref23","$wrap","_ref24","_ref25"],"mappings":"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"}

package/dist/cjs/input/LabelStyles.js

@@ -0,0 +1,81 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const styledComponentsWrapper = require('../utils/styled-components-wrapper.js');
+const _styled = require('styled-components');
+
+const colors = {
+  default: _styled.css`
+    color: var(--lido-color-textSecondary);
+  `,
+  accent: _styled.css`
+    color: var(--lido-color-accentContrastSecondary);
+  `
+};
+const labelEmptyValueCSS = _styled.css`
+  ${_ref => {
+  let {
+    $color
+  } = _ref;
+  return colors[$color];
+}}
+
+  transform: scale(1);
+  opacity: 0.5;
+`;
+const labelFilledValueCSS = _styled.css`
+  ${_ref2 => {
+  let {
+    $color
+  } = _ref2;
+  return colors[$color];
+}}
+
+  transform: translateY(-14px) scale(0.75);
+  opacity: 1;
+`;
+const labelFocusCSS = _styled.css`
+  color: var(--lido-color-primary);
+  opacity: 1;
+`;
+const labelErrorCSS = _styled.css`
+  color: var(--lido-color-error);
+`;
+const labelWarningCSS = _styled.css`
+  color: var(--lido-color-warning);
+`;
+const InputLabelStyle = styledComponentsWrapper.default.span`
+  position: absolute;
+  left: 0;
+  top: 50%;
+  font-size: 1em;
+  line-height: 1.25em;
+  margin: -0.625em 0 0 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  color: inherit;
+  transform-origin: 0% 100%;
+  transition: transform ${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.duration.fast;
+}} ease;
+  transition-property: transform, opacity, color;
+  ${labelFilledValueCSS};
+`;
+const TextareaLabelStyle = styledComponentsWrapper.default(InputLabelStyle)`
+  top: 10px;
+`;
+
+exports.InputLabelStyle = InputLabelStyle;
+exports.TextareaLabelStyle = TextareaLabelStyle;
+exports.labelEmptyValueCSS = labelEmptyValueCSS;
+exports.labelErrorCSS = labelErrorCSS;
+exports.labelFilledValueCSS = labelFilledValueCSS;
+exports.labelFocusCSS = labelFocusCSS;
+exports.labelWarningCSS = labelWarningCSS;
+//# sourceMappingURL=LabelStyles.js.map

package/dist/cjs/input/LabelStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LabelStyles.js","sources":["../../../src/input/LabelStyles.ts"],"sourcesContent":["import styled, { css } from '../utils/styled-components-wrapper.js'\nimport { InputColors } from './types.js'\n\nconst colors = {\n  default: css`\n    color: var(--lido-color-textSecondary);\n  `,\n  accent: css`\n    color: var(--lido-color-accentContrastSecondary);\n  `,\n}\n\nexport const labelEmptyValueCSS = css<{ $color: InputColors }>`\n  ${({ $color }) => colors[$color]}\n\n  transform: scale(1);\n  opacity: 0.5;\n`\n\nexport const labelFilledValueCSS = css<{ $color: InputColors }>`\n  ${({ $color }) => colors[$color]}\n\n  transform: translateY(-14px) scale(0.75);\n  opacity: 1;\n`\n\nexport const labelFocusCSS = css`\n  color: var(--lido-color-primary);\n  opacity: 1;\n`\n\nexport const labelErrorCSS = css`\n  color: var(--lido-color-error);\n`\n\nexport const labelWarningCSS = css`\n  color: var(--lido-color-warning);\n`\n\nexport const InputLabelStyle = styled.span`\n  position: absolute;\n  left: 0;\n  top: 50%;\n  font-size: 1em;\n  line-height: 1.25em;\n  margin: -0.625em 0 0 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\n  color: inherit;\n  transform-origin: 0% 100%;\n  transition: transform ${({ theme }) => theme.duration.fast} ease;\n  transition-property: transform, opacity, color;\n  ${labelFilledValueCSS};\n`\n\nexport const TextareaLabelStyle = styled(InputLabelStyle)`\n  top: 10px;\n`\n"],"names":["colors","default","css","accent","labelEmptyValueCSS","_ref","$color","labelFilledValueCSS","_ref2","labelFocusCSS","labelErrorCSS","labelWarningCSS","InputLabelStyle","styled","span","_ref3","theme","duration","fast","TextareaLabelStyle"],"mappings":";;;;;;;AAGA,MAAMA,MAAM,GAAG;AACbC,EAAAA,OAAO,EAAEC,WAAG,CAAA;AACd;AACA,EAAG,CAAA;AACDC,EAAAA,MAAM,EAAED,WAAG,CAAA;AACb;AACA,EAAA,CAAA;AACA,CAAC,CAAA;AAEM,MAAME,kBAAkB,GAAGF,WAA4B,CAAA;AAC9D,EAAA,EAAIG,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAD,IAAA,CAAA;EAAA,OAAKL,MAAM,CAACM,MAAM,CAAC,CAAA;AAAA,CAAA,CAAA;AAClC;AACA;AACA;AACA,EAAC;AAEM,MAAMC,mBAAmB,GAAGL,WAA4B,CAAA;AAC/D,EAAA,EAAIM,KAAA,IAAA;EAAA,IAAC;AAAEF,IAAAA,MAAAA;AAAO,GAAC,GAAAE,KAAA,CAAA;EAAA,OAAKR,MAAM,CAACM,MAAM,CAAC,CAAA;AAAA,CAAA,CAAA;AAClC;AACA;AACA;AACA,EAAC;AAEM,MAAMG,aAAa,GAAGP,WAAG,CAAA;AAChC;AACA;AACA,EAAC;AAEM,MAAMQ,aAAa,GAAGR,WAAG,CAAA;AAChC;AACA,EAAC;AAEM,MAAMS,eAAe,GAAGT,WAAG,CAAA;AAClC;AACA,EAAC;AAEYU,MAAAA,eAAe,GAAGC,+BAAM,CAACC,IAAI,CAAA;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAA,EAA0BC,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,KAAAA;AAAM,GAAC,GAAAD,KAAA,CAAA;AAAA,EAAA,OAAKC,KAAK,CAACC,QAAQ,CAACC,IAAI,CAAA;AAAA,CAAA,CAAA;AAC5D;AACA,EAAA,EAAIX,mBAAmB,CAAA;AACvB,EAAC;MAEYY,kBAAkB,GAAGN,+BAAM,CAACD,eAAe,CAAC,CAAA;AACzD;AACA;;;;;;;;;;"}

package/dist/cjs/input/OptionsSlider.js

@@ -0,0 +1,50 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const SliderInput = require('./SliderInput.js');
+const jsxRuntime = require('react/jsx-runtime');
+
+const OptionsSlider = _ref => {
+  let {
+    options,
+    value,
+    onChange,
+    ...rest
+  } = _ref;
+  let sliderIndex = options.findIndex(option => option.value === value);
+  if (sliderIndex === -1) {
+    sliderIndex = 0;
+  }
+  const max = options.length - 1;
+  const getLabel = optionIndex => {
+    return options[optionIndex].label;
+  };
+  const handleSliderChange = e => {
+    const optionIndex = Number(e.target.value);
+    onChange(options[optionIndex].value, optionIndex);
+  };
+  const labels = options.map((_ref2, index) => {
+    let {
+      label
+    } = _ref2;
+    return {
+      value: index,
+      label
+    };
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(SliderInput.SliderInput, {
+    min: 0,
+    max: max,
+    value: sliderIndex,
+    onChange: handleSliderChange,
+    getLabel: getLabel,
+    labels: labels,
+    borderNone: true,
+    onLabelClick: optionIndex => onChange(options[optionIndex].value, optionIndex),
+    ...rest
+  });
+};
+
+exports.OptionsSlider = OptionsSlider;
+//# sourceMappingURL=OptionsSlider.js.map