@licklist/design 0.78.5-dev.54 → 0.78.5-dev.55

package/src/v2/icons/index.tsx

@@ -118,14 +118,14 @@ export const SearchIcon = () => (
     </svg>
 )
 
-export const RefreshIcon = () => (
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+export const RefreshIcon = ({ width = 24, height = 24 }: React.SVGProps<SVGSVGElement> & { width?: number; height?: number } = {}) => (
+    <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none">
         <path d="M7.09693 6.32447C8.41167 5.18766 10.1255 4.5 12 4.5C16.1421 4.5 19.5 7.85786 19.5 12C19.5 13.6021 18.9976 15.0869 18.1419 16.3055L15.75 12H18C18 8.68629 15.3137 6 12 6C10.3874 6 8.92333 6.6362 7.84517 7.67131L7.09693 6.32447ZM16.903 17.6755C15.5883 18.8123 13.8745 19.5 12 19.5C7.85786 19.5 4.5 16.1421 4.5 12C4.5 10.3979 5.00234 8.91312 5.8581 7.69458L8.25 12H6C6 15.3137 8.68629 18 12 18C13.6126 18 15.0767 17.3638 16.1549 16.3287L16.903 17.6755Z" fill="#14215A"/>
     </svg>
 )
 
-export const SendIcon = () => (
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+export const SendIcon = ({ width = 24, height = 24 }: React.SVGProps<SVGSVGElement> & { width?: number; height?: number } = {}) => (
+    <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none">
         <path d="M18 6C18.4142 6 18.75 6.33579 18.75 6.75V12.75H17.25V9.17871L11.3037 14.5039L5.25 9.16211V17.25H18V18.75H4.5C4.08579 18.75 3.75 18.4142 3.75 18V6.75C3.75 6.33579 4.08579 6 4.5 6H18ZM24 15L20.25 18V15.75H15V14.25H20.25V12L24 15ZM11.2969 12.4961L16.876 7.5H5.63379L11.2969 12.4961Z" fill="black"/>
     </svg>
 )
@@ -136,8 +136,8 @@ export const ExternalLinkIcon = () => (
     </svg>
 )
 
-export const ExportIcon = () => (
-    <svg width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+export const ExportIcon = ({ width = 24, height = 24 }: React.SVGProps<SVGSVGElement> & { width?: number; height?: number } = {}) => (
+    <svg width={width} height={height} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M17 16H20L16 20L12 16H15V12H17V16ZM19 8H9V24H23V12H19V8ZM7 6.9918C7 6.44405 7.44749 6 7.9985 6H20L24.9997 11L25 24.9925C25 25.5489 24.5551 26 24.0066 26H7.9934C7.44476 26 7 25.5447 7 25.0082V6.9918Z" fill="currentColor"/>
     </svg>
 )
@@ -180,3 +180,32 @@ export const InfoIcon = ({ width = 16, height = 16 }: { width?: number; height?:
         <path d="M16 25C11.0294 25 7 20.9706 7 16C7 11.0294 11.0294 7 16 7C20.9706 7 25 11.0294 25 16C25 20.9706 20.9706 25 16 25ZM16 18C16.5523 18 17 17.5523 17 17L17 12C17 11.4477 16.5523 11 16 11C15.4477 11 15 11.4477 15 12L15 17C15 17.5523 15.4477 18 16 18ZM16 21C16.5523 21 17 20.5523 17 20C17 19.4477 16.5523 19 16 19C15.4477 19 15 19.4477 15 20C15 20.5523 15.4477 21 16 21Z" fill="currentColor"/>
     </svg>
 )
+
+export const ArrowUpIcon = () => (
+    <svg width="11" height="6" viewBox="0 0 11 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M10 5L5.5 1L1 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+)
+
+export const ArrowDownIcon = () => (
+    <svg width="11" height="6" viewBox="0 0 11 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M1 1L5.5 5L10 1" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+)
+
+export const CloseIcon = ({width = 24, height = 24, ...props
+}: React.SVGProps<SVGSVGElement> & { width?: number; height?: number }) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M18 6L6 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <path d="M6 6L18 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+)
+
+
+

package/src/v2/styles/components/Button.scss

@@ -8,7 +8,7 @@
   align-self: flex-start;
   text-align: center;
   align-items: center;
-  font-family: var(--font-family-sans, 'Geist', sans-serif), serif;
+  font-family: var(--font-family-sans, 'Geist', sans-serif);
   font-weight: 600;
   line-height: 20px;
   min-height: 44px;
@@ -79,6 +79,28 @@
     }
   }
 
+  // Secondary - Soft
+  &--secondary-soft {
+    background: var(--surface-action-soft, #EFE6FD);
+    color: var(--label-action, #6200EE);
+
+    &:hover {
+      background: var(--surface-tertiary, #F0F0F5);
+    }
+  }
+
+
+  // Tertiary - Soft
+  &--tertiary-soft {
+    background: #FFFFFF;
+    color: var(--label-primary, #121E52);
+    border: 1px solid var(--border-primary, #E8E9EF);
+
+    &:hover {
+      background: var(--surface-tertiary, #F0F0F5);
+    }
+  }
+
   // Destructive - Soft
   &--destructive-soft {
     border-radius: var(--radius-reg, 8px);
@@ -139,7 +161,7 @@
 
   /* Button text styling */
   &__text {
-    font-family: 'Geist', sans-serif;
+    font-family: var(--font-family-sans, 'Geist', sans-serif);
     font-size: 15px;
     font-style: normal;
     font-weight: 600;

package/dist/v2/components/Customer/CustomerCreate/CustomerCreate.js

@@ -1,32 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import 'react';
-import { NewPageHeader } from '../../NewPageHeader/NewPageHeader.js';
-import { CustomerForm } from '../CustomerForm/CustomerForm.js';
-
-var CustomerCreate = function(param) {
-    var onCancel = param.onCancel, onSave = param.onSave, initialData = param.initialData, isLoading = param.isLoading, _param_submitButtonLabel = param.submitButtonLabel, submitButtonLabel = _param_submitButtonLabel === void 0 ? 'Create Customer' : _param_submitButtonLabel;
-    return /*#__PURE__*/ jsxs("div", {
-        className: "tw-bg-white tw-min-h-screen tw-font-sans",
-        children: [
-            /*#__PURE__*/ jsx("div", {
-                className: "tw-max-w-4xl tw-mx-auto tw-w-full",
-                children: /*#__PURE__*/ jsx(NewPageHeader, {
-                    title: "Add Customer",
-                    onCancel: onCancel,
-                    cancelLabel: "Cancel"
-                })
-            }),
-            /*#__PURE__*/ jsx("div", {
-                className: "tw-max-w-4xl tw-mx-auto tw-w-full tw-bg-white tw-border-2 tw-border-[#e8e9ef] tw-rounded-lg tw-p-4 md:tw-p-8 tw-mt-8",
-                children: /*#__PURE__*/ jsx(CustomerForm, {
-                    onSave: onSave,
-                    initialData: initialData,
-                    isLoading: isLoading,
-                    submitButtonLabel: submitButtonLabel
-                })
-            })
-        ]
-    });
-};
-
-export { CustomerCreate };

package/dist/v2/components/Customer/CustomerDetail/CustomerDetail.js

@@ -1,235 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import 'react';
-import { Badge } from '../../Badge/Badge.js';
-import { ArrowLeftIcon, InfoIcon, EditIcon } from '../../../icons/index.js';
-import './CustomerDetail.scss.js';
-
-var CustomerDetail = function(param) {
-    var onBack = param.onBack, onEdit = param.onEdit, name = param.name, customerId = param.customerId, waiverStatus = param.waiverStatus, _param_waiverStatusVariant = param.waiverStatusVariant, waiverStatusVariant = _param_waiverStatusVariant === void 0 ? 'success' : _param_waiverStatusVariant, _param_waiversEnabled = param.waiversEnabled, waiversEnabled = _param_waiversEnabled === void 0 ? true : _param_waiversEnabled, contactDetails = param.contactDetails, bookingDetails = param.bookingDetails, waiverDetails = param.waiverDetails, minors = param.minors, customerSinceFooter = param.customerSinceFooter;
-    return /*#__PURE__*/ jsxs("div", {
-        className: "customer-detail",
-        children: [
-            /*#__PURE__*/ jsxs("div", {
-                className: "customer-detail__back",
-                onClick: onBack,
-                children: [
-                    /*#__PURE__*/ jsx("span", {
-                        className: "customer-detail__back-icon",
-                        children: /*#__PURE__*/ jsx(ArrowLeftIcon, {
-                            width: 24,
-                            height: 24
-                        })
-                    }),
-                    " Back to Customers"
-                ]
-            }),
-            /*#__PURE__*/ jsxs("div", {
-                className: "customer-detail__header",
-                children: [
-                    /*#__PURE__*/ jsx("div", {
-                        className: "customer-detail__title-row",
-                        children: /*#__PURE__*/ jsx("h1", {
-                            className: "customer-detail__name",
-                            children: name
-                        })
-                    }),
-                    /*#__PURE__*/ jsxs("div", {
-                        className: "customer-detail__badges-row",
-                        children: [
-                            /*#__PURE__*/ jsxs("div", {
-                                className: "customer-detail__badges",
-                                children: [
-                                    /*#__PURE__*/ jsx("span", {
-                                        className: "customer-detail__id-badge",
-                                        children: customerId
-                                    }),
-                                    waiversEnabled && /*#__PURE__*/ jsx(Badge, {
-                                        variant: waiverStatusVariant,
-                                        icon: waiverStatus === 'Expired' || waiverStatus === 'Not Signed' ? /*#__PURE__*/ jsx(InfoIcon, {}) : undefined,
-                                        children: waiverStatus
-                                    })
-                                ]
-                            }),
-                            onEdit && /*#__PURE__*/ jsxs("div", {
-                                className: "customer-detail__edit",
-                                onClick: onEdit,
-                                children: [
-                                    /*#__PURE__*/ jsx(EditIcon, {}),
-                                    " Edit"
-                                ]
-                            })
-                        ]
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsxs("div", {
-                className: "customer-detail__grid",
-                children: [
-                    /*#__PURE__*/ jsxs("div", {
-                        className: "customer-detail__card",
-                        children: [
-                            /*#__PURE__*/ jsx("h2", {
-                                className: "customer-detail__card-title",
-                                children: "Contact Details"
-                            }),
-                            /*#__PURE__*/ jsxs("div", {
-                                className: "customer-detail__info-group",
-                                children: [
-                                    /*#__PURE__*/ jsx("label", {
-                                        children: "Email"
-                                    }),
-                                    /*#__PURE__*/ jsx("span", {
-                                        children: contactDetails.email
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ jsxs("div", {
-                                className: "customer-detail__info-group",
-                                children: [
-                                    /*#__PURE__*/ jsx("label", {
-                                        children: "Phone"
-                                    }),
-                                    /*#__PURE__*/ jsx("span", {
-                                        children: contactDetails.phone || '-'
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ jsxs("div", {
-                                className: "customer-detail__info-group",
-                                children: [
-                                    /*#__PURE__*/ jsx("label", {
-                                        children: "Age"
-                                    }),
-                                    /*#__PURE__*/ jsx("span", {
-                                        children: contactDetails.age || '-'
-                                    })
-                                ]
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsxs("div", {
-                        className: "customer-detail__card",
-                        children: [
-                            /*#__PURE__*/ jsx("h2", {
-                                className: "customer-detail__card-title",
-                                children: "Booking Details"
-                            }),
-                            /*#__PURE__*/ jsxs("div", {
-                                className: "customer-detail__info-group",
-                                children: [
-                                    /*#__PURE__*/ jsx("label", {
-                                        children: "Next Booking"
-                                    }),
-                                    /*#__PURE__*/ jsx("span", {
-                                        children: bookingDetails.nextBooking
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ jsxs("div", {
-                                className: "customer-detail__info-group",
-                                children: [
-                                    /*#__PURE__*/ jsx("label", {
-                                        children: "Customer Since"
-                                    }),
-                                    /*#__PURE__*/ jsx("span", {
-                                        children: bookingDetails.customerSince
-                                    })
-                                ]
-                            })
-                        ]
-                    }),
-                    waiversEnabled && /*#__PURE__*/ jsxs("div", {
-                        className: "customer-detail__card",
-                        children: [
-                            /*#__PURE__*/ jsx("h2", {
-                                className: "customer-detail__card-title",
-                                children: "Waiver Details"
-                            }),
-                            /*#__PURE__*/ jsxs("div", {
-                                className: "customer-detail__info-group",
-                                children: [
-                                    /*#__PURE__*/ jsx("label", {
-                                        children: "Status"
-                                    }),
-                                    /*#__PURE__*/ jsx("span", {
-                                        children: /*#__PURE__*/ jsx(Badge, {
-                                            variant: waiverDetails.statusVariant,
-                                            icon: waiverDetails.status === 'Expired' || waiverDetails.status === 'Not Signed' ? /*#__PURE__*/ jsx(InfoIcon, {}) : undefined,
-                                            children: waiverDetails.status
-                                        })
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ jsxs("div", {
-                                className: "customer-detail__info-group",
-                                children: [
-                                    /*#__PURE__*/ jsx("label", {
-                                        children: "Expires"
-                                    }),
-                                    /*#__PURE__*/ jsx("span", {
-                                        children: waiverDetails.expires
-                                    })
-                                ]
-                            })
-                        ]
-                    })
-                ]
-            }),
-            waiversEnabled && minors && minors.length > 0 && /*#__PURE__*/ jsxs("div", {
-                className: "customer-detail__card customer-detail__card--full",
-                children: [
-                    /*#__PURE__*/ jsx("h2", {
-                        className: "customer-detail__card-title",
-                        children: "Minors Signed For"
-                    }),
-                    minors.map(function(minor, index) {
-                        return /*#__PURE__*/ jsxs("div", {
-                            className: "customer-detail__minor-row",
-                            children: [
-                                /*#__PURE__*/ jsxs("div", {
-                                    className: "customer-detail__minor-info",
-                                    children: [
-                                        /*#__PURE__*/ jsx("div", {
-                                            className: "customer-detail__minor-name",
-                                            children: minor.name
-                                        }),
-                                        /*#__PURE__*/ jsx("div", {
-                                            className: "customer-detail__minor-age",
-                                            children: minor.age
-                                        })
-                                    ]
-                                }),
-                                /*#__PURE__*/ jsxs("div", {
-                                    className: "customer-detail__minor-status-group",
-                                    children: [
-                                        /*#__PURE__*/ jsxs("span", {
-                                            className: "customer-detail__minor-expires",
-                                            children: [
-                                                "Expires: ",
-                                                minor.expires
-                                            ]
-                                        }),
-                                        /*#__PURE__*/ jsx(Badge, {
-                                            variant: minor.statusVariant,
-                                            icon: minor.status === 'Expired' || minor.status === 'Not Signed' ? /*#__PURE__*/ jsx(InfoIcon, {}) : undefined,
-                                            children: minor.status
-                                        })
-                                    ]
-                                })
-                            ]
-                        }, index);
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsxs("div", {
-                className: "customer-detail__footer",
-                children: [
-                    "Customer since: ",
-                    customerSinceFooter
-                ]
-            })
-        ]
-    });
-};
-
-export { CustomerDetail };

package/dist/v2/components/Customer/CustomerDetail/CustomerDetail.scss.js

@@ -1,6 +0,0 @@
-import styleInject from '/opt/atlassian/pipelines/agent/build/node_modules/style-inject/dist/style-inject.es.js';
-
-var css_248z = ".customer-detail{background-color:#fff;font-family:var(--font-family-sans,\"Geist\",sans-serif);min-height:100vh;padding:40px}.customer-detail__back{align-items:center;border:1px solid #0000;border-radius:8px;color:#6200ee;cursor:pointer;display:inline-flex;font-size:14px;font-weight:500;gap:8px;margin-bottom:30px;padding:8px 16px;transition:all .2s ease}.customer-detail__back:hover{background-color:#f3e5ff;border:1px solid #e0c7ff}.customer-detail__header{margin-bottom:40px}.customer-detail__name{color:#121e52;font-size:32px;font-weight:700;margin:0 0 16px}.customer-detail__badges-row{align-items:center;display:flex;justify-content:space-between}.customer-detail__badges{align-items:center;display:flex;gap:12px}.customer-detail__id-badge{background-color:#f4f5f9;border:1px solid #e2e4ed;border-radius:100px;color:#121e52;font-size:12px;font-weight:600;padding:4px 12px}.customer-detail__edit{align-items:center;border:1px solid #0000;border-radius:8px;color:#121e52;cursor:pointer;display:inline-flex;font-size:14px;font-weight:600;gap:8px;padding:8px 16px;transition:all .2s ease}.customer-detail__edit:hover{background-color:#e8eaf0;border:1px solid #d1d5e0}.customer-detail__grid{display:grid;gap:24px;grid-template-columns:1fr 1fr;margin-bottom:24px}.customer-detail__card{background:#fff;border:1px solid #e2e4ed;border-radius:12px;padding:24px}.customer-detail__card--full{grid-column:1/-1}.customer-detail__card-title{color:#121e52;font-size:18px;font-weight:700;margin:0 0 24px}.customer-detail__info-group{display:flex;flex-direction:column;gap:4px;margin-bottom:16px}.customer-detail__info-group:last-child{margin-bottom:0}.customer-detail__info-group label{color:#9399b3;font-size:12px;margin:0}.customer-detail__info-group span{align-items:center;display:inline-flex;font-size:14px;font-weight:500}.customer-detail__minor-row{align-items:center;border-bottom:1px solid #f4f5f9;display:flex;justify-content:space-between;padding:16px 0}.customer-detail__minor-row:last-child{border-bottom:none;padding-bottom:0}.customer-detail__minor-row:first-of-type{padding-top:0}.customer-detail__minor-info{display:flex;flex-direction:column;gap:4px}.customer-detail__minor-name{color:#121e52;font-size:14px;font-weight:600}.customer-detail__minor-age{color:#9399b3;font-size:12px}.customer-detail__minor-status-group{align-items:center;display:flex;gap:16px}.customer-detail__footer,.customer-detail__minor-expires{color:#9399b3;font-size:12px}.customer-detail__footer{margin-top:40px}@media (max-width:768px){.customer-detail{padding:20px 16px}.customer-detail__back{font-size:13px;margin-bottom:20px;padding:6px 12px}.customer-detail__header{margin-bottom:24px}.customer-detail__name{font-size:24px;margin-bottom:12px}.customer-detail__badges-row{align-items:flex-start;flex-direction:column;gap:12px}.customer-detail__badges{flex-wrap:wrap}.customer-detail__id-badge{font-size:11px;padding:3px 10px}.customer-detail__edit{align-self:flex-start;font-size:13px;padding:6px 12px}.customer-detail__grid{gap:16px;grid-template-columns:1fr;margin-bottom:16px}.customer-detail__card{padding:20px}.customer-detail__card--full{grid-column:1}.customer-detail__card-title{font-size:16px;margin-bottom:16px}.customer-detail__info-group{margin-bottom:14px}.customer-detail__info-group label{font-size:11px}.customer-detail__info-group span{font-size:13px}.customer-detail__minor-row{align-items:flex-start;flex-direction:column;gap:12px;padding:12px 0}.customer-detail__minor-name{font-size:13px}.customer-detail__minor-age,.customer-detail__minor-expires{font-size:11px}.customer-detail__minor-status-group{justify-content:space-between;width:100%}.customer-detail__footer{font-size:11px;margin-top:24px}}@media (max-width:480px){.customer-detail{padding:16px 12px}.customer-detail__back{font-size:12px;margin-bottom:16px;padding:4px 8px}.customer-detail__name{font-size:20px}.customer-detail__card{border-radius:8px;padding:16px}.customer-detail__card-title{font-size:15px;margin-bottom:12px}.customer-detail__badges{gap:8px}.customer-detail__minor-row{padding:10px 0}}";
-styleInject(css_248z);
-
-export { css_248z as default };

package/dist/v2/components/Customer/CustomerEdit/CustomerEdit.js

@@ -1,32 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import 'react';
-import { NewPageHeader } from '../../NewPageHeader/NewPageHeader.js';
-import { CustomerForm } from '../CustomerForm/CustomerForm.js';
-
-var CustomerEdit = function(param) {
-    var onCancel = param.onCancel, onSave = param.onSave, initialData = param.initialData, isLoading = param.isLoading;
-    return /*#__PURE__*/ jsxs("div", {
-        className: "tw-bg-white tw-min-h-screen tw-font-sans",
-        children: [
-            /*#__PURE__*/ jsx("div", {
-                className: "tw-max-w-4xl tw-mx-auto tw-w-full",
-                children: /*#__PURE__*/ jsx(NewPageHeader, {
-                    title: "Edit Customer",
-                    onCancel: onCancel
-                })
-            }),
-            /*#__PURE__*/ jsx("div", {
-                className: "tw-max-w-4xl tw-mx-auto tw-w-full tw-bg-white tw-border-2 tw-border-[#e8e9ef] tw-rounded-lg tw-p-4 md:tw-p-8 tw-mt-8",
-                children: /*#__PURE__*/ jsx(CustomerForm, {
-                    onSave: onSave,
-                    initialData: initialData,
-                    isLoading: isLoading,
-                    submitButtonLabel: "Save Changes",
-                    isEditing: true
-                })
-            })
-        ]
-    });
-};
-
-export { CustomerEdit };