@spaced-out/ui-design-system 0.5.1 → 0.5.2

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.5.2](https://github.com/spaced-out/ui-design-system/compare/v0.5.1...v0.5.2) (2025-09-02)
+
+
+### Features
+
+* in context alert with bottom buttons ([#395](https://github.com/spaced-out/ui-design-system/issues/395)) ([1478a08](https://github.com/spaced-out/ui-design-system/commit/1478a08016922f29815eeac9403cee3496dcc5bf))
+
 ### [0.5.1](https://github.com/spaced-out/ui-design-system/compare/v0.5.0...v0.5.1) (2025-08-25)
 
 

package/lib/components/InContextAlert/InContextAlert.d.ts

@@ -1,12 +1,14 @@
 import * as React from 'react';
 import type { Flow } from 'flow-to-typescript-codemod';
 import type { AlertSemanticType } from '../../types/common';
+import type { ColorTypes } from '../../types/typography';
 import type { IconType } from '../Icon';
 type ClassNames = Readonly<{
     wrapper?: string;
     alertText?: string;
     actionContainer?: string;
     icon?: string;
+    contentContainer?: string;
 }>;
 type InContextAlertBaseProps = {
     classNames?: ClassNames;
@@ -20,12 +22,19 @@ type InContextAlertBaseProps = {
     children?: string;
     actionText?: string;
     onAction?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
+    actionTextColor?: ColorTypes;
 };
 export type InContextAlertProps = InContextAlertBaseProps & {
     semantic?: AlertSemanticType;
     leftIconName?: string;
     leftIconType?: IconType;
 };
+export declare const AlertIcon: ({ semantic, leftIconName, leftIconType, iconClassName, }: {
+    semantic: AlertSemanticType;
+    leftIconName: string;
+    leftIconType?: IconType;
+    iconClassName?: string;
+}) => React.JSX.Element;
 export declare const InContextAlert: Flow.AbstractComponent<InContextAlertProps, HTMLDivElement>;
 export {};
 //# sourceMappingURL=InContextAlert.d.ts.map

package/lib/components/InContextAlert/InContextAlert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InContextAlert.d.ts","sourceRoot":"","sources":["../../../src/components/InContextAlert/InContextAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAErD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,oBAAoB,CAAC;AAI1D,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAStC,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAEH,KAAK,uBAAuB,GAAG;IAC7B,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,GAAG,CACA;IACE,WAAW,EAAE,IAAI,CAAC;IAClB,YAAY,CAAC,EACT,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,OAAO,CAAC,GACtD,IAAI,GACJ,SAAS,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,GACD;IACE,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB,CACJ,GAAG;IACA,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EACL,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,OAAO,CAAC,GACtD,IAAI,GACJ,SAAS,CAAC;CACf,CAAC;AAEJ,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,GAAG;IAC1D,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,QAAQ,CAAC;CACzB,CAAC;AAiFF,eAAO,MAAM,cAAc,EAAE,IAAI,CAAC,iBAAiB,CACjD,mBAAmB,EACnB,cAAc,CAmFf,CAAC"}
+{"version":3,"file":"InContextAlert.d.ts","sourceRoot":"","sources":["../../../src/components/InContextAlert/InContextAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAErD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,oBAAoB,CAAC;AAE1D,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,wBAAwB,CAAC;AAGvD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAStC,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC,CAAC;AAEH,KAAK,uBAAuB,GAAG;IAC7B,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,GAAG,CACA;IACE,WAAW,EAAE,IAAI,CAAC;IAClB,YAAY,CAAC,EACT,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,OAAO,CAAC,GACtD,IAAI,GACJ,SAAS,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,GACD;IACE,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB,CACJ,GAAG;IACA,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EACL,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,OAAO,CAAC,GACtD,IAAI,GACJ,SAAS,CAAC;IACd,eAAe,CAAC,EAAE,UAAU,CAAC;CAC9B,CAAC;AAEJ,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,GAAG;IAC1D,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,QAAQ,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,0DAKvB;IACD,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,QAAQ,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,sBAmEA,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,IAAI,CAAC,iBAAiB,CACjD,mBAAmB,EACnB,cAAc,CAoFf,CAAC"}

package/lib/components/InContextAlert/InContextAlert.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.InContextAlert = void 0;
+exports.InContextAlert = exports.AlertIcon = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _common = require("../../types/common");
 var _typography = require("../../types/typography");
@@ -73,6 +73,7 @@ const AlertIcon = _ref => {
       });
   }
 };
+exports.AlertIcon = AlertIcon;
 const InContextAlert = exports.InContextAlert = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     classNames,
@@ -85,6 +86,7 @@ const InContextAlert = exports.InContextAlert = /*#__PURE__*/React.forwardRef((p
     // @ts-ignore - TS2339 - Property 'onCloseClick' does not exist on type 'InContextAlertProps'.
     onCloseClick,
     actionText = '',
+    actionTextColor = _typography.TEXT_COLORS.primary,
     onAction,
     leftIconType
   } = props;
@@ -116,7 +118,7 @@ const InContextAlert = exports.InContextAlert = /*#__PURE__*/React.forwardRef((p
     className: (0, _classify.classify)(_InContextAlertModule.default.actionContainer, classNames?.actionContainer)
   }, !!actionText && /*#__PURE__*/React.createElement(_Link.Link, {
     onClick: onAction,
-    color: "primary"
+    color: actionTextColor
   }, actionText), !!dismissable && /*#__PURE__*/React.createElement(_Icon.ClickableIcon, {
     color: _typography.TEXT_COLORS.primary,
     ariaLabel: "close",

package/lib/components/InContextAlert/InContextAlert.stories.d.ts

@@ -24,6 +24,22 @@ declare const _default: {
                 summary: string;
             };
         };
+        actionTextColor: {
+            options: unknown[];
+            name: string;
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
         semantic: {
             options: unknown[];
             description: string;
@@ -159,6 +175,7 @@ export declare const _Actionable: {
         children: string;
         semantic: string;
         actionText: string;
+        actionTextColor: string;
     };
 };
 //# sourceMappingURL=InContextAlert.stories.d.ts.map

package/lib/components/InContextAlert/InContextAlert.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InContextAlert.stories.d.ts","sourceRoot":"","sources":["../../../src/components/InContextAlert/InContextAlert.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQ1D,wBAqHE;AAEF,eAAO,MAAM,QAAQ;WAAU,mBAAmB;;;;;;CAIjD,CAAC;AASF,eAAO,MAAM,YAAY;WAAU,mBAAmB;;;;;;;;CAIrD,CAAC;AAWF,eAAO,MAAM,WAAW;WAAU,mBAAmB;;;;;;CAIpD,CAAC"}
+{"version":3,"file":"InContextAlert.stories.d.ts","sourceRoot":"","sources":["../../../src/components/InContextAlert/InContextAlert.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAS1D,wBAiIE;AAEF,eAAO,MAAM,QAAQ;WAAU,mBAAmB;;;;;;CAIjD,CAAC;AASF,eAAO,MAAM,YAAY;WAAU,mBAAmB;;;;;;;;CAIrD,CAAC;AAWF,eAAO,MAAM,WAAW;WAAU,mBAAmB;;;;;;;CAIpD,CAAC"}

package/lib/components/InContextAlertWithMultipleActions/InContextAlertWithMultipleActions.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { Flow } from 'flow-to-typescript-codemod';
+import type { ColorTypes } from '../../types/typography';
+import type { InContextAlertProps } from '../InContextAlert';
+export type InContextAlertWithMultipleActionsProps = InContextAlertProps & {
+    inline?: boolean;
+    secondaryActionText?: string;
+    onSecondaryAction?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
+    secondaryActionTextColor?: ColorTypes;
+};
+export declare const InContextAlertWithMultipleActions: Flow.AbstractComponent<InContextAlertWithMultipleActionsProps, HTMLDivElement>;
+//# sourceMappingURL=InContextAlertWithMultipleActions.d.ts.map

package/lib/components/InContextAlertWithMultipleActions/InContextAlertWithMultipleActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InContextAlertWithMultipleActions.d.ts","sourceRoot":"","sources":["../../../src/components/InContextAlertWithMultipleActions/InContextAlertWithMultipleActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAGrD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,wBAAwB,CAAC;AAIvD,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,mBAAmB,CAAC;AAQ3D,MAAM,MAAM,sCAAsC,GAAG,mBAAmB,GAAG;IACzE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,iBAAiB,CAAC,EACd,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,OAAO,CAAC,GACtD,IAAI,GACJ,SAAS,CAAC;IACd,wBAAwB,CAAC,EAAE,UAAU,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,iCAAiC,EAAE,IAAI,CAAC,iBAAiB,CACpE,sCAAsC,EACtC,cAAc,CAwGf,CAAC"}

package/lib/components/InContextAlertWithMultipleActions/InContextAlertWithMultipleActions.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InContextAlertWithMultipleActions = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _common = require("../../types/common");
+var _typography = require("../../types/typography");
+var _classify = require("../../utils/classify");
+var _Icon = require("../Icon");
+var _InContextAlert = require("../InContextAlert");
+var _Link = require("../Link");
+var _Text = require("../Text");
+var _InContextAlertWithMultipleActionsModule = _interopRequireDefault(require("./InContextAlertWithMultipleActions.module.css"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const InContextAlertWithMultipleActions = exports.InContextAlertWithMultipleActions = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    classNames,
+    semantic = _common.ALERT_SEMANTIC.neutral,
+    dismissable,
+    children,
+    inline = false,
+    // @ts-ignore - TS2339 - Property 'selfDismiss' does not exist on type 'InContextAlertWithMultipleActionsProps'.
+    selfDismiss = false,
+    leftIconName = '',
+    // @ts-ignore - TS2339 - Property 'onCloseClick' does not exist on type 'InContextAlertWithMultipleActionsProps'.
+    onCloseClick,
+    actionText = '',
+    onAction,
+    actionTextColor = _typography.TEXT_COLORS.primary,
+    secondaryActionText = '',
+    onSecondaryAction,
+    secondaryActionTextColor = _typography.TEXT_COLORS.primary,
+    leftIconType
+  } = props;
+  const [dismissed, setDismissed] = React.useState(false);
+  const closeClickHandler = e => {
+    onCloseClick && onCloseClick(e);
+    selfDismiss && setDismissed(true);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !dismissed && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.classify)(_InContextAlertWithMultipleActionsModule.default.alertContainer, {
+      [_InContextAlertWithMultipleActionsModule.default.neutral]: semantic === _common.ALERT_SEMANTIC.neutral,
+      [_InContextAlertWithMultipleActionsModule.default.success]: semantic === _common.ALERT_SEMANTIC.success,
+      [_InContextAlertWithMultipleActionsModule.default.information]: semantic === _common.ALERT_SEMANTIC.information,
+      [_InContextAlertWithMultipleActionsModule.default.warning]: semantic === _common.ALERT_SEMANTIC.warning,
+      [_InContextAlertWithMultipleActionsModule.default.danger]: semantic === _common.ALERT_SEMANTIC.danger
+    }, classNames?.wrapper),
+    ref: ref
+  }, /*#__PURE__*/React.createElement(_InContextAlert.AlertIcon, {
+    semantic: semantic,
+    leftIconName: leftIconName,
+    leftIconType: leftIconType,
+    iconClassName: classNames?.icon
+  }), /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.classify)(_InContextAlertWithMultipleActionsModule.default.contentContainer, inline ? _InContextAlertWithMultipleActionsModule.default.contentContainerRow : _InContextAlertWithMultipleActionsModule.default.contentContainerColumn, classNames?.contentContainer)
+  }, React.Children.count(children) > 0 && /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
+    className: (0, _classify.classify)(classNames?.alertText)
+  }, children), !!(actionText || secondaryActionText) && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.classify)(_InContextAlertWithMultipleActionsModule.default.actionContainer, classNames?.actionContainer)
+  }, !!actionText && /*#__PURE__*/React.createElement(_Link.Link, {
+    onClick: onAction,
+    color: actionTextColor
+  }, actionText), !!secondaryActionText && /*#__PURE__*/React.createElement(_Link.Link, {
+    onClick: onSecondaryAction,
+    color: secondaryActionTextColor
+  }, secondaryActionText))), /*#__PURE__*/React.createElement("div", null, !!dismissable && /*#__PURE__*/React.createElement(_Icon.ClickableIcon, {
+    color: _typography.TEXT_COLORS.primary,
+    ariaLabel: "close",
+    name: "close",
+    size: "small",
+    type: "regular",
+    onClick: closeClickHandler,
+    className: _InContextAlertWithMultipleActionsModule.default.closeIcon
+  }))));
+});

