@ntbjs/react-components 2.0.0-rc.3 → 2.0.0-rc.30

package/build/inputs/TextInput/TextInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.js","sources":["../../../src/components/inputs/TextInput/TextInput.js"],"sourcesContent":["import React, { useMemo, useRef, useState } from 'react';\n\nimport { nanoid } from 'nanoid';\nimport PropTypes from 'prop-types';\n\nimport useMergedRefs from '@restart/hooks/useMergedRefs';\nimport { isBoolean, isEmpty } from 'lodash';\nimport { ReactComponent as EditNoteIcon } from '../../../icons/edit-note.svg';\nimport * as S from './TextInput.styled';\n\n/**\n * Text inputs let users enter and edit text in the UI. They typically appear in forms and dialogs.\n *\n * ### Import\n *\n * ``` js\n * import { TextInput } from '@ntbjs/react-components/inputs'\n * // or\n * import TextInput from '@ntbjs/react-components/inputs/TextInput'\n * ```\n */\nconst TextInput = React.forwardRef(function TextInput(\n  {\n    value,\n    defaultValue,\n    name,\n    label,\n    placeholder,\n    type,\n    required,\n    disabled,\n    readOnly,\n    autoComplete,\n    description,\n    error,\n    warning,\n    icon,\n    adornments,\n    className,\n    style,\n    onChange,\n    onBlur,\n    noBorder,\n    ...rest\n  },\n  forwardedRef\n) {\n  const textInputDomNode = useRef(null);\n  const textInputRef = useMergedRefs(forwardedRef, textInputDomNode);\n  const [uniqueId] = useState(nanoid());\n\n  const hasError = useMemo(() => {\n    if (isBoolean(error)) {\n      return error;\n    }\n\n    return !isEmpty(error);\n  }, [error]);\n\n  const hasWarning = useMemo(() => {\n    if (isBoolean(warning)) {\n      return warning;\n    }\n\n    return !isEmpty(warning);\n  }, [warning]);\n\n  const descriptionText = useMemo(() => {\n    if (!isEmpty(error)) {\n      return error;\n    }\n\n    if (!isEmpty(warning)) {\n      return warning;\n    }\n\n    if (!isEmpty(description)) {\n      return description;\n    }\n\n    return null;\n  }, [description, error, warning]);\n\n  return (\n    <S.TextInput\n      error={hasError}\n      disabled={disabled}\n      warning={hasWarning}\n      className={className}\n      style={style}\n    >\n      {typeof icon !== 'undefined' && <S.TextInputFieldIcon>{icon}</S.TextInputFieldIcon>}\n      <S.TextInputWrapper>\n        {typeof adornments?.prefix === 'string' && adornments.prefix.length > 0 && (\n          <S.Adornment\n            htmlFor={`text-input-${uniqueId}`}\n            error={hasError}\n            warning={hasWarning}\n            isPrefix={true}\n            onClick={() => textInputDomNode.current.focus()}\n          >\n            {adornments.prefix}\n          </S.Adornment>\n        )}\n        <S.TextInputField\n          ref={textInputRef}\n          value={value}\n          defaultValue={defaultValue}\n          name={name}\n          placeholder={placeholder || ' '} // Should default to an empty string with one space\n          type={type}\n          required={required}\n          autoComplete={autoComplete}\n          hasIcon={Boolean(icon)}\n          error={hasError}\n          warning={hasWarning}\n          id={`text-input-${uniqueId}`}\n          onChange={onChange}\n          onBlur={onBlur}\n          readOnly={readOnly}\n          noBorder={noBorder}\n          {...rest}\n        />\n        {!readOnly && noBorder && (\n          <S.InputIconContainer error={error} warning={warning}>\n            <EditNoteIcon />\n          </S.InputIconContainer>\n        )}\n        {label && (\n          <S.TextInputLabel\n            htmlFor={`text-input-${uniqueId}`}\n            hasPlaceholder={Boolean(placeholder)}\n            hasAdornments={Boolean(\n              (typeof adornments?.prefix === 'string' && adornments.prefix.length > 0) ||\n                (typeof adornments?.suffix === 'string' && adornments.suffix.length > 0)\n            )}\n            hasIcon={Boolean(icon)}\n            error={hasError}\n          >\n            {label}\n            {required && ' *'}\n          </S.TextInputLabel>\n        )}\n        {typeof adornments?.suffix === 'string' && adornments.suffix.length > 0 && (\n          <S.Adornment\n            error={hasError}\n            warning={hasWarning}\n            isPrefix={false}\n            onClick={() => textInputDomNode.current.focus()}\n          >\n            {adornments.suffix}\n          </S.Adornment>\n        )}\n      </S.TextInputWrapper>\n      {typeof descriptionText === 'string' && descriptionText.length > 0 && (\n        <S.Description error={hasError} warning={hasWarning}>\n          {descriptionText}\n        </S.Description>\n      )}\n    </S.TextInput>\n  );\n});\n\nTextInput.defaultProps = {\n  type: 'text',\n  noBorder: false\n};\n\nTextInput.propTypes = {\n  /**\n   * Content of the text input field\n   */\n  value: PropTypes.string,\n\n  /**\n   * Default content of the text input field\n   */\n  defaultValue: PropTypes.string,\n\n  /**\n   * Name of the text input field (used when sending form data)\n   */\n  name: PropTypes.string,\n\n  /**\n   * Label text for the text input field. If the text input field is empty (no input and no placeholder)\n   * and isn't in focus, the label text will be displayed grayed out in the field itself.\n   * Otherwise, the label text will be displayed in the top left corner.\n   */\n  label: PropTypes.string,\n\n  /**\n   * Placeholder text to be displayed if the text area is empty (no input)\n   */\n  placeholder: PropTypes.string,\n\n  /**\n   * Type of input – e.g. `text`, `email`, `password`, etc.\n   */\n  type: PropTypes.string,\n\n  /**\n   * Whether the field is required\n   */\n  required: PropTypes.bool,\n\n  /**\n   * Whether the field is disabled\n   */\n  disabled: PropTypes.bool,\n\n  /**\n   * Whether the field is read-only\n   */\n  readOnly: PropTypes.bool,\n\n  /**\n   * ?\n   */\n  autoComplete: PropTypes.string,\n\n  /**\n   * Descriptive text displayed below the text input field\n   */\n  description: PropTypes.string,\n\n  /**\n   * Set to `true` to display the text input field with a red border. Set to a string to\n   * aslo display the given string as an error message below the field.\n   */\n  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n\n  /**\n   * Set to `true` to display the text input field with a yellow/orange border. Set to a string to\n   * aslo display the given string as a warning message below the field.\n   */\n  warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n\n  /**\n   * Optional icon to be displayed left of the text inside the text area\n   */\n  icon: PropTypes.element,\n\n  /**\n   * Text to be displayed before/after the user input. Takes an object with two values:\n   * `prefix` and `suffix`, where prefix will be displayed before and suffix will be\n   * displayed after the user input.\n   */\n  adornments: PropTypes.shape({ prefix: PropTypes.string, suffix: PropTypes.string }),\n\n  /**\n   * Add custom class names to the HTML element\n   */\n  className: PropTypes.string,\n\n  /**\n   * Add 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  /**\n   * Whether to display the text input field without borders when it's not in focus\n   */\n  noBorder: PropTypes.bool\n};\n\nexport default TextInput;\n"],"names":["TextInput","React","forwardRef","value","defaultValue","name","label","placeholder","type","required","disabled","readOnly","autoComplete","description","error","warning","icon","adornments","className","style","onChange","onBlur","noBorder","rest","forwardedRef","textInputDomNode","useRef","textInputRef","useMergedRefs","uniqueId","useState","nanoid","hasError","useMemo","isBoolean","isEmpty","hasWarning","descriptionText","createElement","S","prefix","length","htmlFor","isPrefix","onClick","current","focus","_extends","ref","hasIcon","Boolean","id","EditNoteIcon","hasPlaceholder","hasAdornments","suffix","defaultProps","propTypes","process","env","NODE_ENV","PropTypes","string","bool","oneOfType","element","shape","object","func"],"mappings":"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"}

package/build/inputs/TextInput/TextInput.styled.js

@@ -0,0 +1,231 @@
+import styled, { css } from 'styled-components';
+import { applyDefaultTheme } from '../../utils/defaultTheme.js';
+
+const activeLabel = css`
+  font-size: 0.75rem;
+  padding: 0 3px;
+  top: -7px;
+  letter-spacing: 0.03em;
+  left: 8px !important;
+  opacity: 1 !important;
+`;
+const Adornment = styled.div.attrs(applyDefaultTheme)`
+  flex-shrink: 0;
+  font-family: inherit;
+  font-size: 0.875rem;
+  line-height: initial;
+  padding: 13px 10px;
+
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'))}
+  ${props => props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'))}
+  border: 1px solid;
+  ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'))}
+  border-radius: 3px;
+  ${props => props.isPrefix ? css`
+          padding-right: 10px;
+          border-right: 0;
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+        ` : css`
+          padding-left: 0;
+          margin-left: -3px;
+          border-left: 0;
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
+        `}
+  box-sizing: border-box;
+  appearance: none;
+  transition: border-color 350ms;
+  height: 2.75rem;
+
+  ${props => props.warning && css`
+      border-color: ${props.theme.getColor('orange-500')} !important;
+    `}
+  ${props => props.error && css`
+      border-color: ${props.theme.getColor('red-500')} !important;
+    `}
+`;
+const TextInputWrapper = styled.div.attrs(applyDefaultTheme)`
+  display: flex;
+  align-content: center;
+
+  &:focus-within {
+    ${Adornment} {
+      outline: none;
+      ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-600'), 1)}
+    }
+  }
+`;
+const InputIconContainer = styled.div.attrs(applyDefaultTheme)`
+  opacity: 0;
+  pointer-events: none;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+  padding-right: 4px;
+  padding-left: 30px;
+  display: flex;
+  align-items: center;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  color: ${props => props.theme.getColor('gray-400')};
+
+  ${props => props.warning && props.theme.themeProp('color', '#C3AF43', '#C3AF43')}
+
+  ${props => props.error && props.theme.themeProp('color', '#CB968F', '#CB968F')}
+
+  > svg {
+    width: 12px;
+  }
+`;
+const TextInputField = styled.input.attrs(applyDefaultTheme)`
+  display: block;
+  width: 100%;
+  font-family: inherit;
+  font-size: 0.875rem;
+  line-height: 1;
+  padding: 13px 10px;
+  border-radius: 3px;
+  box-sizing: border-box;
+  appearance: none;
+  transition: border-color 350ms;
+  height: 2.75rem !important; // important is needed to override the default Foundation styling used in the Mediebank;
+  margin-bottom: 0; // needed to override the default Foundation styling used in the Mediebank;
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))}
+  ${props => props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'))}
+  border: 1px solid;
+  ${props => props.noBorder || props.readOnly ? 'border-color: transparent !important' : props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'))};
+
+  ${props => props.readOnly && css`
+      user-select: text;
+      cursor: default;
+    `}
+
+  ${props => props.warning && css`
+      border-color: ${props.theme.getColor('orange-500')} !important;
+    `}
+  ${props => props.error && css`
+      border-color: ${props.theme.getColor('red-500')} !important;
+    `}
+  ${props => props.hasIcon && css`
+      padding-left: 35px;
+    `}
+
+  &::placeholder {
+    ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1)}
+
+    ${props => props.theme.themeProp('opacity', 0.6, 0.5, 1)}
+  }
+
+
+  &&:hover:not(:focus) {
+    ${props => props.noBorder ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-200')) : 'background: transparent'};
+    transition: background 350ms;
+    & + ${InputIconContainer} {
+      opacity: 1;
+      transition: opacity 350ms;
+    }
+  }
+
+  :focus {
+    outline: none;
+    border-color: ${props => props.theme.getColor('gray-600')} !important
+    ${props => props.readOnly && css`
+        outline: none;
+      `}
+`;
+const TextInputLabel = styled.label.attrs(applyDefaultTheme)`
+  position: absolute;
+  top: 15px;
+  left: 11px;
+  line-height: 1.2;
+  font-size: 0.875rem;
+  transition: all 150ms;
+
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'))}
+
+  ${props => props.theme.themeProp('opacity', 0.6, 0.5)}
+
+  ${props => props.theme.themeProp('background', `linear-gradient(0deg, ${props.theme.getColor('gray-900')} calc(50% + 1px), transparent 50%)`, `linear-gradient(0deg, ${props.theme.getColor('white')} calc(50% + 1px), transparent 50%)`)}
+
+  ${props => (props.hasPlaceholder || props.hasAdornments) && css`
+      ${activeLabel};
+    `}
+
+
+  ${props => props.hasIcon && css`
+      left: 35px;
+    `}
+`;
+const TextInputFieldIcon = styled.div.attrs(applyDefaultTheme)`
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 2.625rem;
+  display: flex;
+  padding: 0 10px;
+
+  svg {
+    width: 15px;
+    opacity: 0.6;
+    transition: opacity 250ms;
+  }
+`;
+const TextInput = styled.div.attrs(applyDefaultTheme)`
+  position: relative;
+
+  ${props => props.disabled && css`
+      user-select: none;
+      opacity: 0.5;
+      cursor: not-allowed;
+      > * {
+        pointer-events: none;
+      }
+    `}
+
+  &:focus-within {
+    ${TextInputLabel} {
+      ${activeLabel};
+    }
+
+    ${TextInputFieldIcon} {
+      svg {
+        opacity: 1;
+      }
+    }
+  }
+
+  ${TextInputField}:not(:placeholder-shown) + ${TextInputLabel} {
+    ${activeLabel};
+    ${props => props.error && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'))}
+
+    ${props => props.error && css`
+        color: ${props.theme.getColor('red-500')};
+      `}
+    ${props => props.warning && css`
+        color: ${props.theme.getColor('orange-500')};
+      `} 
+  } 
+ 
+}
+`;
+const Description = styled.p.attrs(applyDefaultTheme)`
+  margin: 8px 0 0 0;
+  padding: 0 0.6875rem;
+  font-size: 0.75rem;
+  line-height: 1.333;
+
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'))};
+
+  ${props => props.error && css`
+      ${props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'))}
+    `}
+
+  ${props => props.warning && css`
+      ${props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500'))}
+    `}
+`;
+
+export { Adornment, Description, InputIconContainer, TextInput, TextInputField, TextInputFieldIcon, TextInputLabel, TextInputWrapper };
+//# sourceMappingURL=TextInput.styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.styled.js","sources":["../../../src/components/inputs/TextInput/TextInput.styled.js"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nconst activeLabel = css`\n  font-size: 0.75rem;\n  padding: 0 3px;\n  top: -7px;\n  letter-spacing: 0.03em;\n  left: 8px !important;\n  opacity: 1 !important;\n`;\n\nexport const Adornment = styled.div.attrs(applyDefaultTheme)`\n  flex-shrink: 0;\n  font-family: inherit;\n  font-size: 0.875rem;\n  line-height: initial;\n  padding: 13px 10px;\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-400'),\n      props.theme.getColor('gray-500')\n    )}\n  ${props =>\n    props.theme.themeProp(\n      'background',\n      props.theme.getColor('gray-900'),\n      props.theme.getColor('white')\n    )}\n  border: 1px solid;\n  ${props =>\n    props.theme.themeProp(\n      'border-color',\n      props.theme.getColor('gray-500'),\n      props.theme.getColor('gray-400')\n    )}\n  border-radius: 3px;\n  ${props =>\n    props.isPrefix\n      ? css`\n          padding-right: 10px;\n          border-right: 0;\n          border-top-right-radius: 0;\n          border-bottom-right-radius: 0;\n        `\n      : css`\n          padding-left: 0;\n          margin-left: -3px;\n          border-left: 0;\n          border-top-left-radius: 0;\n          border-bottom-left-radius: 0;\n        `}\n  box-sizing: border-box;\n  appearance: none;\n  transition: border-color 350ms;\n  height: 2.75rem;\n\n  ${props =>\n    props.warning &&\n    css`\n      border-color: ${props.theme.getColor('orange-500')} !important;\n    `}\n  ${props =>\n    props.error &&\n    css`\n      border-color: ${props.theme.getColor('red-500')} !important;\n    `}\n`;\n\nexport const TextInputWrapper = styled.div.attrs(applyDefaultTheme)`\n  display: flex;\n  align-content: center;\n\n  &:focus-within {\n    ${Adornment} {\n      outline: none;\n      ${props =>\n        props.theme.themeProp(\n          'border-color',\n          props.theme.getColor('gray-600'),\n          props.theme.getColor('gray-600'),\n          1\n        )}\n    }\n  }\n`;\n\nexport const InputIconContainer = styled.div.attrs(applyDefaultTheme)`\n  opacity: 0;\n  pointer-events: none;\n  border-top-right-radius: 3px;\n  border-bottom-right-radius: 3px;\n  padding-right: 4px;\n  padding-left: 30px;\n  display: flex;\n  align-items: center;\n  position: absolute;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  color: ${props => props.theme.getColor('gray-400')};\n\n  ${props => props.warning && props.theme.themeProp('color', '#C3AF43', '#C3AF43')}\n\n  ${props => props.error && props.theme.themeProp('color', '#CB968F', '#CB968F')}\n\n  > svg {\n    width: 12px;\n  }\n`;\n\nexport const TextInputField = styled.input.attrs(applyDefaultTheme)`\n  display: block;\n  width: 100%;\n  font-family: inherit;\n  font-size: 0.875rem;\n  line-height: 1;\n  padding: 13px 10px;\n  border-radius: 3px;\n  box-sizing: border-box;\n  appearance: none;\n  transition: border-color 350ms;\n  height: 2.75rem !important; // important is needed to override the default Foundation styling used in the Mediebank;\n  margin-bottom: 0; // needed to override the default Foundation styling used in the Mediebank;\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-100'),\n      props.theme.getColor('gray-900')\n    )}\n  ${props =>\n    props.theme.themeProp(\n      'background',\n      props.theme.getColor('gray-900'),\n      props.theme.getColor('white')\n    )}\n  border: 1px solid;\n  ${props =>\n    props.noBorder || props.readOnly\n      ? 'border-color: transparent !important'\n      : props.theme.themeProp(\n          'border-color',\n          props.theme.getColor('gray-500'),\n          props.theme.getColor('gray-400')\n        )};\n\n  ${props =>\n    props.readOnly &&\n    css`\n      user-select: text;\n      cursor: default;\n    `}\n\n  ${props =>\n    props.warning &&\n    css`\n      border-color: ${props.theme.getColor('orange-500')} !important;\n    `}\n  ${props =>\n    props.error &&\n    css`\n      border-color: ${props.theme.getColor('red-500')} !important;\n    `}\n  ${props =>\n    props.hasIcon &&\n    css`\n      padding-left: 35px;\n    `}\n\n  &::placeholder {\n    ${props =>\n      props.theme.themeProp(\n        'color',\n        props.theme.getColor('gray-300'),\n        props.theme.getColor('gray-600'),\n        1\n      )}\n\n    ${props => props.theme.themeProp('opacity', 0.6, 0.5, 1)}\n  }\n\n\n  &&:hover:not(:focus) {\n    ${props =>\n      props.noBorder\n        ? props.theme.themeProp(\n            'background',\n            props.theme.getColor('gray-700'),\n            props.theme.getColor('gray-200')\n          )\n        : 'background: transparent'};\n    transition: background 350ms;\n    & + ${InputIconContainer} {\n      opacity: 1;\n      transition: opacity 350ms;\n    }\n  }\n\n  :focus {\n    outline: none;\n    border-color: ${props => props.theme.getColor('gray-600')} !important\n    ${props =>\n      props.readOnly &&\n      css`\n        outline: none;\n      `}\n`;\n\nexport const TextInputLabel = styled.label.attrs(applyDefaultTheme)`\n  position: absolute;\n  top: 15px;\n  left: 11px;\n  line-height: 1.2;\n  font-size: 0.875rem;\n  transition: all 150ms;\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-300'),\n      props.theme.getColor('gray-600')\n    )}\n\n  ${props => props.theme.themeProp('opacity', 0.6, 0.5)}\n\n  ${props =>\n    props.theme.themeProp(\n      'background',\n      `linear-gradient(0deg, ${props.theme.getColor('gray-900')} calc(50% + 1px), transparent 50%)`,\n      `linear-gradient(0deg, ${props.theme.getColor('white')} calc(50% + 1px), transparent 50%)`\n    )}\n\n  ${props =>\n    (props.hasPlaceholder || props.hasAdornments) &&\n    css`\n      ${activeLabel};\n    `}\n\n\n  ${props =>\n    props.hasIcon &&\n    css`\n      left: 35px;\n    `}\n`;\n\nexport const TextInputFieldIcon = styled.div.attrs(applyDefaultTheme)`\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 2.625rem;\n  display: flex;\n  padding: 0 10px;\n\n  svg {\n    width: 15px;\n    opacity: 0.6;\n    transition: opacity 250ms;\n  }\n`;\n\nexport const TextInput = styled.div.attrs(applyDefaultTheme)`\n  position: relative;\n\n  ${props =>\n    props.disabled &&\n    css`\n      user-select: none;\n      opacity: 0.5;\n      cursor: not-allowed;\n      > * {\n        pointer-events: none;\n      }\n    `}\n\n  &:focus-within {\n    ${TextInputLabel} {\n      ${activeLabel};\n    }\n\n    ${TextInputFieldIcon} {\n      svg {\n        opacity: 1;\n      }\n    }\n  }\n\n  ${TextInputField}:not(:placeholder-shown) + ${TextInputLabel} {\n    ${activeLabel};\n    ${props =>\n      props.error &&\n      props.theme.themeProp(\n        'color',\n        props.theme.getColor('red-200'),\n        props.theme.getColor('red-500')\n      )}\n\n    ${props =>\n      props.error &&\n      css`\n        color: ${props.theme.getColor('red-500')};\n      `}\n    ${props =>\n      props.warning &&\n      css`\n        color: ${props.theme.getColor('orange-500')};\n      `} \n  } \n \n}\n`;\n\nexport const Description = styled.p.attrs(applyDefaultTheme)`\n  margin: 8px 0 0 0;\n  padding: 0 0.6875rem;\n  font-size: 0.75rem;\n  line-height: 1.333;\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-400'),\n      props.theme.getColor('gray-500')\n    )};\n\n  ${props =>\n    props.error &&\n    css`\n      ${props.theme.themeProp(\n        'color',\n        props.theme.getColor('red-200'),\n        props.theme.getColor('red-500')\n      )}\n    `}\n\n  ${props =>\n    props.warning &&\n    css`\n      ${props.theme.themeProp(\n        'color',\n        props.theme.getColor('red-200'),\n        props.theme.getColor('orange-500')\n      )}\n    `}\n`;\n"],"names":["activeLabel","css","Adornment","styled","div","attrs","applyDefaultTheme","props","theme","themeProp","getColor","isPrefix","warning","error","TextInputWrapper","InputIconContainer","TextInputField","input","noBorder","readOnly","hasIcon","TextInputLabel","label","hasPlaceholder","hasAdornments","TextInputFieldIcon","TextInput","disabled","Description","p"],"mappings":";;;AAGA,MAAMA,WAAW,GAAGC,GAAG,CAAA;AACvB;AACA;AACA;AACA;AACA;AACA;AACA,CAAC,CAAA;AAEM,MAAMC,SAAS,GAAGC,MAAM,CAACC,GAAG,CAACC,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA,EAAIC,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,EAAIH,EAAAA,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,YAAY,EACZF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,OAAO,CAC9B,CAAC,CAAA;AACL;AACA,EAAIH,EAAAA,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,cAAc,EACdF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AACL;AACA,EAAA,EAAIH,KAAK,IACLA,KAAK,CAACI,QAAQ,GACVV,GAAG,CAAA;AACX;AACA;AACA;AACA;AACA,QAAA,CAAS,GACDA,GAAG,CAAA;AACX;AACA;AACA;AACA;AACA;AACA,QAAS,CAAA,CAAA;AACT;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIM,KAAK,IACLA,KAAK,CAACK,OAAO,IACbX,GAAG,CAAA;AACP,oBAAA,EAAsBM,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,YAAY,CAAC,CAAA;AACxD,IAAK,CAAA,CAAA;AACL,EAAA,EAAIH,KAAK,IACLA,KAAK,CAACM,KAAK,IACXZ,GAAG,CAAA;AACP,oBAAA,EAAsBM,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,SAAS,CAAC,CAAA;AACrD,IAAK,CAAA,CAAA;AACL,EAAC;AAEM,MAAMI,gBAAgB,GAAGX,MAAM,CAACC,GAAG,CAACC,KAAK,CAACC,iBAAiB,CAAC,CAAA;AACnE;AACA;AACA;AACA;AACA,IAAA,EAAMJ,SAAS,CAAA;AACf;AACA,MAAA,EAAQK,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,cAAc,EACdF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChC,CACF,CAAC,CAAA;AACT;AACA;AACA,EAAC;AAEM,MAAMK,kBAAkB,GAAGZ,MAAM,CAACC,GAAG,CAACC,KAAK,CAACC,iBAAiB,CAAC,CAAA;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAWC,EAAAA,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,CAAA;AACpD;AACA,EAAA,EAAIH,KAAK,IAAIA,KAAK,CAACK,OAAO,IAAIL,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC,CAAA;AAClF;AACA,EAAA,EAAIF,KAAK,IAAIA,KAAK,CAACM,KAAK,IAAIN,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC,CAAA;AAChF;AACA;AACA;AACA;AACA,EAAC;AAEM,MAAMO,cAAc,GAAGb,MAAM,CAACc,KAAK,CAACZ,KAAK,CAACC,iBAAiB,CAAC,CAAA;AACnE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAIC,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,EAAIH,EAAAA,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,YAAY,EACZF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,OAAO,CAC9B,CAAC,CAAA;AACL;AACA,EAAA,EAAIH,KAAK,IACLA,KAAK,CAACW,QAAQ,IAAIX,KAAK,CAACY,QAAQ,GAC5B,sCAAsC,GACtCZ,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,cAAc,EACdF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AACT;AACA,EAAA,EAAIH,KAAK,IACLA,KAAK,CAACY,QAAQ,IACdlB,GAAG,CAAA;AACP;AACA;AACA,IAAK,CAAA,CAAA;AACL;AACA,EAAA,EAAIM,KAAK,IACLA,KAAK,CAACK,OAAO,IACbX,GAAG,CAAA;AACP,oBAAA,EAAsBM,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,YAAY,CAAC,CAAA;AACxD,IAAK,CAAA,CAAA;AACL,EAAA,EAAIH,KAAK,IACLA,KAAK,CAACM,KAAK,IACXZ,GAAG,CAAA;AACP,oBAAA,EAAsBM,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,SAAS,CAAC,CAAA;AACrD,IAAK,CAAA,CAAA;AACL,EAAA,EAAIH,KAAK,IACLA,KAAK,CAACa,OAAO,IACbnB,GAAG,CAAA;AACP;AACA,IAAK,CAAA,CAAA;AACL;AACA;AACA,IAAA,EAAMM,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,CAAC,EAChC,CACF,CAAC,CAAA;AACP;AACA,IAAA,EAAMH,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,CAAA;AAC5D;AACA;AACA;AACA;AACA,IAAA,EAAMF,KAAK,IACLA,KAAK,CAACW,QAAQ,GACVX,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,YAAY,EACZF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC,GACD,yBAAyB,CAAA;AACnC;AACA,QAAA,EAAUK,kBAAkB,CAAA;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAoBR,EAAAA,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,CAAA;AAC7D,IAAA,EAAMH,KAAK,IACLA,KAAK,CAACY,QAAQ,IACdlB,GAAG,CAAA;AACT;AACA,MAAO,CAAA,CAAA;AACP,EAAC;AAEM,MAAMoB,cAAc,GAAGlB,MAAM,CAACmB,KAAK,CAACjB,KAAK,CAACC,iBAAiB,CAAC,CAAA;AACnE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAIC,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;AACA,EAAA,EAAIH,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACC,SAAS,CAAC,SAAS,EAAE,GAAG,EAAE,GAAG,CAAC,CAAA;AACvD;AACA,EAAA,EAAIF,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,YAAY,EACZ,CAAyBF,sBAAAA,EAAAA,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,CAAoC,kCAAA,CAAA,EAC7F,yBAAyBH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,OAAO,CAAC,oCACxD,CAAC,CAAA;AACL;AACA,EAAIH,EAAAA,KAAK,IACL,CAACA,KAAK,CAACgB,cAAc,IAAIhB,KAAK,CAACiB,aAAa,KAC5CvB,GAAG,CAAA;AACP,MAAA,EAAQD,WAAW,CAAA;AACnB,IAAK,CAAA,CAAA;AACL;AACA;AACA,EAAA,EAAIO,KAAK,IACLA,KAAK,CAACa,OAAO,IACbnB,GAAG,CAAA;AACP;AACA,IAAK,CAAA,CAAA;AACL,EAAC;AAEM,MAAMwB,kBAAkB,GAAGtB,MAAM,CAACC,GAAG,CAACC,KAAK,CAACC,iBAAiB,CAAC,CAAA;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAC;AAEM,MAAMoB,SAAS,GAAGvB,MAAM,CAACC,GAAG,CAACC,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC5D;AACA;AACA,EAAA,EAAIC,KAAK,IACLA,KAAK,CAACoB,QAAQ,IACd1B,GAAG,CAAA;AACP;AACA;AACA;AACA;AACA;AACA;AACA,IAAK,CAAA,CAAA;AACL;AACA;AACA,IAAA,EAAMoB,cAAc,CAAA;AACpB,MAAA,EAAQrB,WAAW,CAAA;AACnB;AACA;AACA,IAAA,EAAMyB,kBAAkB,CAAA;AACxB;AACA;AACA;AACA;AACA;AACA;AACA,EAAIT,EAAAA,cAAc,8BAA8BK,cAAc,CAAA;AAC9D,IAAA,EAAMrB,WAAW,CAAA;AACjB,IAAA,EAAMO,KAAK,IACLA,KAAK,CAACM,KAAK,IACXN,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,OAAO,EACPF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,SAAS,CAAC,EAC/BH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,SAAS,CAChC,CAAC,CAAA;AACP;AACA,IAAA,EAAMH,KAAK,IACLA,KAAK,CAACM,KAAK,IACXZ,GAAG,CAAA;AACT,eAAA,EAAiBM,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,SAAS,CAAC,CAAA;AAChD,MAAO,CAAA,CAAA;AACP,IAAA,EAAMH,KAAK,IACLA,KAAK,CAACK,OAAO,IACbX,GAAG,CAAA;AACT,eAAA,EAAiBM,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,YAAY,CAAC,CAAA;AACnD,MAAO,CAAA,CAAA;AACP;AACA;AACA;AACA,EAAC;AAEM,MAAMkB,WAAW,GAAGzB,MAAM,CAAC0B,CAAC,CAACxB,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC5D;AACA;AACA;AACA;AACA;AACA,EAAIC,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;AACA,EAAA,EAAIH,KAAK,IACLA,KAAK,CAACM,KAAK,IACXZ,GAAG,CAAA;AACP,MAAQM,EAAAA,KAAK,CAACC,KAAK,CAACC,SAAS,CACrB,OAAO,EACPF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,SAAS,CAAC,EAC/BH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,SAAS,CAChC,CAAC,CAAA;AACP,IAAK,CAAA,CAAA;AACL;AACA,EAAA,EAAIH,KAAK,IACLA,KAAK,CAACK,OAAO,IACbX,GAAG,CAAA;AACP,MAAQM,EAAAA,KAAK,CAACC,KAAK,CAACC,SAAS,CACrB,OAAO,EACPF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,SAAS,CAAC,EAC/BH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,YAAY,CACnC,CAAC,CAAA;AACP,IAAK,CAAA,CAAA;AACL;;;;"}

package/build/inputs/TextInput/index.js

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

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

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

package/build/inputs/index.js

@@ -0,0 +1,15 @@
+export { default as ActionButton } from './ActionButton/ActionButton.js';
+export { default as Button } from './Button/Button.js';
+export { default as Checkbox } from './Checkbox/Checkbox.js';
+export { default as CompactAutocompleteSelect } from './CompactAutocompleteSelect/CompactAutocompleteSelect.js';
+export { default as CompactStarRating } from './CompactStarRating/CompactStarRating.js';
+export { default as CompactTextInput } from './CompactTextInput/CompactTextInput.js';
+export { default as MultiSelect } from './MultiSelect/MultiSelect.js';
+export { default as Radio } from './Radio/Radio.js';
+export { default as TextArea } from './TextArea/TextArea.js';
+export { default as TextInput } from './TextInput/TextInput.js';
+export { default as Switch } from './Switch/Switch.js';
+export { default as MultiLevelCheckbox } from './MultiLevelCheckbox/MultiLevelCheckbox.js';
+import './MultiLevelCheckbox/types.js';
+export { default as MultiLevelCheckboxSelect } from './MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.js';
+//# sourceMappingURL=index.js.map

package/build/inputs/index.js.map

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

package/build/layout/InputGroup/InputGroup.js

@@ -0,0 +1,20 @@
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { InputGroup as InputGroup$1 } from './InputGroup.styled.js';
+
+const InputGroup = React__default.forwardRef(function InputGroup({
+  children,
+  ...props
+}, forwardedRef) {
+  return React__default.createElement(InputGroup$1, _extends({
+    ref: forwardedRef
+  }, props), children);
+});
+InputGroup.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: PropTypes.node
+} : {};
+InputGroup.defaultProps = {};
+
+export { InputGroup as default };
+//# sourceMappingURL=InputGroup.js.map

package/build/layout/InputGroup/InputGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputGroup.js","sources":["../../../src/components/layout/InputGroup/InputGroup.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './InputGroup.styled';\n\n/**\n * Wrapper component to visually group related inputs by adding space above/below the group.\n *\n * ### Import\n *\n * ``` js\n * import { InputGroup } from '@ntbjs/react-components/layout'\n * // or\n * import InputGroup from '@ntbjs/react-components/layout/InputGroup'\n * ```\n *\n * ### Usage example\n * Pass an array of input elements to the `InputGroup` as its children:\n *\n * ``` js\nconst item1 = <CompactTextInput label=\"Size\" type=\"text\" value=\"4369 x 2913 px\" />;\nconst item2 = <CompactTextInput label=\"Resolution\" type=\"text\" value=\"300 dpi 37.0 x 24.7 cm px\" />;\nconst item3 = <CompactTextInput label=\"File size\" type=\"text\" value=\"7.22 MB\" />;\n\nconst inputGroup = <InputGroup>{[item1, item2, item3, item4]}</InputGroup>;\n * ```\n */\nconst InputGroup = React.forwardRef(function InputGroup({ children, ...props }, forwardedRef) {\n  return (\n    <S.InputGroup ref={forwardedRef} {...props}>\n      {children}\n    </S.InputGroup>\n  );\n});\n\nInputGroup.propTypes = {\n  /**\n   * An array of inputs – e.g. `<CompactTextInput>`\n   */\n  children: PropTypes.node\n};\n\nInputGroup.defaultProps = {};\n\nexport default InputGroup;\n"],"names":["InputGroup","React","forwardRef","children","props","forwardedRef","createElement","S","_extends","ref","propTypes","process","env","NODE_ENV","PropTypes","node","defaultProps"],"mappings":";;;;;AA0BMA,MAAAA,UAAU,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,UAAUA,CAAC;EAAEG,QAAQ;EAAE,GAAGC,KAAAA;AAAM,CAAC,EAAEC,YAAY,EAAE;EAC5F,OACEJ,cAAA,CAAAK,aAAA,CAACC,YAAY,EAAAC,QAAA,CAAA;AAACC,IAAAA,GAAG,EAAEJ,YAAAA;GAAkBD,EAAAA,KAAK,CACvCD,EAAAA,QACW,CAAC,CAAA;AAEnB,CAAC,EAAC;AAEFH,UAAU,CAACU,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;EAIrBV,QAAQ,EAAEW,SAAS,CAACC,IAAAA;AACtB,CAAC,GAAA,EAAA,CAAA;AAEDf,UAAU,CAACgB,YAAY,GAAG,EAAE;;;;"}

package/build/layout/InputGroup/InputGroup.styled.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+import { applyDefaultTheme } from '../../utils/defaultTheme.js';
+
+const InputGroup = styled.div.attrs(applyDefaultTheme)`
+  margin: 8px 0;
+`;
+
+export { InputGroup };
+//# sourceMappingURL=InputGroup.styled.js.map

package/build/layout/InputGroup/InputGroup.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputGroup.styled.js","sources":["../../../src/components/layout/InputGroup/InputGroup.styled.js"],"sourcesContent":["import styled from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nexport const InputGroup = styled.div.attrs(applyDefaultTheme)`\n  margin: 8px 0;\n`;\n"],"names":["InputGroup","styled","div","attrs","applyDefaultTheme"],"mappings":";;;AAGO,MAAMA,UAAU,GAAGC,MAAM,CAACC,GAAG,CAACC,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC7D;AACA;;;;"}

package/build/layout/SectionSeparator/SectionSeparator.js

@@ -0,0 +1,23 @@
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { SectionSeparator as SectionSeparator$1 } from './SectionSeparator.styled.js';
+
+const SectionSeparator = React__default.forwardRef(function SectionSeparator({
+  vertical = false,
+  margin = 0,
+  ...props
+}, forwardedRef) {
+  return React__default.createElement(SectionSeparator$1, _extends({
+    vertical: vertical,
+    margin: margin,
+    ref: forwardedRef
+  }, props));
+});
+SectionSeparator.propTypes = process.env.NODE_ENV !== "production" ? {
+  vertical: PropTypes.bool,
+  margin: PropTypes.number
+} : {};
+
+export { SectionSeparator as default };
+//# sourceMappingURL=SectionSeparator.js.map

package/build/layout/SectionSeparator/SectionSeparator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionSeparator.js","sources":["../../../src/components/layout/SectionSeparator/SectionSeparator.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './SectionSeparator.styled';\n\n/**\n * Section separators are used to separate sections in the UI.\n * It will fill 100% of the width or height of its parent container by default.\n *\n *\n * ### Import\n *\n * ``` js\n * import { SectionSeparator } from '@ntbjs/react-components/layout'\n * // or\n * import SectionSeparator from '@ntbjs/react-components/layout/SectionSeparator'\n * ```\n *\n */\nconst SectionSeparator = React.forwardRef(function SectionSeparator(\n  { vertical = false, margin = 0, ...props },\n  forwardedRef\n) {\n  return <S.SectionSeparator vertical={vertical} margin={margin} ref={forwardedRef} {...props} />;\n});\n\nSectionSeparator.propTypes = {\n  /**\n   * Whether the section separator should be displayed vertically.\n   */\n  vertical: PropTypes.bool,\n  /**\n   * Padding in pixels to apply to the separator.\n   */\n  margin: PropTypes.number\n};\n\nexport default SectionSeparator;\n"],"names":["SectionSeparator","React","forwardRef","vertical","margin","props","forwardedRef","createElement","S","_extends","ref","propTypes","process","env","NODE_ENV","PropTypes","bool","number"],"mappings":";;;;;AAkBMA,MAAAA,gBAAgB,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,gBAAgBA,CACjE;AAAEG,EAAAA,QAAQ,GAAG,KAAK;AAAEC,EAAAA,MAAM,GAAG,CAAC;EAAE,GAAGC,KAAAA;AAAM,CAAC,EAC1CC,YAAY,EACZ;EACA,OAAOL,cAAA,CAAAM,aAAA,CAACC,kBAAkB,EAAAC,QAAA,CAAA;AAACN,IAAAA,QAAQ,EAAEA,QAAS;AAACC,IAAAA,MAAM,EAAEA,MAAO;AAACM,IAAAA,GAAG,EAAEJ,YAAAA;GAAkBD,EAAAA,KAAK,CAAG,CAAC,CAAA;AACjG,CAAC,EAAC;AAEFL,gBAAgB,CAACW,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;EAI3BX,QAAQ,EAAEY,SAAS,CAACC,IAAI;EAIxBZ,MAAM,EAAEW,SAAS,CAACE,MAAAA;AACpB,CAAC,GAAA,EAAA;;;;"}

package/build/layout/SectionSeparator/SectionSeparator.styled.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import { applyDefaultTheme } from '../../utils/defaultTheme.js';
+
+const SectionSeparator = styled.div.attrs(applyDefaultTheme)`
+  height: ${props => props.vertical ? '100%' : '1px'};
+  width: ${props => props.vertical ? '1px' : '100%'};
+
+  ${props => props.vertical ? `margin-left: ${props.margin}px; margin-right: ${props.margin}px;` : `margin-top: ${props.margin}px; margin-bottom: ${props.margin}px;`}
+
+  ${props => props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200'))}
+`;
+
+export { SectionSeparator };
+//# sourceMappingURL=SectionSeparator.styled.js.map

package/build/layout/SectionSeparator/SectionSeparator.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionSeparator.styled.js","sources":["../../../src/components/layout/SectionSeparator/SectionSeparator.styled.js"],"sourcesContent":["import styled from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nexport const SectionSeparator = styled.div.attrs(applyDefaultTheme)`\n  height: ${props => (props.vertical ? '100%' : '1px')};\n  width: ${props => (props.vertical ? '1px' : '100%')};\n\n  ${props =>\n    props.vertical\n      ? `margin-left: ${props.margin}px; margin-right: ${props.margin}px;`\n      : `margin-top: ${props.margin}px; margin-bottom: ${props.margin}px;`}\n\n  ${props =>\n    props.theme.themeProp(\n      'background-color',\n      props.theme.getColor('gray-500'),\n      props.theme.getColor('gray-200')\n    )}\n`;\n"],"names":["SectionSeparator","styled","div","attrs","applyDefaultTheme","props","vertical","margin","theme","themeProp","getColor"],"mappings":";;;AAGO,MAAMA,gBAAgB,GAAGC,MAAM,CAACC,GAAG,CAACC,KAAK,CAACC,iBAAiB,CAAC,CAAA;AACnE,UAAYC,EAAAA,KAAK,IAAKA,KAAK,CAACC,QAAQ,GAAG,MAAM,GAAG,KAAM,CAAA;AACtD,SAAWD,EAAAA,KAAK,IAAKA,KAAK,CAACC,QAAQ,GAAG,KAAK,GAAG,MAAO,CAAA;AACrD;AACA,EAAID,EAAAA,KAAK,IACLA,KAAK,CAACC,QAAQ,GACV,CAAgBD,aAAAA,EAAAA,KAAK,CAACE,MAAM,CAAqBF,kBAAAA,EAAAA,KAAK,CAACE,MAAM,CAAA,GAAA,CAAK,GAClE,CAAA,YAAA,EAAeF,KAAK,CAACE,MAAM,CAAsBF,mBAAAA,EAAAA,KAAK,CAACE,MAAM,CAAK,GAAA,CAAA,CAAA;AAC1E;AACA,EAAIF,EAAAA,KAAK,IACLA,KAAK,CAACG,KAAK,CAACC,SAAS,CACnB,kBAAkB,EAClBJ,KAAK,CAACG,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCL,KAAK,CAACG,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AACL;;;;"}

package/build/layout/SectionSeparator/index.js

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

package/build/layout/SectionSeparator/index.js.map

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

package/build/layout/index.js

@@ -0,0 +1,3 @@
+export { default as InputGroup } from './InputGroup/InputGroup.js';
+export { default as SectionSeparator } from './SectionSeparator/SectionSeparator.js';
+//# sourceMappingURL=index.js.map

package/build/layout/index.js.map

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

package/{esm/ssr → build}/ssr/index.js

@@ -1 +1,2 @@
 export { ServerStyleSheet } from 'styled-components';
+//# sourceMappingURL=index.js.map

package/build/ssr/index.js.map

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

package/build/styles/all.scss

@@ -0,0 +1,3 @@
+@import './config';
+@import 'utils/colors';
+@import 'utils/theme';

package/build/styles/config.scss

@@ -0,0 +1,38 @@
+/**
+ * Colors
+ */
+$colors: (
+  'orange-600': #634e01,
+  'orange-500': #ff9900,
+  'orange-400': #ffcb7e,
+  'emerald-600': #296c58,
+  'emerald-500': #30826a,
+  'emerald-400': #64b49d,
+  'emerald-300': #bfe0d5,
+  'emerald-200': #f3f9f7,
+  'gray-900': #141313,
+  'gray-800': #272727,
+  'gray-700': #323232,
+  'gray-600': #505050,
+  'gray-500': #767676,
+  'gray-400': #b0b6b9,
+  'gray-300': #d9dce0,
+  'gray-200': #eff1f4,
+  'gray-100': #f7f8f9,
+  'gray-50': #f4f4f5,
+  'cercise-500': #5f1031,
+  'cercise-400': #854962,
+  'cercise-300': #d099b0,
+  'cercise-200': #fecaca,
+  'cercise-100': #f9f3f5,
+  'red-600': #7f1b1b,
+  'red-500': #d83000,
+  'red-200': #fbeae6,
+  'brown-500': #634e01,
+  'signal-yellow-500': #f4e21e,
+  'signal-yellow-400': #fff36c,
+  'signal-green-500': #00bd98,
+  'signal-green-400': #a3ffe0,
+  'black': #202435,
+  'white': #ffffff
+);

package/build/styles/utils/colors.scss

@@ -0,0 +1,15 @@
+@use '../config';
+
+@function color($name) {
+  @if map-has-key(config.$colors, $name) {
+    @return map-get(config.$colors, $name);
+  } @else {
+    @error "No color with the name `#{$name}`. was found.";
+  }
+}
+
+:export {
+  @each $name, $color in config.$colors {
+    #{$name}: $color;
+  }
+}

package/build/styles/utils/colors.scss.js

@@ -0,0 +1,4 @@
+var importedColors = {"orange-600":"#634e01","orange-500":"#ff9900","orange-400":"#ffcb7e","emerald-600":"#296c58","emerald-500":"#30826a","emerald-400":"#64b49d","emerald-300":"#bfe0d5","emerald-200":"#f3f9f7","gray-900":"#141313","gray-800":"#272727","gray-700":"#323232","gray-600":"#505050","gray-500":"#767676","gray-400":"#b0b6b9","gray-300":"#d9dce0","gray-200":"#eff1f4","gray-100":"#f7f8f9","gray-50":"#f4f4f5","cercise-500":"#5f1031","cercise-400":"#854962","cercise-300":"#d099b0","cercise-200":"#fecaca","cercise-100":"#f9f3f5","red-600":"#7f1b1b","red-500":"#d83000","red-200":"#fbeae6","brown-500":"#634e01","signal-yellow-500":"#f4e21e","signal-yellow-400":"#fff36c","signal-green-500":"#00bd98","signal-green-400":"#a3ffe0","black":"#202435","white":"#ffffff"};
+
+export { importedColors as default };
+//# sourceMappingURL=colors.scss.js.map

package/build/styles/utils/colors.scss.js.map

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

package/build/styles/utils/theme.scss

@@ -0,0 +1,33 @@
+@mixin color($dark-color, $light-color) {
+  @include genericThemeCode('color', $dark-color, $light-color);
+}
+
+@mixin background($dark-color, $light-color) {
+  @include genericThemeCode('background', $dark-color, $light-color);
+}
+
+@mixin background-image($dark-color, $light-color) {
+  @include genericThemeCode('background-image', $dark-color, $light-color);
+}
+
+@mixin border-color($dark-color, $light-color) {
+  @include genericThemeCode('border-color', $dark-color, $light-color);
+}
+
+@mixin genericThemeCode($key, $dark-color, $light-color) {
+  body:global(.dark-theme) & {
+    #{$key}: $dark-color;
+  }
+
+  body:global(.light-theme) & {
+    #{$key}: $light-color;
+  }
+
+  body & {
+    #{$key}: $light-color;
+
+    @media (prefers-color-scheme: dark) {
+      #{$key}: $dark-color;
+    }
+  }
+}

package/{esm → build}/utils/dateTime.js

@@ -14,3 +14,4 @@ const convertMsToHMS = ms => {
 };
 
 export { convertMsToHMS };
+//# sourceMappingURL=dateTime.js.map

package/build/utils/dateTime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dateTime.js","sources":["../../src/utils/dateTime.js"],"sourcesContent":["/**\n * Convert time given in miliseconds to a string representation of hours, minutes and seconds\n * in the format HH:MM:SS\n *\n * @param {integer} ms\n */\nexport const convertMsToHMS = ms => {\n  const seconds = Math.floor(ms / 1000);\n  const minutes = Math.floor(seconds / 60);\n  const hours = Math.floor(minutes / 60);\n\n  const secondsLeft = seconds % 60;\n  const minutesLeft = minutes % 60;\n\n  let hmsString = '';\n  if (hours) {\n    hmsString += hours < 10 ? `0${hours}:` : `${hours}:`;\n  }\n\n  hmsString += `${minutesLeft < 10 ? `0${minutesLeft}` : `${minutesLeft}`}:`;\n  hmsString += secondsLeft < 10 ? `0${secondsLeft}` : `${secondsLeft}`;\n\n  return hmsString;\n};\n"],"names":["convertMsToHMS","ms","seconds","Math","floor","minutes","hours","secondsLeft","minutesLeft","hmsString"],"mappings":"AAMaA,MAAAA,cAAc,GAAGC,EAAE,IAAI;EAClC,MAAMC,OAAO,GAAGC,IAAI,CAACC,KAAK,CAACH,EAAE,GAAG,IAAI,CAAC,CAAA;EACrC,MAAMI,OAAO,GAAGF,IAAI,CAACC,KAAK,CAACF,OAAO,GAAG,EAAE,CAAC,CAAA;EACxC,MAAMI,KAAK,GAAGH,IAAI,CAACC,KAAK,CAACC,OAAO,GAAG,EAAE,CAAC,CAAA;AAEtC,EAAA,MAAME,WAAW,GAAGL,OAAO,GAAG,EAAE,CAAA;AAChC,EAAA,MAAMM,WAAW,GAAGH,OAAO,GAAG,EAAE,CAAA;EAEhC,IAAII,SAAS,GAAG,EAAE,CAAA;AAClB,EAAA,IAAIH,KAAK,EAAE;IACTG,SAAS,IAAIH,KAAK,GAAG,EAAE,GAAG,CAAIA,CAAAA,EAAAA,KAAK,CAAG,CAAA,CAAA,GAAG,CAAGA,EAAAA,KAAK,CAAG,CAAA,CAAA,CAAA;AACtD,GAAA;AAEAG,EAAAA,SAAS,IAAI,CAAA,EAAGD,WAAW,GAAG,EAAE,GAAG,CAAIA,CAAAA,EAAAA,WAAW,CAAE,CAAA,GAAG,CAAGA,EAAAA,WAAW,EAAE,CAAG,CAAA,CAAA,CAAA;EAC1EC,SAAS,IAAIF,WAAW,GAAG,EAAE,GAAG,CAAIA,CAAAA,EAAAA,WAAW,CAAE,CAAA,GAAG,CAAGA,EAAAA,WAAW,CAAE,CAAA,CAAA;AAEpE,EAAA,OAAOE,SAAS,CAAA;AAClB;;;;"}

package/build/utils/defaultTheme.js

@@ -0,0 +1,44 @@
+import importedColors from '../styles/utils/colors.scss.js';
+import { css } from 'styled-components';
+
+const defaultTheme = {
+  getColor: name => {
+    if (!importedColors[name]) throw Error(`The color "${name}" is not registered.`);
+    return importedColors[name];
+  },
+  primaryFontFamily: "'Roboto', sans-serif",
+  secondaryFontFamily: "'Overpass', sans-serif",
+  themeProp
+};
+function themeProp(property, darkMode, lightMode, specificity = 2) {
+  const specificityString = Array(specificity).fill("&").join("");
+  return css`
+    body.dark-theme ${specificityString} {
+      ${property}: ${darkMode};
+    }
+
+    body.light-theme ${specificityString} {
+      ${property}: ${lightMode};
+    }
+
+    body:not(.light-theme):not(.dark-theme) ${specificityString} {
+      ${property}: ${lightMode};
+
+      @media (prefers-color-scheme: dark) {
+        ${property}: ${darkMode};
+      }
+    }
+  `;
+}
+function applyDefaultTheme({
+  theme = {},
+  ...props
+}) {
+  return {
+    ...props,
+    theme: Object.assign({}, defaultTheme, theme)
+  };
+}
+
+export { applyDefaultTheme, defaultTheme };
+//# sourceMappingURL=defaultTheme.js.map

package/build/utils/defaultTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultTheme.js","sources":["../../src/utils/defaultTheme.js"],"sourcesContent":["import importedColors from '../styles/utils/colors.scss';\nimport { css } from 'styled-components';\n\nexport const defaultTheme = {\n  getColor: name => {\n    if (!importedColors[name]) throw Error(`The color \"${name}\" is not registered.`);\n    return importedColors[name];\n  },\n  primaryFontFamily: \"'Roboto', sans-serif\",\n  secondaryFontFamily: \"'Overpass', sans-serif\",\n  themeProp\n};\n\n/**\n * Applies a different css property value for dark and light mode\n * @param {string} property - The css property to apply - Eg: `color`, `background`\n * @param {string} darkMode - The value that will be applied in dark mode\n * @param {string} lightMode - The value that will be applied in light mode - Will also be used if either dark or light mode is set\n * @param specificity\n */\nfunction themeProp(property, darkMode, lightMode, specificity = 2) {\n  const specificityString = Array(specificity).fill(\"&\").join(\"\")\n\n  return css`\n    body.dark-theme ${specificityString} {\n      ${property}: ${darkMode};\n    }\n\n    body.light-theme ${specificityString} {\n      ${property}: ${lightMode};\n    }\n\n    body:not(.light-theme):not(.dark-theme) ${specificityString} {\n      ${property}: ${lightMode};\n\n      @media (prefers-color-scheme: dark) {\n        ${property}: ${darkMode};\n      }\n    }\n  `;\n}\n\nexport function applyDefaultTheme({ theme = {}, ...props }) {\n  return {\n    ...props,\n    theme: Object.assign({}, defaultTheme, theme)\n  };\n}\n"],"names":["defaultTheme","getColor","name","importedColors","Error","primaryFontFamily","secondaryFontFamily","themeProp","property","darkMode","lightMode","specificity","specificityString","Array","fill","join","css","applyDefaultTheme","theme","props","Object","assign"],"mappings":";;;AAGO,MAAMA,YAAY,GAAG;EAC1BC,QAAQ,EAAEC,IAAI,IAAI;AAChB,IAAA,IAAI,CAACC,cAAc,CAACD,IAAI,CAAC,EAAE,MAAME,KAAK,CAAC,CAAA,WAAA,EAAcF,IAAI,CAAA,oBAAA,CAAsB,CAAC,CAAA;IAChF,OAAOC,cAAc,CAACD,IAAI,CAAC,CAAA;GAC5B;AACDG,EAAAA,iBAAiB,EAAE,sBAAsB;AACzCC,EAAAA,mBAAmB,EAAE,wBAAwB;AAC7CC,EAAAA,SAAAA;AACF,EAAC;AASD,SAASA,SAASA,CAACC,QAAQ,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,WAAW,GAAG,CAAC,EAAE;AACjE,EAAA,MAAMC,iBAAiB,GAAGC,KAAK,CAACF,WAAW,CAAC,CAACG,IAAI,CAAC,GAAG,CAAC,CAACC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE/D,EAAA,OAAOC,GAAG,CAAA;AACZ,oBAAA,EAAsBJ,iBAAiB,CAAA;AACvC,MAAQJ,EAAAA,QAAQ,KAAKC,QAAQ,CAAA;AAC7B;AACA;AACA,qBAAA,EAAuBG,iBAAiB,CAAA;AACxC,MAAQJ,EAAAA,QAAQ,KAAKE,SAAS,CAAA;AAC9B;AACA;AACA,4CAAA,EAA8CE,iBAAiB,CAAA;AAC/D,MAAQJ,EAAAA,QAAQ,KAAKE,SAAS,CAAA;AAC9B;AACA;AACA,QAAUF,EAAAA,QAAQ,KAAKC,QAAQ,CAAA;AAC/B;AACA;AACA,EAAG,CAAA,CAAA;AACH,CAAA;AAEO,SAASQ,iBAAiBA,CAAC;EAAEC,KAAK,GAAG,EAAE;EAAE,GAAGC,KAAAA;AAAM,CAAC,EAAE;EAC1D,OAAO;AACL,IAAA,GAAGA,KAAK;IACRD,KAAK,EAAEE,MAAM,CAACC,MAAM,CAAC,EAAE,EAAErB,YAAY,EAAEkB,KAAK,CAAA;GAC7C,CAAA;AACH;;;;"}