@lunit/oui 1.0.0-alpha.5 → 1.0.0-alpha.7

package/dist/assets/ic-bell-noti-outlined-20px.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SvgIcBellNotioutlined20Px = (props) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 20 20", ...props, children: [_jsx("path", { fillRule: "evenodd", d: "M10 1.5c.557 0 1.072.049 1.547.142a5.021 5.021 0 0 0-1.128.869A8.062 8.062 0 0 0 10 2.5c-1.258 0-2.214.278-2.944.717-.731.439-1.265 1.056-1.653 1.778-.785 1.461-.955 3.326-.914 4.872.044 1.62-.343 3.313-1.36 4.633h13.742c-.831-1.078-1.241-2.406-1.34-3.739.344-.11.672-.257.98-.436.039 1.495.502 2.935 1.493 3.96a.717.717 0 0 1-.515 1.215H12.5a2.5 2.5 0 0 1-5 0H2.511a.717.717 0 0 1-.515-1.215c1.086-1.123 1.538-2.745 1.494-4.39-.044-1.606.124-3.682 1.032-5.373.458-.854 1.11-1.616 2.019-2.162.91-.547 2.05-.86 3.459-.86Zm-1.5 14a1.5 1.5 0 0 0 3 0h-3Z", clipRule: "evenodd" }), _jsx("path", { fill: "#E63B28", d: "M18 6a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z" })] }));
+export default SvgIcBellNotioutlined20Px;
+//# sourceMappingURL=ic-bell-noti-outlined-20px.js.map

package/dist/assets/ic-close-large-outlined-20px.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const SvgIcCloseLargeoutlined20Px = (props) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 20 20", ...props, children: _jsx("path", { fillRule: "evenodd", d: "M4.854 15.854a.5.5 0 0 1-.708-.708L9.293 10 4.146 4.854a.5.5 0 1 1 .708-.708L10 9.293l5.146-5.147a.5.5 0 0 1 .708.708L10.707 10l5.147 5.146a.5.5 0 0 1-.708.708L10 10.707l-5.146 5.147Z", clipRule: "evenodd" }) }));
+export default SvgIcCloseLargeoutlined20Px;
+//# sourceMappingURL=ic-close-large-outlined-20px.js.map

package/dist/assets/ic-close-small-outlined-20px.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const SvgIcCloseSmalloutlined20Px = (props) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 20 20", ...props, children: _jsx("path", { fillRule: "evenodd", d: "M10 9.293 5.854 5.146a.5.5 0 1 0-.708.708L9.293 10l-4.147 4.146a.5.5 0 1 0 .708.708L10 10.707l4.146 4.147a.5.5 0 0 0 .708-.708L10.707 10l4.147-4.146a.5.5 0 0 0-.708-.708L10 9.293Z", clipRule: "evenodd" }) }));
+export default SvgIcCloseSmalloutlined20Px;
+//# sourceMappingURL=ic-close-small-outlined-20px.js.map

package/dist/assets/ic-download-pdf-outlined-20px.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SvgIcDownloadPdfoutlined20Px = (props) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 20 20", ...props, children: [_jsx("path", { fillRule: "evenodd", d: "M3.051 2.343V8h1.014V6.086h1.088c1.307 0 2.009-.785 2.009-1.87 0-1.08-.694-1.873-1.995-1.873H3.051Zm1.014 2.906V3.193h.947c.768 0 1.11.42 1.11 1.022 0 .603-.342 1.034-1.104 1.034h-.953ZM9.939 2.343h-1.95V8h1.914c1.724 0 2.74-1.066 2.74-2.834 0-1.763-1.016-2.823-2.704-2.823Zm-.937 4.776V3.224h.882c1.152 0 1.751.643 1.751 1.942 0 1.3-.6 1.953-1.782 1.953h-.85Z", clipRule: "evenodd" }), _jsx("path", { d: "M14.565 5.594V8H13.55V2.343h3.619v.856h-2.605V4.74h2.356v.854h-2.356ZM13.124 13.67l-2.624 3V11a.5.5 0 1 0-1 0v5.67l-2.624-3a.5.5 0 1 0-.752.66l3.5 4a.5.5 0 0 0 .752 0l3.5-4a.5.5 0 0 0-.752-.66Z" })] }));
+export default SvgIcDownloadPdfoutlined20Px;
+//# sourceMappingURL=ic-download-pdf-outlined-20px.js.map

