@bookjane2/bookjane-design-library 7.3.3 → 7.3.5

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

@@ -1,16 +1,16 @@
-import 'react-toastify/dist/ReactToastify.min.css';
-import { BKJToastMessageType } from './BKJToastMessage.types.js';
-export declare const defaultToastifyCSS: import("styled-components").FlattenSimpleInterpolation;
-export declare const BKJToastOuterWrapperCSS: import("styled-components").FlattenSimpleInterpolation;
-export declare const BKJToastBodyCSS: import("styled-components").FlattenSimpleInterpolation;
-export declare const BKJToastProgressBarCSS: import("styled-components").FlattenSimpleInterpolation;
-export declare const BKJToastCloseButtonCSS: import("styled-components").FlattenSimpleInterpolation;
-export declare const ToastWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-interface IToastIconWrapper {
-    variant: BKJToastMessageType;
-}
-export declare const ToastIconWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IToastIconWrapper, never>;
-export declare const BKJToastTextWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const BKJToastText: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
-export {};
+import 'react-toastify/dist/ReactToastify.min.css';
+import { BKJToastMessageType } from './BKJToastMessage.types.js';
+export declare const defaultToastifyCSS: import("styled-components").FlattenSimpleInterpolation;
+export declare const BKJToastOuterWrapperCSS: import("styled-components").FlattenSimpleInterpolation;
+export declare const BKJToastBodyCSS: import("styled-components").FlattenSimpleInterpolation;
+export declare const BKJToastProgressBarCSS: import("styled-components").FlattenSimpleInterpolation;
+export declare const BKJToastCloseButtonCSS: import("styled-components").FlattenSimpleInterpolation;
+export declare const ToastWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+interface IToastIconWrapper {
+    variant: BKJToastMessageType;
+}
+export declare const ToastIconWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IToastIconWrapper, never>;
+export declare const BKJToastTextWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const BKJToastText: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
+export {};
 //# sourceMappingURL=BKJToastMessage.styled.d.ts.map

package/lib/components/BKJToastMessage/BKJToastMessage.styled.js

