@bookjane2/bookjane-design-library 7.3.3 → 7.3.4

package/lib/components/BKJIcon/src/sidenav/Explore.js

@@ -1,12 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext } from 'react';
-import { ThemeContext } from 'styled-components';
-export function ExploreIcon(props) {
-    const themeContext = useContext(ThemeContext);
-    const { color = 'Grey6', ...rest } = props;
-    const primaryFillColor = themeContext.colors[color];
-    return (_jsxs("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest, { children: [_jsxs("g", Object.assign({ clipPath: "url(#Explore_svg__clip0)", stroke: primaryFillColor, strokeWidth: 1.5, strokeMiterlimit: 10, strokeLinecap: "square" }, { children: [_jsx("path", { d: "M12 19.333a7.333 7.333 0 100-14.666 7.333 7.333 0 000 14.666z" }, void 0),
-                    _jsx("path", { d: "M15.333 8.667l-2 4.666-4.666 2 2-4.666 4.666-2z" }, void 0)] }), void 0),
-            _jsx("defs", { children: _jsx("clipPath", Object.assign({ id: "Explore_svg__clip0" }, { children: _jsx("path", { fill: "#fff", transform: "translate(4 4)", d: "M0 0h16v16H0z" }, void 0) }), void 0) }, void 0)] }), void 0));
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { ThemeContext } from 'styled-components';
+export function ExploreIcon(props) {
+    const themeContext = useContext(ThemeContext);
+    const { color = 'Grey6', ...rest } = props;
+    const primaryFillColor = themeContext.colors[color];
+    return (_jsxs("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest, { children: [_jsxs("g", Object.assign({ clipPath: "url(#Explore_svg__clip0)", stroke: primaryFillColor, strokeWidth: 1.5, strokeMiterlimit: 10, strokeLinecap: "square" }, { children: [_jsx("path", { d: "M12 19.333a7.333 7.333 0 100-14.666 7.333 7.333 0 000 14.666z" }, void 0),
+                    _jsx("path", { d: "M15.333 8.667l-2 4.666-4.666 2 2-4.666 4.666-2z" }, void 0)] }), void 0),
+            _jsx("defs", { children: _jsx("clipPath", Object.assign({ id: "Explore_svg__clip0" }, { children: _jsx("path", { fill: "#fff", transform: "translate(4 4)", d: "M0 0h16v16H0z" }, void 0) }), void 0) }, void 0)] }), void 0));
+}
 //# sourceMappingURL=Explore.js.map

package/lib/components/BKJIcon/src/sidenav/Logout.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { IIconProps } from '../../BKJIcon.types.js';
-export declare function LogoutIcon(props: IIconProps): JSX.Element;
+/// <reference types="react" />
+import { IIconProps } from '../../BKJIcon.types.js';
+export declare function LogoutIcon(props: IIconProps): JSX.Element;
 //# sourceMappingURL=Logout.d.ts.map

package/lib/components/BKJIcon/src/sidenav/Logout.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext } from 'react';
-import { ThemeContext } from 'styled-components';
-export function LogoutIcon(props) {
-    const themeContext = useContext(ThemeContext);
-    const { color = 'Grey6', ...rest } = props;
-    const primaryFillColor = themeContext.colors[color];
-    return (_jsx("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.302 15.191l1.254 1.253L16 12l-4.444-4.444-1.254 1.253 2.294 2.302H4v1.778h8.596l-2.294 2.302zM18.222 4H5.778C4.79 4 4 4.8 4 5.778v3.555h1.778V5.778h12.444v12.444H5.778v-3.555H4v3.555C4 19.2 4.791 20 5.778 20h12.444C19.2 20 20 19.2 20 18.222V5.778C20 4.8 19.2 4 18.222 4z", fill: primaryFillColor }, void 0) }), void 0));
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { ThemeContext } from 'styled-components';
+export function LogoutIcon(props) {
+    const themeContext = useContext(ThemeContext);
+    const { color = 'Grey6', ...rest } = props;
+    const primaryFillColor = themeContext.colors[color];
+    return (_jsx("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.302 15.191l1.254 1.253L16 12l-4.444-4.444-1.254 1.253 2.294 2.302H4v1.778h8.596l-2.294 2.302zM18.222 4H5.778C4.79 4 4 4.8 4 5.778v3.555h1.778V5.778h12.444v12.444H5.778v-3.555H4v3.555C4 19.2 4.791 20 5.778 20h12.444C19.2 20 20 19.2 20 18.222V5.778C20 4.8 19.2 4 18.222 4z", fill: primaryFillColor }, void 0) }), void 0));
+}
 //# sourceMappingURL=Logout.js.map

package/lib/components/BKJIcon/src/sidenav/NewBooking.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { IIconProps } from '../../BKJIcon.types.js';
-export declare function NewBookingIcon(props: IIconProps): JSX.Element;
+/// <reference types="react" />
+import { IIconProps } from '../../BKJIcon.types.js';
+export declare function NewBookingIcon(props: IIconProps): JSX.Element;
 //# sourceMappingURL=NewBooking.d.ts.map

package/lib/components/BKJIcon/src/sidenav/NewBooking.js

