@qualified-salesforce/web 0.0.1-oidc-bootstrap

package/widget/multimodal_v2/components/meetings/ArtifactEntryPoint.js

@@ -0,0 +1,252 @@
+import { jsxRuntime_module_u } from "../../../../js/multimodal_v2.js";
+import { CrossIcon } from "../../images/icons.js";
+import "../../styled-system/jsx/index.js";
+import { lightboxCardStyle, lightboxMeetingLayoutStyle, lightboxMeetingCalendarStyle } from "../app/LightboxExperience.js";
+import { Button } from "../shared/Button.js";
+import { MeetingSummaryRail } from "./MeetingSummaryRail.js";
+import { default as meetings } from "./index.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+
+/** @jsxImportSource preact */ 
+
+
+
+
+
+/**
+ * The meeting booker as an artifact: the booker's only surface in the messenger,
+ * on the white content card and two-column layout the element-conversation overlay
+ * uses. The card and the layout's shape are imported from LightboxExperience
+ * rather than re-declared, so the two surfaces cannot drift apart on the things
+ * they agree about.
+ *
+ * What they no longer agree about is the left column. The lightbox floats a block
+ * of meeting info in a wide overlay; this card is a booking dialog in a panel, so
+ * the column is a full-height rail with a border down it (MeetingSummaryRail) and
+ * the layout runs edge to edge to let it reach the card's sides.
+ *
+ * What the lightbox chrome cannot express is how much room this surface has. It
+ * sizes against the viewport, while the artifact panel is only a slice of the
+ * viewport — `calc(100% - messenger width)` wide in DOCKED/SIDEBAR, and a fraction
+ * of it tall on mobile. Each imported class is therefore passed to a local styled
+ * component that re-sizes it against the panel instead; see Panel below.
+ *
+ * One card serves every width. Where the panel is too narrow to stand two columns up
+ * the container queries below lay that column down across the top of the card and the
+ * card scrolls inside the panel, so the narrow treatment is this same card restyled
+ * rather than a second component. What the column puts in the space it is given is its
+ * own business, and on a phone that is something else entirely — see
+ * MeetingSummaryRail.
+ *
+ * The X below is therefore the only one the booker has, on every viewport — which
+ * is why the shared Artifact frame stands its own down for meetings entirely (see
+ * Artifact.tsx), leaving the visitor exactly one. Cancel in the step footer and
+ * Escape are the others.
+ */ const ArtifactEntryPoint = (param)=>{
+    let { rootStore } = param;
+    const message = rootStore.artifact.message.value;
+    if ((message == null ? void 0 : message.type) !== "calendar_event_offer") return null;
+    const { t } = rootStore.translationStore;
+    const meetingStore = rootStore.meetingStore.value;
+    return /*#__PURE__*/ jsxRuntime_module_u(Panel, {
+        "data-component-name": "ArtifactEntryPoint.Panel",
+        children: /*#__PURE__*/ jsxRuntime_module_u(CardFrame, {
+            "data-component-name": "ArtifactEntryPoint.CardFrame",
+            children: [
+                /*#__PURE__*/ jsxRuntime_module_u(Button, {
+                    variant: "tertiary",
+                    size: "sm",
+                    iconOnly: true,
+                    onClick: ()=>rootStore.clearArtifact(),
+                    "aria-label": t("meetings.closeMeetingBooker"),
+                    css: {
+                        position: "absolute",
+                        top: "[20px]",
+                        right: "[20px]",
+                        zIndex: "[1]"
+                    },
+                    children: /*#__PURE__*/ jsxRuntime_module_u(CrossIcon, {})
+                }),
+                /*#__PURE__*/ jsxRuntime_module_u(Card, {
+                    className: lightboxCardStyle,
+                    "data-component-name": "ArtifactEntryPoint.Card",
+                    children: /*#__PURE__*/ jsxRuntime_module_u(MeetingLayout, {
+                        className: lightboxMeetingLayoutStyle,
+                        "data-component-name": "ArtifactEntryPoint.MeetingLayout",
+                        children: [
+                            meetingStore && /*#__PURE__*/ jsxRuntime_module_u(MeetingSummaryRail, {
+                                offer: message,
+                                meetingStore: meetingStore,
+                                t: t
+                            }),
+                            /*#__PURE__*/ jsxRuntime_module_u(Column, {
+                                className: lightboxMeetingCalendarStyle,
+                                "data-component-name": "ArtifactEntryPoint.MeetingCalendar",
+                                children: /*#__PURE__*/ jsxRuntime_module_u(meetings, {
+                                    rootStore: rootStore,
+                                    context: "artifact"
+                                })
+                            })
+                        ]
+                    })
+                })
+            ]
+        })
+    });
+};
+/**
+ * Positioning context for the close button, sized to hug the card it wraps so the
+ * button lands on the card's corner rather than the panel's. Owns the 860px cap for
+ * both: Card fills this, so the two share a right edge at every panel width.
+ */ const CardFrame = styled("div", {
+    base: {
+        position: "relative",
+        display: "flex",
+        flexDirection: "column",
+        width: "[min(860px,100%)]",
+        maxHeight: "[100%]",
+        minHeight: "[0]"
+    }
+});
+CardFrame.displayName = "CardFrame";
+/**
+ * Registers the `bookerPanel` container the styles below query, and centres the
+ * card in the panel the way the Artifact frame centres its other bodies.
+ *
+ * Container queries rather than viewport media queries because panel width is what
+ * actually varies here: a 1024px window with the messenger open leaves the panel
+ * under 600px wide, which the 860px two-column desktop layout overflows even
+ * though the viewport is nowhere near the `_mobile` breakpoint. Containment is
+ * scoped to this wrapper rather than put on the Artifact frame so the slide,
+ * presentation and deck bodies are unaffected by it.
+ *
+ * `minHeight: 0` lets the panel shrink to the frame, giving the card's
+ * `maxHeight: 100%` a definite height to resolve against.
+ */ const Panel = styled("div", {
+    base: {
+        containerType: "inline-size",
+        containerName: "bookerPanel",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "[100%]",
+        height: "[100%]",
+        minHeight: "[0]"
+    }
+});
+Panel.displayName = "Panel";
+/**
+ * Each of the two styled components below takes its appearance from the
+ * LightboxExperience class handed to it in `className` and contributes only the
+ * panel-relative sizing.
+ *
+ * Declarations that override the imported class sit under `&&`, which Panda
+ * compiles to a doubled class selector. Class names alone would not settle it:
+ * Panda's `styled` concatenates `className` onto its own classes without merging
+ * them, so an override of equal specificity would be decided by stylesheet source
+ * order. The container-query breakpoints are spelled out at each use because Panda
+ * extracts styles statically — a shared `const` used as a key produces no CSS.
+ *
+ * 720px is where the two columns (a 264px rail and a calendar that wants ~380px
+ * plus its gutters) stop fitting side by side. MeetingTimeSelector queries the same
+ * container at 480px for the calendar's own density, and MeetingSummaryRail queries
+ * it at 720px to turn itself into a band.
+ */ const Card = styled("div", {
+    base: {
+        // The lightbox asks for 860px and falls back to 96vw; here the panel is the
+        // constraint, and it can be far narrower than the viewport. CardFrame already
+        // caps that at 860px, so filling it is what keeps the two edge-to-edge — and
+        // with them the close button, which is pinned to the frame but has to land on
+        // the card. Repeating the cap here instead would leave the button's alignment
+        // resting on two declarations that nothing forces to agree.
+        width: "[100%]",
+        "&&": {
+            // Bounded by the panel rather than the viewport, and allowed to shrink below
+            // its content height so the shared card's `overflowY: auto` scrolls the
+            // booker inside the card instead of letting it spill out of a short panel.
+            maxHeight: "[100%]",
+            minHeight: "[0]",
+            // Rounder and lifted higher than the lightbox card this borrows from. The
+            // lightbox floats over a dimmed viewport, which does the separating for it;
+            // the panel sits against live page content, so the card has to say where its
+            // own edge is. The rail's 12px top-left corner is cut from this radius.
+            borderRadius: "[12px]",
+            boxShadow: "[0 24px 48px -12px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.06)]"
+        }
+    }
+});
+Card.displayName = "Card";
+const MeetingLayout = styled("div", {
+    base: {
+        "&&": {
+            // The shared class aligns its columns to `flex-start`, so each is as tall as
+            // its own content. That leaves the step with no height to lay itself out
+            // against, and a step whose footer is supposed to sit on the card's bottom
+            // edge needs one. Stretching the columns hands the step the layout's full
+            // height: the shared 500px min-height at panel widths above the breakpoint
+            // below, and the stacked layout's content height under it.
+            alignItems: "stretch",
+            // Edge to edge. The shared class insets its columns by 40px/48px, which suits
+            // a block of meeting info floating in a wide overlay; here the left column is
+            // a rail with a border down it and the right one a dialog with a bar across
+            // its foot, and both have to reach the card's edges to read as panes. Their
+            // own padding replaces this.
+            padding: "[0]",
+            gap: "[0]",
+            // The stacked treatment the shared layout applies at `_mobile`, driven by the
+            // panel running out of room rather than the viewport doing so.
+            //
+            // The floor is restated rather than dropped, for the same reason the shared
+            // 500px exists: a height that clears the taller step is what stops the card
+            // resizing when the visitor moves between them. It takes a different number
+            // here because stacking changes the arithmetic -- side by side the rail and the
+            // step overlap, so the layout is as tall as the taller of the two, while
+            // stacked the rail is a band above the step and the two heights add up.
+            "@container bookerPanel (max-width: 720px)": {
+                flexDirection: "column",
+                alignItems: "stretch",
+                minHeight: "[640px]",
+                // Except on a phone, where the panel is a fraction of the viewport tall and
+                // 640px does not fit in it however the card is packed. The card scrolls
+                // there whatever this says, so a floor taller than the panel buys no
+                // stability between steps and only guarantees a scrollbar on the shorter of
+                // the two. Sizing to content lets the select step fit outright.
+                _mobile: {
+                    minHeight: "[auto]"
+                }
+            }
+        }
+    }
+});
+MeetingLayout.displayName = "MeetingLayout";
+/**
+ * The step's column. The shared class gives it `flex: 1`, which in the stacked layout
+ * grows it down the card and so hands it the slack the floor above creates. What the
+ * class cannot say is that the step inside should take that height rather than sit at
+ * the top of it: the step is `height: 100%` and needs a flex column with a definite
+ * height to resolve against, or it measures its content instead and leaves the footer
+ * bar wherever the calendar happens to end.
+ */ const Column = styled("div", {
+    base: {
+        "&&": {
+            "@container bookerPanel (max-width: 720px)": {
+                display: "flex",
+                flexDirection: "column",
+                minHeight: "[0]",
+                // The step grows to fill rather than measuring its content. `flex` rather than
+                // the step's own `height: 100%`, which resolves against a parent height this
+                // column only has once it has grown -- late enough that the step has already
+                // sized itself and left the footer bar under the fields.
+                "& > *": {
+                    flex: "[1]",
+                    minHeight: "[0]"
+                }
+            }
+        }
+    }
+});
+Column.displayName = "Column";
+/* export default */ const meetings_ArtifactEntryPoint = (ArtifactEntryPoint);
+
+export default meetings_ArtifactEntryPoint;