@@ -1,118 +1,118 @@
-import styled, { css } from 'styled-components';
-import 'react-toastify/dist/ReactToastify.min.css';
-export const defaultToastifyCSS = css `
-  /* ------------------------------------------- */
-  /* This CSS is to keep the rest of the toasts  */
-  /* appearing how they do by default            */
-  /*                                             */
-  /* We must do this because the default toast   */
-  /* container is too small for our requirements */
-  /*                                             */
-  width: calc(100vw - 1em - 8px) !important;
-  min-width: calc(100vw - 1em - 8px) !important;
-  max-width: calc(100vw - 1em - 8px) !important;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  .toastify__toast {
-    max-height: 48px;
-    overflow: hidden;
-  }
-  .toastify__toast-body {
-    padding: 0;
-  }
-
-  /* ------------------------------------------- */
-`;
-export const BKJToastOuterWrapperCSS = css `
-  width: calc(100% - 200px) !important;
-  margin-left: auto;
-  padding: 0 !important;
-  padding-top: 0 !important;
-  padding-bottom: 0 !important;
-  padding-left: 0 !important;
-  padding-right: 0 !important;
-  margin: 0 !important;
-  background-color: #ffffff !important;
-  border-top: 0 !important;
-  border-bottom: 0 !important;
-  border-left: 0 !important;
-  border-right: 0 !important;
-  box-shadow: 0 2px 8px 0 rgba(13, 51, 32, 0.3) !important;
-  height: 48px !important;
-  min-height: 48px !important;
-  border-radius: 4px !important;
-  max-height: 48px !important;
-  margin-bottom: 8px !important;
-  overflow-y: visible !important;
-  overflow-x: visible !important;
-  &:last-child {
-    margin-bottom: 0;
-  }
-`;
-export const BKJToastBodyCSS = css `
-  padding-top: 0px !important;
-  padding-right: 0px !important;
-  padding-bottom: 0px !important;
-  padding-left: 0px !important;
-  margin: 0 !important;
-  width: 100% !important;
-  border-top: 0 !important;
-  border-bottom: 0 !important;
-  border-left: 0 !important;
-  border-right: 0 !important;
-  max-height: 48px;
-  div {
-    width: 100%;
-  }
-`;
-export const BKJToastProgressBarCSS = css `
-  background-color: #45424e30 !important;
-  height: 1px !important;
-`;
-export const BKJToastCloseButtonCSS = css `
-  position: absolute !important;
-  top: 50% !important;
-  transform: translateY(-50%) !important;
-  right: 12px !important;
-  color: #45424e !important;
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-`;
-export const ToastWrapper = styled.div `
-  display: flex;
-  width: 100%;
-  align-items: center;
-`;
-export const ToastIconWrapper = styled.div `
-  transform: translateX(-1px);
-  border-top-left-radius: 4px;
-  border-bottom-left-radius: 4px;
-  width: 48px;
-  min-width: 48px;
-  max-width: 48px;
-  height: 48px;
-  min-height: 48px;
-  max-height: 48px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  ${({ variant, theme }) => theme.toast[variant]}
-`;
-export const BKJToastTextWrapper = styled.div `
-  height: 100%;
-  padding-right: 38px;
-  padding-left: 12px;
-  flex: 1;
-  min-width: 0;
-  ${({ theme }) => theme.common.Ellipsis};
-`;
-export const BKJToastText = styled.p `
-  ${({ theme }) => theme.fonts.PoppinsText};
-  font-size: 16px;
-  line-height: 24px;
-  color: ${({ theme }) => theme.colors.TextDarkGrey};
-  ${({ theme }) => theme.common.Ellipsis};
-`;
+import styled, { css } from 'styled-components';
+import 'react-toastify/dist/ReactToastify.min.css';
+export const defaultToastifyCSS = css `
+  /* ------------------------------------------- */
+  /* This CSS is to keep the rest of the toasts  */
+  /* appearing how they do by default            */
+  /*                                             */
+  /* We must do this because the default toast   */
+  /* container is too small for our requirements */
+  /*                                             */
+  width: calc(100vw - 1em - 8px) !important;
+  min-width: calc(100vw - 1em - 8px) !important;
+  max-width: calc(100vw - 1em - 8px) !important;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  .toastify__toast {
+    max-height: 48px;
+    overflow: hidden;
+  }
+  .toastify__toast-body {
+    padding: 0;
+  }
+
+  /* ------------------------------------------- */
+`;
+export const BKJToastOuterWrapperCSS = css `
+  width: calc(100% - 200px) !important;
+  margin-left: auto;
+  padding: 0 !important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  margin: 0 !important;
+  background-color: #ffffff !important;
+  border-top: 0 !important;
+  border-bottom: 0 !important;
+  border-left: 0 !important;
+  border-right: 0 !important;
+  box-shadow: 0 2px 8px 0 rgba(13, 51, 32, 0.3) !important;
+  height: 48px !important;
+  min-height: 48px !important;
+  border-radius: 4px !important;
+  max-height: 48px !important;
+  margin-bottom: 8px !important;
+  overflow-y: visible !important;
+  overflow-x: visible !important;
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+export const BKJToastBodyCSS = css `
+  padding-top: 0px !important;
+  padding-right: 0px !important;
+  padding-bottom: 0px !important;
+  padding-left: 0px !important;
+  margin: 0 !important;
+  width: 100% !important;
+  border-top: 0 !important;
+  border-bottom: 0 !important;
+  border-left: 0 !important;
+  border-right: 0 !important;
+  max-height: 48px;
+  div {
+    width: 100%;
+  }
+`;
+export const BKJToastProgressBarCSS = css `
+  background-color: #45424e30 !important;
+  height: 1px !important;
+`;
+export const BKJToastCloseButtonCSS = css `
+  position: absolute !important;
+  top: 50% !important;
+  transform: translateY(-50%) !important;
+  right: 12px !important;
+  color: #45424e !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+`;
+export const ToastWrapper = styled.div `
+  display: flex;
+  width: 100%;
+  align-items: center;
+`;
+export const ToastIconWrapper = styled.div `
+  transform: translateX(-1px);
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+  width: 48px;
+  min-width: 48px;
+  max-width: 48px;
+  height: 48px;
+  min-height: 48px;
+  max-height: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  ${({ variant, theme }) => theme.toast[variant]}
+`;
+export const BKJToastTextWrapper = styled.div `
+  height: 100%;
+  padding-right: 38px;
+  padding-left: 12px;
+  flex: 1;
+  min-width: 0;
+  ${({ theme }) => theme.common.Ellipsis};
+`;
+export const BKJToastText = styled.p `
+  ${({ theme }) => theme.fonts.PoppinsText};
+  font-size: 16px;
+  line-height: 24px;
+  color: ${({ theme }) => theme.colors.TextDarkGrey};
+  ${({ theme }) => theme.common.Ellipsis};
+`;
 //# sourceMappingURL=BKJToastMessage.styled.js.map

