@startlibs/form 1.1.3 → 1.2.0-rc.1

package/lib-yak/alt/checkbox/SimpleCheckbox.mjs

@@ -0,0 +1,225 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { yakDomTag } from '@startlibs/utils/yakDomTag';
+import React from 'react';
+import { Icon } from '@startlibs/components';
+import { getColor } from '@startlibs/utils';
+import { styled, css } from '@yak/react';
+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"];
+const CheckboxPseudoInput = styled(yakDomTag("div"))`
+  border-radius: 4px;
+  content: '';
+  border: 1px solid ${__yakProps => {
+  const v = getColor('gray210');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+  width: 18px;
+  height: 18px;
+  background-color: white;
+  position: absolute;
+  left: -2rem;
+  top: 50%;
+  transform: translateY(-50%);
+
+  ${__yakProps => __yakProps["focused"] && css`
+    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+    border-color: ${__yakProps => {
+  const v = getColor('gray180');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+  `}
+
+  ${Icon} {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    font-weight: bold;
+    font-size: 16px;
+    color: ${__yakProps => {
+  const v = getColor('gray90');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+  }
+`;
+const TextLabel = styled(yakDomTag("span"))`
+  font-size: 13px;
+  line-height: 16px;
+  margin: 2px 0;
+  display: block;
+`;
+const DescText = styled(yakDomTag("div"))`
+  color: rgba(0,0,0,0.4);
+  display: block;
+  font-size: 12px;
+  font-weight: 400;
+`;
+const TextLabelContainer = styled(yakDomTag("div"))`
+  display: flex;
+  align-items: center;
+  position: relative;
+  ${HelpText} {
+    margin-left: 0.25rem;
+  }
+`;
+const CheckboxContent = styled(yakDomTag("div"))`
+  cursor: pointer;
+  position: relative;
+  padding-left: 2rem;
+  transition: background 0.2s linear;
+  ${props => props.framed && css`
+    border: 1px solid ${__yakProps => {
+  const v = getColor('gray210');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+    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;
+    @media (min-width: 601px) {
+      padding: 7px 12px 7px 32px;
+    }
+    ${props => props.hasErrors && css`
+      border-color: ${__yakProps => {
+  const v = getColor('alert');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}} !important;
+    `}
+    ${props => props.checked && props.highlightSelected && css`
+      border-color: ${__yakProps => {
+  const v = getColor('main');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+      background: ${props => desaturate(0.3, lighten(0.52, getColor("main")(props)))};
+      &:hover {
+        background: ${props => desaturate(0.3, lighten(0.52, getColor("main")(props)))};
+      }
+      ${CheckboxPseudoInput} {
+        ${Icon} {
+          color: ${__yakProps => {
+  const v = getColor('main');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+        }
+      }
+    `}
+    ${props => props.checked && props.ultraHighlightSelected && css`
+      border-color: ${__yakProps => {
+  const v = getColor('main');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+      background: ${__yakProps => {
+  const v = getColor('main');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+      color: white;
+      a, a.link {
+        color: white;
+      }
+      &:hover {
+        background: ${__yakProps => {
+  const v = getColor('main');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+      }
+      ${CheckboxPseudoInput} {
+        ${Icon} {
+          color: ${__yakProps => {
+  const v = getColor('main');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+        }
+      }
+      ${HelpText} {
+        color: rgba(255, 255, 255, 0.65);
+      }
+      ${DescText} {
+        color: rgba(255, 255, 255, 0.65);
+      }
+    `}
+    ${props => props.disabled && css`
+      background-color: rgba(0,0,0,0.075) !important;
+      color: rgba(0,0,0,0.6);
+      &[disabled] {
+        opacity: 0.75 !important;
+      }
+      ${CheckboxPseudoInput} {
+        background: transparent;
+      }
+    `}
+  `}
+`;
+const SimpleCheckbox = 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)));
+  });
+}).attrs({
+  className: "styled-simple-checkbox"
+})`
+  cursor: pointer;
+  position: relative;
+  margin-bottom: 1rem;
+  display: flex;
+  ${__yakProps => __yakProps["disabled"] && css`
+    pointer-events: none;
+  `}
+  .textContainer {
+    width: 100%;
+  }
+`;
+
+export { SimpleCheckbox };
+//# sourceMappingURL=SimpleCheckbox.mjs.map

package/lib-yak/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);\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","yakDomTag","__yakProps","v","getColor","css","Icon","TextLabel","DescText","TextLabelContainer","HelpText","CheckboxContent","props","framed","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","attrs"],"mappings":"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"}