package/widget/multimodal_v2/components/meetings/MeetingAdditionalAttendees.js

@@ -0,0 +1,325 @@
+import { jsxRuntime_module_u, signals_module_useSignal } from "../../../../js/multimodal_v2.js";
+import { ChevronDownIcon, CrossIcon } from "../../images/icons.js";
+import "../../styled-system/jsx/index.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+/** @jsxImportSource preact */ 
+
+
+
+const MeetingAdditionalAttendees = (props)=>{
+    const { state, handlers, t } = useMeetingAdditionalAttendees(props);
+    return /*#__PURE__*/ jsxRuntime_module_u(Container, {
+        "data-component-name": "MeetingAdditionalAttendees.Container",
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u(ToggleButton, {
+                "data-component-name": "MeetingAdditionalAttendees.ToggleButton",
+                type: "button",
+                onClick: handlers.handleToggle,
+                "aria-expanded": state.isExpanded,
+                "aria-controls": "additional-attendees-input",
+                children: [
+                    /*#__PURE__*/ jsxRuntime_module_u(ToggleText, {
+                        "data-component-name": "MeetingAdditionalAttendees.ToggleText",
+                        children: t("meetings.inviteMoreAttendees")
+                    }),
+                    /*#__PURE__*/ jsxRuntime_module_u(ToggleIcon, {
+                        "data-component-name": "MeetingAdditionalAttendees.ToggleIcon",
+                        rotated: state.isExpanded,
+                        children: /*#__PURE__*/ jsxRuntime_module_u(ChevronDownIcon, {})
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(CollapsibleContent, {
+                "data-component-name": "MeetingAdditionalAttendees.CollapsibleContent",
+                id: "additional-attendees-input",
+                expanded: state.isExpanded,
+                children: [
+                    /*#__PURE__*/ jsxRuntime_module_u(InputContainer, {
+                        "data-component-name": "MeetingAdditionalAttendees.InputContainer",
+                        hasError: !!state.error,
+                        children: [
+                            /*#__PURE__*/ jsxRuntime_module_u(ChipsContainer, {
+                                "data-component-name": "MeetingAdditionalAttendees.ChipsContainer",
+                                children: state.attendees.map((email)=>/*#__PURE__*/ jsxRuntime_module_u(Chip, {
+                                        "data-component-name": "MeetingAdditionalAttendees.Chip",
+                                        children: [
+                                            /*#__PURE__*/ jsxRuntime_module_u(ChipText, {
+                                                "data-component-name": "MeetingAdditionalAttendees.ChipText",
+                                                children: email
+                                            }),
+                                            /*#__PURE__*/ jsxRuntime_module_u(ChipRemoveButton, {
+                                                "data-component-name": "MeetingAdditionalAttendees.ChipRemoveButton",
+                                                type: "button",
+                                                onClick: ()=>handlers.handleRemoveEmail(email),
+                                                "aria-label": t("meetings.removeEmail", {
+                                                    email
+                                                }),
+                                                children: /*#__PURE__*/ jsxRuntime_module_u(CrossIcon, {})
+                                            })
+                                        ]
+                                    }, email))
+                            }),
+                            /*#__PURE__*/ jsxRuntime_module_u(EmailInput, {
+                                "data-component-name": "MeetingAdditionalAttendees.EmailInput",
+                                type: "email",
+                                value: state.inputValue.value,
+                                onInput: handlers.handleInputChange,
+                                onKeyDown: handlers.handleKeyDown,
+                                onBlur: handlers.handleBlur,
+                                placeholder: t("meetings.enterAttendeeEmails"),
+                                "aria-label": t("meetings.additionalAttendeeEmail"),
+                                "aria-invalid": !!state.error
+                            })
+                        ]
+                    }),
+                    state.error && /*#__PURE__*/ jsxRuntime_module_u(ErrorMessage, {
+                        "data-component-name": "MeetingAdditionalAttendees.ErrorMessage",
+                        role: "alert",
+                        children: state.error
+                    })
+                ]
+            })
+        ]
+    });
+};
+function useMeetingAdditionalAttendees(param) {
+    let { meetingStore, t } = param;
+    // Local state
+    const inputValue = signals_module_useSignal("");
+    // Derived state from store
+    const isExpanded = meetingStore.showAdditionalAttendeesInput.value;
+    const attendees = meetingStore.additionalAttendees.value;
+    const error = meetingStore.additionalAttendeesError.value;
+    // Handlers
+    const handleToggle = ()=>{
+        meetingStore.toggleAdditionalAttendeesInput();
+    };
+    const handleInputChange = (e)=>{
+        inputValue.value = e.currentTarget.value;
+        meetingStore.clearAdditionalAttendeesError();
+    };
+    const handleAddEmail = ()=>{
+        const email = inputValue.value.trim();
+        if (email && meetingStore.addAttendeeEmail(email)) {
+            inputValue.value = "";
+        }
+    };
+    const handleKeyDown = (e)=>{
+        if (e.key === "Enter" || e.key === "," || e.key === " ") {
+            // Prevent default behavior to avoid form submission or inserting literal space
+            e.preventDefault();
+            handleAddEmail();
+        }
+    };
+    const handleRemoveEmail = (email)=>{
+        meetingStore.removeAttendeeEmail(email);
+    };
+    const handleBlur = ()=>{
+        handleAddEmail();
+    };
+    return {
+        state: {
+            inputValue,
+            isExpanded,
+            attendees,
+            error
+        },
+        handlers: {
+            handleToggle,
+            handleInputChange,
+            handleKeyDown,
+            handleRemoveEmail,
+            handleBlur
+        },
+        t
+    };
+}
+const Container = styled("div", {
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        width: "[100%]",
+        gap: "$sm"
+    }
+});
+Container.displayName = "Container";
+const ToggleButton = styled("button", {
+    base: {
+        display: "flex",
+        alignItems: "center",
+        gap: "$xs",
+        padding: "$none",
+        border: "none",
+        background: "$transparent",
+        cursor: "pointer",
+        color: "$text.secondary",
+        fontFamily: "$inter",
+        fontSize: "12px",
+        fontWeight: "$medium",
+        lineHeight: "18px",
+        "&:hover": {
+            color: "$text.dark"
+        },
+        "&:focus": {
+            outline: "none",
+            color: "$text.dark"
+        }
+    }
+});
+ToggleButton.displayName = "ToggleButton";
+const ToggleIcon = styled("span", {
+    base: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        transition: "transform 0.2s ease"
+    },
+    variants: {
+        rotated: {
+            true: {
+                transform: "rotate(180deg)"
+            }
+        }
+    }
+});
+ToggleIcon.displayName = "ToggleIcon";
+const ToggleText = styled("span", {
+    base: {}
+});
+ToggleText.displayName = "ToggleText";
+const CollapsibleContent = styled("div", {
+    base: {
+        display: "none",
+        flexDirection: "column",
+        gap: "$xs",
+        overflow: "hidden",
+        transition: "all 0.2s ease"
+    },
+    variants: {
+        expanded: {
+            true: {
+                display: "flex"
+            }
+        }
+    }
+});
+CollapsibleContent.displayName = "CollapsibleContent";
+const InputContainer = styled("div", {
+    base: {
+        display: "flex",
+        flexWrap: "wrap",
+        alignItems: "center",
+        gap: "$xs",
+        paddingBlock: "$xs",
+        paddingInline: "$lg",
+        minHeight: "[40px]",
+        borderRadius: "[4px]",
+        backgroundColor: "$white.solid",
+        border: "[1px solid rgba(200, 206, 208, 0.93)]",
+        "&:focus-within": {
+            border: "[2px solid token(colors.$primary)]"
+        }
+    },
+    variants: {
+        hasError: {
+            true: {
+                border: "[1px solid #E4251B]",
+                "&:focus-within": {
+                    border: "[2px solid #E4251B]"
+                }
+            }
+        }
+    }
+});
+InputContainer.displayName = "InputContainer";
+const ChipsContainer = styled("div", {
+    base: {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: "$xs"
+    }
+});
+ChipsContainer.displayName = "ChipsContainer";
+const Chip = styled("span", {
+    base: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "$2xs",
+        paddingBlock: "$2xs",
+        paddingInline: "$xs",
+        backgroundColor: "$gray",
+        borderRadius: "[4px]",
+        fontSize: "12px",
+        lineHeight: "18px",
+        color: "$text.dark"
+    }
+});
+Chip.displayName = "Chip";
+const ChipText = styled("span", {
+    base: {
+        maxWidth: "[150px]",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap"
+    }
+});
+ChipText.displayName = "ChipText";
+const ChipRemoveButton = styled("button", {
+    base: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "[14px]",
+        height: "[14px]",
+        padding: "$none",
+        border: "none",
+        background: "$transparent",
+        cursor: "pointer",
+        color: "$text.secondary",
+        borderRadius: "[2px]",
+        "& svg": {
+            width: "[12px]",
+            height: "[12px]"
+        },
+        "&:hover": {
+            color: "$text.dark",
+            backgroundColor: "[rgba(0, 0, 0, 0.08)]"
+        },
+        "&:focus": {
+            outline: "none",
+            backgroundColor: "[rgba(0, 0, 0, 0.08)]"
+        }
+    }
+});
+ChipRemoveButton.displayName = "ChipRemoveButton";
+const EmailInput = styled("input", {
+    base: {
+        flex: 1,
+        minWidth: "[120px]",
+        paddingBlock: "$2xs",
+        paddingInline: "$none",
+        border: "none",
+        outline: "none",
+        backgroundColor: "$transparent",
+        fontSize: "14px",
+        lineHeight: "22px",
+        color: "$text.dark",
+        fontFamily: "$inter",
+        "&::placeholder": {
+            color: "$text.muted"
+        }
+    }
+});
+EmailInput.displayName = "EmailInput";
+const ErrorMessage = styled("span", {
+    base: {
+        fontSize: "12px",
+        lineHeight: "18px",
+        color: "[#E4251B]",
+        fontWeight: "$normal"
+    }
+});
+ErrorMessage.displayName = "ErrorMessage";
+
+export { MeetingAdditionalAttendees };

