@ntbjs/react-components 2.0.0-rc.6 → 2.0.1-rc.31

package/build/inputs/MultiSelect/MultiSelect.styled.js

@@ -0,0 +1,224 @@
+import styled, { css } from 'styled-components';
+import { applyDefaultTheme } from '../../utils/defaultTheme.js';
+import { ReactComponent as SvgClose } from '../../icons/close.svg.js';
+import Select, { components } from 'react-select';
+import CreatableSelect from 'react-select/creatable';
+import { withAsyncPaginate, AsyncPaginate } from 'react-select-async-paginate';
+
+const AsyncCreatableSelectPaginate = withAsyncPaginate(CreatableSelect);
+const showMoreHeight = 114;
+const sharedStyle = css`
+  font-family: ${props => props.theme.primaryFontFamily};
+  font-size: 12px;
+  font-weight: 400;
+  position: relative;
+`;
+styled.label.attrs(applyDefaultTheme)`
+  ${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'))};
+  flex-basis: 33.33%;
+  font-size: 0.875rem;
+  line-height: 1rem;
+  cursor: pointer;
+  height: 19px;
+  display: flex;
+  align-items: center;
+`;
+const MultiSelect = styled(Select).attrs(applyDefaultTheme)`
+  ${sharedStyle}
+`;
+const CreatableMultiSelect = styled(CreatableSelect).attrs(applyDefaultTheme)`
+  ${sharedStyle}
+`;
+const AsyncCreatableMultiSelect = styled(AsyncCreatableSelectPaginate).attrs(applyDefaultTheme)`
+  ${sharedStyle}
+`;
+const AsyncMultiSelect = styled(AsyncPaginate).attrs(applyDefaultTheme)`
+  ${sharedStyle}
+`;
+const MultiSelectWrapper = styled.div.attrs(applyDefaultTheme)`
+  position: relative;
+`;
+styled(components.Control).attrs(applyDefaultTheme)`
+  && {
+    align-items: flex-start;
+    background: transparent;
+    border: none;
+    box-shadow: none;
+  }
+
+  :hover {
+    cursor: ${props => !props.isDisabled && props.focused || props.readOnly ? 'default' : 'pointer'};
+  }
+`;
+styled(components.ValueContainer)`
+  && {
+    align-items: flex-start;
+    gap: 8px;
+    padding: 0;
+
+    max-height: ${props => {
+  return props.showMore ? props.$error || props.$warning ? '100%' : showMoreHeight + 16 + 'px' : '100%';
+}} !important;
+
+    ${props => (props.$error || props.$warning) && css`
+        border: 1px solid;
+        border-radius: 3px;
+        padding: 4px;
+
+        border-color: ${props => props.$error ? props.theme.getColor('red-500') : props.warning ? props.theme.getColor('orange-500') : 'inherit'};
+      `}
+  }
+`;
+const MultiValueWrapper = styled.div.attrs(applyDefaultTheme)`
+  && {
+    border-radius: 3px;
+    margin: 0;
+  }
+`;
+const MultiValue = styled(components.MultiValue).attrs(applyDefaultTheme)`
+  && {
+    border-radius: 3px;
+    margin: 0;
+
+    ${props => props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-800'))}
+
+    ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-100'))}
+
+    > div {
+      align-items: center;
+      display: flex;
+      font-size: 12px;
+      min-height: 26px;
+
+      :first-of-type {
+        padding: ${props => props.isDisabled || props.readOnly ? '0 8px' : '0 3px 0 8px'};
+      }
+
+      :last-of-type:not(:only-child) {
+        padding: 0 8px 0 5px;
+        height: 100%;
+        width: fit-content;
+      }
+
+      :last-of-type:not(:only-child):hover {
+        background-color: ${props => props.theme.getColor('red-500')};
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+        cursor: pointer;
+      }
+
+      svg {
+        stroke: white;
+        stroke-width: 2px;
+        width: 8px;
+      }
+
+    :hover {
+      cursor: pointer;
+    }
+  }
+`;
+const MultiValueRemove = styled(components.MultiValueRemove).attrs(applyDefaultTheme)``;
+styled(components.Input).attrs(applyDefaultTheme)`
+  align-self: center;
+  font-size: ${props => props.$focused ? '14px' : '12px'};
+  min-width: 150px;
+
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))}
+
+  ${props => !props.$focused && css`
+      ${props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'))}
+
+      :before {
+        height: 100%;
+        white-space: nowrap;
+        width: fit-content;
+        content: '${props => props.edittext}';
+      }
+    `}
+  }
+`;
+const DropdownMenu = styled(components.Menu).attrs(applyDefaultTheme)`
+  font-size: 14px;
+
+  ${props => props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('white'))}
+
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))}
+`;
+const sharedOptionStyle = css`
+  ${props => props.isFocused && css`
+      ${props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200'))}
+    `}
+
+  ${props => props.isSelected && css`
+      ${props.theme.themeProp('background-color', 'transparent', 'transparent')}
+
+      ${props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))}
+    `}
+
+  ${props => props.isFocused && props.isSelected && css`
+      ${props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200'))}
+    `}
+
+  :hover {
+    cursor: pointer;
+  }
+`;
+const Option = styled(components.Option).attrs(applyDefaultTheme)`
+  ${sharedOptionStyle}
+`;
+const SelectedOption = styled(components.Option).attrs(applyDefaultTheme)`
+  ${sharedOptionStyle}
+
+  display: flex !important;
+  justify-content: space-between;
+`;
+const DropdownOptionDeleteIcon = styled(SvgClose).attrs(applyDefaultTheme)`
+  stroke-width: 1px;
+  width: 8px;
+
+  ${props => props.theme.themeProp('stroke', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))}
+`;
+const ShowMoreWrapper = styled.div.attrs(applyDefaultTheme)`
+  align-items: end;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  max-height: ${showMoreHeight + 16}px;
+  top: 0;
+  width: 100%;
+
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('emerald-500'))}
+
+  :hover {
+    cursor: pointer;
+    text-decoration: underline;
+  }
+`;
+const ShowMoreOverlay = styled.div.attrs(applyDefaultTheme)`
+  align-items: end;
+  display: block;
+  height: 100%;
+  max-height: ${showMoreHeight}px;
+  left: 0;
+  top: 0;
+  width: 100%;
+
+  ${props => props.theme.themeProp('background', 'transparent linear-gradient(180deg, #12121200 0%, #12121230 40%, #12121279 70%, #121212 95%, #121212 100%) 0% 0% no-repeat padding-box', 'transparent linear-gradient(180deg, #fefefe00 0%, #fefefe30 40%, #fefefe79 70%, #fefefe 95%, #fefefe 100%) 0% 0% no-repeat padding-box')}
+`;
+const ShowMoreText = styled.div.attrs(applyDefaultTheme)`
+  font-size: 0.875rem;
+  width: 100%;
+  ${props => props.theme.themeProp('background-color', '#121212', '#fefefe')}
+`;
+const ErrorMessage = styled.div.attrs(applyDefaultTheme)`
+  color: ${props => props.$error ? props.theme.getColor('red-500') : props.$warning ? props.theme.getColor('orange-500') : 'inherit'};
+  font-size: 0.75rem;
+  margin-top: 8px;
+  padding: 0 12px;
+`;
+
+export { AsyncCreatableMultiSelect, AsyncMultiSelect, CreatableMultiSelect, DropdownMenu, DropdownOptionDeleteIcon, ErrorMessage, MultiSelect, MultiSelectWrapper, MultiValue, MultiValueRemove, MultiValueWrapper, Option, SelectedOption, ShowMoreOverlay, ShowMoreText, ShowMoreWrapper };
+//# sourceMappingURL=MultiSelect.styled.js.map

package/build/inputs/MultiSelect/MultiSelect.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.styled.js","sources":["../../../src/components/inputs/MultiSelect/MultiSelect.styled.js"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nimport { ReactComponent as CloseIcon } from '../../../icons/close.svg';\n\nimport Select from 'react-select';\nimport CreatableSelect from 'react-select/creatable';\nimport { AsyncPaginate, withAsyncPaginate } from 'react-select-async-paginate';\nimport { components } from 'react-select';\n\nconst AsyncCreatableSelectPaginate = withAsyncPaginate(CreatableSelect);\n\nconst showMoreHeight = 114;\n\nconst sharedStyle = css`\n  font-family: ${props => props.theme.primaryFontFamily};\n  font-size: 12px;\n  font-weight: 400;\n  position: relative;\n`;\n\nexport const Label = styled.label.attrs(applyDefaultTheme)`\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('white'),\n      props.theme.getColor('gray-700')\n    )};\n  flex-basis: 33.33%;\n  font-size: 0.875rem;\n  line-height: 1rem;\n  cursor: pointer;\n  height: 19px;\n  display: flex;\n  align-items: center;\n`;\n\nexport const MultiSelect = styled(Select).attrs(applyDefaultTheme)`\n  ${sharedStyle}\n`;\n\nexport const CreatableMultiSelect = styled(CreatableSelect).attrs(applyDefaultTheme)`\n  ${sharedStyle}\n`;\n\nexport const AsyncCreatableMultiSelect = styled(AsyncCreatableSelectPaginate).attrs(\n  applyDefaultTheme\n)`\n  ${sharedStyle}\n`;\n\nexport const AsyncMultiSelect = styled(AsyncPaginate).attrs(applyDefaultTheme)`\n  ${sharedStyle}\n`;\n\nexport const MultiSelectWrapper = styled.div.attrs(applyDefaultTheme)`\n  position: relative;\n`;\n\nexport const Control = styled(components.Control).attrs(applyDefaultTheme)`\n  && {\n    align-items: flex-start;\n    background: transparent;\n    border: none;\n    box-shadow: none;\n  }\n\n  :hover {\n    cursor: ${props =>\n      (!props.isDisabled && props.focused) || props.readOnly ? 'default' : 'pointer'};\n  }\n`;\n\nexport const ValueContainer = styled(components.ValueContainer)`\n  && {\n    align-items: flex-start;\n    gap: 8px;\n    padding: 0;\n\n    max-height: ${props => {\n      return props.showMore\n        ? props.$error || props.$warning\n          ? '100%'\n          : showMoreHeight + 16 + 'px'\n        : '100%';\n    }} !important;\n\n    ${props =>\n      (props.$error || props.$warning) &&\n      css`\n        border: 1px solid;\n        border-radius: 3px;\n        padding: 4px;\n\n        border-color: ${props =>\n          props.$error\n            ? props.theme.getColor('red-500')\n            : props.warning\n              ? props.theme.getColor('orange-500')\n              : 'inherit'};\n      `}\n  }\n`;\n\nexport const MultiValueWrapper = styled.div.attrs(applyDefaultTheme)`\n  && {\n    border-radius: 3px;\n    margin: 0;\n  }\n`;\n\nexport const MultiValue = styled(components.MultiValue).attrs(applyDefaultTheme)`\n  && {\n    border-radius: 3px;\n    margin: 0;\n\n    ${props =>\n      props.theme.themeProp(\n        'background-color',\n        props.theme.getColor('gray-600'),\n        props.theme.getColor('gray-800')\n      )}\n\n    ${props =>\n      props.theme.themeProp(\n        'color',\n        props.theme.getColor('gray-100'),\n        props.theme.getColor('gray-100')\n      )}\n\n    > div {\n      align-items: center;\n      display: flex;\n      font-size: 12px;\n      min-height: 26px;\n\n      :first-of-type {\n        padding: ${props => (props.isDisabled || props.readOnly ? '0 8px' : '0 3px 0 8px')};\n      }\n\n      :last-of-type:not(:only-child) {\n        padding: 0 8px 0 5px;\n        height: 100%;\n        width: fit-content;\n      }\n\n      :last-of-type:not(:only-child):hover {\n        background-color: ${props => props.theme.getColor('red-500')};\n        border-bottom-left-radius: 0;\n        border-top-left-radius: 0;\n        cursor: pointer;\n      }\n\n      svg {\n        stroke: white;\n        stroke-width: 2px;\n        width: 8px;\n      }\n\n    :hover {\n      cursor: pointer;\n    }\n  }\n`;\n\nexport const MultiValueRemove = styled(components.MultiValueRemove).attrs(applyDefaultTheme)``;\n\nexport const Input = styled(components.Input).attrs(applyDefaultTheme)`\n  align-self: center;\n  font-size: ${props => (props.$focused ? '14px' : '12px')};\n  min-width: 150px;\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-100'),\n      props.theme.getColor('gray-900')\n    )}\n\n  ${props =>\n    !props.$focused &&\n    css`\n      ${props =>\n        props.theme.themeProp(\n          'color',\n          props.theme.getColor('gray-400'),\n          props.theme.getColor('gray-500')\n        )}\n\n      :before {\n        height: 100%;\n        white-space: nowrap;\n        width: fit-content;\n        content: '${props => props.edittext}';\n      }\n    `}\n  }\n`;\n\nexport const DropdownMenu = styled(components.Menu).attrs(applyDefaultTheme)`\n  font-size: 14px;\n\n  ${props =>\n    props.theme.themeProp(\n      'background-color',\n      props.theme.getColor('gray-600'),\n      props.theme.getColor('white')\n    )}\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-100'),\n      props.theme.getColor('gray-900')\n    )}\n`;\n\nconst sharedOptionStyle = css`\n  ${props =>\n    props.isFocused &&\n    css`\n      ${props.theme.themeProp(\n        'background-color',\n        props.theme.getColor('gray-500'),\n        props.theme.getColor('gray-200')\n      )}\n    `}\n\n  ${props =>\n    props.isSelected &&\n    css`\n      ${props.theme.themeProp('background-color', 'transparent', 'transparent')}\n\n      ${props.theme.themeProp(\n        'color',\n        props.theme.getColor('gray-100'),\n        props.theme.getColor('gray-900')\n      )}\n    `}\n\n  ${props =>\n    props.isFocused &&\n    props.isSelected &&\n    css`\n      ${props.theme.themeProp(\n        'background-color',\n        props.theme.getColor('gray-500'),\n        props.theme.getColor('gray-200')\n      )}\n    `}\n\n  :hover {\n    cursor: pointer;\n  }\n`;\n\nexport const Option = styled(components.Option).attrs(applyDefaultTheme)`\n  ${sharedOptionStyle}\n`;\n\nexport const SelectedOption = styled(components.Option).attrs(applyDefaultTheme)`\n  ${sharedOptionStyle}\n\n  display: flex !important;\n  justify-content: space-between;\n`;\n\nexport const DropdownOptionDeleteIcon = styled(CloseIcon).attrs(applyDefaultTheme)`\n  stroke-width: 1px;\n  width: 8px;\n\n  ${props =>\n    props.theme.themeProp(\n      'stroke',\n      props.theme.getColor('gray-100'),\n      props.theme.getColor('gray-900')\n    )}\n`;\n\nexport const ShowMoreWrapper = styled.div.attrs(applyDefaultTheme)`\n  align-items: end;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  max-height: ${showMoreHeight + 16}px;\n  top: 0;\n  width: 100%;\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-100'),\n      props.theme.getColor('emerald-500')\n    )}\n\n  :hover {\n    cursor: pointer;\n    text-decoration: underline;\n  }\n`;\n\nexport const ShowMoreOverlay = styled.div.attrs(applyDefaultTheme)`\n  align-items: end;\n  display: block;\n  height: 100%;\n  max-height: ${showMoreHeight}px;\n  left: 0;\n  top: 0;\n  width: 100%;\n\n  ${props =>\n    props.theme.themeProp(\n      'background',\n      'transparent linear-gradient(180deg, #12121200 0%, #12121230 40%, #12121279 70%, #121212 95%, #121212 100%) 0% 0% no-repeat padding-box',\n      'transparent linear-gradient(180deg, #fefefe00 0%, #fefefe30 40%, #fefefe79 70%, #fefefe 95%, #fefefe 100%) 0% 0% no-repeat padding-box'\n    )}\n`;\n\nexport const ShowMoreText = styled.div.attrs(applyDefaultTheme)`\n  font-size: 0.875rem;\n  width: 100%;\n  ${props => props.theme.themeProp('background-color', '#121212', '#fefefe')}\n`;\n\nexport const ErrorMessage = styled.div.attrs(applyDefaultTheme)`\n  color: ${props =>\n    props.$error\n      ? props.theme.getColor('red-500')\n      : props.$warning\n        ? props.theme.getColor('orange-500')\n        : 'inherit'};\n  font-size: 0.75rem;\n  margin-top: 8px;\n  padding: 0 12px;\n`;\n"],"names":["AsyncCreatableSelectPaginate","withAsyncPaginate","CreatableSelect","showMoreHeight","sharedStyle","css","props","theme","primaryFontFamily","styled","label","attrs","applyDefaultTheme","themeProp","getColor","MultiSelect","Select","CreatableMultiSelect","AsyncCreatableMultiSelect","AsyncMultiSelect","AsyncPaginate","MultiSelectWrapper","div","components","Control","isDisabled","focused","readOnly","ValueContainer","showMore","$error","$warning","warning","MultiValueWrapper","MultiValue","MultiValueRemove","Input","$focused","edittext","DropdownMenu","Menu","sharedOptionStyle","isFocused","isSelected","Option","SelectedOption","DropdownOptionDeleteIcon","CloseIcon","ShowMoreWrapper","ShowMoreOverlay","ShowMoreText","ErrorMessage"],"mappings":"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"}

