@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.
- package/README.md +1 -1
- package/dist/components/checkbox/__stories__/checkbox.stories.d.ts +12 -0
- package/dist/components/checkbox/components/checkbox.d.ts +16 -0
- package/dist/components/checkbox/index.d.ts +2 -0
- package/dist/components/field/components/field.d.ts +5 -2
- package/dist/components/field/index.d.ts +0 -2
- package/dist/components/form/__stories__/textarea.stories.d.ts +10 -0
- package/dist/components/{field/components/textarea-field.d.ts → form/components/textarea.d.ts} +2 -6
- package/dist/components/form/index.d.ts +2 -0
- package/dist/components/index.d.ts +3 -0
- package/dist/components/{base/stories/checkbox.stories.d.ts → loader/__stories__/loader.stories.d.ts} +3 -2
- package/dist/components/loader/components/loader.d.ts +9 -0
- package/dist/components/loader/index.d.ts +2 -0
- package/dist/config/{foundations.stories.d.ts → __stories__/foundations.stories.d.ts} +1 -0
- package/dist/config/theme/components/checkbox.d.ts +86 -2
- package/dist/config/theme/components/index.d.ts +2 -1
- package/dist/config/theme/components/loader.d.ts +85 -0
- package/dist/config/theme/components/textarea.d.ts +54 -2
- package/dist/config/theme/foundations/index.d.ts +3 -2
- package/dist/config/theme/foundations/shadows.d.ts +15 -0
- package/dist/config/theme/foundations/typography.d.ts +25 -7
- package/dist/internal-ui.cjs.development.js +451 -164
- package/dist/internal-ui.cjs.development.js.map +1 -1
- package/dist/internal-ui.cjs.production.min.js +10 -10
- package/dist/internal-ui.cjs.production.min.js.map +1 -1
- package/dist/internal-ui.esm.js +464 -179
- package/dist/internal-ui.esm.js.map +1 -1
- package/dist/provider/{provider.d.ts → components/provider.d.ts} +2 -1
- package/dist/provider/index.d.ts +2 -2
- package/package.json +2 -2
- /package/dist/components/base/{stories → __stories__}/button.stories.d.ts +0 -0
- /package/dist/components/base/{stories → __stories__}/input.stories.d.ts +0 -0
- /package/dist/components/base/{stories → __stories__}/radio.stories.d.ts +0 -0
- /package/dist/components/base/{stories → __stories__}/switch.stories.d.ts +0 -0
- /package/dist/components/breadcrumb/{components/BreadCrumb.stories.d.ts → __stories__/breadcrumb.stories.d.ts} +0 -0
- /package/dist/components/data-table/{stories/data-table.stories.d.ts → __stories__/datatable.stories.d.ts} +0 -0
- /package/dist/components/datepicker/{components → __stories__}/datepicker.stories.d.ts +0 -0
- /package/dist/components/header/{stories → __stories__}/header.stories.d.ts +0 -0
- /package/dist/components/modal/{stories → __stories__}/modal.stories.d.ts +0 -0
- /package/dist/components/navigation/{stories → __stories__}/navigation.stories.d.ts +0 -0
- /package/dist/components/pagination/{stories → __stories__}/pagination.stories.d.ts +0 -0
- /package/dist/components/select/{stories → __stories__}/select.stories.d.ts +0 -0
- /package/dist/components/tabs/{stories → __stories__}/tabs.stories.d.ts +0 -0
- /package/dist/components/uploader/{stories → __stories__}/uploader.stories.d.ts +0 -0
- /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': '#
|
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
|
1440
|
-
...react.theme.
|
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
|
1450
|
-
...react.theme.
|
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: '
|
1497
|
-
2: '
|
1498
|
-
3: '1.
|
1499
|
-
4: '1.
|
1500
|
-
5: '
|
1501
|
-
6: '
|
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:
|
1528
|
-
lineHeight:
|
1529
|
-
letterSpacing:
|
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:
|
1534
|
-
lineHeight:
|
1535
|
-
letterSpacing:
|
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:
|
1540
|
-
lineHeight:
|
1541
|
-
letterSpacing:
|
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:
|
1546
|
-
lineHeight:
|
1547
|
-
letterSpacing:
|
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:
|
1552
|
-
lineHeight:
|
1553
|
-
letterSpacing:
|
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:
|
1558
|
-
lineHeight:
|
1559
|
-
letterSpacing:
|
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:
|
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:
|
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:
|
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:
|
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:
|
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:
|
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:
|
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:
|
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:
|
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:
|
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:
|
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
|
-
|
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
|
-
|
1700
|
-
|
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
|
-
|
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: "
|
1790
|
+
color: "danger.500",
|
1712
1791
|
ml: 0,
|
1713
1792
|
mr: 1
|
1714
|
-
}, "*"), label) : label), children,
|
1715
|
-
|
1716
|
-
|
1717
|
-
|
1718
|
-
|
1719
|
-
|
1720
|
-
|
1721
|
-
|
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
|
-
|
1727
|
-
|
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
|
-
|
1744
|
-
|
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
|
-
|
1751
|
-
|
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.
|
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
|
-
|
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
|
-
|
2799
|
-
|
2800
|
-
|
2801
|
-
|
2802
|
-
|
2803
|
-
|
2804
|
-
|
2805
|
-
|
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
|
-
|
2808
|
-
|
2809
|
-
|
2810
|
-
|
2811
|
-
|
2812
|
-
|
2813
|
-
|
2814
|
-
|
2815
|
-
|
2816
|
-
|
2817
|
-
|
2818
|
-
|
2819
|
-
|
2820
|
-
|
2821
|
-
|
2822
|
-
|
2823
|
-
|
2824
|
-
|
2825
|
-
|
2826
|
-
|
2827
|
-
|
2828
|
-
|
2829
|
-
|
2830
|
-
|
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
|
-
|
2834
|
-
|
2835
|
-
|
2836
|
-
|
2837
|
-
|
2838
|
-
|
2839
|
-
|
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
|
-
|
2842
|
-
|
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
|
-
|
2847
|
-
|
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$
|
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$
|
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$
|
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$
|
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$
|
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$
|
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$
|
3069
|
-
defineMultiStyleConfig: defineMultiStyleConfig$
|
3308
|
+
definePartsStyle: definePartsStyle$4,
|
3309
|
+
defineMultiStyleConfig: defineMultiStyleConfig$2
|
3070
3310
|
} = /*#__PURE__*/react.createMultiStyleConfigHelpers(anatomy.switchAnatomy.keys);
|
3071
|
-
const baseStyle$
|
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$
|
3088
|
-
baseStyle: baseStyle$
|
3327
|
+
const Switch = /*#__PURE__*/defineMultiStyleConfig$2({
|
3328
|
+
baseStyle: baseStyle$3
|
3089
3329
|
});
|
3090
3330
|
|
3091
|
-
const {
|
3092
|
-
|
3093
|
-
|
3094
|
-
|
3095
|
-
|
3096
|
-
|
3097
|
-
|
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
|
3103
|
-
|
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
|
3106
|
-
boxShadow: 'none',
|
3107
|
-
outline: 'none'
|
3377
|
+
borderColor
|
3108
3378
|
},
|
3109
3379
|
_focus: {
|
3110
|
-
|
3111
|
-
|
3112
|
-
|
3380
|
+
outline: 'none',
|
3381
|
+
borderColor: focusBorderColor,
|
3382
|
+
boxShadow: 'none'
|
3113
3383
|
},
|
3114
3384
|
_focusVisible: {
|
3115
|
-
|
3116
|
-
|
3117
|
-
|
3385
|
+
outline: 'none',
|
3386
|
+
borderColor: focusBorderColor,
|
3387
|
+
boxShadow: 'none'
|
3118
3388
|
},
|
3119
3389
|
_focusWithin: {
|
3120
|
-
|
3121
|
-
|
3122
|
-
|
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;
|