@veeqo/ui 9.7.1 → 9.9.0

package/dist/components/Modal/components/Dialog/styled.js

@@ -1,18 +1,41 @@
 import styled from 'styled-components';
 import { motion } from 'framer-motion';
-import { getOpaqueHexColor } from '../../../../utils/color.js';
-import { Card } from '../../../Card/Card.js';
-import { theme } from '../../../../theme/index.js';
-import { heightMap, widthMap, fullScreenBreakpointMap } from './constants.js';
-import { MainSection } from '../styled.js';
+import { modalStyles, leftDrawerStyles, rightDrawerStyles } from './styles/modalTypeStyles.js';
+import { baseModalStyles } from './styles/baseStyles.js';
 
-const { breakpoints } = theme;
-const StyledDialog = styled(motion.dialog).attrs({
-    initial: { opacity: 0, y: -50, bounce: 0 },
-    exit: { opacity: 0, y: -50, bounce: 0 },
-    animate: { opacity: 1, y: 0, bounce: 0 },
+// Animation configurations
+const animations = {
+    leftDrawer: {
+        initial: { opacity: 0, x: -300, bounce: 0 },
+        exit: { opacity: 0, x: -300, bounce: 0 },
+        animate: { opacity: 1, x: 0, bounce: 0 },
+    },
+    rightDrawer: {
+        initial: { opacity: 0, x: 300, bounce: 0 },
+        exit: { opacity: 0, x: 300, bounce: 0 },
+        animate: { opacity: 1, x: 0, bounce: 0 },
+    },
+    modal: {
+        initial: { opacity: 0, y: -50, bounce: 0 },
+        exit: { opacity: 0, y: -50, bounce: 0 },
+        animate: { opacity: 1, y: 0, bounce: 0 },
+    },
+};
+const stylesByType = {
+    modal: modalStyles,
+    leftDrawer: leftDrawerStyles,
+    rightDrawer: rightDrawerStyles,
+};
+const StyledDialog = styled(motion.dialog).attrs(({ displayMode }) => ({
+    ...animations[displayMode],
     transition: { type: 'tween', duration: 0.25 },
-}).withConfig({ displayName: "vui--StyledDialog", componentId: "vui--1ohvs0u" }) `padding:0;border:none;border-radius:${theme.sizes.sm};box-shadow:${theme.shadows.lg};min-width:464px;&::backdrop{animation:fadeIn 0.25s ease forwards;}& > ${Card.Surface}{display:flex;flex-direction:column;${({ variant }) => `max-height: ${heightMap[variant]};`} ${MainSection}{padding-bottom:${theme.sizes.md};}${Card.Footer}{margin-top:0;}}@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}@media (min-width: calc(${breakpoints.mobile} + 1px))and (max-width: ${breakpoints.tablet}){max-width:${({ variant }) => widthMap[breakpoints.tablet][variant]};}@media (min-width: ${breakpoints.tablet})and (max-width: ${breakpoints.lgTablet}){max-width:${({ variant }) => widthMap[breakpoints.lgTablet][variant]};}@media (min-width: ${breakpoints.lgTablet})and (max-width: ${breakpoints.desktop}){max-width:${({ variant }) => widthMap[breakpoints.desktop][variant]};}@media (min-width: ${breakpoints.desktop}){max-width:${({ variant }) => widthMap[breakpoints.lgDesktop][variant]};}@media (max-width: ${({ variant }) => fullScreenBreakpointMap[variant]}){margin:0;width:100%;max-width:100vw;max-height:100vh;&,& > ${Card.Surface}{border-radius:0;height:100%;width:100%;max-height:unset;}}&::backdrop{background-color:${getOpaqueHexColor(theme.colors.neutral.ink.base, 0.5)};}&:not([open]){display:block;position:fixed;top:0;left:0;right:0;bottom:0;transform:translate(-50%, -50%);}`;
+})).withConfig({ displayName: "vui--StyledDialog", componentId: "vui--1ohvs0u" }) `${baseModalStyles} ${({ displayMode }) => stylesByType[displayMode]} ${({ appearance }) => appearance === 'secondary' &&
+    `
+    &::backdrop {
+      animation: none;
+      opacity: 0;
+    }
+  `}`;
 
 export { StyledDialog };
 //# sourceMappingURL=styled.js.map

package/dist/components/Modal/components/Dialog/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../../../src/components/Modal/components/Dialog/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { motion } from 'framer-motion';\nimport { getOpaqueHexColor } from '../../../../utils/color';\nimport { Card } from '../../../Card';\nimport { theme } from '../../../../theme';\nimport { ModalVariants } from '../../types';\nimport { fullScreenBreakpointMap, heightMap, widthMap } from './constants';\nimport { MainSection } from '../styled';\n\nconst { breakpoints } = theme;\n\nexport const StyledDialog = styled(motion.dialog).attrs({\n  initial: { opacity: 0, y: -50, bounce: 0 },\n  exit: { opacity: 0, y: -50, bounce: 0 },\n  animate: { opacity: 1, y: 0, bounce: 0 },\n  transition: { type: 'tween', duration: 0.25 },\n})<{ variant: ModalVariants }>`\n  padding: 0;\n  border: none;\n  border-radius: ${theme.sizes.sm};\n  box-shadow: ${theme.shadows.lg};\n\n  min-width: 464px;\n\n  &::backdrop {\n    animation: fadeIn 0.25s ease forwards;\n  }\n\n  & > ${Card.Surface} {\n    display: flex;\n    flex-direction: column;\n\n    ${({ variant }) => `max-height: ${heightMap[variant]};`}\n\n    ${MainSection} {\n      padding-bottom: ${theme.sizes.md};\n    }\n\n    ${Card.Footer} {\n      margin-top: 0;\n    }\n  }\n\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  // ** Responsive Design ** //\n\n  // Tablet\n  @media (min-width: calc(${breakpoints.mobile} + 1px)) and (max-width: ${breakpoints.tablet}) {\n    max-width: ${({ variant }) => widthMap[breakpoints.tablet][variant]};\n  }\n\n  // Lg Tablet\n  @media (min-width: ${breakpoints.tablet}) and (max-width: ${breakpoints.lgTablet}) {\n    max-width: ${({ variant }) => widthMap[breakpoints.lgTablet][variant]};\n  }\n\n  // Desktop\n  @media (min-width: ${breakpoints.lgTablet}) and (max-width: ${breakpoints.desktop}) {\n    max-width: ${({ variant }) => widthMap[breakpoints.desktop][variant]};\n  }\n\n  // Lg Desktop\n  @media (min-width: ${breakpoints.desktop}) {\n    max-width: ${({ variant }) => widthMap[breakpoints.lgDesktop][variant]};\n  }\n\n  // Full Screen Mode\n  @media (max-width: ${({ variant }) => fullScreenBreakpointMap[variant]}) {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n\n    &,\n    & > ${Card.Surface} {\n      border-radius: 0;\n      height: 100%;\n      width: 100%;\n      max-height: unset;\n    }\n  }\n\n  &::backdrop {\n    background-color: ${getOpaqueHexColor(theme.colors.neutral.ink.base, 0.5)};\n  }\n\n  &:not([open]) {\n    display: block;\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    transform: translate(-50%, -50%);\n  }\n`;\n"],"names":[],"mappings":";;;;;;;;AASA,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK;AAEtB,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC;AACtD,IAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AAC1C,IAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AACvC,IAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;IACxC,UAAU,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE;AAC9C,CAAA,CAAC,sHAGiB,KAAK,CAAC,KAAK,CAAC,EAAE,CACjB,YAAA,EAAA,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA,uEAAA,EAQxB,IAAI,CAAC,OAAO,uCAId,CAAC,EAAE,OAAO,EAAE,KAAK,eAAe,SAAS,CAAC,OAAO,CAAC,CAAA,CAAA,CAAG,CAErD,CAAA,EAAA,WAAW,mBACO,KAAK,CAAC,KAAK,CAAC,EAAE,KAGhC,IAAI,CAAC,MAAM,CAAA,yFAAA,EAiBW,WAAW,CAAC,MAAM,2BAA4B,WAAW,CAAC,MAAM,CAC3E,YAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAK,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAA,qBAAA,EAIhD,WAAW,CAAC,MAAM,oBAAqB,WAAW,CAAC,QAAQ,CAAA,YAAA,EACjE,CAAC,EAAE,OAAO,EAAE,KAAK,QAAQ,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,wBAIlD,WAAW,CAAC,QAAQ,CAAA,iBAAA,EAAqB,WAAW,CAAC,OAAO,eAClE,CAAC,EAAE,OAAO,EAAE,KAAK,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAIjD,qBAAA,EAAA,WAAW,CAAC,OAAO,CAAA,YAAA,EACzB,CAAC,EAAE,OAAO,EAAE,KAAK,QAAQ,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAA,qBAAA,EAInD,CAAC,EAAE,OAAO,EAAE,KAAK,uBAAuB,CAAC,OAAO,CAAC,CAO9D,6DAAA,EAAA,IAAI,CAAC,OAAO,CAAA,wFAAA,EASE,iBAAiB,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../../../src/components/Modal/components/Dialog/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { motion } from 'framer-motion';\nimport { ModalAppearance, ModalTypes, ModalVariants } from '../../types';\nimport { leftDrawerStyles, modalStyles, rightDrawerStyles } from './styles/modalTypeStyles';\nimport { baseModalStyles } from './styles/baseStyles';\n\n// Animation configurations\nconst animations = {\n  leftDrawer: {\n    initial: { opacity: 0, x: -300, bounce: 0 },\n    exit: { opacity: 0, x: -300, bounce: 0 },\n    animate: { opacity: 1, x: 0, bounce: 0 },\n  },\n  rightDrawer: {\n    initial: { opacity: 0, x: 300, bounce: 0 },\n    exit: { opacity: 0, x: 300, bounce: 0 },\n    animate: { opacity: 1, x: 0, bounce: 0 },\n  },\n  modal: {\n    initial: { opacity: 0, y: -50, bounce: 0 },\n    exit: { opacity: 0, y: -50, bounce: 0 },\n    animate: { opacity: 1, y: 0, bounce: 0 },\n  },\n};\n\nconst stylesByType = {\n  modal: modalStyles,\n  leftDrawer: leftDrawerStyles,\n  rightDrawer: rightDrawerStyles,\n};\n\nexport const StyledDialog = styled(motion.dialog).attrs<{ displayMode: ModalTypes }>(\n  ({ displayMode }) => ({\n    ...animations[displayMode],\n    transition: { type: 'tween', duration: 0.25 },\n  }),\n)<{ variant: ModalVariants; displayMode: ModalTypes; appearance?: ModalAppearance }>`\n  ${baseModalStyles}\n  ${({ displayMode }) => stylesByType[displayMode]}\n\n  ${({ appearance }) =>\n    appearance === 'secondary' &&\n    `\n    &::backdrop {\n      animation: none;\n      opacity: 0;\n    }\n  `}\n`;\n"],"names":[],"mappings":";;;;;AAMA;AACA,MAAM,UAAU,GAAG;AACjB,IAAA,UAAU,EAAE;AACV,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE;AAC3C,QAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE;AACxC,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;AACzC,KAAA;AACD,IAAA,WAAW,EAAE;AACX,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AAC1C,QAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AACvC,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;AACzC,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AAC1C,QAAA,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;AACvC,QAAA,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;AACzC,KAAA;CACF;AAED,MAAM,YAAY,GAAG;AACnB,IAAA,KAAK,EAAE,WAAW;AAClB,IAAA,UAAU,EAAE,gBAAgB;AAC5B,IAAA,WAAW,EAAE,iBAAiB;CAC/B;MAEY,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,CACrD,CAAC,EAAE,WAAW,EAAE,MAAM;IACpB,GAAG,UAAU,CAAC,WAAW,CAAC;IAC1B,UAAU,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE;CAC9C,CAAC,CACH,CACG,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,EAAA,eAAe,CACf,CAAA,EAAA,CAAC,EAAE,WAAW,EAAE,KAAK,YAAY,CAAC,WAAW,CAAC,CAE9C,CAAA,EAAA,CAAC,EAAE,UAAU,EAAE,KACf,UAAU,KAAK,WAAW;AAC1B,IAAA;;;;;AAKD,EAAA,CAAA,CAAA;;;;"}

