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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/README.md +1 -1
  2. package/dist/components/checkbox/__stories__/checkbox.stories.d.ts +12 -0
  3. package/dist/components/checkbox/components/checkbox.d.ts +16 -0
  4. package/dist/components/checkbox/index.d.ts +2 -0
  5. package/dist/components/field/components/field.d.ts +5 -2
  6. package/dist/components/field/index.d.ts +0 -2
  7. package/dist/components/form/__stories__/textarea.stories.d.ts +10 -0
  8. package/dist/components/{field/components/textarea-field.d.ts → form/components/textarea.d.ts} +2 -6
  9. package/dist/components/form/index.d.ts +2 -0
  10. package/dist/components/index.d.ts +3 -0
  11. package/dist/components/{base/stories/checkbox.stories.d.ts → loader/__stories__/loader.stories.d.ts} +3 -2
  12. package/dist/components/loader/components/loader.d.ts +9 -0
  13. package/dist/components/loader/index.d.ts +2 -0
  14. package/dist/config/{foundations.stories.d.ts → __stories__/foundations.stories.d.ts} +1 -0
  15. package/dist/config/theme/components/checkbox.d.ts +86 -2
  16. package/dist/config/theme/components/index.d.ts +2 -1
  17. package/dist/config/theme/components/loader.d.ts +85 -0
  18. package/dist/config/theme/components/textarea.d.ts +54 -2
  19. package/dist/config/theme/foundations/index.d.ts +3 -2
  20. package/dist/config/theme/foundations/shadows.d.ts +15 -0
  21. package/dist/config/theme/foundations/typography.d.ts +25 -7
  22. package/dist/internal-ui.cjs.development.js +451 -164
  23. package/dist/internal-ui.cjs.development.js.map +1 -1
  24. package/dist/internal-ui.cjs.production.min.js +10 -10
  25. package/dist/internal-ui.cjs.production.min.js.map +1 -1
  26. package/dist/internal-ui.esm.js +464 -179
  27. package/dist/internal-ui.esm.js.map +1 -1
  28. package/dist/provider/{provider.d.ts → components/provider.d.ts} +2 -1
  29. package/dist/provider/index.d.ts +2 -2
  30. package/package.json +2 -2
  31. /package/dist/components/base/{stories → __stories__}/button.stories.d.ts +0 -0
  32. /package/dist/components/base/{stories → __stories__}/input.stories.d.ts +0 -0
  33. /package/dist/components/base/{stories → __stories__}/radio.stories.d.ts +0 -0
  34. /package/dist/components/base/{stories → __stories__}/switch.stories.d.ts +0 -0
  35. /package/dist/components/breadcrumb/{components/BreadCrumb.stories.d.ts → __stories__/breadcrumb.stories.d.ts} +0 -0
  36. /package/dist/components/data-table/{stories/data-table.stories.d.ts → __stories__/datatable.stories.d.ts} +0 -0
  37. /package/dist/components/datepicker/{components → __stories__}/datepicker.stories.d.ts +0 -0
  38. /package/dist/components/header/{stories → __stories__}/header.stories.d.ts +0 -0
  39. /package/dist/components/modal/{stories → __stories__}/modal.stories.d.ts +0 -0
  40. /package/dist/components/navigation/{stories → __stories__}/navigation.stories.d.ts +0 -0
  41. /package/dist/components/pagination/{stories → __stories__}/pagination.stories.d.ts +0 -0
  42. /package/dist/components/select/{stories → __stories__}/select.stories.d.ts +0 -0
  43. /package/dist/components/tabs/{stories → __stories__}/tabs.stories.d.ts +0 -0
  44. /package/dist/components/uploader/{stories → __stories__}/uploader.stories.d.ts +0 -0
  45. /package/dist/provider/{provider.stories.d.ts → __stories__/provider.stories.d.ts} +0 -0
@@ -23,6 +23,7 @@ var reactDropzone = require('react-dropzone');
23
23
  var themeTools = require('@chakra-ui/theme-tools');
24
24
  var anatomy = require('@chakra-ui/anatomy');
25
25
  var styledSystem = require('@chakra-ui/styled-system');
26
+ require('@fontsource/poppins');
26
27
  var axios = _interopDefault(require('axios'));
27
28
 
28
29
  /* eslint-disable react-hooks/rules-of-hooks */
@@ -120,6 +121,43 @@ BreadCrumb.defaultProps = {
120
121
  spacing: 2
121
122
  };
122
123
 
