@synerise/ds-logic 1.1.31 → 1.1.32

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.32](https://github.com/Synerise/synerise-design/compare/@synerise/ds-logic@1.1.31...@synerise/ds-logic@1.1.32) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-logic
+
 ## [1.1.31](https://github.com/Synerise/synerise-design/compare/@synerise/ds-logic@1.1.30...@synerise/ds-logic@1.1.31) (2026-03-20)
 
 **Note:** Version bump only for package @synerise/ds-logic

package/dist/Logic.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type LogicProps, type LogicSubComponents } from './Logic.types';
+import { default as React } from 'react';
+import { LogicProps, LogicSubComponents } from './Logic.types';
 declare const Logic: React.FC<LogicProps> & LogicSubComponents;
 export default Logic;

package/dist/Logic.js

@@ -1,50 +1,39 @@
-import React from 'react';
-import { useIntl } from 'react-intl';
-import { Title } from '@synerise/ds-typography';
-import * as S from './Logic.style';
-import Matching from './Matching/Matching';
-var DEFAULT_OPTIONS = ['AND', 'OR'];
-var Logic = function Logic(_ref) {
-  var value = _ref.value,
-    options = _ref.options,
-    onChange = _ref.onChange,
-    _ref$readOnly = _ref.readOnly,
-    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
-  var intl = useIntl();
-  var operators = React.useMemo(function () {
-    if (options !== undefined && options.length) {
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { useIntl } from "react-intl";
+import { Title } from "@synerise/ds-typography";
+import { Logic as Logic$1 } from "./Logic.style.js";
+import Matching from "./Matching/Matching.js";
+const DEFAULT_OPTIONS = ["AND", "OR"];
+const Logic = ({
+  value,
+  options,
+  onChange,
+  readOnly = false
+}) => {
+  const intl = useIntl();
+  const operators = React.useMemo(() => {
+    if (options !== void 0 && options.length) {
       return options;
     }
-    return DEFAULT_OPTIONS.map(function (option) {
-      return {
-        value: option,
-        label: intl.formatMessage({
-          id: "DS.LOGIC." + option
-        })
-      };
-    });
+    return DEFAULT_OPTIONS.map((option) => ({
+      value: option,
+      label: intl.formatMessage({
+        id: `DS.LOGIC.${option}`
+      })
+    }));
   }, [options, intl]);
-  var handleNextLogic = React.useCallback(function () {
-    var currentOperatorIndex = operators.findIndex(function (operator) {
-      return operator.value === value;
-    });
-    var nextOperatorIndex = currentOperatorIndex + 1 >= operators.length ? 0 : currentOperatorIndex + 1;
+  const handleNextLogic = React.useCallback(() => {
+    const currentOperatorIndex = operators.findIndex((operator) => operator.value === value);
+    const nextOperatorIndex = currentOperatorIndex + 1 >= operators.length ? 0 : currentOperatorIndex + 1;
     onChange(operators[nextOperatorIndex].value);
   }, [onChange, operators, value]);
-  var renderValue = React.useMemo(function () {
-    var _operators$find;
-    return (_operators$find = operators.find(function (option) {
-      return option.value === value;
-    })) == null ? void 0 : _operators$find.label;
+  const renderValue = React.useMemo(() => {
+    return operators.find((option) => option.value === value)?.label;
   }, [operators, value]);
-  return /*#__PURE__*/React.createElement(S.Logic, {
-    className: "ds-logic",
-    onClick: !readOnly ? handleNextLogic : undefined,
-    readOnly: readOnly
-  }, /*#__PURE__*/React.createElement(Title, {
-    withoutMargin: true,
-    level: 4
-  }, renderValue));
+  return /* @__PURE__ */ jsx(Logic$1, { className: "ds-logic", onClick: !readOnly ? handleNextLogic : void 0, readOnly, children: /* @__PURE__ */ jsx(Title, { withoutMargin: true, level: 4, children: renderValue }) });
 };
 Logic.Matching = Matching;
-export default Logic;
+export {
+  Logic as default
+};

package/dist/Logic.style.d.ts

@@ -1,3 +1,3 @@
-export declare const Logic: import("styled-components").StyledComponent<"div", any, {
+export declare const Logic: import('styled-components').StyledComponent<"div", any, {
     readOnly?: boolean;
 }, never>;

package/dist/Logic.style.js

@@ -1,13 +1,40 @@
-import styled from 'styled-components';
-export var Logic = styled.div.withConfig({
+import styled from "styled-components";
+const Logic = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Logicstyle__Logic",
   componentId: "sc-yp0pif-0"
-})(["user-select:none;position:relative;.ds-title{cursor:pointer;", "}", ""], function (_ref) {
-  var readOnly = _ref.readOnly,
-    theme = _ref.theme;
-  return !readOnly ? "&:after {\n      position: absolute;\n      bottom: -2px;\n      width: 100%;\n      content: '';\n      height: 1px;\n      left: 1px;\n      background-image: linear-gradient(\n        to right,\n        " + theme.palette['grey-600'] + " 25%,\n        " + theme.palette.white + " 0%\n      );\n      background-position: top;\n      background-size: 4px 1px;\n      background-repeat: repeat-x;\n    }" : '';
-}, function (_ref2) {
-  var readOnly = _ref2.readOnly,
-    theme = _ref2.theme;
-  return !readOnly ? " &:hover {\n    .ds-title {\n      color: " + theme.palette['blue-700'] + ";\n      &:after {\n        background-image: linear-gradient(\n          to right,\n          " + theme.palette['blue-700'] + " 25%,\n          " + theme.palette.white + " 0%\n        );\n      }\n    }\n  }" : '';
-});
+})(["user-select:none;position:relative;.ds-title{cursor:pointer;", "}", ""], ({
+  readOnly,
+  theme
+}) => !readOnly ? `&:after {
+      position: absolute;
+      bottom: -2px;
+      width: 100%;
+      content: '';
+      height: 1px;
+      left: 1px;
+      background-image: linear-gradient(
+        to right,
+        ${theme.palette["grey-600"]} 25%,
+        ${theme.palette.white} 0%
+      );
+      background-position: top;
+      background-size: 4px 1px;
+      background-repeat: repeat-x;
+    }` : "", ({
+  readOnly,
+  theme
+}) => !readOnly ? ` &:hover {
+    .ds-title {
+      color: ${theme.palette["blue-700"]};
+      &:after {
+        background-image: linear-gradient(
+          to right,
+          ${theme.palette["blue-700"]} 25%,
+          ${theme.palette.white} 0%
+        );
+      }
+    }
+  }` : "");
+export {
+  Logic
+};

package/dist/Logic.types.d.ts

@@ -1,5 +1,5 @@
-import type React from 'react';
-import type Matching from './Matching/Matching';
+import { default as React } from 'react';
+import { default as Matching } from './Matching/Matching';
 export type LogicOperatorValue = 'AND' | 'OR' | string;
 export type LogicOperator = {
     value: string;

package/dist/Logic.types.js

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

package/dist/Matching/Matching.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type MatchingProps } from './Matching.types';
+import { default as React } from 'react';
+import { MatchingProps } from './Matching.types';
 declare const Matching: ({ matching, sentence, onChange, texts, readOnly, ...htmlAttributes }: MatchingProps) => React.JSX.Element;
 export default Matching;

package/dist/Matching/Matching.js

@@ -1,51 +1,46 @@
-var _excluded = ["matching", "sentence", "onChange", "texts", "readOnly"];
-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 from 'react';
-import { useIntl } from 'react-intl';
-import * as S from './Matching.styles';
-var MATCHING_TOGGLE = '#MATCHING_TOGGLE#';
-var Matching = function Matching(_ref) {
-  var _ref$matching = _ref.matching,
-    matching = _ref$matching === void 0 ? true : _ref$matching,
-    sentence = _ref.sentence,
-    onChange = _ref.onChange,
-    texts = _ref.texts,
-    _ref$readOnly = _ref.readOnly,
-    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-    htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var intl = useIntl();
-  var text = React.useMemo(function () {
-    return _extends({
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { useIntl } from "react-intl";
+import { Toggle, MatchingWrapper } from "./Matching.styles.js";
+const MATCHING_TOGGLE = "#MATCHING_TOGGLE#";
+const Matching = ({
+  matching = true,
+  sentence,
+  onChange,
+  texts,
+  readOnly = false,
+  ...htmlAttributes
+}) => {
+  const intl = useIntl();
+  const text = React.useMemo(() => {
+    return {
       matching: intl.formatMessage({
-        id: 'DS.MATCHING.MATCHING',
-        defaultMessage: 'matching'
+        id: "DS.MATCHING.MATCHING",
+        defaultMessage: "matching"
       }),
       notMatching: intl.formatMessage({
-        id: 'DS.MATCHING.NOT-MATCHING',
-        defaultMessage: 'not matching'
-      })
-    }, texts);
+        id: "DS.MATCHING.NOT-MATCHING",
+        defaultMessage: "not matching"
+      }),
+      ...texts
+    };
   }, [texts, intl]);
-  var handleClick = React.useCallback(function () {
+  const handleClick = React.useCallback(() => {
     onChange(!matching);
   }, [onChange, matching]);
-  var getToggle = React.useMemo(function () {
-    return /*#__PURE__*/React.createElement(S.Toggle, {
-      onClick: !readOnly ? handleClick : undefined,
-      matching: matching,
-      className: "ds-matching-toggle",
-      readOnly: readOnly
-    }, matching ? text.matching : text.notMatching);
+  const getToggle = React.useMemo(() => {
+    return /* @__PURE__ */ jsx(Toggle, { onClick: !readOnly ? handleClick : void 0, matching, className: "ds-matching-toggle", readOnly, children: matching ? text.matching : text.notMatching });
   }, [handleClick, matching, text, readOnly]);
-  var getLabelWithToggle = React.useMemo(function () {
+  const getLabelWithToggle = React.useMemo(() => {
     if (sentence) {
-      var startOfToggle = sentence == null ? void 0 : sentence.search(MATCHING_TOGGLE);
-      var endOfToggle = startOfToggle + MATCHING_TOGGLE.length;
+      const startOfToggle = sentence?.search(MATCHING_TOGGLE);
+      const endOfToggle = startOfToggle + MATCHING_TOGGLE.length;
       return [sentence.substring(0, startOfToggle), getToggle, sentence.substring(endOfToggle, sentence.length)];
     }
     return getToggle;
   }, [getToggle, sentence]);
-  return /*#__PURE__*/React.createElement(S.MatchingWrapper, htmlAttributes, getLabelWithToggle);
+  return /* @__PURE__ */ jsx(MatchingWrapper, { ...htmlAttributes, children: getLabelWithToggle });
+};
+export {
+  Matching as default
 };
-export default Matching;

package/dist/Matching/Matching.styles.d.ts

@@ -1,5 +1,5 @@
-export declare const MatchingWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Toggle: import("styled-components").StyledComponent<"span", any, {
+export declare const MatchingWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Toggle: import('styled-components').StyledComponent<"span", any, {
     matching: boolean;
     readOnly?: boolean;
 }, never>;

package/dist/Matching/Matching.styles.js

@@ -1,36 +1,58 @@
-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 styled, { css } from 'styled-components';
-var getColor = function getColor(_ref) {
-  var theme = _ref.theme,
-    matching = _ref.matching,
-    readOnly = _ref.readOnly,
-    _ref$hovered = _ref.hovered,
-    hovered = _ref$hovered === void 0 ? false : _ref$hovered;
+import styled, { css } from "styled-components";
+const getColor = ({
+  theme,
+  matching,
+  readOnly,
+  hovered = false
+}) => {
   if (readOnly) {
-    return theme.palette["grey-800"];
+    return theme.palette[`grey-800`];
   }
-  var hue = hovered ? '700' : '600';
-  return theme.palette[matching ? "green-" + hue : "red-" + hue];
+  const hue = hovered ? "700" : "600";
+  return theme.palette[matching ? `green-${hue}` : `red-${hue}`];
 };
-export var MatchingWrapper = styled.div.withConfig({
+const MatchingWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Matchingstyles__MatchingWrapper",
   componentId: "sc-7z57qz-0"
-})(["font-size:16px;font-weight:500;line-height:1.25;color:", ";text-align:left;user-select:none;&:first-letter{text-transform:uppercase;}"], function (props) {
-  return props.theme.palette['grey-800'];
-});
-export var Toggle = styled.span.withConfig({
+})(["font-size:16px;font-weight:500;line-height:1.25;color:", ";text-align:left;user-select:none;&:first-letter{text-transform:uppercase;}"], (props) => props.theme.palette["grey-800"]);
+const Toggle = /* @__PURE__ */ styled.span.withConfig({
   displayName: "Matchingstyles__Toggle",
   componentId: "sc-7z57qz-1"
-})(["cursor:pointer;font-size:16px;font-weight:500;line-height:1.25;color:", ";transition:color 0.1s ease-in-out;position:relative;display:inline-flex;", " ", ""], getColor, function (props) {
-  var color = getColor(props);
-  var readOnly = props.readOnly,
-    theme = props.theme;
-  return !readOnly && "\n&:after {\n  position: absolute;\n  bottom: -2px;\n  width: 100%;\n  content: '';\n  height: 1px;\n  left: 1px;\n  background-image: linear-gradient(\n    to right,\n    " + color + " 25%,\n    " + theme.palette.white + " 0%\n  );\n  background-position: top;\n  background-size: 4px 1px;\n  background-repeat: repeat-x;\n}";
-}, function (props) {
-  var hoveredColor = getColor(_extends({}, props, {
+})(["cursor:pointer;font-size:16px;font-weight:500;line-height:1.25;color:", ";transition:color 0.1s ease-in-out;position:relative;display:inline-flex;", " ", ""], getColor, (props) => {
+  const color = getColor(props);
+  const {
+    readOnly,
+    theme
+  } = props;
+  return !readOnly && `
+&:after {
+  position: absolute;
+  bottom: -2px;
+  width: 100%;
+  content: '';
+  height: 1px;
+  left: 1px;
+  background-image: linear-gradient(
+    to right,
+    ${color} 25%,
+    ${theme.palette.white} 0%
+  );
+  background-position: top;
+  background-size: 4px 1px;
+  background-repeat: repeat-x;
+}`;
+}, (props) => {
+  const hoveredColor = getColor({
+    ...props,
     hovered: true
-  }));
-  var readOnly = props.readOnly,
-    theme = props.theme;
+  });
+  const {
+    readOnly,
+    theme
+  } = props;
   return !readOnly && css(["&:hover{color:", ";&:after{background-image:linear-gradient( to right,", " 25%,", " 0% );}"], hoveredColor, hoveredColor, theme.palette.white);
-});
+});
+export {
+  MatchingWrapper,
+  Toggle
+};

package/dist/Matching/Matching.types.d.ts

@@ -1,4 +1,4 @@
-import type { WithHTMLAttributes } from '@synerise/ds-utils';
+import { WithHTMLAttributes } from '@synerise/ds-utils';
 export type MatchingTexts = {
     matching: string;
     notMatching: string;

package/dist/Matching/Matching.types.js

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

package/dist/Placeholder/Placeholder.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type PlaceholderType } from './Placeholder.types';
+import { default as React } from 'react';
+import { PlaceholderType } from './Placeholder.types';
 declare const Placeholder: React.FC<PlaceholderType>;
 export default Placeholder;

package/dist/Placeholder/Placeholder.js

@@ -1,16 +1,16 @@
-import React from 'react';
-import { theme } from '@synerise/ds-core';
-import Icon, { ClickM } from '@synerise/ds-icon';
-import { Text } from '@synerise/ds-typography';
-import * as S from './Placeholder.styles';
-var Placeholder = function Placeholder(_ref) {
-  var text = _ref.text;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.PlaceholderContainer, null, /*#__PURE__*/React.createElement(Icon, {
-    size: 24,
-    color: theme.palette['grey-600'],
-    component: /*#__PURE__*/React.createElement(ClickM, null)
-  }), /*#__PURE__*/React.createElement(Text, {
-    size: "medium"
-  }, text)));
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { theme } from "@synerise/ds-core";
+import Icon, { ClickM } from "@synerise/ds-icon";
+import { Text } from "@synerise/ds-typography";
+import { PlaceholderContainer } from "./Placeholder.styles.js";
+const Placeholder = ({
+  text
+}) => {
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(PlaceholderContainer, { children: [
+    /* @__PURE__ */ jsx(Icon, { size: 24, color: theme.palette["grey-600"], component: /* @__PURE__ */ jsx(ClickM, {}) }),
+    /* @__PURE__ */ jsx(Text, { size: "medium", children: text })
+  ] }) });
+};
+export {
+  Placeholder as default
 };
-export default Placeholder;

package/dist/Placeholder/Placeholder.styles.d.ts

@@ -1 +1 @@
-export declare const PlaceholderContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PlaceholderContainer: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/Placeholder/Placeholder.styles.js

@@ -1,9 +1,8 @@
-import styled from 'styled-components';
-export var PlaceholderContainer = styled.div.withConfig({
+import styled from "styled-components";
+const PlaceholderContainer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Placeholderstyles__PlaceholderContainer",
   componentId: "sc-1dp40dc-0"
-})(["width:100%;min-height:63px;margin:auto;border-radius:3px;background-color:", ";display:flex;justify-content:center;align-items:center;flex-direction:row;span.ds-text{display:block;font-size:13px;margin:6px 0 5px 11px;color:", ";}"], function (props) {
-  return props.theme.palette.white;
-}, function (props) {
-  return props.theme.palette['grey-600'];
-});
+})(["width:100%;min-height:63px;margin:auto;border-radius:3px;background-color:", ";display:flex;justify-content:center;align-items:center;flex-direction:row;span.ds-text{display:block;font-size:13px;margin:6px 0 5px 11px;color:", ";}"], (props) => props.theme.palette.white, (props) => props.theme.palette["grey-600"]);
+export {
+  PlaceholderContainer
+};

package/dist/Placeholder/Placeholder.types.js

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

package/dist/index.js

@@ -1,3 +1,8 @@
-export { default } from './Logic';
-export { default as Matching } from './Matching/Matching';
-export { default as Placeholder } from './Placeholder/Placeholder';
+import { default as default2 } from "./Logic.js";
+import { default as default3 } from "./Matching/Matching.js";
+import { default as default4 } from "./Placeholder/Placeholder.js";
+export {
+  default3 as Matching,
+  default4 as Placeholder,
+  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-logic",
-  "version": "1.1.31",
+  "version": "1.1.32",
   "description": "Logic 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,9 +35,9 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-icon": "^1.15.0",
-    "@synerise/ds-typography": "^1.1.12",
-    "@synerise/ds-utils": "^1.7.0"
+    "@synerise/ds-icon": "^1.15.1",
+    "@synerise/ds-typography": "^1.1.13",
+    "@synerise/ds-utils": "^1.7.1"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
@@ -45,5 +45,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "8efc031fa688c0b87c7b3915bae93546bb63bcac"
+  "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
 }