package/lib/components/BKJToastMessage/BKJToastMessage.theme.d.ts

@@ -1,3 +1,3 @@
-import { IBKJThemeToastMessage } from './BKJToastMessage.types.js';
-export declare const BKJThemeToastMessage: IBKJThemeToastMessage;
+import { IBKJThemeToastMessage } from './BKJToastMessage.types.js';
+export declare const BKJThemeToastMessage: IBKJThemeToastMessage;
 //# sourceMappingURL=BKJToastMessage.theme.d.ts.map

package/lib/components/BKJToastMessage/BKJToastMessage.theme.js

@@ -1,13 +1,13 @@
-import { css } from 'styled-components';
-export const BKJThemeToastMessage = {
-    Success: css `
-    background-color: #00c18c;
-  `,
-    Warning: css `
-    background-color: #ed9d52;
-  `,
-    Error: css `
-    background-color: #ce1037;
-  `,
-};
+import { css } from 'styled-components';
+export const BKJThemeToastMessage = {
+    Success: css `
+    background-color: #00c18c;
+  `,
+    Warning: css `
+    background-color: #ed9d52;
+  `,
+    Error: css `
+    background-color: #ce1037;
+  `,
+};
 //# sourceMappingURL=BKJToastMessage.theme.js.map

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

@@ -1,13 +1,13 @@
-import { FC } from 'react';
-import { SimpleInterpolation } from 'styled-components';
-export declare type BKJToastMessageType = 'Success' | 'Warning' | 'Error';
-export interface IBKJToastMessage {
-    message: string | FC;
-    variant: BKJToastMessageType;
-}
-export interface IBKJThemeToastMessage {
-    Success: SimpleInterpolation;
-    Warning: SimpleInterpolation;
-    Error: SimpleInterpolation;
-}
+import { FC } from 'react';
+import { SimpleInterpolation } from 'styled-components';
+export declare type BKJToastMessageType = 'Success' | 'Warning' | 'Error';
+export interface IBKJToastMessage {
+    message: string | FC;
+    variant: BKJToastMessageType;
+}
+export interface IBKJThemeToastMessage {
+    Success: SimpleInterpolation;
+    Warning: SimpleInterpolation;
+    Error: SimpleInterpolation;
+}
 //# sourceMappingURL=BKJToastMessage.types.d.ts.map

package/lib/components/BKJToastMessage/BKJToastMessage.types.js

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

package/lib/components/BKJToastMessage/BKJToastMessage.utils.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-import { BKJToastMessageType } from './BKJToastMessage.types.js';
-import ToastErrorIcon from './ToastErrorIcon.js';
-export declare function getIcon(variant: BKJToastMessageType): React.ExoticComponent<{
-    children?: React.ReactNode;
-}> | typeof ToastErrorIcon;
+import React from 'react';
+import { BKJToastMessageType } from './BKJToastMessage.types.js';
+import ToastErrorIcon from './ToastErrorIcon.js';
+export declare function getIcon(variant: BKJToastMessageType): React.ExoticComponent<{
+    children?: React.ReactNode;
+}> | typeof ToastErrorIcon;
 //# sourceMappingURL=BKJToastMessage.utils.d.ts.map