package/widget/multimodal_v2/components/meetings/MeetingBookerEntry.js

@@ -0,0 +1,100 @@
+import { jsxRuntime_module_u } from "../../../../js/multimodal_v2.js";
+import { CalendarResumeIcon } from "../../images/icons.js";
+import "../../styled-system/jsx/index.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+
+/** @jsxImportSource preact */ 
+
+/**
+ * The meeting booker's presence in the chat timeline: a placeholder card that
+ * opens the booker in the artifact overlay, which is the only surface the booker
+ * has in the messenger.
+ *
+ * A fresh offer opens the overlay on arrival, so the visitor normally meets this
+ * card only on the way back — after closing a booker they were not finished with.
+ * Until then CalendarEventOfferRenderer withholds the slot entirely, both while
+ * the overlay is up and while it is on its way up; leaving this component to
+ * render nothing instead would still cost a gap in the transcript.
+ */ const MeetingBookerEntry = (param)=>{
+    let { rootStore, message } = param;
+    const { t } = rootStore.translationStore;
+    const handleClick = ()=>{
+        void rootStore.toggleMeetingBookerArtifact(message);
+    };
+    return /*#__PURE__*/ jsxRuntime_module_u(CardButton, {
+        "data-component-name": "MeetingBookerEntry.CardButton",
+        onClick: handleClick,
+        "aria-label": t("meetings.bookMeeting"),
+        children: /*#__PURE__*/ jsxRuntime_module_u(PreviewContent, {
+            "data-component-name": "MeetingBookerEntry.PreviewContent",
+            children: [
+                /*#__PURE__*/ jsxRuntime_module_u(PreviewText, {
+                    "data-component-name": "MeetingBookerEntry.PreviewText",
+                    children: t("meetings.continueBooking")
+                }),
+                /*#__PURE__*/ jsxRuntime_module_u(IconWrapper, {
+                    "data-component-name": "MeetingBookerEntry.IconWrapper",
+                    children: /*#__PURE__*/ jsxRuntime_module_u(CalendarResumeIcon, {})
+                })
+            ]
+        })
+    });
+};
+const PreviewContent = styled("span", {
+    base: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        width: "[100%]",
+        gap: "$sm"
+    }
+});
+PreviewContent.displayName = "PreviewContent";
+const PreviewText = styled("span", {
+    base: {
+        fontSize: "14px",
+        lineHeight: "20px",
+        color: "$text.dark"
+    }
+});
+PreviewText.displayName = "PreviewText";
+const IconWrapper = styled("span", {
+    base: {
+        display: "contents",
+        color: "$primary"
+    }
+});
+IconWrapper.displayName = "IconWrapper";
+const CardButton = styled("button", {
+    base: {
+        display: "flex",
+        width: "[100%]",
+        paddingInline: "$md",
+        paddingBlock: "$lg",
+        borderRadius: "[8px]",
+        fontSize: "14px",
+        lineHeight: "22px",
+        backgroundColor: "$white.solid",
+        border: "none",
+        outline: "1px solid token(colors.$gray.border)",
+        outlineOffset: "-1px",
+        cursor: "pointer",
+        textAlign: "left",
+        transition: "box-shadow 0.2s ease, transform 0.2s ease",
+        "&:hover": {
+            boxShadow: "[0 4px 12px rgba(0, 0, 0, 0.1)]",
+            transform: "translateY(-2px)"
+        },
+        "&:focus": {
+            outline: "2px solid token(colors.$primary)",
+            outlineOffset: "-2px"
+        }
+    }
+});
+CardButton.displayName = "CardButton";
+/* export default */ const meetings_MeetingBookerEntry = ((/* unused pure expression or super */ null && (MeetingBookerEntry)));
+
+var MeetingBookerEntry_default = /* unused export */ undefined;
+export { MeetingBookerEntry };
+export default MeetingBookerEntry_default;