@startlibs/form 1.0.12 → 1.1.1

package/lib/alt/checkbox/SimpleCheckbox.mjs

@@ -0,0 +1,82 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import React from 'react';
+import { Icon } from '@startlibs/components';
+import { getColor, ifProp, media } from '@startlibs/utils';
+import styled, { css } from 'styled-components';
+import { desaturate, lighten } from 'polished';
+import { Checkbox } from '../../Checkbox.mjs';
+import { HelpText } from '../../Field.mjs';
+
+const _excluded = ["path", "disabled", "label", "descText", "helpText", "isFirst", "isLast", "tabIndex", "className", "framedBoxes", "highlightSelected", "ultraHighlightSelected"];
+var _templateObject;
+const CheckboxPseudoInput = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SimpleCheckbox__CheckboxPseudoInput",
+  componentId: "sc-am8pps-0"
+})(["border-radius:4px;content:'';border:1px solid ", ";width:18px;height:18px;background-color:white;position:absolute;left:-2rem;top:50%;transform:translateY(-50%);", " ", "{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:bold;font-size:16px;color:", ";}"], getColor('gray210'), ifProp('focused', css(["box-shadow:0 0 0 2px rgba(0,0,0,0.1);border-color:", ";"], getColor('gray180'))), Icon, getColor('gray90'));
+const TextLabel = /*#__PURE__*/styled.span.withConfig({
+  displayName: "SimpleCheckbox__TextLabel",
+  componentId: "sc-am8pps-1"
+})(["font-size:13px;line-height:16px;margin:2px 0;display:block;"]);
+const DescText = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SimpleCheckbox__DescText",
+  componentId: "sc-am8pps-2"
+})(["color:rgba(0,0,0,0.4);display:block;font-size:12px;font-weight:400;"]);
+const TextLabelContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SimpleCheckbox__TextLabelContainer",
+  componentId: "sc-am8pps-3"
+})(["display:flex;align-items:center;position:relative;", "{margin-left:0.25rem;}"], HelpText);
+const CheckboxContent = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SimpleCheckbox__CheckboxContent",
+  componentId: "sc-am8pps-4"
+})(["cursor:pointer;position:relative;padding-left:2rem;transition:background 0.2s linear;", ""], props => props.framed && css(["border:1px solid ", ";border-radius:8px;min-height:3rem;min-width:8rem;background:white;width:100%;align-items:center;display:flex;:hover{background:rgb(245,245,245);}:active{background:rgb(235,235,235);transition:none;}padding:10px 12px 10px 32px;", " ", " ", " ", " ", ""], getColor('gray210'), media.desktop(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding: 7px 12px 7px 32px;\n    "]))), props => props.hasErrors && css(["border-color:", " !important;"], getColor('alert')), props => props.checked && props.highlightSelected && css(["border-color:", ";background:", ";:hover{background:", ";}", "{", "{color:", ";}}"], getColor('main'), props => desaturate(0.3, lighten(0.52, getColor("main")(props))), props => desaturate(0.3, lighten(0.52, getColor("main")(props))), CheckboxPseudoInput, Icon, getColor('main')), props => props.checked && props.ultraHighlightSelected && css(["border-color:", ";background:", ";color:white;a,a.link{color:white;}:hover{background:", ";}", "{", "{color:", ";}}", "{color:rgba(255,255,255,0.65);}", "{color:rgba(255,255,255,0.65);}"], getColor('main'), getColor('main'), getColor('main'), CheckboxPseudoInput, Icon, getColor('main'), HelpText, DescText), props => props.disabled && css(["background-color:rgba(0,0,0,0.075) !important;color:rgba(0,0,0,0.6);!important;&[disabled]{opacity:0.75 !important;}", "{background:transparent;}"], CheckboxPseudoInput)));
+const SimpleCheckbox = /*#__PURE__*/styled(_ref => {
+  let {
+      path,
+      disabled,
+      label,
+      descText,
+      helpText,
+      isFirst,
+      isLast,
+      tabIndex,
+      className,
+      framedBoxes,
+      highlightSelected,
+      ultraHighlightSelected
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Checkbox, _extends({
+    className: className,
+    path: path,
+    tabIndex: tabIndex
+  }, rest), _ref2 => {
+    let {
+      checked,
+      hasErrors,
+      focused
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(CheckboxContent, {
+      checked: checked,
+      framed: framedBoxes,
+      highlightSelected: highlightSelected,
+      ultraHighlightSelected: ultraHighlightSelected,
+      hasErrors: hasErrors,
+      disabled: disabled
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "textContainer"
+    }, /*#__PURE__*/React.createElement(TextLabelContainer, null, /*#__PURE__*/React.createElement(CheckboxPseudoInput, {
+      focused: focused,
+      tabIndex: tabIndex
+    }, checked && /*#__PURE__*/React.createElement(Icon, {
+      icon: "check"
+    })), /*#__PURE__*/React.createElement(TextLabel, null, label), helpText && /*#__PURE__*/React.createElement(HelpText, null, helpText)), descText && /*#__PURE__*/React.createElement(DescText, null, descText)));
+  });
+}).withConfig({
+  displayName: "SimpleCheckbox",
+  componentId: "sc-am8pps-5"
+})(["cursor:pointer;position:relative;margin-bottom:1rem;display:flex;", " .textContainer{width:100%;}"], ifProp('disabled', css(["pointer-events:none;"])));
+
+export { SimpleCheckbox };
+//# sourceMappingURL=SimpleCheckbox.mjs.map

package/lib/alt/checkbox/SimpleCheckbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleCheckbox.mjs","sources":["../../../src/alt/checkbox/SimpleCheckbox.jsx"],"sourcesContent":["import React from 'react'\n\nimport {Icon} from '@startlibs/components'\nimport { getColor, ifProp, media } from '@startlibs/utils';\nimport styled, {css} from 'styled-components'\nimport {lighten, desaturate} from 'polished'\nimport {Checkbox} from '../../Checkbox'\nimport {HelpText} from '../../Field'\n\nconst CheckboxPseudoInput = styled.div`\n  border-radius: 4px;\n  content: '';\n  border: 1px solid ${getColor('gray210')};\n  width: 18px;\n  height: 18px;\n  background-color: white;\n  position: absolute;\n  left: -2rem;\n  top: 50%;\n  transform: translateY(-50%);\n\n  ${ifProp('focused', css`\n    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);\n    border-color: ${getColor('gray180')};\n  `)}\n\n  ${Icon} {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%,-50%);\n    font-weight: bold;\n    font-size: 16px;\n    color: ${getColor('gray90')};\n  }\n`\nconst TextLabel = styled.span `\n  font-size: 13px;\n  line-height: 16px;\n  margin: 2px 0;\n  display: block;\n`\nconst DescText = styled.div `\n  color: rgba(0,0,0,0.4);\n  display: block;\n  font-size: 12px;\n  font-weight: 400;\n`\nconst TextLabelContainer = styled.div `\n  display: flex;\n  align-items: center;\n  position: relative;\n  ${HelpText} {\n    margin-left: 0.25rem;\n  }\n`\nconst CheckboxContent = styled.div `\n  cursor: pointer;\n  position: relative;\n  padding-left: 2rem;\n  transition: background 0.2s linear;\n  ${props => props.framed && css`\n    border: 1px solid ${getColor('gray210')};\n    border-radius: 8px;\n    min-height: 3rem;\n    min-width: 8rem;\n    background: white;\n    width: 100%;\n    align-items: center;\n    display: flex;\n    :hover {\n      background: rgb(245,245,245);\n    }\n    :active {\n      background: rgb(235,235,235);\n      transition: none;\n    }\n    padding: 10px 12px 10px 32px;\n    ${media.desktop`\n      padding: 7px 12px 7px 32px;\n    `}\n    ${props => props.hasErrors && css`\n      border-color: ${getColor('alert')} !important;\n    `}\n    ${props => props.checked && props.highlightSelected && css`\n      border-color: ${getColor('main')};\n      background: ${props => desaturate(0.3, lighten(0.52, getColor(\"main\")(props)))};\n      :hover {\n        background: ${props => desaturate(0.3, lighten(0.52, getColor(\"main\")(props)))};\n      }\n      ${CheckboxPseudoInput} {\n        ${Icon} {\n          color: ${getColor('main')};\n        }\n      }\n    `}\n    ${props => props.checked && props.ultraHighlightSelected && css`\n      border-color: ${getColor('main')};\n      background: ${getColor('main')};\n      color: white;\n      a, a.link {\n        color: white;\n      }\n      :hover {\n        background: ${getColor('main')};\n      }\n      ${CheckboxPseudoInput} {\n        ${Icon} {\n          color: ${getColor('main')};\n        }\n      }\n      ${HelpText} {\n        color: rgba(255, 255, 255, 0.65);\n      }\n      ${DescText} {\n        color: rgba(255, 255, 255, 0.65);\n      }\n    `}\n    ${props => props.disabled && css`\n      background-color: rgba(0,0,0,0.075) !important;\n      color: rgba(0,0,0,0.6); !important;\n      &[disabled] {\n        opacity: 0.75 !important;\n      }\n      ${CheckboxPseudoInput} {\n        background: transparent;\n      }\n    `}\n  `}\n`\n\nexport const SimpleCheckbox = styled(({path, disabled, label, descText, helpText, isFirst, isLast, tabIndex, className,framedBoxes,highlightSelected,ultraHighlightSelected,...rest}) =>\n  <Checkbox\n    className={className}\n    path={path}\n    tabIndex={tabIndex}\n    {...rest}\n  >{({checked, hasErrors, focused}) =>\n    <CheckboxContent checked={checked} framed={framedBoxes} highlightSelected={highlightSelected} ultraHighlightSelected={ultraHighlightSelected} hasErrors={hasErrors} disabled={disabled}>\n    <div className=\"textContainer\">\n      <TextLabelContainer>\n        <CheckboxPseudoInput focused={focused} tabIndex={tabIndex}>\n          {checked && <Icon icon=\"check\"/>}\n        </CheckboxPseudoInput>\n        <TextLabel>{label}</TextLabel>{helpText && <HelpText>{helpText}</HelpText>}\n      </TextLabelContainer>\n      {descText && <DescText>{descText}</DescText>}\n    </div>\n    </CheckboxContent>\n  }</Checkbox>\n)`\n  cursor: pointer;\n  position: relative;\n  margin-bottom: 1rem;\n  display: flex;\n  ${ifProp('disabled', css`\n    pointer-events: none;\n  `)}\n  .textContainer {\n    width: 100%;\n  }\n`\n"],"names":["CheckboxPseudoInput","styled","div","withConfig","displayName","componentId","getColor","ifProp","css","Icon","TextLabel","span","DescText","TextLabelContainer","HelpText","CheckboxContent","props","framed","media","desktop","_templateObject","_taggedTemplateLiteral","hasErrors","checked","highlightSelected","desaturate","lighten","ultraHighlightSelected","disabled","SimpleCheckbox","_ref","path","label","descText","helpText","isFirst","isLast","tabIndex","className","framedBoxes","rest","_objectWithoutProperties","_excluded","React","createElement","Checkbox","_extends","_ref2","focused","icon"],"mappings":"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"}

package/lib/alt/checkbox/ToggleCheckbox.mjs

@@ -0,0 +1,68 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { Checkbox } from '../../Checkbox.mjs';
+import { HelpText } from '../../Field.mjs';
+import { getColor, customTheme } from '@startlibs/utils';
+import { darken } from 'polished';
+import { TransitionDiv } from '@startlibs/components';
+
+const _excluded = ["path", "disabled", "rightInfo", "label", "descText", "helpText", "tabIndex", "noFocus", "margin", "className"];
+const Toggle = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ToggleCheckbox__Toggle",
+  componentId: "sc-11ob8ah-1"
+})(["cursor:pointer;flex-shrink:0;margin-left:1rem;float:right;transition:0.25s ease;width:2.75rem;height:18px;border-radius:18px;background:", ";display:inline-block;position:relative;font-weight:600;:after{content:'';transition:0.25s ease;border-radius:50%;display:block;position:absolute;top:50%;transform:translateY(-50%);width:14px;height:14px;background:white;", "}", ""], props => props.checked ? getColor('main') : 'rgba(0,0,0,0.14)', props => props.checked ? css(["margin-left:-2px;left:100%;transform:translate(-100%,-50%);"]) : css(["margin-left:2px;left:0;"]), customTheme('ToggleCheckbox'));
+const ToggleLabel = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ToggleCheckbox__ToggleLabel",
+  componentId: "sc-11ob8ah-2"
+})(["flex-basis:0;flex-grow:1;display:inline-block;font-size:15px;"]);
+const DescText = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ToggleCheckbox__DescText",
+  componentId: "sc-11ob8ah-3"
+})(["font-weight:400;color:rgba(0,0,0,0.4);font-size:12px;margin-top:0.25rem;"]);
+const ToggleCheckboxStyled = /*#__PURE__*/styled(Checkbox).withConfig({
+  displayName: "ToggleCheckbox__ToggleCheckboxStyled",
+  componentId: "sc-11ob8ah-4"
+})(["position:relative;border-radius:8px;padding:1rem;min-height:42px;font-weight:550;cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:background 0.2s linear;& ~ &{margin-top:-1rem;}", " ", " ", " ", " ", ""], props => props.margin ? css(["margin-bottom:", "px;"], props => props.margin) : css(["margin-bottom:1.5rem;& ~ &{margin-top:-1rem;}"]), props => props.gray ? "\n    background-color: rgba(0,0,0,0.06);\n    :hover {\n      background-color: rgba(0,0,0,0.08);\n    }\n    :active {\n      background-color: rgba(0,0,0,0.1);\n      transition: none;\n    }\n  " : css(["background-color:", ";:hover{background:", ";}:active{background:", ";transition:none;}"], getColor('lightBluishGray'), props => darken(0.035, getColor('lightBluishGray')(props)), props => darken(0.05, getColor('lightBluishGray')(props))), props => !props.noFocus && css([":focus-within{background-color:rgba(0,0,0,0.09);:after{content:'';pointer-events:none;position:absolute;top:-3px;right:-3px;left:-3px;bottom:-3px;border-radius:9px;border:2px solid rgba(0,0,0,0.15);}}"]), props => props.disabled && "\n    opacity: 0.8;\n    pointer-events:none;\n  ", customTheme('ToggleCheckboxBox'));
+const ToggleCheckbox = /*#__PURE__*/styled(_ref => {
+  let {
+      path,
+      disabled,
+      rightInfo,
+      label,
+      descText,
+      helpText,
+      tabIndex,
+      noFocus,
+      margin,
+      className
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(ToggleCheckboxStyled, _extends({
+    path: path,
+    tabIndex: tabIndex,
+    disabled: disabled,
+    noFocus: noFocus,
+    className: className,
+    margin: margin
+  }, rest), _ref2 => {
+    let {
+      disabled,
+      checked,
+      hasErrors,
+      focused
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToggleLabel, null, label, helpText && /*#__PURE__*/React.createElement(HelpText, null, " ", helpText), /*#__PURE__*/React.createElement(TransitionDiv, {
+      block: true
+    }, descText && /*#__PURE__*/React.createElement(DescText, null, descText))), rightInfo, /*#__PURE__*/React.createElement(Toggle, {
+      checked: checked
+    }));
+  });
+}).withConfig({
+  displayName: "ToggleCheckbox",
+  componentId: "sc-11ob8ah-5"
+})([""]);
+
+export { ToggleCheckbox };
+//# sourceMappingURL=ToggleCheckbox.mjs.map

