@synerise/ds-confirmation 1.2.10 → 1.2.12

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.12](https://github.com/Synerise/synerise-design/compare/@synerise/ds-confirmation@1.2.11...@synerise/ds-confirmation@1.2.12) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-confirmation
+
+## [1.2.11](https://github.com/Synerise/synerise-design/compare/@synerise/ds-confirmation@1.2.10...@synerise/ds-confirmation@1.2.11) (2026-03-20)
+
+### Bug Fixes
+
+- panel regressions ([c88aad5](https://github.com/Synerise/synerise-design/commit/c88aad5c4584a172c41c50dd8d64e5f86784de65))
+
 ## [1.2.10](https://github.com/Synerise/synerise-design/compare/@synerise/ds-confirmation@1.2.9...@synerise/ds-confirmation@1.2.10) (2026-03-09)
 
 **Note:** Version bump only for package @synerise/ds-confirmation

package/README.md

@@ -33,7 +33,7 @@ import Confirmation from '@synerise/ds-confirmation'
 | icon                 | icon to display above title                                                                                                                     | Preferably Xl size icon from ds-icons ReactNode    | -       |
 | title                | confirmation title                                                                                                                              | ReactNode                                          | -       |
 | description          | confirmation details                                                                                                                            | ReactNode                                          | -       |
-| texts                | custom translations                                                                                                                             | ReactNode                                          | -       |
+| texts                | custom translations                                                                                                                             | `Partial<ConfirmationTexts>`                       | -       |
 | type                 | action type - this defines the button (and icon if negative) color                                                                              | `success` / `warning` / `negative` / `informative` | -       |
 | mainButtonProps      | additional button customisation props                                                                                                           | subset of ButtonProps see ds-button                | -       |
 | secondaryButtonProps | additional button customisation props                                                                                                           | subset of ButtonProps see ds-button                | -       |
@@ -41,6 +41,7 @@ import Confirmation from '@synerise/ds-confirmation'
 | batchActionItems     | renders a list of items that are affected                                                                                                       | ListItemProps[]                                    | -       |
 | decisionOptions      | renders a group of radio buttons to choose from                                                                                                 | RadioProps[]                                       | -       |
 | additionalInfo       | extra description to render within a bordered frame                                                                                             | ReactNode                                          | -       |
+| customFooterComponent| additional custom footer component like custom actions                                                                                          | ReactNode                                          | -       |
 
 ### Prompt
 
@@ -48,7 +49,7 @@ import Confirmation from '@synerise/ds-confirmation'
 | -------------------- | ------------------------------------------- | -------------------------------------------------- | ------- |
 | title                | prompt title                                | ReactNode                                          | -       |
 | content              | prompt content                              | ReactNode                                          | -       |
-| texts                | custom translations                         | ReactNode                                          | -       |
+| texts                | custom translations                         | `Partial<ConfirmationTexts>`                       | -       |
 | type                 | action type - this defines the button color | `success` / `warning` / `negative` / `informative` | -       |
 | mainButtonProps      | additional button customisation props       | subset of ButtonProps see ds-button                | -       |
 | secondaryButtonProps | additional button customisation props       | subset of ButtonProps see ds-button                | -       |
@@ -60,6 +61,6 @@ import Confirmation from '@synerise/ds-confirmation'
 | mainButtonLabel           |             | ReactNode | `Ok`                      |
 | secondaryButtonLabel      |             | ReactNode | `Cancel`                  |
 | relatedObjectsButtonLabel |             | ReactNode | `Show related objects`    |
-| relatedObjectsTitle       |             | ReactNode | `Objects to delete`       |
-| batchActionItemsTitle     |             | ReactNode | `What do you want to do?` |
-| decisionTitle             |             | ReactNode | `Related objects`         |
+| relatedObjectsTitle       |             | ReactNode | `Related objects`         |
+| batchActionItemsTitle     |             | ReactNode | `Objects to delete`       |
+| decisionTitle             |             | ReactNode | `What do you want to do?` |

package/dist/Confirmation.const.d.ts

@@ -1,4 +1,4 @@
-import type { ConfirmationType } from './Confirmation.types';
+import { ConfirmationType } from './Confirmation.types';
 export declare const BUTTON_COLOR_MAPPING: Record<ConfirmationType, string>;
 export declare const ICON_COLOR_MAPPING: Record<ConfirmationType, string>;
 export declare const ITEM_SIZE = 32;

package/dist/Confirmation.const.js

@@ -1,14 +1,20 @@
-export var BUTTON_COLOR_MAPPING = {
-  negative: 'red',
-  success: 'green',
-  warning: 'yellow',
-  informative: 'blue'
+const BUTTON_COLOR_MAPPING = {
+  negative: "red",
+  success: "green",
+  warning: "yellow",
+  informative: "blue"
 };
-export var ICON_COLOR_MAPPING = {
-  negative: 'red-600',
-  success: 'green-600',
-  warning: 'yellow-600',
-  informative: 'grey-600'
+const ICON_COLOR_MAPPING = {
+  negative: "red-600",
+  success: "green-600",
+  warning: "yellow-600",
+  informative: "grey-600"
+};
+const ITEM_SIZE = 32;
+const MAX_ITEMS = 6;
+export {
+  BUTTON_COLOR_MAPPING,
+  ICON_COLOR_MAPPING,
+  ITEM_SIZE,
+  MAX_ITEMS
 };
-export var ITEM_SIZE = 32;
-export var MAX_ITEMS = 6;

package/dist/Confirmation.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import type { ListItemProps } from '@synerise/ds-list-item';
-import type { ConfirmationProps } from './Confirmation.types';
+import { default as React } from 'react';
+import { ListItemProps } from '@synerise/ds-list-item';
+import { ConfirmationProps } from './Confirmation.types';
 declare const Confirmation: <ItemType extends ListItemProps>({ type, texts, title, description, onCancel, onOk, icon, batchActionItems, decisionOptions, relatedObjects, additionalInfo, secondaryButtonProps, mainButtonProps, customFooterComponent, ...modalProps }: ConfirmationProps<ItemType>) => React.JSX.Element;
 export default Confirmation;

package/dist/Confirmation.js

@@ -1,94 +1,76 @@
-var _excluded = ["type", "texts", "title", "description", "onCancel", "onOk", "icon", "batchActionItems", "decisionOptions", "relatedObjects", "additionalInfo", "secondaryButtonProps", "mainButtonProps", "customFooterComponent"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { useMemo, useState } from 'react';
-import Button from '@synerise/ds-button';
-import { useTheme } from '@synerise/ds-core';
-import Icon, { ArrowLeftM, ShowM } from '@synerise/ds-icon';
-import Modal from '@synerise/ds-modal';
-import { Paragraph } from '@synerise/ds-typography';
-import { BUTTON_COLOR_MAPPING } from './Confirmation.const';
-import * as S from './Confirmation.styles';
-import { getIconColor } from './Confirmation.utils';
-import { BatchItemsList } from './components/BatchItemsList';
-import { DecisionSection } from './components/DecisionSection';
-import { useDefaultTexts } from './hooks/useDefaultTexts';
-var Confirmation = function Confirmation(_ref) {
-  var type = _ref.type,
-    texts = _ref.texts,
-    title = _ref.title,
-    description = _ref.description,
-    onCancel = _ref.onCancel,
-    onOk = _ref.onOk,
-    icon = _ref.icon,
-    batchActionItems = _ref.batchActionItems,
-    decisionOptions = _ref.decisionOptions,
-    relatedObjects = _ref.relatedObjects,
-    additionalInfo = _ref.additionalInfo,
-    secondaryButtonProps = _ref.secondaryButtonProps,
-    mainButtonProps = _ref.mainButtonProps,
-    customFooterComponent = _ref.customFooterComponent,
-    modalProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var _useState = useState('default'),
-    mode = _useState[0],
-    setMode = _useState[1];
-  var theme = useTheme();
-  var allTexts = useDefaultTexts(texts);
-  var buttonColor = BUTTON_COLOR_MAPPING[type];
-  var iconColor = getIconColor(type, theme);
-  var modalContent = useMemo(function () {
-    if (mode === 'default') {
-      return /*#__PURE__*/React.createElement(S.ConfirmationModalContent, null, /*#__PURE__*/React.createElement(S.ConfirmationModalContentMain, null, /*#__PURE__*/React.createElement(Icon, {
-        component: icon,
-        size: 96,
-        color: iconColor
-      }), /*#__PURE__*/React.createElement(S.Title, {
-        level: 3
-      }, title), /*#__PURE__*/React.createElement(Paragraph, {
-        size: "small"
-      }, description)), additionalInfo && /*#__PURE__*/React.createElement(S.AdditionalInfo, null, additionalInfo), (batchActionItems == null ? void 0 : batchActionItems.length) && /*#__PURE__*/React.createElement(BatchItemsList, {
-        items: batchActionItems,
-        title: allTexts.batchActionItemsTitle
-      }), (decisionOptions == null ? void 0 : decisionOptions.length) && /*#__PURE__*/React.createElement(DecisionSection, {
-        options: decisionOptions,
-        title: allTexts.decisionTitle
-      }));
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
+import Button from "@synerise/ds-button";
+import { useTheme } from "@synerise/ds-core";
+import Icon, { ShowM, ArrowLeftM } from "@synerise/ds-icon";
+import Modal from "@synerise/ds-modal";
+import Panel from "@synerise/ds-panel";
+import { Paragraph } from "@synerise/ds-typography";
+import { BUTTON_COLOR_MAPPING } from "./Confirmation.const.js";
+import { ConfirmationModalContent, ConfirmationModalContentMain, Title, Footer, FooterLeft, FooterRight, ModalBackTitle } from "./Confirmation.styles.js";
+import { getIconColor } from "./Confirmation.utils.js";
+import { BatchItemsList } from "./components/BatchItemsList.js";
+import { DecisionSection } from "./components/DecisionSection.js";
+import { useDefaultTexts } from "./hooks/useDefaultTexts.js";
+const Confirmation = ({
+  type,
+  texts,
+  title,
+  description,
+  onCancel,
+  onOk,
+  icon,
+  batchActionItems,
+  decisionOptions,
+  relatedObjects,
+  additionalInfo,
+  secondaryButtonProps,
+  mainButtonProps,
+  customFooterComponent,
+  ...modalProps
+}) => {
+  const [mode, setMode] = useState("default");
+  const theme = useTheme();
+  const allTexts = useDefaultTexts(texts);
+  const buttonColor = BUTTON_COLOR_MAPPING[type];
+  const iconColor = getIconColor(type, theme);
+  const modalContent = useMemo(() => {
+    if (mode === "default") {
+      return /* @__PURE__ */ jsxs(ConfirmationModalContent, { children: [
+        /* @__PURE__ */ jsxs(ConfirmationModalContentMain, { children: [
+          /* @__PURE__ */ jsx(Icon, { component: icon, size: 96, color: iconColor }),
+          /* @__PURE__ */ jsx(Title, { level: 3, children: title }),
+          /* @__PURE__ */ jsx(Paragraph, { size: "small", children: description })
+        ] }),
+        additionalInfo && /* @__PURE__ */ jsx(Panel, { p: "8px 18px", children: additionalInfo }),
+        batchActionItems?.length && /* @__PURE__ */ jsx(BatchItemsList, { items: batchActionItems, title: allTexts.batchActionItemsTitle }),
+        decisionOptions?.length && /* @__PURE__ */ jsx(DecisionSection, { options: decisionOptions, title: allTexts.decisionTitle })
+      ] });
     }
     return relatedObjects;
   }, [relatedObjects, mode, icon, iconColor, additionalInfo, title, description, batchActionItems, decisionOptions, allTexts.batchActionItemsTitle, allTexts.decisionTitle]);
-  var modalFooter = useMemo(function () {
-    return mode === 'default' && (relatedObjects || onOk || onCancel) ? /*#__PURE__*/React.createElement(S.Footer, null, relatedObjects && /*#__PURE__*/React.createElement(S.FooterLeft, null, /*#__PURE__*/React.createElement(Button, {
-      onClick: function onClick() {
-        return setMode('related-objects');
-      },
-      type: "ghost",
-      mode: "icon-label"
-    }, /*#__PURE__*/React.createElement(Icon, {
-      component: /*#__PURE__*/React.createElement(ShowM, null)
-    }), ' ', allTexts.relatedObjectsButtonLabel)), customFooterComponent && /*#__PURE__*/React.createElement(S.FooterLeft, null, customFooterComponent), (onOk || onCancel) && /*#__PURE__*/React.createElement(S.FooterRight, null, onCancel && /*#__PURE__*/React.createElement(Button, _extends({
-      type: "secondary",
-      onClick: onCancel
-    }, secondaryButtonProps), allTexts.secondaryButtonLabel), onOk && /*#__PURE__*/React.createElement(Button, _extends({
-      type: "custom-color",
-      onClick: onOk,
-      color: buttonColor
-    }, mainButtonProps), allTexts.mainButtonLabel))) : null;
+  const modalFooter = useMemo(() => {
+    return mode === "default" && (relatedObjects || onOk || onCancel) ? /* @__PURE__ */ jsxs(Footer, { children: [
+      relatedObjects && /* @__PURE__ */ jsx(FooterLeft, { children: /* @__PURE__ */ jsxs(Button, { onClick: () => setMode("related-objects"), type: "ghost", mode: "icon-label", children: [
+        /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(ShowM, {}) }),
+        " ",
+        allTexts.relatedObjectsButtonLabel
+      ] }) }),
+      customFooterComponent && /* @__PURE__ */ jsx(FooterLeft, { children: customFooterComponent }),
+      (onOk || onCancel) && /* @__PURE__ */ jsxs(FooterRight, { children: [
+        onCancel && /* @__PURE__ */ jsx(Button, { type: "secondary", onClick: onCancel, ...secondaryButtonProps, children: allTexts.secondaryButtonLabel }),
+        onOk && /* @__PURE__ */ jsx(Button, { type: "custom-color", onClick: onOk, color: buttonColor, ...mainButtonProps, children: allTexts.mainButtonLabel })
+      ] })
+    ] }) : null;
   }, [mode, onOk, onCancel, buttonColor, mainButtonProps, relatedObjects, secondaryButtonProps, allTexts.secondaryButtonLabel, allTexts.mainButtonLabel, allTexts.relatedObjectsButtonLabel]);
-  var modalTitle = mode === 'related-objects' ? /*#__PURE__*/React.createElement(S.ModalBackTitle, null, /*#__PURE__*/React.createElement(Icon, {
-    onClick: function onClick() {
-      return setMode('default');
-    },
-    component: /*#__PURE__*/React.createElement(ArrowLeftM, null)
-  }), allTexts.relatedObjectsTitle) : undefined;
-  return /*#__PURE__*/React.createElement(Modal, _extends({}, modalProps, {
-    onCancel: onCancel,
-    size: "small",
-    blank: mode === 'default',
-    footer: modalFooter,
-    bodyStyle: {
-      padding: 0
-    },
-    title: modalTitle
-  }), modalContent);
+  const modalTitle = mode === "related-objects" ? /* @__PURE__ */ jsxs(ModalBackTitle, { children: [
+    /* @__PURE__ */ jsx(Icon, { onClick: () => setMode("default"), component: /* @__PURE__ */ jsx(ArrowLeftM, {}) }),
+    allTexts.relatedObjectsTitle
+  ] }) : void 0;
+  return /* @__PURE__ */ jsx(Modal, { ...modalProps, onCancel, size: "small", blank: mode === "default", footer: modalFooter, bodyStyle: {
+    padding: 0
+  }, title: modalTitle, children: modalContent });
+};
+export {
+  Confirmation as default
 };
-export default Confirmation;

package/dist/Confirmation.styles.d.ts

@@ -1,13 +1,11 @@
-export declare const ConfirmationModalContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const PromptContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ConfirmationModalContentMain: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Title: import("styled-components").StyledComponent<({ level, withoutMargin, children, className, ellipsis, ...antdProps }: import("@synerise/ds-typography/dist/Title.types").Props) => React.JSX.Element, any, {}, never>;
-export declare const FooterRight: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const FooterLeft: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Footer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ConfirmationExtra: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ConfirmationExtraTitle: import("styled-components").StyledComponent<({ level, withoutMargin, children, className, ellipsis, ...antdProps }: import("@synerise/ds-typography/dist/Title.types").Props) => React.JSX.Element, any, {}, never>;
-export declare const BatchItemsList: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<(import("@synerise/ds-scrollbar").ScrollbarProps | import("@synerise/ds-scrollbar").VirtualScrollbarProps) & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
-export declare const AdditionalInfo: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("@synerise/ds-panel").PanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-export declare const DecisionOptions: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("@synerise/ds-panel").PanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-export declare const ModalBackTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ConfirmationModalContent: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const PromptContent: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ConfirmationModalContentMain: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Title: import('styled-components').StyledComponent<({ level, withoutMargin, children, className, ellipsis, ...antdProps }: import('@synerise/ds-typography/dist/Title.types').Props) => React.JSX.Element, any, {}, never>;
+export declare const FooterRight: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const FooterLeft: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Footer: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ConfirmationExtra: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const BatchItemsList: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<(import('@synerise/ds-scrollbar').ScrollbarProps | import('@synerise/ds-scrollbar').VirtualScrollbarProps) & import('react').RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const DecisionOptions: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<Omit<import('@synerise/ds-panel').PanelProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const ModalBackTitle: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/Confirmation.styles.js

@@ -1,59 +1,63 @@
-import styled, { css } from 'styled-components';
-import Panel from '@synerise/ds-panel';
-import { AdditionalData, RadioWrapper } from '@synerise/ds-radio/dist/Radio.styles';
-import Scrollbar from '@synerise/ds-scrollbar';
-import { Title as TypographyTitle } from '@synerise/ds-typography';
-var sectionTitleCSS = css(["margin-bottom:8px;"]);
-var modalContentCSS = css(["padding:36px 48px 48px;"]);
-export var ConfirmationModalContent = styled.div.withConfig({
+import styled, { css } from "styled-components";
+import Panel from "@synerise/ds-panel";
+import { RadioWrapper, AdditionalData } from "@synerise/ds-radio/dist/Radio.styles";
+import Scrollbar from "@synerise/ds-scrollbar";
+import { Title as Title$1 } from "@synerise/ds-typography";
+const modalContentCSS = /* @__PURE__ */ css(["padding:36px 48px 48px;"]);
+const ConfirmationModalContent = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Confirmationstyles__ConfirmationModalContent",
   componentId: "sc-17izghl-0"
 })(["display:flex;flex-direction:column;align-items:stretch;", " gap:24px;"], modalContentCSS);
-export var PromptContent = styled.div.withConfig({
+const PromptContent = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Confirmationstyles__PromptContent",
   componentId: "sc-17izghl-1"
 })(["", ""], modalContentCSS);
-export var ConfirmationModalContentMain = styled.div.withConfig({
+const ConfirmationModalContentMain = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Confirmationstyles__ConfirmationModalContentMain",
   componentId: "sc-17izghl-2"
 })(["display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;"]);
-export var Title = styled(TypographyTitle).withConfig({
+const Title = /* @__PURE__ */ styled(Title$1).withConfig({
   displayName: "Confirmationstyles__Title",
   componentId: "sc-17izghl-3"
 })(["margin:0;"]);
-export var FooterRight = styled.div.withConfig({
+const FooterRight = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Confirmationstyles__FooterRight",
   componentId: "sc-17izghl-4"
 })(["flex:1 1 auto;"]);
-export var FooterLeft = styled.div.withConfig({
+const FooterLeft = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Confirmationstyles__FooterLeft",
   componentId: "sc-17izghl-5"
 })(["flex:1 1 auto;text-align:left;"]);
-export var Footer = styled.div.withConfig({
+const Footer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Confirmationstyles__Footer",
   componentId: "sc-17izghl-6"
 })(["display:flex;justify-content:space-between;"]);
-export var ConfirmationExtra = styled.div.withConfig({
+const ConfirmationExtra = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Confirmationstyles__ConfirmationExtra",
   componentId: "sc-17izghl-7"
 })([""]);
-export var ConfirmationExtraTitle = styled(TypographyTitle).withConfig({
-  displayName: "Confirmationstyles__ConfirmationExtraTitle",
-  componentId: "sc-17izghl-8"
-})(["", ""], sectionTitleCSS);
-export var BatchItemsList = styled(Scrollbar).withConfig({
+const BatchItemsList = /* @__PURE__ */ styled(Scrollbar).withConfig({
   displayName: "Confirmationstyles__BatchItemsList",
-  componentId: "sc-17izghl-9"
+  componentId: "sc-17izghl-8"
 })([""]);
-export var AdditionalInfo = styled(Panel).withConfig({
-  displayName: "Confirmationstyles__AdditionalInfo",
-  componentId: "sc-17izghl-10"
-})(["padding:8px 18px;"]);
-export var DecisionOptions = styled(Panel).withConfig({
+const DecisionOptions = /* @__PURE__ */ styled(Panel).withConfig({
   displayName: "Confirmationstyles__DecisionOptions",
-  componentId: "sc-17izghl-11"
-})(["", "{padding:7px 0;margin-bottom:0;}", ":empty{display:none;}padding:8px 18px;"], RadioWrapper, AdditionalData);
-export var ModalBackTitle = styled.div.withConfig({
+  componentId: "sc-17izghl-9"
+})(["", "{padding:7px 0;margin-bottom:0;}", ":empty{display:none;}"], RadioWrapper, AdditionalData);
+const ModalBackTitle = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Confirmationstyles__ModalBackTitle",
-  componentId: "sc-17izghl-12"
-})(["display:flex;gap:12px;align-items:center;"]);
+  componentId: "sc-17izghl-10"
+})(["display:flex;gap:12px;align-items:center;"]);
+export {
+  BatchItemsList,
+  ConfirmationExtra,
+  ConfirmationModalContent,
+  ConfirmationModalContentMain,
+  DecisionOptions,
+  Footer,
+  FooterLeft,
+  FooterRight,
+  ModalBackTitle,
+  PromptContent,
+  Title
+};

package/dist/Confirmation.types.d.ts

@@ -1,9 +1,9 @@
-import type { ReactNode } from 'react';
-import type { ButtonProps } from '@synerise/ds-button';
-import type { ListItemProps } from '@synerise/ds-list-item';
-import type { ModalProps } from '@synerise/ds-modal';
-import type { RadioProps } from '@synerise/ds-radio';
-import type { DataAttributes } from '@synerise/ds-utils';
+import { ReactNode } from 'react';
+import { ButtonProps } from '@synerise/ds-button';
+import { ListItemProps } from '@synerise/ds-list-item';
+import { ModalProps } from '@synerise/ds-modal';
+import { RadioProps } from '@synerise/ds-radio';
+import { DataAttributes } from '@synerise/ds-utils';
 export type ConfirmationType = 'success' | 'warning' | 'negative' | 'informative';
 export type ConfirmationButtonProps = Pick<ButtonProps, 'mode' | 'loading' | 'readOnly' | 'disabled' | 'tagProps'> & DataAttributes;
 export type ConfirmationTexts = {

package/dist/Confirmation.types.js

@@ -1 +1 @@
-export {};
+

package/dist/Confirmation.utils.d.ts

@@ -1,3 +1,3 @@
-import { type ThemePropsVars } from '@synerise/ds-core';
-import { type ConfirmationType } from './Confirmation.types';
+import { ThemePropsVars } from '@synerise/ds-core';
+import { ConfirmationType } from './Confirmation.types';
 export declare const getIconColor: (type: ConfirmationType, theme: ThemePropsVars) => string;

package/dist/Confirmation.utils.js

@@ -1,5 +1,8 @@
-import { ICON_COLOR_MAPPING } from './Confirmation.const';
-export var getIconColor = function getIconColor(type, theme) {
-  var colorToken = ICON_COLOR_MAPPING[type];
+import { ICON_COLOR_MAPPING } from "./Confirmation.const.js";
+const getIconColor = (type, theme) => {
+  const colorToken = ICON_COLOR_MAPPING[type];
   return theme.palette[colorToken];
-};
+};
+export {
+  getIconColor
+};

package/dist/components/BatchItemsList.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type ListItemProps } from '@synerise/ds-list-item';
-import type { BatchItemsListProps } from '../Confirmation.types';
+import { default as React } from 'react';
+import { ListItemProps } from '@synerise/ds-list-item';
+import { BatchItemsListProps } from '../Confirmation.types';
 export declare const BatchItemsList: <ItemType extends ListItemProps>({ items, title, }: BatchItemsListProps<ItemType>) => React.JSX.Element;

package/dist/components/BatchItemsList.js

@@ -1,20 +1,14 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React from 'react';
-import ListItem from '@synerise/ds-list-item';
-import Panel from '@synerise/ds-panel';
-import { ITEM_SIZE, MAX_ITEMS } from '../Confirmation.const';
-import * as S from '../Confirmation.styles';
-export var BatchItemsList = function BatchItemsList(_ref) {
-  var items = _ref.items,
-    title = _ref.title;
-  return /*#__PURE__*/React.createElement(S.ConfirmationExtra, null, /*#__PURE__*/React.createElement(S.ConfirmationExtraTitle, {
-    level: 6
-  }, title), /*#__PURE__*/React.createElement(Panel, null, /*#__PURE__*/React.createElement(S.BatchItemsList, {
-    maxHeight: ITEM_SIZE * MAX_ITEMS,
-    absolute: true
-  }, items.map(function (item) {
-    return /*#__PURE__*/React.createElement(ListItem, _extends({
-      key: item.id
-    }, item));
-  }))));
-};
+import { jsx } from "react/jsx-runtime";
+import ListItem, { ListContextProvider } from "@synerise/ds-list-item";
+import Panel from "@synerise/ds-panel";
+import { ITEM_SIZE, MAX_ITEMS } from "../Confirmation.const.js";
+import { ConfirmationExtra, BatchItemsList as BatchItemsList$1 } from "../Confirmation.styles.js";
+const BatchItemsList = ({
+  items,
+  title
+}) => {
+  return /* @__PURE__ */ jsx(ConfirmationExtra, { children: /* @__PURE__ */ jsx(Panel, { label: title, children: /* @__PURE__ */ jsx(ListContextProvider, { children: /* @__PURE__ */ jsx(BatchItemsList$1, { maxHeight: ITEM_SIZE * MAX_ITEMS, absolute: true, children: items.map((item) => /* @__PURE__ */ jsx(ListItem, { ...item }, item.id)) }) }) }) });
+};
+export {
+  BatchItemsList
+};

package/dist/components/DecisionSection.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
-import type { DecisionSectionProps } from '../Confirmation.types';
+import { default as React } from 'react';
+import { DecisionSectionProps } from '../Confirmation.types';
 export declare const DecisionSection: ({ options, title }: DecisionSectionProps) => React.JSX.Element;

package/dist/components/DecisionSection.js

@@ -1,15 +1,12 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React from 'react';
-import Radio from '@synerise/ds-radio';
-import * as S from '../Confirmation.styles';
-export var DecisionSection = function DecisionSection(_ref) {
-  var options = _ref.options,
-    title = _ref.title;
-  return /*#__PURE__*/React.createElement(S.ConfirmationExtra, null, /*#__PURE__*/React.createElement(S.ConfirmationExtraTitle, {
-    level: 6
-  }, title), /*#__PURE__*/React.createElement(S.DecisionOptions, null, /*#__PURE__*/React.createElement(Radio.Group, null, options.map(function (option) {
-    return /*#__PURE__*/React.createElement(Radio, _extends({
-      key: option.id
-    }, option));
-  }))));
-};
+import { jsx } from "react/jsx-runtime";
+import Radio from "@synerise/ds-radio";
+import { ConfirmationExtra, DecisionOptions } from "../Confirmation.styles.js";
+const DecisionSection = ({
+  options,
+  title
+}) => {
+  return /* @__PURE__ */ jsx(ConfirmationExtra, { children: /* @__PURE__ */ jsx(DecisionOptions, { p: "8px 18px", label: title, children: /* @__PURE__ */ jsx(Radio.Group, { children: options.map((option) => /* @__PURE__ */ jsx(Radio, { ...option }, option.id)) }) }) });
+};
+export {
+  DecisionSection
+};

package/dist/components/Prompt.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
-import type { PromptProps } from '../Confirmation.types';
+import { default as React } from 'react';
+import { PromptProps } from '../Confirmation.types';
 export declare const Prompt: ({ type, texts, onCancel, onOk, mainButtonProps, secondaryButtonProps, content, ...modalProps }: PromptProps) => React.JSX.Element;

package/dist/components/Prompt.js

@@ -1,39 +1,32 @@
-var _excluded = ["type", "texts", "onCancel", "onOk", "mainButtonProps", "secondaryButtonProps", "content"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { useMemo } from 'react';
-import Button from '@synerise/ds-button';
-import Modal from '@synerise/ds-modal';
-import { BUTTON_COLOR_MAPPING } from '../Confirmation.const';
-import * as S from '../Confirmation.styles';
-import { useDefaultTexts } from '../hooks/useDefaultTexts';
-export var Prompt = function Prompt(_ref) {
-  var type = _ref.type,
-    texts = _ref.texts,
-    onCancel = _ref.onCancel,
-    onOk = _ref.onOk,
-    mainButtonProps = _ref.mainButtonProps,
-    secondaryButtonProps = _ref.secondaryButtonProps,
-    content = _ref.content,
-    modalProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var allTexts = useDefaultTexts(texts);
-  var buttonColor = BUTTON_COLOR_MAPPING[type];
-  var modalFooter = useMemo(function () {
-    return /*#__PURE__*/React.createElement(S.Footer, null, /*#__PURE__*/React.createElement(S.FooterRight, null, /*#__PURE__*/React.createElement(Button, _extends({
-      type: "secondary",
-      onClick: onCancel
-    }, secondaryButtonProps), allTexts.secondaryButtonLabel), /*#__PURE__*/React.createElement(Button, _extends({
-      type: "custom-color",
-      onClick: onOk,
-      color: buttonColor
-    }, mainButtonProps), allTexts.mainButtonLabel)));
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import Button from "@synerise/ds-button";
+import Modal from "@synerise/ds-modal";
+import { BUTTON_COLOR_MAPPING } from "../Confirmation.const.js";
+import { Footer, FooterRight, PromptContent } from "../Confirmation.styles.js";
+import { useDefaultTexts } from "../hooks/useDefaultTexts.js";
+const Prompt = ({
+  type,
+  texts,
+  onCancel,
+  onOk,
+  mainButtonProps,
+  secondaryButtonProps,
+  content,
+  ...modalProps
+}) => {
+  const allTexts = useDefaultTexts(texts);
+  const buttonColor = BUTTON_COLOR_MAPPING[type];
+  const modalFooter = useMemo(() => {
+    return /* @__PURE__ */ jsx(Footer, { children: /* @__PURE__ */ jsxs(FooterRight, { children: [
+      /* @__PURE__ */ jsx(Button, { type: "secondary", onClick: onCancel, ...secondaryButtonProps, children: allTexts.secondaryButtonLabel }),
+      /* @__PURE__ */ jsx(Button, { type: "custom-color", onClick: onOk, color: buttonColor, ...mainButtonProps, children: allTexts.mainButtonLabel })
+    ] }) });
   }, [buttonColor, onCancel, onOk, mainButtonProps, allTexts.mainButtonLabel, allTexts.secondaryButtonLabel, secondaryButtonProps]);
-  return /*#__PURE__*/React.createElement(Modal, _extends({}, modalProps, {
-    onCancel: onCancel,
-    size: "small",
-    footer: modalFooter,
-    bodyStyle: {
-      padding: 0
-    }
-  }), /*#__PURE__*/React.createElement(S.PromptContent, null, content));
-};
+  return /* @__PURE__ */ jsx(Modal, { ...modalProps, onCancel, size: "small", footer: modalFooter, bodyStyle: {
+    padding: 0
+  }, children: /* @__PURE__ */ jsx(PromptContent, { children: content }) });
+};
+export {
+  Prompt
+};

package/dist/hooks/useDefaultTexts.d.ts

@@ -1,2 +1,2 @@
-import { type ConfirmationTexts } from '../Confirmation.types';
+import { ConfirmationTexts } from '../Confirmation.types';
 export declare const useDefaultTexts: (defaultTexts?: Partial<ConfirmationTexts>) => ConfirmationTexts;

package/dist/hooks/useDefaultTexts.js

@@ -1,31 +1,16 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-export var useDefaultTexts = function useDefaultTexts(defaultTexts) {
-  return _extends({
-    mainButtonLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "DS.CONFIRMATION.MAIN-BUTTON-LABEL",
-      defaultMessage: "Ok"
-    }),
-    secondaryButtonLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "DS.CONFIRMATION.SECONDARY-BUTTON-LABEL",
-      defaultMessage: "Cancel"
-    }),
-    relatedObjectsButtonLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "DS.CONFIRMATION.RELATED-OBJECT-BUTTON-LABEL",
-      defaultMessage: "Show related objects"
-    }),
-    batchActionItemsTitle: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "DS.CONFIRMATION.BATCH-ACTIONS-ITEMS-TITLE",
-      defaultMessage: "Objects to delete"
-    }),
-    decisionTitle: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "DS.CONFIRMATION.DECISION-TITLE",
-      defaultMessage: "What do you want to do?"
-    }),
-    relatedObjectsTitle: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "DS.CONFIRMATION.RELATED-OBJECTS-TITLE",
-      defaultMessage: "Related objects"
-    })
-  }, defaultTexts || {});
-};
+import { jsx } from "react/jsx-runtime";
+import { FormattedMessage } from "react-intl";
+const useDefaultTexts = (defaultTexts) => {
+  return {
+    mainButtonLabel: /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.CONFIRMATION.MAIN-BUTTON-LABEL", defaultMessage: "Ok" }),
+    secondaryButtonLabel: /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.CONFIRMATION.SECONDARY-BUTTON-LABEL", defaultMessage: "Cancel" }),
+    relatedObjectsButtonLabel: /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.CONFIRMATION.RELATED-OBJECT-BUTTON-LABEL", defaultMessage: "Show related objects" }),
+    batchActionItemsTitle: /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.CONFIRMATION.BATCH-ACTIONS-ITEMS-TITLE", defaultMessage: "Objects to delete" }),
+    decisionTitle: /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.CONFIRMATION.DECISION-TITLE", defaultMessage: "What do you want to do?" }),
+    relatedObjectsTitle: /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.CONFIRMATION.RELATED-OBJECTS-TITLE", defaultMessage: "Related objects" }),
+    ...defaultTexts || {}
+  };
+};
+export {
+  useDefaultTexts
+};

package/dist/index.js

@@ -1,2 +1,6 @@
-export { default } from './Confirmation';
-export { Prompt } from './components/Prompt';
+import { default as default2 } from "./Confirmation.js";
+import { Prompt } from "./components/Prompt.js";
+export {
+  Prompt,
+  default2 as default
+};

package/dist/modules.d.js

@@ -1 +1 @@
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-confirmation",
-  "version": "1.2.10",
+  "version": "1.2.12",
   "description": "Confirmation UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -16,10 +16,10 @@
     "access": "public"
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:css && pnpm run defs",
+    "build": "vite build",
     "build:css": "node ../../../scripts/style/less.js",
     "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
-    "build:watch": "pnpm run build:js -- --watch",
+    "build:watch": "vite build --watch",
     "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
     "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
     "prepublish": "pnpm run build",
@@ -35,15 +35,15 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^1.5.16",
-    "@synerise/ds-icon": "^1.14.1",
-    "@synerise/ds-list-item": "^1.4.8",
-    "@synerise/ds-modal": "^1.3.9",
-    "@synerise/ds-panel": "^1.2.1",
-    "@synerise/ds-radio": "^1.1.1",
-    "@synerise/ds-scrollbar": "^1.2.15",
-    "@synerise/ds-typography": "^1.1.11",
-    "@synerise/ds-utils": "^1.6.0"
+    "@synerise/ds-button": "^1.5.18",
+    "@synerise/ds-icon": "^1.15.1",
+    "@synerise/ds-list-item": "^1.4.10",
+    "@synerise/ds-modal": "^1.4.1",
+    "@synerise/ds-panel": "^1.2.3",
+    "@synerise/ds-radio": "^1.1.3",
+    "@synerise/ds-scrollbar": "^1.2.17",
+    "@synerise/ds-typography": "^1.1.13",
+    "@synerise/ds-utils": "^1.7.1"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
@@ -51,5 +51,5 @@
     "react-intl": "^6.8.7",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "8dfafc5d7278f09d430f1e7499782d05c76b47c0"
+  "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
 }