@a-little-world/little-world-design-system 2.10.0

package/dist/cjs/components/Toast/styles.js

@@ -0,0 +1,164 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToastAction = exports.ToastDescription = exports.ToastTitle = exports.ToastHeadline = exports.ToastHeader = exports.ToastContent = exports.ToastCloseIcon = exports.ToastCloseButton = exports.ToastRoot = exports.ToastViewport = exports.ToastProvider = void 0;
+const RadixToast = __importStar(require("@radix-ui/react-toast"));
+const styled_components_1 = __importStar(require("styled-components"));
+const Button_1 = __importDefault(require("../Button/Button"));
+const Icon_1 = require("../Icon");
+const slideIn = (0, styled_components_1.keyframes) `
+	from {
+		transform: translateX(calc(100% + var(--viewport-padding)));
+	}
+	to {
+		transform: translateX(0);
+	}
+`;
+const slideOut = (0, styled_components_1.keyframes) `
+	from {
+    transform: translateX(0);
+	}
+	to {
+    transform: translateX(calc(100% + var(--viewport-padding)));
+	}
+`;
+const swipeOut = (0, styled_components_1.keyframes) `
+	from {
+		transform: translateX(var(--radix-toast-swipe-end-x));
+	}
+	to {
+		transform: translateX(calc(100% + var(--viewport-padding)));
+	}
+`;
+exports.ToastProvider = (0, styled_components_1.default)(RadixToast.ToastProvider) ``;
+exports.ToastViewport = (0, styled_components_1.default)(RadixToast.Viewport) `
+  --viewport-padding: ${({ theme }) => theme.spacing.medium};
+  position: fixed;
+  top: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  padding: var(--viewport-padding);
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+  width: 390px;
+  max-width: 100vw;
+  margin: 0;
+  list-style: none;
+  z-index: 1000;
+  outline: none;
+`;
+exports.ToastRoot = (0, styled_components_1.default)(RadixToast.Root) `
+  position: relative;
+  --border-radius: ${({ theme }) => theme.radius.xxsmall};
+  background-color: ${({ theme }) => theme.color.surface.primary};
+  border-radius: var(--border-radius);
+  box-shadow:
+    hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
+    hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+
+  &[data-state='open'] {
+    animation: ${slideIn} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  &[data-state='closed'] {
+    animation: ${slideOut} 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  &[data-swipe='move'] {
+    transform: translateX(var(--radix-toast-swipe-move-x));
+  }
+
+  &[data-swipe='cancel'] {
+    transform: translateX(0);
+    transition: transform 200ms ease-out;
+  }
+
+  &[data-swipe='end'] {
+    animation: ${swipeOut} 100ms ease-out;
+  }
+`;
+exports.ToastCloseButton = (0, styled_components_1.default)(Button_1.default) `
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  border-radius: ${({ theme }) => theme.radius.half};
+  background-color: ${({ theme }) => theme.color.surface.secondary};
+  width: 16px;
+  height: 16px;
+  box-shadow: 0px 0px 1px 1px ${({ theme }) => theme.color.border.subtle};
+`;
+exports.ToastCloseIcon = (0, styled_components_1.default)(Icon_1.CloseIcon) `
+  scale: 0.8;
+`;
+exports.ToastContent = styled_components_1.default.div `
+  padding: ${({ theme }) => theme.spacing.small};
+  display: grid;
+  grid-template-areas: 'headline headline' 'title action' 'description action';
+  grid-template-columns: auto max-content;
+  column-gap: ${({ theme }) => theme.spacing.small};
+  align-items: center;
+`;
+exports.ToastHeader = styled_components_1.default.div `
+  padding: ${({ theme }) => `${theme.spacing.xxxsmall} ${theme.spacing.xxsmall}`};
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: ${({ $backgroundColor, theme }) => $backgroundColor || theme.color.surface.secondary};
+  justify-content: space-between;
+`;
+exports.ToastHeadline = styled_components_1.default.div `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing.xxxsmall};
+`;
+exports.ToastTitle = (0, styled_components_1.default)(RadixToast.ToastTitle) `
+  grid-area: title;
+  margin-bottom: ${({ theme }) => theme.spacing.xxxsmall};
+  font-weight: bold;
+  color: ${({ theme }) => theme.color.text.primary};
+`;
+exports.ToastDescription = (0, styled_components_1.default)(RadixToast.ToastDescription) `
+  grid-area: description;
+  margin: 0;
+  color: ${({ theme }) => theme.color.text.primary};
+`;
+exports.ToastAction = (0, styled_components_1.default)(RadixToast.ToastAction) `
+  grid-area: action;
+`;