package/lib-yak/alt/checkbox/ToggleCheckbox.mjs

@@ -0,0 +1,173 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { yakDomTag } from '@startlibs/utils/yakDomTag';
+import React from 'react';
+import { styled, css } from '@yak/react';
+import { Checkbox } from '../../Checkbox.mjs';
+import { HelpText } from '../../Field.mjs';
+import { getColor } from '@startlibs/utils';
+import { darken } from 'polished';
+import { TransitionDiv } from '@startlibs/components';
+
+const _excluded = ["path", "disabled", "rightInfo", "label", "descText", "helpText", "tabIndex", "noFocus", "margin", "className"];
+styled(yakDomTag("div"))`
+`;
+const Toggle = styled(yakDomTag("div")).attrs({
+  className: "styled-theme-toggle-checkbox"
+})`
+  cursor: pointer;
+  flex-shrink: 0;
+  margin-left: 1rem;
+  float: right;
+  transition: 0.25s ease;
+  width: 2.75rem;
+  height: 18px;
+  border-radius: 18px;
+  background: ${props => props.checked ? getColor('main') : 'rgba(0,0,0,0.14)'};
+  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 ? css`
+      margin-left: -2px;
+      left: 100%;
+      transform: translate(-100%,-50%);
+      ` : css`
+      margin-left: 2px;
+      left: 0;
+    `}
+  }
+  
+`;
+const ToggleLabel = styled(yakDomTag("div"))`
+  flex-basis: 0;
+  flex-grow: 1;
+  display: inline-block;
+  font-size: 15px;
+`;
+const DescText = styled(yakDomTag("div"))`
+  font-weight: 400;
+  color: rgba(0,0,0,0.4);
+  font-size: 12px;
+  margin-top: 0.25rem;
+`;
+const ToggleCheckboxStyled = styled(Checkbox).attrs({
+  className: "styled-theme-toggle-checkbox-box"
+})`
+  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: ${props => props.margin}px;
+  ` : css`
+    margin-bottom: 1.5rem;
+    & ~ & {
+      margin-top: -1rem;
+    }
+  `}
+  ${props => props.gray ? css`
+    background-color: rgba(0,0,0,0.06);
+    &:hover {
+      background-color: rgba(0,0,0,0.08);
+    }
+    &:active {
+      background-color: rgba(0,0,0,0.1);
+      transition: none;
+    }
+  ` : css`
+    background-color: ${__yakProps => {
+  const v = getColor('lightBluishGray');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+    &:hover {
+      background: ${props => darken(0.035, getColor('lightBluishGray')(props))};
+    }
+    &:active {
+      background: ${props => darken(0.05, getColor('lightBluishGray')(props))};
+      transition: none;
+    }
+  `}
+  ${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 && css`
+    opacity: 0.8;
+    pointer-events:none;
+  `}
+  
+`;
+const ToggleCheckbox = 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,
+      className: checked ? 'styled-toggle-checkbox-checked' : undefined
+    }));
+  });
+}).attrs({
+  className: "styled-toggle-checkbox"
+})`
+`;
+
+export { ToggleCheckbox };
+//# sourceMappingURL=ToggleCheckbox.mjs.map

package/lib-yak/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      {/* variante como classe: no yak, o override de theme.startlibs.ToggleCheckbox não lê props */}\n      <Toggle checked={checked} className={checked ? 'styled-toggle-checkbox-checked' : undefined}/>\n    </>\n  }\n  </ToggleCheckboxStyled>\n)`\n`\n"],"names":["styled","yakDomTag","Toggle","attrs","className","props","checked","getColor","css","ToggleLabel","DescText","ToggleCheckboxStyled","Checkbox","margin","gray","__yakProps","v","darken","noFocus","disabled","ToggleCheckbox","_ref","path","rightInfo","label","descText","helpText","tabIndex","rest","_objectWithoutProperties","_excluded","React","createElement","_extends","_ref2","hasErrors","focused","Fragment","HelpText","TransitionDiv","block","undefined"],"mappings":"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"}

package/lib-yak/alt/radiobox/CleanTabRadiobox.mjs

@@ -0,0 +1,87 @@
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { yakDomTag } from '@startlibs/utils/yakDomTag';
+import React from 'react';
+import { styled, css } from '@yak/react';
+import { getColor } from '@startlibs/utils';
+import { Radiobox } from '../../Radiobox.mjs';
+
+const _excluded = ["label", "white", "icon"];
+const Tab = styled(yakDomTag("div")).attrs({
+  className: "styled-tab styled-theme-clean-tab-button"
+})`
+  width:100%;
+  font-size: 16px;
+  color: ${__yakProps => {
+  const v = getColor("gray120");
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+  font-weight: 500;
+  margin-left: 0;  
+  padding: 12px 2.5rem;
+  flex-grow: 1;
+  height: 100%;
+  border-bottom: 1px solid ${__yakProps => {
+  const v = getColor("gray210");
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+  position: relative;
+  ${props => props.checked ? css`
+    color: ${__yakProps => {
+  const v = getColor("main");
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+    &:after {
+      content: '';
+      position: absolute;
+      bottom: -2px;
+      left: 0;
+      right: 0;
+      height: 3px;
+      background: ${__yakProps => {
+  const v = getColor("main");
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+      border-radius: 10px;
+    }
+  ` : css`
+    cursor: pointer;
+    &:hover {
+      color: ${__yakProps => {
+  const v = getColor("gray90");
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+    }
+  `}
+  
+`;
+const InnerButton = styled(yakDomTag("a"))``;
+const CleanTabRadiobox = 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);
+  });
+}).attrs({
+  className: "styled-clean-tab-radiobox"
+})`
+  display: inline-block;
+`;
+
+export { CleanTabRadiobox, Tab };
+//# sourceMappingURL=CleanTabRadiobox.mjs.map

package/lib-yak/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","yakDomTag","attrs","className","__yakProps","v","getColor","props","checked","css","InnerButton","CleanTabRadiobox","_ref","label","white","icon","_objectWithoutProperties","_excluded","React","createElement","Radiobox","_ref2","disabled","hasErrors","focused","innerAs","tabIndex"],"mappings":";;;;;;;;MAKaA,GAAG,GAAGC,MAAA,CAAAC,SAAA,SAAAC,KAAA,CAAA;EAAAC,SAAA,EAAA,0CAAA;AAAA,CAAA,CAAA,CAAA;AACnB;AACA;AACA,SAAA,EAHmBC,UAAA,IAAA;AAAA,EAAA,MAAAC,CAAA,GAGRC,QAAQ,CAAC,SAAS,CAAC,CAAA;AAAA,EAAA,OAAA,OAAAD,CAAA,KAAAA,UAAAA,GAAAA,CAAA,CAAAD,UAAA,IAAAC,CAAA,CAAA;AAAA,CAAA,CAAA;AAC9B;AACA;AACA;AACA;AACA;AACA,2BAAA,EAN8BD,UAAA,IAAA;AAAA,EAAA,MAAAC,CAAA,GAMDC,QAAQ,CAAC,SAAS,CAAC,CAAA;AAAA,EAAA,OAAA,OAAAD,CAAA,KAAAA,UAAAA,GAAAA,CAAA,CAAAD,UAAA,IAAAC,CAAA,CAAA;AAAA,CAAA,CAAA;AAChD;AACA,EAAA,EAAIE,KAAK,IAAIA,KAAK,CAACC,OAAO,GAAGC,GAAG,CAAA;AAChC,WAAA,EADgCL,UAAA,IAAA;AAAA,EAAA,MAAAC,CAAA,GACnBC,QAAQ,CAAC,MAAM,CAAC,CAAA;AAAA,EAAA,OAAA,OAAAD,CAAA,KAAAA,UAAAA,GAAAA,CAAA,CAAAD,UAAA,IAAAC,CAAA,CAAA;AAAA,CAAA,CAAA;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAA,EAR6BD,UAAA,IAAA;AAAA,EAAA,MAAAC,CAAA,GAQTC,QAAQ,CAAC,MAAM,CAAC,CAAA;AAAA,EAAA,OAAA,OAAAD,CAAA,KAAAA,UAAAA,GAAAA,CAAA,CAAAD,UAAA,IAAAC,CAAA,CAAA;AAAA,CAAA,CAAA;AACpC;AACA;AACA,EAAA,CAAG,GAAEI,GAAG,CAAA;AACR;AACA;AACA,aAAA,EAHQL,UAAA,IAAA;AAAA,EAAA,MAAAC,CAAA,GAGOC,QAAQ,CAAC,QAAQ,CAAC,CAAA;AAAA,EAAA,OAAA,OAAAD,CAAA,KAAAA,UAAAA,GAAAA,CAAA,CAAAD,UAAA,IAAAC,CAAA,CAAA;AAAA,CAAA,CAAA;AACjC;AACA,EAAG,CAAA,CAAA;AACH;AACA,EAAC;AAED,MAAMK,WAAW,GAAGV,MAAA,CAAAC,SAAA,CAAU,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAEjBU,MAAAA,gBAAgB,GAAGX,MAAM,CAACY,IAAA,IAAA;EAAA,IAAC;MAACC,KAAK;MAAEC,KAAK;AAACC,MAAAA,IAAAA;AAAa,KAAC,GAAAH,IAAA;AAANL,IAAAA,KAAK,GAAAS,wBAAA,CAAAJ,IAAA,EAAAK,SAAA,CAAA,CAAA;EAAA,oBACjEC,KAAA,CAAAC,aAAA,CAACC,QAAQ,EAAKb,KAAK,EAAGc,KAAA,IAAA;IAAA,IAAC;MAACC,QAAQ;MAAEd,OAAO;MAAEe,SAAS;AAAEC,MAAAA,OAAAA;AAAO,KAAC,GAAAH,KAAA,CAAA;AAAA,IAAA,oBAC5DH,KAAA,CAAAC,aAAA,CAACpB,GAAG,EAAA;AAAC0B,MAAAA,OAAO,EAAEf,WAAY;MAACgB,QAAQ,EAAE,CAAC,CAAE;AAACF,MAAAA,OAAO,EAAEA,OAAQ;AAAChB,MAAAA,OAAO,EAAEA,OAAQ;AAACc,MAAAA,QAAQ,EAAEA,QAAAA;AAAS,KAAA,EAAET,KAAW,CAAC,CAAA;AAAA,GACrG,CAAC,CAAA;AAAA,CACd,CAAC,CAAAX,KAAA,CAAA;EAAAC,SAAA,EAAA,2BAAA;AAAA,CAAA,CAAA,CAAA;AACD;AACA;;;;"}

package/lib-yak/alt/radiobox/IconRadioBox.mjs

@@ -0,0 +1,138 @@
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { yakDomTag } from '@startlibs/utils/yakDomTag';
+import React from 'react';
+import { styled, css } from '@yak/react';
+import { Icon } from '@startlibs/components';
+import { getColor } from '@startlibs/utils';
+import { Radiobox } from '../../Radiobox.mjs';
+import { desaturate, lighten } from 'polished';
+
+const _excluded = ["icon", "label", "highlightedDesc"];
+const IconRadioBoxText = styled(yakDomTag("div")).attrs({
+  className: "styled-icon-radio-box-text"
+})`
+  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: ${__yakProps => {
+  const v = getColor('gray120');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+  ${props => props.checked && css`
+    color: ${__yakProps => {
+  const v = getColor('main');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+  `}
+  ${props => props.highlightedDesc && css`
+    background: ${__yakProps => {
+  const v = getColor('gray240');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+    padding: 0.25rem 0.5rem;
+    min-height: 3rem;
+    ${props => props.checked && css`
+      background: ${props => desaturate(0.3, lighten(0.52, getColor("main")(props)))};
+    `}
+  `}
+`;
+const IconRadioBoxIconContainer = styled(yakDomTag("div")).attrs({
+  className: "styled-icon-radio-box-icon-container"
+})`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+`;
+const Wrapper = styled(yakDomTag("div")).attrs({
+  className: "styled-theme-icon-radio-box"
+})`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+  border-radius: 8px;
+  background-color: white;
+  border: 1px solid ${__yakProps => {
+  const v = getColor('gray210');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+  overflow: hidden;
+  color: ${__yakProps => {
+  const v = getColor('gray150');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+
+  ${Icon} {
+    font-size: 100px;
+    line-height: 50px;
+    line-height: 76px;
+    width: 100%;
+  }
+
+  ${props => props.checked && css`
+    color: ${__yakProps => {
+  const v = getColor('main');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+    border-color: ${__yakProps => {
+  const v = getColor('main');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+  `}
+
+  input {
+    opacity: 0;
+    position: absolute;
+    left: -20000000px;
+  }
+
+  ${props => props.focused && css`
+    ${IconRadioBoxIconContainer}::after {
+      content: '';
+      position: absolute;
+      top: -4px;
+      right: -4px;
+      left: -4px;
+      bottom: -4px;
+      border-radius: 10px;
+      border: 3px solid rgba(0, 0, 0, 0.15);
+  }`}
+
+  
+`;
+const IconRadioBox = 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));
+  });
+}).attrs({
+  className: "styled-icon-radio-box"
+})`outline: none;`;
+
+export { IconRadioBox, IconRadioBoxIconContainer, IconRadioBoxText };
+//# sourceMappingURL=IconRadioBox.mjs.map