package/lib/components/BKJToastMessage/BKJToastMessage.utils.js

@@ -1,17 +1,17 @@
-import React from 'react';
-import ToastErrorIcon from './ToastErrorIcon.js';
-import ToastSuccessIcon from './ToastSuccessIcon.js';
-import ToastWarnIcon from './ToastWarnIcon.js';
-export function getIcon(variant) {
-    switch (variant) {
-        case 'Success':
-            return ToastSuccessIcon;
-        case 'Warning':
-            return ToastWarnIcon;
-        case 'Error':
-            return ToastErrorIcon;
-        default:
-            return React.Fragment;
-    }
-}
+import React from 'react';
+import ToastErrorIcon from './ToastErrorIcon.js';
+import ToastSuccessIcon from './ToastSuccessIcon.js';
+import ToastWarnIcon from './ToastWarnIcon.js';
+export function getIcon(variant) {
+    switch (variant) {
+        case 'Success':
+            return ToastSuccessIcon;
+        case 'Warning':
+            return ToastWarnIcon;
+        case 'Error':
+            return ToastErrorIcon;
+        default:
+            return React.Fragment;
+    }
+}
 //# sourceMappingURL=BKJToastMessage.utils.js.map

package/lib/components/BKJToastMessage/ToastErrorIcon.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-declare function ToastErrorIcon(): JSX.Element;
-export default ToastErrorIcon;
+/// <reference types="react" />
+declare function ToastErrorIcon(): JSX.Element;
+export default ToastErrorIcon;
 //# sourceMappingURL=ToastErrorIcon.d.ts.map

package/lib/components/BKJToastMessage/ToastErrorIcon.js

@@ -1,12 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled from 'styled-components';
-const IconFont = styled.span `
-  ${({ theme }) => theme.fonts.PoppinsTextMedium}
-  font-size: 28px;
-  color: #ffffff;
-`;
-function ToastErrorIcon() {
-    return _jsx(IconFont, { children: "!" }, void 0);
-}
-export default ToastErrorIcon;
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from 'styled-components';
+const IconFont = styled.span `
+  ${({ theme }) => theme.fonts.PoppinsTextMedium}
+  font-size: 28px;
+  color: #ffffff;
+`;
+function ToastErrorIcon() {
+    return _jsx(IconFont, { children: "!" }, void 0);
+}
+export default ToastErrorIcon;
 //# sourceMappingURL=ToastErrorIcon.js.map

package/lib/components/BKJToastMessage/ToastSuccessIcon.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-declare function ToastSuccessIcon(): JSX.Element;
-export default ToastSuccessIcon;
+/// <reference types="react" />
+declare function ToastSuccessIcon(): JSX.Element;
+export default ToastSuccessIcon;
 //# sourceMappingURL=ToastSuccessIcon.d.ts.map

package/lib/components/BKJToastMessage/ToastSuccessIcon.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function ToastSuccessIcon() {
-    return (_jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", fill: "none", viewBox: "0 0 32 32" }, { children: [_jsx("path", { fill: "#00C18C", fillRule: "evenodd", d: "M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16z", clipRule: "evenodd" }, void 0),
-            _jsx("path", { fill: "#fff", d: "M8 16.333l1.6-1.666 3.733 3 9.067-7 1.6 1.666-10.667 10-5.333-6z" }, void 0)] }), void 0));
-}
-export default ToastSuccessIcon;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function ToastSuccessIcon() {
+    return (_jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", fill: "none", viewBox: "0 0 32 32" }, { children: [_jsx("path", { fill: "#00C18C", fillRule: "evenodd", d: "M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16z", clipRule: "evenodd" }, void 0),
+            _jsx("path", { fill: "#fff", d: "M8 16.333l1.6-1.666 3.733 3 9.067-7 1.6 1.666-10.667 10-5.333-6z" }, void 0)] }), void 0));
+}
+export default ToastSuccessIcon;
 //# sourceMappingURL=ToastSuccessIcon.js.map