package/dist/assets/ic-ellipse-outlined-20px.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const SvgIcEllipseoutlined20Px = (props) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 20 20", ...props, children: _jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm0 1a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z", clipRule: "evenodd" }) }));
+export default SvgIcEllipseoutlined20Px;
+//# sourceMappingURL=ic-ellipse-outlined-20px.js.map

package/dist/assets/ic-filter-noti-outlined-20px.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SvgIcFilterNotioutlined20Px = (props) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 20 20", ...props, children: [_jsx("path", { fillRule: "evenodd", d: "M10.1 5H6.937a2 2 0 0 0-3.874 0H2a.5.5 0 0 0 0 1h1.063a2 2 0 0 0 3.874 0H10c0-.342.034-.677.1-1Zm2.55 4.238a2 2 0 0 1 3.787.262h.501a3.973 3.973 0 0 1-1.438.47 1 1 0 0 0-1.962-.245 3.993 3.993 0 0 1-.888-.487Zm-1.22.262H2a.5.5 0 0 0 0 1h10.563a2 2 0 0 0 3.76.323 5.005 5.005 0 0 1-1.669.165 1.002 1.002 0 0 1-.544-.067A4.989 4.989 0 0 1 11.43 9.5Zm5.752 1H18a.5.5 0 0 0 .384-.82 5.01 5.01 0 0 1-1.202.82ZM11 6c0-.345.044-.68.126-1H18a.5.5 0 0 1 0 1h-7Zm-7-.5a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm6.437 9.5a2 2 0 0 1-3.874 0H2a.5.5 0 0 1 0-1h4.563a2 2 0 0 1 3.874 0H18a.5.5 0 0 1 0 1h-7.563ZM7.5 14.5a1 1 0 1 1 2 0 1 1 0 0 1-2 0Z", clipRule: "evenodd" }), _jsx("path", { fill: "#E63B28", d: "M19 6a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z" })] }));
+export default SvgIcFilterNotioutlined20Px;
+//# sourceMappingURL=ic-filter-noti-outlined-20px.js.map

package/dist/assets/ic-hide-large-outlined-20px.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const SvgIcHideLargeoutlined20Px = (props) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 20 20", ...props, children: _jsx("path", { d: "M3.975 6.344a.5.5 0 0 0-.95.31L3.5 6.5l-.475.155v.003l.002.005.006.016.019.052c.016.043.04.103.071.178.065.149.163.356.303.599.222.385.55.864 1.017 1.342l-1.296 1.297a.5.5 0 1 0 .707.707l1.34-1.34c.458.348 1.003.669 1.646.923l-.8 1.866a.5.5 0 1 0 .92.394l.837-1.954a8.805 8.805 0 0 0 1.703.245V13.5a.5.5 0 1 0 1 0v-2.512a8.804 8.804 0 0 0 1.703-.245l.838 1.954a.5.5 0 1 0 .919-.394l-.8-1.866a6.913 6.913 0 0 0 1.646-.923l1.39 1.39a.42.42 0 0 0 .632-.026.5.5 0 0 0 .026-.731L15.557 8.85a6.77 6.77 0 0 0 1.018-1.342 5.823 5.823 0 0 0 .374-.777l.018-.052.006-.016.002-.005v-.003L16.5 6.5l.476.155a.5.5 0 0 0-.951-.31l-.002.005a4.82 4.82 0 0 1-.315.659c-.236.41-.619.95-1.197 1.456a5.943 5.943 0 0 1-2.17 1.201 7.826 7.826 0 0 1-2.34.334 7.825 7.825 0 0 1-2.342-.334 5.943 5.943 0 0 1-2.17-1.201 5.783 5.783 0 0 1-1.197-1.456 4.814 4.814 0 0 1-.304-.628 1.486 1.486 0 0 1-.01-.031l-.003-.006Z" }) }));
+export default SvgIcHideLargeoutlined20Px;
+//# sourceMappingURL=ic-hide-large-outlined-20px.js.map

