@ctlyst.id/internal-ui 2.0.0-canary.1 → 2.0.0

package/dist/internal-ui.cjs.development.js

@@ -15,15 +15,16 @@ var classnames = _interopDefault(require('classnames'));
 var ReactDatePicker = _interopDefault(require('react-datepicker'));
 var system = require('@chakra-ui/system');
 var styled = _interopDefault(require('@emotion/styled'));
+var internalIcon = require('@ctlyst.id/internal-icon');
 var ReactSelect = _interopDefault(require('react-select'));
 var reactSelectAsyncPaginate = require('react-select-async-paginate');
 var ReactSelectAsyncCreatable = _interopDefault(require('react-select/async-creatable'));
 var ReactSelectCreatable = _interopDefault(require('react-select/creatable'));
+var sharedUtils = require('@chakra-ui/shared-utils');
 var reactDropzone = require('react-dropzone');
-var themeTools = require('@chakra-ui/theme-tools');
 var anatomy = require('@chakra-ui/anatomy');
 var styledSystem = require('@chakra-ui/styled-system');
-require('@fontsource/poppins');
+var themeTools = require('@chakra-ui/theme-tools');
 var axios = _interopDefault(require('axios'));
 
 /* eslint-disable react-hooks/rules-of-hooks */
@@ -121,6 +122,57 @@ BreadCrumb.defaultProps = {
   spacing: 2
 };
 