@@ -1,11 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext } from 'react';
-import { ThemeContext } from 'styled-components';
-export function NewBookingIcon(props) {
-    const themeContext = useContext(ThemeContext);
-    const { color = 'Grey6', ...rest } = props;
-    const primaryFillColor = themeContext.colors[color];
-    return (_jsxs("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest, { children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.65 1c.317 0 .58.236.621.543l.006.085V3.51h7.533V1.628a.628.628 0 011.25-.085l.005.085V3.51h3.139c1.04 0 1.883.843 1.883 1.883V12.049a6.42 6.42 0 00-1.256-.996v-2.52H3.255v10.67c0 .348.281.628.628.628h8.17c.279.46.614.882.996 1.256H3.883A1.883 1.883 0 012 19.204V5.394c0-1.04.843-1.883 1.883-1.883h3.139V1.628c0-.347.28-.628.627-.628zM20.83 7.277V5.394a.628.628 0 00-.627-.628H3.884a.628.628 0 00-.629.628v1.883h17.576zm-3.31 3.766a5.478 5.478 0 110 10.957 5.478 5.478 0 010-10.957zm0 1.37a4.109 4.109 0 100 8.217 4.109 4.109 0 000-8.217z", fill: primaryFillColor }, void 0),
-            _jsx("path", { d: "M17.522 13.783v5.478M14.783 16.522h5.478", stroke: primaryFillColor, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }, void 0)] }), void 0));
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { ThemeContext } from 'styled-components';
+export function NewBookingIcon(props) {
+    const themeContext = useContext(ThemeContext);
+    const { color = 'Grey6', ...rest } = props;
+    const primaryFillColor = themeContext.colors[color];
+    return (_jsxs("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest, { children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.65 1c.317 0 .58.236.621.543l.006.085V3.51h7.533V1.628a.628.628 0 011.25-.085l.005.085V3.51h3.139c1.04 0 1.883.843 1.883 1.883V12.049a6.42 6.42 0 00-1.256-.996v-2.52H3.255v10.67c0 .348.281.628.628.628h8.17c.279.46.614.882.996 1.256H3.883A1.883 1.883 0 012 19.204V5.394c0-1.04.843-1.883 1.883-1.883h3.139V1.628c0-.347.28-.628.627-.628zM20.83 7.277V5.394a.628.628 0 00-.627-.628H3.884a.628.628 0 00-.629.628v1.883h17.576zm-3.31 3.766a5.478 5.478 0 110 10.957 5.478 5.478 0 010-10.957zm0 1.37a4.109 4.109 0 100 8.217 4.109 4.109 0 000-8.217z", fill: primaryFillColor }, void 0),
+            _jsx("path", { d: "M17.522 13.783v5.478M14.783 16.522h5.478", stroke: primaryFillColor, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }, void 0)] }), void 0));
+}
 //# sourceMappingURL=NewBooking.js.map

package/lib/components/BKJIcon/src/sidenav/Question.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { IIconProps } from '../../BKJIcon.types.js';
-export declare function QuestionIcon(props: IIconProps): JSX.Element;
+/// <reference types="react" />
+import { IIconProps } from '../../BKJIcon.types.js';
+export declare function QuestionIcon(props: IIconProps): JSX.Element;
 //# sourceMappingURL=Question.d.ts.map

package/lib/components/BKJIcon/src/sidenav/Question.js

@@ -1,11 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext } from 'react';
-import { ThemeContext } from 'styled-components';
-export function QuestionIcon(props) {
-    const themeContext = useContext(ThemeContext);
-    const { color = 'Grey6', ...rest } = props;
-    const primaryFillColor = themeContext.colors[color];
-    return (_jsxs("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest, { children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.817 17.374c-.6 0-1.1-.51-1.1-1.122 0-.613.5-1.123 1.1-1.123.6 0 1.1.51 1.1 1.123 0 .632-.5 1.122-1.1 1.122zm2.481-5.53c-.4.551-.8.838-1.08 1.042-.32.224-.42.306-.46.795a.57.57 0 01-.56.53h-.72a.542.542 0 01-.421-.183.722.722 0 01-.16-.45c.1-1.325.62-1.795 1.24-2.243.24-.164.44-.327.66-.613.2-.285.22-.673.06-1.02-.12-.225-.42-.612-1.14-.612-.94 0-1.24.591-1.32 1.082a.6.6 0 01-.58.489h-.72a.634.634 0 01-.44-.204.604.604 0 01-.14-.449c.18-1.285 1.12-2.795 3.18-2.795 1.24 0 2.28.612 2.8 1.653.501.979.42 2.122-.199 2.979z", fill: primaryFillColor }, void 0),
-            _jsx("path", { clipRule: "evenodd", d: "M20.867 11.553L16.849 4.48a.953.953 0 00-.815-.48H7.96a.915.915 0 00-.815.48l-4.017 7.072a.931.931 0 000 .942l4.037 7.09c.17.289.473.481.815.481h8.073a.915.915 0 00.816-.48l4.037-7.091a1.039 1.039 0 00-.039-.941h0z", stroke: primaryFillColor, strokeWidth: 1.7 }, void 0)] }), void 0));
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { ThemeContext } from 'styled-components';
+export function QuestionIcon(props) {
+    const themeContext = useContext(ThemeContext);
+    const { color = 'Grey6', ...rest } = props;
+    const primaryFillColor = themeContext.colors[color];
+    return (_jsxs("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest, { children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.817 17.374c-.6 0-1.1-.51-1.1-1.122 0-.613.5-1.123 1.1-1.123.6 0 1.1.51 1.1 1.123 0 .632-.5 1.122-1.1 1.122zm2.481-5.53c-.4.551-.8.838-1.08 1.042-.32.224-.42.306-.46.795a.57.57 0 01-.56.53h-.72a.542.542 0 01-.421-.183.722.722 0 01-.16-.45c.1-1.325.62-1.795 1.24-2.243.24-.164.44-.327.66-.613.2-.285.22-.673.06-1.02-.12-.225-.42-.612-1.14-.612-.94 0-1.24.591-1.32 1.082a.6.6 0 01-.58.489h-.72a.634.634 0 01-.44-.204.604.604 0 01-.14-.449c.18-1.285 1.12-2.795 3.18-2.795 1.24 0 2.28.612 2.8 1.653.501.979.42 2.122-.199 2.979z", fill: primaryFillColor }, void 0),
+            _jsx("path", { clipRule: "evenodd", d: "M20.867 11.553L16.849 4.48a.953.953 0 00-.815-.48H7.96a.915.915 0 00-.815.48l-4.017 7.072a.931.931 0 000 .942l4.037 7.09c.17.289.473.481.815.481h8.073a.915.915 0 00.816-.48l4.037-7.091a1.039 1.039 0 00-.039-.941h0z", stroke: primaryFillColor, strokeWidth: 1.7 }, void 0)] }), void 0));
+}
 //# sourceMappingURL=Question.js.map