package/dist/assets/ic-hide-small-outlined-20px.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const SvgIcHideSmalloutlined20Px = (props) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 20 20", ...props, children: _jsx("path", { fillRule: "evenodd", d: "M14.926 7.644a.494.494 0 1 0-.948-.288v.002a3.655 3.655 0 0 1-.208.477c-.159.3-.412.692-.795 1.06-.354.34-.82.659-1.428.867a4.752 4.752 0 0 1-1.547.24 4.752 4.752 0 0 1-1.547-.24 3.831 3.831 0 0 1-1.428-.867 4.161 4.161 0 0 1-.96-1.42 2.268 2.268 0 0 1-.036-.096l-.007-.021v-.003a.494.494 0 0 0-.616-.334.506.506 0 0 0-.331.625v.001l.002.005.003.012a2.073 2.073 0 0 0 .065.18 5.216 5.216 0 0 0 .577 1.054l-1.057.993a.548.548 0 0 0-.048.73c.172.216.474.24.673.052l1.087-1.021c.273.257.597.503.98.714l-.663 1.257a.542.542 0 0 0 .177.706c.23.142.52.055.652-.193l.731-1.387c.378.119.794.201 1.251.236V12.5c0 .277.222.501.495.501a.498.498 0 0 0 .495-.5v-1.515a5.579 5.579 0 0 0 1.212-.224l.725 1.375c.13.248.422.335.651.193a.541.541 0 0 0 .178-.706l-.653-1.238a4.811 4.811 0 0 0 1.015-.733l1.087 1.02c.2.188.5.165.673-.051a.548.548 0 0 0-.048-.73l-1.057-.993a5.198 5.198 0 0 0 .577-1.054 3.23 3.23 0 0 0 .064-.18l.005-.012v-.005l.001-.001v-.002Z", clipRule: "evenodd" }) }));
+export default SvgIcHideSmalloutlined20Px;
+//# sourceMappingURL=ic-hide-small-outlined-20px.js.map

package/dist/assets/ic-information-large-outlined-20px.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const SvgIcInformationLargeoutlined20Px = (props) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 20 20", ...props, children: _jsx("path", { fillRule: "evenodd", d: "M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-9 8a9 9 0 1 1 18 0 9 9 0 0 1-18 0Zm8.25 4.247c0 .38.283.694.65.743a.503.503 0 0 0 .2 0 .75.75 0 0 0 .65-.743v-5.5a.75.75 0 0 0-1.5 0v5.5ZM10 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z", clipRule: "evenodd" }) }));
+export default SvgIcInformationLargeoutlined20Px;
+//# sourceMappingURL=ic-information-large-outlined-20px.js.map

package/dist/assets/ic-information-small-outlined-20px.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const SvgIcInformationSmalloutlined20Px = (props) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 20 20", ...props, children: _jsx("path", { fillRule: "evenodd", d: "M4 10a6 6 0 1 1 12 0 6 6 0 0 1-12 0Zm6-7a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm.09 6.008a.501.501 0 0 0-.18 0 .75.75 0 0 0-.66.745v3.5a.75.75 0 0 0 1.5 0v-3.5a.75.75 0 0 0-.66-.745ZM10 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z", clipRule: "evenodd" }) }));
+export default SvgIcInformationSmalloutlined20Px;
+//# sourceMappingURL=ic-information-small-outlined-20px.js.map

package/dist/assets/ic-manufacturer-outlined-20px.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const SvgIcManufactureroutlined20Px = (props) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 24, fill: "none", ...props, children: _jsx("path", { fill: "#000", fillRule: "evenodd", d: "M19.48.004v23H0v-8.543l2.977-6.178 2.253 4.682 2.254-4.682 2.256 4.682 2.254-4.682 2.256 4.682V.005h5.23Z", clipRule: "evenodd" }) }));
+export default SvgIcManufactureroutlined20Px;
+//# sourceMappingURL=ic-manufacturer-outlined-20px.js.map

package/dist/assets/ic-rectangle-outlined-20px.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const SvgIcRectangleoutlined20Px = (props) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 20 20", ...props, children: _jsx("path", { fillRule: "evenodd", d: "M1 2a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2Zm1 0v16h16V2H2Z", clipRule: "evenodd" }) }));
+export default SvgIcRectangleoutlined20Px;
+//# sourceMappingURL=ic-rectangle-outlined-20px.js.map

package/dist/assets/ic-refresh-left-outlined-20px.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const SvgIcRefreshLeftoutlined20Px = (props) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 20 20", ...props, children: _jsx("path", { fillRule: "evenodd", d: "M3.673 7a7 7 0 1 1-.275 5.333.5.5 0 0 0-.943.334A8 8 0 1 0 3 6.125V3.5a.5.5 0 0 0-1 0v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 0-1H3.673Z", clipRule: "evenodd" }) }));
+export default SvgIcRefreshLeftoutlined20Px;
+//# sourceMappingURL=ic-refresh-left-outlined-20px.js.map

