@synerise/ds-confirmation 1.1.0

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 1.1.0 (2025-05-19)
+
+
+### Features
+
+* **confirmation:** new component ([5ed5b96](https://github.com/Synerise/synerise-design/commit/5ed5b96540e82576951221fdf5f26695c02171e7))

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Synerise
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,65 @@
+---
+id: confirmation
+title: Confirmation
+---
+
+Confirmation UI Component
+
+## Installation
+
+```
+npm i @synerise/ds-confirmation
+or
+yarn add @synerise/ds-confirmation
+```
+
+## Usage
+
+```
+import Confirmation from '@synerise/ds-confirmation'
+
+<Confirmation />
+
+```
+
+## Demo
+
+<iframe src="/storybook-static/iframe.html?id=components-confirmation--default"></iframe>
+
+## API
+
+| Property             | Description                                                                                                                                     | Type                                               | Default |
+| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- | ------- |
+| 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                                          | -       |
+| 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                | -       |
+| relatedObjects       | display objects that have relations to the object, renders a button in the footer that will switch confirmation modal content to this ReactNode | ReactNode                                          | -       |
+| 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                                          | -       |
+
+### Prompt
+
+| Property             | Description                                 | Type                                               | Default |
+| -------------------- | ------------------------------------------- | -------------------------------------------------- | ------- |
+| title                | prompt title                                | ReactNode                                          | -       |
+| content              | prompt content                              | ReactNode                                          | -       |
+| texts                | custom translations                         | ReactNode                                          | -       |
+| 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                | -       |
+
+### ConfirmationTexts
+
+| Property                  | Description | Type      | Default                   |
+| ------------------------- | ----------- | --------- | ------------------------- |
+| 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`         |

package/dist/Confirmation.const.d.ts

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

package/dist/Confirmation.const.js

@@ -0,0 +1,8 @@
+export var BUTTON_COLOR_MAPPING = {
+  negative: 'red',
+  success: 'green',
+  warning: 'yellow',
+  informative: 'blue'
+};
+export var ITEM_SIZE = 32;
+export var MAX_ITEMS = 6;

package/dist/Confirmation.d.ts

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

package/dist/Confirmation.js

@@ -0,0 +1,92 @@
+var _excluded = ["type", "texts", "title", "description", "onCancel", "onOk", "icon", "batchActionItems", "decisionOptions", "relatedObjects", "additionalInfo", "secondaryButtonProps", "mainButtonProps"];
+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 Modal from '@synerise/ds-modal';
+import { Paragraph } from '@synerise/ds-typography';
+import Icon, { ShowM, ArrowLeftM } from '@synerise/ds-icon';
+import Button from '@synerise/ds-button';
+import { useTheme } from '@synerise/ds-core';
+import * as S from './Confirmation.styles';
+import { useDefaultTexts } from './hooks/useDefaultTexts';
+import { BUTTON_COLOR_MAPPING } from './Confirmation.const';
+import { BatchItemsList } from './components/BatchItemsList';
+import { DecisionSection } from './components/DecisionSection';
+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,
+    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 = type === 'negative' ? theme.palette['red-600'] : theme.palette['grey-800'];
+  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
+      }));
+    }
+    return relatedObjects;
+  }, [relatedObjects, mode, icon, iconColor, additionalInfo, title, description, batchActionItems, decisionOptions, allTexts.batchActionItemsTitle, allTexts.decisionTitle]);
+  var modalFooter = useMemo(function () {
+    return mode === 'default' ? /*#__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)), /*#__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))) : null;
+  }, [mode, onOk, onCancel, buttonColor, mainButtonProps, relatedObjects, secondaryButtonProps, allTexts.secondaryButtonLabel, allTexts.mainButtonLabel, allTexts.relatedObjectsButtonLabel]);
+  var modalTitle = mode === 'related-objects' ? /*#__PURE__*/React.createElement(React.Fragment, 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);
+};
+export default Confirmation;

package/dist/Confirmation.styles.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+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) => import("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) => import("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<"div", any, {}, never>;
+export declare const DecisionOptions: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Confirmation.styles.js

@@ -0,0 +1,57 @@
+import styled, { css } from 'styled-components';
+import { Title as TypographyTitle } from '@synerise/ds-typography';
+import Scrollbar from '@synerise/ds-scrollbar';
+import { RadioWrapper, AdditionalData } from '@synerise/ds-radio/dist/Radio.styles';
+var roundedWrapperCSS = css(["border:solid ", " 1px;border-radius:8px;padding:8px;"], function (props) {
+  return props.theme.palette['grey-200'];
+});
+var sectionTitleCSS = css(["margin-bottom:8px;"]);
+var modalContentCSS = css(["padding:36px 48px 48px;"]);
+export var ConfirmationModalContent = 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({
+  displayName: "Confirmationstyles__PromptContent",
+  componentId: "sc-17izghl-1"
+})(["", ""], modalContentCSS);
+export var ConfirmationModalContentMain = styled.div.withConfig({
+  displayName: "Confirmationstyles__ConfirmationModalContentMain",
+  componentId: "sc-17izghl-2"
+})(["display:flex;flex-direction:column;align-items:center;gap:12px;"]);
+export var Title = styled(TypographyTitle).withConfig({
+  displayName: "Confirmationstyles__Title",
+  componentId: "sc-17izghl-3"
+})(["margin:0;"]);
+export var FooterRight = styled.div.withConfig({
+  displayName: "Confirmationstyles__FooterRight",
+  componentId: "sc-17izghl-4"
+})(["flex:1 1 auto;"]);
+export var FooterLeft = styled.div.withConfig({
+  displayName: "Confirmationstyles__FooterLeft",
+  componentId: "sc-17izghl-5"
+})(["flex:1 1 auto;text-align:left;"]);
+export var Footer = styled.div.withConfig({
+  displayName: "Confirmationstyles__Footer",
+  componentId: "sc-17izghl-6"
+})(["display:flex;justify-content:space-between;"]);
+export var ConfirmationExtra = 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({
+  displayName: "Confirmationstyles__BatchItemsList",
+  componentId: "sc-17izghl-9"
+})(["", ""], roundedWrapperCSS);
+export var AdditionalInfo = styled.div.withConfig({
+  displayName: "Confirmationstyles__AdditionalInfo",
+  componentId: "sc-17izghl-10"
+})(["", ""], roundedWrapperCSS);
+export var DecisionOptions = styled.div.withConfig({
+  displayName: "Confirmationstyles__DecisionOptions",
+  componentId: "sc-17izghl-11"
+})(["", ":last-of-type{margin-bottom:0;}", ":empty{display:none;}", ""], RadioWrapper, AdditionalData, roundedWrapperCSS);

package/dist/Confirmation.types.d.ts

@@ -0,0 +1,64 @@
+import type { ReactNode } from 'react';
+import type { ButtonProps } from '@synerise/ds-button';
+import type { ListItemProps } from '@synerise/ds-list-item';
+import type { RadioProps } from '@synerise/ds-radio';
+import type { ModalProps } from '@synerise/ds-modal';
+import type { 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 = {
+    mainButtonLabel: ReactNode;
+    secondaryButtonLabel: ReactNode;
+    relatedObjectsButtonLabel: ReactNode;
+    relatedObjectsTitle: ReactNode;
+    batchActionItemsTitle: ReactNode;
+    decisionTitle: ReactNode;
+};
+export type RelatedObjectsModalProps = {
+    goBack: () => void;
+    content: ReactNode;
+    title: ReactNode;
+};
+export type BatchItemsListProps<ItemType extends ListItemProps> = {
+    items: ItemType[];
+    title: ReactNode;
+};
+export type DecisionSectionProps = {
+    options: RadioProps[];
+    title: ReactNode;
+};
+export type DisplayMode = 'default' | 'related-objects';
+type SharedProps = Pick<ModalProps, 'open' | 'title' | 'zIndex' | 'onCancel' | 'onOk'> & {
+    title: ReactNode;
+    texts?: Partial<ConfirmationTexts>;
+    /**
+     * Defines button & icon colors
+     */
+    type: ConfirmationType;
+    mainButtonProps?: ConfirmationButtonProps;
+    secondaryButtonProps?: ConfirmationButtonProps;
+};
+export type ConfirmationProps<ItemType extends ListItemProps> = SharedProps & {
+    description?: ReactNode;
+    icon: ReactNode;
+    /**
+     * Renders a link in footer to show table with related objects affected by the action
+     */
+    relatedObjects?: ReactNode;
+    /**
+     * Renders list of items that are affected by the action (batch actions confirmation)
+     */
+    batchActionItems?: BatchItemsListProps<ItemType>['items'];
+    /**
+     * Renders list of action options as a radio selection
+     */
+    decisionOptions?: DecisionSectionProps['options'];
+    /**
+     * Additional info displayed below description in a rounded frame
+     */
+    additionalInfo?: ReactNode;
+};
+export type PromptProps = SharedProps & {
+    content?: ReactNode;
+};
+export {};

package/dist/Confirmation.types.js

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

package/dist/components/BatchItemsList.d.ts

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

package/dist/components/BatchItemsList.js

@@ -0,0 +1,19 @@
+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 * as S from '../Confirmation.styles';
+import { ITEM_SIZE, MAX_ITEMS } from '../Confirmation.const';
+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(S.BatchItemsList, {
+    maxHeight: ITEM_SIZE * MAX_ITEMS,
+    absolute: true
+  }, items.map(function (item) {
+    return /*#__PURE__*/React.createElement(ListItem, _extends({
+      key: item.id
+    }, item));
+  })));
+};

package/dist/components/DecisionSection.d.ts

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

package/dist/components/DecisionSection.js

@@ -0,0 +1,15 @@
+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));
+  }))));
+};

package/dist/components/Prompt.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { 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

@@ -0,0 +1,39 @@
+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 * as S from '../Confirmation.styles';
+import { BUTTON_COLOR_MAPPING } from '../Confirmation.const';
+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)));
+  }, [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));
+};

package/dist/hooks/useDefaultTexts.d.ts

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

package/dist/hooks/useDefaultTexts.js

@@ -0,0 +1,31 @@
+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 || {});
+};

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './Confirmation';
+export type { ConfirmationProps, PromptProps, ConfirmationTexts } from './Confirmation.types';
+export { Prompt } from './components/Prompt';

package/dist/index.js

@@ -0,0 +1,2 @@
+export { default } from './Confirmation';
+export { Prompt } from './components/Prompt';

package/dist/modules.d.js

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

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@synerise/ds-confirmation",
+  "version": "1.1.0",
+  "description": "Confirmation UI Component for the Synerise Design System",
+  "license": "ISC",
+  "repository": "Synerise/synerise-design",
+  "main": "dist/index.js",
+  "files": [
+    "/dist",
+    "CHANGELOG.md",
+    "README.md",
+    "package.json",
+    "LICENSE.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "npm run build:js && npm run build:css && npm run defs",
+    "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": "npm run build:js -- --watch",
+    "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
+    "pack:ci": "npm pack --pack-destination ../../storybook/storybook-static/static",
+    "prepublish": "npm run build",
+    "test": "jest",
+    "test:watch": "npm run test -- --watchAll",
+    "types": "tsc --noEmit",
+    "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
+  },
+  "sideEffects": [
+    "dist/style/*",
+    "*.less"
+  ],
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@synerise/ds-button": "^1.3.0",
+    "@synerise/ds-icon": "^1.5.0",
+    "@synerise/ds-list-item": "^1.0.8",
+    "@synerise/ds-modal": "^1.1.0",
+    "@synerise/ds-radio": "^1.0.8",
+    "@synerise/ds-scrollbar": "^1.0.8",
+    "@synerise/ds-typography": "^1.0.8",
+    "@synerise/ds-utils": "^1.1.0"
+  },
+  "peerDependencies": {
+    "@synerise/ds-core": "*",
+    "react": ">=16.9.0 <= 18.3.1",
+    "react-intl": "^6.8.7",
+    "styled-components": "^5.3.3"
+  },
+  "gitHead": "8aa16b27c86c97e3ac774d92561ab0a03176c439"
+}