package/lib/components/BKJToastMessage/ToastWarnIcon.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-declare function ToastWarnIcon(): JSX.Element;
-export default ToastWarnIcon;
+/// <reference types="react" />
+declare function ToastWarnIcon(): JSX.Element;
+export default ToastWarnIcon;
 //# sourceMappingURL=ToastWarnIcon.d.ts.map

package/lib/components/BKJToastMessage/ToastWarnIcon.js

@@ -1,8 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function ToastWarnIcon() {
-    return (_jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "26", height: "23", fill: "none", viewBox: "0 0 26 23" }, { children: [_jsx("path", { stroke: "#fff", d: "M1.713 22L13 1.054 24.287 22H1.713z" }, void 0),
-            _jsx("path", { fill: "#fff", d: "M11.809 13h2.383v7h-2.383z" }, void 0),
-            _jsx("path", { fill: "#fff", fillRule: "evenodd", d: "M13 11a1.5 1.5 0 10-.001-3.001A1.5 1.5 0 0013 11z", clipRule: "evenodd" }, void 0)] }), void 0));
-}
-export default ToastWarnIcon;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function ToastWarnIcon() {
+    return (_jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "26", height: "23", fill: "none", viewBox: "0 0 26 23" }, { children: [_jsx("path", { stroke: "#fff", d: "M1.713 22L13 1.054 24.287 22H1.713z" }, void 0),
+            _jsx("path", { fill: "#fff", d: "M11.809 13h2.383v7h-2.383z" }, void 0),
+            _jsx("path", { fill: "#fff", fillRule: "evenodd", d: "M13 11a1.5 1.5 0 10-.001-3.001A1.5 1.5 0 0013 11z", clipRule: "evenodd" }, void 0)] }), void 0));
+}
+export default ToastWarnIcon;
 //# sourceMappingURL=ToastWarnIcon.js.map

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

@@ -1,3 +1,3 @@
-import { BKJToastMessage } from './BKJToastMessage.js';
-export default BKJToastMessage;
+import { BKJToastMessage } from './BKJToastMessage.js';
+export default BKJToastMessage;
 //# sourceMappingURL=index.d.ts.map

package/lib/components/BKJToastMessage/index.js

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

package/lib/components/BKJToggleInput/BKJToggleInput.constants.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
-import { BKJThemeToggleInputVariantType, IBKJToggleInputProps } from './BKJToggleInput.types.js';
-export declare const BKJToggleInputComponentMap: Record<BKJThemeToggleInputVariantType, FC<IBKJToggleInputProps>>;
+import { FC } from 'react';
+import { BKJThemeToggleInputVariantType, IBKJToggleInputProps } from './BKJToggleInput.types.js';
+export declare const BKJToggleInputComponentMap: Record<BKJThemeToggleInputVariantType, FC<IBKJToggleInputProps>>;
 //# sourceMappingURL=BKJToggleInput.constants.d.ts.map

package/lib/components/BKJToggleInput/BKJToggleInput.constants.js