package/lib/components/BKJIcon/src/sidenav/Schedule.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { IIconProps } from '../../BKJIcon.types.js';
-export declare function ScheduleIcon(props: IIconProps): JSX.Element;
+/// <reference types="react" />
+import { IIconProps } from '../../BKJIcon.types.js';
+export declare function ScheduleIcon(props: IIconProps): JSX.Element;
 //# sourceMappingURL=Schedule.d.ts.map

package/lib/components/BKJIcon/src/sidenav/Schedule.js

@@ -1,13 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext } from 'react';
-import { ThemeContext } from 'styled-components';
-export function ScheduleIcon(props) {
-    const themeContext = useContext(ThemeContext);
-    const { color = 'Grey6', ...rest } = props;
-    const primaryFillColor = themeContext.colors[color];
-    return (_jsxs("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest, { children: [_jsx("path", { stroke: primaryFillColor, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", d: "M6 11.429h1.714v.857H6zM11.143 11.429h1.714v.857h-1.714zM6 15.714h1.714v.857H6zM11.143 15.714h1.714v.857h-1.714zM16.286 11.429H18v.857h-1.714z" }, void 0),
-            _jsx("path", { fill: primaryFillColor, d: "M6 11.429h1.714v.857H6zM11.143 11.429h1.714v.857h-1.714zM6 15.714h1.714v.857H6zM11.143 15.714h1.714v.857h-1.714zM16.286 11.429H18v.857h-1.714z" }, void 0),
-            _jsx("rect", { x: 2.571, y: 3.714, width: 18.857, height: 16.286, rx: 2, stroke: primaryFillColor, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }, void 0),
-            _jsx("path", { d: "M6.857 2v2.571M17.143 2v2.571M2.571 8H21.43", stroke: primaryFillColor, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }, void 0)] }), void 0));
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { ThemeContext } from 'styled-components';
+export function ScheduleIcon(props) {
+    const themeContext = useContext(ThemeContext);
+    const { color = 'Grey6', ...rest } = props;
+    const primaryFillColor = themeContext.colors[color];
+    return (_jsxs("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest, { children: [_jsx("path", { stroke: primaryFillColor, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", d: "M6 11.429h1.714v.857H6zM11.143 11.429h1.714v.857h-1.714zM6 15.714h1.714v.857H6zM11.143 15.714h1.714v.857h-1.714zM16.286 11.429H18v.857h-1.714z" }, void 0),
+            _jsx("path", { fill: primaryFillColor, d: "M6 11.429h1.714v.857H6zM11.143 11.429h1.714v.857h-1.714zM6 15.714h1.714v.857H6zM11.143 15.714h1.714v.857h-1.714zM16.286 11.429H18v.857h-1.714z" }, void 0),
+            _jsx("rect", { x: 2.571, y: 3.714, width: 18.857, height: 16.286, rx: 2, stroke: primaryFillColor, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }, void 0),
+            _jsx("path", { d: "M6.857 2v2.571M17.143 2v2.571M2.571 8H21.43", stroke: primaryFillColor, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }, void 0)] }), void 0));
+}
 //# sourceMappingURL=Schedule.js.map

package/lib/components/BKJIcon/src/sidenav/Settings.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { IIconProps } from '../../BKJIcon.types.js';
-export declare function SettingsIcon(props: IIconProps): JSX.Element;
+/// <reference types="react" />
+import { IIconProps } from '../../BKJIcon.types.js';
+export declare function SettingsIcon(props: IIconProps): JSX.Element;
 //# sourceMappingURL=Settings.d.ts.map

