@synerise/ds-action-area 1.0.46 → 1.0.48

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.48](https://github.com/Synerise/synerise-design/compare/@synerise/ds-action-area@1.0.47...@synerise/ds-action-area@1.0.48) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-action-area
+
+## [1.0.47](https://github.com/Synerise/synerise-design/compare/@synerise/ds-action-area@1.0.46...@synerise/ds-action-area@1.0.47) (2026-03-20)
+
+**Note:** Version bump only for package @synerise/ds-action-area
+
 ## [1.0.46](https://github.com/Synerise/synerise-design/compare/@synerise/ds-action-area@1.0.45...@synerise/ds-action-area@1.0.46) (2026-03-09)
 
 **Note:** Version bump only for package @synerise/ds-action-area

package/dist/ActionArea.d.ts

@@ -1,13 +1,13 @@
-import React from 'react';
-import type { ActionAreaProps } from './ActionArea.types';
+import { default as React } from 'react';
+import { ActionAreaProps } from './ActionArea.types';
 declare const ActionArea: {
     ({ label, description, isFullWidth, isError, errorText, className, style, ...rest }: ActionAreaProps): React.JSX.Element;
-    ActionAreaWrapper: import("styled-components").StyledComponent<"div", any, {
+    ActionAreaWrapper: import('styled-components').StyledComponent<"div", any, {
         isFullWidth?: boolean;
     }, never>;
-    ActionAreaContent: import("styled-components").StyledComponent<"div", any, {
+    ActionAreaContent: import('styled-components').StyledComponent<"div", any, {
         isError?: boolean;
     }, never>;
-    ErrorText: import("styled-components").StyledComponent<"div", any, {}, never>;
+    ErrorText: import('styled-components').StyledComponent<"div", any, {}, never>;
 };
 export default ActionArea;

package/dist/ActionArea.figma.d.ts

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

package/dist/ActionArea.figma.js

@@ -0,0 +1,49 @@
+import { jsx } from "react/jsx-runtime";
+import figma from "@figma/code-connect";
+import ActionArea from "./ActionArea.js";
+const FIGMA_URL = "https://www.figma.com/design/fsSZONXpVvtrDsCgtu01Jb/Synerise-Design-System?node-id=1302:19040&m=dev";
+const baseProps = {
+  label: figma.boolean("Show Header", {
+    true: figma.string("✏️Header Text"),
+    false: void 0
+  }),
+  description: figma.boolean("Show description", {
+    true: figma.string("✏️Description Text"),
+    false: void 0
+  })
+};
+figma.connect(ActionArea, FIGMA_URL, {
+  variant: {
+    State: "Default"
+  },
+  props: baseProps,
+  example: ({
+    label,
+    description
+  }) => /* @__PURE__ */ jsx(ActionArea, { label, description, action: () => {
+  }, actionLabel: "Select template" })
+});
+figma.connect(ActionArea, FIGMA_URL, {
+  variant: {
+    State: "Disabled"
+  },
+  props: baseProps,
+  example: ({
+    label,
+    description
+  }) => /* @__PURE__ */ jsx(ActionArea, { label, description, action: () => {
+  }, actionLabel: "Select template", buttonProps: {
+    disabled: true
+  } })
+});
+figma.connect(ActionArea, FIGMA_URL, {
+  variant: {
+    State: "Error"
+  },
+  props: baseProps,
+  example: ({
+    label,
+    description
+  }) => /* @__PURE__ */ jsx(ActionArea, { label, description, action: () => {
+  }, actionLabel: "Select template", isError: true, errorText: "Error message" })
+});

package/dist/ActionArea.js

@@ -1,35 +1,32 @@
-var _excluded = ["label", "description", "isFullWidth", "isError", "errorText", "className", "style"];
-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 classnames from 'classnames';
-import React from 'react';
-import { Description, Title } from '@synerise/ds-typography';
-import * as S from './ActionArea.styles';
-import { renderAction } from './ActionArea.utils';
-var ActionArea = function ActionArea(_ref) {
-  var label = _ref.label,
-    description = _ref.description,
-    _ref$isFullWidth = _ref.isFullWidth,
-    isFullWidth = _ref$isFullWidth === void 0 ? false : _ref$isFullWidth,
-    _ref$isError = _ref.isError,
-    isError = _ref$isError === void 0 ? false : _ref$isError,
-    errorText = _ref.errorText,
-    className = _ref.className,
-    style = _ref.style,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var isErrorText = isError && Boolean(errorText);
-  var actionContent = renderAction(rest);
-  return /*#__PURE__*/React.createElement(S.ActionAreaWrapper, {
-    style: style,
-    className: classnames('ds-action-area', className),
-    isFullWidth: isFullWidth
-  }, /*#__PURE__*/React.createElement(S.ActionAreaContent, {
-    isError: isError,
-    "data-testid": "action-area-content"
-  }, label && /*#__PURE__*/React.createElement(Title, {
-    level: 6
-  }, label), /*#__PURE__*/React.createElement(Description, null, description), /*#__PURE__*/React.createElement(S.ActionAreaAction, null, actionContent)), isErrorText && /*#__PURE__*/React.createElement(S.ErrorText, null, errorText));
+import { jsxs, jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import { Title, Description } from "@synerise/ds-typography";
+import { ActionAreaWrapper, ActionAreaContent, ActionAreaAction, ErrorText } from "./ActionArea.styles.js";
+import { renderAction } from "./ActionArea.utils.js";
+const ActionArea = ({
+  label,
+  description,
+  isFullWidth = false,
+  isError = false,
+  errorText,
+  className,
+  style,
+  ...rest
+}) => {
+  const isErrorText = isError && Boolean(errorText);
+  const actionContent = renderAction(rest);
+  return /* @__PURE__ */ jsxs(ActionAreaWrapper, { style, className: classnames("ds-action-area", className), isFullWidth, children: [
+    /* @__PURE__ */ jsxs(ActionAreaContent, { isError, "data-testid": "action-area-content", children: [
+      label && /* @__PURE__ */ jsx(Title, { level: 6, children: label }),
+      /* @__PURE__ */ jsx(Description, { children: description }),
+      /* @__PURE__ */ jsx(ActionAreaAction, { children: actionContent })
+    ] }),
+    isErrorText && /* @__PURE__ */ jsx(ErrorText, { children: errorText })
+  ] });
+};
+ActionArea.ActionAreaWrapper = ActionAreaWrapper;
+ActionArea.ActionAreaContent = ActionAreaContent;
+ActionArea.ErrorText = ErrorText;
+export {
+  ActionArea as default
 };
-ActionArea.ActionAreaWrapper = S.ActionAreaWrapper;
-ActionArea.ActionAreaContent = S.ActionAreaContent;
-ActionArea.ErrorText = S.ErrorText;
-export default ActionArea;

package/dist/ActionArea.styles.d.ts

@@ -1,8 +1,8 @@
-export declare const ActionAreaWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const ActionAreaWrapper: import('styled-components').StyledComponent<"div", any, {
     isFullWidth?: boolean;
 }, never>;
-export declare const ActionAreaContent: import("styled-components").StyledComponent<"div", any, {
+export declare const ActionAreaContent: import('styled-components').StyledComponent<"div", any, {
     isError?: boolean;
 }, never>;
-export declare const ActionAreaAction: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ErrorText: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ActionAreaAction: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ErrorText: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/ActionArea.styles.js

@@ -1,35 +1,36 @@
-import styled from 'styled-components';
-import { Description } from '@synerise/ds-typography';
-export var ActionAreaWrapper = styled.div.withConfig({
+import styled from "styled-components";
+import { Description } from "@synerise/ds-typography";
+const ActionAreaWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ActionAreastyles__ActionAreaWrapper",
   componentId: "sc-10ey0kr-0"
-})(["max-width:100%;width:", ";"], function (_ref) {
-  var isFullWidth = _ref.isFullWidth;
-  return isFullWidth ? '100%;' : '588px;';
-});
-export var ActionAreaContent = styled.div.withConfig({
+})(["max-width:100%;width:", ";"], ({
+  isFullWidth
+}) => isFullWidth ? "100%;" : "588px;");
+const ActionAreaContent = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ActionAreastyles__ActionAreaContent",
   componentId: "sc-10ey0kr-1"
-})(["width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 24px;border-radius:3px;background-color:", ";border:1px dashed ", ";", " .ds-title{margin-bottom:8px;text-align:center;word-break:break-word;}", "{text-align:center;margin-bottom:16px;word-break:break-word;}"], function (_ref2) {
-  var isError = _ref2.isError,
-    theme = _ref2.theme;
-  return isError ? theme.palette['red-050'] : 'none';
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.palette['grey-300'];
-}, function (_ref4) {
-  var isError = _ref4.isError,
-    theme = _ref4.theme;
-  return isError && "border-color: " + theme.palette['red-600'] + ";";
-}, Description);
-export var ActionAreaAction = styled.div.withConfig({
+})(["width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 24px;border-radius:3px;background-color:", ";border:1px dashed ", ";", " .ds-title{margin-bottom:8px;text-align:center;word-break:break-word;}", "{text-align:center;margin-bottom:16px;word-break:break-word;}"], ({
+  isError,
+  theme
+}) => isError ? theme.palette["red-050"] : "none", ({
+  theme
+}) => theme.palette["grey-300"], ({
+  isError,
+  theme
+}) => isError && `border-color: ${theme.palette["red-600"]};`, Description);
+const ActionAreaAction = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ActionAreastyles__ActionAreaAction",
   componentId: "sc-10ey0kr-2"
 })([""]);
-export var ErrorText = styled.div.withConfig({
+const ErrorText = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ActionAreastyles__ErrorText",
   componentId: "sc-10ey0kr-3"
-})(["margin-top:8px;color:", ";"], function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.palette['red-600'];
-});
+})(["margin-top:8px;color:", ";"], ({
+  theme
+}) => theme.palette["red-600"]);
+export {
+  ActionAreaAction,
+  ActionAreaContent,
+  ActionAreaWrapper,
+  ErrorText
+};