124
+ function CheckboxComponent({
125
+ isError = false,
126
+ helpText = '',
127
+ errorText = '',
128
+ children,
129
+ isDisabled,
130
+ ...rest
131
+ }) {
132
+ const variant = isError ? 'errors' : 'unstyled';
133
+ return /*#__PURE__*/React__default.createElement(react.Box, null, /*#__PURE__*/React__default.createElement(react.Box, {
134
+ display: "flex"
135
+ }, /*#__PURE__*/React__default.createElement(react.Checkbox, Object.assign({
136
+ variant: variant
137
+ }, rest, {
138
+ isDisabled: isDisabled
139
+ })), children && /*#__PURE__*/React__default.createElement(react.Box, null, /*#__PURE__*/React__default.createElement(react.Box, {
140
+ ml: "8px"
141
+ }, /*#__PURE__*/React__default.createElement(react.Text, {
142
+ textStyle: "text.sm",
143
+ color: isDisabled ? 'black.low' : 'black.high'
144
+ }, children)))), /*#__PURE__*/React__default.createElement(react.Box, {
145
+ mt: "5px",
146
+ ml: "24px"
147
+ }, isError ? /*#__PURE__*/React__default.createElement(react.Text, {
148
+ textStyle: "text.xs",
149
+ color: "danger.500"
150
+ }, errorText) : /*#__PURE__*/React__default.createElement(react.Text, {
151
+ textStyle: "text.xs",
152
+ color: isDisabled ? 'black.low' : 'black.medium'
153
+ }, helpText)));
154
+ }
155
+ CheckboxComponent.defaultProps = {
156
+ isError: false,
157
+ helpText: '',
158
+ errorText: ''
159
+ };
160
+
123
161
  const IndeterminateCheckbox = ({
124
162
  indeterminate = false,
125
163
  ...rest
@@ -1308,7 +1346,7 @@ const success = {
1308
1346
  '200': '#A9F9B5',
1309
1347
  '300': '#7CEE98',
1310
1348
  '400': '#58DD86',
1311
- '500': '#28c76f',
1349
+ '500': '#28C76F',
1312
1350
  '600': '#1DAB6A',
1313
1351
  '700': '#148F63',
1314
1352
  '800': '#0C7359',
@@ -1436,8 +1474,13 @@ const radius = {
1436
1474
  full: '9999px'
1437
1475
  };
1438
1476
 
1439
- const spacing = {
1440
- ...react.theme.space,
1477
+ const shadows = {
1478
+ ...react.theme.shadows,
1479
+ raised: '0px 4px 20px rgba(0, 0, 0, 0.05)'
1480
+ };
1481
+
1482
+ const sizes = {
1483
+ ...react.theme.sizes,
1441
1484
  4.5: '1.125rem',
1442
1485
  9.5: '2.375rem',
1443
1486
  18: '4.5rem',
@@ -1446,8 +1489,8 @@ const spacing = {
1446
1489
  30: '7.5rem'
1447
1490
  };
1448
1491
 
1449
- const sizes = {
1450
- ...react.theme.sizes,
1492
+ const spacing = {
1493
+ ...react.theme.space,
1451
1494
  4.5: '1.125rem',
1452
1495
  9.5: '2.375rem',
1453
1496
  18: '4.5rem',
@@ -1478,6 +1521,11 @@ const lineHeights = {
1478
1521
  short: 1.375,
1479
1522
  base: 1.5,
1480
1523
  tall: 1.625,
1524
+ 64: '4rem',
1525
+ 56: '3.5rem',
1526
+ 48: '3rem',
1527
+ 40: '2.5rem',
1528
+ 36: '2.25rem',
1481
1529
  34: '2.125rem',
1482
1530
  32: '2rem',
1483
1531
  30: '1.875rem',
@@ -1491,14 +1539,22 @@ const lineHeights = {
1491
1539
  14: '0.875rem',
1492
1540
  12: '0.75rem'
1493
1541
  };
1542
+ const letterSpacings = {
1543
+ tighter: '-0.05em',
1544
+ tight: '-0.025em',
1545
+ normal: '0',
1546
+ wide: '0.025em',
1547
+ wider: '0.05em',
1548
+ widest: '0.1em'
1549
+ };
1494
1550
  const fontSizes = {
1495
1551
  heading: {
1496
- 1: '1.75rem',
1497
- 2: '1.5rem',
1498
- 3: '1.25rem',
1499
- 4: '1.125rem',
1500
- 5: '1rem',
1501
- 6: '0.875rem'
1552
+ 1: '2.5rem',
1553
+ 2: '2rem',
1554
+ 3: '1.75rem',
1555
+ 4: '1.5rem',
1556
+ 5: '1.375rem',
1557
+ 6: '1.125rem'
1502
1558
  },
1503
1559
  text: {
1504
1560
  xl: '1.125rem',
@@ -1524,85 +1580,90 @@ const fontSizes = {
1524
1580
  const heading = {
1525
1581
  1: {
1526
1582
  fontSize: fontSizes.heading[1],
1527
- fontWeight: 'bold',
1528
- lineHeight: '3.5rem',
1529
- letterSpacing: '0'
1583
+ fontWeight: fontWeights.semibold,
1584
+ lineHeight: lineHeights[64],
1585
+ letterSpacing: letterSpacings.normal
1530
1586
  },
1531
1587
  2: {
1532
1588
  fontSize: fontSizes.heading[2],
1533
- fontWeight: 'bold',
1534
- lineHeight: '2.875rem',
1535
- letterSpacing: '0'
1589
+ fontWeight: fontWeights.semibold,
1590
+ lineHeight: lineHeights[56],
1591
+ letterSpacing: letterSpacings.normal
1536
1592
  },
1537
1593
  3: {
1538
1594
  fontSize: fontSizes.heading[3],
1539
- fontWeight: 'bold',
1540
- lineHeight: '2.5rem',
1541
- letterSpacing: '0'
1595
+ fontWeight: fontWeights.semibold,
1596
+ lineHeight: lineHeights[48],
1597
+ letterSpacing: letterSpacings.normal
1542
1598
  },
1543
1599
  4: {
1544
1600
  fontSize: fontSizes.heading[4],
1545
- fontWeight: 'bold',
1546
- lineHeight: '2rem',
1547
- letterSpacing: '0'
1601
+ fontWeight: fontWeights.semibold,
1602
+ lineHeight: lineHeights[40],
1603
+ letterSpacing: letterSpacings.normal
1548
1604
  },
1549
1605
  5: {
1550
1606
  fontSize: fontSizes.heading[5],
1551
- fontWeight: 'bold',
1552
- lineHeight: '1.5rem',
1553
- letterSpacing: '0'
1607
+ fontWeight: fontWeights.semibold,
1608
+ lineHeight: lineHeights[36],
1609
+ letterSpacing: letterSpacings.normal
1554
1610
  },
1555
1611
  6: {
1556
1612
  fontSize: fontSizes.heading[6],
1557
- fontWeight: 'bold',
1558
- lineHeight: '1.375rem',
1559
- letterSpacing: '0'
1613
+ fontWeight: fontWeights.semibold,
1614
+ lineHeight: lineHeights[32],
1615
+ letterSpacing: letterSpacings.normal
1560
1616
  }
1561
1617
  };
1562
1618
  const text = {
1563
1619
  xl: {
1564
1620
  fontSize: fontSizes.text.xl,
1621
+ fontWeight: fontWeights.normal,
1565
1622
  lineHeight: lineHeights[28],
1566
- letterSpacing: '0'
1623
+ letterSpacing: letterSpacings.normal
1567
1624
  },
1568
1625
  lg: {
1569
1626
  fontSize: fontSizes.text.lg,
1627
+ fontWeight: fontWeights.normal,
1570
1628
  lineHeight: lineHeights[24],
1571
- letterSpacing: '0'
1629
+ letterSpacing: letterSpacings.normal
1572
1630
  },
1573
1631
  md: {
1574
1632
  fontSize: fontSizes.text.md,
1633
+ fontWeight: fontWeights.normal,
1575
1634
  lineHeight: lineHeights[22],
1576
- letterSpacing: '0'
1635
+ letterSpacing: letterSpacings.normal
1577
1636
  },
1578
1637
  sm: {
1579
1638
  fontSize: fontSizes.text.sm,
1639
+ fontWeight: fontWeights.normal,
1580
1640
  lineHeight: lineHeights[18],
1581
- letterSpacing: '0'
1641
+ letterSpacing: letterSpacings.normal
1582
1642
  },
1583
1643
  xs: {
1584
1644
  fontSize: fontSizes.text.xs,
1645
+ fontWeight: fontWeights.normal,
1585
1646
  lineHeight: lineHeights[14],
1586
- letterSpacing: '0'
1647
+ letterSpacing: letterSpacings.normal
1587
1648
  }
1588
1649
  };
1589
1650
  const button = {
1590
1651
  lg: {
1591
1652
  fontSize: fontSizes.button.lg,
1592
1653
  lineHeight: lineHeights[28],
1593
- letterSpacing: '0',
1654
+ letterSpacing: letterSpacings.normal,
1594
1655
  fontWeight: fontWeights.normal
1595
1656
  },
1596
1657
  md: {
1597
1658
  fontSize: fontSizes.button.md,
1598
1659
  lineHeight: lineHeights[22],
1599
- letterSpacing: '0',
1660
+ letterSpacing: letterSpacings.normal,
1600
1661
  fontWeight: fontWeights.normal
1601
1662
  },
1602
1663
  sm: {
1603
1664
  fontSize: fontSizes.button.sm,
1604
1665
  lineHeight: lineHeights[14],
1605
- letterSpacing: '0',
1666
+ letterSpacing: letterSpacings.normal,
1606
1667
  fontWeight: fontWeights.normal
1607
1668
  }
1608
1669
  };
@@ -1610,19 +1671,19 @@ const field = {
1610
1671
  lg: {
1611
1672
  fontSize: fontSizes.field.lg,
1612
1673
  lineHeight: lineHeights[24],
1613
- letterSpacing: '0',
1674
+ letterSpacing: letterSpacings.normal,
1614
1675
  fontWeight: fontWeights.normal
1615
1676
  },
1616
1677
  md: {
1617
1678
  fontSize: fontSizes.field.md,
1618
1679
  lineHeight: lineHeights[22],
1619
- letterSpacing: '0',
1680
+ letterSpacing: letterSpacings.normal,
1620
1681
  fontWeight: fontWeights.normal
1621
1682
  },
1622
1683
  sm: {
1623
1684
  fontSize: fontSizes.field.sm,
1624
1685
  lineHeight: lineHeights[18],
1625
- letterSpacing: '0',
1686
+ letterSpacing: letterSpacings.normal,
1626
1687
  fontWeight: fontWeights.normal
1627
1688
  }
1628
1689
  };
@@ -1639,10 +1700,12 @@ var foundations = {
1639
1700
  __proto__: null,
1640
1701
  colors: colors,
1641
1702
  radii: radius,
1642
- space: spacing,
1703
+ shadows: shadows,
1643
1704
  sizes: sizes,
1705
+ space: spacing,
1644
1706
  fonts: fonts,
1645
1707
  fontSizes: fontSizes,
1708
+ letterSpacings: letterSpacings,
1646
1709
  lineHeights: lineHeights,
1647
1710
  textStyles: textStyles
1648
1711
  };
@@ -1696,35 +1759,63 @@ const Field = props => {
1696
1759
  const {
1697
1760
  label,
1698
1761
  isError,
1699
- error,
1700
- helperText,
1762
+ errorMessage,
1763
+ leftHelperText,
1764
+ rightHelperText,
1701
1765
  isRequired,
1702
- children
1766
+ children,
1767
+ isSuccess,
1768
+ isDisabled
1703
1769
  } = props;
1770
+ const getHelperColor = () => {
1771
+ if (isError) return 'danger.500';
1772
+ if (isSuccess) return 'success.500';
1773
+ if (isDisabled) return 'black.low';
1774
+ return 'black.medium';
1775
+ };
1776
+ const getJustifyContentHelper = () => {
1777
+ if (rightHelperText && (!leftHelperText || isError && !errorMessage)) return 'flex-end';
1778
+ return 'space-between';
1779
+ };
1780
+ const helperColor = getHelperColor();
1781
+ const justifyHelper = getJustifyContentHelper();
1704
1782
  return /*#__PURE__*/React__default.createElement(react.FormControl, {
1705
1783
  isInvalid: isError
1706
1784
  }, label && (typeof label === 'string' ? /*#__PURE__*/React__default.createElement(react.FormLabel, {
1707
- fontSize: "field.sm",
1785
+ mb: 1,
1786
+ fontSize: "text.sm",
1708
1787
  requiredIndicator: undefined
1709
1788
  }, isRequired && /*#__PURE__*/React__default.createElement(react.Box, {
1710
1789
  as: "span",
1711
- color: "red.500",
1790
+ color: "danger.500",
1712
1791
  ml: 0,
1713
1792
  mr: 1
1714
- }, "*"), label) : label), children, !isError ? helperText && /*#__PURE__*/React__default.createElement(react.FormHelperText, {
1715
- fontSize: "field.sm"
1716
- }, helperText) : typeof error === 'string' ? /*#__PURE__*/React__default.createElement(react.FormErrorMessage, {
1717
- textStyle: "field.sm",
1718
- fontSize: "field.sm",
1719
- mt: 1,
1720
- marginStart: 1
1721
- }, error) : error);
1793
+ }, "*"), label) : label), children, (isError && errorMessage || leftHelperText || rightHelperText) && /*#__PURE__*/React__default.createElement(react.Box, {
1794
+ display: "flex",
1795
+ width: "full",
1796
+ justifyContent: justifyHelper
1797
+ }, !isError ? leftHelperText && /*#__PURE__*/React__default.createElement(react.FormHelperText, {
1798
+ fontSize: "text.xs",
1799
+ color: helperColor,
1800
+ mt: 1
1801
+ }, leftHelperText) : typeof errorMessage === 'string' ? /*#__PURE__*/React__default.createElement(react.FormErrorMessage, {
1802
+ fontSize: "text.xs",
1803
+ color: "danger.500",
1804
+ mt: 1
1805
+ }, errorMessage) : errorMessage, rightHelperText && /*#__PURE__*/React__default.createElement(react.FormHelperText, {
1806
+ fontSize: "text.xs",
1807
+ color: helperColor,
1808
+ mt: 1
1809
+ }, rightHelperText)));
1722
1810
  };
1723
1811
  Field.defaultProps = {
1724
1812
  label: '',
1725
1813
  isError: false,
1726
- error: undefined,
1727
- helperText: undefined,
1814
+ isSuccess: false,
1815
+ isDisabled: false,
1816
+ errorMessage: undefined,
1817
+ leftHelperText: undefined,
1818
+ rightHelperText: undefined,
1728
1819
  isRequired: false
1729
1820
  };
1730
1821
 
@@ -1740,15 +1831,21 @@ const InputField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
1740
1831
  isRequired,
1741
1832
  label,
1742
1833
  isError,
1743
- error,
1744
- helperText,
1834
+ isSuccess,
1835
+ isDisabled,
1836
+ errorMessage,
1837
+ leftHelperText,
1838
+ rightHelperText,
1745
1839
  ...inputProps
1746
1840
  } = props;
1747
1841
  return /*#__PURE__*/React__default.createElement(Field, {
1748
1842
  label: label,
1843
+ isSuccess: isSuccess,
1844
+ isDisabled: isDisabled,
1749
1845
  isError: isError,
1750
- error: error,
1751
- helperText: helperText,
1846
+ errorMessage: errorMessage,
1847
+ leftHelperText: leftHelperText,
1848
+ rightHelperText: rightHelperText,
1752
1849
  isRequired: isRequired
1753
1850
  }, /*#__PURE__*/React__default.createElement(react.InputGroup, {
1754
1851
  size: size
@@ -1765,21 +1862,36 @@ InputField.defaultProps = {
1765
1862
  elementRight: undefined
1766
1863
  };
1767
1864
 
1865
+ const Loader = /*#__PURE__*/react.forwardRef((props, ref) => {
1866
+ const styles = react.useStyleConfig('LoaderStyle', props);
1867
+ return /*#__PURE__*/React__default.createElement(react.Box, {
1868
+ ref: ref,
1869
+ __css: styles
1870
+ });
1871
+ });
1872
+
1768
1873
  const TextareaField = /*#__PURE__*/React__default.forwardRef((props, ref) => {
1769
1874
  const {
1770
1875
  value,
1876
+ isLoading,
1771
1877
  ...inputProps
1772
1878
  } = props;
1773
- return /*#__PURE__*/React__default.createElement(Field, Object.assign({}, inputProps), /*#__PURE__*/React__default.createElement(react.Textarea, Object.assign({
1879
+ return /*#__PURE__*/React__default.createElement(Field, Object.assign({}, inputProps), /*#__PURE__*/React__default.createElement(react.Box, {
1880
+ position: "relative"
1881
+ }, /*#__PURE__*/React__default.createElement(react.Textarea, Object.assign({
1774
1882
  ref: ref,
1775
1883
  value: value
1776
- }, inputProps)));
1884
+ }, inputProps)), isLoading && /*#__PURE__*/React__default.createElement(react.Box, {
1885
+ zIndex: 999,
1886
+ top: 2,
1887
+ right: 2,
1888
+ position: "absolute"
1889
+ }, /*#__PURE__*/React__default.createElement(Loader, {
1890
+ size: "sm"
1891
+ }))));
1777
1892
  });
1778
1893
  TextareaField.defaultProps = {
1779
- addOnLeft: undefined,
1780
- addOnRight: undefined,
1781
- elementLeft: undefined,
1782
- elementRight: undefined
1894
+ isLoading: undefined
1783
1895
  };
1784
1896
 
1785
1897
  const XMSLogo = () => /*#__PURE__*/React__default.createElement(react.Image, {
@@ -2794,80 +2906,106 @@ const Button = {
2794
2906
  };
2795
2907
 
2796
2908
  const {
2797
- definePartsStyle
2798
- } = /*#__PURE__*/styledSystem.createMultiStyleConfigHelpers(anatomy.checkboxAnatomy.keys);
2799
- const $size = /*#__PURE__*/styledSystem.cssVar('checkbox-size');
2800
- // You can also use the more specific type for
2801
- // a single part component: ComponentSingleStyleConfig
2802
- const Checkbox = {
2803
- // The styles all checkbox have in common
2804
- baseStyle: {
2805
- borderRadius: 'sm'
2909
+ definePartsStyle,
2910
+ defineMultiStyleConfig
2911
+ } = /*#__PURE__*/react.createMultiStyleConfigHelpers(anatomy.checkboxAnatomy.keys);
2912
+ const baseStyle = /*#__PURE__*/definePartsStyle({
2913
+ control: {
2914
+ borderRadius: '4px',
2915
+ width: '16px',
2916
+ height: '16px',
2917
+ border: '1px solid'
2806
2918
  },
2807
- // Two sizes: sm and md
2808
- sizes: {
2809
- sm: /*#__PURE__*/definePartsStyle({
2810
- control: {
2811
- [$size.variable]: 'sizes.4',
2812
- borderRadius: 'md'
2813
- },
2814
- label: {
2815
- fontSize: 'text.sm'
2816
- },
2817
- icon: {
2818
- fontSize: '3xs'
2819
- }
2820
- }),
2821
- md: /*#__PURE__*/definePartsStyle({
2822
- control: {
2823
- [$size.variable]: 'sizes.5',
2824
- borderRadius: 'md'
2825
- },
2826
- label: {
2827
- fontSize: 'text.md'
2828
- },
2829
- icon: {
2830
- fontSize: '2xs'
2919
+ icon: {
2920
+ color: 'neutral.50',
2921
+ width: '9px'
2922
+ },
2923
+ label: {
2924
+ fontWeight: '400',
2925
+ lineHeight: '18px',
2926
+ color: 'black.high',
2927
+ ml: '8px'
2928
+ },
2929
+ _disabled: {
2930
+ background: 'neutral.500',
2931
+ border: '1px solid',
2932
+ borderColor: 'neutral.500',
2933
+ cursor: 'not-allowed'
2934
+ }
2935
+ });
2936
+ const errors = /*#__PURE__*/definePartsStyle({
2937
+ control: {
2938
+ borderColor: 'danger.500',
2939
+ _checked: {
2940
+ borderColor: 'danger.500',
2941
+ backgroundColor: 'danger.500',
2942
+ _hover: {
2943
+ borderColor: 'danger.600',
2944
+ backgroundColor: 'danger.600'
2831
2945
  }
2832
- }),
2833
- lg: /*#__PURE__*/definePartsStyle({
2834
- control: {
2835
- [$size.variable]: 'sizes.6',
2836
- borderRadius: 'md'
2837
- },
2838
- label: {
2839
- fontSize: 'text.lg'
2946
+ },
2947
+ _indeterminate: {
2948
+ borderColor: 'danger.500',
2949
+ backgroundColor: 'danger.500'
2950
+ }
2951
+ },
2952
+ label: {
2953
+ fontSize: '12px'
2954
+ }
2955
+ });
2956
+ const unstyled = /*#__PURE__*/definePartsStyle({
2957
+ control: {
2958
+ borderColor: 'neutral.500',
2959
+ _checked: {
2960
+ borderColor: 'primary.500',
2961
+ backgroundColor: 'primary.500',
2962
+ _hover: {
2963
+ borderColor: 'primary.600',
2964
+ backgroundColor: 'primary.600'
2840
2965
  },
2841
- icon: {
2842
- fontSize: 'xs'
2966
+ _disabled: {
2967
+ backgroundColor: 'neutral.500',
2968
+ borderColor: 'neutral.500'
2843
2969
  }
2844
- })
2970
+ },
2971
+ _disabled: {
2972
+ backgroundColor: 'neutral.500'
2973
+ },
2974
+ _indeterminate: {
2975
+ borderColor: 'primary.500',
2976
+ backgroundColor: 'primary.500'
2977
+ }
2845
2978
  },
2846
- // Two variants: outline and solid
2847
- variants: {},
2848
- // The default size and variant values
2849
- defaultProps: {
2850
- size: 'sm',
2851
- variant: 'solid',
2852
- orientation: 'vertical',
2853
- colorScheme: 'primary'
2979
+ label: {
2980
+ fontSize: '12px'
2854
2981
  }
2982
+ });
2983
+ const variants = {
2984
+ errors,
2985
+ unstyled
2855
2986
  };
2987
+ const Checkbox = /*#__PURE__*/defineMultiStyleConfig({
2988
+ baseStyle,
2989
+ variants,
2990
+ defaultProps: {
2991
+ variant: 'errors'
2992
+ }
2993
+ });
2856
2994
 
2857
- const baseStyle = /*#__PURE__*/styledSystem.defineStyle({
2995
+ const baseStyle$1 = /*#__PURE__*/styledSystem.defineStyle({
2858
2996
  fontSize: 'field.sm',
2859
2997
  marginEnd: 1,
2860
2998
  mb: 1
2861
2999
  });
2862
3000
  const FormLabel = /*#__PURE__*/styledSystem.defineStyleConfig({
2863
- baseStyle
3001
+ baseStyle: baseStyle$1
2864
3002
  });
2865
3003
 
2866
3004
  const {
2867
3005
  definePartsStyle: definePartsStyle$1,
2868
- defineMultiStyleConfig
3006
+ defineMultiStyleConfig: defineMultiStyleConfig$1
2869
3007
  } = /*#__PURE__*/styledSystem.createMultiStyleConfigHelpers(anatomy.inputAnatomy.keys);
2870
- const baseStyle$1 = /*#__PURE__*/definePartsStyle$1({
3008
+ const baseStyle$2 = /*#__PURE__*/definePartsStyle$1({
2871
3009
  field: {
2872
3010
  width: '100%',
2873
3011
  minWidth: 0,
@@ -2973,7 +3111,7 @@ const outline = /*#__PURE__*/definePartsStyle$1(props => {
2973
3111
  }
2974
3112
  };
2975
3113
  });
2976
- const unstyled = /*#__PURE__*/definePartsStyle$1({
3114
+ const unstyled$1 = /*#__PURE__*/definePartsStyle$1({
2977
3115
  field: {
2978
3116
  bg: 'transparent',
2979
3117
  px: '0',
@@ -2985,28 +3123,130 @@ const unstyled = /*#__PURE__*/definePartsStyle$1({
2985
3123
  height: 'auto'
2986
3124
  }
2987
3125
  });
2988
- const variants = {
3126
+ const variants$1 = {
2989
3127
  outline,
2990
- unstyled
3128
+ unstyled: unstyled$1
2991
3129
  };
2992
- const Input = /*#__PURE__*/defineMultiStyleConfig({
2993
- baseStyle: baseStyle$1,
3130
+ const Input = /*#__PURE__*/defineMultiStyleConfig$1({
3131
+ baseStyle: baseStyle$2,
2994
3132
  sizes: sizes$1,
2995
- variants,
3133
+ variants: variants$1,
2996
3134
  defaultProps: {
2997
3135
  size: 'sm',
2998
3136
  variant: 'outline'
2999
3137
  }
3000
3138
  });
3001
3139
 
3140
+ const rotate = /*#__PURE__*/react$1.keyframes({
3141
+ '0%': {
3142
+ transform: 'rotate(0deg)'
3143
+ },
3144
+ '100%': {
3145
+ transform: 'rotate(360deg)'
3146
+ }
3147
+ });
3148
+ const LoaderStyle = /*#__PURE__*/styledSystem.defineStyleConfig({
3149
+ baseStyle: props => {
3150
+ const colors$1 = props.color === 'white' ? 'white' : colors.primary[600];
3151
+ return {
3152
+ borderRadius: '50%',
3153
+ display: 'flex',
3154
+ justifyContent: 'center',
3155
+ alignItems: 'center',
3156
+ animation: `${rotate} 1s linear infinite`,
3157
+ background: `conic-gradient(from 180deg at 50% 50%, ${colors$1} 0deg, rgba(217, 217, 217, 0) 360deg);`,
3158
+ ':before': {
3159
+ content: `''`,
3160
+ display: 'block',
3161
+ borderRadius: '50%',
3162
+ width: '6px',
3163
+ height: '6px',
3164
+ position: 'absolute',
3165
+ bottom: 0,
3166
+ background: colors$1
3167
+ }
3168
+ };
3169
+ },
3170
+ sizes: {
3171
+ xs: {
3172
+ width: '12px',
3173
+ height: '12px',
3174
+ WebkitMask: 'radial-gradient(farthest-side,#0000 calc(100% - 1.4px),#000 0);',
3175
+ ':before': {
3176
+ width: '1.4px',
3177
+ height: '1.4px'
3178
+ }
3179
+ },
3180
+ sm: {
3181
+ width: '16px',
3182
+ height: '16px',
3183
+ WebkitMask: 'radial-gradient(farthest-side,#0000 calc(100% - 1.87px),#000 0);',
3184
+ ':before': {
3185
+ width: '1.87px',
3186
+ height: '1.87px'
3187
+ }
3188
+ },
3189
+ md: {
3190
+ width: '24px',
3191
+ height: '24px',
3192
+ WebkitMask: 'radial-gradient(farthest-side,#0000 calc(100% - 2.8px),#000 0);',
3193
+ ':before': {
3194
+ width: '2.8px',
3195
+ height: '2.8px'
3196
+ }
3197
+ },
3198
+ lg: {
3199
+ width: '50px',
3200
+ height: '50px',
3201
+ WebkitMask: 'radial-gradient(farthest-side,#0000 calc(100% - 5.83px),#000 0);',
3202
+ ':before': {
3203
+ width: '5.83px',
3204
+ height: '5.83px'
3205
+ }
3206
+ },
3207
+ xl: {
3208
+ width: '75px',
3209
+ height: '75px',
3210
+ WebkitMask: 'radial-gradient(farthest-side,#0000 calc(100% - 8.75px),#000 0);',
3211
+ ':before': {
3212
+ width: '8.75px',
3213
+ height: '8.75px'
3214
+ }
3215
+ },
3216
+ xxl: {
3217
+ width: '100px',
3218
+ height: '100px',
3219
+ WebkitMask: `radial-gradient(farthest-side,#0000 calc(100% - 11.67px),#000 0);`,
3220
+ ':before': {
3221
+ width: '11.67px',
3222
+ height: '11.67px'
3223
+ }
3224
+ }
3225
+ },
3226
+ defaultProps: {
3227
+ size: 'lg'
3228
+ }
3229
+ });
3230
+
3002
3231
  const {
3003
3232
  definePartsStyle: definePartsStyle$2
3233
+ } = /*#__PURE__*/styledSystem.createMultiStyleConfigHelpers(anatomy.popoverAnatomy.keys);
3234
+ const Popover = {
3235
+ baseStyle: props => definePartsStyle$2({
3236
+ popper: {
3237
+ background: themeTools.mode('white', 'inherit')(props)
3238
+ }
3239
+ })
3240
+ };
3241
+
3242
+ const {
3243
+ definePartsStyle: definePartsStyle$3
3004
3244
  } = /*#__PURE__*/styledSystem.createMultiStyleConfigHelpers(anatomy.radioAnatomy.keys);
3005
3245
  // You can also use the more specific type for
3006
3246
  // a single part component: ComponentSingleStyleConfig
3007
3247
  const Radio = {
3008
3248
  // The styles all checkbox have in common
3009
- baseStyle: /*#__PURE__*/definePartsStyle$2({
3249
+ baseStyle: /*#__PURE__*/definePartsStyle$3({
3010
3250
  control: {
3011
3251
  _checked: {
3012
3252
  borderColor: 'primary.500',
@@ -3025,7 +3265,7 @@ const Radio = {
3025
3265
  }),
3026
3266
  // Two sizes: sm and md
3027
3267
  sizes: {
3028
- sm: /*#__PURE__*/definePartsStyle$2({
3268
+ sm: /*#__PURE__*/definePartsStyle$3({
3029
3269
  control: {
3030
3270
  w: '3',
3031
3271
  h: '3'
@@ -3034,7 +3274,7 @@ const Radio = {
3034
3274
  fontSize: 'text.sm'
3035
3275
  }
3036
3276
  }),
3037
- md: /*#__PURE__*/definePartsStyle$2({
3277
+ md: /*#__PURE__*/definePartsStyle$3({
3038
3278
  control: {
3039
3279
  w: '4',
3040
3280
  h: '4'
@@ -3043,7 +3283,7 @@ const Radio = {
3043
3283
  fontSize: 'text.md'
3044
3284
  }
3045
3285
  }),
3046
- lg: /*#__PURE__*/definePartsStyle$2({
3286
+ lg: /*#__PURE__*/definePartsStyle$3({
3047
3287
  control: {
3048
3288
  w: '5',
3049
3289
  h: '5'
@@ -3065,10 +3305,10 @@ const Radio = {
3065
3305
  };
3066
3306
 
3067
3307
  const {
3068
- definePartsStyle: definePartsStyle$3,
3069
- defineMultiStyleConfig: defineMultiStyleConfig$1
3308
+ definePartsStyle: definePartsStyle$4,
3309
+ defineMultiStyleConfig: defineMultiStyleConfig$2
3070
3310
  } = /*#__PURE__*/react.createMultiStyleConfigHelpers(anatomy.switchAnatomy.keys);
3071
- const baseStyle$2 = /*#__PURE__*/definePartsStyle$3({
3311
+ const baseStyle$3 = /*#__PURE__*/definePartsStyle$4({
3072
3312
  // define the part you're going to style
3073
3313
  container: {
3074
3314
  // ...
@@ -3084,45 +3324,88 @@ const baseStyle$2 = /*#__PURE__*/definePartsStyle$3({
3084
3324
  }
3085
3325
  }
3086
3326
  });
3087
- const Switch = /*#__PURE__*/defineMultiStyleConfig$1({
3088
- baseStyle: baseStyle$2
3327
+ const Switch = /*#__PURE__*/defineMultiStyleConfig$2({
3328
+ baseStyle: baseStyle$3
3089
3329
  });
3090
3330
 
3091
- const {
3092
- definePartsStyle: definePartsStyle$4
3093
- } = /*#__PURE__*/styledSystem.createMultiStyleConfigHelpers(anatomy.popoverAnatomy.keys);
3094
- const Popover = {
3095
- baseStyle: props => definePartsStyle$4({
3096
- popper: {
3097
- background: themeTools.mode('white', 'inherit')(props)
3098
- }
3099
- })
3331
+ const getProps = props => {
3332
+ const {
3333
+ isError,
3334
+ isSuccess,
3335
+ isDisabled
3336
+ } = props;
3337
+ let borderColor = 'neutral.400';
3338
+ let focusBorderColor = 'primary.500';
3339
+ if (isError) {
3340
+ borderColor = 'danger.500';
3341
+ focusBorderColor = 'danger.500';
3342
+ } else if (isSuccess) {
3343
+ borderColor = 'success.500';
3344
+ focusBorderColor = 'success.500';
3345
+ } else if (isDisabled && !isError && !isSuccess) {
3346
+ borderColor = 'neutral.400';
3347
+ focusBorderColor = 'danger.500';
3348
+ }
3349
+ return {
3350
+ focusBorderColor,
3351
+ borderColor
3352
+ };
3100
3353
  };
3101
-
3102
- const Textarea = {
3103
- baseStyle: {
3354
+ const outline$1 = /*#__PURE__*/react.defineStyle(props => {
3355
+ const {
3356
+ focusBorderColor,
3357
+ borderColor
3358
+ } = getProps(props);
3359
+ return {
3360
+ background: 'white.high',
3361
+ color: 'black.high',
3362
+ borderColor,
3363
+ fontSize: 'text.sm',
3364
+ padding: 2,
3365
+ borderRadius: 'md',
3366
+ borderWidth: '1px',
3367
+ outline: 'none',
3368
+ _disabled: {
3369
+ opacity: 1,
3370
+ color: 'black.low',
3371
+ background: 'neutral.300'
3372
+ },
3373
+ _placeholder: {
3374
+ color: 'black.low'
3375
+ },
3104
3376
  _hover: {
3105
- borderColor: 'primary.500',
3106
- boxShadow: 'none',
3107
- outline: 'none'
3377
+ borderColor
3108
3378
  },
3109
3379
  _focus: {
3110
- borderColor: 'primary.500',
3111
- boxShadow: 'none',
3112
- outline: 'none'
3380
+ outline: 'none',
3381
+ borderColor: focusBorderColor,
3382
+ boxShadow: 'none'
3113
3383
  },
3114
3384
  _focusVisible: {
3115
- borderColor: 'primary.500',
3116
- boxShadow: 'none',
3117
- outline: 'none'
3385
+ outline: 'none',
3386
+ borderColor: focusBorderColor,
3387
+ boxShadow: 'none'
3118
3388
  },
3119
3389
  _focusWithin: {
3120
- borderColor: 'primary.500',
3121
- boxShadow: 'none',
3122
- outline: 'none'
3390
+ outline: 'none',
3391
+ borderColor: focusBorderColor,
3392
+ boxShadow: 'none'
3393
+ },
3394
+ _invalid: {
3395
+ outline: 'none',
3396
+ borderColor: 'danger.500',
3397
+ boxShadow: 'none'
3123
3398
  }
3399
+ };
3400
+ });
3401
+ const Textarea = /*#__PURE__*/react.defineStyleConfig({
3402
+ variants: {
3403
+ outline: outline$1
3404
+ },
3405
+ defaultProps: {
3406
+ variant: 'outline'
3124
3407
  }
3125
- };
3408
+ });
3126
3409
 
3127
3410
 
3128
3411
 
@@ -3132,9 +3415,10 @@ var components = {
3132
3415
  Checkbox: Checkbox,
3133
3416
  FormLabel: FormLabel,
3134
3417
  Input: Input,
3418
+ LoaderStyle: LoaderStyle,
3419
+ Popover: Popover,
3135
3420
  Radio: Radio,
3136
3421
  Switch: Switch,
3137
- Popover: Popover,
3138
3422
  Textarea: Textarea
3139
3423
  };
3140
3424
 
@@ -3153,7 +3437,8 @@ const theme = /*#__PURE__*/react.extendTheme({
3153
3437
  background: 'neutral.400'
3154
3438
  },
3155
3439
  body: {
3156
- fontSize: 'text.sm'
3440
+ fontSize: 'text.sm',
3441
+ color: 'black.high'
3157
3442
  }
3158
3443
  }
3159
3444
  },
@@ -3430,12 +3715,14 @@ Object.defineProperty(exports, 'useTabsStyles', {
3430
3715
  }
3431
3716
  });
3432
3717
  exports.BreadCrumb = BreadCrumb;
3718
+ exports.Checkbox = CheckboxComponent;
3433
3719
  exports.DataTable = DataTable;
3434
3720
  exports.DatePickerMonth = DatePickerMonth;
3435
3721
  exports.Datepicker = Datepicker;
3436
3722
  exports.Field = Field;
3437
3723
  exports.Header = Header;
3438
3724
  exports.InputField = InputField;
3725
+ exports.Loader = Loader;
3439
3726
  exports.MainMenu = Navigation;
3440
3727
  exports.ModalBody = ModalBody;
3441
3728
  exports.ModalCloseButton = ModalCloseButton;