@pisell/private-materials 6.1.7 → 6.1.8

package/es/components/ticketBooking/components/bookingDataPanel/constants.d.ts

@@ -0,0 +1,22 @@
+export declare const getPayStatusMap: () => {
+    authorized: any;
+    paid: any;
+    partially_paid: any;
+    partially_refunded: any;
+    payment_pending: any;
+    refunded: any;
+    unpaid: any;
+    voided: any;
+    payment_processing: any;
+};
+export declare const payStatusColorMap: {
+    authorized: string;
+    paid: string;
+    partially_paid: string;
+    partially_refunded: string;
+    payment_pending: string;
+    refunded: string;
+    unpaid: string;
+    voided: string;
+    payment_processing: string;
+};

package/es/components/ticketBooking/components/bookingDataPanel/constants.js

@@ -0,0 +1,25 @@
+import { locales } from '@pisell/utils';
+export var getPayStatusMap = function getPayStatusMap() {
+  return {
+    authorized: locales.getText('pisell2.ticket-booking.authorized'),
+    paid: locales.getText('pisell2.ticket-booking.paid'),
+    partially_paid: locales.getText('pisell2.ticket-booking.partially-paid'),
+    partially_refunded: locales.getText('pisell2.ticket-booking.partially-refunded'),
+    payment_pending: locales.getText('pisell2.ticket-booking.payment-pending'),
+    refunded: locales.getText('pisell2.ticket-booking.refunded'),
+    unpaid: locales.getText('pisell2.ticket-booking.unpaid'),
+    voided: locales.getText('pisell2.ticket-booking.voided'),
+    payment_processing: locales.getText('pisell2.ticket-booking.pending')
+  };
+};
+export var payStatusColorMap = {
+  authorized: 'var(--Gray-200, #EAECF0)',
+  paid: 'var(--Success-100, #DCFAE6)',
+  partially_paid: 'var(--Moss-100, #E6F4D7)',
+  partially_refunded: 'var(--Pink-100, #FCE7F6)',
+  payment_pending: 'var(--Warning-100, #FEF0C7)',
+  refunded: 'var(--Error-100, #FEE4E2)',
+  unpaid: 'var(--Blue-100, #D1E9FF)',
+  voided: 'var(--Gray-200, #EAECF0)',
+  payment_processing: 'var(--Warning-100, #FEF0C7)'
+};

package/es/components/ticketBooking/components/bookingDataPanel/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './index.less';
+interface BookingDataPanelProps {
+    currentDate: string;
+    onBookingClick: (booking: any) => void;
+    bookingId?: number;
+}
+declare const BookingDataPanel: React.ForwardRefExoticComponent<BookingDataPanelProps & React.RefAttributes<unknown>>;
+export default BookingDataPanel;

package/es/components/ticketBooking/components/bookingDataPanel/index.js