package/dist/ActionArea.types.d.ts

@@ -1,5 +1,5 @@
-import { type CSSProperties, type ReactNode } from 'react';
-import { type ButtonProps } from '@synerise/ds-button';
+import { CSSProperties, ReactNode } from 'react';
+import { ButtonProps } from '@synerise/ds-button';
 type CommonProps = {
     className?: string;
     description: ReactNode;

package/dist/ActionArea.types.js

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

package/dist/ActionArea.utils.d.ts

@@ -1,3 +1,3 @@
-import { type ReactNode } from 'react';
-import { type ActionAreaWithCustomActionProps, type ActionAreaWithStandardActionProps } from './ActionArea.types';
+import { ReactNode } from 'react';
+import { ActionAreaWithCustomActionProps, ActionAreaWithStandardActionProps } from './ActionArea.types';
 export declare const renderAction: (props: ActionAreaWithCustomActionProps | ActionAreaWithStandardActionProps) => ReactNode;

package/dist/ActionArea.utils.js

@@ -1,19 +1,22 @@
-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 Button from '@synerise/ds-button';
-var isCustomActionArea = function isCustomActionArea(props) {
-  return 'customAction' in props;
+import { jsx } from "react/jsx-runtime";
+import Button from "@synerise/ds-button";
+const isCustomActionArea = (props) => {
+  return "customAction" in props;
 };
-export var renderAction = function renderAction(props) {
+const renderAction = (props) => {
   if (isCustomActionArea(props)) {
-    var customAction = props.customAction;
+    const {
+      customAction
+    } = props;
     return customAction;
   }
-  var action = props.action,
-    actionLabel = props.actionLabel,
-    buttonProps = props.buttonProps;
-  return /*#__PURE__*/React.createElement(Button, _extends({
-    type: "primary",
-    onClick: action
-  }, buttonProps), actionLabel);
-};
+  const {
+    action,
+    actionLabel,
+    buttonProps
+  } = props;
+  return /* @__PURE__ */ jsx(Button, { type: "primary", onClick: action, ...buttonProps, children: actionLabel });
+};
+export {
+  renderAction
+};

package/dist/index.js

@@ -1 +1,4 @@
-export { default } from './ActionArea';
+import { default as default2 } from "./ActionArea.js";
+export {
+  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-action-area",
-  "version": "1.0.46",
+  "version": "1.0.48",
   "description": "ActionArea UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -16,15 +16,15 @@
     "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",
-    "test": "vitest",
-    "test:watch": "pnpm run test -- --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "types": "tsc --noEmit",
     "check:circular-dependencies": "madge --circular --extensions ts,tsx,js,jsx --ts-config tsconfig.json src/ --exclude '/dist/'",
     "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
@@ -35,8 +35,8 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^1.5.16",
-    "@synerise/ds-typography": "^1.1.11",
+    "@synerise/ds-button": "^1.5.18",
+    "@synerise/ds-typography": "^1.1.13",
     "classnames": "^2.5.1"
   },
   "peerDependencies": {
@@ -45,5 +45,5 @@
     "styled-components": "^5.3.3",
     "vitest": "4"
   },
-  "gitHead": "8dfafc5d7278f09d430f1e7499782d05c76b47c0"
+  "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
 }