package/dist/components/Modal/components/Dialog/styles/baseStyles.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var styled = require('styled-components');
+var color = require('../../../../../utils/color.cjs');
+var Card = require('../../../../Card/Card.cjs');
+var index = require('../../../../../theme/index.cjs');
+var styled$1 = require('../../styled.cjs');
+var constants = require('../constants.cjs');
+
+const baseModalStyles = styled.css `padding:0;border:none;border-radius:${index.theme.sizes.sm};box-shadow:${index.theme.shadows.lg};z-index:${index.theme.layers.modal};&::backdrop{animation:fadeIn 0.25s ease forwards;background-color:${color.getOpaqueHexColor(index.theme.colors.neutral.ink.base, 0.5)};width:100%;height:100%;}@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}& > ${Card.Card.Surface}{display:flex;flex-direction:column;${styled$1.MainSection}{padding-bottom:${index.theme.sizes.md};}${Card.Card.Footer}{margin-top:0;}}@media (max-width: ${({ variant }) => constants.fullScreenBreakpointMap[variant]}){margin:0;width:100%;max-width:100vw;max-height:100vh;&,& > ${Card.Card.Surface}{border-radius:0;height:100%;width:100%;max-height:unset;}}`;
+
+exports.baseModalStyles = baseModalStyles;
+//# sourceMappingURL=baseStyles.cjs.map

package/dist/components/Modal/components/Dialog/styles/baseStyles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"baseStyles.cjs","sources":["../../../../../../src/components/Modal/components/Dialog/styles/baseStyles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { ModalVariants } from 'src/components/Modal/types';\nimport { getOpaqueHexColor } from '../../../../../utils/color';\nimport { Card } from '../../../../Card';\nimport { theme } from '../../../../../theme';\nimport { MainSection } from '../../styled';\nimport { fullScreenBreakpointMap } from '../constants';\n\nexport const baseModalStyles = css<{ variant: ModalVariants }>`\n  padding: 0;\n  border: none;\n  border-radius: ${theme.sizes.sm};\n  box-shadow: ${theme.shadows.lg};\n  z-index: ${theme.layers.modal};\n\n  &::backdrop {\n    animation: fadeIn 0.25s ease forwards;\n    background-color: ${getOpaqueHexColor(theme.colors.neutral.ink.base, 0.5)};\n    width: 100%;\n    height: 100%;\n  }\n\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  & > ${Card.Surface} {\n    display: flex;\n    flex-direction: column;\n\n    ${MainSection} {\n      padding-bottom: ${theme.sizes.md};\n    }\n\n    ${Card.Footer} {\n      margin-top: 0;\n    }\n  }\n\n  @media (max-width: ${({ variant }) => fullScreenBreakpointMap[variant]}) {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n\n    &,\n    & > ${Card.Surface} {\n      border-radius: 0;\n      height: 100%;\n      width: 100%;\n      max-height: unset;\n    }\n  }\n`;\n"],"names":["css","theme","getOpaqueHexColor","Card","MainSection","fullScreenBreakpointMap"],"mappings":";;;;;;;;;AAQO,MAAM,eAAe,GAAGA,UAAG,CAGf,CAAA,oCAAA,EAAAC,WAAK,CAAC,KAAK,CAAC,EAAE,CACjB,YAAA,EAAAA,WAAK,CAAC,OAAO,CAAC,EAAE,CAAA,SAAA,EACnBA,WAAK,CAAC,MAAM,CAAC,KAAK,CAIP,mEAAA,EAAAC,uBAAiB,CAACD,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,CAAA,8EAAA,EAcrEE,SAAI,CAAC,OAAO,CAId,oCAAA,EAAAC,oBAAW,CACO,gBAAA,EAAAH,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,EAAA,EAGhCE,SAAI,CAAC,MAAM,CAKM,mCAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAKE,iCAAuB,CAAC,OAAO,CAAC,CAO9D,6DAAA,EAAAF,SAAI,CAAC,OAAO;;;;"}

package/dist/components/Modal/components/Dialog/styles/baseStyles.d.ts

@@ -0,0 +1,4 @@
+import { ModalVariants } from 'src/components/Modal/types';
+export declare const baseModalStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
+    variant: ModalVariants;
+}, any>>;

package/dist/components/Modal/components/Dialog/styles/baseStyles.js

@@ -0,0 +1,11 @@
+import { css } from 'styled-components';
+import { getOpaqueHexColor } from '../../../../../utils/color.js';
+import { Card } from '../../../../Card/Card.js';
+import { theme } from '../../../../../theme/index.js';
+import { MainSection } from '../../styled.js';
+import { fullScreenBreakpointMap } from '../constants.js';
+
+const baseModalStyles = css `padding:0;border:none;border-radius:${theme.sizes.sm};box-shadow:${theme.shadows.lg};z-index:${theme.layers.modal};&::backdrop{animation:fadeIn 0.25s ease forwards;background-color:${getOpaqueHexColor(theme.colors.neutral.ink.base, 0.5)};width:100%;height:100%;}@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}& > ${Card.Surface}{display:flex;flex-direction:column;${MainSection}{padding-bottom:${theme.sizes.md};}${Card.Footer}{margin-top:0;}}@media (max-width: ${({ variant }) => fullScreenBreakpointMap[variant]}){margin:0;width:100%;max-width:100vw;max-height:100vh;&,& > ${Card.Surface}{border-radius:0;height:100%;width:100%;max-height:unset;}}`;
+
+export { baseModalStyles };
+//# sourceMappingURL=baseStyles.js.map

package/dist/components/Modal/components/Dialog/styles/baseStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"baseStyles.js","sources":["../../../../../../src/components/Modal/components/Dialog/styles/baseStyles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { ModalVariants } from 'src/components/Modal/types';\nimport { getOpaqueHexColor } from '../../../../../utils/color';\nimport { Card } from '../../../../Card';\nimport { theme } from '../../../../../theme';\nimport { MainSection } from '../../styled';\nimport { fullScreenBreakpointMap } from '../constants';\n\nexport const baseModalStyles = css<{ variant: ModalVariants }>`\n  padding: 0;\n  border: none;\n  border-radius: ${theme.sizes.sm};\n  box-shadow: ${theme.shadows.lg};\n  z-index: ${theme.layers.modal};\n\n  &::backdrop {\n    animation: fadeIn 0.25s ease forwards;\n    background-color: ${getOpaqueHexColor(theme.colors.neutral.ink.base, 0.5)};\n    width: 100%;\n    height: 100%;\n  }\n\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  & > ${Card.Surface} {\n    display: flex;\n    flex-direction: column;\n\n    ${MainSection} {\n      padding-bottom: ${theme.sizes.md};\n    }\n\n    ${Card.Footer} {\n      margin-top: 0;\n    }\n  }\n\n  @media (max-width: ${({ variant }) => fullScreenBreakpointMap[variant]}) {\n    margin: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: 100vh;\n\n    &,\n    & > ${Card.Surface} {\n      border-radius: 0;\n      height: 100%;\n      width: 100%;\n      max-height: unset;\n    }\n  }\n`;\n"],"names":[],"mappings":";;;;;;;AAQO,MAAM,eAAe,GAAG,GAAG,CAGf,CAAA,oCAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,CACjB,YAAA,EAAA,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA,SAAA,EACnB,KAAK,CAAC,MAAM,CAAC,KAAK,CAIP,mEAAA,EAAA,iBAAiB,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,CAAA,8EAAA,EAcrE,IAAI,CAAC,OAAO,CAId,oCAAA,EAAA,WAAW,CACO,gBAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,EAAA,EAGhC,IAAI,CAAC,MAAM,CAKM,mCAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAK,uBAAuB,CAAC,OAAO,CAAC,CAO9D,6DAAA,EAAA,IAAI,CAAC,OAAO;;;;"}

package/dist/components/Modal/components/Dialog/styles/modalTypeStyles.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+var styled = require('styled-components');
+var Card = require('../../../../Card/Card.cjs');
+var index = require('../../../../../theme/index.cjs');
+var constants = require('../constants.cjs');
+
+const { breakpoints } = index.theme;
+const modalStyles = styled.css `min-width:464px;& > ${Card.Card.Surface}{max-height:${({ variant }) => constants.heightMap[variant]};}&:not([open]){display:block;position:fixed;inset:0;transform:translate(-50%, -50%);}@media (min-width: calc(${breakpoints.mobile} + 1px))and (max-width: ${breakpoints.tablet}){max-width:${({ variant }) => constants.widthMap[breakpoints.tablet][variant]};}@media (min-width: ${breakpoints.tablet})and (max-width: ${breakpoints.lgTablet}){max-width:${({ variant }) => constants.widthMap[breakpoints.lgTablet][variant]};}@media (min-width: ${breakpoints.lgTablet})and (max-width: ${breakpoints.desktop}){max-width:${({ variant }) => constants.widthMap[breakpoints.desktop][variant]};}@media (min-width: ${breakpoints.desktop}){max-width:${({ variant }) => constants.widthMap[breakpoints.lgDesktop][variant]};}`;
+const sideDrawerBaseStyles = styled.css `height:100%;max-height:100%;min-width:320px;width:400px;margin:0;position:fixed;transform:none;border-radius:0;overflow:visible;& > ${Card.Card.Surface}{border-radius:0;height:100%;}&:not([open]){display:block;}`;
+const leftDrawerStyles = styled.css `${sideDrawerBaseStyles} inset:0 auto 0 0;`;
+const rightDrawerStyles = styled.css `${sideDrawerBaseStyles} inset:0 0 0 auto;`;
+
+exports.leftDrawerStyles = leftDrawerStyles;
+exports.modalStyles = modalStyles;
+exports.rightDrawerStyles = rightDrawerStyles;
+//# sourceMappingURL=modalTypeStyles.cjs.map

package/dist/components/Modal/components/Dialog/styles/modalTypeStyles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"modalTypeStyles.cjs","sources":["../../../../../../src/components/Modal/components/Dialog/styles/modalTypeStyles.ts"],"sourcesContent":["import { ModalVariants } from 'src/components/Modal/types';\nimport { css } from 'styled-components';\nimport { Card } from '../../../../Card';\nimport { theme } from '../../../../../theme';\nimport { heightMap, widthMap } from '../constants';\n\nconst { breakpoints } = theme;\n\nexport const modalStyles = css<{ variant: ModalVariants }>`\n  min-width: 464px;\n\n  & > ${Card.Surface} {\n    max-height: ${({ variant }) => heightMap[variant]};\n  }\n\n  &:not([open]) {\n    display: block;\n    position: fixed;\n    inset: 0;\n    transform: translate(-50%, -50%);\n  }\n\n  // ** Responsive Design ** //\n\n  // Tablet\n  @media (min-width: calc(${breakpoints.mobile} + 1px)) and (max-width: ${breakpoints.tablet}) {\n    max-width: ${({ variant }) => widthMap[breakpoints.tablet][variant]};\n  }\n\n  // Lg Tablet\n  @media (min-width: ${breakpoints.tablet}) and (max-width: ${breakpoints.lgTablet}) {\n    max-width: ${({ variant }) => widthMap[breakpoints.lgTablet][variant]};\n  }\n\n  // Desktop\n  @media (min-width: ${breakpoints.lgTablet}) and (max-width: ${breakpoints.desktop}) {\n    max-width: ${({ variant }) => widthMap[breakpoints.desktop][variant]};\n  }\n\n  // Lg Desktop\n  @media (min-width: ${breakpoints.desktop}) {\n    max-width: ${({ variant }) => widthMap[breakpoints.lgDesktop][variant]};\n  }\n`;\n\nconst sideDrawerBaseStyles = css`\n  height: 100%;\n  max-height: 100%;\n  min-width: 320px;\n  width: 400px;\n  margin: 0;\n  position: fixed;\n  transform: none;\n  border-radius: 0;\n  overflow: visible;\n\n  & > ${Card.Surface} {\n    border-radius: 0;\n    height: 100%;\n  }\n\n  &:not([open]) {\n    display: block;\n  }\n`;\n\nexport const leftDrawerStyles = css`\n  ${sideDrawerBaseStyles}\n  inset: 0 auto 0 0;\n`;\n\nexport const rightDrawerStyles = css`\n  ${sideDrawerBaseStyles}\n  inset: 0 0 0 auto;\n`;\n"],"names":["theme","css","Card","heightMap","widthMap"],"mappings":";;;;;;;AAMA,MAAM,EAAE,WAAW,EAAE,GAAGA,WAAK;AAEhB,MAAA,WAAW,GAAGC,UAAG,CAGtB,CAAA,oBAAA,EAAAC,SAAI,CAAC,OAAO,CACF,YAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAKC,mBAAS,CAAC,OAAO,CAAC,CAAA,8GAAA,EAazB,WAAW,CAAC,MAAM,CAAA,wBAAA,EAA4B,WAAW,CAAC,MAAM,CAC3E,YAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAKC,kBAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAA,qBAAA,EAIhD,WAAW,CAAC,MAAM,CAAA,iBAAA,EAAqB,WAAW,CAAC,QAAQ,CAAA,YAAA,EACjE,CAAC,EAAE,OAAO,EAAE,KAAKA,kBAAQ,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAA,qBAAA,EAIlD,WAAW,CAAC,QAAQ,CAAqB,iBAAA,EAAA,WAAW,CAAC,OAAO,CAClE,YAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAKA,kBAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAIjD,qBAAA,EAAA,WAAW,CAAC,OAAO,CACzB,YAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAKA,kBAAQ,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAA,EAAA;AAI1E,MAAM,oBAAoB,GAAGH,UAAG,CAAA,CAAA,oIAAA,EAWxBC,SAAI,CAAC,OAAO,6DAQnB;MAEY,gBAAgB,GAAGD,UAAG,CAC/B,CAAA,EAAA,oBAAoB;MAIX,iBAAiB,GAAGA,UAAG,CAChC,CAAA,EAAA,oBAAoB;;;;;;"}

