@faststore/components 3.0.7 → 3.0.32-alpha.0

package/dist/molecules/InputField/InputField.d.ts

@@ -0,0 +1,60 @@
+import type { MutableRefObject } from 'react';
+import React from 'react';
+import type { InputProps } from '../../';
+type DefaultProps = {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+    /**
+     * ID to identify input and corresponding label.
+     */
+    id: string;
+    /**
+     * The text displayed to identify input text.
+     */
+    label: string;
+    /**
+     * The error message is displayed when an error occurs.
+     */
+    error?: string;
+    /**
+     * Component's ref.
+     */
+    inputRef?: MutableRefObject<HTMLInputElement | null>;
+    /**
+     * Specifies that the whole input component should be disabled.
+     */
+    disabled?: boolean;
+};
+type ActionableInputField = {
+    actionable?: never;
+    onSubmit?: never;
+    onClear?: never;
+    buttonActionText?: string;
+    displayClearButton?: never;
+} | {
+    /**
+     * Adds a Button to the component.
+     */
+    actionable: true;
+    /**
+     * Callback function when button is clicked. Required for actionable input.
+     */
+    onSubmit: () => void;
+    /**
+     * Callback function when clear button is clicked. Required for actionable input.
+     */
+    onClear: () => void;
+    /**
+     * The text displayed on the Button. Suggestion: maximum 9 characters.
+     */
+    buttonActionText?: string;
+    /**
+     * Boolean that controls the clear button.
+     */
+    displayClearButton?: boolean;
+};
+export type InputFieldProps = DefaultProps & Omit<InputProps, 'disabled' | 'onSubmit'> & ActionableInputField;
+declare const InputField: ({ id, label, type, error, displayClearButton, actionable, buttonActionText, onSubmit, onClear, placeholder, inputRef, disabled, value, testId, ...otherProps }: InputFieldProps) => React.JSX.Element;
+export default InputField;

package/dist/molecules/InputField/InputField.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Button, Icon, IconButton, Input, Label } from '../../';
+const InputField = ({ id, label, type = 'text', error, displayClearButton, actionable, buttonActionText = 'Apply', onSubmit, onClear, placeholder = ' ', // initializes with an empty space to style float label using `placeholder-shown`
+inputRef, disabled, value, testId = 'fs-input-field', ...otherProps }) => {
+    const shouldDisplayError = !disabled && error && error !== '';
+    const shouldDisplayButton = actionable && !disabled && value !== '';
+    return (React.createElement("div", { "data-fs-input-field": true, "data-fs-input-field-actionable": actionable, "data-fs-input-field-error": error && error !== '', "data-testid": testId },
+        React.createElement(Input, { id: id, type: type, value: value, ref: inputRef, disabled: disabled, placeholder: placeholder, ...otherProps }),
+        React.createElement(Label, { htmlFor: id }, label),
+        shouldDisplayButton &&
+            (displayClearButton || error ? (React.createElement(IconButton, { size: "small", "aria-label": "Clear Field", icon: React.createElement(Icon, { name: "XCircle" }), onClick: () => {
+                    onClear?.();
+                    inputRef?.current?.focus();
+                } })) : (React.createElement(Button, { variant: "tertiary", size: "small", onClick: onSubmit }, buttonActionText))),
+        shouldDisplayError && (React.createElement("span", { "data-fs-input-field-error-message": true }, error))));
+};
+export default InputField;
+//# sourceMappingURL=InputField.js.map

package/dist/molecules/InputField/InputField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputField.js","sourceRoot":"","sources":["../../../src/molecules/InputField/InputField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAgE/D,MAAM,UAAU,GAAG,CAAC,EAClB,EAAE,EACF,KAAK,EACL,IAAI,GAAG,MAAM,EACb,KAAK,EACL,kBAAkB,EAClB,UAAU,EACV,gBAAgB,GAAG,OAAO,EAC1B,QAAQ,EACR,OAAO,EACP,WAAW,GAAG,GAAG,EAAE,iFAAiF;AACpG,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,MAAM,GAAG,gBAAgB,EACzB,GAAG,UAAU,EACG,EAAE,EAAE;IACpB,MAAM,kBAAkB,GAAG,CAAC,QAAQ,IAAI,KAAK,IAAI,KAAK,KAAK,EAAE,CAAA;IAC7D,MAAM,mBAAmB,GAAG,UAAU,IAAI,CAAC,QAAQ,IAAI,KAAK,KAAK,EAAE,CAAA;IAEnE,OAAO,CACL,4FAEkC,UAAU,+BACf,KAAK,IAAI,KAAK,KAAK,EAAE,iBACnC,MAAM;QAEnB,oBAAC,KAAK,IACJ,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,QAAQ,EACb,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,KACpB,UAAU,GACd;QACF,oBAAC,KAAK,IAAC,OAAO,EAAE,EAAE,IAAG,KAAK,CAAS;QAElC,mBAAmB;YAClB,CAAC,kBAAkB,IAAI,KAAK,CAAC,CAAC,CAAC,CAC7B,oBAAC,UAAU,IACT,IAAI,EAAC,OAAO,gBACD,aAAa,EACxB,IAAI,EAAE,oBAAC,IAAI,IAAC,IAAI,EAAC,SAAS,GAAG,EAC7B,OAAO,EAAE,GAAG,EAAE;oBACZ,OAAO,EAAE,EAAE,CAAA;oBACX,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,CAAA;gBAC5B,CAAC,GACD,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,MAAM,IAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,QAAQ,IACtD,gBAAgB,CACV,CACV,CAAC;QACH,kBAAkB,IAAI,CACrB,2EAAyC,KAAK,CAAQ,CACvD,CACG,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,UAAU,CAAA"}