package/lib/components/InContextAlertWithMultipleActions/InContextAlertWithMultipleActions.module.css

@@ -0,0 +1,91 @@
+@value (borderRadiusXSmall) from '../../styles/variables/_border.css';
+@value (colorNeutralLight,
+  colorNeutralLightest,
+  colorSuccessLight,
+  colorSuccessLightest,
+  colorInformationLight,
+  colorInformationLightest,
+  colorWarningLight,
+  colorWarningLightest,
+  colorDangerLight,
+  colorDangerLightest
+) from '../../styles/variables/_color.css';
+
+@value (
+  spaceXSmall,
+  spaceXXSmall
+) from '../../styles/variables/_space.css';
+
+@value (
+  sizeFluid
+) from '../../styles/variables/_size.css';
+
+@value (
+  borderWidthPrimary
+) from '../../styles/variables/_border.css';
+
+.alertContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: spaceXSmall;
+  gap: spaceXSmall;
+  border-radius: borderRadiusXSmall;
+  width: sizeFluid;
+  word-break: normal;
+  border-width: borderWidthPrimary;
+  border-style: solid;
+}
+
+.neutral {
+  background-color: colorNeutralLightest;
+  border-color: colorNeutralLight;
+}
+
+.success {
+  background-color: colorSuccessLightest;
+  border-color: colorSuccessLight;
+}
+
+.information {
+  background-color: colorInformationLightest;
+  border-color: colorInformationLight;
+}
+
+.warning {
+  background-color: colorWarningLightest;
+  border-color: colorWarningLight;
+}
+
+.danger {
+  background-color: colorDangerLightest;
+  border-color: colorDangerLight;
+}
+
+.closeIcon {
+  margin-left: auto;
+}
+
+.contentContainer {
+  display: flex;
+  width: sizeFluid;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.contentContainerRow {
+  flex-direction: row;
+  gap: spaceXSmall;
+}
+
+.contentContainerColumn {
+  flex-direction: column;
+  gap: spaceXXSmall;
+}
+
+.actionContainer {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: spaceXSmall;
+}

package/lib/components/InContextAlertWithMultipleActions/InContextAlertWithMultipleActions.stories.d.ts

@@ -0,0 +1,249 @@
+import * as React from 'react';
+import type { InContextAlertWithMultipleActionsProps } from './InContextAlertWithMultipleActions';
+declare const _default: {
+    tags: string[];
+    title: string;
+    argTypes: {
+        actionText: {
+            name: string;
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onAction: {
+            name: string;
+            action: string;
+            description: string;
+            type: {
+                summary: string;
+            };
+        };
+        actionTextColor: {
+            options: unknown[];
+            name: string;
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        secondaryActionText: {
+            name: string;
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        secondaryActionTextColor: {
+            options: unknown[];
+            name: string;
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        onSecondaryAction: {
+            name: string;
+            description: string;
+            type: {
+                summary: string;
+            };
+        };
+        semantic: {
+            options: unknown[];
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: "neutral";
+                };
+            };
+        };
+        onCloseClick: {
+            name: string;
+            action: string;
+            description: string;
+            type: {
+                summary: string;
+            };
+        };
+        dismissable: {
+            description: string;
+            name: string;
+            options: boolean[];
+            control: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+        };
+        selfDismiss: {
+            description: string;
+            name: string;
+            options: boolean[];
+            control: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+        };
+        inline: {
+            description: string;
+            name: string;
+            options: boolean[];
+            control: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+        };
+        leftIconName: {
+            name: string;
+            control: {
+                type: string;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        leftIconType: {
+            description: string;
+            options: string[];
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        children: {
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        classNames: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    parameters: {
+        docs: {
+            subtitle: string;
+            description: {
+                component: string;
+            };
+        };
+        storySource: {
+            componentPath: string;
+        };
+    };
+};
+export default _default;
+export declare const _Default: {
+    (args: InContextAlertWithMultipleActionsProps): React.JSX.Element;
+    args: {
+        children: string;
+        semantic: string;
+        leftIconName: string;
+    };
+};
+export declare const _Dismissable: {
+    (args: InContextAlertWithMultipleActionsProps): React.JSX.Element;
+    args: {
+        children: string;
+        semantic: string;
+        dismissable: boolean;
+        selfDismiss: boolean;
+        leftIconName: string;
+    };
+};
+export declare const _Actionable: {
+    (args: InContextAlertWithMultipleActionsProps): React.JSX.Element;
+    args: {
+        children: string;
+        semantic: string;
+        actionText: string;
+    };
+};
+export declare const _SecondaryAction: {
+    (args: InContextAlertWithMultipleActionsProps): React.JSX.Element;
+    args: {
+        children: string;
+        semantic: string;
+        actionText: string;
+        dismissable: boolean;
+        secondaryActionText: string;
+    };
+};
+export declare const _SecondaryWithWrapAction: {
+    (args: InContextAlertWithMultipleActionsProps): React.JSX.Element;
+    args: {
+        children: string;
+        semantic: string;
+        actionText: string;
+        dismissable: boolean;
+        secondaryActionText: string;
+    };
+};
+//# sourceMappingURL=InContextAlertWithMultipleActions.stories.d.ts.map

package/lib/components/InContextAlertWithMultipleActions/InContextAlertWithMultipleActions.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InContextAlertWithMultipleActions.stories.d.ts","sourceRoot":"","sources":["../../../src/components/InContextAlertWithMultipleActions/InContextAlertWithMultipleActions.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAC,sCAAsC,EAAC,MAAM,qCAAqC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAShG,wBAyKE;AAEF,eAAO,MAAM,QAAQ;WAAU,sCAAsC;;;;;;CAIpE,CAAC;AASF,eAAO,MAAM,YAAY;WAAU,sCAAsC;;;;;;;;CAIxE,CAAC;AAWF,eAAO,MAAM,WAAW;WAAU,sCAAsC;;;;;;CAIvE,CAAC;AAQF,eAAO,MAAM,gBAAgB;WACrB,sCAAsC;;;;;;;;CAK7C,CAAC;AAUF,eAAO,MAAM,wBAAwB;WAC7B,sCAAsC;;;;;;;;CAK7C,CAAC"}

package/lib/components/InContextAlertWithMultipleActions/index.d.ts

@@ -0,0 +1,2 @@
+export * from './InContextAlertWithMultipleActions';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/InContextAlertWithMultipleActions/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/InContextAlertWithMultipleActions/index.ts"],"names":[],"mappings":"AAAA,cAAc,qCAAqC,CAAC"}

package/lib/components/InContextAlertWithMultipleActions/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _InContextAlertWithMultipleActions = require("./InContextAlertWithMultipleActions");
+Object.keys(_InContextAlertWithMultipleActions).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _InContextAlertWithMultipleActions[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _InContextAlertWithMultipleActions[key];
+    }
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "Sense UI components library",
   "author": {
     "name": "Spaced Out"