package/dist/components/Modal/components/Dialog/styles/modalTypeStyles.d.ts

@@ -0,0 +1,6 @@
+import { ModalVariants } from 'src/components/Modal/types';
+export declare const modalStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<{
+    variant: ModalVariants;
+}, any>>;
+export declare const leftDrawerStyles: import("styled-components").FlattenSimpleInterpolation;
+export declare const rightDrawerStyles: import("styled-components").FlattenSimpleInterpolation;

package/dist/components/Modal/components/Dialog/styles/modalTypeStyles.js

@@ -0,0 +1,13 @@
+import { css } from 'styled-components';
+import { Card } from '../../../../Card/Card.js';
+import { theme } from '../../../../../theme/index.js';
+import { heightMap, widthMap } from '../constants.js';
+
+const { breakpoints } = theme;
+const modalStyles = css `min-width:464px;& > ${Card.Surface}{max-height:${({ variant }) => heightMap[variant]};}&:not([open]){display:block;position:fixed;inset:0;transform:translate(-50%, -50%);}@media (min-width: calc(${breakpoints.mobile} + 1px))and (max-width: ${breakpoints.tablet}){max-width:${({ variant }) => widthMap[breakpoints.tablet][variant]};}@media (min-width: ${breakpoints.tablet})and (max-width: ${breakpoints.lgTablet}){max-width:${({ variant }) => widthMap[breakpoints.lgTablet][variant]};}@media (min-width: ${breakpoints.lgTablet})and (max-width: ${breakpoints.desktop}){max-width:${({ variant }) => widthMap[breakpoints.desktop][variant]};}@media (min-width: ${breakpoints.desktop}){max-width:${({ variant }) => widthMap[breakpoints.lgDesktop][variant]};}`;
+const sideDrawerBaseStyles = css `height:100%;max-height:100%;min-width:320px;width:400px;margin:0;position:fixed;transform:none;border-radius:0;overflow:visible;& > ${Card.Surface}{border-radius:0;height:100%;}&:not([open]){display:block;}`;
+const leftDrawerStyles = css `${sideDrawerBaseStyles} inset:0 auto 0 0;`;
+const rightDrawerStyles = css `${sideDrawerBaseStyles} inset:0 0 0 auto;`;
+
+export { leftDrawerStyles, modalStyles, rightDrawerStyles };
+//# sourceMappingURL=modalTypeStyles.js.map

package/dist/components/Modal/components/Dialog/styles/modalTypeStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modalTypeStyles.js","sources":["../../../../../../src/components/Modal/components/Dialog/styles/modalTypeStyles.ts"],"sourcesContent":["import { ModalVariants } from 'src/components/Modal/types';\nimport { css } from 'styled-components';\nimport { Card } from '../../../../Card';\nimport { theme } from '../../../../../theme';\nimport { heightMap, widthMap } from '../constants';\n\nconst { breakpoints } = theme;\n\nexport const modalStyles = css<{ variant: ModalVariants }>`\n  min-width: 464px;\n\n  & > ${Card.Surface} {\n    max-height: ${({ variant }) => heightMap[variant]};\n  }\n\n  &:not([open]) {\n    display: block;\n    position: fixed;\n    inset: 0;\n    transform: translate(-50%, -50%);\n  }\n\n  // ** Responsive Design ** //\n\n  // Tablet\n  @media (min-width: calc(${breakpoints.mobile} + 1px)) and (max-width: ${breakpoints.tablet}) {\n    max-width: ${({ variant }) => widthMap[breakpoints.tablet][variant]};\n  }\n\n  // Lg Tablet\n  @media (min-width: ${breakpoints.tablet}) and (max-width: ${breakpoints.lgTablet}) {\n    max-width: ${({ variant }) => widthMap[breakpoints.lgTablet][variant]};\n  }\n\n  // Desktop\n  @media (min-width: ${breakpoints.lgTablet}) and (max-width: ${breakpoints.desktop}) {\n    max-width: ${({ variant }) => widthMap[breakpoints.desktop][variant]};\n  }\n\n  // Lg Desktop\n  @media (min-width: ${breakpoints.desktop}) {\n    max-width: ${({ variant }) => widthMap[breakpoints.lgDesktop][variant]};\n  }\n`;\n\nconst sideDrawerBaseStyles = css`\n  height: 100%;\n  max-height: 100%;\n  min-width: 320px;\n  width: 400px;\n  margin: 0;\n  position: fixed;\n  transform: none;\n  border-radius: 0;\n  overflow: visible;\n\n  & > ${Card.Surface} {\n    border-radius: 0;\n    height: 100%;\n  }\n\n  &:not([open]) {\n    display: block;\n  }\n`;\n\nexport const leftDrawerStyles = css`\n  ${sideDrawerBaseStyles}\n  inset: 0 auto 0 0;\n`;\n\nexport const rightDrawerStyles = css`\n  ${sideDrawerBaseStyles}\n  inset: 0 0 0 auto;\n`;\n"],"names":[],"mappings":";;;;;AAMA,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK;AAEhB,MAAA,WAAW,GAAG,GAAG,CAGtB,CAAA,oBAAA,EAAA,IAAI,CAAC,OAAO,CACF,YAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAK,SAAS,CAAC,OAAO,CAAC,CAAA,8GAAA,EAazB,WAAW,CAAC,MAAM,CAAA,wBAAA,EAA4B,WAAW,CAAC,MAAM,CAC3E,YAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAK,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAA,qBAAA,EAIhD,WAAW,CAAC,MAAM,CAAA,iBAAA,EAAqB,WAAW,CAAC,QAAQ,CAAA,YAAA,EACjE,CAAC,EAAE,OAAO,EAAE,KAAK,QAAQ,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAA,qBAAA,EAIlD,WAAW,CAAC,QAAQ,CAAqB,iBAAA,EAAA,WAAW,CAAC,OAAO,CAClE,YAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAK,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAIjD,qBAAA,EAAA,WAAW,CAAC,OAAO,CACzB,YAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAK,QAAQ,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAA,EAAA;AAI1E,MAAM,oBAAoB,GAAG,GAAG,CAAA,CAAA,oIAAA,EAWxB,IAAI,CAAC,OAAO,6DAQnB;MAEY,gBAAgB,GAAG,GAAG,CAC/B,CAAA,EAAA,oBAAoB;MAIX,iBAAiB,GAAG,GAAG,CAChC,CAAA,EAAA,oBAAoB;;;;"}

package/dist/components/Modal/types.cjs

@@ -12,7 +12,14 @@ const hasHeaderSlot = (props) => {
 const hasFooterSlot = (props) => {
     return !!props.footerSlot;
 };
+/**
+ * Type guard to check if the modal is a sidedraw
+ */
+const isSideDraw = (props) => {
+    return props.displayMode === 'leftDrawer' || props.displayMode === 'rightDrawer';
+};
 
 exports.hasFooterSlot = hasFooterSlot;
 exports.hasHeaderSlot = hasHeaderSlot;
+exports.isSideDraw = isSideDraw;
 //# sourceMappingURL=types.cjs.map

package/dist/components/Modal/types.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"types.cjs","sources":["../../../src/components/Modal/types.ts"],"sourcesContent":["import { ButtonProps } from '../Button/types';\n\nexport type ModalVariants = 'xs' | 'sm' | 'base' | 'lg';\n\n// Base Modal props shared by all variants.\ntype BaseModalProps = {\n  shouldShow: boolean;\n  showHeaderCloseButton?: boolean;\n  preventClose?: boolean;\n  fullBleed?: boolean;\n  variant?: ModalVariants;\n  onClose: () => void;\n  children: React.ReactNode;\n  className?: string;\n};\n\n// Optional slot types.\n\ntype WithHeaderSlot = {\n  headerSlot: React.ReactNode;\n};\n\ntype WithFooterSlot = {\n  footerSlot: React.ReactNode;\n};\n\n// Default header and footer options.\n\ntype DefaultHeaderOptions = {\n  headerTitle: string;\n  headerSubtitle?: string;\n};\n\nexport type Action = { label: string } & ButtonProps;\ntype DefaultFooterOptions = {\n  leftActions?: Action[];\n  rightActions?: Action[];\n};\n\n// Either we have a header slot or default header options, same for footer.\ntype HeaderOptions = WithHeaderSlot | DefaultHeaderOptions;\ntype FooterOptions = WithFooterSlot | DefaultFooterOptions;\n\n// Modal props are shared props + the header and footer options (potentially with slots.)\nexport type ModalProps = BaseModalProps & HeaderOptions & FooterOptions;\n\n/**\n * Type guard to check if a header slot has been passed to the component.\n */\nexport const hasHeaderSlot = (\n  props: ModalProps,\n): props is BaseModalProps & WithHeaderSlot & FooterOptions => {\n  return !!(props as WithHeaderSlot).headerSlot;\n};\n\n/**\n * Type guard to check if a footer slot has been passed to the component.\n */\nexport const hasFooterSlot = (\n  props: ModalProps,\n): props is BaseModalProps & HeaderOptions & WithFooterSlot => {\n  return !!(props as WithFooterSlot).footerSlot;\n};\n"],"names":[],"mappings":";;AA8CA;;AAEG;AACU,MAAA,aAAa,GAAG,CAC3B,KAAiB,KAC2C;AAC5D,IAAA,OAAO,CAAC,CAAE,KAAwB,CAAC,UAAU;AAC/C;AAEA;;AAEG;AACU,MAAA,aAAa,GAAG,CAC3B,KAAiB,KAC2C;AAC5D,IAAA,OAAO,CAAC,CAAE,KAAwB,CAAC,UAAU;AAC/C;;;;;"}
+{"version":3,"file":"types.cjs","sources":["../../../src/components/Modal/types.ts"],"sourcesContent":["import { CSSProperties, HTMLAttributes } from 'react';\nimport { ButtonProps } from '../Button/types';\n\nexport type ModalVariants = 'xs' | 'sm' | 'base' | 'lg';\nexport type ModalTypes = 'modal' | 'leftDrawer' | 'rightDrawer';\nexport type ModalAppearance = 'primary' | 'secondary';\n\n// Base Modal props shared by all variants.\ntype BaseModalProps = {\n  shouldShow: boolean;\n  showHeaderCloseButton?: boolean;\n  preventClose?: boolean;\n  fullBleed?: boolean;\n  variant?: ModalVariants;\n  displayMode?: ModalTypes;\n  style?: CSSProperties;\n  onClose: () => void | boolean;\n  children?: React.ReactNode;\n  className?: string;\n} & Omit<HTMLAttributes<HTMLDialogElement>, 'onClose'>;\n\n// Optional slot types.\n\ntype WithHeaderSlot = {\n  headerSlot: React.ReactNode;\n};\n\ntype WithFooterSlot = {\n  footerSlot: React.ReactNode;\n};\n\ntype SideDrawType = {\n  displayMode: 'leftDrawer' | 'rightDrawer';\n  appearance?: ModalAppearance; // Required for sidedraw\n};\n\n// Default header and footer options.\n\ntype DefaultHeaderOptions = {\n  headerTitle: string;\n  headerSubtitle?: string;\n};\n\ntype ModalType = {\n  displayMode?: 'modal';\n};\n\nexport type Action = { label: string } & ButtonProps;\ntype DefaultFooterOptions = {\n  leftActions?: Action[];\n  rightActions?: Action[];\n};\n\n// Either we have a header slot or default header options, same for footer.\ntype HeaderOptions = WithHeaderSlot | DefaultHeaderOptions;\ntype FooterOptions = WithFooterSlot | DefaultFooterOptions;\ntype TypeProps = ModalType | SideDrawType;\n\n// Modal props are shared props + the header and footer options (potentially with slots.)\nexport type ModalProps = BaseModalProps & HeaderOptions & FooterOptions & TypeProps;\n\n/**\n * Type guard to check if a header slot has been passed to the component.\n */\nexport const hasHeaderSlot = (\n  props: ModalProps,\n): props is BaseModalProps & WithHeaderSlot & FooterOptions & TypeProps => {\n  return !!(props as WithHeaderSlot).headerSlot;\n};\n\n/**\n * Type guard to check if a footer slot has been passed to the component.\n */\nexport const hasFooterSlot = (\n  props: ModalProps,\n): props is BaseModalProps & HeaderOptions & WithFooterSlot & TypeProps => {\n  return !!(props as WithFooterSlot).footerSlot;\n};\n\n/**\n * Type guard to check if the modal is a sidedraw\n */\nexport const isSideDraw = (\n  props: ModalProps,\n): props is BaseModalProps & HeaderOptions & FooterOptions & SideDrawType => {\n  return props.displayMode === 'leftDrawer' || props.displayMode === 'rightDrawer';\n};\n"],"names":[],"mappings":";;AA6DA;;AAEG;AACU,MAAA,aAAa,GAAG,CAC3B,KAAiB,KACuD;AACxE,IAAA,OAAO,CAAC,CAAE,KAAwB,CAAC,UAAU;AAC/C;AAEA;;AAEG;AACU,MAAA,aAAa,GAAG,CAC3B,KAAiB,KACuD;AACxE,IAAA,OAAO,CAAC,CAAE,KAAwB,CAAC,UAAU;AAC/C;AAEA;;AAEG;AACU,MAAA,UAAU,GAAG,CACxB,KAAiB,KACyD;IAC1E,OAAO,KAAK,CAAC,WAAW,KAAK,YAAY,IAAI,KAAK,CAAC,WAAW,KAAK,aAAa;AAClF;;;;;;"}