package/dist/molecules/InputField/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './InputField';
+export type { InputFieldProps } from './InputField';

package/dist/molecules/InputField/index.js

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

package/dist/molecules/InputField/index.js.map

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

package/dist/molecules/LinkButton/LinkButton.d.ts

@@ -0,0 +1,6 @@
+import type { AnchorHTMLAttributes } from 'react';
+import React from 'react';
+import type { ButtonProps } from '../..';
+export type LinkButtonProps = AnchorHTMLAttributes<HTMLAnchorElement> & ButtonProps;
+declare function LinkButton({ icon, inverse, children, disabled, iconPosition, size, variant, testId, ...otherProps }: LinkButtonProps): React.JSX.Element;
+export default LinkButton;

package/dist/molecules/LinkButton/LinkButton.js

@@ -0,0 +1,17 @@
+import React, { useRef } from 'react';
+function LinkButton({ icon, inverse, children, disabled, iconPosition, size = 'regular', variant = 'primary', testId = 'fs-link-button', ...otherProps }) {
+    const linkRef = useRef(null);
+    function onFocus(e) {
+        e.preventDefault();
+        if (disabled) {
+            linkRef.current?.blur();
+        }
+    }
+    return (React.createElement("a", { ref: linkRef, "data-fs-button": true, "data-fs-link-button": true, "data-fs-button-size": size, "data-fs-button-variant": variant, "data-fs-button-inverse": inverse, "data-fs-button-disabled": disabled, onFocus: onFocus, "data-testid": testId, ...otherProps },
+        React.createElement("div", { "data-fs-button-wrapper": true },
+            !!icon && iconPosition === 'left' && (React.createElement("span", { "data-fs-button-icon": true }, icon)),
+            children && React.createElement("span", null, children),
+            !!icon && iconPosition === 'right' && (React.createElement("span", { "data-fs-button-icon": true }, icon)))));
+}
+export default LinkButton;
+//# sourceMappingURL=LinkButton.js.map

package/dist/molecules/LinkButton/LinkButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkButton.js","sourceRoot":"","sources":["../../../src/molecules/LinkButton/LinkButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAOrC,SAAS,UAAU,CAAC,EAClB,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,IAAI,GAAG,SAAS,EAChB,OAAO,GAAG,SAAS,EACnB,MAAM,GAAG,gBAAgB,EACzB,GAAG,UAAU,EACG;IAChB,MAAM,OAAO,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAA;IAEtD,SAAS,OAAO,CAAC,CAAa;QAC5B,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,IAAI,QAAQ,EAAE;YACZ,OAAO,CAAC,OAAO,EAAE,IAAI,EAAE,CAAA;SACxB;IACH,CAAC;IAED,OAAO,CACL,2BACE,GAAG,EAAE,OAAO,8EAGS,IAAI,4BACD,OAAO,4BACP,OAAO,6BACN,QAAQ,EACjC,OAAO,EAAE,OAAO,iBACH,MAAM,KACf,UAAU;QAEd;YACG,CAAC,CAAC,IAAI,IAAI,YAAY,KAAK,MAAM,IAAI,CACpC,6DAA2B,IAAI,CAAQ,CACxC;YACA,QAAQ,IAAI,kCAAO,QAAQ,CAAQ;YACnC,CAAC,CAAC,IAAI,IAAI,YAAY,KAAK,OAAO,IAAI,CACrC,6DAA2B,IAAI,CAAQ,CACxC,CACG,CACJ,CACL,CAAA;AACH,CAAC;AAED,eAAe,UAAU,CAAA"}

package/dist/molecules/LinkButton/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './LinkButton';
+export type { LinkButtonProps } from './LinkButton';

package/dist/molecules/LinkButton/index.js

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

package/dist/molecules/LinkButton/index.js.map

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

package/dist/molecules/Modal/Modal.d.ts