package/dist/cjs/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,9 @@
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+import React from 'react';
+type Props = {
+    text: string;
+    trigger?: React.ReactNode;
+} & RadixTooltip.TooltipProps & RadixTooltip.TooltipContentProps;
+export declare const TooltipProvider: React.FC<RadixTooltip.TooltipProviderProps>;
+declare const Tooltip: React.FC<Props>;
+export default Tooltip;

package/dist/cjs/components/Tooltip/Tooltip.js

@@ -0,0 +1,55 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipProvider = void 0;
+const RadixTooltip = __importStar(require("@radix-ui/react-tooltip"));
+const react_1 = __importDefault(require("react"));
+const Text_1 = __importDefault(require("../Text/Text"));
+const little_world_design_system_core_1 = require("@a-little-world/little-world-design-system-core");
+const styles_1 = require("./styles");
+exports.TooltipProvider = RadixTooltip.Provider;
+const DEFAULT_SIDE_OFFSET = 0; //px
+const DEFAULT_DELAY_DURATION = 300;
+const Tooltip = ({ defaultOpen, open, side, sideOffset = DEFAULT_SIDE_OFFSET, trigger, text, ...rest }) => (react_1.default.createElement(RadixTooltip.Provider, null,
+    react_1.default.createElement(RadixTooltip.Root, { defaultOpen: defaultOpen, delayDuration: DEFAULT_DELAY_DURATION, open: open, ...rest },
+        trigger && (react_1.default.createElement(RadixTooltip.Trigger, { asChild: true }, trigger)),
+        react_1.default.createElement(RadixTooltip.Portal, null,
+            react_1.default.createElement(styles_1.StyledTooltipContent, { side: side, sideOffset: sideOffset },
+                react_1.default.createElement(styles_1.StyledTooltipArrow, null),
+                react_1.default.createElement(Text_1.default, { type: little_world_design_system_core_1.TextTypes.Body5 }, text))))));
+exports.default = Tooltip;

package/dist/cjs/components/Tooltip/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const StyledTooltipContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@radix-ui/react-tooltip").TooltipContentProps & import("react").RefAttributes<HTMLDivElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("@radix-ui/react-tooltip").TooltipContentProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledTooltipArrow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@radix-ui/react-tooltip").TooltipArrowProps & import("react").RefAttributes<SVGSVGElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("@radix-ui/react-tooltip").TooltipArrowProps & import("react").RefAttributes<SVGSVGElement>>, keyof import("react").Component<any, {}, any>>;

package/dist/cjs/components/Tooltip/styles.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledTooltipArrow = exports.StyledTooltipContent = void 0;
+const react_tooltip_1 = require("@radix-ui/react-tooltip");
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.StyledTooltipContent = (0, styled_components_1.default)(react_tooltip_1.TooltipContent) `
+  background: ${({ theme }) => theme.color.surface.dim};
+  border-radius: ${({ theme }) => theme.radius.xxxsmall};
+  color: ${({ theme }) => theme.color.text.reversed};
+  padding: ${({ theme }) => theme.spacing.xxsmall};
+  box-shadow:
+    hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
+    hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+  user-select: none;
+  animation-duration: 400ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+`;
+exports.StyledTooltipArrow = (0, styled_components_1.default)(react_tooltip_1.TooltipArrow) `
+  fill: ${({ theme }) => theme.color.surface.dim};
+`;