package/lib/components/BKJIcon/src/sidenav/Settings.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext } from 'react';
-import { ThemeContext } from 'styled-components';
-export function SettingsIcon(props) {
-    const themeContext = useContext(ThemeContext);
-    const { color = 'Grey6', ...rest } = props;
-    const primaryFillColor = themeContext.colors[color];
-    return (_jsx("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.298 2l-.087.006a.638.638 0 00-.551.632v2.3l-.093.03c-.281.098-.556.211-.822.341l-.084.042-1.626-1.625a.638.638 0 00-.903 0L3.726 6.132l-.062.072a.638.638 0 00.062.831L5.35 8.661l-.042.084c-.13.266-.243.54-.34.822l-.031.093h-2.3a.638.638 0 00-.638.638v3.404l.006.087c.042.311.31.551.632.551h2.3l.03.093c.098.281.211.556.341.822l.042.083-1.625 1.627a.638.638 0 000 .902l2.406 2.407.072.062c.25.186.605.165.831-.062l1.625-1.626.084.043c.266.13.54.243.822.34l.094.03v2.3c0 .353.285.639.638.639h3.404l.087-.006a.638.638 0 00.551-.632v-2.3l.093-.03c.281-.098.556-.211.822-.341l.083-.043 1.627 1.626c.25.25.653.25.902 0l2.407-2.407.062-.071a.638.638 0 00-.062-.831l-1.626-1.626.043-.083c.13-.266.243-.54.34-.822l.03-.094h2.3a.638.638 0 00.639-.638v-3.404l-.006-.087a.639.639 0 00-.632-.551h-2.3l-.03-.093a7.407 7.407 0 00-.341-.822l-.043-.084 1.626-1.626a.638.638 0 000-.903l-2.407-2.406-.071-.062a.638.638 0 00-.831.062L15.338 5.35l-.083-.042a7.41 7.41 0 00-.822-.34l-.093-.031v-2.3A.638.638 0 0013.702 2h-3.404zm.638 1.277h2.128v2.137c0 .292.197.546.479.619.56.144 1.092.365 1.586.656l.086.043a.638.638 0 00.69-.141l1.511-1.511 1.504 1.504-1.51 1.511a.638.638 0 00-.1.776c.292.494.513 1.026.658 1.586l.03.091a.638.638 0 00.587.388h2.138v2.128h-2.137a.638.638 0 00-.618.479 6.13 6.13 0 01-.657 1.586l-.043.086a.638.638 0 00.141.69l1.511 1.511-1.504 1.504-1.511-1.51a.638.638 0 00-.776-.1 6.143 6.143 0 01-1.586.658l-.091.03a.638.638 0 00-.388.587v2.138h-2.128v-2.137a.638.638 0 00-.479-.618 6.131 6.131 0 01-1.586-.657l-.086-.043a.638.638 0 00-.69.141L6.584 18.92 5.08 17.416l1.51-1.511a.638.638 0 00.1-.776 6.142 6.142 0 01-.658-1.586l-.03-.091a.638.638 0 00-.588-.388H3.277v-2.128h2.137a.638.638 0 00.619-.479c.144-.56.365-1.092.656-1.586l.043-.086a.638.638 0 00-.141-.69L5.08 6.584 6.584 5.08l1.511 1.51a.638.638 0 00.776.1 6.143 6.143 0 011.586-.658l.091-.03a.638.638 0 00.388-.588V3.277zM12 8.809a3.192 3.192 0 100 6.383 3.192 3.192 0 000-6.383zm0 1.276a1.915 1.915 0 110 3.83 1.915 1.915 0 010-3.83z", fill: primaryFillColor }, void 0) }), void 0));
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { ThemeContext } from 'styled-components';
+export function SettingsIcon(props) {
+    const themeContext = useContext(ThemeContext);
+    const { color = 'Grey6', ...rest } = props;
+    const primaryFillColor = themeContext.colors[color];
+    return (_jsx("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.298 2l-.087.006a.638.638 0 00-.551.632v2.3l-.093.03c-.281.098-.556.211-.822.341l-.084.042-1.626-1.625a.638.638 0 00-.903 0L3.726 6.132l-.062.072a.638.638 0 00.062.831L5.35 8.661l-.042.084c-.13.266-.243.54-.34.822l-.031.093h-2.3a.638.638 0 00-.638.638v3.404l.006.087c.042.311.31.551.632.551h2.3l.03.093c.098.281.211.556.341.822l.042.083-1.625 1.627a.638.638 0 000 .902l2.406 2.407.072.062c.25.186.605.165.831-.062l1.625-1.626.084.043c.266.13.54.243.822.34l.094.03v2.3c0 .353.285.639.638.639h3.404l.087-.006a.638.638 0 00.551-.632v-2.3l.093-.03c.281-.098.556-.211.822-.341l.083-.043 1.627 1.626c.25.25.653.25.902 0l2.407-2.407.062-.071a.638.638 0 00-.062-.831l-1.626-1.626.043-.083c.13-.266.243-.54.34-.822l.03-.094h2.3a.638.638 0 00.639-.638v-3.404l-.006-.087a.639.639 0 00-.632-.551h-2.3l-.03-.093a7.407 7.407 0 00-.341-.822l-.043-.084 1.626-1.626a.638.638 0 000-.903l-2.407-2.406-.071-.062a.638.638 0 00-.831.062L15.338 5.35l-.083-.042a7.41 7.41 0 00-.822-.34l-.093-.031v-2.3A.638.638 0 0013.702 2h-3.404zm.638 1.277h2.128v2.137c0 .292.197.546.479.619.56.144 1.092.365 1.586.656l.086.043a.638.638 0 00.69-.141l1.511-1.511 1.504 1.504-1.51 1.511a.638.638 0 00-.1.776c.292.494.513 1.026.658 1.586l.03.091a.638.638 0 00.587.388h2.138v2.128h-2.137a.638.638 0 00-.618.479 6.13 6.13 0 01-.657 1.586l-.043.086a.638.638 0 00.141.69l1.511 1.511-1.504 1.504-1.511-1.51a.638.638 0 00-.776-.1 6.143 6.143 0 01-1.586.658l-.091.03a.638.638 0 00-.388.587v2.138h-2.128v-2.137a.638.638 0 00-.479-.618 6.131 6.131 0 01-1.586-.657l-.086-.043a.638.638 0 00-.69.141L6.584 18.92 5.08 17.416l1.51-1.511a.638.638 0 00.1-.776 6.142 6.142 0 01-.658-1.586l-.03-.091a.638.638 0 00-.588-.388H3.277v-2.128h2.137a.638.638 0 00.619-.479c.144-.56.365-1.092.656-1.586l.043-.086a.638.638 0 00-.141-.69L5.08 6.584 6.584 5.08l1.511 1.51a.638.638 0 00.776.1 6.143 6.143 0 011.586-.658l.091-.03a.638.638 0 00.388-.588V3.277zM12 8.809a3.192 3.192 0 100 6.383 3.192 3.192 0 000-6.383zm0 1.276a1.915 1.915 0 110 3.83 1.915 1.915 0 010-3.83z", fill: primaryFillColor }, void 0) }), void 0));
+}
 //# sourceMappingURL=Settings.js.map