@@ -0,0 +1,39 @@
+import type { AriaAttributes, ReactNode } from 'react';
+import React from 'react';
+import { OverlayProps } from '../..';
+import type { ModalContentProps } from './ModalContent';
+export type ModalChildrenProps = {
+    fade: 'in' | 'out';
+    fadeOut: () => void;
+    fadeIn: () => void;
+};
+type ModalChildrenFunction = (props: ModalChildrenProps) => ReactNode;
+export interface ModalProps extends Omit<ModalContentProps, 'children'> {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+    /**
+     * Identifies the element (or elements) that labels the current element.
+     * @see aria-labelledby https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby
+     */
+    'aria-labelledby'?: AriaAttributes['aria-label'];
+    /**
+     * A boolean value that represents the state of the Modal
+     */
+    isOpen?: boolean;
+    /**
+     * Event emitted when the modal is closed
+     */
+    onDismiss?: () => void;
+    /**
+     * Props forwarded to the `Overlay` component
+     */
+    overlayProps?: OverlayProps;
+    /**
+     * Children or function as a children
+     */
+    children: ModalChildrenFunction | ReactNode;
+}
+declare const Modal: ({ children, testId, isOpen, onDismiss, overlayProps, ...otherProps }: ModalProps) => React.ReactPortal | null;
+export default Modal;

package/dist/molecules/Modal/Modal.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { Overlay } from '../..';
+import { useFadeEffect, useUI } from '../../hooks';
+import ModalContent from './ModalContent';
+/*
+ * This component is based on @reach/dialog.
+ * https://github.com/reach/reach-ui/blob/main/packages/dialog/src/index.tsx
+ * https://reach.tech/dialog
+ */
+const Modal = ({ children, testId = 'fs-modal', isOpen = true, onDismiss, overlayProps, ...otherProps }) => {
+    const { closeModal } = useUI();
+    const { fade, fadeOut, fadeIn } = useFadeEffect();
+    const handleBackdropClick = (event) => {
+        if (event.defaultPrevented) {
+            return;
+        }
+        event.stopPropagation();
+        fadeOut?.();
+        onDismiss?.();
+    };
+    const handleBackdropKeyDown = (event) => {
+        if (event.key !== 'Escape' || event.defaultPrevented) {
+            return;
+        }
+        event.stopPropagation();
+        fadeOut?.();
+        onDismiss?.();
+    };
+    return isOpen
+        ? createPortal(React.createElement(Overlay, { onClick: handleBackdropClick, onKeyDown: handleBackdropKeyDown, ...overlayProps },
+            React.createElement(ModalContent, { onTransitionEnd: () => fade === 'out' && closeModal(), "data-fs-modal": true, "data-fs-modal-state": fade, testId: testId, ...otherProps }, typeof children === 'function'
+                ? children({ fade, fadeOut, fadeIn })
+                : children)), document.body)
+        : null;
+};
+export default Modal;
+//# sourceMappingURL=Modal.js.map

package/dist/molecules/Modal/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/molecules/Modal/Modal.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAExC,OAAO,EAAE,OAAO,EAAgB,MAAM,OAAO,CAAA;AAC7C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAElD,OAAO,YAAY,MAAM,gBAAgB,CAAA;AAsCzC;;;;GAIG;AAEH,MAAM,KAAK,GAAG,CAAC,EACb,QAAQ,EACR,MAAM,GAAG,UAAU,EACnB,MAAM,GAAG,IAAI,EACb,SAAS,EACT,YAAY,EACZ,GAAG,UAAU,EACF,EAAE,EAAE;IACf,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,CAAA;IAC9B,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,aAAa,EAAE,CAAA;IAEjD,MAAM,mBAAmB,GAAG,CAAC,KAAiB,EAAE,EAAE;QAChD,IAAI,KAAK,CAAC,gBAAgB,EAAE;YAC1B,OAAM;SACP;QAED,KAAK,CAAC,eAAe,EAAE,CAAA;QACvB,OAAO,EAAE,EAAE,CAAA;QACX,SAAS,EAAE,EAAE,CAAA;IACf,CAAC,CAAA;IAED,MAAM,qBAAqB,GAAG,CAAC,KAAoB,EAAE,EAAE;QACrD,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,KAAK,CAAC,gBAAgB,EAAE;YACpD,OAAM;SACP;QAED,KAAK,CAAC,eAAe,EAAE,CAAA;QACvB,OAAO,EAAE,EAAE,CAAA;QACX,SAAS,EAAE,EAAE,CAAA;IACf,CAAC,CAAA;IAED,OAAO,MAAM;QACX,CAAC,CAAC,YAAY,CACV,oBAAC,OAAO,IACN,OAAO,EAAE,mBAAmB,EAC5B,SAAS,EAAE,qBAAqB,KAC5B,YAAY;YAEhB,oBAAC,YAAY,IACX,eAAe,EAAE,GAAG,EAAE,CAAC,IAAI,KAAK,KAAK,IAAI,UAAU,EAAE,gDAEhC,IAAI,EACzB,MAAM,EAAE,MAAM,KACV,UAAU,IAEb,OAAO,QAAQ,KAAK,UAAU;gBAC7B,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC;gBACrC,CAAC,CAAC,QAAQ,CACC,CACP,EACV,QAAQ,CAAC,IAAI,CACd;QACH,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA;AAED,eAAe,KAAK,CAAA"}

