@mrshmllw/smores-react 6.0.0 → 6.0.2

package/dist/src/Tooltip/Tooltip.js

@@ -0,0 +1,261 @@
+import React, { useCallback, useEffect, useRef, useState, } from 'react';
+import { createPortal } from 'react-dom';
+import styled, { css } from 'styled-components';
+import { v4 as uuidv4 } from 'uuid';
+import { Box } from '../Box';
+import { Text } from '../Text';
+import { useEventListener } from '../hooks';
+import { theme } from '../theme';
+import { debounce } from '../utils/debounce';
+export const Tooltip = ({ children, title, content, position = 'top', maxWidth = 500, underline = false, fallbackStyle = false, zIndex = 10, portalContainer = document.body, }) => {
+    const documentRef = useRef(document);
+    const tipContainer = useRef(null);
+    const [showTip, setShowTip] = useState(false);
+    const [tooltipPosition, setTooltipPosition] = useState(position);
+    const [childEl, setChildEl] = useState(null);
+    const [tooltipCoords, setTooltipCoords] = useState({ top: 0, left: 0 });
+    const randomId = uuidv4();
+    const checkInbounds = (element) => element.top >= 0 &&
+        element.left >= 0 &&
+        element.bottom <= window.innerHeight &&
+        element.right <= window.innerWidth;
+    const handleTipViewport = useCallback(() => {
+        const dimensions = tipContainer.current?.getBoundingClientRect();
+        if (!dimensions)
+            return;
+        if (checkInbounds(dimensions))
+            return;
+        // If in bounds but not defaulted to top; default
+        if (dimensions.top >= 0 && tooltipPosition !== 'top') {
+            setTooltipPosition('top');
+            return;
+        }
+        // if top out of bounds
+        if (dimensions.top < 0) {
+            setTooltipPosition('bottom');
+            return;
+        }
+        // if right out of bounds
+        if (dimensions.right > window.innerWidth) {
+            setTooltipPosition('left');
+            return;
+        }
+        // if left out of bounds
+        if (dimensions.left < 0) {
+            setTooltipPosition('right');
+            return;
+        }
+        // If bottom out of bounds
+        if (dimensions.bottom > window.innerHeight) {
+            setTooltipPosition('top');
+            return;
+        }
+    }, [tipContainer, tooltipPosition]);
+    useEffect(() => {
+        handleTipViewport();
+        setChildEl(document.getElementById(randomId));
+    }, []);
+    useEffect(() => {
+        setTooltipPosition(position);
+    }, [position]);
+    const arrowSize = 18;
+    const calculateTooltipPosition = () => {
+        if (!childEl)
+            return { top: 0, left: 0 };
+        if (!tipContainer.current)
+            return { top: 0, left: 0 };
+        const childPosition = childEl.getBoundingClientRect();
+        const tipDimensions = tipContainer.current.getBoundingClientRect();
+        let top = 0;
+        let left = 0;
+        switch (tooltipPosition) {
+            case 'top':
+                top =
+                    childPosition.top + window.scrollY - tipDimensions.height - arrowSize;
+                left =
+                    childPosition.left +
+                        window.scrollX +
+                        childPosition.width / 2 -
+                        tipDimensions.width / 2;
+                break;
+            case 'bottom':
+                top = childPosition.bottom + window.scrollY + arrowSize;
+                left =
+                    childPosition.left +
+                        window.scrollX +
+                        childPosition.width / 2 -
+                        tipDimensions.width / 2;
+                break;
+            case 'left':
+                left =
+                    childPosition.left + window.scrollX - tipDimensions.width - arrowSize;
+                top =
+                    childPosition.top +
+                        window.scrollY +
+                        childPosition.height / 2 -
+                        tipDimensions.height / 2;
+                break;
+            case 'right':
+                left = childPosition.right + window.scrollX + arrowSize;
+                top =
+                    childPosition.top +
+                        window.scrollY +
+                        childPosition.height / 2 -
+                        tipDimensions.height / 2;
+                break;
+            default:
+                break;
+        }
+        return { top, left };
+    };
+    useEffect(() => {
+        if (childEl) {
+            setTooltipCoords(calculateTooltipPosition());
+        }
+    }, [
+        position,
+        window.scrollY,
+        tipContainer.current,
+        childEl,
+        childEl?.getBoundingClientRect().top,
+        childEl?.getBoundingClientRect().left,
+    ]);
+    useEventListener({
+        eventName: 'resize',
+        callback: debounce(handleTipViewport, 100),
+        ref: documentRef,
+    });
+    useEventListener({
+        eventName: 'scroll',
+        callback: debounce(handleTipViewport, 100),
+        ref: documentRef,
+    });
+    return (React.createElement(Container, null,
+        React.createElement(UnderlinedChild, { id: randomId, underline: underline, onMouseEnter: () => setShowTip(true), onMouseLeave: () => setShowTip(false) }, children),
+        childEl &&
+            createPortal(React.createElement(Tip, { className: "tooltip", showTip: showTip, position: position, arrowPosition: tooltipPosition, ref: tipContainer, maxWidth: maxWidth, fallbackStyle: fallbackStyle, zIndex: zIndex, style: {
+                    position: 'absolute',
+                    top: `${tooltipCoords.top}px`,
+                    left: `${tooltipCoords.left}px`,
+                } },
+                title && (React.createElement(Text, { tag: "h5", typo: "desc-medium", color: fallbackStyle ? 'cream' : 'liquorice' }, title)),
+                (typeof content === 'string' && (React.createElement(Text, { typo: "desc-light", color: fallbackStyle ? 'cream' : 'liquorice' }, content))) ||
+                    content), portalContainer)));
+};
+export const Container = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  > span:hover + .tooltip {
+    opacity: 1;
+  }
+`;
+const UnderlinedChild = styled(Box) `
+  cursor: pointer;
+  ${({ underline }) => underline &&
+    css `
+      border-bottom: 1px dashed ${theme.colors.marshmallowPink};
+    `}
+`;
+const arrowInset = 26;
+const arrowCenterPosition = 'calc(50% - 6px)';
+const arrowVerticalCenter = 'calc(50% - 12px)';
+const handleHorizontalArrowPosition = (arrowPosition) => {
+    switch (arrowPosition) {
+        case 'left':
+            return css `
+        left: ${arrowInset}px;
+      `;
+        case 'right':
+            return css `
+        right: ${arrowInset}px;
+      `;
+        default:
+            return css `
+        left: ${arrowCenterPosition};
+      `;
+    }
+};
+const handleVerticalArrowPosition = (arrowPosition) => {
+    switch (arrowPosition) {
+        case 'top':
+            return css `
+        top: ${arrowInset}px;
+      `;
+        case 'bottom':
+            return css `
+        bottom: ${arrowInset}px;
+      `;
+        default:
+            return css `
+        top: ${arrowVerticalCenter};
+      `;
+    }
+};
+const top = css `
+  &:before {
+    bottom: -15px;
+    transform: rotate(-90deg);
+    ${({ arrowPosition }) => handleHorizontalArrowPosition(arrowPosition)}
+  }
+`;
+const bottom = css `
+  &:before {
+    top: -15px;
+    transform: rotate(90deg);
+    ${({ arrowPosition }) => handleHorizontalArrowPosition(arrowPosition)}
+  }
+`;
+const left = css `
+  &:before {
+    right: -11px;
+    transform: rotate(180deg);
+    ${({ arrowPosition }) => handleVerticalArrowPosition(arrowPosition)}
+  }
+`;
+const right = css `
+  &:before {
+    left: -11px;
+    ${({ arrowPosition }) => handleVerticalArrowPosition(arrowPosition)}
+  }
+`;
+export const Tip = styled.div `
+  position: absolute;
+  margin: auto;
+  background: ${theme.colors.custard};
+  padding: 16px 12px 20px;
+  border-radius: 16px;
+  max-width: 450px;
+  opacity: ${({ showTip }) => (showTip ? '1' : '0')};
+  transition: opacity 0.2s ease-in-out;
+  pointer-events: none;
+  cursor: default;
+  z-index: ${({ zIndex }) => (zIndex ? zIndex : '10')};
+
+  // this is the trick that will make sure the content can go up to maxWidth
+  margin-right: ${({ maxWidth }) => maxWidth && -maxWidth / 2 + 'px'};
+  max-width: ${({ maxWidth }) => maxWidth && maxWidth + 'px'};
+
+  ${({ arrowPosition }) => arrowPosition === 'top' && top}
+  ${({ arrowPosition }) => arrowPosition === 'bottom' && bottom}
+	${({ arrowPosition }) => arrowPosition === 'left' && left}
+	${({ arrowPosition }) => arrowPosition === 'right' && right}
+
+  &:before {
+    content: '';
+    border-style: solid;
+    border-width: 12px 12px 12px 0;
+    border-color: transparent ${theme.colors.custard} transparent transparent;
+    position: absolute;
+  }
+
+  ${({ fallbackStyle }) => fallbackStyle &&
+    css `
+      background: ${theme.colors.feijoa};
+      &:before {
+        border-color: transparent ${theme.colors.feijoa} transparent transparent;
+      }
+    `};
+`;
+//# sourceMappingURL=Tooltip.js.map

package/dist/src/Tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"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"}

package/dist/src/Tooltip/index.js

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

package/dist/src/Tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA"}

package/dist/src/fields/Field/Field.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { InternalField } from '../components/InternalField';
+export const Field = ({ children, ...fieldProps }) => {
+    return (React.createElement(InternalField, { fieldType: "field", ...fieldProps }, children));
+};
+//# sourceMappingURL=Field.js.map

package/dist/src/fields/Field/Field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../../src/fields/Field/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAGxC,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAO3D,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAc,EAAE,EAAE;IAC/D,OAAO,CACL,oBAAC,aAAa,IAAC,SAAS,EAAC,OAAO,KAAK,UAAU,IAC5C,QAAQ,CACK,CACjB,CAAA;AACH,CAAC,CAAA"}

package/dist/src/fields/Field/index.js

@@ -0,0 +1,2 @@
+export * from './Field';
+//# sourceMappingURL=index.js.map

package/dist/src/fields/Field/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/fields/Field/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA"}

package/dist/src/fields/Fieldset/Fieldset.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { InternalField } from '../components/InternalField';
+export const Fieldset = ({ children, renderAsTitle = true, id, ...fieldProps }) => {
+    return (React.createElement(InternalField, { htmlFor: id, fieldType: "fieldset", renderAsTitle: renderAsTitle, ...fieldProps }, children));
+};
+//# sourceMappingURL=Fieldset.js.map

package/dist/src/fields/Fieldset/Fieldset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fieldset.js","sourceRoot":"","sources":["../../../../src/fields/Fieldset/Fieldset.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAI3D,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,QAAQ,EACR,aAAa,GAAG,IAAI,EACpB,EAAE,EACF,GAAG,UAAU,EACC,EAAE,EAAE;IAClB,OAAO,CACL,oBAAC,aAAa,IACZ,OAAO,EAAE,EAAE,EACX,SAAS,EAAC,UAAU,EACpB,aAAa,EAAE,aAAa,KACxB,UAAU,IAEb,QAAQ,CACK,CACjB,CAAA;AACH,CAAC,CAAA"}

package/dist/src/fields/Fieldset/index.js

@@ -0,0 +1,2 @@
+export * from './Fieldset';
+//# sourceMappingURL=index.js.map

package/dist/src/fields/Fieldset/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/fields/Fieldset/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}

package/dist/src/fields/commonFieldTypes.js

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

package/dist/src/fields/commonFieldTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"commonFieldTypes.js","sourceRoot":"","sources":["../../../src/fields/commonFieldTypes.ts"],"names":[],"mappings":""}

package/dist/src/fields/components/CommonInput.js

@@ -0,0 +1,67 @@
+import styled, { css } from 'styled-components';
+import { Icon } from '../../Icon';
+import { theme } from '../../theme';
+export const Input = styled.input `
+  border: none;
+  color: ${({ error }) => theme.colors[`${error ? 'strawberry' : 'liquorice'}`]};
+  font-size: 16px;
+  width: 100%;
+  outline: none;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'initial')};
+  opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
+  padding: 18px 14px;
+  background-color: ${({ fallbackStyle }) => fallbackStyle ? theme.colors.custard : theme.colors.cream};
+  border: 2px solid
+    ${({ error }) => (error ? theme.colors.strawberry : theme.colors.oatmeal)};
+
+  ${({ disabled, error }) => !disabled &&
+    !error &&
+    css `
+      &:hover,
+      &:focus-within {
+        border-color: ${theme.colors.marzipan};
+      }
+    `}
+
+  border-radius: 12px;
+  height: auto;
+
+  ${({ frontIcon }) => frontIcon &&
+    `
+      padding-left: 42px;
+    `}
+
+  ${({ trailingIcon }) => trailingIcon &&
+    `
+      padding-right: 42px;
+    `}
+
+  /* Remove the spinner on Firefox and Webkit browsers */
+  -moz-appearance: textfield;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  &::placeholder {
+    color: ${theme.colors.sesame};
+  }
+`;
+export const StyledFrontIcon = styled(Icon) `
+  position: relative;
+  left: 36px;
+  margin-left: -24px;
+  z-index: 1;
+  opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
+  color: ${theme.colors.liquorice};
+`;
+export const StyledTrailingIcon = styled(Icon) `
+  position: relative;
+  right: 36px;
+  margin-right: -36px;
+  opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
+  color: ${theme.colors.liquorice};
+`;
+//# sourceMappingURL=CommonInput.js.map

package/dist/src/fields/components/CommonInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommonInput.js","sourceRoot":"","sources":["../../../../src/fields/components/CommonInput.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AAEjC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAiBnC,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAQ;;WAE9B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACrB,KAAK,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;;;;YAI7C,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;aACvD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;;sBAEjC,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CACxC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;MAEvD,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;;IAEzE,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,CACxB,CAAC,QAAQ;IACT,CAAC,KAAK;IACN,GAAG,CAAA;;;wBAGiB,KAAK,CAAC,MAAM,CAAC,QAAQ;;KAExC;;;;;IAKD,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAClB,SAAS;IACT;;KAEC;;IAED,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CACrB,YAAY;IACZ;;KAEC;;;;;;;;;;;;aAYQ,KAAK,CAAC,MAAM,CAAC,MAAM;;CAE/B,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,CAAO;;;;;aAKrC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;WAC5C,KAAK,CAAC,MAAM,CAAC,SAAS;CAChC,CAAA;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAO;;;;aAIxC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;WAC5C,KAAK,CAAC,MAAM,CAAC,SAAS;CAChC,CAAA"}

package/dist/src/fields/components/InternalField.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { Text } from '../../Text';
+import { Box } from '../../Box';
+import { Icon } from '../../Icon';
+export const InternalField = ({ children, fieldType, renderAsTitle, htmlFor, className, label, assistiveText, error, errorMsg, required, completed, ...marginProps }) => {
+    const labelTag = fieldType === 'field' ? 'label' : 'legend';
+    return (React.createElement(Container, { as: fieldType === 'field' ? 'div' : 'fieldset', className: className, ...marginProps },
+        label && (React.createElement(React.Fragment, null, renderAsTitle ? (React.createElement(Box, { mb: "16px" },
+            React.createElement(Text, { tag: labelTag, typo: "heading-small", htmlFor: htmlFor }, label),
+            assistiveText && (React.createElement(Text, { tag: "p", color: "sesame", mt: { custom: 4 } }, assistiveText)))) : (React.createElement(Text, { tag: labelTag, typo: "label", color: error ? 'strawberry' : 'sesame', htmlFor: htmlFor, mb: { custom: 4 } },
+            label,
+            required && (React.createElement(Text, { tag: "span", typo: "body-small", color: "strawberry" }, "*")))))),
+        React.createElement(Box, null, children),
+        fieldType === 'field' && assistiveText && !renderAsTitle && (React.createElement(Text, { tag: labelTag, typo: "caption", color: error ? 'strawberry' : 'sesame', mt: { custom: 4 } }, assistiveText)),
+        error &&
+            errorMsg &&
+            (typeof errorMsg === 'string' ? (React.createElement(Text, { tag: "span", typo: "caption", color: "strawberry", mt: "8px" }, errorMsg)) : (React.createElement(Box, { mt: "8px" }, errorMsg))),
+        completed !== undefined && (React.createElement(AnimationWrapper, { displayStatus: completed, isError: !!(error && errorMsg) },
+            React.createElement(StatusWrapper, { mt: '8px' },
+                React.createElement(Icon, { render: "included", size: 16, color: "apple" }),
+                React.createElement(Text, { typo: "caption", color: "apple" }, "Complete"))))));
+};
+const AnimationWrapper = styled(Box) `
+  width: 0;
+  overflow: hidden;
+
+  ${({ displayStatus }) => displayStatus &&
+    css `
+      transition: width 0.6s ease-in;
+      width: 100%;
+    `}
+
+  /* This enables animation to appear when previous state is error */
+  ${({ isError }) => isError &&
+    css `
+      height: 0;
+    `}
+`;
+const StatusWrapper = styled(Box) `
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+const Container = styled(Box) `
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+
+  // In case, the element is a 'fieldset', we remove the border
+  border: 0;
+`;
+//# sourceMappingURL=InternalField.js.map