package/lib/components/BKJIcon/src/sidenav/Shifts.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { IIconProps } from '../../BKJIcon.types.js';
-export declare function ShiftsIcon(props: IIconProps): JSX.Element;
+/// <reference types="react" />
+import { IIconProps } from '../../BKJIcon.types.js';
+export declare function ShiftsIcon(props: IIconProps): JSX.Element;
 //# sourceMappingURL=Shifts.d.ts.map

package/lib/components/BKJIcon/src/sidenav/Shifts.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext } from 'react';
-import { ThemeContext } from 'styled-components';
-export function ShiftsIcon(props) {
-    const themeContext = useContext(ThemeContext);
-    const { color = 'Grey6', ...rest } = props;
-    const primaryFillColor = themeContext.colors[color];
-    return (_jsx("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.401 6.654V4.22a7.804 7.804 0 00-7.18 7.181h2.433a.599.599 0 01.081 1.192l-.081.006H4.22a7.804 7.804 0 007.181 7.18v-2.433a.599.599 0 011.192-.081l.006.081v2.434a7.804 7.804 0 007.18-7.181h-2.434a.599.599 0 01-.081-1.192l.081-.006h2.435a7.804 7.804 0 00-7.181-7.18v2.433a.599.599 0 01-1.192.081l-.006-.081zM12 3a9 9 0 100 18 9 9 0 000-18zM9.389 7.015a.599.599 0 00-.942.735l3.055 4.582.052.067c.112.126.274.2.446.2h3.055l.081-.006a.599.599 0 00.518-.593l-.006-.081a.6.6 0 00-.593-.518h-2.734L9.443 7.085l-.054-.07z", fill: primaryFillColor }, void 0) }), void 0));
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { ThemeContext } from 'styled-components';
+export function ShiftsIcon(props) {
+    const themeContext = useContext(ThemeContext);
+    const { color = 'Grey6', ...rest } = props;
+    const primaryFillColor = themeContext.colors[color];
+    return (_jsx("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.401 6.654V4.22a7.804 7.804 0 00-7.18 7.181h2.433a.599.599 0 01.081 1.192l-.081.006H4.22a7.804 7.804 0 007.181 7.18v-2.433a.599.599 0 011.192-.081l.006.081v2.434a7.804 7.804 0 007.18-7.181h-2.434a.599.599 0 01-.081-1.192l.081-.006h2.435a7.804 7.804 0 00-7.181-7.18v2.433a.599.599 0 01-1.192.081l-.006-.081zM12 3a9 9 0 100 18 9 9 0 000-18zM9.389 7.015a.599.599 0 00-.942.735l3.055 4.582.052.067c.112.126.274.2.446.2h3.055l.081-.006a.599.599 0 00.518-.593l-.006-.081a.6.6 0 00-.593-.518h-2.734L9.443 7.085l-.054-.07z", fill: primaryFillColor }, void 0) }), void 0));
+}
 //# sourceMappingURL=Shifts.js.map

package/lib/components/BKJIcon/src/sidenav/TeamMembers.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { IIconProps } from '../../BKJIcon.types.js';
-export declare function TeamMembersIcon(props: IIconProps): JSX.Element;
+/// <reference types="react" />
+import { IIconProps } from '../../BKJIcon.types.js';
+export declare function TeamMembersIcon(props: IIconProps): JSX.Element;
 //# sourceMappingURL=TeamMembers.d.ts.map