package/dist/assets/ic-refresh-right-outlined-20px.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const SvgIcRefreshRightoutlined20Px = (props) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 20 20", ...props, children: _jsx("path", { d: "M14.436 3.343a8 8 0 1 0 3.294 8.718.5.5 0 0 0-.966-.258 7 7 0 1 1-.273-4.424h-2.957a.5.5 0 0 0 0 1h4.243a.5.5 0 0 0 .5-.5V3.636a.5.5 0 0 0-1 0v3.04a8 8 0 0 0-2.84-3.333Z" }) }));
+export default SvgIcRefreshRightoutlined20Px;
+//# sourceMappingURL=ic-refresh-right-outlined-20px.js.map

package/dist/assets/ic-show-large-outlined-20px.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const SvgIcShowLargeoutlined20Px = (props) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 20 20", ...props, children: _jsx("path", { fillRule: "evenodd", d: "M3.025 10.228C3.445 9.238 5.178 6 9.977 6c4.789 0 6.559 3.222 6.997 4.224a.23.23 0 0 1-.004.204C16.523 11.285 14.748 14 9.977 14c-4.782 0-6.519-2.728-6.948-3.575a.227.227 0 0 1-.004-.197ZM9.977 5C4.59 5 2.59 8.685 2.1 9.839c-.14.33-.135.706.032 1.036C2.672 11.942 4.7 15 9.977 15c5.262 0 7.325-3.039 7.885-4.112.175-.337.18-.724.033-1.063C17.386 8.662 15.349 5 9.977 5Zm-2.009 5c0-1.105.9-2 2.01-2 1.109 0 2.008.895 2.008 2s-.899 2-2.009 2c-1.11 0-2.009-.895-2.009-2Zm2.01-3a3.007 3.007 0 0 0-3.014 3c0 1.657 1.349 3 3.013 3a3.007 3.007 0 0 0 3.014-3c0-1.657-1.35-3-3.014-3Z", clipRule: "evenodd" }) }));
+export default SvgIcShowLargeoutlined20Px;
+//# sourceMappingURL=ic-show-large-outlined-20px.js.map

package/dist/assets/ic-show-small-outlined-20px.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const SvgIcShowSmalloutlined20Px = (props) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 20 20", ...props, children: _jsx("path", { fillRule: "evenodd", d: "M10 7c3.305 0 4.591 2.345 4.975 3.276C14.593 11.042 13.312 13 10 13c-3.312 0-4.593-1.958-4.975-2.724C5.41 9.346 6.695 7 10 7Zm5.95 3.02a.722.722 0 0 1-.016.567C15.538 11.447 14.024 14 10 14c-4.023 0-5.538-2.552-5.934-3.413a.722.722 0 0 1-.016-.566C4.422 9.058 5.923 6 10 6s5.578 3.058 5.95 4.02ZM11 10a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm1 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z", clipRule: "evenodd" }) }));
+export default SvgIcShowSmalloutlined20Px;
+//# sourceMappingURL=ic-show-small-outlined-20px.js.map

package/dist/assets/index.js

@@ -0,0 +1,17 @@
+export { default as IcBellNotiOutlined20Px } from './ic-bell-noti-outlined-20px';
+export { default as IcCloseLargeOutlined20Px } from './ic-close-large-outlined-20px';
+export { default as IcCloseSmallOutlined20Px } from './ic-close-small-outlined-20px';
+export { default as IcDownloadPdfOutlined20Px } from './ic-download-pdf-outlined-20px';
+export { default as IcEllipseOutlined20Px } from './ic-ellipse-outlined-20px';
+export { default as IcFilterNotiOutlined20Px } from './ic-filter-noti-outlined-20px';
+export { default as IcHideLargeOutlined20Px } from './ic-hide-large-outlined-20px';
+export { default as IcHideSmallOutlined20Px } from './ic-hide-small-outlined-20px';
+export { default as IcInformationLargeOutlined20Px } from './ic-information-large-outlined-20px';
+export { default as IcInformationSmallOutlined20Px } from './ic-information-small-outlined-20px';
+export { default as IcManufacturerOutlined20Px } from './ic-manufacturer-outlined-20px';
+export { default as IcRectangleOutlined20Px } from './ic-rectangle-outlined-20px';
+export { default as IcRefreshLeftOutlined20Px } from './ic-refresh-left-outlined-20px';
+export { default as IcRefreshRightOutlined20Px } from './ic-refresh-right-outlined-20px';
+export { default as IcShowLargeOutlined20Px } from './ic-show-large-outlined-20px';
+export { default as IcShowSmallOutlined20Px } from './ic-show-small-outlined-20px';
+//# sourceMappingURL=index.js.map

