@websolutespa/bom-mixer-ui 0.4.2 → 0.5.0

package/dist/cjs/index.js

@@ -212,7 +212,7 @@ const AccordionGroup = _a => {
 };
 AccordionGroup.displayName = 'AccordionGroup';
 
-const DownArrowSvg$2 = props => jsxRuntime.jsx("svg", Object.assign({
+const DownArrowSvg$1 = props => jsxRuntime.jsx("svg", Object.assign({
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
@@ -227,7 +227,7 @@ const DownArrowSvg$2 = props => jsxRuntime.jsx("svg", Object.assign({
     points: "6 9 12 15 18 9"
   })
 }));
-const DownArrow$2 = styled__default.default(DownArrowSvg$2)`
+const DownArrow = styled__default.default(DownArrowSvg$1)`
   flex-shrink: 0;
   width: 1em;
   height: 1em;
@@ -248,7 +248,7 @@ const AccordionIcon_ = _ref => {
   const classNames = bomCore.getClassNames({
     active
   });
-  return jsxRuntime.jsx(DownArrow$2, {
+  return jsxRuntime.jsx(DownArrow, {
     className: classNames
   });
 };
@@ -689,16 +689,6 @@ ${rule}
 function mediaOnly(props, key, rule) {
   return mediaBetween(props, key, key, rule);
 }
-function getContainer(props) {
-  const theme = props.theme;
-  const variant = props.variant || 'default';
-  const container = theme.container[variant];
-  if (container && container.maxWidth) {
-    return eachMedia(props, key => `max-width: ${container.maxWidth[key]}`);
-  } else {
-    return '';
-  }
-}
 function getCssResponsive(props, defaultValue) {
   if (defaultValue === void 0) {
     defaultValue = {};
@@ -762,38 +752,6 @@ function getAspectResponsive(props, defaultValue) {
   }
   return rules;
 }
-function getGrid(props, defaultValue) {
-  if (defaultValue === void 0) {
-    defaultValue = {};
-  }
-  props = Object.assign(Object.assign({}, defaultValue), props);
-  const variant = props.variant || 'default';
-  return styled.css`
-    ${props.columns ? styled.css`
-      --grid-columns: ${props.columns};
-    ` : styled.css`
-      --grid-columns: var(--grid-${variant}-columns, 12);
-    `}
-    ${props.size ? styled.css`
-      --grid-size: ${props.size};
-    ` : styled.css`
-      --grid-size: var(--grid-${variant}-size, 1fr);
-    `}
-    ${props.columnGap ? styled.css`
-      --grid-column-gap: ${props.columnGap};
-    ` : eachMedia(props, key => `--grid-column-gap: var(--grid-${variant}-column-gap-${key}, 0);`)}
-    ${props.rowGap ? styled.css`
-      --grid-row-gap: ${props.rowGap};
-    ` : eachMedia(props, key => `--grid-row-gap: var(--grid-${variant}-row-gap-${key}, 0);`)}
-    display: grid;
-    grid-template-columns: repeat(var(--grid-columns), var(--grid-size));
-    grid-column-gap: var(--grid-column-gap);
-    grid-row-gap: var(--grid-row-gap);
-  `;
-}
-function getVariant(variants, type) {
-  return type && variants && variants[type] ? variants[type] || '' : '';
-}
 function isChildElement(parent, child) {
   if (!parent || !child) {
     return false;
@@ -844,8 +802,10 @@ function hasChildOfType(children, type) {
   return hasChildOfType;
 }
 function hypenize(text) {
-  return text.replace(/(?<![A-Z])[A-Z]|(?<![0-9]|^)[0-9]/g, m => '-' + m.toLowerCase());
+  return text.replace(/(?<![A-Z])[A-Z]/g, m => '-' + m.toLowerCase());
+  // return text.replace(/(?<![A-Z])[A-Z]|(?<![0-9]|^)[0-9]/g, (m) => '-' + m.toLowerCase());
 }
+
 function camelize(text) {
   return text.replace(/(^[a-z])|-([a-z0-9])/gi, ($0, $1, $2) => $2 ? $2.toUpperCase() : $1.toUpperCase());
 }
@@ -1131,104 +1091,6 @@ const Breakpoint = props => {
   }) : null;
 };
 
-const variants$2 = {
-  default: styled.css`
-    color: var(--color-primary-500);
-    border-color: var(--color-primary-100);
-    /*
-    box-shadow: var(--shadow-lg);
-    background-color: var(--color-neutral-100);
-    color: var(--color-neutral-900);
-    */
-    &>.btn:hover {
-      background-color: var(--color-primary-100);
-    }
-    &>.btn+.btn, &>.btn+.btn:hover {
-      border-color: var(--color-primary-100);
-    }
-`,
-  alfa: styled.css`
-`,
-  beta: styled.css`
-`
-};
-const StyledButtonGroup = styled__default.default.div`
-  display: inline-flex;
-  overflow: hidden;
-
-  &>.btn {
-    justify-content: center;
-    border: none;
-  }
-
-  &>:global(.btn), &>:global(.btn:hover) {
-    border: none;
-  }
-
-  color: var(--color-primary-500);
-  border: 1px solid var(--color-primary-100);
-  border-radius: var(--color-border-radius);
-
-  ${props => styled.css`
-
-    /*
-    box-shadow: var(--color-shadow-lg);
-    background-color: var(--color-neutral-100);
-    color: var(--color-neutral-900);
-    */
-
-    &>.btn {
-      flex: 1 0 ${100 / (React__default.default.Children.count(props.children) || 1)}%;
-    }
-
-    ${props.vertical ? styled.css`
-      flex-direction: column;
-      justify-content: stretch;
-
-      &>.btn{
-        width: 100%;
-      }
-
-      &>.btn+.btn, &>.btn+.btn:hover {
-        border-top: 1px solid var(--color-primary-100);
-      }
-    ` : styled.css`
-      flex-direction: row;
-      align-items: stretch;
-
-      &>.btn{
-        height: auto;
-      }
-
-      &>.btn+.btn, &>.btn+.btn:hover {
-        border-left: 1px solid var(--color-primary-100);
-      }
-    `}
-  `}
-
-  ${props => getVariant(variants$2, props.type || 'default')}
-  ${props => getCssResponsive(props)}
-`;
-const ButtonGroup = /*#__PURE__*/React.forwardRef((_a, ref) => {
-  var {
-      children,
-      as = 'div',
-      type = 'default'
-    } = _a,
-    props = __rest(_a, ["children", "as", "type"]);
-  const mappedChildren = React.useMemo(() => React__default.default.Children.map(children, child => /*#__PURE__*/React__default.default.cloneElement(child, child.props ? Object.assign(Object.assign({}, child.props), {
-    className: `${child.props.className} btn`
-  }) : null)), [children]);
-  return jsxRuntime.jsx(StyledButtonGroup, Object.assign({}, props, {
-    type: type,
-    as: as,
-    ref: ref
-  }, {
-    children: mappedChildren
-  }));
-});
-ButtonGroup.displayName = 'ButtonGroup';
-
 const CssDefault = styled.css`
   // display: inline-block;
   color: inherit;
@@ -1394,7 +1256,8 @@ const CssButtonSecondary = styled.css`
 
   &:hover,
   &.active {
-    border-color: var(--color-primary-300);
+    background-color: var(--color-primary-200);
+    border-color: var(--color-primary-200);
     color: var(--color-primary-600);
   }
 
@@ -1408,14 +1271,13 @@ const CssButtonOutline = styled.css`
   padding: 0.4em 1em;
   border-radius: var(--button-border-radius);
   background: transparent;
-  border: 2px solid var(--color-primary-500);
+  border: 2px solid var(--color-primary-400);
   color: var(--color-primary-500);
 
   &:hover,
   &.active {
-    background: var(--color-primary-500);
-    border-color: var(--color-primary-600);
-    color: var(--color-neutral-100);
+    border-color: var(--color-primary-500);
+    color: var(--color-primary-600);
   }
 
   ${CssSvg}
@@ -1446,11 +1308,11 @@ const CssButtonGhost = styled.css`
 `;
 const CssButtonLink = styled.css`
   position: relative;
-  color: var(--color-primary-400);
+  color: var(--color-primary-500);
 
   &:hover,
   &.active {
-    color: var(--color-primary-500);
+    color: var(--color-primary-600);
   }
 
   ${CssAfter}
@@ -1458,11 +1320,11 @@ const CssButtonLink = styled.css`
 `;
 const CssButtonUnderline = styled.css`
   position: relative;
-  color: var(--color-primary-400);
+  color: var(--color-primary-500);
 
   &:hover,
   &.active {
-    color: var(--color-primary-500);
+    color: var(--color-primary-600);
   }
 
   ${CssAfterInverted}
@@ -1522,102 +1384,507 @@ const buttonVariants = {
   toggle: CssButtonToggle
 };
 
-const defaultVariants = {
-  button: buttonVariants
-};
-const [useVariants_, VariantsContextProvider] = bomMixerHooks.createGenericContext(defaultVariants);
-function VariantsProvider(_ref) {
-  let {
-    children,
-    variants
-  } = _ref;
-  // console.log('VariantsProvider.context', context);
-  const value = Object.assign({}, defaultVariants);
-  Object.entries(variants).forEach(_ref2 => {
-    let [k, v] = _ref2;
-    value[k] = Object.assign(Object.assign({}, value[k]), v);
-  });
-  return jsxRuntime.jsx(VariantsContextProvider, Object.assign({
-    value: value
-  }, {
-    children: children
-  }));
-}
-function useVariants(variant) {
-  const variants = useVariants_();
-  return variants ? variants[variant] : undefined;
-}
-
-const StyledButton$2 = styled__default.default.div`
-  ${CssDefault}
-  ${props => getVariant(props.variants, props.variant)}
-  ${props => styled.css`font-size: var(--button-size-${props.size || 'md'});`}
-  ${props => getCssResponsive(props)}
-`;
-const Button = /*#__PURE__*/React.forwardRef((_a, ref) => {
-  var {
-      children,
-      className,
-      as = 'button',
-      type = 'button',
-      variants
-    } = _a,
-    props = __rest(_a, ["children", "className", "as", "type", "variants"]);
-  const classNames = bomCore.getClassNames('button', className, {
-    disabled: props.disabled
-  }, props.variant);
-  const globalVariants = useVariants('button');
-  variants = variants || globalVariants || buttonVariants;
-  // console.log('globalVariants', globalVariants);
-  return jsxRuntime.jsx(StyledButton$2, Object.assign({
-    className: classNames,
-    ref: ref,
-    as: as,
-    type: type,
-    variants: variants
-  }, props, {
-    children: children
-  }));
-});
-Button.displayName = 'Button';
-
-const Background = styled__default.default.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  // background: var(--color-neutral-900);
+const CssDividerDefault = styled.css`
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  max-width: 100%;
 
-  &, & > * {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  &:before,
+  &:after {
+    content: '';
+    display: block;
+    flex: 1 0 auto;
+    height: 1px;
+    margin-top: 1px;
+    background-color: var(--color-neutral-300);
   }
 
-  & > * > * {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+  .title {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    padding: 0 0.75em;
+    font-weight: 700;
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    color: var(--color-neutral-400);
+    z-index: 1;
+    white-space: nowrap;
   }
-
-  ${props => getCssResponsive(props)}
 `;
-Background.defaultProps = {
-  className: 'background'
+const dividerVariants = {
+  default: CssDividerDefault
 };
 
-const CardContent = styled__default.default.div`
-  position: relative;
-  ${props => getCssResponsive(props)}
+const CssFieldErrorDefault = styled.css`
+  margin: 0.5em 0;
+  padding: 0.2em 0.5em;
+  font-size: var(--font-paragraph50-size, --form-font-size, 1rem);
+  font-weight: 500;
+  border: 1px solid var(--form-border-color-error);
+  background: var(--form-background-color-error);
+  color: var(--form-color-error);
 `;
+const fieldErrorVariants = {
+  default: CssFieldErrorDefault
+};
 
-const CardFooter = styled__default.default.div`
-  flex: 0 0 4em;
-  position: relative;
+const CssFieldDefault = styled.css`
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  flex-direction: column;
+  // margin-bottom: 0.5rem;
+
+  label {
+    font-weight: 500;
+    margin-bottom: 0.3rem;
+  }
+`;
+const fieldVariants = {
+  default: CssFieldDefault
+};
+
+const CssFormErrorDefault = styled.css`
+  padding: var(--form-padding);
+  font-weight: 700;
+  text-align: center;
+  border: 1px solid var(--form-border-color-error);
+  background: var(--form-background-color-error);
+  color: var(--form-color-error);
+`;
+const formErrorVariants = {
+  default: CssFormErrorDefault
+};
+
+const CssFormTesterDefault = styled.css`
+  padding: var(--form-padding);
+  border: 1px solid var(--form-border-color-info);
+  background: var(--form-background-color-info);
+  color: var(--form-color-info);
+
+  code {
+    font-size: 0.8em;
+    line-height: 1.3;
+  }
+`;
+const formTesterVariants = {
+  default: CssFormTesterDefault
+};
+
+const CssFormControl = styled.css`
+  appearance: none;
+  font-family: inherit;
+  font-size: var(--form-font-size);
+  line-height: var(--form-line-height);
+  border: var(--form-border);
+  border-width: var(--form-border-width);
+  border-color: var(--form-border-color);
+  border-radius: var(--form-border-radius);
+  outline: var(--form-outline);
+  outline-offset: var(--form-outline-offset);
+  background-color: var(--form-background-color);
+  color: var(--form-color);
+  transition: var(--form-transition);
+
+  &>svg {
+    width: 1.5em;
+    height: 1.5em;
+  }
+
+  &::placeholder {
+    color: inherit;
+    opacity: 0.3;
+  }
+
+  &.hidden {
+    display: none;
+  }
+
+  &.disabled {
+    background-color: var(--form-background-color-disabled);
+    color: var(--form-color-disabled);
+    cursor: not-allowed;
+  }
+
+  &:hover:not(.disabled) {
+    border-color: var(--form-border-color-hover);
+  }
+
+  &:active:not(.disabled),
+  &.active:not(.disabled) {
+    outline-color: var(--form-outline-color-focus);
+    border-color: var(--form-border-color-hover);
+
+    .placeholder {
+      opacity: 0.5;
+    }
+  }
+
+  &:focus,
+  &:focus-visible {
+    outline-color: var(--form-outline-color-focus);
+
+    &::placeholder {
+      opacity: 0.5;
+    }
+  }
+
+  &.focus {
+    outline-color: var(--form-outline-color-focus);
+
+    input::placeholder {
+      opacity: 0.5;
+    }
+  }
+`;
+
+const CssInputContainerDefault = styled.css`
+  ${CssFormControl}
+
+  display: flex;
+  align-items: center;
+  width: 100%;
+  cursor: pointer;
+
+  input {
+    flex-grow: 1;
+  }
+
+  input::placeholder {
+    opacity: 0.3;
+  }
+
+  &>:first-child:not(input) {
+    margin: 0 0.5em;
+  }
+
+  &>:last-child:not(input) {
+    margin: 0 0.5em;
+  }
+`;
+const CssInputReset = styled.css`
+  display: block;
+  appearance: none;
+  color: inherit;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  min-width: 0;
+
+  &::placeholder {
+    color: inherit;
+  }
+
+  &:-webkit-autofill,
+  &:-webkit-autofill:hover,
+  &:-webkit-autofill:focus,
+  &:-webkit-autofill:active {
+    // -webkit-box-shadow: 0 0 0 30px white inset !important;
+    transition: all 0s 50000s;
+    text-decoration: underline;
+  }
+`;
+const CssInputDefault = styled.css`
+  ${CssInputReset}
+
+  padding: var(--form-padding);
+  font-size: var(--form-font-size);
+  line-height: var(--form-line-height);
+  border-radius: var(--form-border-radius);
+
+  &::placeholder {
+    opacity: 0.3;
+  }
+`;
+const inputVariants = {
+  default: {
+    input: CssInputDefault,
+    container: CssInputContainerDefault
+  }
+};
+
+const CssLabelDefault = styled.css`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  font-size: var(--font-paragraph30-size, --form-font-size, 1rem);
+  cursor: pointer;
+`;
+const labelVariants = {
+  default: CssLabelDefault
+};
+
+const CssTextareaDefault = styled.css`
+  ${CssFormControl}
+  display: block;
+  width: 100%;
+  padding: var(--form-padding);
+  resize: vertical;
+  min-height: 4em;
+  cursor: pointer;
+`;
+const textareaVariants = {
+  default: CssTextareaDefault
+};
+
+const defaultVariants = {};
+const defaultVariants__ = {
+  button: buttonVariants,
+  input: inputVariants,
+  label: labelVariants,
+  field: fieldVariants,
+  fieldError: fieldErrorVariants,
+  formError: formErrorVariants,
+  formTester: formTesterVariants,
+  textarea: textareaVariants,
+  divider: dividerVariants
+};
+
+const [useVariants_, VariantsContextProvider] = bomMixerHooks.createGenericContext(defaultVariants);
+function VariantsProvider(_ref) {
+  let {
+    children,
+    variants
+  } = _ref;
+  // console.log('VariantsProvider.context', context);
+  const value = Object.assign({}, defaultVariants);
+  Object.entries(variants).forEach(_ref2 => {
+    let [k, v] = _ref2;
+    value[k] = Object.assign(Object.assign({}, value[k]), v);
+  });
+  /*
+  const value: IVariants = { ...defaultVariants };
+  */
+  /*
+  for (const [k, v] of Object.entries(value)) {
+    value[k as keyof IVariants] = {...v};
+  }
+  */
+  /*
+  Object.entries(variants).forEach(([k, v]) => {
+    Object.assign(value[k as keyof IVariants], v);
+  });
+  */
+  return jsxRuntime.jsx(VariantsContextProvider, Object.assign({
+    value: value
+  }, {
+    children: children
+  }));
+}
+function useVariants(variant) {
+  const variants = useVariants_();
+  return variants ? variants[variant] : undefined;
+}
+
+function getVariant(type, variants) {
+  return type && variants && variants[type] ? variants[type] || '' : '';
+}
+function getVariantKey(key, type, variants) {
+  if (type !== undefined && variants !== undefined && variants[type] !== undefined) {
+    const variant = variants[type];
+    return variant[key] || '';
+  } else {
+    return '';
+  }
+}
+function getVariantResponsive(props, callback) {
+  const keys = ['variant', 'variantSm', 'variantMd', 'variantLg', 'variantXl'];
+  const theme = props.theme;
+  const mediaQuery = theme.mediaQuery;
+  return keys.map(key => {
+    const value = props[key];
+    if (value) {
+      const rule = callback(value, theme);
+      if (key !== 'variant') {
+        const size = key.replace('variant', '').toLowerCase();
+        // console.log('size', size, 'rule', rule);
+        return styled.css`@media(min-width: ${mediaQuery[size]}) {
+            ${rule}
+          }`;
+      } else {
+        return rule;
+      }
+    } else {
+      return undefined;
+    }
+  }).filter(Boolean);
+}
+function getFontVariantResponsive(props, callback) {
+  return getVariantResponsive(props, (key, theme) => {
+    const font = theme.font[key];
+    return font ? callback(key, font) : '';
+  });
+}
+
+const variants$2 = {
+  default: styled.css`
+    color: var(--color-primary-500);
+    border-color: var(--color-primary-100);
+    /*
+    box-shadow: var(--shadow-lg);
+    background-color: var(--color-neutral-100);
+    color: var(--color-neutral-900);
+    */
+    &>.btn:hover {
+      background-color: var(--color-primary-100);
+    }
+    &>.btn+.btn, &>.btn+.btn:hover {
+      border-color: var(--color-primary-100);
+    }
+`,
+  alfa: styled.css`
+`,
+  beta: styled.css`
+`
+};
+const StyledButtonGroup = styled__default.default.div`
+  display: inline-flex;
+  overflow: hidden;
+
+  &>.btn {
+    justify-content: center;
+    border: none;
+  }
+
+  &>:global(.btn), &>:global(.btn:hover) {
+    border: none;
+  }
+
+  color: var(--color-primary-500);
+  border: 1px solid var(--color-primary-100);
+  border-radius: var(--color-border-radius);
+
+  ${props => styled.css`
+
+    /*
+    box-shadow: var(--color-shadow-lg);
+    background-color: var(--color-neutral-100);
+    color: var(--color-neutral-900);
+    */
+
+    &>.btn {
+      flex: 1 0 ${100 / (React__default.default.Children.count(props.children) || 1)}%;
+    }
+
+    ${props.vertical ? styled.css`
+      flex-direction: column;
+      justify-content: stretch;
+
+      &>.btn{
+        width: 100%;
+      }
+
+      &>.btn+.btn, &>.btn+.btn:hover {
+        border-top: 1px solid var(--color-primary-100);
+      }
+    ` : styled.css`
+      flex-direction: row;
+      align-items: stretch;
+
+      &>.btn{
+        height: auto;
+      }
+
+      &>.btn+.btn, &>.btn+.btn:hover {
+        border-left: 1px solid var(--color-primary-100);
+      }
+    `}
+  `}
+
+  ${props => getVariant(props.type || 'default', variants$2)}
+  ${props => getCssResponsive(props)}
+`;
+const ButtonGroup = /*#__PURE__*/React.forwardRef((_a, ref) => {
+  var {
+      children,
+      as = 'div',
+      type = 'default'
+    } = _a,
+    props = __rest(_a, ["children", "as", "type"]);
+  const mappedChildren = React.useMemo(() => React__default.default.Children.map(children, child => /*#__PURE__*/React__default.default.cloneElement(child, child.props ? Object.assign(Object.assign({}, child.props), {
+    className: `${child.props.className} btn`
+  }) : null)), [children]);
+  return jsxRuntime.jsx(StyledButtonGroup, Object.assign({}, props, {
+    type: type,
+    as: as,
+    ref: ref
+  }, {
+    children: mappedChildren
+  }));
+});
+ButtonGroup.displayName = 'ButtonGroup';
+
+const StyledButton$2 = styled__default.default.div`
+  ${CssDefault}
+  ${props => getVariant(props.variant, props.variants)}
+  ${props => styled.css`font-size: var(--button-size-${props.size || 'md'});`}
+  ${props => getCssResponsive(props)}
+`;
+const Button = /*#__PURE__*/React.forwardRef((_a, ref) => {
+  var {
+      children,
+      className,
+      as = 'button',
+      type = 'button',
+      variants
+    } = _a,
+    props = __rest(_a, ["children", "className", "as", "type", "variants"]);
+  const classNames = bomCore.getClassNames('button', className, {
+    disabled: props.disabled
+  }, props.variant);
+  const globalVariants = useVariants('button');
+  variants = variants || globalVariants || buttonVariants;
+  // console.log('globalVariants', globalVariants);
+  return jsxRuntime.jsx(StyledButton$2, Object.assign({
+    className: classNames,
+    ref: ref,
+    as: as,
+    type: type,
+    variants: variants
+  }, props, {
+    children: children
+  }));
+});
+Button.displayName = 'Button';
+
+const Background = styled__default.default.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  // background: var(--color-neutral-900);
+
+  &, & > * {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  & > * > * {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  ${props => getCssResponsive(props)}
+`;
+Background.defaultProps = {
+  className: 'background'
+};
+
+const CardContent = styled__default.default.div`
+  position: relative;
+  ${props => getCssResponsive(props)}
+`;
+
+const CardFooter = styled__default.default.div`
+  flex: 0 0 4em;
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   border-top: 1px solid var(--color-neutral-100);
   ${props => getCssResponsive(props)}
 `;
@@ -1650,7 +1917,7 @@ const StyledCard$5 = styled__default.default.div`
   flex-direction: column;
   // margin: 0 0 40px 0;
 
-  ${props => getVariant(variants$1, props.variant)}
+  ${props => getVariant(props.variant, variants$1)}
   ${props => getCssResponsive(props)}
   ${props => getAspectResponsive(props)};
   ${props => props.hoverable ? styled.css`
@@ -1748,52 +2015,44 @@ const Container = bomCore.withSchema(ContainerBase, {
   Fluid: ContainerFluid,
   displayName: 'Container'
 });
-
-const DividerContainer = styled__default.default.div`
-  position: relative;
-  display: flex;
-  justify-content: center;
-  max-width: 100%;
-
-  &:before {
-    content: '';
-    display: block;
-    position: absolute;
-    width: 100%;
-    height: 1px;
-    left: 0;
-    top: 50%;
-    margin-top: 1px;
-    background-color: var(--color-neutral-300);
+function getContainer(props) {
+  const theme = props.theme;
+  const variant = props.variant || 'default';
+  const container = theme.container[variant];
+  if (container && container.maxWidth) {
+    return eachMedia(props, key => `max-width: ${container.maxWidth[key]}`);
+  } else {
+    return '';
   }
+}
 
+const DividerContainer = styled__default.default.div`
+  ${props => getVariant(props.variant, props.variants)}
   ${props => getCssResponsive(props, {
   padding: props.children ? '1rem 0' : '0.5rem 0'
 })}
 `;
-const DividerTitle = styled__default.default.span`
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  padding: 0 0.75em;
-  font-weight: 700;
-  font-size: 0.8rem;
-  text-transform: uppercase;
-  background-color: var(--color-neutral-100);
-  color: var(--color-neutral-400);
-  z-index: 1;
-  white-space: nowrap;
-`;
 const Divider = _a => {
   var {
+      className,
       children,
-      as = 'div'
+      as = 'div',
+      variant = 'default',
+      variants
     } = _a,
-    props = __rest(_a, ["children", "as"]);
+    props = __rest(_a, ["className", "children", "as", "variant", "variants"]);
+  const classNames = bomCore.getClassNames('divider', className, variant);
+  const globalVariants = useVariants('divider');
+  variants = variants || globalVariants || dividerVariants;
   return jsxRuntime.jsx(DividerContainer, Object.assign({
-    as: as
+    as: as,
+    className: classNames,
+    variant: variant,
+    variants: variants
   }, props, {
-    children: children && jsxRuntime.jsx(DividerTitle, Object.assign({}, props, {
+    children: children && jsxRuntime.jsx("span", Object.assign({
+      className: "title"
+    }, {
       children: children
     }))
   }));
@@ -2961,9 +3220,48 @@ var button = {
   borderRadius: "0.2em"
 };
 var form = {
-  fontSize: "1.125rem",
-  lineHeight: "1.6",
-  padding: "0.8em"
+  "default": {
+    fontSize: "1rem",
+    lineHeight: "1.625",
+    padding: "0.8em",
+    backgroundColor: "transparent",
+    backgroundColorDisabled: "var(--color-neutral-200)",
+    backgroundColorInfo: "var(--color-warning-100)",
+    backgroundColorError: "var(--color-warning-100)",
+    color: "inherit",
+    colorHover: "var(--color-neutral-900)",
+    colorDisabled: "var(--color-neutral-700)",
+    colorInfo: "var(--color-warning-900)",
+    colorError: "var(--color-warning-900)",
+    border: "0 solid transparent",
+    borderWidth: "2px",
+    borderColor: "var(--color-neutral-200)",
+    borderColorHover: "var(--color-neutral-300)",
+    borderColorDisabled: "var(--color-neutral-300)",
+    borderColorInfo: "var(--color-warning-500)",
+    borderColorError: "var(--color-warning-500)",
+    borderRadius: "var(--border-radius)",
+    outline: "2px solid transparent",
+    outlineColorFocus: "var(--color-primary-200)",
+    outlineColorActive: "var(--color-primary-500)",
+    outlineColorError: "var(--color-warning-500)",
+    outlineOffset: "2px",
+    transition: "border 150ms ease-in 0s, outline-color 150ms ease-in 0s, color 200ms ease-out 0s, box-shadow 200ms ease 0s"
+  },
+  negative: {
+    padding: "0.8em",
+    backgroundColorDisabled: "var(--color-neutral-800)",
+    colorHover: "var(--color-neutral-200)",
+    colorDisabled: "var(--color-neutral-600)",
+    borderColor: "var(--color-neutral-700)",
+    borderColorHover: "var(--color-neutral-600)",
+    borderColorDisabled: "var(--color-neutral-700)",
+    outlineColorFocus: "var(--color-primary-800)",
+    outlineColorActive: "var(--color-primary-500)",
+    borderWidth: "0 0 2px 0",
+    borderRadius: "0",
+    outlineOffset: "0"
+  }
 };
 var card = {
   shadow: "0 20px 20px -10px rgba(0,0,0,0.2)"
@@ -2994,15 +3292,15 @@ var color = {
     "900": "#09090A"
   },
   primary: {
-    "100": "#e0e6ef",
-    "200": "#bee3f5",
-    "300": "#86cdee",
-    "400": "#5bbce9",
+    "100": "#def2ff",
+    "200": "#b6e7ff",
+    "300": "#75d5ff",
+    "400": "#2cc1ff",
     "500": "#00a2ed",
-    "600": "#0071a6",
-    "700": "#005177",
-    "800": "#003147",
-    "900": "#001018"
+    "600": "#0087d4",
+    "700": "#006bab",
+    "800": "#005a8d",
+    "900": "#064b74"
   },
   secondary: {
     "100": "#e6fded",
@@ -3132,9 +3430,44 @@ const CssVars = styled.css`
   --button-size-lg: 1.25rem;
   --button-size-xl: 1.45rem;
   --button-border-radius: 0.2em;
-  --form-font-size: 1.125rem;
-  --form-line-height: 1.6;
-  --form-padding: 0.8em;
+  --form-default-font-size: 1rem;
+  --form-default-line-height: 1.625;
+  --form-default-padding: 0.8em;
+  --form-default-background-color: transparent;
+  --form-default-background-color-disabled: var(--color-neutral-200);
+  --form-default-background-color-info: var(--color-warning-100);
+  --form-default-background-color-error: var(--color-warning-100);
+  --form-default-color: inherit;
+  --form-default-color-hover: var(--color-neutral-900);
+  --form-default-color-disabled: var(--color-neutral-700);
+  --form-default-color-info: var(--color-warning-900);
+  --form-default-color-error: var(--color-warning-900);
+  --form-default-border: 0 solid transparent;
+  --form-default-border-width: 2px;
+  --form-default-border-color: var(--color-neutral-200);
+  --form-default-border-color-hover: var(--color-neutral-300);
+  --form-default-border-color-disabled: var(--color-neutral-300);
+  --form-default-border-color-info: var(--color-warning-500);
+  --form-default-border-color-error: var(--color-warning-500);
+  --form-default-border-radius: var(--border-radius);
+  --form-default-outline: 2px solid transparent;
+  --form-default-outline-color-focus: var(--color-primary-200);
+  --form-default-outline-color-active: var(--color-primary-500);
+  --form-default-outline-color-error: var(--color-warning-500);
+  --form-default-outline-offset: 2px;
+  --form-default-transition: border 150ms ease-in 0s, outline-color 150ms ease-in 0s, color 200ms ease-out 0s, box-shadow 200ms ease 0s;
+  --form-negative-padding: 0.8em;
+  --form-negative-background-color-disabled: var(--color-neutral-800);
+  --form-negative-color-hover: var(--color-neutral-200);
+  --form-negative-color-disabled: var(--color-neutral-600);
+  --form-negative-border-color: var(--color-neutral-700);
+  --form-negative-border-color-hover: var(--color-neutral-600);
+  --form-negative-border-color-disabled: var(--color-neutral-700);
+  --form-negative-outline-color-focus: var(--color-primary-800);
+  --form-negative-outline-color-active: var(--color-primary-500);
+  --form-negative-border-width: 0 0 2px 0;
+  --form-negative-border-radius: 0;
+  --form-negative-outline-offset: 0;
   --card-shadow: 0 20px 20px -10px rgba(0,0,0,0.2);
   --backdrop-opacity: 0.5;
   --border-radius: 0.5em;
@@ -3152,15 +3485,15 @@ const CssVars = styled.css`
   --color-neutral-700: #44444B;
   --color-neutral-800: #27272B;
   --color-neutral-900: #09090A;
-  --color-primary-100: #e0e6ef;
-  --color-primary-200: #bee3f5;
-  --color-primary-300: #86cdee;
-  --color-primary-400: #5bbce9;
+  --color-primary-100: #def2ff;
+  --color-primary-200: #b6e7ff;
+  --color-primary-300: #75d5ff;
+  --color-primary-400: #2cc1ff;
   --color-primary-500: #00a2ed;
-  --color-primary-600: #0071a6;
-  --color-primary-700: #005177;
-  --color-primary-800: #003147;
-  --color-primary-900: #001018;
+  --color-primary-600: #0087d4;
+  --color-primary-700: #006bab;
+  --color-primary-800: #005a8d;
+  --color-primary-900: #064b74;
   --color-secondary-100: #e6fded;
   --color-secondary-200: #b3f9ca;
   --color-secondary-300: #80f5a7;
@@ -3198,33 +3531,102 @@ const CssVars = styled.css`
   --color-danger-800: #8F0F02;
   --color-danger-900: #760301;
 
-    --grid-column-gap: var(--grid-default-column-gap-xs);
-    --grid-row-gap: var(--grid-default-row-gap-xs);
-    --container-max-width: var(--container-default-max-width-xs);
-
-  @media (min-width: 768px) { 
+  --grid-columns: var(--grid-default-columns);
+  --grid-size: var(--grid-default-size);
+  --grid-column-gap-xs: var(--grid-default-column-gap-xs);
+  --grid-column-gap-sm: var(--grid-default-column-gap-sm);
+  --grid-column-gap-md: var(--grid-default-column-gap-md);
+  --grid-column-gap-lg: var(--grid-default-column-gap-lg);
+  --grid-column-gap-xl: var(--grid-default-column-gap-xl);
+  --grid-row-gap-xs: var(--grid-default-row-gap-xs);
+  --grid-row-gap-sm: var(--grid-default-row-gap-sm);
+  --grid-row-gap-md: var(--grid-default-row-gap-md);
+  --grid-row-gap-lg: var(--grid-default-row-gap-lg);
+  --grid-row-gap-xl: var(--grid-default-row-gap-xl);
+  --container-max-width-xs: var(--container-default-max-width-xs);
+  --container-max-width-sm: var(--container-default-max-width-sm);
+  --container-max-width-md: var(--container-default-max-width-md);
+  --container-max-width-lg: var(--container-default-max-width-lg);
+  --container-max-width-xl: var(--container-default-max-width-xl);
+  --form-font-size: var(--form-default-font-size);
+  --form-line-height: var(--form-default-line-height);
+  --form-padding: var(--form-default-padding);
+  --form-background-color: var(--form-default-background-color);
+  --form-background-color-disabled: var(--form-default-background-color-disabled);
+  --form-background-color-info: var(--form-default-background-color-info);
+  --form-background-color-error: var(--form-default-background-color-error);
+  --form-color: var(--form-default-color);
+  --form-color-hover: var(--form-default-color-hover);
+  --form-color-disabled: var(--form-default-color-disabled);
+  --form-color-info: var(--form-default-color-info);
+  --form-color-error: var(--form-default-color-error);
+  --form-border: var(--form-default-border);
+  --form-border-width: var(--form-default-border-width);
+  --form-border-color: var(--form-default-border-color);
+  --form-border-color-hover: var(--form-default-border-color-hover);
+  --form-border-color-disabled: var(--form-default-border-color-disabled);
+  --form-border-color-info: var(--form-default-border-color-info);
+  --form-border-color-error: var(--form-default-border-color-error);
+  --form-border-radius: var(--form-default-border-radius);
+  --form-outline: var(--form-default-outline);
+  --form-outline-color-focus: var(--form-default-outline-color-focus);
+  --form-outline-color-active: var(--form-default-outline-color-active);
+  --form-outline-color-error: var(--form-default-outline-color-error);
+  --form-outline-offset: var(--form-default-outline-offset);
+  --form-transition: var(--form-default-transition);
+
+  --font-base-size: var(--font-base-size-xs);
+  --grid-column-gap: var(--grid-default-column-gap-xs);
+  --grid-row-gap: var(--grid-default-row-gap-xs);
+  --media-query: var(--media-query-xs);
+  --container-max-width: var(--container-default-max-width-xs);
+  --container-fluid-max-width: var(--container-fluid-max-width-xs);
+  --button-size: var(--button-size-xs);
+  --shadow: var(--shadow-xs);
+
+  @media (min-width: 768px) {
+    --font-base-size: var(--font-base-size-sm);
     --grid-column-gap: var(--grid-default-column-gap-sm);
     --grid-row-gap: var(--grid-default-row-gap-sm);
+    --media-query: var(--media-query-sm);
     --container-max-width: var(--container-default-max-width-sm);
-  }
+    --container-fluid-max-width: var(--container-fluid-max-width-sm);
+    --button-size: var(--button-size-sm);
+    --shadow: var(--shadow-sm);
+  };
 
-  @media (min-width: 1024px) { 
+  @media (min-width: 1024px) {
+    --font-base-size: var(--font-base-size-md);
     --grid-column-gap: var(--grid-default-column-gap-md);
     --grid-row-gap: var(--grid-default-row-gap-md);
+    --media-query: var(--media-query-md);
     --container-max-width: var(--container-default-max-width-md);
-  }
+    --container-fluid-max-width: var(--container-fluid-max-width-md);
+    --button-size: var(--button-size-md);
+    --shadow: var(--shadow-md);
+  };
 
-  @media (min-width: 1440px) { 
+  @media (min-width: 1440px) {
+    --font-base-size: var(--font-base-size-lg);
     --grid-column-gap: var(--grid-default-column-gap-lg);
     --grid-row-gap: var(--grid-default-row-gap-lg);
+    --media-query: var(--media-query-lg);
     --container-max-width: var(--container-default-max-width-lg);
-  }
+    --container-fluid-max-width: var(--container-fluid-max-width-lg);
+    --button-size: var(--button-size-lg);
+    --shadow: var(--shadow-lg);
+  };
 
-  @media (min-width: 1600px) { 
+  @media (min-width: 1600px) {
+    --font-base-size: var(--font-base-size-xl);
     --grid-column-gap: var(--grid-default-column-gap-xl);
     --grid-row-gap: var(--grid-default-row-gap-xl);
+    --media-query: var(--media-query-xl);
     --container-max-width: var(--container-default-max-width-xl);
-  }
+    --container-fluid-max-width: var(--container-fluid-max-width-xl);
+    --button-size: var(--button-size-xl);
+    --shadow: var(--shadow-xl);
+  };
 
 }
 `;
@@ -3604,6 +4006,35 @@ const GridRow = styled__default.default.div`
   ${props => getCssResponsive(props)}
   ${props => getGrid(props)}
 `;
+function getGrid(props, defaultValue) {
+  if (defaultValue === void 0) {
+    defaultValue = {};
+  }
+  props = Object.assign(Object.assign({}, defaultValue), props);
+  const variant = props.variant || 'default';
+  return styled.css`
+    ${props.columns ? styled.css`
+      --grid-columns: ${props.columns};
+    ` : styled.css`
+      --grid-columns: var(--grid-${variant}-columns, 12);
+    `}
+    ${props.size ? styled.css`
+      --grid-size: ${props.size};
+    ` : styled.css`
+      --grid-size: var(--grid-${variant}-size, 1fr);
+    `}
+    ${props.columnGap ? styled.css`
+      --grid-column-gap: ${props.columnGap};
+    ` : eachMedia(props, key => `--grid-column-gap: var(--grid-${variant}-column-gap-${key}, 0);`)}
+    ${props.rowGap ? styled.css`
+      --grid-row-gap: ${props.rowGap};
+    ` : eachMedia(props, key => `--grid-row-gap: var(--grid-${variant}-row-gap-${key}, 0);`)}
+    display: grid;
+    grid-template-columns: repeat(var(--grid-columns), var(--grid-size));
+    grid-column-gap: var(--grid-column-gap);
+    grid-row-gap: var(--grid-row-gap);
+  `;
+}
 
 const GridBase = styled__default.default.div`
   // default grid column
@@ -4514,25 +4945,17 @@ const CssUl = styled.css`
   }
 `;
 const StyledText = styled__default.default.div`
-  ${props => {
-  const variant = props.variant;
-  const font = variant && props.theme.font[variant];
-  // console.log(props.children, variant, size);
-  return styled.css`
-      ${font ? styled.css`
-        font-family: var(--font-${variant}-family, var(--base-font-family));
-        // font-size: var(--font-${variant}-size, 1rem);
-        ${font.size && typeof font.size === 'object' ? eachMedia(props, key => `font-size: var(--font-${variant}-size-${key});`) : `font-size: var(--font-${variant}-size, 1rem)`};
-        font-weight: var(--font-${variant}-font-weight, inherit);
-        line-height: var(--font-${variant}-line-height, 1);
-      ` : ''}
-      ${props.gradient ? styled.css`
-        background: -webkit-linear-gradient(0deg, var(--color-secondary-500), var(--color-primary-500));
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-      ` : ''}
-    `;
-}}
+  ${props => getFontVariantResponsive(props, (variant, font) => styled.css`
+    ${font.family ? styled.css`font-family: var(--font-${variant}-family, var(--base-font-family));` : ''}
+    ${font.size ? styled.css`font-size: var(--font-${variant}-size, 1rem);` : ''}
+    ${font.lineHeight ? styled.css`line-height: var(--font-${variant}-line-height, 1);` : ''}
+    ${font.fontWeight ? styled.css`font-weight: var(--font-${variant}-font-weight, inherit);` : ''}
+  `)};
+  ${props => props.gradient ? styled.css`
+    background: -webkit-linear-gradient(0deg, var(--color-secondary-500), var(--color-primary-500));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  ` : ''}
   ${CssH}
   ${CssA}
   ${CssP}
@@ -4927,7 +5350,7 @@ const NavUl = styled__default.default.ul`
   margin: 0;
   padding: 0;
   display: flex;
-  ${props => getVariant(variants, props.type)}
+  ${props => getVariant(props.type, variants)}
   ${props => getCssResponsive(props, {
   gap: '0.6rem'
 })}
@@ -6645,23 +7068,16 @@ const StyledAutocompleteItem = styled__default.default.div`
   }
 `;
 const StyledAutocompleteContainer = styled__default.default.div`
+  ${CssFormControl}
   display: flex;
   align-items: center;
   width: 100%;
-  font-size: var(--form-font-size);
-  line-height: var(--form-line-height);
-  border: 2px solid;
-  border-radius: var(--border-radius);
-  color: inherit;
-  background-color: transparent;
-  border-color: var(--color-neutral-200);
-  outline-color: transparent;
-  transition: border 150ms ease-in 0s, outline-color 150ms ease-in 0s, color 200ms ease-out 0s;
   cursor: pointer;
 
   &>input {
     flex-grow: 1;
     appearance: none;
+    min-width: 0;
 
     &::placeholder {
       color: inherit;
@@ -6669,53 +7085,12 @@ const StyledAutocompleteContainer = styled__default.default.div`
     }
   }
 
-  /*
-  &>svg {
-    color: var(--color-neutral-300);
-    transition: color 200ms ease-out 0s;
-  }
-  */
-
-  &.active:not(.disabled):not(.focus),
-  &:hover:not(.disabled):not(.focus) {
-    border-color: var(--color-neutral-300);
-    /*
-    &>svg {
-      color: var(--color-neutral-400);
-    }
-    */
-  }
-
-  &.focus {
-    outline: 2px solid var(--color-primary-200);
-    outline-offset: 2px;
-
-    &>input::placeholder {
-      opacity: 0.5;
-    }
-    /*
-    &>svg {
-      color: var(--color-neutral-500);
-    }
-    */
-  }
-
-  &.disabled {
-    &>input::placeholder {
-      cursor: not-allowed;
-    }
-  }
-
-  &.hidden {
-    display: none;
-  }
-
   &>:first-child:not(input) {
-    margin: 0 0.5em;
+    margin: 0 0 0 0.5em;
   }
 
   &>:last-child:not(input):not(.button) {
-    margin: 0 0.5em;
+    margin: 0 0.5em 0 0;
   }
 
   &>.button {
@@ -6877,6 +7252,12 @@ const Autocomplete = /*#__PURE__*/React.forwardRef((_a, ref) => {
 });
 Autocomplete.displayName = 'Autocomplete';
 
+const CssAutocompleteDefault = styled.css`
+`;
+const autocompleteVariants = {
+  default: CssAutocompleteDefault
+};
+
 const StyledCheckboxChecked = styled__default.default(Svg)`
   width: 24px;
   height: 24px;
@@ -6925,9 +7306,11 @@ const CheckboxUncheckedSvg = _a => {
     })
   }));
 };
-const CheckboxIcon = props => jsxRuntime.jsxs(jsxRuntime.Fragment, {
-  children: [jsxRuntime.jsx(CheckboxCheckedSvg, Object.assign({}, props)), jsxRuntime.jsx(CheckboxUncheckedSvg, Object.assign({}, props))]
-});
+const CheckboxIcon = props => {
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(CheckboxCheckedSvg, Object.assign({}, props)), jsxRuntime.jsx(CheckboxUncheckedSvg, Object.assign({}, props))]
+  });
+};
 
 const StyledCheckboxInput = styled__default.default.input`
   position: absolute;
@@ -6945,22 +7328,22 @@ const StyledCheckboxInput = styled__default.default.input`
 `;
 const StyledCheckboxIcon = styled__default.default.div`
   margin-right: 0.5rem;
-  color: var(--color-neutral-300);
   pointer-events: none;
   outline: 2px solid transparent;
   outline-offset: 1px;
   transition: outline-color 150ms ease-in 0s, color 200ms ease-out 0s;
+  color: var(--form-border-color-hover);
 
   input:checked ~ & {
-    color: var(--color-primary-500);
+    color: var(--form-outline-color-active);
   }
 
   input:not(:disabled):hover ~ & {
-    outline-color: var(--color-neutral-300);
+    outline-color: var(--form-border-color-hover);
   }
 
   input:focus ~ & {
-    outline-color: var(--color-primary-200);
+    outline-color: var(--form-outline-color-focus);
   }
 `;
 const StyledCheckbox = styled__default.default.div`
@@ -6988,6 +7371,22 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_a, ref) => {
 });
 Checkbox.displayName = 'Checkbox';
 
+const CssCheckboxDefault = styled.css`
+`;
+const checkboxVariants = {
+  default: CssCheckboxDefault
+};
+
+const StyledSelectIcon = styled__default.default(bomMixerIcons.IconChevronDown)`
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  margin-left: -2.8rem;
+  align-self: center;
+  pointer-events: none;
+`;
+const SelectIcon = /*#__PURE__*/React__default.default.memo(StyledSelectIcon);
+
 const defaultContext$1 = {
   disableAll: false,
   visible: false,
@@ -7009,7 +7408,7 @@ const StyledCustomSelectDivider = styled__default.default.div`
   overflow: hidden;
   user-select: none;
   line-height: 0;
-  border-top: 1px solid var(--color-neutral-300);
+  border-top: 1px solid var(--form-border-color);
 `;
 const CustomSelectDivider = StyledCustomSelectDivider;
 CustomSelectDivider.displayName = 'CustomSelectDivider';
@@ -7019,9 +7418,9 @@ const StyledCustomSelectDropdown = styled__default.default.div`
   overflow-y: auto;
   overflow-anchor: none;
   scroll-behavior: smooth;
-  border-radius: var(--border-radius);
-  box-shadow: var(--shadow-xs);
+  border-radius: var(--form-border-radius);
   background-color: var(--color-neutral-100);
+  box-shadow: var(--shadow-xs);
 `;
 const CustomSelectDropdown = /*#__PURE__*/React__default.default.forwardRef((_ref, dropdownRef) => {
   let {
@@ -7055,37 +7454,6 @@ const CustomSelectDropdown = /*#__PURE__*/React__default.default.forwardRef((_re
 });
 CustomSelectDropdown.displayName = 'CustomSelectDropdown';
 
-const DownArrowSvg$1 = props => jsxRuntime.jsx("svg", Object.assign({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "24",
-  height: "24",
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  strokeWidth: "2",
-  strokeLinecap: "round",
-  strokeLinejoin: "round"
-}, props, {
-  children: jsxRuntime.jsx("polyline", {
-    points: "6 9 12 15 18 9"
-  })
-}));
-const DownArrow$1 = styled__default.default(DownArrowSvg$1)`
-  flex-shrink: 0;
-  width: 24px;
-  height: 24px;
-  margin-left: -2.8rem;
-  align-self: center;
-  pointer-events: none;
-  transition: all 200ms ease;
-  transition: color 200ms ease, transform 200ms ease;
-
-  .opened & {
-    transform: rotate(180deg);
-  }
-`;
-const CustomSelectIcon = /*#__PURE__*/React__default.default.memo(DownArrow$1);
-
 const StyledInput$1 = styled__default.default.input`
   position: fixed;
   top: -10000px;
@@ -7133,12 +7501,12 @@ const StyledCustomSelectLabel = styled__default.default.div`
   justify-content: flex-start;
   align-items: center;
   width: 100%;
-  padding: 0.65rem 0.5rem;
+  padding: 0.5rem;
   margin: 0;
   user-select: none;
-  color: var(--color-primary-700);
-  border-bottom: 1px solid var(--color-neutral-200);
-  font-size: 0.875em;
+  color: var(--form-color);
+  border-bottom: 1px solid var(--form-border-color);
+  font-size: 0.7em;
   font-weight: 500;
   text-transform: uppercase;
 `;
@@ -7155,67 +7523,6 @@ const CustomSelectLabel = _a => {
 };
 CustomSelectLabel.displayName = 'CustomSelectLabel';
 
-const XSvg = props => jsxRuntime.jsxs("svg", Object.assign({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "24",
-  height: "24",
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  strokeWidth: "2",
-  strokeLinecap: "round",
-  strokeLinejoin: "round"
-}, props, {
-  children: [jsxRuntime.jsx("line", {
-    x1: "18",
-    y1: "6",
-    x2: "6",
-    y2: "18"
-  }), jsxRuntime.jsx("line", {
-    x1: "6",
-    y1: "6",
-    x2: "18",
-    y2: "18"
-  })]
-}));
-const Clear = styled__default.default(XSvg)`
-  flex-shrink: 0;
-  width: 1em;
-  height: 1em;
-  margin-left: 0.2em;
-  align-self: center;
-  transition: all 200ms ease;
-
-  &:hover {
-    color: var(--color-primary-900);
-  }
-`;
-const CustomSelectIconClear = /*#__PURE__*/React__default.default.memo(Clear);
-
-styled__default.default.div`
-  display: inline-flex;
-  align-items: center;
-  line-height: 1;
-  padding: 0.5em 0.5em;
-  border-radius: calc(var(--border-radius) * 0.5);
-  background-color: var(--color-primary-100);
-  color: var(--color-primary-600);
-
-  &.disabled {
-    color: var(--color-primary-400);
-  }
-
-  /*
-  & > :global(div:not(.clear-icon)),
-  & > :global(div:not(.clear-icon):hover) {
-    border-radius: 0;
-    background-color: transparent;
-    padding: 0;
-    margin: 0;
-    color: inherit;
-  }
-  */
-`;
 const CustomSelectMultipleValue = _ref => {
   let {
     disabled,
@@ -7225,20 +7532,18 @@ const CustomSelectMultipleValue = _ref => {
   const classNames = bomCore.getClassNames('multiple-value', {
     disabled
   });
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsxs(Button, Object.assign({
-      variant: "secondary",
-      size: "sm",
-      className: classNames,
-      disabled: disabled
-    }, {
-      children: [jsxRuntime.jsx("span", {
-        children: children
-      }), !!onClear && jsxRuntime.jsx(CustomSelectIconClear, {
-        onClick: onClear
-      })]
-    })), false ]
-  });
+  return jsxRuntime.jsxs(Button, Object.assign({
+    variant: "outline",
+    size: "sm",
+    className: classNames,
+    disabled: disabled
+  }, {
+    children: [jsxRuntime.jsx("span", {
+      children: children
+    }), !!onClear && jsxRuntime.jsx(bomMixerIcons.IconX, {
+      onClick: onClear
+    })]
+  }));
 };
 CustomSelectMultipleValue.displayName = 'CustomSelectMultipleValue';
 
@@ -7247,34 +7552,18 @@ const StyledCustomSelectOption = styled__default.default.div`
   justify-content: flex-start;
   align-items: center;
   width: 100%;
-  padding: 0.65rem 0.5rem;
+  padding: 0.5rem;
   margin: 0;
   user-select: none;
   border: 0;
-  color: var(--color-neutral-700);
+  color: var(--form-color-disabled);
   transition: background-color 0.2s ease 0s, border-color 0.2s ease 0s, outline-color 0.2s ease 0s;
   cursor: pointer;
 
-  &.disabled {
-    cursor: not-allowed;
-    background-color: var(--color-neutral-200);
-    color: var(--color-neutral-500);
-  }
-
-  &:hover:not(.disabled):not(.label):not(.active) {
-    background-color: var(--color-primary-100);
-    color: var(--color-primary-500);
-  }
-
-  &.active {
-    background-color: var(--color-primary-500);
-    color: var(--color-neutral-100);
-  }
-
   &.divider {
     line-height: 0;
     overflow: hidden;
-    border-top: 1px solid var(--color-neutral-300);
+    border-top: 1px solid var(--form-border-color);
     width: 100%;
     height: 1px;
     padding: 0;
@@ -7282,8 +7571,8 @@ const StyledCustomSelectOption = styled__default.default.div`
   }
 
   &.label {
-    color: var(--color-primary-700);
-    border-bottom: 1px solid var(--color-neutral-200);
+    color: var(--form-color);
+    border-bottom: 1px solid var(--form-border-color);
     text-transform: capitalize;
     font-size: 0.875em;
     width: 100%;
@@ -7291,6 +7580,22 @@ const StyledCustomSelectOption = styled__default.default.div`
     text-transform: uppercase;
     cursor: default;
   }
+
+  &.disabled {
+    background-color: var(--form-background-color-disabled);
+    color: var(--form-color-disabled);
+    cursor: not-allowed;
+  }
+
+  &:hover:not(.disabled):not(.label):not(.active) {
+    background-color: var(--form-border-color);
+    color: var(--form-color-hover);
+  }
+
+  &.active {
+    background-color: var(--form-outline-color-active);
+    color: var(--color-neutral-100);
+  }
 `;
 const CustomSelectOption = _a => {
   var {
@@ -7352,72 +7657,48 @@ const CustomSelectOption = _a => {
 CustomSelectOption.displayName = 'CustomSelectOption';
 
 const StyledCustomSelect = styled__default.default.div`
+  ${CssFormControl}
+
+  padding: var(--form-padding);
   position: relative;
   display: inline-flex;
   justify-content: space-between;
   align-items: center;
   overflow: hidden;
   white-space: nowrap;
-  padding: var(--form-padding);
   appearance: none;
-  font-size: var(--form-font-size);
-  line-height: var(--form-line-height);
-  border: 2px solid;
-  border-radius: var(--border-radius);
-  color: inherit;
-  background-color: ${props => props.disabled ? 'var(--color-neutral-200)' : 'transparent'};
-  border-color: var(--color-neutral-200);
   user-select: none;
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  transition: border 150ms ease-in 0s, outline-color 150ms ease-in 0s, color 200ms ease-out 0s, box-shadow 200ms ease 0s;
   cursor: pointer;
 
+  .placeholder {
+    color: inherit;
+    opacity: 0.3;
+  }
+
   .value {
     display: inline-flex;
     flex: 1;
     height: 100%;
     align-items: center;
-    line-height: 1;
+    // line-height: 1;
     padding: 0;
     margin-right: 1.25em;
     width: calc(100% - 1.25em);
   }
 
-  .value,
   .icon {
-    color: var(--color-neutral-900);
-  }
-
-  &.disabled {
-    cursor: not-allowed;
+    pointer-events: none;
+    transition: color 200ms ease, transform 200ms ease;
   }
 
-  &.active:not(.disabled),
-  &:hover:not(.disabled) {
-    border-color: var(--color-neutral-300);
-
+  &.opened {
     .icon {
-      color: var(--color-primary-500);
-    }
-  }
-
-  &.active:not(.disabled) {
-    outline-color: var(--color-primary-200);
-
-    .placeholder {
-      opacity: 0.5;
+      transform: rotate(180deg);
     }
   }
 
-  .placeholder {
-    color: inherit;
-    opacity: 0.3;
-  }
-
   &.multiple {
     padding: calc(var(--form-padding) * 0.675);
-    // padding: 0.675rem;
 
     .placeholder {
       padding: 0.563rem 0;
@@ -7455,7 +7736,7 @@ const CustomSelectBase = /*#__PURE__*/React.forwardRef((_a, selectRef) => {
       onFocus
     } = _a,
     props = __rest(_a, ["disabled", "pure", "multiple", "clearable", "className", "disableMatchWidth", "onDropdownVisibleChange", "value", "initialValue", "icon", "children", "onChange", "placeholder", "dropdownClassName", "dropdownStyle", "getPopupContainer", "onBlur", "onFocus"]);
-  const Icon = icon || CustomSelectIcon;
+  const Icon = icon || SelectIcon;
   const ref = React.useRef(null);
   const inputRef = React.useRef(null);
   const dropdownRef = React.useRef(null);
@@ -7602,7 +7883,8 @@ const CustomSelectBase = /*#__PURE__*/React.forwardRef((_a, selectRef) => {
         })
       })), value && (multiple ? jsxRuntime.jsx(Flex.Row, Object.assign({
         flexWrap: "wrap",
-        maxWidth: "calc(100% - 1.5rem)"
+        maxWidth: "calc(100% - 1.5rem)",
+        minHeight: "2.2em"
       }, {
         children: selectedChildren
       })) : jsxRuntime.jsx("span", Object.assign({
@@ -7626,69 +7908,91 @@ const CustomSelectBase = /*#__PURE__*/React.forwardRef((_a, selectRef) => {
 });
 CustomSelectBase.displayName = 'CustomSelect';
 const CustomSelect = bomCore.withSchema(CustomSelectBase, {
-  Label: CustomSelectLabel,
-  Divider: CustomSelectDivider,
-  Option: CustomSelectOption
-});
-
-const StyledField = styled__default.default.div`
-  display: flex;
-  flex-direction: column;
-  // margin-bottom: 0.5rem;
-
-  label {
-    font-weight: 500;
-    margin-bottom: 0.3rem;
-  }
+  Label: CustomSelectLabel,
+  Divider: CustomSelectDivider,
+  Option: CustomSelectOption
+});
 
+const StyledField = styled__default.default.div`
+  ${props => getVariant(props.variant, props.variants)}
   ${props => getCssResponsive(props)}
 `;
 const Field = /*#__PURE__*/React.forwardRef((_a, ref) => {
   var {
-      className
+      className,
+      variant = 'default',
+      variants
     } = _a,
-    props = __rest(_a, ["className"]);
-  const classNames = bomCore.getClassNames('input', className);
+    props = __rest(_a, ["className", "variant", "variants"]);
+  const classNames = bomCore.getClassNames('input', className, variant);
+  const globalVariants = useVariants('field');
+  variants = variants || globalVariants || fieldVariants;
   return jsxRuntime.jsx(StyledField, Object.assign({
     ref: ref,
     className: classNames,
-    as: "div"
+    as: "div",
+    variant: variant,
+    variants: variants
   }, props));
 });
 Field.displayName = 'Field';
 
 const StyledFormError = styled__default.default(Text)`
-  padding: 1rem;
-  font-weight: 700;
-  text-align: center;
-  background: var(--color-danger-100);
-  color: var(--color-danger-500);
+  ${props => getVariant(props.variant, props.variants)}
   ${props => getCssResponsive(props)}
 `;
 const FormError = /*#__PURE__*/React.forwardRef((_a, ref) => {
   var {
-      className
+      className,
+      variant = 'default',
+      variants
     } = _a,
-    props = __rest(_a, ["className"]);
-  const classNames = bomCore.getClassNames('form-error', className);
+    props = __rest(_a, ["className", "variant", "variants"]);
+  const classNames = bomCore.getClassNames('form-error', className, variant);
+  const globalVariants = useVariants('formError');
+  variants = variants || globalVariants || formErrorVariants;
   return jsxRuntime.jsx(StyledFormError, Object.assign({
     ref: ref,
-    className: classNames
+    className: classNames,
+    variant: variant,
+    variants: variants
   }, props));
 });
 FormError.displayName = 'FormError';
 
-function FormTester(props) {
+const StyledFormTester = styled__default.default.div`
+  ${props => getVariant(props.variant, props.variants)}
+  ${props => getCssResponsive(props)}
+`;
+const FormTester = /*#__PURE__*/React.forwardRef((_a, ref) => {
+  var {
+      className,
+      form,
+      onReset,
+      onTest,
+      variant = 'default',
+      variants
+    } = _a,
+    props = __rest(_a, ["className", "form", "onReset", "onTest", "variant", "variants"]);
   const label = bomMixerHooks.useLabel();
-  const json = JSON.stringify(props.form.value, null, 2);
-  return jsxRuntime.jsxs(Box, Object.assign({
-    margin: "1em 0",
-    padding: "0.5em 1em",
-    border: "1px solid var(--color-warning-500)",
-    background: "var(--color-warning-100)"
-  }, {
-    children: [jsxRuntime.jsxs(Flex.Row, Object.assign({
-      justifyContent: "space-between"
+  const classNames = bomCore.getClassNames('input', className, variant);
+  const globalVariants = useVariants('formTester');
+  variants = variants || globalVariants || formTesterVariants;
+  const onReset_ = event => {
+    onReset && onReset(event);
+  };
+  const onTest_ = event => {
+    onTest && onTest(event);
+  };
+  const json = form ? JSON.stringify(form.value, null, 2) : null;
+  return jsxRuntime.jsx(StyledFormTester, Object.assign({
+    ref: ref,
+    className: classNames,
+    variant: variant,
+    variants: variants
+  }, props, {
+    children: jsxRuntime.jsxs(Flex.Col, Object.assign({
+      gap: "1rem"
     }, {
       children: [jsxRuntime.jsxs(Flex.Col, {
         children: [jsxRuntime.jsx(Text, Object.assign({
@@ -7698,127 +8002,103 @@ function FormTester(props) {
           children: "Form Tester"
         })), jsxRuntime.jsx(Text, Object.assign({
           variant: "paragraph30",
-          marginBottom: "1em"
+          lineHeight: "1.3"
         }, {
           children: "this component is visible only during development."
         }))]
-      }), jsxRuntime.jsxs(Flex.Row, Object.assign({
-        marginBottom: "1em"
+      }), json && jsxRuntime.jsx("code", {
+        children: json
+      }), (onReset || onTest) && jsxRuntime.jsxs(Flex.Row, Object.assign({
+        className: "actions",
+        justifyContent: "space-between"
       }, {
-        children: [jsxRuntime.jsx(Button, Object.assign({
-          variant: "secondary",
-          onClick: props.onReset
-        }, {
-          children: label('form.reset')
-        })), jsxRuntime.jsx(Button, Object.assign({
-          variant: "primary",
-          onClick: props.onTest
-        }, {
-          children: label('form.test')
-        }))]
+        children: [jsxRuntime.jsx(Flex, {
+          children: onReset && jsxRuntime.jsx(Button, Object.assign({
+            variant: "outline",
+            size: "sm",
+            onClick: onReset_
+          }, {
+            children: label('form.reset')
+          }))
+        }), jsxRuntime.jsx(Flex, {
+          children: onTest && jsxRuntime.jsx(Button, Object.assign({
+            variant: "primary",
+            size: "sm",
+            onClick: onTest_
+          }, {
+            children: label('form.test')
+          }))
+        })]
       }))]
-    })), jsxRuntime.jsx("code", Object.assign({
-      style: {
-        padding: '20px 0'
-      }
-    }, {
-      children: json
-    }))]
+    }))
   }));
-}
+});
+FormTester.displayName = 'FormTester';
 
 const StyledForm = styled__default.default.div`
-  --form-font-size: 1rem; // 1.125rem
-  --form-line-height: 1.625; // 1.625
-  --form-padding: 0.8em; // 1rem
+  ${props => getForm(props)}
   ${props => getCssResponsive(props)}
 `;
 const Form = /*#__PURE__*/React.forwardRef((_a, ref) => {
-  var _b;
   var {
-      className
+      className,
+      state,
+      variant
     } = _a,
-    props = __rest(_a, ["className"]);
-  const classNames = bomCore.getClassNames('form', className, (_b = props.state) === null || _b === void 0 ? void 0 : _b.flags);
+    props = __rest(_a, ["className", "state", "variant"]);
+  const classNames = bomCore.getClassNames('form', className, state === null || state === void 0 ? void 0 : state.flags, variant);
   return jsxRuntime.jsx(StyledForm, Object.assign({
     ref: ref,
     className: classNames,
-    as: "form"
+    as: "form",
+    variant: variant
   }, props));
 });
 Form.displayName = 'Form';
-
-const StyledInputContainer = styled__default.default.div`
-  display: flex;
-  align-items: center;
-  width: 100%;
-  font-size: var(--form-font-size);
-  line-height: var(--form-line-height);
-  border: 2px solid;
-  border-radius: var(--border-radius);
-  color: inherit;
-  background-color: transparent;
-  border-color: var(--color-neutral-200);
-  outline-color: transparent;
-  transition: border 150ms ease-in 0s, outline-color 150ms ease-in 0s, color 200ms ease-out 0s;
-  cursor: pointer;
-
-  &.disabled {
-    cursor: not-allowed;
-  }
-
-  &.active:not(.disabled),
-  &:hover:not(.disabled) {
-    border-color: var(--color-neutral-300);
-  }
-
-  &.focus {
-    outline: 2px solid var(--color-primary-200);
-    outline-offset: 2px;
-
-    input::placeholder {
-      opacity: 0.5;
-    }
-  }
-
-  &.hidden {
-    display: none;
-  }
-
-  input {
-    flex-grow: 1;
-    appearance: none;
-  }
-
-  input::placeholder {
-    color: inherit;
-    opacity: 0.3;
-  }
-
-  &>:first-child:not(input) {
-    margin: 0 0.5em;
-  }
-
-  &>:last-child:not(input) {
-    margin: 0 0.5em;
+function getForm(props) {
+  const variant = props.variant || 'default';
+  const form = props.theme.form[variant];
+  if (form) {
+    return Object.keys(form).map(k => {
+      const key = hypenize(k);
+      const rule = `--form-${key}: var(--form-${variant}-${key}, --form-${key});`;
+      return rule;
+    }).join('\n');
+  } else {
+    return undefined;
   }
+  /*
+  return css`
+    --form-font-size: var(--form-${variant}-font-size, 1rem);
+    --form-line-height: var(--form-${variant}-line-height, 1.625);
+    --form-padding: var(--form-${variant}-padding, 0.8em);
+    --form-background-color: var(--form-${variant}-background-color, transparent);
+    --form-background-color-disabled: var(--form-${variant}-background-color-disabled, var(--color-neutral-200));
+    --form-color: var(--form-${variant}-color, inherit);
+    --form-color-hover: var(--form-${variant}-color-hover, var(--color-neutral-900));
+    --form-border: var(--form-${variant}-border, 0 solid transparent);
+    --form-border-width: var(--form-${variant}-border-width, 2px);
+    --form-border-color: var(--form-${variant}-border-color, var(--color-neutral-200));
+    --form-border-color-hover: var(--form-${variant}-border-color-hover, var(--color-neutral-300));
+    --form-border-color-disabled: var(--form-${variant}-border-color-disabled, var(--color-neutral-300));
+    --form-border-radius: var(--form-${variant}-border-radius, var(--border-radius));
+    --form-outline: var(--form-${variant}-outline, 2px solid transparent);
+    --form-outline-color-focus: var(--form-${variant}-outline-color-focus, var(--color-primary-200));
+    --form-outline-color-active: var(--form-${variant}-outline-color-active, var(--color-primary-500));
+    --form-outline-offset: var(--form-${variant}-outline-offset, 2px);
+    --form-transition: var(--form-${variant}-transition, border 150ms ease-in 0s, outline-color 150ms ease-in 0s, color 200ms ease-out 0s, box-shadow 200ms ease 0s);
+  `;
+  */
+}
 
+const StyledInputContainer = styled__default.default.div`
+  ${props => getVariantKey('container', props.variant, props.variants)}
   ${props => getCssResponsive(props)}
 `;
 const StyledInput = styled__default.default.div`
-  display: block;
-  appearance: none;
-  padding: var(--form-padding);
-  font-size: var(--form-font-size);
-  line-height: var(--form-line-height);
-  color: inherit;
-  background-color: transparent;
-  border: none;
-  outline: none;
-
+  ${props => getVariantKey('input', props.variant, props.variants)}
   ${props => getCssResponsive(props)}
 `;
-// !!! as
 const Input = /*#__PURE__*/React.forwardRef((_a, ref) => {
   var {
       as = 'input',
@@ -7827,9 +8107,11 @@ const Input = /*#__PURE__*/React.forwardRef((_a, ref) => {
       after,
       type = 'text',
       onFocus,
-      onBlur
+      onBlur,
+      variant = 'default',
+      variants
     } = _a,
-    props = __rest(_a, ["as", "className", "before", "after", "type", "onFocus", "onBlur"]);
+    props = __rest(_a, ["as", "className", "before", "after", "type", "onFocus", "onBlur", "variant", "variants"]);
   const [focus, setFocus] = React.useState(false);
   const onFocus_ = event => {
     onFocus && onFocus(event);
@@ -7844,16 +8126,22 @@ const Input = /*#__PURE__*/React.forwardRef((_a, ref) => {
     disabled: props.disabled,
     readonly: props.readOnly,
     hidden: props.hidden
-  }, className);
+  }, className, variant);
+  const globalVariants = useVariants('input');
+  variants = variants || globalVariants || inputVariants;
   return jsxRuntime.jsxs(StyledInputContainer, Object.assign({
-    className: classNames
+    className: classNames,
+    variant: variant,
+    variants: variants
   }, props, {
     children: [before, jsxRuntime.jsx(StyledInput, Object.assign({
       ref: ref,
       as: as,
       type: type,
       onFocus: onFocus_,
-      onBlur: onBlur_
+      onBlur: onBlur_,
+      variant: variant,
+      variants: variants
     }, props)), after]
   }));
 });
@@ -7878,25 +8166,6 @@ const StyledInputGroup = styled__default.default.div`
     cursor: not-allowed;
   }
 
-  &.active:not(.disabled),
-  &:hover:not(.disabled) {
-    border-color: var(--color-neutral-300);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--color-primary-200);
-    outline-offset: 2px;
-
-    &::placeholder {
-      opacity: 0.5;
-    }
-  }
-
-  &::placeholder {
-    color: inherit;
-    opacity: 0.3;
-  }
-
   ${props => getCssResponsive(props)}
 `;
 // !!! unused?
@@ -7920,25 +8189,26 @@ const InputGroup = bomCore.withSchema(InputGroupBase, {
 });
 
 const StyledLabel = styled__default.default.div`
-  display: flex;
-  align-items: center;
-  width: 100%;
-  font-size: var(--font-display-size-10, --form-font-size, 1rem);
-  cursor: pointer;
-
+  ${props => getVariant(props.variant, props.variants)}
   ${props => getCssResponsive(props)}
 `;
 const Label = /*#__PURE__*/React.forwardRef((_a, ref) => {
   var {
       className,
-      as = 'label'
+      as = 'label',
+      variant = 'default',
+      variants
     } = _a,
-    props = __rest(_a, ["className", "as"]);
-  const classNames = bomCore.getClassNames('label', className);
+    props = __rest(_a, ["className", "as", "variant", "variants"]);
+  const classNames = bomCore.getClassNames('label', className, variant);
+  const globalVariants = useVariants('label');
+  variants = variants || globalVariants || labelVariants;
   return jsxRuntime.jsx(StyledLabel, Object.assign({
     className: classNames,
     ref: ref,
-    as: as
+    as: as,
+    variant: variant,
+    variants: variants
   }, props));
 });
 Label.displayName = 'Label';
@@ -7996,7 +8266,7 @@ const RadioIcon = props => jsxRuntime.jsxs(jsxRuntime.Fragment, {
 });
 
 const StyledRadioCardGroup = styled__default.default(Flex.Row)`
-  gap: 2rem;
+  gap: 1rem;
   flex-wrap: wrap;
   align-items: flex-start;
 `;
@@ -8065,9 +8335,12 @@ const RadioCardDisabled = styled__default.default(RadioCardDisabledSvg)`
   width: 100%;
   height: 100%;
   display: none;
-  border: 1px solid var(--color-neutral-300);
-  color: var(--color-neutral-300);
-  border-radius: var(--button-border-radius);
+
+  border: var(--form-border);
+  border-width: var(--form-border-width);
+  border-color: var(--form-border-color-disabled);
+  border-radius: var(--form-border-radius);
+  color: var(--form-border-color-disabled);
 
   input:disabled ~ &,
   input.disabled ~ & {
@@ -8088,66 +8361,63 @@ const StyledRadioCardInput = styled__default.default.div`
 `;
 const StyledRadioCardButton = styled__default.default.div`
   ${CssDefault}
+  ${CssFormControl}
 
   flex-direction: column;
   align-items: flex-start;
   width: 100%;
   padding: 0.8em;
-  border-radius: var(--button-border-radius);
-  background: var(--color-neutral-100);
-  border: 2px solid var(--color-neutral-200);
-  color: var(--color-neutral-700);
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  transition: .1s ease-in-out;
-  transition-property: outline-color, border-color, color, box-shadow;
 
   input:not(:disabled):hover ~ & {
-    border-color: var(--color-neutral-300);
-    color: var(--color-neutral-900);
+    border-color: var(--form-border-color-hover);
+    color: var(--form-color-hover);
     box-shadow: 0 20px 20px -5px rgba(0, 0, 0, 0.15);
   }
 
-  input:not(:checked) ~ & {
-    .abstract {
-      display: none;
-    }
-  }
-
   input:focus ~ &,
   input:active ~ & {
-    outline-color: var(--color-primary-200);
+    outline-color: var(--form-outline-color-focus);
   }
 
   input:checked ~ &,
   input.active ~ & {
-    outline-color: var(--color-primary-500);
+    outline-color: var(--form-outline-color-active);
   }
 
   input:disabled ~ &,
   input.disabled ~ & {
-    background: var(--color-neutral-200);
+    background: var(--form-background-color-disabled);
+    color: var(--form-color-disabled);
     pointer-events: none;
-    opacity: 0.4;
+
+    .radio-icon {
+      color: var(--form-color-disabled);
+    }
   }
 
-input:checked ~ & {
-  .radio-icon {
-    color: var(--color-primary-500);
+  input:not(:checked) ~ & {
+    .abstract {
+      display: none;
+    }
   }
-}
 
-input:not(:disabled):hover ~ & {
-  .radio-icon {
-    outline-color: var(--color-neutral-300);
+  input:checked ~ & {
+    .radio-icon {
+      color: var(--form-outline-color-active);
+    }
   }
-}
 
-input:focus ~ & {
-  .radio-icon {
-    outline-color: var(--color-primary-200);
+  input:not(:disabled):hover ~ & {
+    .radio-icon {
+      outline-color: var(--form-border-color-hover);
+    }
+  }
+
+  input:focus ~ & {
+    .radio-icon {
+      outline-color: var(--form-outline-color-focus);
+    }
   }
-}
 
   ${props => getCssResponsive(props)}
 `;
@@ -8277,6 +8547,12 @@ const RadioCard = bomCore.withSchema(RadioCardBase, {
   Media: RadioCardMedia
 });
 
+const CssRadioCardDefault = styled.css`
+`;
+const radioCardVariants = {
+  default: CssRadioCardDefault
+};
+
 const RadioColorGroup = /*#__PURE__*/React.forwardRef((_a, ref) => {
   var {
       children,
@@ -8411,6 +8687,12 @@ const RadioColor = bomCore.withSchema(RadioColorBase, {
   Group: RadioColorGroup
 });
 
+const CssRadioColorDefault = styled.css`
+`;
+const radioColorVariants = {
+  default: CssRadioColorDefault
+};
+
 const RadioOptionGroup = /*#__PURE__*/React.forwardRef((_a, ref) => {
   var {
       children,
@@ -8449,7 +8731,7 @@ const RadioOptionGroup = /*#__PURE__*/React.forwardRef((_a, ref) => {
   });
   // !!! ref to group
   return jsxRuntime.jsx(Grid.Row, Object.assign({
-    columns: "4",
+    columns: "3",
     columnGap: "0.5rem",
     rowGap: "0.5rem",
     ref: ref,
@@ -8481,9 +8763,12 @@ const RadioOptionDisabled = styled__default.default(RadioOptionDisabledSvg)`
   width: 100%;
   height: 100%;
   display: none;
-  border: 1px solid var(--color-neutral-300);
-  color: var(--color-neutral-300);
-  border-radius: var(--button-border-radius);
+
+  border: var(--form-border);
+  border-width: var(--form-border-width);
+  border-color: var(--form-border-color-disabled);
+  border-radius: var(--form-border-radius);
+  color: var(--form-border-color-disabled);
 
   input:disabled ~ &,
   input.disabled ~ & {
@@ -8504,38 +8789,31 @@ const StyledRadioOptionInput = styled__default.default.div`
 `;
 const StyledRadioOptionButton = styled__default.default.div`
   ${CssDefault}
+  ${CssFormControl}
 
   width: 100%;
   justify-content: center;
-  padding: 0.8em;
-  border-radius: var(--button-border-radius);
-  background: var(--color-neutral-100);
-  border: 2px solid var(--color-neutral-200);
-  color: var(--color-neutral-700);
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  transition: outline-color .1s ease-in-out, border-color .1s ease-in-out, color .1s ease-in-out;
 
   input:not(:disabled):hover ~ & {
-    border-color: var(--color-neutral-300);
-    color: var(--color-neutral-900);
+    border-color: var(--form-border-color-hover);
+    color: var(--form-color-hover);
   }
 
   input:focus ~ &,
   input:active ~ & {
-    outline-color: var(--color-primary-200);
+    outline-color: var(--form-outline-color-focus);
   }
 
   input:checked ~ &,
   input.active ~ & {
-    outline-color: var(--color-primary-500);
+    outline-color: var(--form-outline-color-active);
   }
 
   input:disabled ~ &,
   input.disabled ~ & {
-    background: var(--color-neutral-200);
+    background: var(--form-background-color-disabled);
+    color: var(--form-color-disabled);
     pointer-events: none;
-    opacity: 0.4;
   }
 
   ${props => styled.css`font-size: var(--button-size-${props.size || 'md'});`}
@@ -8587,6 +8865,12 @@ const RadioOption = bomCore.withSchema(RadioOptionBase, {
   Group: RadioOptionGroup
 });
 
+const CssRadioOptionDefault = styled.css`
+`;
+const radioOptionVariants = {
+  default: CssRadioOptionDefault
+};
+
 const RadioGroup = /*#__PURE__*/React.forwardRef((_a, ref) => {
   var {
       children,
@@ -8647,6 +8931,7 @@ function recursiveMap(children, fn) {
 }
 
 const StyledRadioInput = styled__default.default.div`
+  appearance: none;
   position: absolute;
   opacity: 0;
   width: 100%;
@@ -8660,27 +8945,27 @@ const StyledRadioInput = styled__default.default.div`
 `;
 const StyledRadioIcon = styled__default.default.div`
   border-radius: 50%;
-  margin-right: 0.5rem;
-  color: var(--color-neutral-300);
   pointer-events: none;
   outline: 2px solid transparent;
   outline-offset: 2px;
   transition: outline-color 150ms ease-in 0s, color 200ms ease-out 0s;
+  color: var(--form-border-color-hover);
 
   input:checked ~ & {
-    color: var(--color-primary-500);
+    color: var(--form-outline-color-active);
   }
 
   input:not(:disabled):hover ~ & {
-    outline-color: var(--color-neutral-300);
+    outline-color: var(--form-border-color-hover);
   }
 
   input:focus ~ & {
-    outline-color: var(--color-primary-200);
+    outline-color: var(--form-outline-color-focus);
   }
 `;
 const StyledRadio = styled__default.default.div`
   position: relative;
+  margin-right: 0.5rem;
   ${props => getCssResponsive(props)}
 `;
 const RadioBase = /*#__PURE__*/React.forwardRef((_a, ref) => {
@@ -8708,6 +8993,12 @@ const Radio = bomCore.withSchema(RadioBase, {
   Group: RadioGroup
 });
 
+const CssRadioDefault = styled.css`
+`;
+const radioVariants = {
+  default: CssRadioDefault
+};
+
 const RatingSvg = props => jsxRuntime.jsx("svg", Object.assign({
   viewBox: "0 0 24 24",
   /*
@@ -8744,7 +9035,7 @@ const StyledRating = styled__default.default.div`
     width: 1.2em;
     height: 1.2em;
     margin-right: 0.1em;
-    color: var(--color-neutral-300);
+    color: var(--form-border-color-disabled);
     cursor: pointer;
 
     & :global(svg) {
@@ -8755,7 +9046,7 @@ const StyledRating = styled__default.default.div`
     }
 
     &.hovered {
-      color: var(--color-neutral-900);
+      color: var(--form-color-hover);
 
       :global(svg) {
         transform: scale(0.9);
@@ -8832,6 +9123,12 @@ const Rating = _a => {
 };
 Rating.displayName = 'Rating';
 
+const CssRatingDefault = styled.css`
+`;
+const ratingVariants = {
+  default: CssRatingDefault
+};
+
 const DownArrowSvg = props => jsxRuntime.jsx("svg", Object.assign({
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
@@ -8847,7 +9144,7 @@ const DownArrowSvg = props => jsxRuntime.jsx("svg", Object.assign({
     points: "6 9 12 15 18 9"
   })
 }));
-const DownArrow = styled__default.default(DownArrowSvg)`
+styled__default.default(DownArrowSvg)`
   flex-shrink: 0;
   width: 24px;
   height: 24px;
@@ -8856,43 +9153,25 @@ const DownArrow = styled__default.default(DownArrowSvg)`
   pointer-events: none;
 `;
 const StyledSelectSelect = styled__default.default.div`
+  ${CssFormControl}
+
   display: block;
   width: 100%;
-  padding: var(--form-padding);
-  appearance: none;
-  font-size: var(--form-font-size);
-  line-height: var(--form-line-height);
-  border: 2px solid;
-  border-radius: var(--border-radius);
-  color: inherit;
-  background-color: transparent;
-  border-color: var(--color-neutral-200);
-  transition: border 150ms ease-in 0s, outline-color 150ms ease-in 0s, color 200ms ease-out 0s;
+  padding: var(--form-padding);
+  appearance: none;
   cursor: pointer;
 
-  &.disabled {
-    cursor: not-allowed;
-  }
-
-  &.active:not(.disabled),
-  &:hover:not(.disabled) {
-    border-color: var(--color-neutral-300);
+  .icon {
+    pointer-events: none;
+    transition: color 200ms ease, transform 200ms ease;
   }
 
-  &:focus-visible {
-    outline: 2px solid var(--color-primary-200);
-    outline-offset: 2px;
-
-    &::placeholder {
-      opacity: 0.5;
+  &.opened {
+    .icon {
+      transform: rotate(180deg);
     }
   }
 
-  &::placeholder {
-    color: inherit;
-    opacity: 0.3;
-  }
-
   ${props => getCssResponsive(props)}
 `;
 const StyledSelect = styled__default.default.div`
@@ -8913,65 +9192,39 @@ const Select = /*#__PURE__*/React.forwardRef((_a, ref) => {
     children: [jsxRuntime.jsx(StyledSelectSelect, Object.assign({
       ref: ref,
       as: as
-    }, props)), jsxRuntime.jsx(DownArrow, {})]
+    }, props)), jsxRuntime.jsx(SelectIcon, {})]
   }));
 });
 Select.displayName = 'Select';
 
-const StyledTextArea = styled__default.default.div`
-  display: block;
-  width: 100%;
-  padding: var(--form-padding);
-  appearance: none;
-  font-size: var(--form-font-size);
-  line-height: var(--form-line-height);
-  border: 2px solid;
-  border-radius: var(--border-radius);
-  color: inherit;
-  background-color: transparent;
-  border-color: var(--color-neutral-200);
-  resize: vertical;
-  min-height: 4em;
-  transition: border 150ms ease-in 0s, outline-color 150ms ease-in 0s, color 200ms ease-out 0s;
-  cursor: pointer;
-
-  &.disabled {
-    cursor: not-allowed;
-  }
-
-  &.active:not(.disabled),
-  &:hover:not(.disabled) {
-    border-color: var(--color-neutral-300);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--color-primary-200);
-    outline-offset: 2px;
-
-    &::placeholder {
-      opacity: 0.5;
-    }
-  }
-
-  &::placeholder {
-    color: inherit;
-    opacity: 0.3;
-  }
+const CssSelectDefault = styled.css`
+`;
+const selectVariants = {
+  default: CssSelectDefault
+};
 
+const StyledTextArea = styled__default.default.div`
+  ${props => getVariant(props.variant, props.variants)}
   ${props => getCssResponsive(props)}
 `;
 const TextArea = /*#__PURE__*/React.forwardRef((_a, ref) => {
   var {
       as = 'textarea',
       children,
-      className
+      className,
+      variant = 'default',
+      variants
     } = _a,
-    props = __rest(_a, ["as", "children", "className"]);
-  const classNames = bomCore.getClassNames('textarea', className);
+    props = __rest(_a, ["as", "children", "className", "variant", "variants"]);
+  const classNames = bomCore.getClassNames('textarea', className, variant);
+  const globalVariants = useVariants('textarea');
+  variants = variants || globalVariants || textareaVariants;
   return jsxRuntime.jsx(StyledTextArea, Object.assign({
     className: classNames,
     ref: ref,
-    as: as
+    as: as,
+    variant: variant,
+    variants: variants
   }, props, {
     children: children
   }));
@@ -8979,23 +9232,29 @@ const TextArea = /*#__PURE__*/React.forwardRef((_a, ref) => {
 TextArea.displayName = 'TextArea';
 
 const StyledFieldError = styled__default.default.div`
-  margin: 0.5em 0;
-  padding: 0.2em 0.5em;
-  font-size: var(--font-display-size-10, --form-font-size, 1rem);
-  font-weight: 500;
-  background: var(--color-primary-100);
-  color: var(--color-primary-500);
+  ${props => getVariant(props.variant, props.variants)}
+  ${props => getCssResponsive(props)}
 `;
 function FieldError(_a) {
   var {
-      state
-    } = _a;
-    __rest(_a, ["state"]);
+      state,
+      className,
+      variant = 'default',
+      variants
+    } = _a,
+    props = __rest(_a, ["state", "className", "variant", "variants"]);
   const label = bomMixerHooks.useLabel();
+  const classNames = bomCore.getClassNames('field-error', className, variant);
+  const globalVariants = useVariants('fieldError');
+  variants = variants || globalVariants || fieldErrorVariants;
   return jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: state.flags.touched && state.errors.map(error => jsxRuntime.jsx(StyledFieldError, {
+    children: state.flags.touched && state.errors.map(error => jsxRuntime.jsx(StyledFieldError, Object.assign({
+      className: classNames,
+      variant: variant,
+      variants: variants
+    }, props, {
       children: label(`error.${error.key}`)
-    }, error.key))
+    }), error.key))
   });
 }
 
@@ -10284,6 +10543,47 @@ const LazyLoader = _ref => {
   });
 };
 
+const AuthForm = styled__default.default(Form)`
+  min-height: 100%;
+  justify-content: space-between;
+  display: flex;
+  flex-direction: column;
+`;
+
+exports.AuthSubmitPosition = void 0;
+(function (AuthSubmitPosition) {
+  AuthSubmitPosition[AuthSubmitPosition["Form"] = 0] = "Form";
+  AuthSubmitPosition[AuthSubmitPosition["Bottom"] = 1] = "Bottom";
+})(exports.AuthSubmitPosition || (exports.AuthSubmitPosition = {}));
+exports.AuthView = void 0;
+(function (AuthView) {
+  AuthView[AuthView["login"] = 0] = "login";
+  AuthView[AuthView["register"] = 1] = "register";
+  AuthView[AuthView["registerSuccess"] = 2] = "registerSuccess";
+  AuthView[AuthView["forgot"] = 3] = "forgot";
+  AuthView[AuthView["forgotSuccess"] = 4] = "forgotSuccess";
+})(exports.AuthView || (exports.AuthView = {}));
+const defaultAuth = {
+  initialView: exports.AuthView.login,
+  forgot: true,
+  login: true,
+  register: true,
+  update: true,
+  submitPosition: exports.AuthSubmitPosition.Form
+};
+const [useAuth, AuthContextProvider] = bomMixerHooks.createGenericContext(defaultAuth);
+function AuthProvider(_ref) {
+  let {
+    children,
+    options
+  } = _ref;
+  return jsxRuntime.jsx(AuthContextProvider, Object.assign({
+    value: Object.assign(Object.assign({}, defaultAuth), options)
+  }, {
+    children: children
+  }));
+}
+
 const AuthForgot = _ref => {
   let {
     onPasswordSent,
@@ -10291,6 +10591,7 @@ const AuthForgot = _ref => {
     onNavToRegister
   } = _ref;
   const label = bomMixerHooks.useLabel();
+  const auth = useAuth();
   const required = bomMixerForms.RequiredValidator();
   const email = bomMixerForms.EmailValidator();
   const [form, setValue, setTouched, reset, group] = bomMixerForms.useFormBuilder({
@@ -10306,7 +10607,7 @@ const AuthForgot = _ref => {
   });
 
   const onTest = () => {
-    setValue({
+    setValue(auth.forgotTest || {
       email: 'jhon.appleseed@gmail.com'
     });
   };
@@ -10317,7 +10618,7 @@ const AuthForgot = _ref => {
   const onSubmit = event => __awaiter(void 0, void 0, void 0, function* () {
     event.preventDefault();
     if (form.flags.valid) {
-      console.log('AuthForgot.valid', form.value);
+      // console.log('AuthForgot.valid', form.value);
       try {
         setError(undefined);
         yield bomCore.httpPost('/api/auth/forgot', form.value);
@@ -10329,7 +10630,7 @@ const AuthForgot = _ref => {
         setError(error);
       }
     } else {
-      console.log('AuthForgot.invalid');
+      // console.log('AuthForgot.invalid');
       setTouched();
     }
   });
@@ -10346,7 +10647,7 @@ const AuthForgot = _ref => {
   return jsxRuntime.jsx(Flex.Col, Object.assign({
     justifyContent: "space-between"
   }, {
-    children: jsxRuntime.jsxs(Form, Object.assign({
+    children: jsxRuntime.jsxs(AuthForm, Object.assign({
       state: form,
       onSubmit: onSubmit
     }, {
@@ -10359,7 +10660,7 @@ const AuthForgot = _ref => {
           fontWeight: "700",
           marginBottom: "1rem"
         }, {
-          children: "Password recovery"
+          children: label('auth.forgot.title')
         })), jsxRuntime.jsx(FieldText, {
           control: group.controls.checkField
         }), jsxRuntime.jsx(FieldText, {
@@ -10368,7 +10669,7 @@ const AuthForgot = _ref => {
           error: error
         }, {
           children: label('form.submit.error')
-        })), jsxRuntime.jsx(Button, Object.assign({
+        })), auth.submitPosition === exports.AuthSubmitPosition.Form && jsxRuntime.jsx(Button, Object.assign({
           type: "submit",
           variant: "primary",
           size: "lg",
@@ -10376,36 +10677,51 @@ const AuthForgot = _ref => {
           margin: "1rem 0"
         }, {
           children: jsxRuntime.jsx("span", {
-            children: "Send"
+            children: label('auth.forgot.send')
           })
-        })), jsxRuntime.jsx(Divider, {
-          children: "Do you remember your password?"
-        }), jsxRuntime.jsx(Flex.Row, Object.assign({
-          justifyContent: "center"
-        }, {
-          children: jsxRuntime.jsx(Button, Object.assign({
-            variant: "link",
-            onClick: onLogin
+        })), auth.login && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [jsxRuntime.jsx(Divider, {
+            children: label('auth.forgot.remember')
+          }), jsxRuntime.jsx(Flex.Row, Object.assign({
+            justifyContent: "center"
           }, {
-            children: "Login"
-          }))
-        })), jsxRuntime.jsx(Divider, {
-          children: "Not registered yet?"
-        }), jsxRuntime.jsx(Flex.Row, Object.assign({
-          justifyContent: "center"
-        }, {
-          children: jsxRuntime.jsx(Button, Object.assign({
-            variant: "link",
-            onClick: onRegister
+            children: jsxRuntime.jsx(Button, Object.assign({
+              variant: "link",
+              onClick: onLogin
+            }, {
+              children: label('auth.register.login')
+            }))
+          }))]
+        }), auth.register && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [jsxRuntime.jsx(Divider, {
+            children: label('auth.login.notRegistered')
+          }), jsxRuntime.jsx(Flex.Row, Object.assign({
+            justifyContent: "center"
           }, {
-            children: "Register"
-          }))
-        })), jsxRuntime.jsx(FormTester, {
-          form: form,
-          onTest: onTest,
-          onReset: onReset
+            children: jsxRuntime.jsx(Button, Object.assign({
+              variant: "link",
+              onClick: onRegister
+            }, {
+              children: label('auth.login.register')
+            }))
+          }))]
         })]
-      })), false ]
+      })), jsxRuntime.jsx(FormTester, {
+        form: form,
+        onTest: onTest,
+        onReset: onReset
+      }), auth.submitPosition === exports.AuthSubmitPosition.Bottom && jsxRuntime.jsx(Button, Object.assign({
+        type: "submit",
+        variant: "primary",
+        size: "lg",
+        position: "sticky",
+        bottom: "1rem",
+        justifyContent: "center"
+      }, {
+        children: jsxRuntime.jsx("span", {
+          children: label('auth.forgot.send')
+        })
+      }))]
     }))
   }));
 };
@@ -10414,6 +10730,8 @@ const AuthForgotSuccess = _ref => {
   let {
     onNavToLogin
   } = _ref;
+  const label = bomMixerHooks.useLabel();
+  const auth = useAuth();
   const onLogin = () => {
     if (typeof onNavToLogin === 'function') {
       onNavToLogin();
@@ -10430,23 +10748,25 @@ const AuthForgotSuccess = _ref => {
         variant: "heading30",
         fontWeight: "700"
       }, {
-        children: "Password recovery"
+        children: label('auth.forgotSuccess.title')
       })), jsxRuntime.jsx(Text, Object.assign({
         variant: "paragraph20",
         marginBottom: "2rem"
       }, {
-        children: "An email has been sent. please check your inbox."
-      })), jsxRuntime.jsx(Text, Object.assign({
-        variant: "heading30",
-        fontWeight: "700"
-      }, {
-        children: "Ready to login?"
-      })), jsxRuntime.jsx(Button, Object.assign({
-        variant: "primary",
-        onClick: onLogin
-      }, {
-        children: "Login"
-      }))]
+        children: label('auth.forgotSuccess.abstract')
+      })), auth.login && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(Text, Object.assign({
+          variant: "heading30",
+          fontWeight: "700"
+        }, {
+          children: label('auth.forgotSuccess.readyToLogin')
+        })), jsxRuntime.jsx(Button, Object.assign({
+          variant: "primary",
+          onClick: onLogin
+        }, {
+          children: label('auth.register.login')
+        }))]
+      })]
     }))
   }));
 };
@@ -10458,6 +10778,7 @@ const AuthLogin = _ref => {
     onNavToRegister
   } = _ref;
   const label = bomMixerHooks.useLabel();
+  const auth = useAuth();
   const required = bomMixerForms.RequiredValidator();
   const email = bomMixerForms.EmailValidator();
   const [form, setValue, setTouched, reset, group] = bomMixerForms.useFormBuilder({
@@ -10482,7 +10803,7 @@ const AuthLogin = _ref => {
   });
 
   const onTest = () => {
-    setValue({
+    setValue(auth.loginTest || {
       email: 'jhon.appleseed@gmail.com',
       password: '123456'
     });
@@ -10497,7 +10818,7 @@ const AuthLogin = _ref => {
   const onSubmit = event => __awaiter(void 0, void 0, void 0, function* () {
     event.preventDefault();
     if (form.flags.valid) {
-      console.log('AuthLogin.valid', form.value);
+      // console.log('AuthLogin.valid', form.value);
       try {
         setError(undefined);
         const user = yield bomCore.httpPost('/api/auth/login', form.value);
@@ -10514,7 +10835,7 @@ const AuthLogin = _ref => {
         setError(error);
       }
     } else {
-      console.log('AuthLogin.invalid');
+      // console.log('AuthLogin.invalid');
       setTouched();
     }
   });
@@ -10531,7 +10852,7 @@ const AuthLogin = _ref => {
   return jsxRuntime.jsx(Flex.Col, Object.assign({
     justifyContent: "space-between"
   }, {
-    children: jsxRuntime.jsxs(Form, Object.assign({
+    children: jsxRuntime.jsxs(AuthForm, Object.assign({
       state: form,
       onSubmit: onSubmit
     }, {
@@ -10544,7 +10865,7 @@ const AuthLogin = _ref => {
           fontWeight: "700",
           marginBottom: "1rem"
         }, {
-          children: "Sign in to your account"
+          children: label('auth.login.title')
         })), jsxRuntime.jsx(FieldText, {
           control: group.controls.checkField
         }), jsxRuntime.jsx(FieldText, {
@@ -10557,17 +10878,17 @@ const AuthLogin = _ref => {
           children: [jsxRuntime.jsx(FieldCheckbox, {
             margin: "0",
             control: group.controls.rememberMe
-          }), jsxRuntime.jsx(Button, Object.assign({
+          }), auth.forgot && jsxRuntime.jsx(Button, Object.assign({
             variant: "link",
             onClick: onForgot
           }, {
-            children: "Forgot your password?"
+            children: label('auth.login.forgot')
           }))]
         })), error && jsxRuntime.jsx(FormError, Object.assign({
           error: error
         }, {
           children: label('form.submit.loginError')
-        })), jsxRuntime.jsx(Button, Object.assign({
+        })), auth.submitPosition === exports.AuthSubmitPosition.Form && jsxRuntime.jsx(Button, Object.assign({
           type: "submit",
           variant: "primary",
           size: "lg",
@@ -10575,25 +10896,38 @@ const AuthLogin = _ref => {
           margin: "1rem 0"
         }, {
           children: jsxRuntime.jsx("span", {
-            children: "Sign In"
+            children: label('auth.login.signIn')
           })
-        })), jsxRuntime.jsx(Divider, {
-          children: "Not registered yet?"
-        }), jsxRuntime.jsx(Flex.Row, Object.assign({
-          justifyContent: "center"
-        }, {
-          children: jsxRuntime.jsx(Button, Object.assign({
-            variant: "link",
-            onClick: onRegister
+        })), auth.register && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [jsxRuntime.jsx(Divider, {
+            children: label('auth.login.notRegistered')
+          }), jsxRuntime.jsx(Flex.Row, Object.assign({
+            justifyContent: "center"
           }, {
-            children: "Register"
-          }))
-        })), jsxRuntime.jsx(FormTester, {
-          form: form,
-          onTest: onTest,
-          onReset: onReset
+            children: jsxRuntime.jsx(Button, Object.assign({
+              variant: "link",
+              onClick: onRegister
+            }, {
+              children: label('auth.login.register')
+            }))
+          }))]
         })]
-      })), false ]
+      })), jsxRuntime.jsx(FormTester, {
+        form: form,
+        onTest: onTest,
+        onReset: onReset
+      }), auth.submitPosition === exports.AuthSubmitPosition.Bottom && jsxRuntime.jsx(Button, Object.assign({
+        type: "submit",
+        variant: "primary",
+        size: "lg",
+        position: "sticky",
+        bottom: "1rem",
+        justifyContent: "center"
+      }, {
+        children: jsxRuntime.jsx("span", {
+          children: label('auth.login.signIn')
+        })
+      }))]
     }))
   }));
 };
@@ -10604,6 +10938,7 @@ const AuthRegister = _ref => {
     onNavToLogin
   } = _ref;
   const label = bomMixerHooks.useLabel();
+  const auth = useAuth();
   const required = bomMixerForms.RequiredValidator();
   const requiredTrue = bomMixerForms.RequiredTrueValidator();
   const email = bomMixerForms.EmailValidator();
@@ -10648,7 +10983,7 @@ const AuthRegister = _ref => {
   });
 
   const onTest = () => {
-    setValue({
+    setValue(auth.registerTest || {
       firstName: 'Jhon',
       lastName: 'Appleseed',
       email: 'jhon.appleseed@gmail.com',
@@ -10664,7 +10999,7 @@ const AuthRegister = _ref => {
   const onSubmit = event => __awaiter(void 0, void 0, void 0, function* () {
     event.preventDefault();
     if (form.flags.valid) {
-      console.log('AuthRegister.valid', form.value);
+      // console.log('AuthRegister.valid', form.value);
       try {
         setError(undefined);
         yield bomCore.httpPost('/api/auth/register', form.value);
@@ -10676,7 +11011,7 @@ const AuthRegister = _ref => {
         setError(error);
       }
     } else {
-      console.log('AuthRegister.invalid');
+      // console.log('AuthRegister.invalid');
       setTouched();
     }
   });
@@ -10688,7 +11023,7 @@ const AuthRegister = _ref => {
   return jsxRuntime.jsx(Flex.Col, Object.assign({
     justifyContent: "space-between"
   }, {
-    children: jsxRuntime.jsxs(Form, Object.assign({
+    children: jsxRuntime.jsxs(AuthForm, Object.assign({
       state: form,
       onSubmit: onSubmit
     }, {
@@ -10701,12 +11036,12 @@ const AuthRegister = _ref => {
           fontWeight: "700",
           marginBottom: "1rem"
         }, {
-          children: "Registration"
+          children: label('auth.register.title')
         })), jsxRuntime.jsx(Text, Object.assign({
           variant: "paragraph20",
           marginBottom: "2rem"
         }, {
-          children: "Fill out the form to request access. You will receive a confirmation email after activation."
+          children: label('auth.register.abstract')
         })), jsxRuntime.jsx(FieldText, {
           control: group.controls.checkField
         }), jsxRuntime.jsx(FieldText, {
@@ -10726,7 +11061,7 @@ const AuthRegister = _ref => {
           error: error
         }, {
           children: label('form.submit.error')
-        })), jsxRuntime.jsx(Button, Object.assign({
+        })), auth.submitPosition === exports.AuthSubmitPosition.Form && jsxRuntime.jsx(Button, Object.assign({
           type: "submit",
           variant: "primary",
           size: "lg",
@@ -10734,25 +11069,38 @@ const AuthRegister = _ref => {
           margin: "1rem 0"
         }, {
           children: jsxRuntime.jsx("span", {
-            children: "Register"
+            children: label('auth.register.signUp')
           })
-        })), jsxRuntime.jsx(Divider, {
-          children: "Already registered?"
-        }), jsxRuntime.jsx(Flex.Row, Object.assign({
-          justifyContent: "center"
-        }, {
-          children: jsxRuntime.jsx(Button, Object.assign({
-            variant: "link",
-            onClick: onLogin
+        })), auth.login && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [jsxRuntime.jsx(Divider, {
+            children: label('auth.register.alreadyRegistered')
+          }), jsxRuntime.jsx(Flex.Row, Object.assign({
+            justifyContent: "center"
           }, {
-            children: "Login"
-          }))
-        })), jsxRuntime.jsx(FormTester, {
-          form: form,
-          onTest: onTest,
-          onReset: onReset
+            children: jsxRuntime.jsx(Button, Object.assign({
+              variant: "link",
+              onClick: onLogin
+            }, {
+              children: label('auth.register.login')
+            }))
+          }))]
         })]
-      })), false ]
+      })), jsxRuntime.jsx(FormTester, {
+        form: form,
+        onTest: onTest,
+        onReset: onReset
+      }), auth.submitPosition === exports.AuthSubmitPosition.Bottom && jsxRuntime.jsx(Button, Object.assign({
+        type: "submit",
+        variant: "primary",
+        size: "lg",
+        position: "sticky",
+        bottom: "1rem",
+        justifyContent: "center"
+      }, {
+        children: jsxRuntime.jsx("span", {
+          children: label('auth.register.signUp')
+        })
+      }))]
     }))
   }));
 };
@@ -10761,6 +11109,8 @@ const AuthRegisterSuccess = _ref => {
   let {
     onNavToLogin
   } = _ref;
+  const label = bomMixerHooks.useLabel();
+  const auth = useAuth();
   const onLogin = () => {
     if (typeof onNavToLogin === 'function') {
       onNavToLogin();
@@ -10777,74 +11127,81 @@ const AuthRegisterSuccess = _ref => {
         variant: "heading30",
         fontWeight: "700"
       }, {
-        children: "Thank you for registering"
+        children: label('auth.registerSuccess.title')
       })), jsxRuntime.jsx(Text, Object.assign({
         variant: "paragraph20",
         marginBottom: "2rem"
       }, {
-        children: "A confimation email has been sent to your address. Please check your inbox."
-      })), jsxRuntime.jsx(Text, Object.assign({
-        variant: "heading30",
-        fontWeight: "700"
-      }, {
-        children: "Ready to login?"
-      })), jsxRuntime.jsx(Button, Object.assign({
-        variant: "primary",
-        onClick: onLogin
-      }, {
-        children: "Login"
-      }))]
+        children: label('auth.registerSuccess.abstract')
+      })), auth.login && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(Text, Object.assign({
+          variant: "heading30",
+          fontWeight: "700"
+        }, {
+          children: label('auth.registerSuccess.readyToLogin')
+        })), jsxRuntime.jsx(Button, Object.assign({
+          variant: "primary",
+          onClick: onLogin
+        }, {
+          children: label('auth.register.login')
+        }))]
+      })]
     }))
   }));
 };
 
-const Auth = props => {
+const Auth = _a => {
+  var props = __rest(_a, ["options"]);
   const [drawer, openDrawer, closeDrawer] = bomMixerHooks.useDrawer();
-  const [view, setView] = React.useState('login');
+  const auth = useAuth();
+  const [view, setView] = React.useState(auth.initialView);
   const onSignedIn = user => {
-    console.log('onSignedIn');
+    // console.log('onSignedIn');
     closeDrawer();
     if (typeof props.onSignedIn === 'function') {
       props.onSignedIn(user);
     }
   };
   const onSignedUp = () => {
-    console.log('onSignedUp');
-    setView('register-success');
+    // console.log('onSignedUp');
+    setView(exports.AuthView.registerSuccess);
   };
   const onPasswordSent = () => {
-    console.log('onPasswordSent');
-    setView('forgot-success');
+    // console.log('onPasswordSent');
+    setView(exports.AuthView.forgotSuccess);
   };
-  switch (view) {
-    case 'login':
-      return jsxRuntime.jsx(AuthLogin, {
-        onSignedIn: onSignedIn,
-        onNavToForgot: () => setView('forgot'),
-        onNavToRegister: () => setView('register')
-      });
-    case 'register':
-      return jsxRuntime.jsx(AuthRegister, {
-        onSignedUp: onSignedUp,
-        onNavToLogin: () => setView('login')
-      });
-    case 'register-success':
-      return jsxRuntime.jsx(AuthRegisterSuccess, {
-        onNavToLogin: () => setView('login')
-      });
-    case 'forgot':
-      return jsxRuntime.jsx(AuthForgot, {
-        onPasswordSent: onPasswordSent,
-        onNavToLogin: () => setView('login'),
-        onNavToRegister: () => setView('register')
-      });
-    case 'forgot-success':
-      return jsxRuntime.jsx(AuthForgotSuccess, {
-        onNavToLogin: () => setView('login')
-      });
-    default:
-      return null;
-  }
+  const getView = () => {
+    switch (view) {
+      case exports.AuthView.login:
+        return jsxRuntime.jsx(AuthLogin, {
+          onSignedIn: onSignedIn,
+          onNavToForgot: () => setView(exports.AuthView.forgot),
+          onNavToRegister: () => setView(exports.AuthView.register)
+        });
+      case exports.AuthView.register:
+        return jsxRuntime.jsx(AuthRegister, {
+          onSignedUp: onSignedUp,
+          onNavToLogin: () => setView(exports.AuthView.login)
+        });
+      case exports.AuthView.registerSuccess:
+        return jsxRuntime.jsx(AuthRegisterSuccess, {
+          onNavToLogin: () => setView(exports.AuthView.login)
+        });
+      case exports.AuthView.forgot:
+        return jsxRuntime.jsx(AuthForgot, {
+          onPasswordSent: onPasswordSent,
+          onNavToLogin: () => setView(exports.AuthView.login),
+          onNavToRegister: () => setView(exports.AuthView.register)
+        });
+      case exports.AuthView.forgotSuccess:
+        return jsxRuntime.jsx(AuthForgotSuccess, {
+          onNavToLogin: () => setView(exports.AuthView.login)
+        });
+      default:
+        return null;
+    }
+  };
+  return getView();
 };
 
 const AuthChangePassword = _ref => {
@@ -10893,7 +11250,7 @@ const AuthChangePassword = _ref => {
   const onSubmit = event => __awaiter(void 0, void 0, void 0, function* () {
     event.preventDefault();
     if (form.flags.valid) {
-      console.log('AuthChangePassword.valid', form.value);
+      // console.log('AuthChangePassword.valid', form.value);
       try {
         setError(undefined);
         yield bomCore.httpPost('/api/auth/password', form.value);
@@ -10905,7 +11262,7 @@ const AuthChangePassword = _ref => {
         setError(error);
       }
     } else {
-      console.log('AuthChangePassword.invalid');
+      // console.log('AuthChangePassword.invalid');
       setTouched();
     }
   });
@@ -10943,7 +11300,7 @@ const AuthChangePassword = _ref => {
             onClick: onCancel_
           }, {
             children: jsxRuntime.jsx("span", {
-              children: "Cancel"
+              children: label('auth.change-password.cancel')
             })
           })), jsxRuntime.jsx(Button, Object.assign({
             type: "submit",
@@ -10952,7 +11309,7 @@ const AuthChangePassword = _ref => {
             margin: "1rem 0"
           }, {
             children: jsxRuntime.jsx("span", {
-              children: "Change password"
+              children: label('auth.change-password.change')
             })
           }))]
         })), jsxRuntime.jsx(FormTester, {
@@ -10997,6 +11354,7 @@ const AuthUpdate = _ref => {
     onCancel
   } = _ref;
   const label = bomMixerHooks.useLabel();
+  const auth = useAuth();
   const required = bomMixerForms.RequiredValidator();
   const email = bomMixerForms.EmailValidator();
   const [form, setValue, setTouched, reset, group] = bomMixerForms.useFormBuilder({
@@ -11025,7 +11383,7 @@ const AuthUpdate = _ref => {
   });
 
   const onTest = () => {
-    setValue({
+    setValue(auth.updateTest || {
       firstName: 'Jhon',
       lastName: 'Appleseed',
       email: 'jhon.appleseed@gmail.com',
@@ -11039,7 +11397,7 @@ const AuthUpdate = _ref => {
   const onSubmit = event => __awaiter(void 0, void 0, void 0, function* () {
     event.preventDefault();
     if (form.flags.valid) {
-      console.log('AuthUpdate.valid', form.value);
+      // console.log('AuthUpdate.valid', form.value);
       try {
         setError(undefined);
         const user = yield bomCore.httpPost('/api/auth/update', form.value);
@@ -11051,7 +11409,7 @@ const AuthUpdate = _ref => {
         setError(error);
       }
     } else {
-      console.log('AuthUpdate.invalid');
+      // console.log('AuthUpdate.invalid');
       setTouched();
     }
   });
@@ -11063,11 +11421,11 @@ const AuthUpdate = _ref => {
   return jsxRuntime.jsx(Flex.Col, Object.assign({
     justifyContent: "space-between"
   }, {
-    children: jsxRuntime.jsx(Form, Object.assign({
+    children: jsxRuntime.jsxs(Form, Object.assign({
       state: form,
       onSubmit: onSubmit
     }, {
-      children: jsxRuntime.jsxs(Flex.Col, Object.assign({
+      children: [jsxRuntime.jsxs(Flex.Col, Object.assign({
         flex: "1",
         rowGap: "1rem"
       }, {
@@ -11091,7 +11449,7 @@ const AuthUpdate = _ref => {
             onClick: onCancel_
           }, {
             children: jsxRuntime.jsx("span", {
-              children: "Cancel"
+              children: label('auth.update.cancel')
             })
           })), jsxRuntime.jsx(Button, Object.assign({
             type: "submit",
@@ -11100,15 +11458,15 @@ const AuthUpdate = _ref => {
             margin: "1rem 0"
           }, {
             children: jsxRuntime.jsx("span", {
-              children: "Update"
+              children: label('auth.update.update')
             })
           }))]
-        })), jsxRuntime.jsx(FormTester, {
-          form: form,
-          onTest: onTest,
-          onReset: onReset
-        })]
-      }))
+        }))]
+      })), jsxRuntime.jsx(FormTester, {
+        form: form,
+        onTest: onTest,
+        onReset: onReset
+      })]
     }))
   }));
 };
@@ -14952,7 +15310,7 @@ const ContactHero = _ref => {
               })), jsxRuntime.jsxs(Button, Object.assign({
                 as: "a",
                 href: "#contact-request",
-                variant: "secondary",
+                variant: "outline",
                 onClick: scrollTo
               }, {
                 children: [jsxRuntime.jsx("span", {
@@ -20522,6 +20880,7 @@ exports.Accordion = Accordion;
 exports.Auth = Auth;
 exports.AuthChangePassword = AuthChangePassword;
 exports.AuthDrawer = AuthDrawer;
+exports.AuthProvider = AuthProvider;
 exports.AuthUpdate = AuthUpdate;
 exports.Autocomplete = Autocomplete;
 exports.AutocompleteContext = AutocompleteContext;
@@ -20559,6 +20918,7 @@ exports.ContainerFluid = ContainerFluid;
 exports.CssActive = CssActive;
 exports.CssAfter = CssAfter;
 exports.CssAfterInverted = CssAfterInverted;
+exports.CssAutocompleteDefault = CssAutocompleteDefault;
 exports.CssBase = CssBase;
 exports.CssButtonCircle = CssButtonCircle;
 exports.CssButtonDefault = CssButtonDefault;
@@ -20571,15 +20931,32 @@ exports.CssButtonPrimary = CssButtonPrimary;
 exports.CssButtonSecondary = CssButtonSecondary;
 exports.CssButtonToggle = CssButtonToggle;
 exports.CssButtonUnderline = CssButtonUnderline;
+exports.CssCheckboxDefault = CssCheckboxDefault;
 exports.CssDebug = CssDebug;
 exports.CssDefault = CssDefault;
 exports.CssDisabled = CssDisabled;
+exports.CssFieldDefault = CssFieldDefault;
+exports.CssFieldErrorDefault = CssFieldErrorDefault;
 exports.CssFocus = CssFocus;
+exports.CssFormControl = CssFormControl;
+exports.CssFormErrorDefault = CssFormErrorDefault;
+exports.CssFormTesterDefault = CssFormTesterDefault;
+exports.CssInputContainerDefault = CssInputContainerDefault;
+exports.CssInputDefault = CssInputDefault;
+exports.CssInputReset = CssInputReset;
+exports.CssLabelDefault = CssLabelDefault;
 exports.CssPrint = CssPrint;
+exports.CssRadioCardDefault = CssRadioCardDefault;
+exports.CssRadioColorDefault = CssRadioColorDefault;
+exports.CssRadioDefault = CssRadioDefault;
+exports.CssRadioOptionDefault = CssRadioOptionDefault;
+exports.CssRatingDefault = CssRatingDefault;
 exports.CssReset = CssReset;
 exports.CssResponsive = CssResponsive;
 exports.CssScrollbar = CssScrollbar;
+exports.CssSelectDefault = CssSelectDefault;
 exports.CssSvg = CssSvg;
+exports.CssTextareaDefault = CssTextareaDefault;
 exports.CssTypography = CssTypography;
 exports.CssUnderline = CssUnderline;
 exports.CssVars = CssVars;
@@ -20700,20 +21077,34 @@ exports.Tooltip = Tooltip;
 exports.Transition = Transition;
 exports.Typography = Typography;
 exports.VariantsProvider = VariantsProvider;
+exports.autocompleteVariants = autocompleteVariants;
 exports.buttonVariants = buttonVariants;
 exports.camelize = camelize;
+exports.checkboxVariants = checkboxVariants;
+exports.defaultVariants = defaultVariants;
+exports.defaultVariants__ = defaultVariants__;
 exports.eachMedia = eachMedia;
+exports.fieldErrorVariants = fieldErrorVariants;
+exports.fieldVariants = fieldVariants;
 exports.filterStoreLocatorItem = filterStoreLocatorItem;
+exports.formErrorVariants = formErrorVariants;
+exports.formTesterVariants = formTesterVariants;
 exports.getAspectResponsive = getAspectResponsive;
 exports.getChildsByType = getChildsByType;
 exports.getContainer = getContainer;
 exports.getCssResponsive = getCssResponsive;
+exports.getFontVariantResponsive = getFontVariantResponsive;
+exports.getForm = getForm;
 exports.getGrid = getGrid;
 exports.getShortName = getShortName;
 exports.getVariant = getVariant;
+exports.getVariantKey = getVariantKey;
+exports.getVariantResponsive = getVariantResponsive;
 exports.hasChildOfType = hasChildOfType;
 exports.hypenize = hypenize;
+exports.inputVariants = inputVariants;
 exports.isChildElement = isChildElement;
+exports.labelVariants = labelVariants;
 exports.mapChildsByType = mapChildsByType;
 exports.mediaBetween = mediaBetween;
 exports.mediaDown = mediaDown;
@@ -20721,8 +21112,16 @@ exports.mediaMax = mediaMax;
 exports.mediaMin = mediaMin;
 exports.mediaOnly = mediaOnly;
 exports.mediaUp = mediaUp;
+exports.radioCardVariants = radioCardVariants;
+exports.radioColorVariants = radioColorVariants;
+exports.radioOptionVariants = radioOptionVariants;
+exports.radioVariants = radioVariants;
+exports.ratingVariants = ratingVariants;
+exports.selectVariants = selectVariants;
 exports.sizes = sizes;
+exports.textareaVariants = textareaVariants;
 exports.theme = customTheme;
+exports.useAuth = useAuth;
 exports.useAutocompleteContext = useAutocompleteContext;
 exports.useVariants = useVariants;
 exports.withPageTransition = withPageTransition;