@@ -0,0 +1,74 @@
+import React, { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
+import { Tabs } from '@pisell/materials';
+import { locales } from '@pisell/utils';
+import { SyncOutlined } from '@ant-design/icons';
+import BookingDashboard from "./bookingDashboard";
+import BookingList from "./bookingList";
+import useToast from "../../../../hooks/useToast";
+import "./index.less";
+var BookingDataPanel = /*#__PURE__*/forwardRef(function (props, ref) {
+  var currentDate = props.currentDate,
+    onBookingClick = props.onBookingClick,
+    bookingId = props.bookingId;
+  var Toast = useToast();
+  var bookingListRef = useRef(null);
+  var bookingDashboardRef = useRef(null);
+  var bookingTimeStartBetween = useMemo(function () {
+    return ["".concat(currentDate, " 00:00:00"), "".concat(currentDate, " 23:59:59")];
+  }, [currentDate]);
+  var items = useMemo(function () {
+    return [{
+      label: locales.getText('pisell2.ticket-booking.dashboard'),
+      key: 'data-board',
+      children: /*#__PURE__*/React.createElement(BookingDashboard, {
+        bookingTimeStartBetween: bookingTimeStartBetween,
+        ref: bookingDashboardRef
+      })
+    }, {
+      label: locales.getText('pisell2.ticket-booking.booking-list'),
+      key: 'booking-list',
+      children: /*#__PURE__*/React.createElement(BookingList, {
+        bookingTimeStartBetween: bookingTimeStartBetween,
+        onBookingClick: onBookingClick,
+        bookingId: bookingId,
+        ref: bookingListRef
+      })
+    }];
+  }, [currentDate, bookingId]);
+  useImperativeHandle(ref, function () {
+    return {
+      refresh: function refresh() {
+        var _bookingListRef$curre, _bookingDashboardRef$;
+        (_bookingListRef$curre = bookingListRef.current) === null || _bookingListRef$curre === void 0 || _bookingListRef$curre.refresh();
+        (_bookingDashboardRef$ = bookingDashboardRef.current) === null || _bookingDashboardRef$ === void 0 || _bookingDashboardRef$.refresh();
+      }
+    };
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-ticket-booking-data-panel"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-ticket-booking-data-panel-mask",
+    style: {
+      display: bookingId ? 'block' : 'none'
+    },
+    onClick: function onClick() {
+      onBookingClick({});
+    }
+  }), /*#__PURE__*/React.createElement(Tabs, {
+    type: "line",
+    items: items,
+    tabBarExtraContent: /*#__PURE__*/React.createElement("div", {
+      className: "pisell-ticket-booking-data-panel-tab-extra",
+      onClick: function onClick() {
+        var _bookingListRef$curre2, _Toast$success;
+        (_bookingListRef$curre2 = bookingListRef.current) === null || _bookingListRef$curre2 === void 0 || _bookingListRef$curre2.refresh();
+        Toast === null || Toast === void 0 || (_Toast$success = Toast.success) === null || _Toast$success === void 0 || _Toast$success.call(Toast, locales.getText('pisell2.ticket-booking.refresh-success'));
+      }
+    }, /*#__PURE__*/React.createElement(SyncOutlined, null)),
+    tabBarStyle: {
+      margin: '0 0 0 16px',
+      height: '40px'
+    }
+  }));
+});
+export default BookingDataPanel;

package/es/components/ticketBooking/components/bookingDataPanel/index.less