package/dist/components/Alert/Alert.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Close } from '../Icons';
+import BaseAlert from './Alert.styled';
+import { getAccentColor, getIcons } from './Alert.utils';
+import { Button } from '../Button';
+const Alert = forwardRef(({ title, severity, children, onClose, ...rest }, ref) => {
+    return (_jsx("div", { ref: ref, children: _jsx(BaseAlert, { severity: severity, icon: getIcons(severity), slots: {
+                closeButton: () => (_jsx(Button, { variant: "ghost", icon: _jsx(Close, { fontSize: "small" }), onClick: onClose, size: "small", sx: {
+                        color: getAccentColor(severity),
+                    } })),
+            }, onClose: onClose, ...rest, children: children }) }));
+});
+export default Alert;
+//# sourceMappingURL=Alert.js.map

package/dist/components/Alert/Alert.styled.js

@@ -0,0 +1,42 @@
+import { Alert as MuiAlert, alertClasses, styled, svgIconClasses } from '@mui/material';
+import { getAccentColor, getBackgroundColor } from './Alert.utils';
+const BaseAlert = styled(MuiAlert)(({ theme, severity }) => ({
+    [`&.${alertClasses.root}`]: {
+        display: 'flex',
+        padding: `${theme.spacing(2)} ${theme.spacing(4)}`,
+        maxWidth: '456px',
+        borderRadius: '8px',
+        border: `1px solid ${getAccentColor(severity)}`,
+        backgroundColor: getBackgroundColor(severity),
+        boxShadow: 'none',
+    },
+    [`& .${alertClasses.icon}`]: {
+        fontSize: '20px',
+        alignItems: 'center',
+        padding: `${theme.spacing(1)} 0`,
+        marginRight: theme.spacing(2),
+        color: `${getAccentColor(severity)} !important`,
+    },
+    [`& .${alertClasses.message}`]: {
+        padding: `${theme.spacing(1)} 0`,
+        width: '100%',
+        overflow: 'hidden',
+        display: '-webkit-box',
+        textOverflow: 'ellipsis',
+        WebkitLineClamp: '5',
+        WebkitBoxOrient: 'vertical',
+        color: theme.palette.neutralGrey[0],
+    },
+    [`& .${alertClasses.action}`]: {
+        margin: 0,
+        padding: 0,
+        paddingLeft: theme.spacing(2),
+        alignItems: 'center',
+    },
+    [`& .${svgIconClasses.root}`]: {
+        height: '20px',
+        width: '20px',
+    },
+}));
+export default BaseAlert;
+//# sourceMappingURL=Alert.styled.js.map

package/dist/components/Alert/Alert.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Alert.types.js.map

package/dist/components/Alert/Alert.utils.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Success, Error, Information } from '../Icons';
+import theme from '../../theme';
+export const getIcons = (severity) => {
+    switch (severity) {
+        case 'info':
+            return _jsx(Information, {});
+        case 'success':
+            return _jsx(Success, {});
+        case 'error':
+            return _jsx(Error, {});
+        default:
+            return _jsx(Error, {});
+    }
+};
+export const getBackgroundColor = (severity) => {
+    switch (severity) {
+        case 'info':
+            return theme.palette.alert.InfoBG;
+        case 'success':
+            return theme.palette.alert.SuccessBG;
+        case 'error':
+            return theme.palette.alert.ErrorBG;
+        default:
+            return theme.palette.alert.WarningBG;
+    }
+};
+export const getAccentColor = (severity) => {
+    switch (severity) {
+        case 'info':
+            return theme.palette.blue[25];
+        case 'success':
+            return theme.palette.lunitTeal[40];
+        case 'error':
+            return theme.palette.red[5];
+        default:
+            return theme.palette.yellow[20];
+    }
+};
+//# sourceMappingURL=Alert.utils.js.map