package/dist/src/fields/components/InternalField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InternalField.js","sourceRoot":"","sources":["../../../../src/fields/components/InternalField.tsx"],"names":[],"mappings":"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"}

package/dist/src/fields/components/Placeholder.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box } from '../../Box';
+import { theme } from '../../theme';
+export const Placeholder = () => {
+    return (React.createElement(Wrapper, null,
+        React.createElement(Svg, { xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement(Line, { x1: "0", y1: "0", x2: "100%", y2: "100%" }),
+            React.createElement(Line, { x1: "100%", y1: "0", x2: "0", y2: "100%" }))));
+};
+const Wrapper = styled(Box) `
+  background-color: ${theme.colors.coconut};
+  border: 2px solid ${theme.colors.chia};
+  height: 40px;
+  width: auto;
+`;
+const Svg = styled.svg `
+  width: 100%;
+  height: 100%;
+`;
+const Line = styled.line `
+  stroke-width: 2px;
+  stroke: ${theme.colors.chia};
+`;
+//# sourceMappingURL=Placeholder.js.map

package/dist/src/fields/components/Placeholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Placeholder.js","sourceRoot":"","sources":["../../../../src/fields/components/Placeholder.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAEnC,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE;IAC9B,OAAO,CACL,oBAAC,OAAO;QACN,oBAAC,GAAG,IAAC,KAAK,EAAC,4BAA4B;YACrC,oBAAC,IAAI,IAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,MAAM,GAAG;YAC1C,oBAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,MAAM,GAAG,CACtC,CACE,CACX,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;sBACL,KAAK,CAAC,MAAM,CAAC,OAAO;sBACpB,KAAK,CAAC,MAAM,CAAC,IAAI;;;CAGtC,CAAA;AAED,MAAM,GAAG,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGrB,CAAA;AAED,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;;YAEZ,KAAK,CAAC,MAAM,CAAC,IAAI;CAC5B,CAAA"}

package/dist/src/fontStyle.js

@@ -0,0 +1,35 @@
+import { createGlobalStyle } from 'styled-components';
+import { theme } from './theme';
+export const FontStyle = createGlobalStyle `
+  @font-face {
+    font-family: 'Circular';
+    src: url('https://uploads-ssl.webflow.com/5baa461315ee32413d16236d/5f7f0665430aaedf8cb0bbf3_CircularXXSub-RegularSubset.woff2') format('woff2');
+    font-weight: ${theme.font.weight.normal};
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Circular';
+    src: url('https://uploads-ssl.webflow.com/5baa461315ee32413d16236d/5f7f066540b11e802f892996_CircularXXWeb-Medium.woff2') format('woff2');
+    font-weight: ${theme.font.weight.medium};
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Circular';
+    src: url('https://uploads-ssl.webflow.com/5baa461315ee32413d16236d/5f7f0665ddfa22dd5375ca6e_CircularXXWeb-Bold.woff2') format('woff2');
+    font-weight: ${theme.font.weight.bold};
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'MarshmallowYouth';
+    src: url('https://assets.marshmallow.com/fonts/MarshmallowYouth-Bold.woff2') format('woff2');
+    font-weight: ${theme.font.weight.bold};
+    font-style: normal;
+  }
+`;
+//# sourceMappingURL=fontStyle.js.map

package/dist/src/fontStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fontStyle.js","sourceRoot":"","sources":["../../src/fontStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAE/B,MAAM,CAAC,MAAM,SAAS,GAAG,iBAAiB,CAAA;;;;mBAIvB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;;;;;;;mBAQxB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;;;;;;;mBAQxB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI;;;;;;;;mBAQtB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI;;;CAGxC,CAAA"}

package/dist/src/hooks/index.js

@@ -0,0 +1,5 @@
+export * from './useEventListener';
+export * from './useClickOutside';
+export * from './useScript';
+export * from './useTimeout';
+//# sourceMappingURL=index.js.map

package/dist/src/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA"}

package/dist/src/hooks/useClickOutside/index.js

@@ -0,0 +1,24 @@
+import { useCallback, useRef } from 'react';
+import { useEventListener } from '../useEventListener';
+export const useOnClickOutside = ({ ref, callback, }) => {
+    const onClickOutsideListener = useCallback((event) => {
+        if (!ref || !ref.current || ref.current.contains(event.target)) {
+            return;
+        }
+        callback(event);
+    }, [ref, callback]);
+    const documentRef = useRef(document.body);
+    useEventListener({
+        eventName: 'click',
+        ref: documentRef,
+        callback: onClickOutsideListener,
+        capture: true,
+    });
+    useEventListener({
+        eventName: 'touchend',
+        ref: documentRef,
+        callback: onClickOutsideListener,
+        capture: true,
+    });
+};
+//# sourceMappingURL=index.js.map

package/dist/src/hooks/useClickOutside/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/hooks/useClickOutside/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAGtD,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,GAAG,EACH,QAAQ,GAIT,EAAE,EAAE;IACH,MAAM,sBAAsB,GAAG,WAAW,CACxC,CAAC,KAAiB,EAAE,EAAE;QACpB,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE,CAAC;YACvE,OAAM;QACR,CAAC;QAED,QAAQ,CAAC,KAAK,CAAC,CAAA;IACjB,CAAC,EAED,CAAC,GAAG,EAAE,QAAQ,CAAC,CAChB,CAAA;IAED,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;IAEzC,gBAAgB,CAAC;QACf,SAAS,EAAE,OAAO;QAClB,GAAG,EAAE,WAAW;QAChB,QAAQ,EAAE,sBAAsB;QAChC,OAAO,EAAE,IAAI;KACd,CAAC,CAAA;IAEF,gBAAgB,CAAC;QACf,SAAS,EAAE,UAAU;QACrB,GAAG,EAAE,WAAW;QAChB,QAAQ,EAAE,sBAAsB;QAChC,OAAO,EAAE,IAAI;KACd,CAAC,CAAA;AACJ,CAAC,CAAA"}

package/dist/src/hooks/useClickOutside/useClickOutside.test.js

@@ -0,0 +1,45 @@
+import { act, cleanup, fireEvent, renderHook } from '@testing-library/react';
+import { useOnClickOutside } from '.';
+describe('useClickOutside', () => {
+    let element;
+    let cb;
+    beforeEach(() => {
+        cb = vi.fn();
+        element = document.createElement('div');
+        document.body.appendChild(element);
+        renderHook(() => useOnClickOutside({ ref: { current: element }, callback: cb }));
+    });
+    afterEach(() => {
+        element.remove();
+        cleanup();
+    });
+    describe('mouseDown', () => {
+        it('should call the callback when click outside the element', () => {
+            act(() => {
+                fireEvent.click(document.body);
+            });
+            return expect(cb.mock.calls).toHaveLength(1);
+        });
+        it('should not call the callback when clicking the element', () => {
+            act(() => {
+                fireEvent.click(element);
+            });
+            return expect(cb.mock.calls).toHaveLength(0);
+        });
+    });
+    describe('touchStart', () => {
+        it('should call the callback when click outside the element', () => {
+            act(() => {
+                fireEvent.touchEnd(document.body);
+            });
+            return expect(cb.mock.calls).toHaveLength(1);
+        });
+        it('should not call the callback when clicking the element', () => {
+            act(() => {
+                fireEvent.touchEnd(element);
+            });
+            return expect(cb.mock.calls).toHaveLength(0);
+        });
+    });
+});
+//# sourceMappingURL=useClickOutside.test.js.map

package/dist/src/hooks/useClickOutside/useClickOutside.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClickOutside.test.js","sourceRoot":"","sources":["../../../../src/hooks/useClickOutside/useClickOutside.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,GAAG,CAAA;AAErC,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC/B,IAAI,OAAoB,CAAA;IACxB,IAAI,EAAQ,CAAA;IAEZ,UAAU,CAAC,GAAG,EAAE;QACd,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,CAAA;QACZ,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;QACvC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAA;QAClC,UAAU,CAAC,GAAG,EAAE,CACd,iBAAiB,CAAC,EAAE,GAAG,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAC/D,CAAA;IACH,CAAC,CAAC,CAAA;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,MAAM,EAAE,CAAA;QAChB,OAAO,EAAE,CAAA;IACX,CAAC,CAAC,CAAA;IACF,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;QACzB,EAAE,CAAC,yDAAyD,EAAE,GAAG,EAAE;YACjE,GAAG,CAAC,GAAG,EAAE;gBACP,SAAS,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;YAChC,CAAC,CAAC,CAAA;YACF,OAAO,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAA;QAC9C,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,wDAAwD,EAAE,GAAG,EAAE;YAChE,GAAG,CAAC,GAAG,EAAE;gBACP,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;YAC1B,CAAC,CAAC,CAAA;YACF,OAAO,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAA;QAC9C,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;QAC1B,EAAE,CAAC,yDAAyD,EAAE,GAAG,EAAE;YACjE,GAAG,CAAC,GAAG,EAAE;gBACP,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;YACnC,CAAC,CAAC,CAAA;YACF,OAAO,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAA;QAC9C,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,wDAAwD,EAAE,GAAG,EAAE;YAChE,GAAG,CAAC,GAAG,EAAE;gBACP,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;YAC7B,CAAC,CAAC,CAAA;YACF,OAAO,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAA;QAC9C,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/dist/src/hooks/useEventListener/index.js

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+export const useEventListener = ({ eventName, callback, ref, capture = false, }) => {
+    useEffect(() => {
+        const refElement = ref && ref.current;
+        if (!refElement)
+            return;
+        const listenerOptions = { capture };
+        refElement.addEventListener(eventName, callback, listenerOptions);
+        return () => {
+            refElement.removeEventListener(eventName, callback, listenerOptions);
+        };
+    }, [eventName, ref, callback, capture]);
+};
+//# sourceMappingURL=index.js.map

package/dist/src/hooks/useEventListener/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/hooks/useEventListener/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAE,MAAM,OAAO,CAAA;AAG5C,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC/B,SAAS,EACT,QAAQ,EACR,GAAG,EACH,OAAO,GAAG,KAAK,GAMhB,EAAQ,EAAE;IACT,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,GAAG,IAAI,GAAG,CAAC,OAAO,CAAA;QACrC,IAAI,CAAC,UAAU;YAAE,OAAM;QACvB,MAAM,eAAe,GAAG,EAAE,OAAO,EAAE,CAAA;QAEnC,UAAU,CAAC,gBAAgB,CAAC,SAAS,EAAE,QAAQ,EAAE,eAAe,CAAC,CAAA;QAEjE,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,EAAE,eAAe,CAAC,CAAA;QACtE,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,GAAG,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAA;AACzC,CAAC,CAAA"}