@@ -0,0 +1,61 @@
+.pisell-ticket-booking-data-panel {
+  position: relative;
+  height: 100%;
+  .pisell-lowcode-tabs-tabpane, .pisell-lowcode-tabs-content{
+    height: 100%;
+  }
+  .pisell-lowcode-tabs {
+    width: 100%;
+    height: 100%;
+  }
+  .pisell-lowcode-tabs-content-holder {
+    overflow: auto;
+  }
+  .pisell-ticket-booking-data-panel-tab-extra {
+    padding: 12px;
+    color: rgb(152, 162, 179);
+    font-size: 20px;
+    cursor: pointer;
+  }
+  .pisell-ticket-booking-data-panel-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.85);
+    z-index: 9;
+  }
+  .pisell-lowcode-dropdown-trigger {
+    background: rgba(255, 255, 255, 0.07);
+    color: var(--Gray-400, #98a2b3);
+    border: none;
+    box-shadow: none;
+  }
+  .pisell-lowcode-sort-button-active {
+    background-color: var(--Primary-100, #F4EBFF);
+  }
+  .pisell-lowcode-badge {
+    color: inherit;
+  }
+  .pisell-lowcode-tabs-top>.pisell-lowcode-tabs-nav::before {
+    border-bottom: 1px solid var(--Gray-600, #475467);
+  }
+  
+  .pisell-lowcode-tabs {
+    .pisell-lowcode-tabs-tab {
+      color: #fff;
+      .pisell-lowcode-tab-bar-label {
+        color: inherit !important;
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 20px;
+      }
+    }
+    .pisell-lowcode-input-lg {
+      background: rgba(255, 255, 255, 0.07);
+      border: none;
+      color: #fff;
+    }
+  }
+}

package/es/components/ticketBooking/components/bookingDataPanel/pisellFloatingPanel/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface PisellFloatingPanelProps {
+    currentDate: string;
+    onBookingClick: (booking: any) => void;
+    bookingId?: number;
+}
+export interface PisellFloatingPanelRef {
+    open: () => void;
+    close: () => void;
+    refresh: () => void;
+    getIsOpen: () => boolean;
+}
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<PisellFloatingPanelProps & React.RefAttributes<PisellFloatingPanelRef>>>;
+export default _default;

package/es/components/ticketBooking/components/bookingDataPanel/pisellFloatingPanel/index.js

@@ -0,0 +1,71 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { memo, useMemo, useState, useImperativeHandle, forwardRef, useRef } from 'react';
+import { PisellFloatingPanel as PisellFloatingPanelComponent } from '@pisell/materials';
+import BookingDataPanel from "../index";
+var PisellFloatingPanel = /*#__PURE__*/forwardRef(function (props, ref) {
+  var currentDate = props.currentDate,
+    onBookingClick = props.onBookingClick,
+    bookingId = props.bookingId;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var bookingDataPanelRef = useRef(null);
+  var floationgPanelProps = useMemo(function () {
+    return {
+      fullHeight: 'calc(100% - 62px)',
+      retractHeight: '0px',
+      defaultOpen: isOpen,
+      style: {
+        background: 'var(--Gray-950, #0C111D)',
+        width: '470px',
+        height: '100%',
+        zIndex: '1000',
+        left: '16px'
+      },
+      retractIconStyle: {
+        color: '#fff',
+        fontSize: '20px'
+      },
+      width: '470px',
+      isFloat: true,
+      onOpenChange: function onOpenChange(open) {
+        setIsOpen(open);
+      }
+    };
+  }, []);
+  useImperativeHandle(ref, function () {
+    return {
+      open: function open() {
+        var _bookingDataPanelRef$;
+        (_bookingDataPanelRef$ = bookingDataPanelRef.current) === null || _bookingDataPanelRef$ === void 0 || _bookingDataPanelRef$.refresh();
+        setIsOpen(true);
+      },
+      close: function close() {
+        setIsOpen(false);
+      },
+      refresh: function refresh() {
+        var _bookingDataPanelRef$2;
+        (_bookingDataPanelRef$2 = bookingDataPanelRef.current) === null || _bookingDataPanelRef$2 === void 0 || _bookingDataPanelRef$2.refresh();
+      },
+      getIsOpen: function getIsOpen() {
+        return isOpen;
+      }
+    };
+  });
+  return /*#__PURE__*/React.createElement(PisellFloatingPanelComponent, _extends({}, floationgPanelProps, {
+    open: isOpen
+  }), /*#__PURE__*/React.createElement(BookingDataPanel, {
+    currentDate: currentDate,
+    bookingId: bookingId,
+    onBookingClick: onBookingClick,
+    ref: bookingDataPanelRef
+  }));
+});
+export default /*#__PURE__*/memo(PisellFloatingPanel);

package/es/components/ticketBooking/components/floatButtons/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import './index.less';
+interface FloatButtonsProps {
+    items: {
+        icon: React.ReactNode;
+        onClick: () => void;
+        key: string;
+    }[];
+}
+declare const FloatButtons: (props: FloatButtonsProps) => JSX.Element;
+export default FloatButtons;

package/es/components/ticketBooking/components/floatButtons/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Button } from '@pisell/materials';
+import "./index.less";
+var FloatButtons = function FloatButtons(props) {
+  var items = props.items;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "ticket-booking-float-buttons"
+  }, items.map(function (item) {
+    return /*#__PURE__*/React.createElement(Button, {
+      key: item.key,
+      type: "primary",
+      icon: item.icon,
+      shape: "circle",
+      size: "large",
+      onClick: item.onClick
+    });
+  }));
+};
+export default FloatButtons;

package/es/components/ticketBooking/components/floatButtons/index.less

@@ -0,0 +1,17 @@
+.ticket-booking-float-buttons {
+  position: absolute;
+  bottom: 24px;
+  right: 33px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  .pisell-lowcode-btn {
+    width: 54px;
+    height: 54px;
+    box-shadow: 0 1.813px 3.625px 0 rgba(16, 24, 40, 0.05);
+    background-color: #7F56DA;
+    .anticon {
+        font-size: 29px;
+    }
+  }
+}

package/es/components/ticketBooking/components/menuBar/index.js

@@ -1,8 +1,20 @@
 import React from 'react';
 import { useNetworkStatus, NetworkStatus, NetworkStatusColor } from "../../hooks/useNetworkStatus";
 import "./index.less";