package/dist/components/Alert/index.js

@@ -0,0 +1,3 @@
+import Alert from './Alert';
+export { Alert };
+//# sourceMappingURL=index.js.map

package/dist/components/BaseTextField/BaseTextField.styled.js

@@ -0,0 +1,97 @@
+// This file facilitates style sharing between text input and text area
+import { Box, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { formatCSSSize } from './BaseTextField.utils';
+const baseTextFieldStyle = (theme) => {
+    return {
+        backgroundColor: theme.palette.neutralGrey[75],
+        borderRadius: '8px',
+        border: '1px solid',
+        borderColor: 'transparent',
+        color: theme.palette.neutralGrey[5],
+        fontWeight: '400',
+        fontSize: '14px',
+        fontFamily: 'Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
+        lineHeight: '20px',
+        padding: '7px 16px',
+        '&::placeholder': {
+            color: theme.palette.neutralGrey[45],
+        },
+        '&:focus': {
+            outline: 'none',
+            border: '1px solid',
+            borderColor: theme.palette.lunitTeal[10],
+        },
+        '&:hover': {
+            borderColor: theme.palette.neutralGrey[45],
+        },
+        '&:disabled': {
+            opacity: '0.8',
+            pointerEvents: 'none',
+        },
+        '&:read-only': {
+            border: `1px solid ${theme.palette.neutralGrey[70]}`,
+            backgroundColor: 'transparent',
+            color: theme.palette.neutralGrey[45],
+            pointerEvents: 'none',
+        },
+    };
+};
+const baseTextFieldErrorStyle = (theme) => {
+    return {
+        borderColor: theme.palette.red[5],
+    };
+};
+const baseTextFieldMsgStyle = (theme) => {
+    return {
+        width: '312px',
+        maxWidth: '312px',
+        minHeight: '20px',
+        color: theme.palette.neutralGrey[45],
+        padding: '4px',
+    };
+};
+const baseTextFieldMsgErrorStyle = (theme) => {
+    return {
+        color: theme.palette.red[5],
+    };
+};
+const BaseTextFieldBox = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'width',
+})(({ width }) => {
+    return {
+        width: formatCSSSize(width),
+        minWidth: formatCSSSize(width) ? 'unset' : '208px',
+    };
+});
+const BaseTextFieldContainer = styled(Box, {
+    shouldForwardProp: (prop) => !['width'].includes(prop.toString()),
+})(({ width }) => {
+    return {
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        width: formatCSSSize(width),
+        minWidth: formatCSSSize(width) ? 'unset' : '208px',
+    };
+});
+const InputMsg = styled(Typography, {
+    shouldForwardProp: (prop) => prop !== 'error',
+})(({ theme, error }) => {
+    let resultStyle = baseTextFieldMsgStyle(theme);
+    if (error) {
+        resultStyle = {
+            ...resultStyle,
+            ...baseTextFieldMsgErrorStyle(theme),
+        };
+    }
+    return resultStyle;
+});
+const styles = {
+    baseTextFieldStyle,
+    baseTextFieldErrorStyle,
+    baseTextFieldMsgStyle,
+    baseTextFieldMsgErrorStyle,
+};
+export { styles, BaseTextFieldContainer, BaseTextFieldBox, InputMsg };
+//# sourceMappingURL=BaseTextField.styled.js.map

package/dist/components/BaseTextField/BaseTextField.types.js

@@ -0,0 +1,3 @@
+// Props for all text fields
+export {};
+//# sourceMappingURL=BaseTextField.types.js.map

package/dist/components/BaseTextField/BaseTextField.utils.js

@@ -0,0 +1,10 @@
+function formatCSSSize(sizeVal) {
+    if (typeof sizeVal === 'undefined') {
+        return undefined;
+    }
+    if (typeof sizeVal === 'number')
+        return `${sizeVal}px`;
+    return sizeVal;
+}
+export { formatCSSSize };
+//# sourceMappingURL=BaseTextField.utils.js.map