package/dist/molecules/Modal/ModalBody.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactNode, HTMLAttributes } from 'react';
+export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Children or function as a children
+     */
+    children: ReactNode;
+}
+declare const ModalBody: ({ children, ...otherProps }: ModalBodyProps) => React.JSX.Element;
+export default ModalBody;

package/dist/molecules/Modal/ModalBody.js

@@ -0,0 +1,4 @@
+import React from 'react';
+const ModalBody = ({ children, ...otherProps }) => (React.createElement("div", { "data-fs-modal-body": true, ...otherProps }, children));
+export default ModalBody;
+//# sourceMappingURL=ModalBody.js.map

package/dist/molecules/Modal/ModalBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalBody.js","sourceRoot":"","sources":["../../../src/molecules/Modal/ModalBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAA;AASxD,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAkB,EAAE,EAAE,CAAC,CACjE,4DAA4B,UAAU,IACnC,QAAQ,CACL,CACP,CAAA;AAED,eAAe,SAAS,CAAA"}

package/dist/molecules/Modal/ModalContent.d.ts

@@ -0,0 +1,11 @@
+import type { DetailedHTMLProps, HTMLAttributes, RefObject } from 'react';
+import React from 'react';
+interface ModalContentPureProps extends Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+    beforeElementRef: RefObject<HTMLDivElement>;
+    trapFocusRef: RefObject<HTMLDivElement>;
+    afterElementRef: RefObject<HTMLDivElement>;
+    testId?: string;
+}
+export type ModalContentProps = Omit<ModalContentPureProps, 'trapFocusRef' | 'onClick' | 'beforeElementRef' | 'afterElementRef'>;
+declare const ModalContent: ({ children, ...otherProps }: ModalContentProps) => React.JSX.Element;
+export default ModalContent;

package/dist/molecules/Modal/ModalContent.js

@@ -0,0 +1,23 @@
+import React, { useRef } from 'react';
+import { useTrapFocus } from '../../hooks';
+const ModalContentPure = ({ beforeElementRef, trapFocusRef, afterElementRef, testId = 'store-modal-content', children, ...otherProps }) => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: beforeElementRef, "data-testid": "beforeElement", tabIndex: 0, "aria-hidden": "true" }),
+        React.createElement("div", { "data-fs-modal-content": true, "data-testid": testId, ref: trapFocusRef, "aria-modal": "true", role: "dialog", tabIndex: -1, ...otherProps }, children),
+        React.createElement("div", { ref: afterElementRef, "data-testid": "afterElement", tabIndex: 0, "aria-hidden": "true" })));
+};
+const ModalContent = ({ children, ...otherProps }) => {
+    const trapFocusRef = useRef(null);
+    const beforeElementRef = useRef(null);
+    const afterElementRef = useRef(null);
+    useTrapFocus({
+        beforeElementRef,
+        trapFocusRef,
+        afterElementRef,
+    });
+    return (React.createElement(ModalContentPure, { ...otherProps, trapFocusRef: trapFocusRef, beforeElementRef: beforeElementRef, afterElementRef: afterElementRef, onClick: (event) => {
+            event.stopPropagation();
+        } }, children));
+};
+export default ModalContent;
+//# sourceMappingURL=ModalContent.js.map

package/dist/molecules/Modal/ModalContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalContent.js","sourceRoot":"","sources":["../../../src/molecules/Modal/ModalContent.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAErC,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAa1C,MAAM,gBAAgB,GAAG,CAAC,EACxB,gBAAgB,EAChB,YAAY,EACZ,eAAe,EACf,MAAM,GAAG,qBAAqB,EAC9B,QAAQ,EACR,GAAG,UAAU,EACS,EAAE,EAAE;IAC1B,OAAO,CACL;QACE,6BACE,GAAG,EAAE,gBAAgB,iBACT,eAAe,EAC3B,QAAQ,EAAE,CAAC,iBACC,MAAM,GAClB;QACF,2EAEe,MAAM,EACnB,GAAG,EAAE,YAAY,gBACN,MAAM,EACjB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,CAAC,KACR,UAAU,IAEb,QAAQ,CACL;QACN,6BACE,GAAG,EAAE,eAAe,iBACR,cAAc,EAC1B,QAAQ,EAAE,CAAC,iBACC,MAAM,GAClB,CACD,CACJ,CAAA;AACH,CAAC,CAAA;AAOD,MAAM,YAAY,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAqB,EAAE,EAAE;IACtE,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IACjD,MAAM,gBAAgB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IACrD,MAAM,eAAe,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAEpD,YAAY,CAAC;QACX,gBAAgB;QAChB,YAAY;QACZ,eAAe;KAChB,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,gBAAgB,OACX,UAAU,EACd,YAAY,EAAE,YAAY,EAC1B,gBAAgB,EAAE,gBAAgB,EAClC,eAAe,EAAE,eAAe,EAChC,OAAO,EAAE,CAAC,KAAiB,EAAE,EAAE;YAC7B,KAAK,CAAC,eAAe,EAAE,CAAA;QACzB,CAAC,IAEA,QAAQ,CACQ,CACpB,CAAA;AACH,CAAC,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/molecules/Modal/ModalHeader.d.ts