package/dist/cjs/components/Widget/AttachmentWidget.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { WidgetProps } from './Widget';
+export declare const ImageSizes: {
+    xsmall: string;
+    small: string;
+    medium: string;
+    large: string;
+    flex: string;
+};
+interface AttachmentWidgetProps extends Omit<WidgetProps, 'children'> {
+    attachmentTitle?: string;
+    attachmentLink?: string;
+    caption?: string;
+    imageSrc?: string;
+    isPreview?: boolean;
+}
+declare const AttachmentWidget: ({ attachmentTitle, attachmentLink, caption, imageSrc, isPreview, }: AttachmentWidgetProps) => React.JSX.Element;
+export default AttachmentWidget;

package/dist/cjs/components/Widget/AttachmentWidget.js

@@ -0,0 +1,124 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageSizes = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const Icon_1 = require("../Icon");
+const Modal_1 = __importDefault(require("../Modal/Modal"));
+const Text_1 = __importDefault(require("../Text/Text"));
+const Widget_1 = __importStar(require("./Widget"));
+exports.ImageSizes = {
+    xsmall: '72px',
+    small: '128px',
+    medium: '154px',
+    large: '180px',
+    flex: '100%',
+};
+const WidgetContainer = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: ${Widget_1.WidgetSizes.Large};
+  height: auto;
+`;
+const ContentContainer = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+  padding: ${({ theme }) => theme.spacing.xxsmall};
+`;
+const AttachmentDownload = styled_components_1.default.a `
+  display: inline-flex;
+  color: ${({ theme }) => theme.color.text.primary};
+  align-items: center;
+  justify-content: space-between;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+  text-align: left;
+  cursor: pointer;
+  width: 100%;
+  text-decoration: none;
+`;
+const ImageButton = styled_components_1.default.button `
+  cursor: pointer;
+  padding: 0;
+  background: none;
+  border: none;
+  font-size: 1rem;
+`;
+const Image = styled_components_1.default.img `
+  background-size: cover;
+  background-position: center;
+  border-radius: ${({ theme }) => theme.radius.small};
+  display: flex;
+  align-items: end;
+  justify-content: center;
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+  max-height: 100%;
+  max-width: 920px;
+`;
+const Caption = (0, styled_components_1.default)(Text_1.default) `
+  padding: 0 ${({ theme }) => theme.spacing.xxxsmall};
+  margin-top: ${({ theme }) => theme.spacing.xxxsmall};
+  margin-bottom: ${({ theme }) => theme.spacing.xxxxsmall};
+`;
+const AttachmentWidget = ({ attachmentTitle, attachmentLink, caption, imageSrc, isPreview, }) => {
+    const theme = (0, styled_components_1.useTheme)();
+    const defaultTitle = imageSrc ? 'Photo' : 'File';
+    const title = attachmentTitle || defaultTitle;
+    const [viewImage, setViewImage] = react_1.default.useState(false);
+    if (isPreview)
+        return (react_1.default.createElement(Widget_1.Preview, null,
+            imageSrc ? (react_1.default.createElement(Icon_1.CameraIcon, { label: 'attachment icon', width: 16 })) : (react_1.default.createElement(Icon_1.AttachmentIcon, { label: 'attachment icon', width: 12 })),
+            react_1.default.createElement(Text_1.default, { disableParser: true }, title)));
+    return (react_1.default.createElement(WidgetContainer, null,
+        react_1.default.createElement(Widget_1.default, { width: Widget_1.WidgetSizes.Large, padding: imageSrc && '0px' }, imageSrc ? (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(Modal_1.default, { open: viewImage, onClose: () => setViewImage(false) },
+                react_1.default.createElement(Image, { src: imageSrc, alt: title })),
+            react_1.default.createElement(ImageButton, { onClick: () => setViewImage(true) },
+                react_1.default.createElement(Image, { src: imageSrc, alt: title })))) : (react_1.default.createElement(ContentContainer, null,
+            react_1.default.createElement(Icon_1.AttachmentIcon, { label: 'attachment icon', width: 20, height: 20, color: theme.color.text.tertiary }),
+            react_1.default.createElement(AttachmentDownload, { href: attachmentLink, download: true, target: "_blank" },
+                react_1.default.createElement(Text_1.default, { disableParser: true }, title),
+                react_1.default.createElement(Icon_1.DownloadIcon, { label: 'download icon', width: 20, height: 20, color: theme.color.text.title }))))),
+        caption && react_1.default.createElement(Caption, null, caption)));
+};
+exports.default = AttachmentWidget;