package/dist/components/Button/BaseButton.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BaseContainedButton } from './styleds/ContainedButton.styled';
+import { BaseGhostButton } from './styleds/GhostButton.styled';
+import { BaseOutlinedButton } from './styleds/OutlinedButton.styled';
+const BaseButton = ({ variant, ...otherProps }) => {
+    if (variant === 'ghost') {
+        return _jsx(BaseGhostButton, { ...otherProps });
+    }
+    if (variant === 'outlined') {
+        return _jsx(BaseOutlinedButton, { ...otherProps });
+    }
+    return _jsx(BaseContainedButton, { ...otherProps });
+};
+export default BaseButton;
+//# sourceMappingURL=BaseButton.js.map

package/dist/components/Button/Button.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/system';
+import BaseButton from './BaseButton';
+import { CircularProgress } from '../Progress';
+import theme from '../../theme';
+import { isIconButton } from './Button.utils';
+function Button(props) {
+    if (isIconButton(props)) {
+        const { icon, loading, onClick, disableRipple = true, focusOutline = false, ...otherProps } = props;
+        return (_jsx(BaseButton, { ...otherProps, isIconOnly: true, disableRipple: disableRipple, focusOutline: focusOutline, onClick: loading
+                ? (e) => {
+                    e.preventDefault();
+                }
+                : onClick, children: loading ? (_jsx(CircularProgress, { circleColor: theme.palette.neutralGrey[0], size: 20, sx: {
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                } })) : (icon) }));
+    }
+    const { icon, label, size, focusOutline = false, disableRipple = true, loading, onClick, ...otherProps } = props;
+    return (_jsx(BaseButton, { isIconOnly: false, variant: otherProps.variant ?? 'contained', disableRipple: disableRipple, size: size, color: otherProps.color, focusOutline: focusOutline, onClick: loading
+            ? (e) => {
+                e.preventDefault();
+            }
+            : onClick, sx: loading
+            ? {
+                '&:not(.loadingCircle)': {
+                    color: 'transparent',
+                },
+            }
+            : {}, ...otherProps, children: _jsxs(_Fragment, { children: [icon, label, loading && (_jsx(Box, { className: "loadingCircle", sx: {
+                        position: 'absolute',
+                        top: '50%',
+                        left: '50%',
+                        transform: 'translate3d(-50%, -50%, 0)',
+                    }, children: _jsx(CircularProgress, { circleColor: theme.palette.neutralGrey[0], size: 20, sx: {
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                        } }) }))] }) }));
+}
+export default Button;
+//# sourceMappingURL=Button.js.map

package/dist/components/Button/Button.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Button.types.js.map

package/dist/components/Button/Button.utils.js

@@ -0,0 +1,11 @@
+/**
+ * @param props
+ * @returns boolean
+ * @description checks for presence of `label` prop to assert between Icon and Normal Button
+ */
+function isIconButton(props) {
+    const p = props;
+    return !p.label;
+}
+export { isIconButton };
+//# sourceMappingURL=Button.utils.js.map

package/dist/components/Button/index.js

@@ -0,0 +1,4 @@
+import Button from './Button';
+import BaseButton from './BaseButton';
+export { Button, BaseButton };
+//# sourceMappingURL=index.js.map

package/dist/components/Button/styleds/BaseButton.styled.js

@@ -0,0 +1,52 @@
+import { typography } from '../../../foundations';
+const baseButtonStyle = (theme, focusOutline) => {
+    const mainColor = theme.palette.lunitTeal[40];
+    return {
+        alignItems: 'center',
+        display: 'flex',
+        gap: '4px',
+        borderRadius: '8px',
+        border: '1px solid transparent',
+        textTransform: 'none',
+        minWidth: '36px',
+        width: 'max-content',
+        height: '36px',
+        padding: '8px 12px',
+        ...typography.body4,
+        backgroundColor: mainColor,
+        color: theme.palette.neutralGrey[97],
+        '&:hover': {
+            backgroundColor: mainColor,
+            opacity: 0.8,
+        },
+        '&:disabled': {
+            color: theme.palette.neutralGrey[97],
+            backgroundColor: mainColor,
+            opacity: 0.4,
+        },
+        '&:focus': {
+            border: focusOutline ? `1px solid ${theme.palette.lunitTeal[10]}` : '1px solid transparent',
+            outline: 'none',
+        },
+        '&:focus-visible': {
+            border: focusOutline ? `1px solid ${theme.palette.lunitTeal[10]}` : '1px solid transparent',
+            outline: 'none',
+        },
+    };
+};
+const baseSmallStyle = {
+    height: '28px',
+    minWidth: '28px',
+    padding: '4px 8px',
+};
+const baseLargeStyle = {
+    fontWeight: 600,
+    fontSize: '16px',
+    lineHeight: '22px',
+    // textTransform: 'capitalize', // This causes a type error in BaseOutlinedButton :S
+    height: '44px',
+    minWidth: '44px',
+    padding: '12px',
+};
+export { baseButtonStyle, baseSmallStyle, baseLargeStyle };
+//# sourceMappingURL=BaseButton.styled.js.map