@@ -0,0 +1,22 @@
+import React, { HTMLAttributes } from 'react';
+import { IconButtonProps } from '../IconButton';
+export interface ModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Title for header modal.
+     */
+    title: string;
+    /**
+     * Description for header modal.
+     */
+    description?: string;
+    /**
+     * Props for the Close Button component.
+     */
+    closeBtnProps?: Partial<Omit<IconButtonProps, 'onClick'>>;
+    /**
+     * Function called when dismiss button is clicked.
+     */
+    onClose?: () => void;
+}
+declare const ModalHeader: ({ onClose, title, closeBtnProps, description, }: ModalHeaderProps) => React.JSX.Element;
+export default ModalHeader;

package/dist/molecules/Modal/ModalHeader.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import Icon from '../../atoms/Icon';
+import IconButton from '../IconButton';
+const ModalHeader = ({ onClose, title, closeBtnProps = {}, description, }) => {
+    return (React.createElement("header", { "data-fs-modal-header": true },
+        onClose && (React.createElement(IconButton, { "data-fs-modal-header-close-button": true, "aria-label": "Close modal", icon: React.createElement(Icon, { name: "X" }), onClick: () => onClose?.(), ...closeBtnProps })),
+        React.createElement("p", { "data-fs-modal-header-title": true }, title),
+        description && React.createElement("p", { "data-fs-modal-header-description": true }, description)));
+};
+export default ModalHeader;
+//# sourceMappingURL=ModalHeader.js.map

package/dist/molecules/Modal/ModalHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalHeader.js","sourceRoot":"","sources":["../../../src/molecules/Modal/ModalHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAC7C,OAAO,IAAI,MAAM,kBAAkB,CAAA;AACnC,OAAO,UAA+B,MAAM,eAAe,CAAA;AAqB3D,MAAM,WAAW,GAAG,CAAC,EACnB,OAAO,EACP,KAAK,EACL,aAAa,GAAG,EAAE,EAClB,WAAW,GACM,EAAE,EAAE;IACrB,OAAO,CACL;QACG,OAAO,IAAI,CACV,oBAAC,UAAU,6DAEE,aAAa,EACxB,IAAI,EAAE,oBAAC,IAAI,IAAC,IAAI,EAAC,GAAG,GAAG,EACvB,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,KACtB,aAAa,GACjB,CACH;QACD,iEAA+B,KAAK,CAAK;QACxC,WAAW,IAAI,uEAAqC,WAAW,CAAK,CAC9D,CACV,CAAA;AACH,CAAC,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/molecules/Modal/index.d.ts

@@ -0,0 +1,5 @@
+export { default } from './Modal';
+export { default as ModalHeader } from './ModalHeader';
+export { default as ModalBody } from './ModalBody';
+export type { ModalProps } from './Modal';
+export type { ModalHeaderProps } from './ModalHeader';

package/dist/molecules/Modal/index.js

@@ -0,0 +1,4 @@
+export { default } from './Modal';
+export { default as ModalHeader } from './ModalHeader';
+export { default as ModalBody } from './ModalBody';
+//# sourceMappingURL=index.js.map

package/dist/molecules/Modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/molecules/Modal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AACjC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAA"}

package/dist/molecules/NavbarLinks/NavbarLinks.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { HTMLAttributes } from 'react';
+export interface NavbarLinksProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+     */
+    testId?: string;
+}
+declare const NavbarLinks: React.ForwardRefExoticComponent<NavbarLinksProps & React.RefAttributes<HTMLDivElement>>;
+export default NavbarLinks;

package/dist/molecules/NavbarLinks/NavbarLinks.js

@@ -0,0 +1,6 @@
+import React, { forwardRef } from 'react';
+const NavbarLinks = forwardRef(function NavbarLinks({ children, testId = 'fs-navbar-links', ...otherProps }, ref) {
+    return (React.createElement("nav", { "data-fs-navbar-links": true, ref: ref, "data-testid": testId, ...otherProps }, children));
+});
+export default NavbarLinks;
+//# sourceMappingURL=NavbarLinks.js.map