package/lib/components/BKJIcon/src/sidenav/TeamMembers.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext } from 'react';
-import { ThemeContext } from 'styled-components';
-export function TeamMembersIcon(props) {
-    const themeContext = useContext(ThemeContext);
-    const { color = 'Grey6', ...rest } = props;
-    const primaryFillColor = themeContext.colors[color];
-    return (_jsx("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.702 2.372h3.745c.388 0 .702.315.702.702l.006.12a1.17 1.17 0 002.334-.12l.007-.095a.702.702 0 01.695-.607h5.617c.388 0 .703.315.703.702l.006.12a1.17 1.17 0 002.334-.12l.007-.095a.702.702 0 01.695-.607h3.745c.388 0 .702.315.702.702v16.852a.702.702 0 01-.702.702H1.702A.702.702 0 011 19.925V3.075c0-.388.314-.703.702-.703zm3.156 1.46l-.016-.055H2.404v15.446h19.192V3.777h-2.439l-.015.054a2.576 2.576 0 01-2.304 1.813l-.157.005a2.575 2.575 0 01-2.462-1.818l-.015-.054H9.795l-.014.054a2.575 2.575 0 01-2.305 1.813l-.157.005A2.575 2.575 0 014.858 3.83zm13.695 6.03a.702.702 0 01.095 1.397l-.095.007h-3.745a.702.702 0 01-.095-1.398l.096-.006h3.744zm0 3.744a.702.702 0 01.095 1.398l-.095.007h-3.745a.702.702 0 01-.095-1.398l.096-.007h3.744zM7.32 13.372a2.808 2.808 0 00-2.808 2.809H12a2.808 2.808 0 00-2.809-2.809H7.32zm2.809-2.808a1.872 1.872 0 11-3.745 0 1.872 1.872 0 013.745 0z", fill: primaryFillColor }, void 0) }), void 0));
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { ThemeContext } from 'styled-components';
+export function TeamMembersIcon(props) {
+    const themeContext = useContext(ThemeContext);
+    const { color = 'Grey6', ...rest } = props;
+    const primaryFillColor = themeContext.colors[color];
+    return (_jsx("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.702 2.372h3.745c.388 0 .702.315.702.702l.006.12a1.17 1.17 0 002.334-.12l.007-.095a.702.702 0 01.695-.607h5.617c.388 0 .703.315.703.702l.006.12a1.17 1.17 0 002.334-.12l.007-.095a.702.702 0 01.695-.607h3.745c.388 0 .702.315.702.702v16.852a.702.702 0 01-.702.702H1.702A.702.702 0 011 19.925V3.075c0-.388.314-.703.702-.703zm3.156 1.46l-.016-.055H2.404v15.446h19.192V3.777h-2.439l-.015.054a2.576 2.576 0 01-2.304 1.813l-.157.005a2.575 2.575 0 01-2.462-1.818l-.015-.054H9.795l-.014.054a2.575 2.575 0 01-2.305 1.813l-.157.005A2.575 2.575 0 014.858 3.83zm13.695 6.03a.702.702 0 01.095 1.397l-.095.007h-3.745a.702.702 0 01-.095-1.398l.096-.006h3.744zm0 3.744a.702.702 0 01.095 1.398l-.095.007h-3.745a.702.702 0 01-.095-1.398l.096-.007h3.744zM7.32 13.372a2.808 2.808 0 00-2.808 2.809H12a2.808 2.808 0 00-2.809-2.809H7.32zm2.809-2.808a1.872 1.872 0 11-3.745 0 1.872 1.872 0 013.745 0z", fill: primaryFillColor }, void 0) }), void 0));
+}
 //# sourceMappingURL=TeamMembers.js.map

package/lib/components/BKJIcon/src/sidenav/Timesheets.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { IIconProps } from '../../BKJIcon.types.js';
-export declare function TimesheetsIcon(props: IIconProps): JSX.Element;
+/// <reference types="react" />
+import { IIconProps } from '../../BKJIcon.types.js';
+export declare function TimesheetsIcon(props: IIconProps): JSX.Element;
 //# sourceMappingURL=Timesheets.d.ts.map

package/lib/components/BKJIcon/src/sidenav/Timesheets.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext } from 'react';
-import { ThemeContext } from 'styled-components';
-export function TimesheetsIcon(props) {
-    const themeContext = useContext(ThemeContext);
-    const { color = 'Grey6', ...rest } = props;
-    const primaryFillColor = themeContext.colors[color];
-    return (_jsx("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 3a9 9 0 00-9 9H0l3.89 3.89.07.14L8 12H5c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.954 8.954 0 0012 21a9 9 0 000-18zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H11z", fill: primaryFillColor }, void 0) }), void 0));
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { ThemeContext } from 'styled-components';
+export function TimesheetsIcon(props) {
+    const themeContext = useContext(ThemeContext);
+    const { color = 'Grey6', ...rest } = props;
+    const primaryFillColor = themeContext.colors[color];
+    return (_jsx("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, rest, { children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 3a9 9 0 00-9 9H0l3.89 3.89.07.14L8 12H5c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.954 8.954 0 0012 21a9 9 0 000-18zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H11z", fill: primaryFillColor }, void 0) }), void 0));
+}
 //# sourceMappingURL=Timesheets.js.map

package/lib/components/BKJIconTooltip/BKJIconTooltip.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
-import { IBKJIconTooltipProps } from './BKJIconTooltip.types.js';
-export declare const BKJIconTooltip: FC<IBKJIconTooltipProps>;
+import { FC } from 'react';
+import { IBKJIconTooltipProps } from './BKJIconTooltip.types.js';
+export declare const BKJIconTooltip: FC<IBKJIconTooltipProps>;
 //# sourceMappingURL=BKJIconTooltip.d.ts.map

package/lib/components/BKJIconTooltip/BKJIconTooltip.js

@@ -1,8 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { BKJIcon } from '../BKJIcon/BKJIcon.js';
-import { BKJTooltipWrapper } from '../BKJTooltipWrapper/index.js';
-export const BKJIconTooltip = ({ children, ...props }) => {
-    const Icon = () => _jsx(BKJIcon, { iconName: props.iconName }, void 0);
-    return (_jsx(BKJTooltipWrapper, Object.assign({}, props, { Component: Icon }, { children: children }), void 0));
-};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BKJIcon } from '../BKJIcon/BKJIcon.js';
+import { BKJTooltipWrapper } from '../BKJTooltipWrapper/index.js';
+export const BKJIconTooltip = ({ children, ...props }) => {
+    const Icon = () => _jsx(BKJIcon, { iconName: props.iconName }, void 0);
+    return (_jsx(BKJTooltipWrapper, Object.assign({}, props, { Component: Icon }, { children: children }), void 0));
+};
 //# sourceMappingURL=BKJIconTooltip.js.map