package/dist/components/Button/styleds/ContainedButton.styled.js

@@ -0,0 +1,112 @@
+import { ButtonBase, styled } from '@mui/material';
+import { baseButtonStyle, baseLargeStyle, baseSmallStyle } from './BaseButton.styled';
+import { baseLargeIconStyle, baseMediumIconStyle, baseSmallIconStyle } from './IconButton.styled';
+const containedPrimaryStyle = (theme, focusOutline) => {
+    return baseButtonStyle(theme, focusOutline);
+};
+const containedSecondaryStyle = (theme, focusOutline) => {
+    const mainColor = theme.palette.lunitTeal[40];
+    return {
+        backgroundColor: theme.palette.neutralGrey[85],
+        color: mainColor,
+        '&:hover': {
+            color: mainColor,
+            backgroundColor: theme.palette.neutralGrey[75],
+            opacity: 1,
+        },
+        '&:disabled': {
+            color: mainColor,
+            backgroundColor: theme.palette.neutralGrey[85],
+            opacity: 0.4,
+        },
+        '&:focus': {
+            outline: 'none',
+            border: focusOutline ? `1px solid ${mainColor}` : '1px solid transparent',
+        },
+        '&:focus-visible': {
+            outline: 'none',
+            border: focusOutline ? `1px solid ${mainColor}` : '1px solid transparent',
+        },
+    };
+};
+const containedErrorStyle = (theme, focusOutline) => {
+    const mainColor = theme.palette.red[5];
+    return {
+        backgroundColor: mainColor,
+        color: theme.palette.neutralGrey[0],
+        '&:hover': {
+            backgroundColor: mainColor,
+            opacity: 0.8,
+        },
+        '&:disabled': {
+            color: theme.palette.neutralGrey[0],
+            backgroundColor: mainColor,
+            opacity: 0.4,
+        },
+        '&:focus': {
+            outline: 'none',
+            border: focusOutline ? `1px solid ${mainColor}` : '1px solid transparent',
+        },
+        '&:focus-visible': {
+            outline: 'none',
+            border: focusOutline ? `1px solid ${mainColor}` : '1px solid transparent',
+        },
+    };
+};
+const BaseContainedButton = styled(ButtonBase, {
+    shouldForwardProp: (prop) => !['color', 'variant', 'size', 'focusOutline', 'isIconOnly'].includes(prop.toString()),
+})(({ theme, color, size, focusOutline, isIconOnly }) => {
+    let resultStyle = containedPrimaryStyle(theme, focusOutline);
+    // Apply icon sizing if icon only
+    if (isIconOnly) {
+        if (size === 'small') {
+            resultStyle = {
+                ...resultStyle,
+                ...baseSmallIconStyle,
+            };
+        }
+        else if (size === 'large') {
+            resultStyle = {
+                ...resultStyle,
+                ...baseLargeIconStyle,
+            };
+        }
+        else {
+            resultStyle = {
+                ...resultStyle,
+                ...baseMediumIconStyle,
+            };
+        }
+    }
+    else {
+        // Apply label or icon-label
+        if (size === 'small') {
+            resultStyle = {
+                ...resultStyle,
+                ...baseSmallStyle,
+            };
+        }
+        if (size === 'large') {
+            resultStyle = {
+                ...resultStyle,
+                ...baseLargeStyle,
+            };
+        }
+    }
+    // Apply color
+    if (color === 'error') {
+        resultStyle = {
+            ...resultStyle,
+            ...containedErrorStyle(theme, focusOutline),
+        };
+    }
+    if (color === 'secondary') {
+        resultStyle = {
+            ...resultStyle,
+            ...containedSecondaryStyle(theme, focusOutline),
+        };
+    }
+    return resultStyle;
+});
+export { containedPrimaryStyle, containedSecondaryStyle, containedErrorStyle, BaseContainedButton };
+//# sourceMappingURL=ContainedButton.styled.js.map