package/dist/molecules/NavbarLinks/NavbarLinks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavbarLinks.js","sourceRoot":"","sources":["../../../src/molecules/NavbarLinks/NavbarLinks.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAUzC,MAAM,WAAW,GAAG,UAAU,CAC5B,SAAS,WAAW,CAClB,EAAE,QAAQ,EAAE,MAAM,GAAG,iBAAiB,EAAE,GAAG,UAAU,EAAE,EACvD,GAAG;IAEH,OAAO,CACL,2DAA0B,GAAG,EAAE,GAAG,iBAAe,MAAM,KAAM,UAAU,IACpE,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/molecules/NavbarLinks/NavbarLinksList.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ListProps } from '../..';
+export interface NavbarLinksListProps extends ListProps {
+    /**
+     * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+     */
+    testId?: string;
+}
+declare const NavbarLinksList: React.ForwardRefExoticComponent<Omit<NavbarLinksListProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
+export default NavbarLinksList;

package/dist/molecules/NavbarLinks/NavbarLinksList.js

@@ -0,0 +1,7 @@
+import React, { forwardRef } from 'react';
+import { List } from '../..';
+const NavbarLinksList = forwardRef(function NavbarLinksList({ children, testId = 'fs-navbar-links-list', ...otherProps }, ref) {
+    return (React.createElement(List, { "data-fs-navbar-links-list": true, ref: ref, "data-testid": testId, ...otherProps }, children));
+});
+export default NavbarLinksList;
+//# sourceMappingURL=NavbarLinksList.js.map

package/dist/molecules/NavbarLinks/NavbarLinksList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavbarLinksList.js","sourceRoot":"","sources":["../../../src/molecules/NavbarLinks/NavbarLinksList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAU5B,MAAM,eAAe,GAAG,UAAU,CAChC,SAAS,eAAe,CACtB,EAAE,QAAQ,EAAE,MAAM,GAAG,sBAAsB,EAAE,GAAG,UAAU,EAAE,EAC5D,GAAG;IAEH,OAAO,CACL,oBAAC,IAAI,uCAEH,GAAG,EAAE,GAAG,iBACK,MAAM,KACf,UAAU,IAEb,QAAQ,CACJ,CACR,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,eAAe,CAAA"}

package/dist/molecules/NavbarLinks/NavbarLinksListItem.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { HTMLAttributes } from 'react';
+export interface NavbarLinksListItemProps extends HTMLAttributes<HTMLLIElement> {
+    /**
+     * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+     */
+    testId?: string;
+}
+declare const NavbarLinksListItem: React.ForwardRefExoticComponent<NavbarLinksListItemProps & React.RefAttributes<HTMLLIElement>>;
+export default NavbarLinksListItem;

package/dist/molecules/NavbarLinks/NavbarLinksListItem.js

@@ -0,0 +1,6 @@
+import React, { forwardRef } from 'react';
+const NavbarLinksListItem = forwardRef(function NavbarLinksListItem({ children, testId = 'fs-navbar-links-list-item', ...otherProps }, ref) {
+    return (React.createElement("li", { "data-fs-navbar-links-list-item": true, ref: ref, "data-testid": testId, ...otherProps }, children));
+});
+export default NavbarLinksListItem;
+//# sourceMappingURL=NavbarLinksListItem.js.map

package/dist/molecules/NavbarLinks/NavbarLinksListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavbarLinksListItem.js","sourceRoot":"","sources":["../../../src/molecules/NavbarLinks/NavbarLinksListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAWzC,MAAM,mBAAmB,GAAG,UAAU,CACpC,SAAS,mBAAmB,CAC1B,EAAE,QAAQ,EAAE,MAAM,GAAG,2BAA2B,EAAE,GAAG,UAAU,EAAE,EACjE,GAAG;IAEH,OAAO,CACL,oEAEE,GAAG,EAAE,GAAG,iBACK,MAAM,KACf,UAAU,IAEb,QAAQ,CACN,CACN,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,mBAAmB,CAAA"}

package/dist/molecules/NavbarLinks/index.d.ts

@@ -0,0 +1,6 @@
+export { default } from './NavbarLinks';
+export type { NavbarLinksProps } from './NavbarLinks';
+export { default as NavbarLinksList } from './NavbarLinksList';
+export type { NavbarLinksListProps } from './NavbarLinksList';
+export { default as NavbarLinksListItem } from './NavbarLinksListItem';
+export type { NavbarLinksListItemProps } from './NavbarLinksListItem';

package/dist/molecules/NavbarLinks/index.js

@@ -0,0 +1,4 @@
+export { default } from './NavbarLinks';
+export { default as NavbarLinksList } from './NavbarLinksList';
+export { default as NavbarLinksListItem } from './NavbarLinksListItem';
+//# sourceMappingURL=index.js.map

package/dist/molecules/NavbarLinks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/molecules/NavbarLinks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAGvC,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAG9D,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAA"}