package/lib/components/BKJIconTooltip/BKJIconTooltip.stories.d.ts

@@ -1,26 +1,26 @@
-/// <reference types="react" />
-import { Story } from '@storybook/react';
-import { IBKJIconTooltipProps } from './BKJIconTooltip.types.js';
-declare const _default: {
-    title: string;
-    component: import("react").FC<IBKJIconTooltipProps>;
-    argTypes: {
-        iconName: {
-            name: string;
-            options: string[];
-            control: {
-                type: string;
-            };
-        };
-        placement: {
-            name: string;
-            options: string[];
-            control: {
-                type: string;
-            };
-        };
-    };
-};
-export default _default;
-export declare const Default: Story<IBKJIconTooltipProps>;
+/// <reference types="react" />
+import { Story } from '@storybook/react';
+import { IBKJIconTooltipProps } from './BKJIconTooltip.types.js';
+declare const _default: {
+    title: string;
+    component: import("react").FC<IBKJIconTooltipProps>;
+    argTypes: {
+        iconName: {
+            name: string;
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        placement: {
+            name: string;
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: Story<IBKJIconTooltipProps>;
 //# sourceMappingURL=BKJIconTooltip.stories.d.ts.map

package/lib/components/BKJIconTooltip/BKJIconTooltip.stories.js

@@ -1,40 +1,40 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Flex } from '../index.js';
-import { BKJIconComponentMap } from '../BKJIcon/BKJIcon.types.js';
-import { BKJIconTooltip } from './BKJIconTooltip.js';
-export default {
-    title: 'Basic Elements/BKJIconTooltip',
-    component: BKJIconTooltip,
-    argTypes: {
-        iconName: {
-            name: 'Icon Name',
-            options: Object.keys(BKJIconComponentMap),
-            control: {
-                type: 'select',
-            },
-        },
-        placement: {
-            name: 'Placement',
-            options: ['top', 'bottom', 'left', 'right'],
-            control: {
-                type: 'select',
-            },
-        },
-    },
-};
-const BKJIconTooltipTemplate = (args) => {
-    return (_jsxs(Flex, Object.assign({ height: "100%", width: "100%", justifyContent: "flex-end", flexDirection: "column", gap: "150px", alignItems: "center" }, { children: [_jsx(BKJIconTooltip, Object.assign({}, args, { placement: "bottom" }), void 0),
-            _jsx(BKJIconTooltip, Object.assign({}, args, { placement: "left" }), void 0),
-            _jsx(BKJIconTooltip, Object.assign({}, args, { placement: "right" }), void 0),
-            _jsx(BKJIconTooltip, Object.assign({}, args, { placement: "top" }), void 0)] }), void 0));
-};
-export const Default = BKJIconTooltipTemplate.bind({});
-Default.args = {
-    iconName: 'Error',
-    placement: 'bottom',
-    children: (_jsxs(Flex, Object.assign({ flexDirection: "column", gap: "20px", width: "209px" }, { children: [_jsx("div", { children: "This agency member is unavailable on the following dates:" }, void 0),
-            _jsxs("ul", { children: [_jsx("li", { children: "Tue, Nov 25, 2021" }, void 0),
-                    _jsx("li", { children: "Thu, Dec 3, 2021" }, void 0)] }, void 0),
-            _jsx("div", { children: "If you decide to request this agency member, shifts they are unavailable for will be sent out as Open Shifts." }, void 0)] }), void 0)),
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex } from '../index.js';
+import { BKJIconComponentMap } from '../BKJIcon/BKJIcon.types.js';
+import { BKJIconTooltip } from './BKJIconTooltip.js';
+export default {
+    title: 'Basic Elements/BKJIconTooltip',
+    component: BKJIconTooltip,
+    argTypes: {
+        iconName: {
+            name: 'Icon Name',
+            options: Object.keys(BKJIconComponentMap),
+            control: {
+                type: 'select',
+            },
+        },
+        placement: {
+            name: 'Placement',
+            options: ['top', 'bottom', 'left', 'right'],
+            control: {
+                type: 'select',
+            },
+        },
+    },
+};
+const BKJIconTooltipTemplate = (args) => {
+    return (_jsxs(Flex, Object.assign({ height: "100%", width: "100%", justifyContent: "flex-end", flexDirection: "column", gap: "150px", alignItems: "center" }, { children: [_jsx(BKJIconTooltip, Object.assign({}, args, { placement: "bottom" }), void 0),
+            _jsx(BKJIconTooltip, Object.assign({}, args, { placement: "left" }), void 0),
+            _jsx(BKJIconTooltip, Object.assign({}, args, { placement: "right" }), void 0),
+            _jsx(BKJIconTooltip, Object.assign({}, args, { placement: "top" }), void 0)] }), void 0));
+};
+export const Default = BKJIconTooltipTemplate.bind({});
+Default.args = {
+    iconName: 'Error',
+    placement: 'bottom',
+    children: (_jsxs(Flex, Object.assign({ flexDirection: "column", gap: "20px", width: "209px" }, { children: [_jsx("div", { children: "This agency member is unavailable on the following dates:" }, void 0),
+            _jsxs("ul", { children: [_jsx("li", { children: "Tue, Nov 25, 2021" }, void 0),
+                    _jsx("li", { children: "Thu, Dec 3, 2021" }, void 0)] }, void 0),
+            _jsx("div", { children: "If you decide to request this agency member, shifts they are unavailable for will be sent out as Open Shifts." }, void 0)] }), void 0)),
+};
 //# sourceMappingURL=BKJIconTooltip.stories.js.map

package/lib/components/BKJIconTooltip/BKJIconTooltip.types.d.ts

@@ -1,9 +1,9 @@
-import { BasePlacement } from '@popperjs/core';
-import { BKJIconNameType } from './../BKJIcon/BKJIcon.types.js';
-import React, { ReactNode } from 'react';
-export interface IBKJIconTooltipProps extends React.HTMLAttributes<HTMLDivElement> {
-    iconName: BKJIconNameType;
-    placement: BasePlacement;
-    children: ReactNode;
-}
+import { BasePlacement } from '@popperjs/core';
+import { BKJIconNameType } from './../BKJIcon/BKJIcon.types.js';
+import React, { ReactNode } from 'react';
+export interface IBKJIconTooltipProps extends React.HTMLAttributes<HTMLDivElement> {
+    iconName: BKJIconNameType;
+    placement: BasePlacement;
+    children: ReactNode;
+}
 //# sourceMappingURL=BKJIconTooltip.types.d.ts.map

package/lib/components/BKJIconTooltip/BKJIconTooltip.types.js

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

package/lib/components/BKJIconTooltip/index.d.ts

@@ -1,2 +1,2 @@
-export { BKJIconTooltip } from './BKJIconTooltip.js';
+export { BKJIconTooltip } from './BKJIconTooltip.js';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/BKJIconTooltip/index.js

@@ -1,2 +1,2 @@
-export { BKJIconTooltip } from './BKJIconTooltip.js';
+export { BKJIconTooltip } from './BKJIconTooltip.js';
 //# sourceMappingURL=index.js.map

package/lib/components/BKJImage/BKJImage.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { IBKJImageProps } from './BKJImage.types.js';
-export declare function BKJImage({ alt, src, LoadingComponent, FallbackComponent, variant, ...rest }: IBKJImageProps): JSX.Element;
+/// <reference types="react" />
+import { IBKJImageProps } from './BKJImage.types.js';
+export declare function BKJImage({ alt, src, LoadingComponent, FallbackComponent, variant, ...rest }: IBKJImageProps): JSX.Element;
 //# sourceMappingURL=BKJImage.d.ts.map

package/lib/components/BKJImage/BKJImage.js

@@ -1,19 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useState } from 'react';
-import { Image, ImageContainer } from './BKJImage.styled.js';
-export function BKJImage({ alt, src = '', LoadingComponent, FallbackComponent, variant, ...rest }) {
-    const [isLoading, setIsLoading] = useState(true);
-    const [isFallbackDisplayed, setFallbackDisplayed] = useState(false);
-    const [hideImage, setHideImage] = useState(true);
-    const onError = useCallback(() => {
-        setIsLoading(false);
-        setFallbackDisplayed(true);
-    }, []);
-    const onLoad = useCallback(() => {
-        setIsLoading(false);
-        setHideImage(false);
-    }, []);
-    return (_jsxs(ImageContainer, Object.assign({}, rest, { children: [isLoading && _jsx(LoadingComponent, {}, void 0),
-            isFallbackDisplayed ? (_jsx(FallbackComponent, {}, void 0)) : (_jsx(Image, Object.assign({ hidden: isLoading || hideImage, borderRadius: variant === 'Round' ? '50%' : '0', src: src, alt: alt, onError: onError, onLoad: onLoad }, rest), void 0))] }), void 0));
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { Image, ImageContainer } from './BKJImage.styled.js';
+export function BKJImage({ alt, src = '', LoadingComponent, FallbackComponent, variant, ...rest }) {
+    const [isLoading, setIsLoading] = useState(true);
+    const [isFallbackDisplayed, setFallbackDisplayed] = useState(false);
+    const [hideImage, setHideImage] = useState(true);
+    const onError = useCallback(() => {
+        setIsLoading(false);
+        setFallbackDisplayed(true);
+    }, []);
+    const onLoad = useCallback(() => {
+        setIsLoading(false);
+        setHideImage(false);
+    }, []);
+    return (_jsxs(ImageContainer, Object.assign({}, rest, { children: [isLoading && _jsx(LoadingComponent, {}, void 0),
+            isFallbackDisplayed ? (_jsx(FallbackComponent, {}, void 0)) : (_jsx(Image, Object.assign({ hidden: isLoading || hideImage, borderRadius: variant === 'Round' ? '50%' : '0', src: src, alt: alt, onError: onError, onLoad: onLoad }, rest), void 0))] }), void 0));
+}
 //# sourceMappingURL=BKJImage.js.map

package/lib/components/BKJImage/BKJImage.styled.d.ts

@@ -1,11 +1,11 @@
-export declare const ImageContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    height: string;
-    width: string;
-}, never>;
-export declare const Image: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, {
-    borderRadius: string;
-    height: string;
-    width: string;
-    hidden: boolean;
-}, never>;
+export declare const ImageContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    height: string;
+    width: string;
+}, never>;
+export declare const Image: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, {
+    borderRadius: string;
+    height: string;
+    width: string;
+    hidden: boolean;
+}, never>;
 //# sourceMappingURL=BKJImage.styled.d.ts.map