package/lib/alt/checkbox/ToggleCheckbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleCheckbox.mjs","sources":["../../../src/alt/checkbox/ToggleCheckbox.jsx"],"sourcesContent":["import React from 'react'\nimport styled, {css} from 'styled-components'\nimport {Checkbox} from '../../Checkbox'\nimport {HelpText} from '../../Field'\nimport {customTheme, getColor} from '@startlibs/utils'\nimport {darken} from 'polished';\nimport { TransitionDiv } from '@startlibs/components';\nconst ToggleContainer = styled.div `\n`\n\nconst Toggle = styled.div `\n  cursor: pointer;\n  flex-shrink: 0;\n  margin-left: 1rem;\n  float: right;\n  transition: 0.25s ease;\n  width: 2.75rem;\n  height: 18px;\n  border-radius: 18px;\n  background: ${props => props.checked ? getColor('main') : 'rgba(0,0,0,0.14)'};\n  display: inline-block;\n  position: relative;\n  font-weight: 600;\n  :after {\n    content: '';\n    transition: 0.25s ease;\n    border-radius: 50%;\n    display: block;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 14px;\n    height: 14px;\n    background: white;\n    ${props => props.checked ? css`\n      margin-left: -2px;\n      left: 100%;\n      transform: translate(-100%,-50%);\n      ` : css`\n      margin-left: 2px;\n      left: 0;\n    `}\n  }\n  ${customTheme('ToggleCheckbox')}\n`\nconst ToggleLabel = styled.div `\n  flex-basis: 0;\n  flex-grow: 1;\n  display: inline-block;\n  font-size: 15px;\n`\nconst DescText = styled.div `\n  font-weight: 400;\n  color: rgba(0,0,0,0.4);\n  font-size: 12px;\n  margin-top: 0.25rem;\n`\nconst ToggleCheckboxStyled = styled(Checkbox)`\n  position:relative;\n  border-radius: 8px;\n  padding: 1rem;\n  min-height: 42px;\n  font-weight: 550;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between; \n  transition: background 0.2s linear;\n  & ~ & {\n    margin-top: -1rem;\n  }\n  ${props => props.margin ? css`\n    margin-bottom: ${props => props.margin}px;\n  `: css`\n    margin-bottom: 1.5rem;\n    & ~ & {\n      margin-top: -1rem;\n    }\n  `}\n  ${props => props.gray ? `\n    background-color: rgba(0,0,0,0.06);\n    :hover {\n      background-color: rgba(0,0,0,0.08);\n    }\n    :active {\n      background-color: rgba(0,0,0,0.1);\n      transition: none;\n    }\n  `:css`\n    background-color: ${getColor('lightBluishGray')};\n    :hover {\n      background: ${props => darken(0.035, getColor('lightBluishGray')(props))};\n    }\n    :active {\n      background: ${props => darken(0.05, getColor('lightBluishGray')(props))};\n      transition: none;\n    }\n  `}\n  ${props => !props.noFocus && css`\n    :focus-within {\n      background-color: rgba(0,0,0,0.09);\n      :after{\n        content: '';\n        pointer-events: none;\n        position: absolute;\n        top: -3px;\n        right: -3px;\n        left: -3px;\n        bottom: -3px;\n        border-radius: 9px;\n        border: 2px solid rgba(0, 0, 0, 0.15);\n      }\n    }\n  `}\n  ${props => props.disabled && `\n    opacity: 0.8;\n    pointer-events:none;\n  `}\n  ${customTheme('ToggleCheckboxBox')}\n`\n\nexport const ToggleCheckbox = styled(({path, disabled, rightInfo, label, descText, helpText, tabIndex,noFocus, margin, className,...rest}) =>\n  <ToggleCheckboxStyled\n    path={path}\n    tabIndex={tabIndex}\n    disabled={disabled}\n    noFocus={noFocus}\n    className={className}\n    margin={margin}\n    {...rest}\n  >{({disabled, checked, hasErrors, focused}) =>\n    <>\n      <ToggleLabel>\n        {label}{helpText && <HelpText> {helpText}</HelpText>}\n        <TransitionDiv block>{descText && <DescText>{descText}</DescText>}</TransitionDiv>\n      </ToggleLabel>\n      {rightInfo}\n      <Toggle checked={checked}/>\n    </>\n  }\n  </ToggleCheckboxStyled>\n)`\n`\n"],"names":["Toggle","styled","div","withConfig","displayName","componentId","props","checked","getColor","css","customTheme","ToggleLabel","DescText","ToggleCheckboxStyled","Checkbox","margin","gray","darken","noFocus","disabled","ToggleCheckbox","_ref","path","rightInfo","label","descText","helpText","tabIndex","className","rest","_objectWithoutProperties","_excluded","React","createElement","_extends","_ref2","hasErrors","focused","Fragment","HelpText","TransitionDiv","block"],"mappings":"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"}