package/dist/cjs/components/Widget/CallWidget.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { WidgetProps } from './Widget';
+interface CallWidgetProps extends Omit<WidgetProps, 'children'> {
+    description: string;
+    isPreview?: boolean;
+    isMissed?: boolean;
+    isOutgoing?: boolean;
+    onReturnCall?: () => void;
+}
+declare const CallWidget: ({ description, header, isMissed, isOutgoing, isPreview, onReturnCall, ...widgetProps }: CallWidgetProps) => React.JSX.Element;
+export default CallWidget;

package/dist/cjs/components/Widget/CallWidget.js

@@ -0,0 +1,84 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const Icon_1 = require("../Icon");
+const Text_1 = __importDefault(require("../Text/Text"));
+const Widget_1 = __importStar(require("./Widget"));
+const CallDescription = (0, styled_components_1.default)(Text_1.default) `
+  color: ${({ theme }) => theme.color.text.secondary};
+`;
+const CallButton = styled_components_1.default.button `
+  display: flex;
+  align-items: center;
+  text-align: left;
+  width: 100%;
+  gap: ${({ theme }) => theme.spacing.xsmall};
+  border-radius: ${({ theme }) => theme.radius.small};
+  cursor: pointer;
+  text-decoration: none;
+  color: ${({ theme }) => theme.color.text.primary};
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+`;
+const CallInfo = styled_components_1.default.div `
+  ${({ $isPreview }) => !$isPreview &&
+    (0, styled_components_1.css) `
+      margin-right: ${({ theme }) => theme.spacing.xsmall};
+    `}
+`;
+const CallIcon = ({ isPreview, isOutgoing, isMissed, }) => {
+    const theme = (0, styled_components_1.useTheme)();
+    return isOutgoing ? (react_1.default.createElement(Icon_1.CallOutgoingIcon, { label: '', width: isPreview ? 12 : 20, height: isPreview ? 12 : 20, borderColor: theme.color.surface.secondary, color: isMissed ? theme.color.status.error : theme.color.text.primary, circular: !isPreview })) : (react_1.default.createElement(Icon_1.CallIncomingIcon, { label: '', width: isPreview ? 12 : 20, height: isPreview ? 12 : 20, borderColor: theme.color.surface.secondary, color: isMissed ? theme.color.status.error : theme.color.text.primary, circular: !isPreview }));
+};
+const CallWidget = ({ description, header, isMissed, isOutgoing, isPreview, onReturnCall, ...widgetProps }) => {
+    if (isPreview)
+        return (react_1.default.createElement(Widget_1.Preview, null,
+            react_1.default.createElement(CallIcon, { isMissed: isMissed, isOutgoing: isOutgoing, isPreview: isPreview }),
+            react_1.default.createElement(Text_1.default, null, header)));
+    return (react_1.default.createElement(Widget_1.default, { width: Widget_1.WidgetSizes.Medium, ...widgetProps },
+        react_1.default.createElement(CallButton, { onClick: onReturnCall },
+            react_1.default.createElement(CallIcon, { isMissed: isMissed, isOutgoing: isOutgoing }),
+            react_1.default.createElement(CallInfo, null,
+                react_1.default.createElement(Text_1.default, { bold: true }, header),
+                !isPreview && (react_1.default.createElement(CallDescription, { disableParser: true }, description || 'N/A'))))));
+};
+exports.default = CallWidget;