package/dist/molecules/OrderSummary/OrderSummary.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import type { HTMLAttributes } from 'react';
+export interface OrderSummaryProps extends HTMLAttributes<HTMLUListElement> {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress,
+     * testing-library, and jest).
+     */
+    testId?: string;
+    /**
+     * Label for the subtotal value of the order. Will only show if subtotalValue is provided.
+     */
+    subtotalLabel?: string;
+    /**
+     * Subtotal value of the order. If provided, subtotal label and value will be shown.
+     */
+    subtotalValue?: string;
+    /**
+     * Label for the discount value for the order. Will only show if discountValue is provided.
+     */
+    discountLabel?: string;
+    /**
+     * Discount value for the order. If provided, discount label and value will be shown.
+     */
+    discountValue?: string;
+    /**
+     * Label for the total value of the order.
+     */
+    totalLabel?: string;
+    /**
+     * Total value of the order.
+     */
+    totalValue?: string;
+}
+declare const OrderSummary: React.ForwardRefExoticComponent<OrderSummaryProps & React.RefAttributes<HTMLUListElement>>;
+export default OrderSummary;

package/dist/molecules/OrderSummary/OrderSummary.js

@@ -0,0 +1,16 @@
+import React, { forwardRef } from 'react';
+import { List } from '../../';
+const OrderSummary = forwardRef(function OrderSummary({ testId = 'fs-order-summary', subtotalLabel, subtotalValue, discountLabel = 'Discount', discountValue, totalLabel = 'Total', totalValue, ...otherProps }, ref) {
+    return (React.createElement(List, { ref: ref, "data-fs-order-summary": true, "data-testid": testId, ...otherProps },
+        subtotalValue ? (React.createElement("li", { "data-fs-order-summary-subtotal": true },
+            React.createElement("span", { "data-fs-order-summary-subtotal-label": true, "data-testid": `${testId}-subtotal-label` }, subtotalLabel),
+            React.createElement("span", { "data-fs-order-summary-subtotal-value": true, "data-testid": `${testId}-subtotal-value` }, subtotalValue))) : null,
+        discountValue ? (React.createElement("li", { "data-fs-order-summary-discount": true },
+            React.createElement("span", { "data-fs-order-summary-discount-label": true, "data-testid": `${testId}-discount-label` }, discountLabel),
+            React.createElement("span", { "data-fs-order-summary-discount-value": true, "data-testid": `${testId}-discount-value` }, discountValue))) : null,
+        React.createElement("li", { "data-fs-order-summary-total": true },
+            React.createElement("span", { "data-fs-order-summary-total-label": true, "data-testid": `${testId}-total-label` }, totalLabel),
+            React.createElement("span", { "data-fs-order-summary-total-value": true, "data-testid": `${testId}-total-value` }, totalValue))));
+});
+export default OrderSummary;
+//# sourceMappingURL=OrderSummary.js.map

package/dist/molecules/OrderSummary/OrderSummary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderSummary.js","sourceRoot":"","sources":["../../../src/molecules/OrderSummary/OrderSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGzC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAkC7B,MAAM,YAAY,GAAG,UAAU,CAC7B,SAAS,YAAY,CACnB,EACE,MAAM,GAAG,kBAAkB,EAC3B,aAAa,EACb,aAAa,EACb,aAAa,GAAG,UAAU,EAC1B,aAAa,EACb,UAAU,GAAG,OAAO,EACpB,UAAU,EACV,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,oBAAC,IAAI,IACH,GAAG,EAAE,GAAG,gDAEK,MAAM,KACf,UAAU;QAEb,aAAa,CAAC,CAAC,CAAC,CACf;YACE,2FAEe,GAAG,MAAM,iBAAiB,IAEtC,aAAa,CACT;YACP,2FAEe,GAAG,MAAM,iBAAiB,IAEtC,aAAa,CACT,CACJ,CACN,CAAC,CAAC,CAAC,IAAI;QACP,aAAa,CAAC,CAAC,CAAC,CACf;YACE,2FAEe,GAAG,MAAM,iBAAiB,IAEtC,aAAa,CACT;YACP,2FAEe,GAAG,MAAM,iBAAiB,IAEtC,aAAa,CACT,CACJ,CACN,CAAC,CAAC,CAAC,IAAI;QACR;YACE,wFAEe,GAAG,MAAM,cAAc,IAEnC,UAAU,CACN;YACP,wFAEe,GAAG,MAAM,cAAc,IAEnC,UAAU,CACN,CACJ,CACA,CACR,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/molecules/OrderSummary/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './OrderSummary';
+export type { OrderSummaryProps } from './OrderSummary';

package/dist/molecules/OrderSummary/index.js

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

package/dist/molecules/OrderSummary/index.js.map

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

package/dist/molecules/ProductCard/ProductCard.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { HTMLAttributes } from 'react';
+export interface ProductCardProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Sets a border to the component.
+     */
+    bordered?: boolean;
+    /**
+     * Sets the component's size.
+     */
+    variant?: 'wide' | 'default';
+    /**
+     * Enables a outOfStock status.
+     */
+    outOfStock?: boolean;
+    /**
+     * ID to find this component in testing tools (e.g.: cypress,
+     * testing-library, and jest).
+     */
+    testId?: string;
+}
+declare const ProductCard: React.ForwardRefExoticComponent<ProductCardProps & React.RefAttributes<HTMLDivElement>>;
+export default ProductCard;