package/dist/components/Modal/types.d.ts

@@ -1,26 +1,37 @@
-/// <reference types="react" />
+import { CSSProperties, HTMLAttributes } from 'react';
 import { ButtonProps } from '../Button/types';
 export type ModalVariants = 'xs' | 'sm' | 'base' | 'lg';
+export type ModalTypes = 'modal' | 'leftDrawer' | 'rightDrawer';
+export type ModalAppearance = 'primary' | 'secondary';
 type BaseModalProps = {
     shouldShow: boolean;
     showHeaderCloseButton?: boolean;
     preventClose?: boolean;
     fullBleed?: boolean;
     variant?: ModalVariants;
-    onClose: () => void;
-    children: React.ReactNode;
+    displayMode?: ModalTypes;
+    style?: CSSProperties;
+    onClose: () => void | boolean;
+    children?: React.ReactNode;
     className?: string;
-};
+} & Omit<HTMLAttributes<HTMLDialogElement>, 'onClose'>;
 type WithHeaderSlot = {
     headerSlot: React.ReactNode;
 };
 type WithFooterSlot = {
     footerSlot: React.ReactNode;
 };
+type SideDrawType = {
+    displayMode: 'leftDrawer' | 'rightDrawer';
+    appearance?: ModalAppearance;
+};
 type DefaultHeaderOptions = {
     headerTitle: string;
     headerSubtitle?: string;
 };
+type ModalType = {
+    displayMode?: 'modal';
+};
 export type Action = {
     label: string;
 } & ButtonProps;
@@ -30,13 +41,51 @@ type DefaultFooterOptions = {
 };
 type HeaderOptions = WithHeaderSlot | DefaultHeaderOptions;
 type FooterOptions = WithFooterSlot | DefaultFooterOptions;
-export type ModalProps = BaseModalProps & HeaderOptions & FooterOptions;
+type TypeProps = ModalType | SideDrawType;
+export type ModalProps = BaseModalProps & HeaderOptions & FooterOptions & TypeProps;
 /**
  * Type guard to check if a header slot has been passed to the component.
  */
-export declare const hasHeaderSlot: (props: ModalProps) => props is BaseModalProps & WithHeaderSlot & FooterOptions;
+export declare const hasHeaderSlot: (props: ModalProps) => props is {
+    shouldShow: boolean;
+    showHeaderCloseButton?: boolean | undefined;
+    preventClose?: boolean | undefined;
+    fullBleed?: boolean | undefined;
+    variant?: ModalVariants | undefined;
+    displayMode?: ModalTypes | undefined;
+    style?: CSSProperties | undefined;
+    onClose: () => void | boolean;
+    children?: React.ReactNode;
+    className?: string | undefined;
+} & Omit<HTMLAttributes<HTMLDialogElement>, "onClose"> & WithHeaderSlot & FooterOptions & TypeProps;
 /**
  * Type guard to check if a footer slot has been passed to the component.
  */
-export declare const hasFooterSlot: (props: ModalProps) => props is BaseModalProps & HeaderOptions & WithFooterSlot;
+export declare const hasFooterSlot: (props: ModalProps) => props is {
+    shouldShow: boolean;
+    showHeaderCloseButton?: boolean | undefined;
+    preventClose?: boolean | undefined;
+    fullBleed?: boolean | undefined;
+    variant?: ModalVariants | undefined;
+    displayMode?: ModalTypes | undefined;
+    style?: CSSProperties | undefined;
+    onClose: () => void | boolean;
+    children?: React.ReactNode;
+    className?: string | undefined;
+} & Omit<HTMLAttributes<HTMLDialogElement>, "onClose"> & HeaderOptions & WithFooterSlot & TypeProps;
+/**
+ * Type guard to check if the modal is a sidedraw
+ */
+export declare const isSideDraw: (props: ModalProps) => props is {
+    shouldShow: boolean;
+    showHeaderCloseButton?: boolean | undefined;
+    preventClose?: boolean | undefined;
+    fullBleed?: boolean | undefined;
+    variant?: ModalVariants | undefined;
+    displayMode?: ModalTypes | undefined;
+    style?: CSSProperties | undefined;
+    onClose: () => void | boolean;
+    children?: React.ReactNode;
+    className?: string | undefined;
+} & Omit<HTMLAttributes<HTMLDialogElement>, "onClose"> & HeaderOptions & FooterOptions & SideDrawType;
 export {};

package/dist/components/Modal/types.js