package/dist/cjs/components/Widget/Widget.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { ValueOf } from '../../utils/types';
+import { WidgetSizes } from '@a-little-world/little-world-design-system-core';
+export { WidgetSizes };
+export interface WidgetProps {
+    borderColor?: string;
+    children: React.ReactNode;
+    className?: string;
+    height?: string;
+    width?: ValueOf<typeof WidgetSizes>;
+    header?: string | React.ReactNode;
+    footer?: string | React.ReactNode;
+    padding?: string;
+}
+export declare const WidgetHeader: React.FC<{
+    align?: string;
+    children: React.ReactNode;
+    textColor?: string;
+}>;
+export declare const WidgetFooter: React.FC<{
+    align?: string;
+    children: React.ReactNode;
+}>;
+export declare const Preview: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const Widget: React.FC<WidgetProps>;
+export default Widget;

package/dist/cjs/components/Widget/Widget.js

@@ -0,0 +1,87 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Preview = exports.WidgetFooter = exports.WidgetHeader = exports.WidgetSizes = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const little_world_design_system_core_1 = require("@a-little-world/little-world-design-system-core");
+const little_world_design_system_core_2 = require("@a-little-world/little-world-design-system-core");
+Object.defineProperty(exports, "WidgetSizes", { enumerable: true, get: function () { return little_world_design_system_core_2.WidgetSizes; } });
+const StyledWidget = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  border-radius: ${({ theme }) => theme.radius.medium};
+  background: rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 1px 15px 1px rgba(0, 0, 0, 0.05);
+  width: 100%;
+  max-width: ${({ $width }) => ($width ? little_world_design_system_core_2.WidgetDimensions[$width] : '100%')};
+  height: ${({ $height }) => $height || 'auto'};
+  padding: ${({ theme, $padding }) => $padding || theme.spacing.xxsmall};
+`;
+const StyledWidgetHeader = styled_components_1.default.h3 `
+  color: ${({ $color, theme }) => $color || theme.color.text.primary};
+  font-size: ${little_world_design_system_core_1.TextTypes.Heading4};
+  margin-bottom: ${({ theme }) => theme.spacing.xsmall};
+  text-align: center;
+`;
+const WidgetHeader = ({ children, textColor }) => (react_1.default.createElement(StyledWidgetHeader, { "$color": textColor }, children));
+exports.WidgetHeader = WidgetHeader;
+const Footer = styled_components_1.default.div `
+  display: flex;
+  order: 1;
+  margin-top: auto;
+  width: 100%;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+
+  ${({ $align }) => $align &&
+    (0, styled_components_1.css) `
+      justify-content: ${$align};
+    `};
+`;
+const WidgetFooter = ({ children, align }) => react_1.default.createElement(Footer, { "$align": align }, children);
+exports.WidgetFooter = WidgetFooter;
+exports.Preview = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+`;
+const Widget = ({ borderColor, children, className, footer, header, height, padding, width, }) => (react_1.default.createElement(StyledWidget, { className: className, "$borderColor": borderColor, "$height": height, "$padding": padding, "$width": width },
+    header && react_1.default.createElement(exports.WidgetHeader, null, header),
+    children,
+    footer && react_1.default.createElement(exports.WidgetFooter, null, footer)));
+exports.default = Widget;

package/dist/cjs/globalStyles.d.ts

@@ -0,0 +1,5 @@
+import { ThemeWeb } from '@a-little-world/little-world-design-system-core';
+declare const GlobalStyle: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & {
+    theme: ThemeWeb;
+}>;
+export default GlobalStyle;