package/dist/molecules/ProductCard/ProductCard.js

@@ -0,0 +1,6 @@
+import React, { forwardRef } from 'react';
+const ProductCard = forwardRef(function ProductCard({ testId = 'fs-product-card', variant = 'default', bordered = false, outOfStock, children, ...otherProps }, ref) {
+    return (React.createElement("article", { ref: ref, "data-fs-product-card": outOfStock ? 'out-of-stock' : '', "data-fs-product-card-variant": variant, "data-fs-product-card-bordered": bordered, "data-testid": testId, ...otherProps }, children));
+});
+export default ProductCard;
+//# sourceMappingURL=ProductCard.js.map

package/dist/molecules/ProductCard/ProductCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductCard.js","sourceRoot":"","sources":["../../../src/molecules/ProductCard/ProductCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAuBzC,MAAM,WAAW,GAAG,UAAU,CAC5B,SAAS,WAAW,CAClB,EACE,MAAM,GAAG,iBAAiB,EAC1B,OAAO,GAAG,SAAS,EACnB,QAAQ,GAAG,KAAK,EAChB,UAAU,EACV,QAAQ,EACR,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,iCACE,GAAG,EAAE,GAAG,0BACc,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,kCACxB,OAAO,mCACN,QAAQ,iBAC1B,MAAM,KACf,UAAU,IAEb,QAAQ,CACD,CACX,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/molecules/ProductCard/ProductCardContent.d.ts

@@ -0,0 +1,48 @@
+import type { HTMLAttributes } from 'react';
+import React from 'react';
+import type { PriceDefinition } from '../../typings/PriceDefinition';
+import { LinkElementType, LinkProps } from '../../';
+export interface ProductCardContentProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+    /**
+     * Specifies the product's title.
+     */
+    title: string;
+    /**
+     * Props for the link from ProductCard component.
+     */
+    linkProps?: Partial<LinkProps<LinkElementType>>;
+    /**
+     * Specifies product's prices.
+     */
+    price?: PriceDefinition;
+    /**
+     * Enables a outOfStock status.
+     */
+    outOfStock?: boolean;
+    /**
+     * Specifies the OutOfStock badge's label.
+     */
+    outOfStockLabel?: string;
+    /**
+     * Specifies Rating Value of the product.
+     */
+    ratingValue?: number;
+    /**
+     * Specifies the button's label.
+     */
+    buttonLabel?: string;
+    /**
+     * Enables a DiscountBadge to the component.
+     */
+    showDiscountBadge?: boolean;
+    /**
+     * Callback function when button is clicked.
+     */
+    onButtonClick?: () => void;
+}
+declare const ProductCardContent: React.ForwardRefExoticComponent<ProductCardContentProps & React.RefAttributes<HTMLElement>>;
+export default ProductCardContent;

package/dist/molecules/ProductCard/ProductCardContent.js

@@ -0,0 +1,19 @@
+import React, { forwardRef } from 'react';
+import { Badge, Button, DiscountBadge, Icon, Link, ProductPrice, Rating, } from '../../';
+const ProductCardContent = forwardRef(function CardContent({ testId = 'fs-product-card-content', title, linkProps, price, outOfStock, outOfStockLabel = 'Out of stock', ratingValue, showDiscountBadge, buttonLabel = 'Add', onButtonClick, children, ...otherProps }, ref) {
+    const listingPrice = price?.listPrice ? price.listPrice : 0;
+    const sellingPrice = price?.value ? price.value : 0;
+    return (React.createElement("section", { ref: ref, "data-fs-product-card-content": true, "data-fs-product-card-badge": showDiscountBadge, "data-testid": testId, ...otherProps },
+        React.createElement("div", { "data-fs-product-card-heading": true },
+            React.createElement("h3", { "data-fs-product-card-title": true },
+                React.createElement(Link, { ...linkProps, title: title },
+                    React.createElement("span", null, title))),
+            !outOfStock && (React.createElement(ProductPrice, { "data-fs-product-card-prices": true, value: sellingPrice, listPrice: listingPrice, formatter: price?.formatter })),
+            ratingValue && (React.createElement(Rating, { value: ratingValue, icon: React.createElement(Icon, { name: "Star" }) }))),
+        showDiscountBadge && !outOfStock && (React.createElement(DiscountBadge, { listPrice: listingPrice, spotPrice: sellingPrice })),
+        outOfStock && React.createElement(Badge, null, outOfStockLabel),
+        onButtonClick && !outOfStock && (React.createElement("div", { "data-fs-product-card-actions": true },
+            React.createElement(Button, { variant: "primary", icon: React.createElement(Icon, { name: "ShoppingCart" }), iconPosition: "left", size: "small", onClick: onButtonClick }, buttonLabel)))));
+});
+export default ProductCardContent;
+//# sourceMappingURL=ProductCardContent.js.map