+import { Menu } from 'antd';
+import { SettingOutlined } from '@ant-design/icons';
+import { locales } from '@pisell/utils';
+import { ConfigProvider } from '@pisell/materials';
 var index = function index() {
   var status = useNetworkStatus();
+  var items = [{
+    key: '1',
+    icon: /*#__PURE__*/React.createElement(SettingOutlined, null),
+    children: [{
+      key: 'reload',
+      label: locales.getText('pisell2.ticket-booking.reload')
+    }]
+  }];
   var getStatusText = function getStatusText(status) {
     switch (status) {
       case NetworkStatus.GOOD:
@@ -13,6 +25,12 @@ var index = function index() {
         return 'Offline';
     }
   };
+  var handleClick = function handleClick(_ref) {
+    var key = _ref.key;
+    if (key === 'reload') {
+      window.location.reload();
+    }
+  };
   return /*#__PURE__*/React.createElement("div", {
     className: "pisell-ticket-booking-menu-bar"
   }, /*#__PURE__*/React.createElement("div", {
@@ -33,6 +51,19 @@ var index = function index() {
     className: "nav-wrapper"
   }, /*#__PURE__*/React.createElement("div", {
     className: "nav-item active"
+  }, /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "44",
+    height: "26",
+    viewBox: "0 0 44 26",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M35.6532 13.0605C37.0806 11.869 38.5601 10.6336 40.1874 10.9932C41.0631 11.1851 41.7553 11.7931 42.2352 12.8086C43.7869 16.0599 43.1992 20.8314 39.536 22.875C39.0721 23.1309 38.6243 23.4031 38.1845 23.667C35.713 25.1507 33.1574 26.6896 29.3583 25.6699C26.179 24.8181 24.3232 24.5303 22.0038 24.5303C19.6843 24.5303 17.8285 24.8181 14.6493 25.6699C13.7895 25.8979 12.9975 25.998 12.2577 25.998C9.70239 25.998 7.73479 24.8148 5.81531 23.6631C5.37153 23.3992 4.92351 23.127 4.46375 22.8711C0.804523 20.8315 0.211882 16.056 1.76355 12.8047C2.24745 11.793 2.93564 11.1811 3.81141 10.9932C5.43499 10.6333 6.91492 11.8688 8.34656 13.0605C8.77047 13.4125 9.17023 13.749 9.53016 14.001C9.99006 14.3249 10.7382 14.0412 12.4618 13.2734C14.6253 12.3056 17.5928 10.9814 21.9999 10.9814C26.4068 10.9815 29.3705 12.3057 31.538 13.2734C33.2609 14.0449 34.0087 14.3245 34.4686 14.001C34.8286 13.745 35.2293 13.4125 35.6532 13.0605ZM39.58 13.5605C39.176 13.5605 37.9405 14.589 37.3446 15.0889C36.9008 15.4607 36.4369 15.8443 35.9891 16.1602C34.2535 17.3799 32.4134 16.5525 30.4618 15.6807C28.4063 14.7609 25.8469 13.6172 22.0038 13.6172C18.1607 13.6172 15.6013 14.7609 13.5458 15.6807C11.5942 16.5525 9.75007 17.3759 8.01844 16.1602C7.56666 15.8443 7.10675 15.4607 6.66297 15.0889C6.06312 14.593 4.83934 13.5733 4.39539 13.5732H4.37488C4.37692 13.5829 4.274 13.687 4.15516 13.9404C3.1114 16.1239 3.50737 19.3078 5.75477 20.5596C6.24264 20.8315 6.71462 21.1156 7.1825 21.3955C9.45402 22.7632 11.2543 23.8431 13.9657 23.1152C17.3528 22.2075 19.4564 21.8867 22.0038 21.8867C24.5512 21.8867 26.6547 22.2074 30.0419 23.1152C32.7571 23.843 34.5528 22.7631 36.8241 21.3955C37.2919 21.1156 37.7641 20.8315 38.2518 20.5596C40.4994 19.3078 40.8952 16.124 39.8514 13.9404C39.7276 13.6808 39.6236 13.5765 39.5956 13.5605H39.58ZM25.6991 4.86621C26.7868 4.70638 27.9108 5.12611 28.6386 5.96582C29.3784 6.81762 29.598 7.99374 29.2421 9.18945C29.0781 9.76133 28.5502 10.1338 27.9823 10.1338C27.8583 10.1338 27.7303 10.1171 27.6063 10.0771C26.9065 9.86915 26.5108 9.13341 26.7147 8.43359C26.8106 8.10584 26.7902 7.85828 26.6464 7.69434C26.4984 7.52239 26.2467 7.45357 26.0907 7.47754C25.8468 7.51352 25.695 7.62195 25.3153 7.92969C24.7075 8.42155 23.7873 9.16102 21.996 9.16113C20.2045 9.16113 19.2885 8.42158 18.6766 7.92969C18.3007 7.62575 18.1441 7.51353 17.9042 7.47754C17.7442 7.45368 17.4965 7.52248 17.3446 7.69434C17.2049 7.85827 17.1804 8.10593 17.2762 8.43359C17.4842 9.13345 17.0884 9.86919 16.3886 10.0771C15.6887 10.289 14.9529 9.88526 14.745 9.18945C14.3891 7.99375 14.6088 6.81761 15.3446 5.96582C16.0684 5.12611 17.1964 4.70638 18.2841 4.86621C19.2598 5.01017 19.856 5.49012 20.3319 5.87402C20.8317 6.27786 21.1316 6.52237 21.9911 6.52246C22.8469 6.52246 23.1514 6.27794 23.6512 5.87402C24.1271 5.49012 24.7234 5.01017 25.6991 4.86621ZM9.7782 4.7793C11.1078 4.7793 12.1853 5.85699 12.1854 7.18652C12.1854 8.51614 11.1078 9.59375 9.7782 9.59375C8.44863 9.59369 7.37098 8.51611 7.37098 7.18652C7.37108 5.85703 8.4487 4.77936 9.7782 4.7793ZM34.3329 4.7793C35.6624 4.77934 36.74 5.85702 36.7401 7.18652C36.7401 8.51612 35.6625 9.59371 34.3329 9.59375C33.0033 9.59375 31.9257 8.51614 31.9257 7.18652C31.9258 5.85699 33.0033 4.7793 34.3329 4.7793ZM9.66199 0C13.6059 4.10292e-05 15.2458 2.41974 15.3163 2.52734C15.7162 3.13522 15.5482 3.95546 14.9403 4.35938C14.7165 4.50314 14.4645 4.5752 14.2167 4.5752C13.7889 4.57512 13.3651 4.36717 13.1132 3.97949C13.0892 3.9435 12.1294 2.64356 9.6659 2.64355C7.20596 2.64355 6.24558 3.93955 6.20301 3.99902C5.7831 4.5829 4.96685 4.73897 4.37098 4.33105C3.77915 3.92316 3.61089 3.1272 4.00672 2.52734C4.0747 2.42337 5.71483 0 9.66199 0ZM34.329 0C38.2761 0 39.9203 2.42337 39.9843 2.52734C40.3841 3.13521 40.2161 3.95547 39.6083 4.35938C39.3884 4.50328 39.1364 4.57513 38.8886 4.5752C38.4607 4.5752 38.036 4.36736 37.7841 3.97949C37.7601 3.9435 36.8004 2.64355 34.3329 2.64355C31.8713 2.64365 30.9112 3.94138 30.87 3.99902C30.4501 4.5829 29.6338 4.73897 29.038 4.33105C28.4463 3.9231 28.2788 3.12714 28.6747 2.52734C28.7448 2.42029 30.3846 7.62705e-05 34.329 0Z",
+    fill: "#8157D5"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "nav-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "nav-item active"
   }, /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "32",
@@ -45,7 +76,25 @@ var index = function index() {
     "stroke-width": "1.5",
     "stroke-linecap": "round",
     "stroke-linejoin": "round"
-  })))), /*#__PURE__*/React.createElement("div", {
+  }))))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ConfigProvider, {
+    theme: {
+      components: {
+        Menu: {
+          collapsedIconSize: 32,
+          itemHeight: 48,
+          groupTitleFontSize: 16,
+          fontSize: 16
+        }
+      }
+    }
+  }, /*#__PURE__*/React.createElement(Menu, {
+    className: "pisell-ticket-booking-menu",
+    mode: "inline",
+    theme: "dark",
+    inlineCollapsed: true,
+    items: items,
+    onClick: handleClick
+  }))), /*#__PURE__*/React.createElement("div", {
     className: "status-wrapper"
   }, /*#__PURE__*/React.createElement("div", {
     className: "network-status",

package/es/components/ticketBooking/components/menuBar/index.less

@@ -3,6 +3,14 @@
   padding-left: 6px;
   width: 86px;
   position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding-bottom: 44px;
+
+  .pisell-ticket-booking-menu {
+    background-color: transparent;
+  }
 
   .logo-wrapper {
     margin-top: 24px;