package/build/inputs/MultiSelect/index.js

@@ -0,0 +1,2 @@
+export { default } from './MultiSelect.js';
+//# sourceMappingURL=index.js.map

package/build/inputs/MultiSelect/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/build/inputs/Radio/Radio.js

@@ -0,0 +1,60 @@
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useState } from 'react';
+import { nanoid } from 'nanoid';
+import PropTypes from 'prop-types';
+import { Radio as Radio$1, RadioLabel } from './Radio.styled.js';
+
+const Radio = React__default.forwardRef(function Radio({
+  name,
+  value,
+  checked,
+  defaultChecked,
+  disabled,
+  readOnly,
+  label,
+  className,
+  style,
+  onChange,
+  onBlur,
+  ...rest
+}, forwardedRef) {
+  const [uniqueId] = useState(nanoid());
+  return React__default.createElement(Radio$1, {
+    htmlFor: uniqueId,
+    disabled: disabled,
+    readOnly: readOnly,
+    className: className,
+    style: style
+  }, React__default.createElement("input", _extends({
+    ref: forwardedRef,
+    type: "radio",
+    name: name,
+    value: value,
+    checked: checked,
+    defaultChecked: defaultChecked,
+    disabled: disabled,
+    readOnly: readOnly,
+    id: uniqueId,
+    onChange: onChange,
+    onBlur: onBlur
+  }, rest)), React__default.createElement(RadioLabel, null, label));
+});
+Radio.propTypes = process.env.NODE_ENV !== "production" ? {
+  label: PropTypes.any,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.any.isRequired,
+  checked: PropTypes.bool,
+  defaultChecked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  className: PropTypes.string,
+  style: PropTypes.object,
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func
+} : {};
+Radio.defaultProps = {
+  disabled: false
+};
+
+export { Radio as default };
+//# sourceMappingURL=Radio.js.map