package/lib/alt/radiobox/CleanTabRadiobox.mjs

@@ -0,0 +1,44 @@
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { getColor, customTheme } from '@startlibs/utils';
+import { Radiobox } from '../../Radiobox.mjs';
+
+const _excluded = ["label", "white", "icon"];
+const Tab = /*#__PURE__*/styled.div.withConfig({
+  displayName: "CleanTabRadiobox__Tab",
+  componentId: "sc-uh7jfp-0"
+})(["width:100%;font-size:16px;color:", ";font-weight:500;margin-left:0;padding:12px 2.5rem;flex-grow:1;height:100%;border-bottom:1px solid ", ";position:relative;", " ", ""], getColor("gray120"), getColor("gray210"), props => props.checked ? css(["color:", ";:after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:3px;background:", ";border-radius:10px;}"], getColor("main"), getColor("main")) : css(["cursor:pointer;:hover{color:", ";}"], getColor("gray90")), customTheme('CleanTabButton'));
+const InnerButton = /*#__PURE__*/styled.a.withConfig({
+  displayName: "CleanTabRadiobox__InnerButton",
+  componentId: "sc-uh7jfp-1"
+})([""]);
+const CleanTabRadiobox = /*#__PURE__*/styled(_ref => {
+  let {
+      label,
+      white,
+      icon
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Radiobox, props, _ref2 => {
+    let {
+      disabled,
+      checked,
+      hasErrors,
+      focused
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(Tab, {
+      innerAs: InnerButton,
+      tabIndex: -1,
+      focused: focused,
+      checked: checked,
+      disabled: disabled
+    }, label);
+  });
+}).withConfig({
+  displayName: "CleanTabRadiobox",
+  componentId: "sc-uh7jfp-2"
+})(["display:inline-block;"]);
+
+export { CleanTabRadiobox, Tab };
+//# sourceMappingURL=CleanTabRadiobox.mjs.map

package/lib/alt/radiobox/CleanTabRadiobox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CleanTabRadiobox.mjs","sources":["../../../src/alt/radiobox/CleanTabRadiobox.jsx"],"sourcesContent":["import React from 'react'\nimport styled, {css} from 'styled-components'\nimport {getColor, customTheme} from '@startlibs/utils'\nimport {Radiobox} from '../../Radiobox'\n\nexport const Tab = styled.div`\n  width:100%;\n  font-size: 16px;\n  color: ${getColor(\"gray120\")};\n  font-weight: 500;\n  margin-left: 0;  \n  padding: 12px 2.5rem;\n  flex-grow: 1;\n  height: 100%;\n  border-bottom: 1px solid ${getColor(\"gray210\")};\n  position: relative;\n  ${props => props.checked ? css`\n    color: ${getColor(\"main\")};\n    :after {\n      content: '';\n      position: absolute;\n      bottom: -2px;\n      left: 0;\n      right: 0;\n      height: 3px;\n      background: ${getColor(\"main\")};\n      border-radius: 10px;\n    }\n  `: css`\n    cursor: pointer;\n    :hover {\n      color: ${getColor(\"gray90\")};\n    }\n  `}\n  ${customTheme('CleanTabButton')}\n`\n\nconst InnerButton = styled.a``\n\nexport const CleanTabRadiobox = styled(({label, white,icon,...props}) =>\n  <Radiobox {...props}>{({disabled, checked, hasErrors, focused}) =>\n    <Tab innerAs={InnerButton} tabIndex={-1} focused={focused} checked={checked} disabled={disabled}>{label}</Tab>\n  }</Radiobox>\n)`\n  display: inline-block;\n`"],"names":["Tab","styled","div","withConfig","displayName","componentId","getColor","props","checked","css","customTheme","InnerButton","a","CleanTabRadiobox","_ref","label","white","icon","_objectWithoutProperties","_excluded","React","createElement","Radiobox","_ref2","disabled","hasErrors","focused","innerAs","tabIndex"],"mappings":";;;;;;;MAKaA,GAAG,gBAAGC,MAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,uBAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,kCAAA,EAAA,qGAAA,EAAA,qBAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EAGlBC,QAAQ,CAAC,SAAS,CAAC,EAMDA,QAAQ,CAAC,SAAS,CAAC,EAE5CC,KAAK,IAAIA,KAAK,CAACC,OAAO,GAAGC,GAAG,gIACnBH,QAAQ,CAAC,MAAM,CAAC,EAQTA,QAAQ,CAAC,MAAM,CAAC,CAAA,GAG/BG,GAAG,CAGOH,CAAAA,8BAAAA,EAAAA,IAAAA,CAAAA,EAAAA,QAAQ,CAAC,QAAQ,CAAC,CAE9B,EACCI,WAAW,CAAC,gBAAgB,CAAC,EAChC;AAED,MAAMC,WAAW,gBAAGV,MAAM,CAACW,CAAC,CAAAT,UAAA,CAAA;EAAAC,WAAA,EAAA,+BAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAE,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA;AAEjBQ,MAAAA,gBAAgB,gBAAGZ,MAAM,CAACa,IAAA,IAAA;EAAA,IAAC;MAACC,KAAK;MAAEC,KAAK;AAACC,MAAAA,IAAAA;AAAa,KAAC,GAAAH,IAAA;AAANP,IAAAA,KAAK,GAAAW,wBAAA,CAAAJ,IAAA,EAAAK,SAAA,CAAA,CAAA;EAAA,oBACjEC,KAAA,CAAAC,aAAA,CAACC,QAAQ,EAAKf,KAAK,EAAGgB,KAAA,IAAA;IAAA,IAAC;MAACC,QAAQ;MAAEhB,OAAO;MAAEiB,SAAS;AAAEC,MAAAA,OAAAA;AAAO,KAAC,GAAAH,KAAA,CAAA;AAAA,IAAA,oBAC5DH,KAAA,CAAAC,aAAA,CAACrB,GAAG,EAAA;AAAC2B,MAAAA,OAAO,EAAEhB,WAAY;MAACiB,QAAQ,EAAE,CAAC,CAAE;AAACF,MAAAA,OAAO,EAAEA,OAAQ;AAAClB,MAAAA,OAAO,EAAEA,OAAQ;AAACgB,MAAAA,QAAQ,EAAEA,QAAAA;AAAS,KAAA,EAAET,KAAW,CAAC,CAAA;AAAA,GACrG,CAAC,CAAA;AAAA,CACd,CAAC,CAAAZ,UAAA,CAAA;EAAAC,WAAA,EAAA,kBAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAEA,CAAA,CAAA,CAAA,uBAAA,CAAA;;;;"}

package/lib/alt/radiobox/IconRadioBox.mjs

@@ -0,0 +1,52 @@
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { Icon } from '@startlibs/components';
+import { getColor, customTheme } from '@startlibs/utils';
+import { Radiobox } from '../../Radiobox.mjs';
+import { desaturate, lighten } from 'polished';
+
+const _excluded = ["icon", "label", "highlightedDesc"];
+const IconRadioBoxText = /*#__PURE__*/styled.div.withConfig({
+  displayName: "IconRadioBox__IconRadioBoxText",
+  componentId: "sc-ka3uhk-0"
+})(["flex-grow:1;padding:0 0.5rem 0.5rem;min-height:2rem;display:flex;justify-content:center;align-items:center;text-align:center;font-size:12px;color:", ";", " ", ""], getColor('gray120'), props => props.checked && css(["color:", ";"], getColor('main')), props => props.highlightedDesc && css(["background:", ";padding:0.25rem 0.5rem;min-height:3rem;", ""], getColor('gray240'), props => props.checked && css(["background:", ";"], props => desaturate(0.3, lighten(0.52, getColor("main")(props))))));
+const IconRadioBoxIconContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "IconRadioBox__IconRadioBoxIconContainer",
+  componentId: "sc-ka3uhk-1"
+})(["display:flex;justify-content:center;align-items:center;text-align:center;"]);
+const Wrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "IconRadioBox__Wrapper",
+  componentId: "sc-ka3uhk-2"
+})(["width:100%;display:flex;flex-direction:column;cursor:pointer;border-radius:8px;background-color:white;border:1px solid ", ";overflow:hidden;color:", ";", "{font-size:100px;line-height:50px;line-height:76px;width:100%;}", " input{opacity:0;position:absolute;left:-20000000px;}", " ", ""], getColor('gray210'), getColor('gray150'), Icon, props => props.checked && css(["color:", ";border-color:", ";"], getColor('main'), getColor('main')), props => props.focused && "\n    ".concat(IconRadioBoxIconContainer, "::after {\n      content: '';\n      position: absolute;\n      top: -4px;\n      right: -4px;\n      left: -4px;\n      bottom: -4px;\n      border-radius: 10px;\n      border: 3px solid rgba(0, 0, 0, 0.15);\n  }"), customTheme("IconRadioBox"));
+const IconRadioBox = /*#__PURE__*/styled(_ref => {
+  let {
+      icon,
+      label,
+      highlightedDesc
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Radiobox, props, _ref2 => {
+    let {
+      checked,
+      focused,
+      hasErrors,
+      disabled
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(Wrapper, {
+      checked: checked,
+      focused: focused
+    }, /*#__PURE__*/React.createElement(IconRadioBoxIconContainer, null, /*#__PURE__*/React.createElement(Icon, {
+      icon: icon
+    })), checked, /*#__PURE__*/React.createElement(IconRadioBoxText, {
+      highlightedDesc: highlightedDesc,
+      checked: checked
+    }, label));
+  });
+}).withConfig({
+  displayName: "IconRadioBox",
+  componentId: "sc-ka3uhk-3"
+})(["outline:none;"]);
+
+export { IconRadioBox, IconRadioBoxIconContainer, IconRadioBoxText };
+//# sourceMappingURL=IconRadioBox.mjs.map

package/lib/alt/radiobox/IconRadioBox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconRadioBox.mjs","sources":["../../../src/alt/radiobox/IconRadioBox.jsx"],"sourcesContent":["import React from 'react'\nimport styled, {css} from 'styled-components'\nimport {Icon} from '@startlibs/components'\nimport {customTheme, getColor} from '@startlibs/utils'\nimport {Radiobox} from '../../Radiobox'\nimport {lighten, desaturate} from 'polished'\n\nexport const IconRadioBoxText = styled.div`\n  flex-grow: 1;\n  padding: 0 0.5rem 0.5rem;\n  min-height: 2rem;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  font-size: 12px;\n  color: ${getColor('gray120')};\n  ${props => props.checked && css`\n    color: ${getColor('main')};\n  `}\n  ${props => props.highlightedDesc && css`\n    background: ${getColor('gray240')};\n    padding: 0.25rem 0.5rem;\n    min-height: 3rem;\n    ${props => props.checked && css`\n      background: ${props => desaturate(0.3, lighten(0.52, getColor(\"main\")(props)))};\n    `}\n  `}\n`\n\nexport const IconRadioBoxIconContainer = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n`\n\nconst Wrapper = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  cursor: pointer;\n  border-radius: 8px;\n  background-color: white;\n  border: 1px solid ${getColor('gray210')};\n  overflow: hidden;\n  color: ${getColor('gray150')};\n\n  ${Icon} {\n    font-size: 100px;\n    line-height: 50px;\n    line-height: 76px;\n    width: 100%;\n  }\n\n  ${props => props.checked && css`\n    color: ${getColor('main')};\n    border-color: ${getColor('main')};\n  `}\n\n  input {\n    opacity: 0;\n    position: absolute;\n    left: -20000000px;\n  }\n\n  ${props => props.focused && `\n    ${IconRadioBoxIconContainer}::after {\n      content: '';\n      position: absolute;\n      top: -4px;\n      right: -4px;\n      left: -4px;\n      bottom: -4px;\n      border-radius: 10px;\n      border: 3px solid rgba(0, 0, 0, 0.15);\n  }`}\n\n  ${customTheme(\"IconRadioBox\")}\n`\n\n\nexport const IconRadioBox = styled(({icon, label, highlightedDesc,...props}) =>\n  <Radiobox {...props}>{({checked, focused, hasErrors, disabled}) =>\n    <Wrapper checked={checked} focused={focused}>\n      <IconRadioBoxIconContainer><Icon icon={icon}/></IconRadioBoxIconContainer>\n      {checked}\n      <IconRadioBoxText highlightedDesc={highlightedDesc} checked={checked}>\n        {label}\n      </IconRadioBoxText>\n    </Wrapper>\n  }</Radiobox>\n)`outline: none;`\n"],"names":["IconRadioBoxText","styled","div","withConfig","displayName","componentId","getColor","props","checked","css","highlightedDesc","desaturate","lighten","IconRadioBoxIconContainer","Wrapper","Icon","focused","concat","customTheme","IconRadioBox","_ref","icon","label","_objectWithoutProperties","_excluded","React","createElement","Radiobox","_ref2","hasErrors","disabled"],"mappings":"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"}

package/lib/alt/radiobox/SimpleRadiobox.mjs

@@ -0,0 +1,61 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import React from 'react';
+import { getColor, ifProp, media } from '@startlibs/utils';
+import styled, { css } from 'styled-components';
+import { desaturate, lighten } from 'polished';
+import { HelpText } from '../../Field.mjs';
+import { Radiobox } from '../../Radiobox.mjs';
+
+var _templateObject;
+const CssCircle = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SimpleRadiobox__CssCircle",
+  componentId: "sc-qv83xo-0"
+})(["border-radius:50%;content:'';border:1px solid ", ";width:18px;height:18px;background-color:white;position:absolute;left:-2rem;top:50%;transform:translateY(-50%);", " ", ""], getColor('gray210'), ifProp('focused', css(["box-shadow:0 0 0 2px rgba(0,0,0,0.1);border-color:", ";"], getColor('gray180'))), ifProp('checked', css([":before{content:'';width:8px;height:8px;top:50%;transform:translateY(-50%);left:4px;border-radius:50%;position:absolute;background-color:", ";}"], getColor('gray90'))));
+const TextLabel = /*#__PURE__*/styled.span.withConfig({
+  displayName: "SimpleRadiobox__TextLabel",
+  componentId: "sc-qv83xo-1"
+})(["font-size:13px;line-height:16px;margin:2px 0.25rem 2px 0;display:block;"]);
+const DescText = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SimpleRadiobox__DescText",
+  componentId: "sc-qv83xo-2"
+})(["color:rgba(0,0,0,0.4);display:block;font-size:12px;font-weight:400;"]);
+const TextLabelContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SimpleRadiobox__TextLabelContainer",
+  componentId: "sc-qv83xo-3"
+})(["display:flex;align-items:center;position:relative;flex-wrap:wrap;"]);
+const RadioboxContent = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SimpleRadiobox__RadioboxContent",
+  componentId: "sc-qv83xo-4"
+})(["cursor:pointer;position:relative;padding-left:2rem;transition:background 0.2s linear;", ""], props => props.framed && css(["border:1px solid ", ";border-radius:8px;min-height:3rem;min-width:8rem;background:white;width:100%;align-items:center;display:flex;:hover{background:rgb(245,245,245);}:active{background:rgb(235,235,235);transition:none;}padding:10px 12px 10px 32px;", " ", " ", " ", " ", ""], getColor('gray210'), media.desktop(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding: 7px 12px 7px 32px;\n    "]))), props => props.hasErrors && css(["border-color:", " !important;"], getColor('alert')), props => props.checked && props.highlightSelected && css(["border-color:", ";background:", ";:hover{background:", ";}", "{:before{background-color:", ";}}"], getColor('main'), props => desaturate(0.3, lighten(0.52, getColor("main")(props))), props => desaturate(0.3, lighten(0.52, getColor("main")(props))), CssCircle, getColor('main')), props => props.checked && props.ultraHighlightSelected && css(["border-color:", ";background:", ";color:white;:hover{background:", ";}", "{:before{background-color:", ";}}", "{color:rgba(255,255,255,0.65);}", "{color:rgba(255,255,255,0.65);}"], getColor('main'), getColor('main'), getColor('main'), CssCircle, getColor('main'), HelpText, DescText), props => props.disabled && css(["background-color:rgba(0,0,0,0.075) !important;&[disabled]{opacity:0.75 !important;}", "{background:rgba(255,255,255,0.25);}"], CssCircle)));
+const SimpleRadiobox = /*#__PURE__*/styled(props => /*#__PURE__*/React.createElement(Radiobox, props, _ref => {
+  let {
+    disabled,
+    checked,
+    hasErrors,
+    focused,
+    tabIndex,
+    framedBoxes,
+    highlightSelected,
+    ultraHighlightSelected
+  } = _ref;
+  return /*#__PURE__*/React.createElement(RadioboxContent, {
+    checked: checked,
+    framed: props.framedBoxes,
+    highlightSelected: props.highlightSelected,
+    ultraHighlightSelected: props.ultraHighlightSelected,
+    hasErrors: hasErrors,
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "textContainer"
+  }, /*#__PURE__*/React.createElement(TextLabelContainer, null, /*#__PURE__*/React.createElement(CssCircle, {
+    checked: checked,
+    focused: focused,
+    tabIndex: tabIndex
+  }), /*#__PURE__*/React.createElement(TextLabel, null, props.label), props.helpText && /*#__PURE__*/React.createElement(HelpText, null, " ", props.helpText)), props.descText && /*#__PURE__*/React.createElement(DescText, null, props.descText)));
+})).withConfig({
+  displayName: "SimpleRadiobox",
+  componentId: "sc-qv83xo-5"
+})(["cursor:pointer;position:relative;margin-bottom:1rem;display:flex;", " .textContainer{width:100%;}"], ifProp('disabled', css(["pointer-events:none;"])));
+
+export { SimpleRadiobox };
+//# sourceMappingURL=SimpleRadiobox.mjs.map

package/lib/alt/radiobox/SimpleRadiobox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleRadiobox.mjs","sources":["../../../src/alt/radiobox/SimpleRadiobox.jsx"],"sourcesContent":["import React from 'react'\n\nimport { getColor, ifProp, media } from '@startlibs/utils';\nimport styled, {css} from 'styled-components'\nimport {lighten, desaturate} from 'polished'\nimport {HelpText} from '../../Field'\nimport {Radiobox} from '../../Radiobox'\n\nconst CssCircle = styled.div`\n  border-radius: 50%;\n  content: '';\n  border: 1px solid ${getColor('gray210')};\n  width: 18px;\n  height: 18px;\n  background-color: white;\n  position: absolute;\n  left: -2rem;\n  top: 50%;\n  transform: translateY(-50%);\n  \n  ${ifProp('focused', css`\n    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);\n    border-color: ${getColor('gray180')};\n  `)}\n\n  ${ifProp('checked', css`\n    :before { \n      content: '';\n      width: 8px;\n      height: 8px;\n      top: 50%;\n      transform: translateY(-50%);\n      left: 4px;\n      border-radius: 50%;\n      position: absolute;\n      background-color: ${getColor('gray90')};\n    }\n  `)}\n  \n`\nconst TextLabel = styled.span `\n  font-size: 13px;\n  line-height: 16px;\n  margin: 2px 0.25rem 2px 0;\n  display: block;\n`\nconst DescText = styled.div `\n  color: rgba(0,0,0,0.4);\n  display: block;\n  font-size: 12px;\n  font-weight: 400;\n`\nconst TextLabelContainer = styled.div `\n  display: flex;\n  align-items: center;\n  position: relative;\n  flex-wrap: wrap;\n`\nconst RadioboxContent = styled.div `\n  cursor: pointer;\n  position: relative;\n  padding-left: 2rem;\n  transition: background 0.2s linear;\n  ${props => props.framed && css`\n    border: 1px solid ${getColor('gray210')};\n    border-radius: 8px;\n    min-height: 3rem;\n    min-width: 8rem;\n    background: white;\n    width: 100%;\n    align-items: center;\n    display: flex;\n    :hover {\n      background: rgb(245,245,245);\n    }\n    :active {\n      background: rgb(235,235,235);\n      transition: none;\n    }\n    padding: 10px 12px 10px 32px;\n    ${media.desktop`\n      padding: 7px 12px 7px 32px;\n    `}\n    ${props => props.hasErrors && css`\n      border-color: ${getColor('alert')} !important;\n    `}\n    ${props => props.checked && props.highlightSelected && css`\n      border-color: ${getColor('main')};\n      background: ${props => desaturate(0.3, lighten(0.52, getColor(\"main\")(props)))};\n      :hover {\n        background: ${props => desaturate(0.3, lighten(0.52, getColor(\"main\")(props)))};\n      }\n      ${CssCircle} {\n        :before { \n          background-color: ${getColor('main')};\n        }\n      }\n    `}\n    ${props => props.checked && props.ultraHighlightSelected && css`\n      border-color: ${getColor('main')};\n      background: ${getColor('main')};\n      color: white;\n      :hover {\n        background: ${getColor('main')};\n      }\n      ${CssCircle} {\n        :before { \n          background-color: ${getColor('main')};\n        }\n      }\n      ${HelpText} {\n        color: rgba(255, 255, 255, 0.65);\n      }\n      ${DescText} {\n        color: rgba(255, 255, 255, 0.65);\n      }\n    `}\n    ${props => props.disabled && css`\n      background-color: rgba(0,0,0,0.075) !important;\n      &[disabled] {\n        opacity: 0.75 !important;\n      }\n      ${CssCircle} {\n        background: rgba(255,255,255,0.25);\n      }\n    `}\n  `}\n`\n\nexport const SimpleRadiobox = styled((props) =>\n  <Radiobox {...props}>{({disabled, checked, hasErrors, focused, tabIndex, framedBoxes, highlightSelected, ultraHighlightSelected}) =>\n    <RadioboxContent checked={checked} framed={props.framedBoxes} highlightSelected={props.highlightSelected} ultraHighlightSelected={props.ultraHighlightSelected} hasErrors={hasErrors} disabled={disabled}>\n      <div className=\"textContainer\">\n        <TextLabelContainer>\n          <CssCircle checked={checked} focused={focused} tabIndex={tabIndex}/>\n          <TextLabel>{props.label}</TextLabel>{props.helpText && <HelpText> {props.helpText}</HelpText>}\n        </TextLabelContainer>\n        {props.descText && <DescText>{props.descText}</DescText>}\n      </div>\n    </RadioboxContent>\n  }</Radiobox>\n)`\n  cursor: pointer;\n  position: relative;\n  margin-bottom: 1rem;\n  display: flex;\n  ${ifProp('disabled', css`\n    pointer-events: none;\n  `)}\n  .textContainer {\n    width: 100%;\n  }\n`"],"names":["CssCircle","styled","div","withConfig","displayName","componentId","getColor","ifProp","css","TextLabel","span","DescText","TextLabelContainer","RadioboxContent","props","framed","media","desktop","_templateObject","_taggedTemplateLiteral","hasErrors","checked","highlightSelected","desaturate","lighten","ultraHighlightSelected","HelpText","disabled","SimpleRadiobox","React","createElement","Radiobox","_ref","focused","tabIndex","framedBoxes","className","label","helpText","descText"],"mappings":"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"}

package/lib/alt/radiobox/TabRadiobox.mjs

@@ -0,0 +1,54 @@
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { Button } from '@startlibs/components';
+import { getColor, ifProp, media, customTheme } from '@startlibs/utils';
+import { Radiobox } from '../../Radiobox.mjs';
+import { desaturate, lighten } from 'polished';
+
+const _excluded = ["isLast", "isFirst", "label", "white", "icon"];
+var _templateObject;
+const TabButton = /*#__PURE__*/styled(Button).withConfig({
+  displayName: "TabRadiobox__TabButton",
+  componentId: "sc-1vu3bcn-0"
+})(["width:100%;margin-left:0;padding:9px 1rem;flex-grow:1;background:", ";box-shadow:none;color:", ";border:1px solid ", ";border-left-width:0;height:100%;:hover{background:", ";}", " ", " ", " ", "  ", "  ", ""], props => props.white ? 'white' : getColor('gray240'), getColor('gray120'), getColor('gray210'), props => desaturate(0.6, lighten(0.5, getColor("main")(props))), ifProp('checked', css(["&,&:hover{border-color:", ";background-color:", ";border-left-width:1px;color:#fff;cursor:default;}"], getColor('main'), getColor('main'))), props => props.isFirst && "\n    border-left-width: 1px;\n  ", props => props.isFirst !== undefined && !props.isFirst && "\n    border-bottom-left-radius: 0;\n    border-top-left-radius: 0;\n    :focus:after{\n      border-bottom-left-radius: 2px;\n      border-top-left-radius: 2px;\n    }\n  ", props => props.isLast !== undefined && !props.isLast && "\n    border-bottom-right-radius: 0;\n    border-top-right-radius: 0;\n    :focus:after{\n      border-bottom-right-radius: 2px;\n      border-top-right-radius: 2px;\n      z-index: 2;\n    }\n  ", media.mobile(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    min-width: 0;\n    ", "\n  "])), props => props.icon ? "\n      padding-left: 1.25rem;\n      padding-right: 1rem;\n    " : "\n      padding-left: 0.25rem;\n      padding-right: 0.25rem;\n    "), customTheme('TabButton'));
+const InnerButton = /*#__PURE__*/styled.a.withConfig({
+  displayName: "TabRadiobox__InnerButton",
+  componentId: "sc-1vu3bcn-1"
+})([""]);
+const TabRadiobox = /*#__PURE__*/styled(_ref => {
+  let {
+      isLast,
+      isFirst,
+      label,
+      white,
+      icon
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Radiobox, props, _ref2 => {
+    let {
+      disabled,
+      checked,
+      hasErrors,
+      focused
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(TabButton, {
+      innerAs: InnerButton,
+      tabIndex: -1,
+      focused: focused,
+      isFirst: isFirst,
+      isLast: isLast,
+      checked: checked,
+      disabled: disabled,
+      white: white,
+      icon: icon
+    }, label);
+  });
+}).withConfig({
+  displayName: "TabRadiobox",
+  componentId: "sc-1vu3bcn-2"
+})(["display:inline-block;"]);
+
+export { TabButton, TabRadiobox };
+//# sourceMappingURL=TabRadiobox.mjs.map

package/lib/alt/radiobox/TabRadiobox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabRadiobox.mjs","sources":["../../../src/alt/radiobox/TabRadiobox.jsx"],"sourcesContent":["import React from 'react'\nimport styled, {css} from 'styled-components'\nimport {Button} from '@startlibs/components'\nimport {ifProp, getColor, media, customTheme} from '@startlibs/utils'\nimport {Radiobox} from '../../Radiobox'\nimport {lighten, desaturate} from 'polished'\n\nexport const TabButton = styled(Button)`\n  width:100%;\n  margin-left: 0;  \n  padding: 9px 1rem;\n  flex-grow: 1;\n  background: ${props => props.white ? 'white' : getColor('gray240')};\n  box-shadow: none;\n  color: ${getColor('gray120')};\n  border: 1px solid ${getColor('gray210')};\n  border-left-width: 0;\n  height: 100%;\n  :hover {\n    background: ${props => desaturate(0.6, lighten(0.5, getColor(\"main\")(props)))};\n  }\n  ${ifProp('checked', css`\n    &, &:hover {\n      border-color: ${getColor('main')};\n      background-color: ${getColor('main')};\n      border-left-width: 1px;\n      color: #fff;\n      cursor: default;\n    }\n  `)}\n  \n  ${props => props.isFirst && `\n    border-left-width: 1px;\n  `}\n  ${props => props.isFirst!==undefined && !props.isFirst && `\n    border-bottom-left-radius: 0;\n    border-top-left-radius: 0;\n    :focus:after{\n      border-bottom-left-radius: 2px;\n      border-top-left-radius: 2px;\n    }\n  `}\n  ${props => props.isLast!==undefined && !props.isLast && `\n    border-bottom-right-radius: 0;\n    border-top-right-radius: 0;\n    :focus:after{\n      border-bottom-right-radius: 2px;\n      border-top-right-radius: 2px;\n      z-index: 2;\n    }\n  `} \n  ${media.mobile`\n    min-width: 0;\n    ${props => props.icon ? `\n      padding-left: 1.25rem;\n      padding-right: 1rem;\n    `:`\n      padding-left: 0.25rem;\n      padding-right: 0.25rem;\n    `}\n  `} \n  ${customTheme('TabButton')}\n`\n\nconst InnerButton = styled.a``\n\nexport const TabRadiobox = styled(({isLast, isFirst, label, white,icon,...props}) =>\n  <Radiobox {...props}>{({disabled, checked, hasErrors, focused}) =>\n    <TabButton innerAs={InnerButton} tabIndex={-1} focused={focused} isFirst={isFirst} isLast={isLast} checked={checked} disabled={disabled} white={white} icon={icon}>{label}</TabButton>\n  }</Radiobox>\n)`\n  display: inline-block;\n`"],"names":["TabButton","styled","Button","withConfig","displayName","componentId","props","white","getColor","desaturate","lighten","ifProp","css","isFirst","undefined","isLast","media","mobile","_templateObject","_taggedTemplateLiteral","icon","customTheme","InnerButton","a","TabRadiobox","_ref","label","_objectWithoutProperties","_excluded","React","createElement","Radiobox","_ref2","disabled","checked","hasErrors","focused","innerAs","tabIndex"],"mappings":";;;;;;;;;;;AAOO,MAAMA,SAAS,gBAAGC,MAAM,CAACC,MAAM,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,wBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAKvBC,CAAAA,CAAAA,CAAAA,mEAAAA,EAAAA,yBAAAA,EAAAA,oBAAAA,EAAAA,qDAAAA,EAAAA,IAAAA,EAAAA,GAAAA,EAAAA,GAAAA,EAAAA,GAAAA,EAAAA,IAAAA,EAAAA,IAAAA,EAAAA,EAAAA,CAAAA,EAAAA,KAAK,IAAIA,KAAK,CAACC,KAAK,GAAG,OAAO,GAAGC,QAAQ,CAAC,SAAS,CAAC,EAEzDA,QAAQ,CAAC,SAAS,CAAC,EACRA,QAAQ,CAAC,SAAS,CAAC,EAIvBF,KAAK,IAAIG,UAAU,CAAC,GAAG,EAAEC,OAAO,CAAC,GAAG,EAAEF,QAAQ,CAAC,MAAM,CAAC,CAACF,KAAK,CAAC,CAAC,CAAC,EAE7EK,MAAM,CAAC,SAAS,EAAEC,GAAG,CAEHJ,CAAAA,yBAAAA,EAAAA,oBAAAA,EAAAA,oDAAAA,CAAAA,EAAAA,QAAQ,CAAC,MAAM,CAAC,EACZA,QAAQ,CAAC,MAAM,CAAC,CAKvC,CAAC,EAEAF,KAAK,IAAIA,KAAK,CAACO,OAAO,IAAA,mCAEvB,EACCP,KAAK,IAAIA,KAAK,CAACO,OAAO,KAAGC,SAAS,IAAI,CAACR,KAAK,CAACO,OAAO,IAOrD,8KAAA,EACCP,KAAK,IAAIA,KAAK,CAACS,MAAM,KAAGD,SAAS,IAAI,CAACR,KAAK,CAACS,MAAM,IAAA,qMAQnD,EACCC,KAAK,CAACC,MAAM,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,CAEVb,CAAAA,2BAAAA,EAAAA,MAAAA,CAAAA,CAAAA,CAAAA,EAAAA,KAAK,IAAIA,KAAK,CAACc,IAAI,GAMpB,kEAAA,GAAA,qEAAA,CAAA,EAEDC,WAAW,CAAC,WAAW,CAAC,EAC3B;AAED,MAAMC,WAAW,gBAAGrB,MAAM,CAACsB,CAAC,CAAApB,UAAA,CAAA;EAAAC,WAAA,EAAA,0BAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAE,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA;AAEjBmB,MAAAA,WAAW,gBAAGvB,MAAM,CAACwB,IAAA,IAAA;EAAA,IAAC;MAACV,MAAM;MAAEF,OAAO;MAAEa,KAAK;MAAEnB,KAAK;AAACa,MAAAA,IAAAA;AAAa,KAAC,GAAAK,IAAA;AAANnB,IAAAA,KAAK,GAAAqB,wBAAA,CAAAF,IAAA,EAAAG,SAAA,CAAA,CAAA;EAAA,oBAC7EC,KAAA,CAAAC,aAAA,CAACC,QAAQ,EAAKzB,KAAK,EAAG0B,KAAA,IAAA;IAAA,IAAC;MAACC,QAAQ;MAAEC,OAAO;MAAEC,SAAS;AAAEC,MAAAA,OAAAA;AAAO,KAAC,GAAAJ,KAAA,CAAA;AAAA,IAAA,oBAC5DH,KAAA,CAAAC,aAAA,CAAC9B,SAAS,EAAA;AAACqC,MAAAA,OAAO,EAAEf,WAAY;MAACgB,QAAQ,EAAE,CAAC,CAAE;AAACF,MAAAA,OAAO,EAAEA,OAAQ;AAACvB,MAAAA,OAAO,EAAEA,OAAQ;AAACE,MAAAA,MAAM,EAAEA,MAAO;AAACmB,MAAAA,OAAO,EAAEA,OAAQ;AAACD,MAAAA,QAAQ,EAAEA,QAAS;AAAC1B,MAAAA,KAAK,EAAEA,KAAM;AAACa,MAAAA,IAAI,EAAEA,IAAAA;AAAK,KAAA,EAAEM,KAAiB,CAAC,CAAA;AAAA,GAC7K,CAAC,CAAA;AAAA,CACd,CAAC,CAAAvB,UAAA,CAAA;EAAAC,WAAA,EAAA,aAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAEA,CAAA,CAAA,CAAA,uBAAA,CAAA;;;;"}

package/lib/enhanceInput.mjs

@@ -0,0 +1,131 @@
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import _extends from '@babel/runtime/helpers/extends';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _identity from 'lodash/fp/identity';
+import React, { useState, useContext, useEffect } from 'react';
+import { ifUndefined, formatPath, callIfFunction, _s } from '@startlibs/utils';
+import { ErrorsContext } from './Errors.mjs';
+import { useFormValue } from './Form.mjs';
+
+const _excluded = ["raw"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const PathContext = /*#__PURE__*/React.createContext([]);
+const enhancedInputDisplayName = 'EnhancedInput';
+const skipValidation = () => true;
+const formInput = _ref => {
+  let {
+    undefinedPlaceholder,
+    isChecked = _identity,
+    truthSource = useFormValue,
+    transform = _identity,
+    validation = skipValidation,
+    onChange,
+    fieldValue,
+    path: propPath
+  } = _ref;
+  const contextPath = useContext(PathContext);
+  const {
+    paths
+  } = useContext(ErrorsContext);
+  const path = ifUndefined(propPath, contextPath);
+  const formattedPath = formatPath(path);
+  const [formValue, setFormValue] = truthSource(formattedPath);
+  const setValue = (value, element) => {
+    const opts = {
+      path,
+      prevValue: formValue,
+      element
+    };
+    if (!validation(value, opts)) {
+      return;
+    }
+    const transformedValue = transform(callIfFunction(value, formValue), opts);
+    setFormValue(transformedValue);
+    callIfFunction(onChange, transformedValue, opts);
+  };
+  const setValueFromEventTarget = e => setValue(e.currentTarget.value, e.currentTarget);
+  const setFromField = () => setValue(fieldValue);
+  const toggle = () => setValue(!isChecked(formValue) ? fieldValue || true : !!fieldValue && undefined);
+  const toggleItem = () => setValue(_s.itemToggle(fieldValue));
+  return [ifUndefined(formValue, undefinedPlaceholder), setValue, {
+    hasErrors: paths.has(formattedPath),
+    setFromField,
+    toggle,
+    toggleItem,
+    name: formattedPath,
+    setValueFromEventTarget
+  }];
+};
+const rawInput = _ref2 => {
+  var _errorUtils$paths;
+  let {
+    value,
+    path,
+    isChecked = _identity,
+    name,
+    setValue: setValueProp,
+    validation = skipValidation,
+    transform = _identity,
+    onChange,
+    fieldValue,
+    defaultValue
+  } = _ref2;
+  const [rawValue, setRawValue] = useState(ifUndefined(value, defaultValue));
+  const errorUtils = useContext(ErrorsContext);
+  const formattedPath = formatPath(path);
+  useEffect(() => {
+    setRawValue(value);
+  }, [value]);
+  const setValue = (value, element) => {
+    if (!validation(value, {
+      prevValue: rawValue
+    })) {
+      return;
+    }
+    const transformedValue = transform(value);
+    setValueProp(transformedValue, element);
+    callIfFunction(onChange, transformedValue, rawValue, {
+      element
+    });
+  };
+  const setValueFromEventTarget = e => setValue(e.currentTarget.value, e.currentTarget);
+  const setFromField = () => setValue(fieldValue);
+  const toggle = () => setValue(!isChecked(rawValue));
+  const toggleItem = () => setValue(_s.itemToggle(fieldValue));
+  return [value, setValue, {
+    hasErrors: errorUtils === null || errorUtils === void 0 || (_errorUtils$paths = errorUtils.paths) === null || _errorUtils$paths === void 0 ? void 0 : _errorUtils$paths.has(formattedPath),
+    setFromField,
+    name,
+    toggle,
+    toggleItem,
+    setValueFromEventTarget
+  }];
+};
+const useInput = (props, raw) => {
+  const [isRaw] = useState(raw);
+  return isRaw ? rawInput(props) : formInput(props);
+};
+const EnhanceInput = _ref3 => {
+  let {
+      raw
+    } = _ref3,
+    props = _objectWithoutProperties(_ref3, _excluded);
+  const [value, setValue, utils] = useInput(props, raw);
+  return props.children(_objectSpread({
+    path: props.path,
+    value,
+    setValue
+  }, utils));
+};
+const enhanceInput = InputComponent => /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+  let props = _extends({}, (_objectDestructuringEmpty(_ref4), _ref4));
+  return /*#__PURE__*/React.createElement(EnhanceInput, props, formInput => /*#__PURE__*/React.createElement(InputComponent, _extends({}, props, {
+    ref: ref,
+    formInput: formInput
+  })));
+});
+
+export { EnhanceInput, PathContext, enhanceInput, enhancedInputDisplayName, useInput };
+//# sourceMappingURL=enhanceInput.mjs.map