@@ -10,6 +10,12 @@ const hasHeaderSlot = (props) => {
 const hasFooterSlot = (props) => {
     return !!props.footerSlot;
 };
+/**
+ * Type guard to check if the modal is a sidedraw
+ */
+const isSideDraw = (props) => {
+    return props.displayMode === 'leftDrawer' || props.displayMode === 'rightDrawer';
+};
 
-export { hasFooterSlot, hasHeaderSlot };
+export { hasFooterSlot, hasHeaderSlot, isSideDraw };
 //# sourceMappingURL=types.js.map

package/dist/components/Modal/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../src/components/Modal/types.ts"],"sourcesContent":["import { ButtonProps } from '../Button/types';\n\nexport type ModalVariants = 'xs' | 'sm' | 'base' | 'lg';\n\n// Base Modal props shared by all variants.\ntype BaseModalProps = {\n  shouldShow: boolean;\n  showHeaderCloseButton?: boolean;\n  preventClose?: boolean;\n  fullBleed?: boolean;\n  variant?: ModalVariants;\n  onClose: () => void;\n  children: React.ReactNode;\n  className?: string;\n};\n\n// Optional slot types.\n\ntype WithHeaderSlot = {\n  headerSlot: React.ReactNode;\n};\n\ntype WithFooterSlot = {\n  footerSlot: React.ReactNode;\n};\n\n// Default header and footer options.\n\ntype DefaultHeaderOptions = {\n  headerTitle: string;\n  headerSubtitle?: string;\n};\n\nexport type Action = { label: string } & ButtonProps;\ntype DefaultFooterOptions = {\n  leftActions?: Action[];\n  rightActions?: Action[];\n};\n\n// Either we have a header slot or default header options, same for footer.\ntype HeaderOptions = WithHeaderSlot | DefaultHeaderOptions;\ntype FooterOptions = WithFooterSlot | DefaultFooterOptions;\n\n// Modal props are shared props + the header and footer options (potentially with slots.)\nexport type ModalProps = BaseModalProps & HeaderOptions & FooterOptions;\n\n/**\n * Type guard to check if a header slot has been passed to the component.\n */\nexport const hasHeaderSlot = (\n  props: ModalProps,\n): props is BaseModalProps & WithHeaderSlot & FooterOptions => {\n  return !!(props as WithHeaderSlot).headerSlot;\n};\n\n/**\n * Type guard to check if a footer slot has been passed to the component.\n */\nexport const hasFooterSlot = (\n  props: ModalProps,\n): props is BaseModalProps & HeaderOptions & WithFooterSlot => {\n  return !!(props as WithFooterSlot).footerSlot;\n};\n"],"names":[],"mappings":"AA8CA;;AAEG;AACU,MAAA,aAAa,GAAG,CAC3B,KAAiB,KAC2C;AAC5D,IAAA,OAAO,CAAC,CAAE,KAAwB,CAAC,UAAU;AAC/C;AAEA;;AAEG;AACU,MAAA,aAAa,GAAG,CAC3B,KAAiB,KAC2C;AAC5D,IAAA,OAAO,CAAC,CAAE,KAAwB,CAAC,UAAU;AAC/C;;;;"}
+{"version":3,"file":"types.js","sources":["../../../src/components/Modal/types.ts"],"sourcesContent":["import { CSSProperties, HTMLAttributes } from 'react';\nimport { ButtonProps } from '../Button/types';\n\nexport type ModalVariants = 'xs' | 'sm' | 'base' | 'lg';\nexport type ModalTypes = 'modal' | 'leftDrawer' | 'rightDrawer';\nexport type ModalAppearance = 'primary' | 'secondary';\n\n// Base Modal props shared by all variants.\ntype BaseModalProps = {\n  shouldShow: boolean;\n  showHeaderCloseButton?: boolean;\n  preventClose?: boolean;\n  fullBleed?: boolean;\n  variant?: ModalVariants;\n  displayMode?: ModalTypes;\n  style?: CSSProperties;\n  onClose: () => void | boolean;\n  children?: React.ReactNode;\n  className?: string;\n} & Omit<HTMLAttributes<HTMLDialogElement>, 'onClose'>;\n\n// Optional slot types.\n\ntype WithHeaderSlot = {\n  headerSlot: React.ReactNode;\n};\n\ntype WithFooterSlot = {\n  footerSlot: React.ReactNode;\n};\n\ntype SideDrawType = {\n  displayMode: 'leftDrawer' | 'rightDrawer';\n  appearance?: ModalAppearance; // Required for sidedraw\n};\n\n// Default header and footer options.\n\ntype DefaultHeaderOptions = {\n  headerTitle: string;\n  headerSubtitle?: string;\n};\n\ntype ModalType = {\n  displayMode?: 'modal';\n};\n\nexport type Action = { label: string } & ButtonProps;\ntype DefaultFooterOptions = {\n  leftActions?: Action[];\n  rightActions?: Action[];\n};\n\n// Either we have a header slot or default header options, same for footer.\ntype HeaderOptions = WithHeaderSlot | DefaultHeaderOptions;\ntype FooterOptions = WithFooterSlot | DefaultFooterOptions;\ntype TypeProps = ModalType | SideDrawType;\n\n// Modal props are shared props + the header and footer options (potentially with slots.)\nexport type ModalProps = BaseModalProps & HeaderOptions & FooterOptions & TypeProps;\n\n/**\n * Type guard to check if a header slot has been passed to the component.\n */\nexport const hasHeaderSlot = (\n  props: ModalProps,\n): props is BaseModalProps & WithHeaderSlot & FooterOptions & TypeProps => {\n  return !!(props as WithHeaderSlot).headerSlot;\n};\n\n/**\n * Type guard to check if a footer slot has been passed to the component.\n */\nexport const hasFooterSlot = (\n  props: ModalProps,\n): props is BaseModalProps & HeaderOptions & WithFooterSlot & TypeProps => {\n  return !!(props as WithFooterSlot).footerSlot;\n};\n\n/**\n * Type guard to check if the modal is a sidedraw\n */\nexport const isSideDraw = (\n  props: ModalProps,\n): props is BaseModalProps & HeaderOptions & FooterOptions & SideDrawType => {\n  return props.displayMode === 'leftDrawer' || props.displayMode === 'rightDrawer';\n};\n"],"names":[],"mappings":"AA6DA;;AAEG;AACU,MAAA,aAAa,GAAG,CAC3B,KAAiB,KACuD;AACxE,IAAA,OAAO,CAAC,CAAE,KAAwB,CAAC,UAAU;AAC/C;AAEA;;AAEG;AACU,MAAA,aAAa,GAAG,CAC3B,KAAiB,KACuD;AACxE,IAAA,OAAO,CAAC,CAAE,KAAwB,CAAC,UAAU;AAC/C;AAEA;;AAEG;AACU,MAAA,UAAU,GAAG,CACxB,KAAiB,KACyD;IAC1E,OAAO,KAAK,CAAC,WAAW,KAAK,YAAY,IAAI,KAAK,CAAC,WAAW,KAAK,aAAa;AAClF;;;;"}

package/dist/components/SelectDropdown/ListItem/ListItem.cjs

@@ -3,6 +3,7 @@
 var React = require('react');
 require('../../../hooks/useFocusVisible.cjs');
 var useId = require('../../../hooks/useId.cjs');
+require('lodash.throttle');
 var styled = require('./styled.cjs');
 var ListItemContent = require('./components/ListItemContent.cjs');
 

package/dist/components/SelectDropdown/ListItem/ListItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.cjs","sources":["../../../../src/components/SelectDropdown/ListItem/ListItem.tsx"],"sourcesContent":["import React from 'react';\nimport { ListBoxItemRenderProps } from 'react-aria-components';\nimport { useId } from '../../../hooks';\nimport { StyledListItem } from './styled';\nimport { ListItemProps } from './types';\nimport { ListItemContent } from './components/ListItemContent';\n\nexport const ListItem = ({ id, label, href, ...props }: ListItemProps) => {\n  const idComputed = useId({ id, prefix: 'list-item' });\n  return (\n    <StyledListItem id={idComputed} textValue={label} href={href} {...props}>\n      {/* use react aria's render props to add more such as isHovered */}\n      {({ selectionMode, allowsDragging, isSelected }: ListBoxItemRenderProps) => (\n        <ListItemContent\n          selectionMode={selectionMode}\n          allowsDragging={allowsDragging}\n          isSelected={isSelected}\n          label={label}\n          isLink={Boolean(href)}\n          {...props}\n        />\n      )}\n    </StyledListItem>\n  );\n};\n"],"names":["useId","React","StyledListItem","ListItemContent"],"mappings":";;;;;;;;;;;;AAOa,MAAA,QAAQ,GAAG,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,KAAK,EAAiB,KAAI;AACvE,IAAA,MAAM,UAAU,GAAGA,WAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC;AACrD,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,qBAAc,EAAA,EAAC,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAA,GAAM,KAAK,EAAA,EAEpE,CAAC,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAA0B,MACrED,sBAAC,CAAA,aAAA,CAAAE,+BAAe,EACd,EAAA,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,EAAA,GACjB,KAAK,EAAA,CACT,CACH,CACc;AAErB;;;;"}
+{"version":3,"file":"ListItem.cjs","sources":["../../../../src/components/SelectDropdown/ListItem/ListItem.tsx"],"sourcesContent":["import React from 'react';\nimport { ListBoxItemRenderProps } from 'react-aria-components';\nimport { useId } from '../../../hooks';\nimport { StyledListItem } from './styled';\nimport { ListItemProps } from './types';\nimport { ListItemContent } from './components/ListItemContent';\n\nexport const ListItem = ({ id, label, href, ...props }: ListItemProps) => {\n  const idComputed = useId({ id, prefix: 'list-item' });\n  return (\n    <StyledListItem id={idComputed} textValue={label} href={href} {...props}>\n      {/* use react aria's render props to add more such as isHovered */}\n      {({ selectionMode, allowsDragging, isSelected }: ListBoxItemRenderProps) => (\n        <ListItemContent\n          selectionMode={selectionMode}\n          allowsDragging={allowsDragging}\n          isSelected={isSelected}\n          label={label}\n          isLink={Boolean(href)}\n          {...props}\n        />\n      )}\n    </StyledListItem>\n  );\n};\n"],"names":["useId","React","StyledListItem","ListItemContent"],"mappings":";;;;;;;;;;;;;AAOa,MAAA,QAAQ,GAAG,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,KAAK,EAAiB,KAAI;AACvE,IAAA,MAAM,UAAU,GAAGA,WAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC;AACrD,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,qBAAc,EAAA,EAAC,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAA,GAAM,KAAK,EAAA,EAEpE,CAAC,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAA0B,MACrED,sBAAC,CAAA,aAAA,CAAAE,+BAAe,EACd,EAAA,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,EAAA,GACjB,KAAK,EAAA,CACT,CACH,CACc;AAErB;;;;"}

package/dist/components/SelectDropdown/ListItem/ListItem.js

@@ -1,6 +1,7 @@
 import React__default from 'react';
 import '../../../hooks/useFocusVisible.js';
 import { useId } from '../../../hooks/useId.js';
+import 'lodash.throttle';
 import { StyledListItem } from './styled.js';
 import { ListItemContent } from './components/ListItemContent.js';
 

package/dist/components/SelectDropdown/ListItem/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","sources":["../../../../src/components/SelectDropdown/ListItem/ListItem.tsx"],"sourcesContent":["import React from 'react';\nimport { ListBoxItemRenderProps } from 'react-aria-components';\nimport { useId } from '../../../hooks';\nimport { StyledListItem } from './styled';\nimport { ListItemProps } from './types';\nimport { ListItemContent } from './components/ListItemContent';\n\nexport const ListItem = ({ id, label, href, ...props }: ListItemProps) => {\n  const idComputed = useId({ id, prefix: 'list-item' });\n  return (\n    <StyledListItem id={idComputed} textValue={label} href={href} {...props}>\n      {/* use react aria's render props to add more such as isHovered */}\n      {({ selectionMode, allowsDragging, isSelected }: ListBoxItemRenderProps) => (\n        <ListItemContent\n          selectionMode={selectionMode}\n          allowsDragging={allowsDragging}\n          isSelected={isSelected}\n          label={label}\n          isLink={Boolean(href)}\n          {...props}\n        />\n      )}\n    </StyledListItem>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;AAOa,MAAA,QAAQ,GAAG,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,KAAK,EAAiB,KAAI;AACvE,IAAA,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC;AACrD,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EAAC,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAA,GAAM,KAAK,EAAA,EAEpE,CAAC,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAA0B,MACrEA,cAAC,CAAA,aAAA,CAAA,eAAe,EACd,EAAA,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,EAAA,GACjB,KAAK,EAAA,CACT,CACH,CACc;AAErB;;;;"}
+{"version":3,"file":"ListItem.js","sources":["../../../../src/components/SelectDropdown/ListItem/ListItem.tsx"],"sourcesContent":["import React from 'react';\nimport { ListBoxItemRenderProps } from 'react-aria-components';\nimport { useId } from '../../../hooks';\nimport { StyledListItem } from './styled';\nimport { ListItemProps } from './types';\nimport { ListItemContent } from './components/ListItemContent';\n\nexport const ListItem = ({ id, label, href, ...props }: ListItemProps) => {\n  const idComputed = useId({ id, prefix: 'list-item' });\n  return (\n    <StyledListItem id={idComputed} textValue={label} href={href} {...props}>\n      {/* use react aria's render props to add more such as isHovered */}\n      {({ selectionMode, allowsDragging, isSelected }: ListBoxItemRenderProps) => (\n        <ListItemContent\n          selectionMode={selectionMode}\n          allowsDragging={allowsDragging}\n          isSelected={isSelected}\n          label={label}\n          isLink={Boolean(href)}\n          {...props}\n        />\n      )}\n    </StyledListItem>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;AAOa,MAAA,QAAQ,GAAG,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,KAAK,EAAiB,KAAI;AACvE,IAAA,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC;AACrD,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EAAC,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAA,GAAM,KAAK,EAAA,EAEpE,CAAC,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAA0B,MACrEA,cAAC,CAAA,aAAA,CAAA,eAAe,EACd,EAAA,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,EAAA,GACjB,KAAK,EAAA,CACT,CACH,CACc;AAErB;;;;"}

package/dist/components/VideoModal/VideoModal.cjs

@@ -6,6 +6,7 @@ var styled = require('./styled.cjs');
 var useClickOutside = require('../../hooks/useClickOutside.cjs');
 require('../../hooks/useFocusVisible.cjs');
 require('uid/secure');
+require('lodash.throttle');
 var CrossIcon = require('../../tempIcons/CrossIcon.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

package/dist/components/VideoModal/VideoModal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"VideoModal.cjs","sources":["../../../src/components/VideoModal/VideoModal.tsx"],"sourcesContent":["import React from 'react';\nimport { Popup } from './components/Popup';\nimport { VideoModalProps } from './types';\nimport { PopupContent, VideoWrapper, ButtonSC } from './styled';\nimport { useClickOutside } from '../../hooks';\nimport { CrossIcon } from '../../tempIcons/CrossIcon';\n\nexport const VideoModal = ({\n  id,\n  youtubeVideoId,\n  showVideoModal,\n  handleCloseClick,\n}: VideoModalProps) => {\n  const ref = useClickOutside(showVideoModal, handleCloseClick);\n\n  return (\n    <Popup shouldShow={showVideoModal} className={`${id}-video`}>\n      <PopupContent\n        data-testid=\"video-modal_popup-content\"\n        className={`video-modal--${showVideoModal ? 'visible' : 'hidden'}`}\n      >\n        <VideoWrapper ref={ref}>\n          <iframe\n            title={`${id}-video`}\n            src={`https://www.youtube.com/embed/${youtubeVideoId}`}\n            frameBorder=\"0\"\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n            allowFullScreen\n          />\n          <ButtonSC\n            variant=\"flat\"\n            onClick={handleCloseClick}\n            data-testid=\"video-modal--close\"\n            iconSlot={<CrossIcon color=\"white\" />}\n          />\n        </VideoWrapper>\n      </PopupContent>\n    </Popup>\n  );\n};\n"],"names":["useClickOutside","React","Popup","PopupContent","VideoWrapper","ButtonSC","CrossIcon"],"mappings":";;;;;;;;;;;;;;AAOO,MAAM,UAAU,GAAG,CAAC,EACzB,EAAE,EACF,cAAc,EACd,cAAc,EACd,gBAAgB,GACA,KAAI;IACpB,MAAM,GAAG,GAAGA,+BAAe,CAAC,cAAc,EAAE,gBAAgB,CAAC;AAE7D,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,WAAK,EAAA,EAAC,UAAU,EAAE,cAAc,EAAE,SAAS,EAAE,CAAG,EAAA,EAAE,CAAQ,MAAA,CAAA,EAAA;AACzD,QAAAD,sBAAA,CAAA,aAAA,CAACE,mBAAY,EACC,EAAA,aAAA,EAAA,2BAA2B,EACvC,SAAS,EAAE,CAAgB,aAAA,EAAA,cAAc,GAAG,SAAS,GAAG,QAAQ,CAAE,CAAA,EAAA;AAElE,YAAAF,sBAAA,CAAA,aAAA,CAACG,mBAAY,EAAA,EAAC,GAAG,EAAE,GAAG,EAAA;gBACpBH,sBACE,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,KAAK,EAAE,CAAG,EAAA,EAAE,QAAQ,EACpB,GAAG,EAAE,CAAiC,8BAAA,EAAA,cAAc,EAAE,EACtD,WAAW,EAAC,GAAG,EACf,KAAK,EAAC,0FAA0F,EAChG,eAAe,EACf,IAAA,EAAA,CAAA;gBACFA,sBAAC,CAAA,aAAA,CAAAI,eAAQ,EACP,EAAA,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,gBAAgB,EACb,aAAA,EAAA,oBAAoB,EAChC,QAAQ,EAAEJ,sBAAC,CAAA,aAAA,CAAAK,mBAAS,EAAC,EAAA,KAAK,EAAC,OAAO,EAAG,CAAA,EAAA,CACrC,CACW,CACF,CACT;AAEZ;;;;"}
+{"version":3,"file":"VideoModal.cjs","sources":["../../../src/components/VideoModal/VideoModal.tsx"],"sourcesContent":["import React from 'react';\nimport { Popup } from './components/Popup';\nimport { VideoModalProps } from './types';\nimport { PopupContent, VideoWrapper, ButtonSC } from './styled';\nimport { useClickOutside } from '../../hooks';\nimport { CrossIcon } from '../../tempIcons/CrossIcon';\n\nexport const VideoModal = ({\n  id,\n  youtubeVideoId,\n  showVideoModal,\n  handleCloseClick,\n}: VideoModalProps) => {\n  const ref = useClickOutside(showVideoModal, handleCloseClick);\n\n  return (\n    <Popup shouldShow={showVideoModal} className={`${id}-video`}>\n      <PopupContent\n        data-testid=\"video-modal_popup-content\"\n        className={`video-modal--${showVideoModal ? 'visible' : 'hidden'}`}\n      >\n        <VideoWrapper ref={ref}>\n          <iframe\n            title={`${id}-video`}\n            src={`https://www.youtube.com/embed/${youtubeVideoId}`}\n            frameBorder=\"0\"\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n            allowFullScreen\n          />\n          <ButtonSC\n            variant=\"flat\"\n            onClick={handleCloseClick}\n            data-testid=\"video-modal--close\"\n            iconSlot={<CrossIcon color=\"white\" />}\n          />\n        </VideoWrapper>\n      </PopupContent>\n    </Popup>\n  );\n};\n"],"names":["useClickOutside","React","Popup","PopupContent","VideoWrapper","ButtonSC","CrossIcon"],"mappings":";;;;;;;;;;;;;;;AAOO,MAAM,UAAU,GAAG,CAAC,EACzB,EAAE,EACF,cAAc,EACd,cAAc,EACd,gBAAgB,GACA,KAAI;IACpB,MAAM,GAAG,GAAGA,+BAAe,CAAC,cAAc,EAAE,gBAAgB,CAAC;AAE7D,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,WAAK,EAAA,EAAC,UAAU,EAAE,cAAc,EAAE,SAAS,EAAE,CAAG,EAAA,EAAE,CAAQ,MAAA,CAAA,EAAA;AACzD,QAAAD,sBAAA,CAAA,aAAA,CAACE,mBAAY,EACC,EAAA,aAAA,EAAA,2BAA2B,EACvC,SAAS,EAAE,CAAgB,aAAA,EAAA,cAAc,GAAG,SAAS,GAAG,QAAQ,CAAE,CAAA,EAAA;AAElE,YAAAF,sBAAA,CAAA,aAAA,CAACG,mBAAY,EAAA,EAAC,GAAG,EAAE,GAAG,EAAA;gBACpBH,sBACE,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,KAAK,EAAE,CAAG,EAAA,EAAE,QAAQ,EACpB,GAAG,EAAE,CAAiC,8BAAA,EAAA,cAAc,EAAE,EACtD,WAAW,EAAC,GAAG,EACf,KAAK,EAAC,0FAA0F,EAChG,eAAe,EACf,IAAA,EAAA,CAAA;gBACFA,sBAAC,CAAA,aAAA,CAAAI,eAAQ,EACP,EAAA,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,gBAAgB,EACb,aAAA,EAAA,oBAAoB,EAChC,QAAQ,EAAEJ,sBAAC,CAAA,aAAA,CAAAK,mBAAS,EAAC,EAAA,KAAK,EAAC,OAAO,EAAG,CAAA,EAAA,CACrC,CACW,CACF,CACT;AAEZ;;;;"}

package/dist/components/VideoModal/VideoModal.js

@@ -4,6 +4,7 @@ import { PopupContent, VideoWrapper, ButtonSC } from './styled.js';
 import { useClickOutside } from '../../hooks/useClickOutside.js';
 import '../../hooks/useFocusVisible.js';
 import 'uid/secure';
+import 'lodash.throttle';
 import { CrossIcon } from '../../tempIcons/CrossIcon.js';
 
 const VideoModal = ({ id, youtubeVideoId, showVideoModal, handleCloseClick, }) => {

package/dist/components/VideoModal/VideoModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"VideoModal.js","sources":["../../../src/components/VideoModal/VideoModal.tsx"],"sourcesContent":["import React from 'react';\nimport { Popup } from './components/Popup';\nimport { VideoModalProps } from './types';\nimport { PopupContent, VideoWrapper, ButtonSC } from './styled';\nimport { useClickOutside } from '../../hooks';\nimport { CrossIcon } from '../../tempIcons/CrossIcon';\n\nexport const VideoModal = ({\n  id,\n  youtubeVideoId,\n  showVideoModal,\n  handleCloseClick,\n}: VideoModalProps) => {\n  const ref = useClickOutside(showVideoModal, handleCloseClick);\n\n  return (\n    <Popup shouldShow={showVideoModal} className={`${id}-video`}>\n      <PopupContent\n        data-testid=\"video-modal_popup-content\"\n        className={`video-modal--${showVideoModal ? 'visible' : 'hidden'}`}\n      >\n        <VideoWrapper ref={ref}>\n          <iframe\n            title={`${id}-video`}\n            src={`https://www.youtube.com/embed/${youtubeVideoId}`}\n            frameBorder=\"0\"\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n            allowFullScreen\n          />\n          <ButtonSC\n            variant=\"flat\"\n            onClick={handleCloseClick}\n            data-testid=\"video-modal--close\"\n            iconSlot={<CrossIcon color=\"white\" />}\n          />\n        </VideoWrapper>\n      </PopupContent>\n    </Popup>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;AAOO,MAAM,UAAU,GAAG,CAAC,EACzB,EAAE,EACF,cAAc,EACd,cAAc,EACd,gBAAgB,GACA,KAAI;IACpB,MAAM,GAAG,GAAG,eAAe,CAAC,cAAc,EAAE,gBAAgB,CAAC;AAE7D,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,UAAU,EAAE,cAAc,EAAE,SAAS,EAAE,CAAG,EAAA,EAAE,CAAQ,MAAA,CAAA,EAAA;AACzD,QAAAA,cAAA,CAAA,aAAA,CAAC,YAAY,EACC,EAAA,aAAA,EAAA,2BAA2B,EACvC,SAAS,EAAE,CAAgB,aAAA,EAAA,cAAc,GAAG,SAAS,GAAG,QAAQ,CAAE,CAAA,EAAA;AAElE,YAAAA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,GAAG,EAAE,GAAG,EAAA;gBACpBA,cACE,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,KAAK,EAAE,CAAG,EAAA,EAAE,QAAQ,EACpB,GAAG,EAAE,CAAiC,8BAAA,EAAA,cAAc,EAAE,EACtD,WAAW,EAAC,GAAG,EACf,KAAK,EAAC,0FAA0F,EAChG,eAAe,EACf,IAAA,EAAA,CAAA;gBACFA,cAAC,CAAA,aAAA,CAAA,QAAQ,EACP,EAAA,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,gBAAgB,EACb,aAAA,EAAA,oBAAoB,EAChC,QAAQ,EAAEA,cAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,KAAK,EAAC,OAAO,EAAG,CAAA,EAAA,CACrC,CACW,CACF,CACT;AAEZ;;;;"}
+{"version":3,"file":"VideoModal.js","sources":["../../../src/components/VideoModal/VideoModal.tsx"],"sourcesContent":["import React from 'react';\nimport { Popup } from './components/Popup';\nimport { VideoModalProps } from './types';\nimport { PopupContent, VideoWrapper, ButtonSC } from './styled';\nimport { useClickOutside } from '../../hooks';\nimport { CrossIcon } from '../../tempIcons/CrossIcon';\n\nexport const VideoModal = ({\n  id,\n  youtubeVideoId,\n  showVideoModal,\n  handleCloseClick,\n}: VideoModalProps) => {\n  const ref = useClickOutside(showVideoModal, handleCloseClick);\n\n  return (\n    <Popup shouldShow={showVideoModal} className={`${id}-video`}>\n      <PopupContent\n        data-testid=\"video-modal_popup-content\"\n        className={`video-modal--${showVideoModal ? 'visible' : 'hidden'}`}\n      >\n        <VideoWrapper ref={ref}>\n          <iframe\n            title={`${id}-video`}\n            src={`https://www.youtube.com/embed/${youtubeVideoId}`}\n            frameBorder=\"0\"\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n            allowFullScreen\n          />\n          <ButtonSC\n            variant=\"flat\"\n            onClick={handleCloseClick}\n            data-testid=\"video-modal--close\"\n            iconSlot={<CrossIcon color=\"white\" />}\n          />\n        </VideoWrapper>\n      </PopupContent>\n    </Popup>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;AAOO,MAAM,UAAU,GAAG,CAAC,EACzB,EAAE,EACF,cAAc,EACd,cAAc,EACd,gBAAgB,GACA,KAAI;IACpB,MAAM,GAAG,GAAG,eAAe,CAAC,cAAc,EAAE,gBAAgB,CAAC;AAE7D,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,UAAU,EAAE,cAAc,EAAE,SAAS,EAAE,CAAG,EAAA,EAAE,CAAQ,MAAA,CAAA,EAAA;AACzD,QAAAA,cAAA,CAAA,aAAA,CAAC,YAAY,EACC,EAAA,aAAA,EAAA,2BAA2B,EACvC,SAAS,EAAE,CAAgB,aAAA,EAAA,cAAc,GAAG,SAAS,GAAG,QAAQ,CAAE,CAAA,EAAA;AAElE,YAAAA,cAAA,CAAA,aAAA,CAAC,YAAY,EAAA,EAAC,GAAG,EAAE,GAAG,EAAA;gBACpBA,cACE,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,KAAK,EAAE,CAAG,EAAA,EAAE,QAAQ,EACpB,GAAG,EAAE,CAAiC,8BAAA,EAAA,cAAc,EAAE,EACtD,WAAW,EAAC,GAAG,EACf,KAAK,EAAC,0FAA0F,EAChG,eAAe,EACf,IAAA,EAAA,CAAA;gBACFA,cAAC,CAAA,aAAA,CAAA,QAAQ,EACP,EAAA,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,gBAAgB,EACb,aAAA,EAAA,oBAAoB,EAChC,QAAQ,EAAEA,cAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,KAAK,EAAC,OAAO,EAAG,CAAA,EAAA,CACrC,CACW,CACF,CACT;AAEZ;;;;"}

package/dist/components/View/View.cjs

@@ -5,6 +5,7 @@ require('../../hooks/useFocusVisible.cjs');
 var useHover = require('../../hooks/useHover.cjs');
 var buildClassnames = require('../../utils/buildClassnames.cjs');
 require('uid/secure');
+require('lodash.throttle');
 var colors = require('../../theme/modules/colors.cjs');
 var types = require('./types.cjs');
 var styled = require('./styled.cjs');

package/dist/components/View/View.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"View.cjs","sources":["../../../src/components/View/View.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport { useHover } from '../../hooks';\nimport { colors } from '../../theme/modules/colors';\n\nimport { ViewProps, ViewTypes } from './types';\n\nimport {\n  Container,\n  Contour,\n  CounterContainer,\n  CounterText,\n  CustomIconWrapper,\n  IconStyling,\n  Text,\n} from './styled';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { CrossIcon } from '../../tempIcons/CrossIcon';\nimport { EditIcon } from '../../tempIcons/EditIcon';\n\nexport interface ClassNamesReturnPayload {\n  delete?: string;\n  options?: string;\n  edit?: string;\n  container?: string;\n  active?: string;\n  counter?: string;\n}\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  delete: prefix ? `${prefix}-delete` : undefined,\n  options: prefix ? `${prefix}-options` : undefined,\n  edit: prefix ? `${prefix}-edit` : undefined,\n  container: prefix ? `${prefix}-container` : undefined,\n  active: prefix ? `${prefix}-active` : undefined,\n  counter: prefix ? `${prefix}-counter` : undefined,\n});\n\n/**\n *\n * @deprecated\n *\n * use ViewTab component instead\n *\n */\nexport const View = ({\n  id,\n  iconSlot,\n  name,\n  type,\n  className,\n  colourPalette = colors.secondary.blue,\n  customTextColour,\n  count,\n  active = false,\n  onClick,\n  onDelete,\n  onEdit,\n  e2eClassName,\n}: ViewProps) => {\n  const classNames = generateClassNames(className);\n  const e2eClassNames = generateClassNames(e2eClassName);\n  const [isHovered, handleEnter, handleLeave] = useHover();\n\n  const handleClick = useCallback(() => onClick(id), [id, onClick]);\n  const handleDelete = useCallback(\n    (event) => {\n      event.stopPropagation();\n      if (onDelete) onDelete(id);\n    },\n    [onDelete, id],\n  );\n  const handleEdit = useCallback(\n    (event) => {\n      event.stopPropagation();\n      if (onEdit) onEdit(id);\n    },\n    [onEdit, id],\n  );\n\n  const isDraft = type === ViewTypes.draft;\n  const isSaved = type === ViewTypes.saved;\n  const fill = active ? colors.neutral.ink.dark : colors.neutral.ink.base;\n\n  return (\n    <Container\n      className={`${buildClassnames([classNames?.container, e2eClassNames?.container])} ${\n        (active && e2eClassNames?.active) || ''\n      }`}\n      onClick={handleClick}\n    >\n      <Contour\n        active={active}\n        onMouseEnter={handleEnter}\n        onMouseLeave={handleLeave}\n        colourPalette={colourPalette}\n        customTextColour={customTextColour}\n      >\n        {iconSlot && <CustomIconWrapper>{iconSlot}</CustomIconWrapper>}\n        <Text variant=\"bodyBold\">{name}</Text>\n        {count && (\n          <CounterContainer\n            active={active || isHovered}\n            colourPalette={colourPalette}\n            customTextColour={customTextColour}\n          >\n            <CounterText className={e2eClassNames?.counter} variant=\"subheadingSmall\">\n              {count}\n            </CounterText>\n          </CounterContainer>\n        )}\n        {isDraft && (\n          <CrossIcon\n            {...IconStyling}\n            color={fill}\n            className={e2eClassNames?.delete}\n            onClick={handleDelete}\n          />\n        )}\n        {isSaved && active && (\n          <EditIcon\n            {...IconStyling}\n            color={fill}\n            className={e2eClassNames?.edit}\n            onClick={handleEdit}\n          />\n        )}\n      </Contour>\n    </Container>\n  );\n};\n"],"names":["colors","useHover","useCallback","ViewTypes","React","Container","buildClassnames","Contour","CustomIconWrapper","Text","CounterContainer","CounterText","CrossIcon","IconStyling","EditIcon"],"mappings":"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"}
+{"version":3,"file":"View.cjs","sources":["../../../src/components/View/View.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport { useHover } from '../../hooks';\nimport { colors } from '../../theme/modules/colors';\n\nimport { ViewProps, ViewTypes } from './types';\n\nimport {\n  Container,\n  Contour,\n  CounterContainer,\n  CounterText,\n  CustomIconWrapper,\n  IconStyling,\n  Text,\n} from './styled';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { CrossIcon } from '../../tempIcons/CrossIcon';\nimport { EditIcon } from '../../tempIcons/EditIcon';\n\nexport interface ClassNamesReturnPayload {\n  delete?: string;\n  options?: string;\n  edit?: string;\n  container?: string;\n  active?: string;\n  counter?: string;\n}\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  delete: prefix ? `${prefix}-delete` : undefined,\n  options: prefix ? `${prefix}-options` : undefined,\n  edit: prefix ? `${prefix}-edit` : undefined,\n  container: prefix ? `${prefix}-container` : undefined,\n  active: prefix ? `${prefix}-active` : undefined,\n  counter: prefix ? `${prefix}-counter` : undefined,\n});\n\n/**\n *\n * @deprecated\n *\n * use ViewTab component instead\n *\n */\nexport const View = ({\n  id,\n  iconSlot,\n  name,\n  type,\n  className,\n  colourPalette = colors.secondary.blue,\n  customTextColour,\n  count,\n  active = false,\n  onClick,\n  onDelete,\n  onEdit,\n  e2eClassName,\n}: ViewProps) => {\n  const classNames = generateClassNames(className);\n  const e2eClassNames = generateClassNames(e2eClassName);\n  const [isHovered, handleEnter, handleLeave] = useHover();\n\n  const handleClick = useCallback(() => onClick(id), [id, onClick]);\n  const handleDelete = useCallback(\n    (event) => {\n      event.stopPropagation();\n      if (onDelete) onDelete(id);\n    },\n    [onDelete, id],\n  );\n  const handleEdit = useCallback(\n    (event) => {\n      event.stopPropagation();\n      if (onEdit) onEdit(id);\n    },\n    [onEdit, id],\n  );\n\n  const isDraft = type === ViewTypes.draft;\n  const isSaved = type === ViewTypes.saved;\n  const fill = active ? colors.neutral.ink.dark : colors.neutral.ink.base;\n\n  return (\n    <Container\n      className={`${buildClassnames([classNames?.container, e2eClassNames?.container])} ${\n        (active && e2eClassNames?.active) || ''\n      }`}\n      onClick={handleClick}\n    >\n      <Contour\n        active={active}\n        onMouseEnter={handleEnter}\n        onMouseLeave={handleLeave}\n        colourPalette={colourPalette}\n        customTextColour={customTextColour}\n      >\n        {iconSlot && <CustomIconWrapper>{iconSlot}</CustomIconWrapper>}\n        <Text variant=\"bodyBold\">{name}</Text>\n        {count && (\n          <CounterContainer\n            active={active || isHovered}\n            colourPalette={colourPalette}\n            customTextColour={customTextColour}\n          >\n            <CounterText className={e2eClassNames?.counter} variant=\"subheadingSmall\">\n              {count}\n            </CounterText>\n          </CounterContainer>\n        )}\n        {isDraft && (\n          <CrossIcon\n            {...IconStyling}\n            color={fill}\n            className={e2eClassNames?.delete}\n            onClick={handleDelete}\n          />\n        )}\n        {isSaved && active && (\n          <EditIcon\n            {...IconStyling}\n            color={fill}\n            className={e2eClassNames?.edit}\n            onClick={handleEdit}\n          />\n        )}\n      </Contour>\n    </Container>\n  );\n};\n"],"names":["colors","useHover","useCallback","ViewTypes","React","Container","buildClassnames","Contour","CustomIconWrapper","Text","CounterContainer","CounterText","CrossIcon","IconStyling","EditIcon"],"mappings":"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"}

package/dist/components/View/View.js

@@ -3,6 +3,7 @@ import '../../hooks/useFocusVisible.js';
 import { useHover } from '../../hooks/useHover.js';
 import { buildClassnames } from '../../utils/buildClassnames.js';
 import 'uid/secure';
+import 'lodash.throttle';
 import { colors } from '../../theme/modules/colors.js';
 import { ViewTypes } from './types.js';
 import { Container, Contour, CustomIconWrapper, CounterContainer, CounterText, IconStyling } from './styled.js';

package/dist/components/View/View.js.map

@@ -1 +1 @@
-{"version":3,"file":"View.js","sources":["../../../src/components/View/View.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport { useHover } from '../../hooks';\nimport { colors } from '../../theme/modules/colors';\n\nimport { ViewProps, ViewTypes } from './types';\n\nimport {\n  Container,\n  Contour,\n  CounterContainer,\n  CounterText,\n  CustomIconWrapper,\n  IconStyling,\n  Text,\n} from './styled';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { CrossIcon } from '../../tempIcons/CrossIcon';\nimport { EditIcon } from '../../tempIcons/EditIcon';\n\nexport interface ClassNamesReturnPayload {\n  delete?: string;\n  options?: string;\n  edit?: string;\n  container?: string;\n  active?: string;\n  counter?: string;\n}\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  delete: prefix ? `${prefix}-delete` : undefined,\n  options: prefix ? `${prefix}-options` : undefined,\n  edit: prefix ? `${prefix}-edit` : undefined,\n  container: prefix ? `${prefix}-container` : undefined,\n  active: prefix ? `${prefix}-active` : undefined,\n  counter: prefix ? `${prefix}-counter` : undefined,\n});\n\n/**\n *\n * @deprecated\n *\n * use ViewTab component instead\n *\n */\nexport const View = ({\n  id,\n  iconSlot,\n  name,\n  type,\n  className,\n  colourPalette = colors.secondary.blue,\n  customTextColour,\n  count,\n  active = false,\n  onClick,\n  onDelete,\n  onEdit,\n  e2eClassName,\n}: ViewProps) => {\n  const classNames = generateClassNames(className);\n  const e2eClassNames = generateClassNames(e2eClassName);\n  const [isHovered, handleEnter, handleLeave] = useHover();\n\n  const handleClick = useCallback(() => onClick(id), [id, onClick]);\n  const handleDelete = useCallback(\n    (event) => {\n      event.stopPropagation();\n      if (onDelete) onDelete(id);\n    },\n    [onDelete, id],\n  );\n  const handleEdit = useCallback(\n    (event) => {\n      event.stopPropagation();\n      if (onEdit) onEdit(id);\n    },\n    [onEdit, id],\n  );\n\n  const isDraft = type === ViewTypes.draft;\n  const isSaved = type === ViewTypes.saved;\n  const fill = active ? colors.neutral.ink.dark : colors.neutral.ink.base;\n\n  return (\n    <Container\n      className={`${buildClassnames([classNames?.container, e2eClassNames?.container])} ${\n        (active && e2eClassNames?.active) || ''\n      }`}\n      onClick={handleClick}\n    >\n      <Contour\n        active={active}\n        onMouseEnter={handleEnter}\n        onMouseLeave={handleLeave}\n        colourPalette={colourPalette}\n        customTextColour={customTextColour}\n      >\n        {iconSlot && <CustomIconWrapper>{iconSlot}</CustomIconWrapper>}\n        <Text variant=\"bodyBold\">{name}</Text>\n        {count && (\n          <CounterContainer\n            active={active || isHovered}\n            colourPalette={colourPalette}\n            customTextColour={customTextColour}\n          >\n            <CounterText className={e2eClassNames?.counter} variant=\"subheadingSmall\">\n              {count}\n            </CounterText>\n          </CounterContainer>\n        )}\n        {isDraft && (\n          <CrossIcon\n            {...IconStyling}\n            color={fill}\n            className={e2eClassNames?.delete}\n            onClick={handleDelete}\n          />\n        )}\n        {isSaved && active && (\n          <EditIcon\n            {...IconStyling}\n            color={fill}\n            className={e2eClassNames?.edit}\n            onClick={handleEdit}\n          />\n        )}\n      </Contour>\n    </Container>\n  );\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"View.js","sources":["../../../src/components/View/View.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport { useHover } from '../../hooks';\nimport { colors } from '../../theme/modules/colors';\n\nimport { ViewProps, ViewTypes } from './types';\n\nimport {\n  Container,\n  Contour,\n  CounterContainer,\n  CounterText,\n  CustomIconWrapper,\n  IconStyling,\n  Text,\n} from './styled';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { CrossIcon } from '../../tempIcons/CrossIcon';\nimport { EditIcon } from '../../tempIcons/EditIcon';\n\nexport interface ClassNamesReturnPayload {\n  delete?: string;\n  options?: string;\n  edit?: string;\n  container?: string;\n  active?: string;\n  counter?: string;\n}\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  delete: prefix ? `${prefix}-delete` : undefined,\n  options: prefix ? `${prefix}-options` : undefined,\n  edit: prefix ? `${prefix}-edit` : undefined,\n  container: prefix ? `${prefix}-container` : undefined,\n  active: prefix ? `${prefix}-active` : undefined,\n  counter: prefix ? `${prefix}-counter` : undefined,\n});\n\n/**\n *\n * @deprecated\n *\n * use ViewTab component instead\n *\n */\nexport const View = ({\n  id,\n  iconSlot,\n  name,\n  type,\n  className,\n  colourPalette = colors.secondary.blue,\n  customTextColour,\n  count,\n  active = false,\n  onClick,\n  onDelete,\n  onEdit,\n  e2eClassName,\n}: ViewProps) => {\n  const classNames = generateClassNames(className);\n  const e2eClassNames = generateClassNames(e2eClassName);\n  const [isHovered, handleEnter, handleLeave] = useHover();\n\n  const handleClick = useCallback(() => onClick(id), [id, onClick]);\n  const handleDelete = useCallback(\n    (event) => {\n      event.stopPropagation();\n      if (onDelete) onDelete(id);\n    },\n    [onDelete, id],\n  );\n  const handleEdit = useCallback(\n    (event) => {\n      event.stopPropagation();\n      if (onEdit) onEdit(id);\n    },\n    [onEdit, id],\n  );\n\n  const isDraft = type === ViewTypes.draft;\n  const isSaved = type === ViewTypes.saved;\n  const fill = active ? colors.neutral.ink.dark : colors.neutral.ink.base;\n\n  return (\n    <Container\n      className={`${buildClassnames([classNames?.container, e2eClassNames?.container])} ${\n        (active && e2eClassNames?.active) || ''\n      }`}\n      onClick={handleClick}\n    >\n      <Contour\n        active={active}\n        onMouseEnter={handleEnter}\n        onMouseLeave={handleLeave}\n        colourPalette={colourPalette}\n        customTextColour={customTextColour}\n      >\n        {iconSlot && <CustomIconWrapper>{iconSlot}</CustomIconWrapper>}\n        <Text variant=\"bodyBold\">{name}</Text>\n        {count && (\n          <CounterContainer\n            active={active || isHovered}\n            colourPalette={colourPalette}\n            customTextColour={customTextColour}\n          >\n            <CounterText className={e2eClassNames?.counter} variant=\"subheadingSmall\">\n              {count}\n            </CounterText>\n          </CounterContainer>\n        )}\n        {isDraft && (\n          <CrossIcon\n            {...IconStyling}\n            color={fill}\n            className={e2eClassNames?.delete}\n            onClick={handleDelete}\n          />\n        )}\n        {isSaved && active && (\n          <EditIcon\n            {...IconStyling}\n            color={fill}\n            className={e2eClassNames?.edit}\n            onClick={handleEdit}\n          />\n        )}\n      </Contour>\n    </Container>\n  );\n};\n"],"names":["React"],"mappings":"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"}

package/dist/components/ViewTab/ViewTab.cjs

@@ -5,6 +5,7 @@ require('../../hooks/useFocusVisible.cjs');
 var useHover = require('../../hooks/useHover.cjs');
 var buildClassnames = require('../../utils/buildClassnames.cjs');
 require('uid/secure');
+require('lodash.throttle');
 var colors = require('../../theme/modules/colors.cjs');
 var types = require('./types.cjs');
 var styled = require('./styled.cjs');

package/dist/components/ViewTab/ViewTab.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ViewTab.cjs","sources":["../../../src/components/ViewTab/ViewTab.tsx"],"sourcesContent":["import React, { Ref } from 'react';\n\nimport { useHover } from '../../hooks';\nimport { colors } from '../../theme/modules/colors';\n\nimport { ViewTabProps, ViewTabTypes } from './types';\n\nimport {\n  Contour,\n  CounterContainer,\n  CounterText,\n  CrossIconStyling,\n  CustomIconWrapper,\n  IconStyling,\n  Text,\n  ThreeDotsIconStyling,\n  ViewButton,\n} from './styled';\nimport { buildClassnames } from '../../utils/buildClassnames';\n\nexport interface ClassNamesReturnPayload {\n  delete?: string;\n  edit?: string;\n  container?: string;\n  active?: string;\n  counter?: string;\n}\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  delete: prefix ? `${prefix}-delete` : undefined,\n  edit: prefix ? `${prefix}-edit` : undefined,\n  container: prefix ? `${prefix}-view` : undefined,\n  active: prefix ? `${prefix}-active` : undefined,\n  counter: prefix ? `${prefix}-counter` : undefined,\n});\n\nexport const ViewTab = React.forwardRef<HTMLButtonElement, ViewTabProps>(\n  (\n    {\n      id,\n      iconSlot,\n      name,\n      type,\n      className,\n      colourPalette = colors.secondary.blue,\n      customTextColour,\n      count,\n      active = false,\n      onClick,\n      subAction,\n      ariaContext,\n      ...props\n    }: ViewTabProps,\n    ref: Ref<HTMLButtonElement>,\n  ) => {\n    const classNames = generateClassNames(className);\n    const [isHovered, handleEnter, handleLeave] = useHover();\n\n    const action = active && subAction ? subAction : onClick;\n    const handleAction = () => action(id);\n\n    const isDraft = type === ViewTabTypes.draft;\n    const isSaved = type === ViewTabTypes.saved;\n\n    const getLabelAction = () => {\n      if (active && isDraft) return 'Delete';\n      if (active && isSaved) return 'Edit';\n      return '';\n    };\n\n    return (\n      <ViewButton\n        className={buildClassnames([classNames?.container])}\n        onClick={handleAction}\n        role=\"tab\"\n        aria-selected={active}\n        aria-label={`${getLabelAction()} ${name} view ${\n          count ? `with ${count} ${ariaContext}` : ''\n        }`}\n        customTextColour={customTextColour}\n        ref={ref}\n        {...props}\n      >\n        <Contour\n          active={active}\n          onMouseEnter={handleEnter}\n          onMouseLeave={handleLeave}\n          colourPalette={colourPalette}\n          customTextColour={customTextColour}\n        >\n          {iconSlot && <CustomIconWrapper>{iconSlot}</CustomIconWrapper>}\n          <Text variant=\"bodyBold\">{name}</Text>\n          {count !== undefined && count !== null && (\n            <CounterContainer\n              data-testid=\"countContainer\"\n              active={active || isHovered}\n              colourPalette={colourPalette}\n              customTextColour={customTextColour}\n            >\n              <CounterText variant=\"subheadingSmall\">{count}</CounterText>\n            </CounterContainer>\n          )}\n          {isDraft && <CrossIconStyling {...IconStyling} aria-label=\"delete icon\" />}\n          {isSaved && active && <ThreeDotsIconStyling {...IconStyling} aria-label=\"edit icon\" />}\n        </Contour>\n      </ViewButton>\n    );\n  },\n);\n"],"names":["React","colors","useHover","ViewTabTypes","ViewButton","buildClassnames","Contour","CustomIconWrapper","Text","CounterContainer","CounterText","CrossIconStyling","IconStyling","ThreeDotsIconStyling"],"mappings":"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"}
+{"version":3,"file":"ViewTab.cjs","sources":["../../../src/components/ViewTab/ViewTab.tsx"],"sourcesContent":["import React, { Ref } from 'react';\n\nimport { useHover } from '../../hooks';\nimport { colors } from '../../theme/modules/colors';\n\nimport { ViewTabProps, ViewTabTypes } from './types';\n\nimport {\n  Contour,\n  CounterContainer,\n  CounterText,\n  CrossIconStyling,\n  CustomIconWrapper,\n  IconStyling,\n  Text,\n  ThreeDotsIconStyling,\n  ViewButton,\n} from './styled';\nimport { buildClassnames } from '../../utils/buildClassnames';\n\nexport interface ClassNamesReturnPayload {\n  delete?: string;\n  edit?: string;\n  container?: string;\n  active?: string;\n  counter?: string;\n}\n\nconst generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({\n  delete: prefix ? `${prefix}-delete` : undefined,\n  edit: prefix ? `${prefix}-edit` : undefined,\n  container: prefix ? `${prefix}-view` : undefined,\n  active: prefix ? `${prefix}-active` : undefined,\n  counter: prefix ? `${prefix}-counter` : undefined,\n});\n\nexport const ViewTab = React.forwardRef<HTMLButtonElement, ViewTabProps>(\n  (\n    {\n      id,\n      iconSlot,\n      name,\n      type,\n      className,\n      colourPalette = colors.secondary.blue,\n      customTextColour,\n      count,\n      active = false,\n      onClick,\n      subAction,\n      ariaContext,\n      ...props\n    }: ViewTabProps,\n    ref: Ref<HTMLButtonElement>,\n  ) => {\n    const classNames = generateClassNames(className);\n    const [isHovered, handleEnter, handleLeave] = useHover();\n\n    const action = active && subAction ? subAction : onClick;\n    const handleAction = () => action(id);\n\n    const isDraft = type === ViewTabTypes.draft;\n    const isSaved = type === ViewTabTypes.saved;\n\n    const getLabelAction = () => {\n      if (active && isDraft) return 'Delete';\n      if (active && isSaved) return 'Edit';\n      return '';\n    };\n\n    return (\n      <ViewButton\n        className={buildClassnames([classNames?.container])}\n        onClick={handleAction}\n        role=\"tab\"\n        aria-selected={active}\n        aria-label={`${getLabelAction()} ${name} view ${\n          count ? `with ${count} ${ariaContext}` : ''\n        }`}\n        customTextColour={customTextColour}\n        ref={ref}\n        {...props}\n      >\n        <Contour\n          active={active}\n          onMouseEnter={handleEnter}\n          onMouseLeave={handleLeave}\n          colourPalette={colourPalette}\n          customTextColour={customTextColour}\n        >\n          {iconSlot && <CustomIconWrapper>{iconSlot}</CustomIconWrapper>}\n          <Text variant=\"bodyBold\">{name}</Text>\n          {count !== undefined && count !== null && (\n            <CounterContainer\n              data-testid=\"countContainer\"\n              active={active || isHovered}\n              colourPalette={colourPalette}\n              customTextColour={customTextColour}\n            >\n              <CounterText variant=\"subheadingSmall\">{count}</CounterText>\n            </CounterContainer>\n          )}\n          {isDraft && <CrossIconStyling {...IconStyling} aria-label=\"delete icon\" />}\n          {isSaved && active && <ThreeDotsIconStyling {...IconStyling} aria-label=\"edit icon\" />}\n        </Contour>\n      </ViewButton>\n    );\n  },\n);\n"],"names":["React","colors","useHover","ViewTabTypes","ViewButton","buildClassnames","Contour","CustomIconWrapper","Text","CounterContainer","CounterText","CrossIconStyling","IconStyling","ThreeDotsIconStyling"],"mappings":"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"}