package/build/inputs/Radio/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","sources":["../../../src/components/inputs/Radio/Radio.js"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { nanoid } from 'nanoid';\nimport PropTypes from 'prop-types';\n\nimport * as S from './Radio.styled';\n\n/**\n * Radio buttons allow the user to select one option from a set.\n *\n * Use radio buttons when the user needs to see all available options. If available options can be\n * collapsed, consider using a dropdown menu because it uses less space.\n *\n * Radio buttons should have the most commonly used option selected by default.\n *\n * ### Import\n *\n * ``` js\n * import { Radio } from '@ntbjs/react-components/inputs'\n * // or\n * import Radio from '@ntbjs/react-components/inputs/Radio'\n * ```\n */\nconst Radio = React.forwardRef(function Radio(\n  {\n    name,\n    value,\n    checked,\n    defaultChecked,\n    disabled,\n    readOnly,\n    label,\n    className,\n    style,\n    onChange,\n    onBlur,\n    ...rest\n  },\n  forwardedRef\n) {\n  const [uniqueId] = useState(nanoid());\n\n  return (\n    <S.Radio\n      htmlFor={uniqueId}\n      disabled={disabled}\n      readOnly={readOnly}\n      className={className}\n      style={style}\n    >\n      <input\n        ref={forwardedRef}\n        type=\"radio\"\n        name={name}\n        value={value}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        readOnly={readOnly}\n        id={uniqueId}\n        onChange={onChange}\n        onBlur={onBlur}\n        {...rest}\n      />\n      <S.RadioLabel>{label}</S.RadioLabel>\n    </S.Radio>\n  );\n});\n\nRadio.propTypes = {\n  /**\n   * Text displayed by the radio button\n   */\n  label: PropTypes.any,\n\n  /**\n   * Name of the radio button (used when sending form data)\n   */\n  name: PropTypes.string.isRequired,\n\n  /**\n   * Value to be sent when the given radio button is selected\n   */\n  value: PropTypes.any.isRequired,\n\n  /**\n   * Whether the radio button is checked\n   */\n  checked: PropTypes.bool,\n\n  /**\n   * Whether the radio button is checked by default. The most commonly used option should have this set to `true`.\n   */\n  defaultChecked: PropTypes.bool,\n\n  /**\n   * Whether the radio button is disabled\n   */\n  disabled: PropTypes.bool,\n\n  /**\n   * Display the radio button as read-only\n   */\n  readOnly: PropTypes.bool,\n\n  /**\n   * Custom class names for the HTML element\n   */\n  className: PropTypes.string,\n\n  /**\n   * Custom inline CSS styling\n   */\n  style: PropTypes.object,\n\n  /**\n   * Optional callback function for the `onChange` event\n   */\n  onChange: PropTypes.func,\n\n  /**\n   * Optional callback function for the `onBlur` event\n   */\n  onBlur: PropTypes.func\n};\n\nRadio.defaultProps = {\n  disabled: false\n};\n\nexport default Radio;\n"],"names":["Radio","React","forwardRef","name","value","checked","defaultChecked","disabled","readOnly","label","className","style","onChange","onBlur","rest","forwardedRef","uniqueId","useState","nanoid","createElement","S","htmlFor","_extends","ref","type","id","propTypes","process","env","NODE_ENV","PropTypes","any","string","isRequired","bool","object","func","defaultProps"],"mappings":";;;;;;AAuBMA,MAAAA,KAAK,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,KAAKA,CAC3C;EACEG,IAAI;EACJC,KAAK;EACLC,OAAO;EACPC,cAAc;EACdC,QAAQ;EACRC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,KAAK;EACLC,QAAQ;EACRC,MAAM;EACN,GAAGC,IAAAA;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAM,CAACC,QAAQ,CAAC,GAAGC,QAAQ,CAACC,MAAM,EAAE,CAAC,CAAA;AAErC,EAAA,OACEjB,cAAA,CAAAkB,aAAA,CAACC,OAAO,EAAA;AACNC,IAAAA,OAAO,EAAEL,QAAS;AAClBT,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBE,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,KAAK,EAAEA,KAAAA;AAAM,GAAA,EAEbV,cAAA,CAAAkB,aAAA,CAAA,OAAA,EAAAG,QAAA,CAAA;AACEC,IAAAA,GAAG,EAAER,YAAa;AAClBS,IAAAA,IAAI,EAAC,OAAO;AACZrB,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,cAAc,EAAEA,cAAe;AAC/BC,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBiB,IAAAA,EAAE,EAAET,QAAS;AACbJ,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,MAAM,EAAEA,MAAAA;AAAO,GAAA,EACXC,IAAI,CACT,CAAC,EACFb,cAAA,CAAAkB,aAAA,CAACC,UAAY,EAAEX,IAAAA,EAAAA,KAAoB,CAC5B,CAAC,CAAA;AAEd,CAAC,EAAC;AAEFT,KAAK,CAAC0B,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;EAIhBpB,KAAK,EAAEqB,SAAS,CAACC,GAAG;AAKpB5B,EAAAA,IAAI,EAAE2B,SAAS,CAACE,MAAM,CAACC,UAAU;AAKjC7B,EAAAA,KAAK,EAAE0B,SAAS,CAACC,GAAG,CAACE,UAAU;EAK/B5B,OAAO,EAAEyB,SAAS,CAACI,IAAI;EAKvB5B,cAAc,EAAEwB,SAAS,CAACI,IAAI;EAK9B3B,QAAQ,EAAEuB,SAAS,CAACI,IAAI;EAKxB1B,QAAQ,EAAEsB,SAAS,CAACI,IAAI;EAKxBxB,SAAS,EAAEoB,SAAS,CAACE,MAAM;EAK3BrB,KAAK,EAAEmB,SAAS,CAACK,MAAM;EAKvBvB,QAAQ,EAAEkB,SAAS,CAACM,IAAI;EAKxBvB,MAAM,EAAEiB,SAAS,CAACM,IAAAA;AACpB,CAAC,GAAA,EAAA,CAAA;AAEDpC,KAAK,CAACqC,YAAY,GAAG;AACnB9B,EAAAA,QAAQ,EAAE,KAAA;AACZ,CAAC;;;;"}