+const Loader = /*#__PURE__*/react.forwardRef((props, ref) => {
+  const styles = react.useStyleConfig('LoaderStyle', props);
+  return /*#__PURE__*/React__default.createElement(react.Box, {
+    ref: ref,
+    __css: styles
+  });
+});
+
+const Button = props => {
+  const {
+    children,
+    variant,
+    size,
+    ...rest
+  } = props;
+  const getLoaderSize = () => {
+    if (size === 'lg') return 'md';
+    if (size === 'md') return 'sm';
+    return 'xs';
+  };
+  const getLoaderColor = () => {
+    if (variant === 'primary' || variant === 'danger') return 'white';
+    if (variant === 'outline-danger') return 'danger';
+    return 'primary';
+  };
+  return /*#__PURE__*/React__default.createElement(react.Button, Object.assign({
+    size: size,
+    variant: variant,
+    spinner: /*#__PURE__*/React__default.createElement(Loader, {
+      size: getLoaderSize(),
+      color: getLoaderColor()
+    })
+  }, rest), children);
+};
+
+const CardCustom = /*#__PURE__*/React.forwardRef(({
+  children,
+  ...rest
+}, ref) => {
+  const styles = react.useStyleConfig('Card', rest);
+  return /*#__PURE__*/React__default.createElement(react.Card, Object.assign({
+    __css: styles,
+    backgroundColor: "white.high",
+    ref: ref
+  }, rest), children);
+});
+CardCustom.defaultProps = {
+  withShadow: true,
+  isRounded: true
+};
+
 function CheckboxComponent({
   isError = false,
   helpText = '',
@@ -136,12 +188,10 @@ function CheckboxComponent({
     variant: variant
   }, rest, {
     isDisabled: isDisabled
-  })), children && /*#__PURE__*/React__default.createElement(react.Box, null, /*#__PURE__*/React__default.createElement(react.Box, {
-    ml: "8px"
-  }, /*#__PURE__*/React__default.createElement(react.Text, {
+  }), children && /*#__PURE__*/React__default.createElement(react.Text, {
     textStyle: "text.sm",
     color: isDisabled ? 'black.low' : 'black.high'
-  }, children)))), /*#__PURE__*/React__default.createElement(react.Box, {
+  }, children))), /*#__PURE__*/React__default.createElement(react.Box, {
     mt: "5px",
     ml: "24px"
   }, isError ? /*#__PURE__*/React__default.createElement(react.Text, {
@@ -149,7 +199,7 @@ function CheckboxComponent({
     color: "danger.500"
   }, errorText) : /*#__PURE__*/React__default.createElement(react.Text, {
     textStyle: "text.xs",
-    color: isDisabled ? 'black.low' : 'black.medium'
+    color: "black.medium"
   }, helpText)));
 }
 CheckboxComponent.defaultProps = {
@@ -158,6 +208,95 @@ CheckboxComponent.defaultProps = {
   errorText: ''
 };
 
+/* eslint-disable no-nested-ternary */
+const Field = props => {
+  const {
+    label,
+    isError,
+    errorMessage,
+    leftHelperText,
+    rightHelperText,
+    isRequired,
+    children,
+    isSuccess
+  } = props;
+  const getHelperColor = () => {
+    if (isError) return 'danger.500';
+    if (isSuccess) return 'success.500';
+    return 'black.medium';
+  };
+  const getJustifyContentHelper = () => {
+    if (rightHelperText && (!leftHelperText || isError && !errorMessage)) return 'flex-end';
+    return 'space-between';
+  };
+  const helperColor = getHelperColor();
+  const justifyHelper = getJustifyContentHelper();
+  return /*#__PURE__*/React__default.createElement(react.FormControl, {
+    isInvalid: isError
+  }, label && (typeof label === 'string' ? /*#__PURE__*/React__default.createElement(react.FormLabel, {
+    mb: 1,
+    fontSize: "text.sm",
+    requiredIndicator: undefined
+  }, isRequired && /*#__PURE__*/React__default.createElement(react.Box, {
+    as: "span",
+    color: "danger.500",
+    ml: 0,
+    mr: 1
+  }, "*"), label) : label), children, (isError && errorMessage || leftHelperText || rightHelperText) && /*#__PURE__*/React__default.createElement(react.Box, {
+    display: "flex",
+    width: "full",
+    justifyContent: justifyHelper
+  }, !isError ? leftHelperText && /*#__PURE__*/React__default.createElement(react.FormHelperText, {
+    fontSize: "text.xs",
+    color: helperColor,
+    mt: 1
+  }, leftHelperText) : typeof errorMessage === 'string' ? /*#__PURE__*/React__default.createElement(react.FormErrorMessage, {
+    fontSize: "text.xs",
+    color: "danger.500",
+    mt: 1
+  }, errorMessage) : errorMessage, rightHelperText && /*#__PURE__*/React__default.createElement(react.FormHelperText, {
+    fontSize: "text.xs",
+    color: helperColor,
+    mt: 1
+  }, rightHelperText)));
+};
+Field.defaultProps = {
+  label: '',
+  isError: false,
+  isSuccess: false,
+  errorMessage: undefined,
+  leftHelperText: undefined,
+  rightHelperText: undefined,
+  isRequired: false
+};
+
+function CheckboxGroupComponent(props) {
+  const {
+    children,
+    label,
+    helpText,
+    isError,
+    errorMessage,
+    ...rest
+  } = props;
+  return /*#__PURE__*/React__default.createElement(Field, Object.assign({}, rest, {
+    label: label,
+    leftHelperText: helpText,
+    isError: isError,
+    errorMessage: errorMessage
+  }), /*#__PURE__*/React__default.createElement(react.Box, {
+    mt: "12px"
+  }, /*#__PURE__*/React__default.createElement(react.CheckboxGroup, Object.assign({}, rest), /*#__PURE__*/React__default.createElement(react.Stack, {
+    spacing: [1, '16px'],
+    direction: ['column', 'row']
+  }, children))));
+}
+CheckboxGroupComponent.defaultProps = {
+  helpText: '',
+  isError: false,
+  errorMessage: ''
+};
+
 const IndeterminateCheckbox = ({
   indeterminate = false,
   ...rest
@@ -1754,69 +1893,60 @@ MultiDatePickerMonth.defaultProps = {
   isError: false
 };
 
-/* eslint-disable no-nested-ternary */
-const Field = props => {
+const getProperties = props => {
   const {
-    label,
     isError,
-    errorMessage,
-    leftHelperText,
-    rightHelperText,
-    isRequired,
-    children,
-    isSuccess,
-    isDisabled
+    isDisabled,
+    isSuccess
   } = props;
-  const getHelperColor = () => {
-    if (isError) return 'danger.500';
-    if (isSuccess) return 'success.500';
-    if (isDisabled) return 'black.low';
-    return 'black.medium';
+  let outlineColor = 'neutral.400';
+  let focusColor = 'primary.500';
+  if (isError || isDisabled || isSuccess) {
+    if (isError) outlineColor = 'danger.500';else if (isSuccess) outlineColor = 'success.500';
+    focusColor = outlineColor;
+  }
+  return {
+    outlineColor,
+    focusColor
   };
-  const getJustifyContentHelper = () => {
-    if (rightHelperText && (!leftHelperText || isError && !errorMessage)) return 'flex-end';
-    return 'space-between';
+};
+const getWrapperStyle = props => {
+  const {
+    outlineColor,
+    focusColor
+  } = getProperties(props);
+  const style = {
+    border: '1px solid',
+    borderColor: outlineColor,
+    borderRadius: 'md',
+    transition: 'all 0.15s',
+    boxShadow: 'none',
+    _focusWithin: {
+      borderColor: focusColor
+    }
   };
-  const helperColor = getHelperColor();
-  const justifyHelper = getJustifyContentHelper();
-  return /*#__PURE__*/React__default.createElement(react.FormControl, {
-    isInvalid: isError
-  }, label && (typeof label === 'string' ? /*#__PURE__*/React__default.createElement(react.FormLabel, {
-    mb: 1,
-    fontSize: "text.sm",
-    requiredIndicator: undefined
-  }, isRequired && /*#__PURE__*/React__default.createElement(react.Box, {
-    as: "span",
-    color: "danger.500",
-    ml: 0,
-    mr: 1
-  }, "*"), label) : label), children, (isError && errorMessage || leftHelperText || rightHelperText) && /*#__PURE__*/React__default.createElement(react.Box, {
-    display: "flex",
-    width: "full",
-    justifyContent: justifyHelper
-  }, !isError ? leftHelperText && /*#__PURE__*/React__default.createElement(react.FormHelperText, {
-    fontSize: "text.xs",
-    color: helperColor,
-    mt: 1
-  }, leftHelperText) : typeof errorMessage === 'string' ? /*#__PURE__*/React__default.createElement(react.FormErrorMessage, {
-    fontSize: "text.xs",
-    color: "danger.500",
-    mt: 1
-  }, errorMessage) : errorMessage, rightHelperText && /*#__PURE__*/React__default.createElement(react.FormHelperText, {
-    fontSize: "text.xs",
-    color: helperColor,
-    mt: 1
-  }, rightHelperText)));
+  return react.defineStyle(style);
 };
-Field.defaultProps = {
-  label: '',
-  isError: false,
-  isSuccess: false,
-  isDisabled: false,
-  errorMessage: undefined,
-  leftHelperText: undefined,
-  rightHelperText: undefined,
-  isRequired: false
+
+const InputAddonLeft = ({
+  children
+}) => {
+  return /*#__PURE__*/React__default.createElement(react.Box, {
+    borderLeftRadius: "md",
+    backgroundColor: "neutral.200",
+    px: 3,
+    py: 2.5
+  }, children);
+};
+const InputAddonRight = ({
+  children
+}) => {
+  return /*#__PURE__*/React__default.createElement(react.Box, {
+    borderRightRadius: "md",
+    backgroundColor: "neutral.200",
+    px: 3,
+    py: 2.5
+  }, children);
 };
 
 const InputField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
@@ -1836,40 +1966,99 @@ const InputField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     errorMessage,
     leftHelperText,
     rightHelperText,
+    withClear,
+    onClear,
+    isLoading,
     ...inputProps
   } = props;
+  const wrapperStyle = getWrapperStyle(props);
+  const [isShowPassword, setIsShowPassword] = React.useState(false);
+  const inputType = React.useMemo(() => {
+    return type === 'password' && isShowPassword ? 'text' : type;
+  }, [isShowPassword, type]);
+  const fontSize = React.useMemo(() => {
+    if (type === 'password') {
+      if (!isShowPassword && value) return 'text.xl';
+    }
+    return 'text.sm';
+  }, [isShowPassword, type, value]);
+  const iconColor = React.useMemo(() => {
+    return isDisabled ? 'black.low' : 'black.medium';
+  }, [isDisabled]);
   return /*#__PURE__*/React__default.createElement(Field, {
     label: label,
     isSuccess: isSuccess,
-    isDisabled: isDisabled,
     isError: isError,
     errorMessage: errorMessage,
     leftHelperText: leftHelperText,
     rightHelperText: rightHelperText,
     isRequired: isRequired
+  }, /*#__PURE__*/React__default.createElement(react.Box, {
+    __css: wrapperStyle
   }, /*#__PURE__*/React__default.createElement(react.InputGroup, {
-    size: size
-  }, addOnLeft && /*#__PURE__*/React__default.createElement(react.InputLeftAddon, null, addOnLeft), elementLeft && /*#__PURE__*/React__default.createElement(react.InputLeftElement, null, elementLeft), /*#__PURE__*/React__default.createElement(react.Input, Object.assign({
+    size: size,
+    borderRadius: "md",
+    backgroundColor: isDisabled ? 'neutral.300' : 'white.high',
+    cursor: isDisabled ? 'not-allowed' : 'default'
+  }, addOnLeft && /*#__PURE__*/React__default.createElement(InputAddonLeft, null, addOnLeft), /*#__PURE__*/React__default.createElement(react.Input, Object.assign({
     ref: ref,
-    type: type,
-    value: value
-  }, inputProps)), addOnRight && /*#__PURE__*/React__default.createElement(react.InputRightAddon, null, addOnRight), elementRight && /*#__PURE__*/React__default.createElement(react.InputRightElement, null, elementRight)));
+    type: inputType,
+    value: value,
+    isDisabled: isDisabled,
+    isSuccess: isSuccess
+  }, inputProps, {
+    fontSize: fontSize
+  })), (withClear || isLoading || type === 'password') && /*#__PURE__*/React__default.createElement(react.Box, {
+    "data-test-id": "Pg7ttgRey7InxE4qzTjW_",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "16px",
+    mr: "10px"
+  }, withClear && !isLoading && /*#__PURE__*/React__default.createElement(react.Box, {
+    display: "flex",
+    justifyContent: "center",
+    onClick: !isDisabled ? onClear : undefined,
+    cursor: isDisabled ? 'not-allowed' : 'pointer'
+  }, /*#__PURE__*/React__default.createElement(internalIcon.Close, {
+    size: 4,
+    color: iconColor
+  })), type === 'password' && !isShowPassword && !isLoading && /*#__PURE__*/React__default.createElement(react.Box, {
+    "data-test-id": "q2Bj2G4FlamXyHuRKMZ1Q",
+    onClick: () => {
+      if (!isDisabled) setIsShowPassword(true);
+    },
+    cursor: isDisabled ? 'not-allowed' : 'pointer',
+    display: "flex",
+    justifyContent: "center"
+  }, /*#__PURE__*/React__default.createElement(internalIcon.EyeOff, {
+    size: 4,
+    color: iconColor
+  })), type === 'password' && isShowPassword && !isLoading && /*#__PURE__*/React__default.createElement(react.Box, {
+    "data-test-id": "sfc2388bmeXBmdla45Ibk",
+    onClick: () => {
+      if (!isDisabled) setIsShowPassword(false);
+    },
+    cursor: isDisabled ? 'not-allowed' : 'pointer',
+    display: "flex",
+    justifyContent: "center"
+  }, /*#__PURE__*/React__default.createElement(internalIcon.Eye, {
+    size: 4,
+    color: iconColor
+  })), isLoading && /*#__PURE__*/React__default.createElement(Loader, {
+    size: "sm"
+  })), "(", addOnRight && /*#__PURE__*/React__default.createElement(InputAddonRight, null, addOnRight))));
 });
 InputField.defaultProps = {
   addOnLeft: undefined,
   addOnRight: undefined,
   elementLeft: undefined,
-  elementRight: undefined
+  elementRight: undefined,
+  withClear: undefined,
+  isLoading: undefined,
+  onClear: undefined
 };
 
-const Loader = /*#__PURE__*/react.forwardRef((props, ref) => {
-  const styles = react.useStyleConfig('LoaderStyle', props);
-  return /*#__PURE__*/React__default.createElement(react.Box, {
-    ref: ref,
-    __css: styles
-  });
-});
-
 const TextareaField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const {
     value,
@@ -2480,6 +2669,68 @@ PaginationFilter.defaultProps = {
   label: undefined
 };
 
+function RadioComponent({
+  isError = false,
+  helpText = '',
+  errorText = '',
+  children,
+  isDisabled,
+  ...rest
+}) {
+  const variant = isError ? 'errors' : 'unstyled';
+  return /*#__PURE__*/React__default.createElement(react.Box, null, /*#__PURE__*/React__default.createElement(react.Box, {
+    display: "flex"
+  }, /*#__PURE__*/React__default.createElement(react.Radio, Object.assign({
+    variant: variant
+  }, rest, {
+    isDisabled: isDisabled
+  }), children && /*#__PURE__*/React__default.createElement(react.Text, {
+    textStyle: "text.sm",
+    color: isDisabled ? 'black.low' : 'black.high'
+  }, children))), /*#__PURE__*/React__default.createElement(react.Box, {
+    mt: "5px",
+    ml: "24px"
+  }, isError ? /*#__PURE__*/React__default.createElement(react.Text, {
+    textStyle: "text.xs",
+    color: "danger.500"
+  }, errorText) : /*#__PURE__*/React__default.createElement(react.Text, {
+    textStyle: "text.xs",
+    color: "black.medium"
+  }, helpText)));
+}
+RadioComponent.defaultProps = {
+  isError: false,
+  helpText: '',
+  errorText: ''
+};
+
+function RadioGroupComponent(props) {
+  const {
+    children,
+    label,
+    helpText,
+    isError,
+    errorMessage,
+    ...rest
+  } = props;
+  return /*#__PURE__*/React__default.createElement(Field, Object.assign({}, rest, {
+    label: label,
+    leftHelperText: helpText,
+    isError: isError,
+    errorMessage: errorMessage
+  }), /*#__PURE__*/React__default.createElement(react.Box, {
+    mt: "12px"
+  }, /*#__PURE__*/React__default.createElement(react.RadioGroup, Object.assign({}, rest), /*#__PURE__*/React__default.createElement(react.Stack, {
+    spacing: [1, '16px'],
+    direction: ['column', 'row']
+  }, children))));
+}
+RadioGroupComponent.defaultProps = {
+  helpText: '',
+  isError: false,
+  errorMessage: ''
+};
+
 const SelectWrapper = ({
   children,
   isError = false
@@ -2672,15 +2923,104 @@ function SelectCreatable({
   })));
 }
 
-const Tab = /*#__PURE__*/react.forwardRef((props, ref) => {
-  var _props$leftAddon, _props$rightAddon;
-  const tabProps = react.useTab({
-    ...props,
-    ref
-  });
-  const isSelected = !!tabProps['aria-selected'];
-  const styles = react.useMultiStyleConfig('Tabs', tabProps);
-  return /*#__PURE__*/React.createElement(react.Button, Object.assign({
+/**
+ * The `Switch` component is used as an alternative for the checkbox component for switching between "enabled" and "disabled" states.
+ *
+ * @see Docs https://chakra-ui.com/docs/components/switch
+ * @see WAI-ARIA https://www.w3.org/WAI/ARIA/apg/patterns/switch/
+ */
+const Switch = /*#__PURE__*/react.forwardRef(function Switch(props, ref) {
+  const styles = react.useMultiStyleConfig('Switch', props);
+  const {
+    size = 'md'
+  } = props;
+  const {
+    spacing = '0.5rem',
+    children,
+    ...ownProps
+  } = react.omitThemingProps(props);
+  const {
+    state,
+    getInputProps,
+    getCheckboxProps,
+    getRootProps,
+    getLabelProps
+  } = react.useCheckbox(ownProps);
+  const containerStyles = React.useMemo(() => ({
+    display: 'inline-block',
+    position: 'relative',
+    verticalAlign: 'middle',
+    lineHeight: 0,
+    ...styles.container
+  }), [styles.container]);
+  const trackStyles = React.useMemo(() => ({
+    display: 'inline-flex',
+    flexShrink: 0,
+    justifyContent: 'flex-start',
+    boxSizing: 'content-box',
+    cursor: 'pointer',
+    width: 200,
+    ...styles.track
+  }), [styles.track]);
+  const labelStyles = React.useMemo(() => ({
+    userSelect: 'none',
+    marginStart: spacing,
+    ...styles.label
+  }), [spacing, styles.label]);
+  const getIconSize = value => {
+    const iconSize = {
+      sm: 3,
+      md: 4,
+      lg: 5
+    };
+    return iconSize[value];
+  };
+  return /*#__PURE__*/React__default.createElement(react.chakra.label, Object.assign({}, getRootProps(), {
+    display: "flex",
+    alignItems: "center",
+    className: sharedUtils.cx('chakra-switch', props.className),
+    __css: containerStyles
+  }), /*#__PURE__*/React__default.createElement("input", Object.assign({
+    "data-test-id": "",
+    className: "chakra-switch__input"
+  }, getInputProps({}, ref))), /*#__PURE__*/React__default.createElement(react.chakra.span, Object.assign({}, getCheckboxProps(), {
+    className: "chakra-switch__track",
+    pos: "relative",
+    __css: trackStyles
+  }), /*#__PURE__*/React__default.createElement(react.Flex, {
+    gap: 2,
+    pos: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)"
+  }, /*#__PURE__*/React__default.createElement(internalIcon.Check, {
+    color: "white",
+    size: getIconSize(size)
+  }), /*#__PURE__*/React__default.createElement(internalIcon.Close, {
+    color: state.isDisabled ? 'neutral.600' : 'neutral.900',
+    size: getIconSize(size)
+  })), /*#__PURE__*/React__default.createElement(react.chakra.span, {
+    __css: styles.thumb,
+    className: "chakra-switch__thumb",
+    "data-checked": sharedUtils.dataAttr(state.isChecked),
+    "data-hover": sharedUtils.dataAttr(state.isHovered)
+  })), children && /*#__PURE__*/React__default.createElement(react.chakra.span, Object.assign({
+    className: "chakra-switch__label",
+    color: state.isDisabled ? 'black.low' : 'black.high'
+  }, getLabelProps(), {
+    __css: labelStyles
+  }), children));
+});
+
+const Tab = /*#__PURE__*/react.forwardRef((props, ref) => {
+  var _props$leftAddon, _props$rightAddon;
+  const tabProps = react.useTab({
+    ...props,
+    ref
+  });
+  const isSelected = !!tabProps['aria-selected'];
+  const styles = react.useMultiStyleConfig('Tabs', tabProps);
+  return /*#__PURE__*/React.createElement(react.Button, Object.assign({
     p: 3,
     fontSize: "text.md",
     _selected: {
@@ -2801,115 +3141,390 @@ Uploader.defaultProps = {
   selected: false
 };
 
+const {
+  definePartsStyle,
+  defineMultiStyleConfig
+} = /*#__PURE__*/styledSystem.createMultiStyleConfigHelpers(anatomy.alertAnatomy.keys);
+const $fg = /*#__PURE__*/styledSystem.cssVar('alert-fg');
+const $bg = /*#__PURE__*/styledSystem.cssVar('alert-bg');
+const baseStyle = /*#__PURE__*/definePartsStyle({
+  container: {
+    bg: $bg.reference,
+    px: '4',
+    py: '2',
+    borderRadius: 'md'
+  },
+  title: {
+    fontWeight: '400',
+    lineHeight: '18px',
+    marginEnd: '2'
+  },
+  description: {
+    lineHeight: '6'
+  },
+  icon: {
+    color: $fg.reference,
+    flexShrink: 0,
+    marginEnd: '3',
+    w: '4',
+    h: '4'
+  },
+  action: {
+    '& +.chakra-alert__close': {
+      ml: '3'
+    }
+  },
+  close: {
+    color: $fg.reference,
+    w: '4',
+    h: '4'
+  },
+  spinner: {
+    color: $fg.reference,
+    flexShrink: 0,
+    marginEnd: '3',
+    w: '5',
+    h: '5'
+  }
+});
+function getBg(props) {
+  const {
+    theme,
+    colorScheme: c
+  } = props;
+  const darkBg = themeTools.transparentize(`${c}.200`, 0.16)(theme);
+  return {
+    light: `colors.${c}.50`,
+    dark: darkBg
+  };
+}
+const variantSubtle = /*#__PURE__*/definePartsStyle(props => {
+  const {
+    colorScheme: c
+  } = props;
+  const bg = getBg(props);
+  return {
+    container: {
+      [$fg.variable]: `colors.${c}.700`,
+      [$bg.variable]: bg.light,
+      _dark: {
+        [$fg.variable]: `colors.${c}.200`,
+        [$bg.variable]: bg.dark
+      },
+      color: $fg.reference
+    }
+  };
+});
+const variantSolid = /*#__PURE__*/definePartsStyle(props => {
+  const {
+    colorScheme: c
+  } = props;
+  return {
+    container: {
+      [$fg.variable]: `colors.white.high`,
+      [$bg.variable]: `colors.${c}.500`,
+      _dark: {
+        [$fg.variable]: `colors.gray.900`,
+        [$bg.variable]: `colors.${c}.200`
+      },
+      color: $fg.reference
+    }
+  };
+});
+const variants = {
+  subtle: variantSubtle,
+  solid: variantSolid
+};
+const alertTheme = /*#__PURE__*/defineMultiStyleConfig({
+  baseStyle,
+  variants,
+  defaultProps: {
+    variant: 'subtle',
+    colorScheme: 'info'
+  }
+});
+
 // You can also use the more specific type for
 // a single part component: ComponentSingleStyleConfig
-const Button = {
+const Button$1 = /*#__PURE__*/styledSystem.defineStyleConfig({
   // The styles all button have in common
   baseStyle: {
     fontSize: 'body.1',
     fontWeight: 'normal',
-    lineHeight: '1.25',
-    minW: 24,
     px: 4,
-    py: 2,
+    py: 2.5,
     borderRadius: 'md',
     _disabled: {
-      opacity: 0.3
+      opacity: 1,
+      bg: 'neutral.300',
+      color: 'black.low'
     },
     _hover: {
       _disabled: {
-        opacity: 0.3
+        bg: 'neutral.300',
+        color: 'black.low'
       }
-    },
-    _active: {
-      _disabled: {
-        opacity: 0.3
-      }
-    },
-    _loading: {
-      opacity: 0.7
     }
   },
   sizes: {
-    lg: {
-      fontSize: 'button.lg',
-      h: 12
+    lg: props => {
+      const {
+        variant
+      } = props;
+      const base = {
+        fontSize: 'text.xl',
+        h: 12,
+        px: 4,
+        py: 2.5
+      };
+      const icon = {
+        h: 10,
+        w: 10,
+        p: 0
+      };
+      return variant === 'icon' ? icon : base;
     },
-    md: {
-      fontSize: 'button.md',
-      h: 9
+    md: props => {
+      const {
+        variant
+      } = props;
+      const base = {
+        fontSize: 'text.md',
+        h: 9,
+        px: 3,
+        py: '7px'
+      };
+      const icon = {
+        h: 9,
+        w: 9,
+        p: 0
+      };
+      return variant === 'icon' ? icon : base;
     },
-    sm: {
-      fontSize: 'button.sm',
-      h: 6
+    sm: props => {
+      const {
+        variant
+      } = props;
+      const base = {
+        fontSize: 'text.xs',
+        h: 6,
+        px: 2,
+        py: '5px'
+      };
+      const icon = {
+        h: 6,
+        w: 6,
+        p: 0
+      };
+      return variant === 'icon' ? icon : base;
     }
   },
-  // Two variants: outline and solid
   variants: {
-    solid: {
-      color: 'white',
-      bg: 'primary.500',
+    primary: props => {
+      const {
+        isLoading
+      } = props;
+      const basePrimary = {
+        color: 'white.high',
+        bg: 'primary.500',
+        _hover: {
+          bg: 'primary.600'
+        },
+        _active: {
+          bg: 'primary.700'
+        }
+      };
+      const disabledLoading = {
+        _disabled: {
+          bg: 'primary.500'
+        },
+        _hover: {
+          _disabled: {
+            bg: 'primary.500'
+          }
+        }
+      };
+      return isLoading ? disabledLoading : basePrimary;
+    },
+    secondary: props => {
+      const {
+        isLoading
+      } = props;
+      const baseSecondary = {
+        color: 'primary.500',
+        borderWidth: 1,
+        borderStyle: 'inside',
+        bg: 'white.high',
+        borderColor: 'primary.500',
+        _hover: {
+          bg: 'primary.50'
+        },
+        _active: {
+          bg: 'primary.100'
+        },
+        _disabled: {
+          border: 0
+        }
+      };
+      const disabledLoading = {
+        ...baseSecondary,
+        _disabled: {
+          bg: 'white.high'
+        },
+        _hover: {
+          _disabled: {
+            bg: 'white.high'
+          }
+        }
+      };
+      return isLoading ? disabledLoading : baseSecondary;
+    },
+    tertiary: props => {
+      const {
+        isLoading
+      } = props;
+      const baseTertiary = {
+        color: 'primary.500',
+        _hover: {
+          bg: 'primary.50'
+        },
+        _active: {
+          bg: 'primary.100'
+        }
+      };
+      const disabledLoading = {
+        ...baseTertiary,
+        _disabled: {
+          bg: 'transparent'
+        },
+        _hover: {
+          _disabled: {
+            bg: 'transparent'
+          }
+        }
+      };
+      return isLoading ? disabledLoading : baseTertiary;
+    },
+    danger: props => {
+      const {
+        isLoading
+      } = props;
+      const baseDanger = {
+        bg: 'danger.500',
+        color: 'white.high',
+        _hover: {
+          bg: 'danger.600'
+        },
+        _active: {
+          bg: 'danger.700'
+        }
+      };
+      const disabledLoading = {
+        ...baseDanger,
+        _disabled: {
+          bg: 'danger.500'
+        },
+        _hover: {
+          _disabled: {
+            bg: 'danger.500'
+          }
+        }
+      };
+      return isLoading ? disabledLoading : baseDanger;
+    },
+    'outline-danger': props => {
+      const {
+        isLoading
+      } = props;
+      const baseSecondary = {
+        color: 'danger.500',
+        borderWidth: 1,
+        borderStyle: 'inside',
+        bg: 'white.high',
+        borderColor: 'danger.500',
+        _hover: {
+          bg: 'danger.50'
+        },
+        _active: {
+          bg: 'danger.100'
+        },
+        _disabled: {
+          border: 0
+        }
+      };
+      const disabledLoading = {
+        ...baseSecondary,
+        _disabled: {
+          bg: 'white.high'
+        },
+        _hover: {
+          _disabled: {
+            bg: 'white.high'
+          }
+        }
+      };
+      return isLoading ? disabledLoading : baseSecondary;
+    },
+    link: {
+      bg: 'transparent',
+      color: 'primary.500',
       _disabled: {
-        bg: 'primary.700'
+        opacity: '1',
+        bg: 'transparent',
+        color: 'black.medium'
       },
       _hover: {
-        bg: 'primary.600'
-      },
-      _active: {
-        bg: 'primary.700'
-      },
-      _focus: {
-        bg: 'primary.700'
+        _disabled: {
+          bg: 'transparent',
+          color: 'black.medium'
+        }
       }
     },
-    outline: props => ({
-      color: 'primary.500',
-      borderWidth: 1,
-      borderStyle: 'inside',
-      bg: themeTools.mode('white', 'transparent')(props),
-      borderColor: themeTools.mode('primary.500', 'primary.500')(props),
-      _hover: {
-        bg: 'primary.50'
-      },
+    icon: {
+      bg: 'neutral.50',
+      minW: 0,
+      borderColor: 'neutral.200',
+      borderWidth: '1px',
       _active: {
-        bg: 'primary.100'
+        bg: 'neutral.500',
+        borderColor: 'neutral.50'
       },
-      _focus: {
-        bg: 'primary.100'
-      }
-    }),
-    'outline-danger': {
-      color: 'danger.500',
-      bg: 'white',
-      borderStyle: 'inside',
-      borderWidth: 1,
-      borderColor: 'danger.500'
-    },
-    ghost: {
-      color: 'primary.500',
       _disabled: {
-        bg: 'primary.100'
+        bg: 'neutral.500',
+        opacity: 0.3,
+        borderColor: 'neutral.50'
+      },
+      _hover: {
+        bg: 'neutral.400',
+        _disabled: {
+          bg: 'neutral.500',
+          opacity: 0.3,
+          borderColor: 'neutral.50'
+        }
       }
-    },
-    link: {
-      bg: 'transparent',
-      color: 'primary.500'
     }
   },
-  // The default size and variant values
   defaultProps: {
     size: 'md',
-    variant: 'solid',
-    orientation: 'vertical',
+    variant: 'primary',
     colorScheme: 'primary'
   }
-};
+});
+
+const CardStyle = /*#__PURE__*/styledSystem.defineStyleConfig({
+  baseStyle: props => {
+    return {
+      shadow: props.withShadow ? 'raised' : 'none',
+      borderRadius: props.isRounded ? 'lg' : 'none'
+    };
+  }
+});
 
 const {
-  definePartsStyle,
-  defineMultiStyleConfig
+  definePartsStyle: definePartsStyle$1,
+  defineMultiStyleConfig: defineMultiStyleConfig$1
 } = /*#__PURE__*/react.createMultiStyleConfigHelpers(anatomy.checkboxAnatomy.keys);
-const baseStyle = /*#__PURE__*/definePartsStyle({
+const baseStyle$1 = /*#__PURE__*/definePartsStyle$1({
   control: {
     borderRadius: '4px',
     width: '16px',
@@ -2933,7 +3548,7 @@ const baseStyle = /*#__PURE__*/definePartsStyle({
     cursor: 'not-allowed'
   }
 });
-const errors = /*#__PURE__*/definePartsStyle({
+const errors = /*#__PURE__*/definePartsStyle$1({
   control: {
     borderColor: 'danger.500',
     _checked: {
@@ -2953,7 +3568,7 @@ const errors = /*#__PURE__*/definePartsStyle({
     fontSize: '12px'
   }
 });
-const unstyled = /*#__PURE__*/definePartsStyle({
+const unstyled = /*#__PURE__*/definePartsStyle$1({
   control: {
     borderColor: 'neutral.500',
     _checked: {
@@ -2969,7 +3584,8 @@ const unstyled = /*#__PURE__*/definePartsStyle({
       }
     },
     _disabled: {
-      backgroundColor: 'neutral.500'
+      backgroundColor: 'neutral.500',
+      borderColor: 'neutral.500'
     },
     _indeterminate: {
       borderColor: 'primary.500',
@@ -2980,48 +3596,109 @@ const unstyled = /*#__PURE__*/definePartsStyle({
     fontSize: '12px'
   }
 });
-const variants = {
+const variants$1 = {
   errors,
   unstyled
 };
-const Checkbox = /*#__PURE__*/defineMultiStyleConfig({
-  baseStyle,
-  variants,
+const Checkbox = /*#__PURE__*/defineMultiStyleConfig$1({
+  baseStyle: baseStyle$1,
+  variants: variants$1,
   defaultProps: {
-    variant: 'errors'
+    variant: 'unstyled'
   }
 });
 
-const baseStyle$1 = /*#__PURE__*/styledSystem.defineStyle({
+const Chips = /*#__PURE__*/styledSystem.defineStyleConfig({
+  baseStyle: props => {
+    const {
+      isDisabled,
+      isActive
+    } = props;
+    const defaultProps = {
+      color: 'primary.500',
+      fontSize: 'text.small',
+      borderRadius: '24px',
+      borderWidth: '1px',
+      borderColor: 'primary.500',
+      bg: 'white.high',
+      paddingX: 3,
+      paddingY: 1,
+      cursor: 'default'
+    };
+    let chipsProps = {
+      ...defaultProps
+    };
+    if (isActive) {
+      const isActiveProps = {
+        bg: 'primary.500',
+        color: 'white.high'
+      };
+      chipsProps = {
+        ...chipsProps,
+        ...isActiveProps
+      };
+    }
+    if (isDisabled) {
+      const isDisabledProps = {
+        bg: 'neutral.200',
+        color: 'black.low',
+        borderColor: 'neutral.200',
+        cursor: 'not-allowed'
+      };
+      chipsProps = {
+        ...chipsProps,
+        ...isDisabledProps
+      };
+    }
+    return {
+      ...chipsProps
+    };
+  },
+  sizes: {
+    sm: {
+      fontSize: '12px'
+    },
+    md: {
+      fontSize: '14px'
+    }
+  },
+  defaultProps: {
+    size: 'sm'
+  }
+});
+
+const baseStyle$2 = /*#__PURE__*/styledSystem.defineStyle({
   fontSize: 'field.sm',
   marginEnd: 1,
   mb: 1
 });
 const FormLabel = /*#__PURE__*/styledSystem.defineStyleConfig({
-  baseStyle: baseStyle$1
+  baseStyle: baseStyle$2
 });
 
 const {
-  definePartsStyle: definePartsStyle$1,
-  defineMultiStyleConfig: defineMultiStyleConfig$1
+  definePartsStyle: definePartsStyle$2,
+  defineMultiStyleConfig: defineMultiStyleConfig$2
 } = /*#__PURE__*/styledSystem.createMultiStyleConfigHelpers(anatomy.inputAnatomy.keys);
-const baseStyle$2 = /*#__PURE__*/definePartsStyle$1({
+const baseStyle$3 = /*#__PURE__*/definePartsStyle$2({
   field: {
     width: '100%',
     minWidth: 0,
     outline: 0,
-    px: 2.5,
-    py: 2,
+    px: 2,
+    py: 2.5,
+    paddingInlineStart: 2,
+    paddingInlineEnd: 2,
     position: 'relative',
     appearance: 'none',
-    transitionProperty: 'common',
-    transitionDuration: 'normal',
     color: 'black.high',
     _disabled: {
       bg: 'neutral.300',
-      border: '1px solid',
-      borderColor: 'neutral.400',
-      cursor: 'not-allowed'
+      border: 0,
+      cursor: 'not-allowed',
+      opacity: 1,
+      boxShadow: 'none',
+      color: 'black.medium'
     },
     _placeholder: {
       color: 'black.low'
@@ -3030,88 +3707,54 @@ const baseStyle$2 = /*#__PURE__*/definePartsStyle$1({
 });
 const size = {
   lg: /*#__PURE__*/styledSystem.defineStyle({
-    fontSize: 'field.lg',
+    fontSize: 'text.lg',
     h: 12,
     borderRadius: 'md'
   }),
   md: /*#__PURE__*/styledSystem.defineStyle({
-    fontSize: 'field.md',
+    fontSize: 'text.md',
     h: 10,
     borderRadius: 'md'
   }),
   sm: /*#__PURE__*/styledSystem.defineStyle({
-    fontSize: 'field.sm',
+    fontSize: 'text.sm',
     h: 9.5,
     borderRadius: 'md'
   })
 };
 const sizes$1 = {
-  lg: /*#__PURE__*/definePartsStyle$1({
+  lg: /*#__PURE__*/definePartsStyle$2({
     field: size.lg,
     addon: size.lg
   }),
-  md: /*#__PURE__*/definePartsStyle$1({
+  md: /*#__PURE__*/definePartsStyle$2({
     field: size.md,
     addon: size.md
   }),
-  sm: /*#__PURE__*/definePartsStyle$1({
+  sm: /*#__PURE__*/definePartsStyle$2({
     field: size.sm,
     addon: size.sm
   })
 };
-function getDefaults(props) {
-  const {
-    focusBorderColor,
-    errorBorderColor,
-    readOnlyBorderColor
-  } = props;
-  return {
-    focusBorderColor: focusBorderColor || themeTools.mode('primary.500', 'primary.300')(props),
-    errorBorderColor: errorBorderColor || themeTools.mode('danger.500', 'danger.300')(props),
-    readOnlyBorderColor: readOnlyBorderColor || themeTools.mode('.500', 'danger.300')(props)
-  };
-}
-const outline = /*#__PURE__*/definePartsStyle$1(props => {
-  const {
-    theme
-  } = props;
-  const {
-    focusBorderColor: fc,
-    errorBorderColor: ec,
-    readOnlyBorderColor: rc
-  } = getDefaults(props);
-  return {
-    field: {
-      border: '1px solid',
-      borderColor: themeTools.mode('dark.200', 'inherit')(props),
-      bg: themeTools.mode('white', 'inherit')(props),
-      color: themeTools.mode('inherit', 'white')(props),
-      _hover: {
-        borderColor: themeTools.mode('gray.300', 'whiteAlpha.400')(props)
-      },
-      _readOnly: {
-        userSelect: 'all',
-        borderColor: themeTools.getColor(theme, rc),
-        boxShadow: `0 0 0 0 ${themeTools.getColor(theme, rc)}`
-      },
-      _invalid: {
-        borderColor: themeTools.getColor(theme, ec),
-        boxShadow: `0 0 0 0 ${themeTools.getColor(theme, ec)}`
-      },
-      _focusVisible: {
-        zIndex: 1,
-        borderColor: themeTools.getColor(theme, fc),
-        boxShadow: `0 0 0 0 ${themeTools.getColor(theme, fc)}`
-      }
+const outline = /*#__PURE__*/definePartsStyle$2(props => {
+  const field = {
+    border: 0,
+    outline: 0,
+    bg: themeTools.mode('white', 'inherit')(props),
+    color: themeTools.mode('inherit', 'white')(props),
+    _invalid: {
+      boxShadow: 'none'
     },
-    addon: {
-      border: '1px solid',
-      borderColor: themeTools.mode('inherit', 'whiteAlpha.50')(props),
-      bg: themeTools.mode('gray.100', 'whiteAlpha.300')(props)
+    _focusVisible: {
+      zIndex: 1,
+      boxShadow: 'none'
     }
   };
+  return {
+    field
+  };
 });
-const unstyled$1 = /*#__PURE__*/definePartsStyle$1({
+const unstyled$1 = /*#__PURE__*/definePartsStyle$2({
   field: {
     bg: 'transparent',
     px: '0',
@@ -3123,14 +3766,14 @@ const unstyled$1 = /*#__PURE__*/definePartsStyle$1({
     height: 'auto'
   }
 });
-const variants$1 = {
+const variants$2 = {
   outline,
   unstyled: unstyled$1
 };
-const Input = /*#__PURE__*/defineMultiStyleConfig$1({
-  baseStyle: baseStyle$2,
+const Input = /*#__PURE__*/defineMultiStyleConfig$2({
+  baseStyle: baseStyle$3,
   sizes: sizes$1,
-  variants: variants$1,
+  variants: variants$2,
   defaultProps: {
     size: 'sm',
     variant: 'outline'
@@ -3145,16 +3788,21 @@ const rotate = /*#__PURE__*/react$1.keyframes({
     transform: 'rotate(360deg)'
   }
 });
+const getLoaderColor = color => {
+  if (color === 'primary') return colors.primary[600];
+  if (color === 'danger') return colors.danger[500];
+  return colors.white.high;
+};
 const LoaderStyle = /*#__PURE__*/styledSystem.defineStyleConfig({
   baseStyle: props => {
-    const colors$1 = props.color === 'white' ? 'white' : colors.primary[600];
+    const colors = getLoaderColor(props.color);
     return {
       borderRadius: '50%',
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center',
       animation: `${rotate} 1s linear infinite`,
-      background: `conic-gradient(from 180deg at 50% 50%, ${colors$1} 0deg, rgba(217, 217, 217, 0) 360deg);`,
+      background: `conic-gradient(from 180deg at 50% 50%, ${colors} 0deg, rgba(217, 217, 217, 0) 360deg);`,
       ':before': {
         content: `''`,
         display: 'block',
@@ -3163,7 +3811,7 @@ const LoaderStyle = /*#__PURE__*/styledSystem.defineStyleConfig({
         height: '6px',
         position: 'absolute',
         bottom: 0,
-        background: colors$1
+        background: colors
       }
     };
   },
@@ -3229,10 +3877,10 @@ const LoaderStyle = /*#__PURE__*/styledSystem.defineStyleConfig({
 });
 
 const {
-  definePartsStyle: definePartsStyle$2
+  definePartsStyle: definePartsStyle$3
 } = /*#__PURE__*/styledSystem.createMultiStyleConfigHelpers(anatomy.popoverAnatomy.keys);
 const Popover = {
-  baseStyle: props => definePartsStyle$2({
+  baseStyle: props => definePartsStyle$3({
     popper: {
       background: themeTools.mode('white', 'inherit')(props)
     }
@@ -3240,93 +3888,175 @@ const Popover = {
 };
 
 const {
-  definePartsStyle: definePartsStyle$3
-} = /*#__PURE__*/styledSystem.createMultiStyleConfigHelpers(anatomy.radioAnatomy.keys);
-// You can also use the more specific type for
-// a single part component: ComponentSingleStyleConfig
-const Radio = {
-  // The styles all checkbox have in common
-  baseStyle: /*#__PURE__*/definePartsStyle$3({
-    control: {
-      _checked: {
-        borderColor: 'primary.500',
+  definePartsStyle: definePartsStyle$4,
+  defineMultiStyleConfig: defineMultiStyleConfig$3
+} = /*#__PURE__*/react.createMultiStyleConfigHelpers(anatomy.radioAnatomy.keys);
+const baseStyle$4 = /*#__PURE__*/definePartsStyle$4({
+  control: {
+    border: '1px solid',
+    width: '16px',
+    height: '16px'
+  },
+  label: {
+    marginLeft: '8px',
+    textStyle: 'text.sm',
+    color: 'black.high',
+    _disabled: {
+      color: 'black.low'
+    }
+  }
+});
+const errors$1 = /*#__PURE__*/definePartsStyle$4({
+  control: {
+    borderColor: 'danger.500',
+    _checked: {
+      borderColor: 'danger.500',
+      bg: 'white',
+      _before: {
+        h: '10px',
+        w: '10px',
+        bg: 'danger.500'
+      },
+      _hover: {
+        borderColor: 'danger.500',
+        bg: 'gray.200'
+      },
+      _disabled: {
+        borderColor: 'danger.500',
         bg: 'white',
         _before: {
-          h: '72%',
-          w: '72%',
-          bg: 'primary.500'
-        },
-        _hover: {
-          borderColor: 'primary.500',
-          bg: 'gray.200'
+          h: '10px',
+          w: '10px',
+          bg: 'neutral.500'
         }
       }
+    },
+    _disabled: {
+      borderColor: 'danger.500',
+      bg: 'neutral.500'
     }
-  }),
-  // Two sizes: sm and md
-  sizes: {
-    sm: /*#__PURE__*/definePartsStyle$3({
-      control: {
-        w: '3',
-        h: '3'
-      },
-      label: {
-        fontSize: 'text.sm'
-      }
-    }),
-    md: /*#__PURE__*/definePartsStyle$3({
-      control: {
-        w: '4',
-        h: '4'
+  },
+  label: {
+    fontSize: '12px'
+  }
+});
+const unstyled$2 = /*#__PURE__*/definePartsStyle$4({
+  control: {
+    borderColor: 'neutral.600',
+    _checked: {
+      borderColor: 'primary.500',
+      bg: 'white',
+      _before: {
+        h: '10px',
+        w: '10px',
+        bg: 'primary.500'
       },
-      label: {
-        fontSize: 'text.md'
-      }
-    }),
-    lg: /*#__PURE__*/definePartsStyle$3({
-      control: {
-        w: '5',
-        h: '5'
+      _hover: {
+        borderColor: 'primary.500',
+        bg: 'gray.200'
       },
-      label: {
-        fontSize: 'text.lg'
+      _disabled: {
+        borderColor: 'neutral.500',
+        bg: 'white',
+        _before: {
+          h: '10px',
+          w: '10px',
+          bg: 'neutral.500'
+        }
       }
-    })
+    },
+    _disabled: {
+      borderColor: 'neutral.500',
+      bg: 'neutral.500'
+    }
   },
-  // Two variants: outline and solid
-  variants: {},
-  // The default size and variant values
-  defaultProps: {
-    size: 'sm',
-    variant: 'solid',
-    orientation: 'vertical',
-    colorScheme: 'primary'
+  label: {
+    fontSize: '12px'
   }
+});
+const variants$3 = {
+  errors: errors$1,
+  unstyled: unstyled$2
 };
+const Radio = /*#__PURE__*/defineMultiStyleConfig$3({
+  baseStyle: baseStyle$4,
+  variants: variants$3,
+  defaultProps: {
+    variant: 'unstyled'
+  }
+});
 
 const {
-  definePartsStyle: definePartsStyle$4,
-  defineMultiStyleConfig: defineMultiStyleConfig$2
-} = /*#__PURE__*/react.createMultiStyleConfigHelpers(anatomy.switchAnatomy.keys);
-const baseStyle$3 = /*#__PURE__*/definePartsStyle$4({
-  // define the part you're going to style
+  defineMultiStyleConfig: defineMultiStyleConfig$4,
+  definePartsStyle: definePartsStyle$5
+} = /*#__PURE__*/styledSystem.createMultiStyleConfigHelpers(anatomy.switchAnatomy.keys);
+const $width = /*#__PURE__*/themeTools.cssVar('switch-track-width');
+const $height = /*#__PURE__*/themeTools.cssVar('switch-track-height');
+const $diff = /*#__PURE__*/themeTools.cssVar('switch-track-diff');
+const diffValue = /*#__PURE__*/themeTools.calc.subtract($width, $height);
+const $translateX = /*#__PURE__*/themeTools.cssVar('switch-thumb-x');
+const baseStyleThumb = /*#__PURE__*/styledSystem.defineStyle({
+  bg: 'white',
+  transitionProperty: 'transform',
+  transitionDuration: 'normal',
+  borderRadius: 'inherit',
+  width: [$height.reference],
+  height: [$height.reference],
+  _checked: {
+    transform: `translateX(${$translateX.reference})`
+  }
+});
+const baseStyle$5 = /*#__PURE__*/definePartsStyle$5(() => ({
   container: {
-    // ...
-  },
-  thumb: {
-    bg: 'white'
+    [$diff.variable]: diffValue,
+    [$translateX.variable]: $diff.reference,
+    _rtl: {
+      [$translateX.variable]: themeTools.calc($diff).negate().toString()
+    }
   },
   track: {
     bg: 'neutral.400',
     p: 1,
     _checked: {
-      bg: 'primary.500'
+      bg: 'primary.500',
+      _disabled: {
+        bg: 'neutral.600'
+      }
+    },
+    _disabled: {
+      bg: 'neutral.500',
+      opacity: '100%'
     }
+  },
+  thumb: baseStyleThumb
+}));
+const sizes$2 = {
+  sm: /*#__PURE__*/definePartsStyle$5({
+    container: {
+      [$width.variable]: '2.125rem',
+      [$height.variable]: '1.063rem'
+    }
+  }),
+  md: /*#__PURE__*/definePartsStyle$5({
+    container: {
+      [$width.variable]: '2.875rem',
+      [$height.variable]: '1.5rem'
+    }
+  }),
+  lg: /*#__PURE__*/definePartsStyle$5({
+    container: {
+      [$width.variable]: '3.625rem',
+      [$height.variable]: '1.813rem'
+    }
+  })
+};
+const Switch$1 = /*#__PURE__*/defineMultiStyleConfig$4({
+  baseStyle: baseStyle$5,
+  sizes: sizes$2,
+  defaultProps: {
+    size: 'md'
   }
 });
-const Switch = /*#__PURE__*/defineMultiStyleConfig$2({
-  baseStyle: baseStyle$3
-});
 
 const getProps = props => {
   const {
@@ -3367,7 +4097,7 @@ const outline$1 = /*#__PURE__*/react.defineStyle(props => {
     outline: 'none',
     _disabled: {
       opacity: 1,
-      color: 'black.low',
+      color: 'black.medium',
       background: 'neutral.300'
     },
     _placeholder: {
@@ -3411,14 +4141,17 @@ const Textarea = /*#__PURE__*/react.defineStyleConfig({
 
 var components = {
   __proto__: null,
-  Button: Button,
+  Alert: alertTheme,
+  Button: Button$1,
+  Card: CardStyle,
   Checkbox: Checkbox,
+  Chips: Chips,
   FormLabel: FormLabel,
   Input: Input,
   LoaderStyle: LoaderStyle,
   Popover: Popover,
   Radio: Radio,
-  Switch: Switch,
+  Switch: Switch$1,
   Textarea: Textarea
 };
 
@@ -3714,12 +4447,19 @@ Object.defineProperty(exports, 'useTabsStyles', {
     return react.useTabsStyles;
   }
 });
+exports.Box = react.Box;
 exports.BreadCrumb = BreadCrumb;
+exports.Button = Button;
+exports.Card = CardCustom;
 exports.Checkbox = CheckboxComponent;
+exports.CheckboxGroup = CheckboxGroupComponent;
+exports.Container = react.Container;
 exports.DataTable = DataTable;
 exports.DatePickerMonth = DatePickerMonth;
 exports.Datepicker = Datepicker;
 exports.Field = Field;
+exports.Flex = react.Flex;
+exports.Grid = react.Grid;
 exports.Header = Header;
 exports.InputField = InputField;
 exports.Loader = Loader;
@@ -3734,15 +4474,22 @@ exports.PaginationDetail = PaginationDetail;
 exports.PaginationFilter = PaginationFilter;
 exports.Provider = Provider;
 exports.ProviderContext = ProviderContext;
+exports.Radio = RadioComponent;
+exports.RadioGroup = RadioGroupComponent;
 exports.Select = Select;
 exports.SelectAsync = SelectAsync;
 exports.SelectAsyncCreatable = SelectAsyncCreatable;
 exports.SelectCreatable = SelectCreatable;
+exports.Stack = react.Stack;
+exports.Switch = Switch;
 exports.Tab = Tab;
 exports.TabList = TabList;
 exports.TabPanel = TabPanel;
+exports.Text = react.Text;
 exports.TextareaField = TextareaField;
 exports.Uploader = Uploader;
+exports.Wrap = react.Wrap;
+exports.foundations = foundations;
 exports.theme = theme;
 exports.useInternalUI = useInternalUI;
 //# sourceMappingURL=internal-ui.cjs.development.js.map