@@ -1,59 +1,59 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, Fragment, useCallback, useMemo } from 'react';
-import { BKJToggleButton, BKJToggleInputPillLabelWrapper, BKJToggleInputWrapper, BKJToggleSliderTrack, StyledButton, StyledCheckbox, } from './BKJToggleInput.styled.js';
-const BKJToggleInputSwitch = forwardRef(({ onChange, name, checked, disabled, ...rest }, ref) => {
-    const handleChange = useCallback(() => {
-        !disabled && onChange({ target: { name, value: !Boolean(checked) } });
-    }, [name, onChange, checked, disabled]);
-    const isSelected = useMemo(() => !!checked, [checked]);
-    return (_jsxs(BKJToggleInputWrapper, Object.assign({ ref: ref, onMouseDown: handleChange }, rest, { children: [_jsx(BKJToggleButton, { isSelected: isSelected, disabled: disabled }, void 0),
-            _jsx(BKJToggleSliderTrack, { isSelected: isSelected, disabled: disabled }, void 0)] }), void 0));
-});
-const BKJToggleInputPill = ({ variant, onChange, width, minWidth, checked, children, disabled, name, fontSize, }) => {
-    const handleChange = useCallback((event) => {
-        if (!disabled) {
-            const nextValue = !checked;
-            onChange({
-                ...event,
-                target: {
-                    ...event.target,
-                    name,
-                    value: nextValue,
-                    checked: nextValue,
-                },
-            });
-        }
-    }, [disabled, checked, onChange, name]);
-    const ButtonVariantMap = {
-        PurplePillLeft: checked ? 'PurplePill' : 'PurplePillOutlined',
-        PurplePillRight: checked ? 'PurplePill' : 'PurplePillOutlined',
-        PurpleNoBorderLeft: 'NoStyles',
-        PurpleNoBorderRight: 'NoStyles',
-        Switch: 'NoStyles',
-    };
-    return (_jsx(StyledButton, Object.assign({ onClick: handleChange, variant: ButtonVariantMap[variant], width: width, minWidth: minWidth, disabled: disabled }, { children: (() => {
-            switch (variant) {
-                case 'PurplePillLeft':
-                case 'PurplePillRight':
-                    return (_jsxs(Fragment, { children: [variant === 'PurplePillLeft' && (_jsx(BKJToggleInputPillLabelWrapper, Object.assign({ fontSize: fontSize }, { children: children }), void 0)),
-                            _jsx(StyledCheckbox, { name: name, variant: "PurpleOutlined", isLeft: variant === 'PurplePillLeft', onChange: handleChange, readOnly: true, value: checked }, void 0),
-                            variant === 'PurplePillRight' && (_jsx(BKJToggleInputPillLabelWrapper, Object.assign({ fontSize: fontSize }, { children: children }), void 0))] }, void 0));
-                case 'PurpleNoBorderLeft':
-                case 'PurpleNoBorderRight':
-                    return (_jsxs(Fragment, { children: [variant === 'PurpleNoBorderLeft' && (_jsx(BKJToggleInputPillLabelWrapper, Object.assign({ color: "PrimaryDefault", disabled: disabled, fontSize: fontSize }, { children: children }), void 0)),
-                            _jsx(StyledCheckbox, { name: name, variant: "PurpleSolid", disabled: disabled, isLeft: variant === 'PurpleNoBorderLeft', onChange: handleChange, readOnly: true, value: checked }, void 0),
-                            variant === 'PurpleNoBorderRight' && (_jsx(BKJToggleInputPillLabelWrapper, Object.assign({ color: "PrimaryDefault", disabled: disabled, fontSize: fontSize }, { children: children }), void 0))] }, void 0));
-                case 'Switch':
-                default:
-                    return _jsx(Fragment, {}, void 0);
-            }
-        })() }), void 0));
-};
-export const BKJToggleInputComponentMap = {
-    Switch: BKJToggleInputSwitch,
-    PurplePillRight: BKJToggleInputPill,
-    PurplePillLeft: BKJToggleInputPill,
-    PurpleNoBorderRight: BKJToggleInputPill,
-    PurpleNoBorderLeft: BKJToggleInputPill,
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, Fragment, useCallback, useMemo } from 'react';
+import { BKJToggleButton, BKJToggleInputPillLabelWrapper, BKJToggleInputWrapper, BKJToggleSliderTrack, StyledButton, StyledCheckbox, } from './BKJToggleInput.styled.js';
+const BKJToggleInputSwitch = forwardRef(({ onChange, name, checked, disabled, ...rest }, ref) => {
+    const handleChange = useCallback(() => {
+        !disabled && onChange({ target: { name, value: !Boolean(checked) } });
+    }, [name, onChange, checked, disabled]);
+    const isSelected = useMemo(() => !!checked, [checked]);
+    return (_jsxs(BKJToggleInputWrapper, Object.assign({ ref: ref, onMouseDown: handleChange }, rest, { children: [_jsx(BKJToggleButton, { isSelected: isSelected, disabled: disabled }, void 0),
+            _jsx(BKJToggleSliderTrack, { isSelected: isSelected, disabled: disabled }, void 0)] }), void 0));
+});
+const BKJToggleInputPill = ({ variant, onChange, width, minWidth, checked, children, disabled, name, fontSize, }) => {
+    const handleChange = useCallback((event) => {
+        if (!disabled) {
+            const nextValue = !checked;
+            onChange({
+                ...event,
+                target: {
+                    ...event.target,
+                    name,
+                    value: nextValue,
+                    checked: nextValue,
+                },
+            });
+        }
+    }, [disabled, checked, onChange, name]);
+    const ButtonVariantMap = {
+        PurplePillLeft: checked ? 'PurplePill' : 'PurplePillOutlined',
+        PurplePillRight: checked ? 'PurplePill' : 'PurplePillOutlined',
+        PurpleNoBorderLeft: 'NoStyles',
+        PurpleNoBorderRight: 'NoStyles',
+        Switch: 'NoStyles',
+    };
+    return (_jsx(StyledButton, Object.assign({ onClick: handleChange, variant: ButtonVariantMap[variant], width: width, minWidth: minWidth, disabled: disabled }, { children: (() => {
+            switch (variant) {
+                case 'PurplePillLeft':
+                case 'PurplePillRight':
+                    return (_jsxs(Fragment, { children: [variant === 'PurplePillLeft' && (_jsx(BKJToggleInputPillLabelWrapper, Object.assign({ fontSize: fontSize }, { children: children }), void 0)),
+                            _jsx(StyledCheckbox, { name: name, variant: "PurpleOutlined", isLeft: variant === 'PurplePillLeft', onChange: handleChange, readOnly: true, value: checked }, void 0),
+                            variant === 'PurplePillRight' && (_jsx(BKJToggleInputPillLabelWrapper, Object.assign({ fontSize: fontSize }, { children: children }), void 0))] }, void 0));
+                case 'PurpleNoBorderLeft':
+                case 'PurpleNoBorderRight':
+                    return (_jsxs(Fragment, { children: [variant === 'PurpleNoBorderLeft' && (_jsx(BKJToggleInputPillLabelWrapper, Object.assign({ color: "PrimaryDefault", disabled: disabled, fontSize: fontSize }, { children: children }), void 0)),
+                            _jsx(StyledCheckbox, { name: name, variant: "PurpleSolid", disabled: disabled, isLeft: variant === 'PurpleNoBorderLeft', onChange: handleChange, readOnly: true, value: checked }, void 0),
+                            variant === 'PurpleNoBorderRight' && (_jsx(BKJToggleInputPillLabelWrapper, Object.assign({ color: "PrimaryDefault", disabled: disabled, fontSize: fontSize }, { children: children }), void 0))] }, void 0));
+                case 'Switch':
+                default:
+                    return _jsx(Fragment, {}, void 0);
+            }
+        })() }), void 0));
+};
+export const BKJToggleInputComponentMap = {
+    Switch: BKJToggleInputSwitch,
+    PurplePillRight: BKJToggleInputPill,
+    PurplePillLeft: BKJToggleInputPill,
+    PurpleNoBorderRight: BKJToggleInputPill,
+    PurpleNoBorderLeft: BKJToggleInputPill,
+};
 //# sourceMappingURL=BKJToggleInput.constants.js.map

package/lib/components/BKJToggleInput/BKJToggleInput.d.ts

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

package/lib/components/BKJToggleInput/BKJToggleInput.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { BKJToggleInputComponentMap } from './BKJToggleInput.constants.js';
-export const BKJToggleInput = ({ variant, children, ...rest }) => {
-    const Component = BKJToggleInputComponentMap[variant];
-    return (_jsx(Component, Object.assign({}, rest, { variant: variant }, { children: children }), void 0));
-};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BKJToggleInputComponentMap } from './BKJToggleInput.constants.js';
+export const BKJToggleInput = ({ variant, children, ...rest }) => {
+    const Component = BKJToggleInputComponentMap[variant];
+    return (_jsx(Component, Object.assign({}, rest, { variant: variant }, { children: children }), void 0));
+};
 //# sourceMappingURL=BKJToggleInput.js.map