package/{esm/components → build}/inputs/Radio/Radio.styled.js

@@ -1,33 +1,35 @@
 import { math } from 'polished';
 import styled, { css } from 'styled-components';
-import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
+import { applyDefaultTheme } from '../../utils/defaultTheme.js';
 
-let _ = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4;
 const radioSize = '18px';
-const RadioLabel = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
-  padding-left: ${0};
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const RadioLabel = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
+  padding-left: ${math(`${radioSize} + 10px`)};
   font-weight: 400;
   font-size: 0.875rem;
 
-  ${0};
-`), math(`${radioSize} + 10px`), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600')));
-const Radio = styled.label.attrs(applyDefaultTheme)(_t2 || (_t2 = _`
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'))};
+`;
+const Radio = styled.label.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
   display: block;
   position: relative;
   cursor: pointer;
-  line-height: ${0};
+  line-height: ${radioSize};
   user-select: none;
 
   &::before {
     content: '';
     position: absolute;
-    border: 2px solid ${0};
-    width: ${0};
-    height: ${0};
+    border: 2px solid ${props => props.theme.getColor('gray-300')};
+    width: ${radioSize};
+    height: ${radioSize};
     top: 0;
     border-radius: 50%;
     transition: all 200ms;
@@ -48,15 +50,15 @@ const Radio = styled.label.attrs(applyDefaultTheme)(_t2 || (_t2 = _`
 
   &:has(input:checked) {
     ::before {
-      border-color: ${0};
+      border-color: ${props => props.theme.getColor('emerald-500')};
     }
 
     ::after {
-      background: ${0};
+      background: ${props => props.theme.getColor('emerald-500')};
       transform: scale(1);
     }
 
-    ${0} {
+    ${RadioLabel} {
       opacity: 1;
     }
   }
@@ -68,17 +70,18 @@ const Radio = styled.label.attrs(applyDefaultTheme)(_t2 || (_t2 = _`
     }
   }
 
-  ${0}
-
-  ${0}
-`), radioSize, props => props.theme.getColor('gray-300'), radioSize, radioSize, props => props.theme.getColor('emerald-500'), props => props.theme.getColor('emerald-500'), RadioLabel, props => props.readOnly && css(_t3 || (_t3 = _`
+  ${props => props.readOnly && css`
       opacity: 0.5;
       pointer-events: none;
       user-select: text;
-    `)), props => props.disabled && css(_t4 || (_t4 = _`
+    `}
+
+  ${props => props.disabled && css`
       opacity: 0.5;
       cursor: not-allowed;
       user-select: text;
-    `)));
+    `}
+`;
 
 export { Radio, RadioLabel };
+//# sourceMappingURL=Radio.styled.js.map

package/build/inputs/Radio/Radio.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.styled.js","sources":["../../../src/components/inputs/Radio/Radio.styled.js"],"sourcesContent":["import { math } from 'polished';\nimport styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nconst radioSize = '18px';\n\nconst shouldForwardProp = prop => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const RadioLabel = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  padding-left: ${math(`${radioSize} + 10px`)};\n  font-weight: 400;\n  font-size: 0.875rem;\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-300'),\n      props.theme.getColor('gray-600')\n    )};\n`;\n\nexport const Radio = styled.label\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: block;\n  position: relative;\n  cursor: pointer;\n  line-height: ${radioSize};\n  user-select: none;\n\n  &::before {\n    content: '';\n    position: absolute;\n    border: 2px solid ${props => props.theme.getColor('gray-300')};\n    width: ${radioSize};\n    height: ${radioSize};\n    top: 0;\n    border-radius: 50%;\n    transition: all 200ms;\n    box-sizing: border-box;\n  }\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    top: 5px;\n    left: 5px;\n    border-radius: 50%;\n    transform: scale(0);\n    transition: all 200ms;\n  }\n\n  &:has(input:checked) {\n    ::before {\n      border-color: ${props => props.theme.getColor('emerald-500')};\n    }\n\n    ::after {\n      background: ${props => props.theme.getColor('emerald-500')};\n      transform: scale(1);\n    }\n\n    ${RadioLabel} {\n      opacity: 1;\n    }\n  }\n  & {\n    input[type='radio'] {\n      position: absolute;\n      opacity: 0;\n      pointer-events: none;\n    }\n  }\n\n  ${props =>\n    props.readOnly &&\n    css`\n      opacity: 0.5;\n      pointer-events: none;\n      user-select: text;\n    `}\n\n  ${props =>\n    props.disabled &&\n    css`\n      opacity: 0.5;\n      cursor: not-allowed;\n      user-select: text;\n    `}\n`;\n"],"names":["radioSize","shouldForwardProp","prop","startsWith","RadioLabel","styled","div","withConfig","attrs","applyDefaultTheme","math","props","theme","themeProp","getColor","Radio","label","readOnly","css","disabled"],"mappings":";;;;AAIA,MAAMA,SAAS,GAAG,MAAM,CAAA;AAExB,MAAMC,iBAAiB,GAAGC,IAAI,IAAI;EAChC,OAAOA,IAAI,KAAK,OAAO,IAAI,CAACA,IAAI,CAACC,UAAU,CAAC,GAAG,CAAC,CAAA;AAClD,CAAC,CAAA;AAEM,MAAMC,UAAU,GAAGC,MAAM,CAACC,GAAG,CACjCC,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B,gBAAA,EAAkBC,IAAI,CAAC,CAAGV,EAAAA,SAAS,SAAS,CAAC,CAAA;AAC7C;AACA;AACA;AACA,EAAIW,EAAAA,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,OAAO,EACPF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AACL,EAAC;AAEM,MAAMC,KAAK,GAAGV,MAAM,CAACW,KAAK,CAC9BT,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B;AACA;AACA;AACA,eAAA,EAAiBT,SAAS,CAAA;AAC1B;AACA;AACA;AACA;AACA;AACA,sBAAwBW,EAAAA,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,CAAA;AACjE,WAAA,EAAad,SAAS,CAAA;AACtB,YAAA,EAAcA,SAAS,CAAA;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAsBW,EAAAA,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,aAAa,CAAC,CAAA;AAClE;AACA;AACA;AACA,kBAAoBH,EAAAA,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,aAAa,CAAC,CAAA;AAChE;AACA;AACA;AACA,IAAA,EAAMV,UAAU,CAAA;AAChB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIO,KAAK,IACLA,KAAK,CAACM,QAAQ,IACdC,GAAG,CAAA;AACP;AACA;AACA;AACA,IAAK,CAAA,CAAA;AACL;AACA,EAAA,EAAIP,KAAK,IACLA,KAAK,CAACQ,QAAQ,IACdD,GAAG,CAAA;AACP;AACA;AACA;AACA,IAAK,CAAA,CAAA;AACL;;;;"}

package/build/inputs/Radio/index.js

@@ -0,0 +1,2 @@
+export { default } from './Radio.js';
+//# sourceMappingURL=index.js.map

package/build/inputs/Radio/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/{esm/components → build}/inputs/Switch/Switch.js

@@ -1,10 +1,9 @@
-import React from '../../../node_modules/react/index.js';
+import React__default, { useState } from 'react';
 import { nanoid } from 'nanoid';
-import PropTypes from '../../../node_modules/prop-types/index.js';
-import { Switch as Switch$2, SwitchLabel, SwitchIndicator, SwitchIndicatorButton, SwitchIndicatorLabelText, Description } from './Switch.styled.js';
-import { r as react } from '../../../_virtual/index.js';
+import PropTypes from 'prop-types';
+import { Switch as Switch$1, SwitchLabel, SwitchIndicator, SwitchIndicatorButton, SwitchIndicatorLabelText, Description } from './Switch.styled.js';
 
-const Switch = React.forwardRef(function Switch({
+const Switch = React__default.forwardRef(function Switch({
   name,
   checked,
   defaultChecked,
@@ -18,15 +17,15 @@ const Switch = React.forwardRef(function Switch({
   onChange,
   onBlur
 }, forwardedRef) {
-  const [uniqueId] = react.exports.useState(nanoid());
-  return React.createElement(Switch$2, {
+  const [uniqueId] = useState(nanoid());
+  return React__default.createElement(Switch$1, {
     disabled: disabled,
     readOnly: readOnly,
     className: className,
     style: style
-  }, React.createElement(SwitchLabel, {
+  }, React__default.createElement(SwitchLabel, {
     htmlFor: uniqueId
-  }, React.createElement("input", {
+  }, React__default.createElement("input", {
     ref: forwardedRef,
     checked: checked,
     defaultChecked: defaultChecked,
@@ -37,8 +36,8 @@ const Switch = React.forwardRef(function Switch({
     type: "checkbox",
     onBlur: onBlur,
     onChange: onChange
-  }), React.createElement(SwitchIndicator, null, React.createElement(SwitchIndicatorButton, null)), typeof label === 'string' && label.length > 0 && React.createElement(SwitchIndicatorLabelText, null, label)), typeof description === 'string' && description.length > 0 && React.createElement(Description, {
-    spaciousDescription: spaciousDescription
+  }), React__default.createElement(SwitchIndicator, null, React__default.createElement(SwitchIndicatorButton, null)), typeof label === 'string' && label.length > 0 && React__default.createElement(SwitchIndicatorLabelText, null, label)), typeof description === 'string' && description.length > 0 && React__default.createElement(Description, {
+    $spaciousdescription: spaciousDescription
   }, description));
 });
 Switch.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -60,6 +59,6 @@ Switch.defaultProps = {
   disabled: false,
   readOnly: false
 };
-var Switch$1 = Switch;
 
-export { Switch$1 as default };
+export { Switch as default };
+//# sourceMappingURL=Switch.js.map

package/build/inputs/Switch/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","sources":["../../../src/components/inputs/Switch/Switch.js"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { nanoid } from 'nanoid';\nimport PropTypes from 'prop-types';\n\nimport * as S from './Switch.styled';\n\n/**\n * The Switch allows the user to toggle an option.\n *\n * ### Import\n *\n * ``` js\n * import { Switch } from '@ntbjs/react-components/inputs'\n * // or\n * import Switch from '@ntbjs/react-components/inputs/Switch'\n * ```\n */\nconst Switch = React.forwardRef(function Switch(\n  {\n    name,\n    checked,\n    defaultChecked,\n    label,\n    disabled,\n    readOnly,\n    description,\n    spaciousDescription,\n    className,\n    style,\n    onChange,\n    onBlur\n  },\n  forwardedRef\n) {\n  const [uniqueId] = useState(nanoid());\n\n  return (\n    <S.Switch disabled={disabled} readOnly={readOnly} className={className} style={style}>\n      <S.SwitchLabel htmlFor={uniqueId}>\n        <input\n          ref={forwardedRef}\n          checked={checked}\n          defaultChecked={defaultChecked}\n          disabled={disabled}\n          readOnly={readOnly}\n          id={uniqueId}\n          name={name}\n          type=\"checkbox\"\n          onBlur={onBlur}\n          onChange={onChange}\n        />\n        <S.SwitchIndicator>\n          <S.SwitchIndicatorButton />\n        </S.SwitchIndicator>\n        {typeof label === 'string' && label.length > 0 && (\n          <S.SwitchIndicatorLabelText>{label}</S.SwitchIndicatorLabelText>\n        )}\n      </S.SwitchLabel>\n      {typeof description === 'string' && description.length > 0 && (\n        <S.Description $spaciousdescription={spaciousDescription}>{description}</S.Description>\n      )}\n    </S.Switch>\n  );\n});\n\nSwitch.propTypes = {\n  children: PropTypes.any,\n  name: PropTypes.string.isRequired,\n\n  /**\n   * Whether the switch is toggled on or off\n   */\n  checked: PropTypes.bool,\n\n  /**\n   * Whether the switch is toggled on by default\n   */\n  defaultChecked: PropTypes.bool,\n\n  /**\n   * Text displayed next to the switch\n   */\n  label: PropTypes.string,\n\n  /**\n   * Whether the switch is toggled on\n   */\n  disabled: PropTypes.bool,\n\n  /**\n   * Whether the switch is displayed as read-only\n   */\n  readOnly: PropTypes.bool,\n\n  /**\n   * Text displayed underneath the switch\n   */\n  description: PropTypes.string,\n\n  /**\n   * Whether there should be extra `margin` added between the switch and the description\n   */\n  spaciousDescription: PropTypes.bool,\n\n  /**\n   * Add extra classes to the HTML element\n   */\n  className: PropTypes.string,\n\n  /**\n   * Custom CSS styling\n   */\n  style: PropTypes.object,\n\n  /**\n   * Optional callback function for the `onChange` event\n   */\n  onChange: PropTypes.func,\n\n  /**\n   * Optional callback function for the `onBlur` event\n   */\n  onBlur: PropTypes.func\n};\n\nSwitch.defaultProps = {\n  disabled: false,\n  readOnly: false\n};\n\nexport default Switch;\n"],"names":["Switch","React","forwardRef","name","checked","defaultChecked","label","disabled","readOnly","description","spaciousDescription","className","style","onChange","onBlur","forwardedRef","uniqueId","useState","nanoid","createElement","S","htmlFor","ref","id","type","length","$spaciousdescription","propTypes","process","env","NODE_ENV","children","PropTypes","any","string","isRequired","bool","object","func","defaultProps"],"mappings":";;;;;AAkBMA,MAAAA,MAAM,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,MAAMA,CAC7C;EACEG,IAAI;EACJC,OAAO;EACPC,cAAc;EACdC,KAAK;EACLC,QAAQ;EACRC,QAAQ;EACRC,WAAW;EACXC,mBAAmB;EACnBC,SAAS;EACTC,KAAK;EACLC,QAAQ;AACRC,EAAAA,MAAAA;AACF,CAAC,EACDC,YAAY,EACZ;EACA,MAAM,CAACC,QAAQ,CAAC,GAAGC,QAAQ,CAACC,MAAM,EAAE,CAAC,CAAA;AAErC,EAAA,OACEjB,cAAA,CAAAkB,aAAA,CAACC,QAAQ,EAAA;AAACb,IAAAA,QAAQ,EAAEA,QAAS;AAACC,IAAAA,QAAQ,EAAEA,QAAS;AAACG,IAAAA,SAAS,EAAEA,SAAU;AAACC,IAAAA,KAAK,EAAEA,KAAAA;AAAM,GAAA,EACnFX,cAAA,CAAAkB,aAAA,CAACC,WAAa,EAAA;AAACC,IAAAA,OAAO,EAAEL,QAAAA;GACtBf,EAAAA,cAAA,CAAAkB,aAAA,CAAA,OAAA,EAAA;AACEG,IAAAA,GAAG,EAAEP,YAAa;AAClBX,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,cAAc,EAAEA,cAAe;AAC/BE,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBe,IAAAA,EAAE,EAAEP,QAAS;AACbb,IAAAA,IAAI,EAAEA,IAAK;AACXqB,IAAAA,IAAI,EAAC,UAAU;AACfV,IAAAA,MAAM,EAAEA,MAAO;AACfD,IAAAA,QAAQ,EAAEA,QAAAA;AAAS,GACpB,CAAC,EACFZ,cAAA,CAAAkB,aAAA,CAACC,eAAiB,EAAA,IAAA,EAChBnB,cAAA,CAAAkB,aAAA,CAACC,qBAAuB,EAAA,IAAE,CACT,CAAC,EACnB,OAAOd,KAAK,KAAK,QAAQ,IAAIA,KAAK,CAACmB,MAAM,GAAG,CAAC,IAC5CxB,cAAA,CAAAkB,aAAA,CAACC,wBAA0B,EAAA,IAAA,EAAEd,KAAkC,CAEpD,CAAC,EACf,OAAOG,WAAW,KAAK,QAAQ,IAAIA,WAAW,CAACgB,MAAM,GAAG,CAAC,IACxDxB,cAAA,CAAAkB,aAAA,CAACC,WAAa,EAAA;AAACM,IAAAA,oBAAoB,EAAEhB,mBAAAA;GAAsBD,EAAAA,WAA2B,CAEhF,CAAC,CAAA;AAEf,CAAC,EAAC;AAEFT,MAAM,CAAC2B,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;EACjBC,QAAQ,EAAEC,SAAS,CAACC,GAAG;AACvB9B,EAAAA,IAAI,EAAE6B,SAAS,CAACE,MAAM,CAACC,UAAU;EAKjC/B,OAAO,EAAE4B,SAAS,CAACI,IAAI;EAKvB/B,cAAc,EAAE2B,SAAS,CAACI,IAAI;EAK9B9B,KAAK,EAAE0B,SAAS,CAACE,MAAM;EAKvB3B,QAAQ,EAAEyB,SAAS,CAACI,IAAI;EAKxB5B,QAAQ,EAAEwB,SAAS,CAACI,IAAI;EAKxB3B,WAAW,EAAEuB,SAAS,CAACE,MAAM;EAK7BxB,mBAAmB,EAAEsB,SAAS,CAACI,IAAI;EAKnCzB,SAAS,EAAEqB,SAAS,CAACE,MAAM;EAK3BtB,KAAK,EAAEoB,SAAS,CAACK,MAAM;EAKvBxB,QAAQ,EAAEmB,SAAS,CAACM,IAAI;EAKxBxB,MAAM,EAAEkB,SAAS,CAACM,IAAAA;AACpB,CAAC,GAAA,EAAA,CAAA;AAEDtC,MAAM,CAACuC,YAAY,GAAG;AACpBhC,EAAAA,QAAQ,EAAE,KAAK;AACfC,EAAAA,QAAQ,EAAE,KAAA;AACZ,CAAC;;;;"}

package/build/inputs/Switch/Switch.styled.js

@@ -0,0 +1,117 @@
+import { math, rgba } from 'polished';
+import styled, { css } from 'styled-components';
+import { applyDefaultTheme } from '../../utils/defaultTheme.js';
+
+const switchButtonSize = '16px';
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const Switch = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
+  * {
+    box-sizing: border-box;
+  }
+
+  display: flex;
+  flex-direction: column;
+
+  ${props => props.readOnly && css`
+      opacity: 0.5;
+      > * {
+        pointer-events: none;
+        user-select: text;
+      }
+    `}
+
+  ${props => props.disabled && css`
+      opacity: 0.5;
+      cursor: not-allowed;
+      * {
+        pointer-events: none;
+        user-select: text;
+      }
+    `}
+`;
+const SwitchIndicator = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
+  display: inline-block;
+  position: relative;
+  ${props => props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('gray-200'))}
+  height: ${math(`${switchButtonSize} + 2px`)};
+  width: 32px;
+  border-radius: 20px;
+  border: 1px solid;
+  ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-300'))}
+  transition: background 200ms;
+`;
+const SwitchIndicatorButton = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
+  position: absolute;
+  ${props => props.theme.themeProp('background', props.theme.getColor('gray-200'), props.theme.getColor('white'))}
+  height: ${switchButtonSize};
+  width: ${switchButtonSize};
+  border-radius: 50%;
+  box-shadow: ${props => props.theme.getColor('gray-500')} 0 0px 2px 0px;
+  transition: left 200ms;
+`;
+const SwitchIndicatorLabelText = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
+  padding-left: 10px;
+  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 18px;
+
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'))};
+`;
+const SwitchLabel = styled.label.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
+  display: inline-flex;
+  margin-right: auto;
+  cursor: pointer;
+
+  input[type='checkbox'] {
+    position: absolute;
+    opacity: 0;
+  }
+
+  &:has(input[type='checkbox']:not(:checked)) {
+    ${SwitchIndicatorButton} {
+      left: 0;
+    }
+  }
+
+  &:has(input[type='checkbox']:checked) {
+    ${SwitchIndicatorButton} {
+      left: calc(100% - ${switchButtonSize});
+    }
+
+    ${SwitchIndicator} {
+      background: ${props => props.theme.getColor('emerald-500')};
+
+      ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-300'), 1)}
+    }
+  }
+
+  &:has(input[type='checkbox']:focus-visible) {
+    ${SwitchIndicatorButton} {
+      ${props => props.theme.themeProp('outline', `8px solid ${rgba(props.theme.getColor('emerald-500'), 0.5)}`, `8px solid ${rgba(props.theme.getColor('emerald-500'), 0.3)}`, 1)}
+    }
+  }
+`;
+const Description = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)`
+  margin: ${props => props.$spaciousdescription ? '16px' : '6px'} 0 0 0;
+  font-size: 0.75rem;
+  line-height: 1.333;
+
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'))};
+`;
+
+export { Description, Switch, SwitchIndicator, SwitchIndicatorButton, SwitchIndicatorLabelText, SwitchLabel };
+//# sourceMappingURL=Switch.styled.js.map