@synerise/ds-card-select 1.1.41 → 1.1.43

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.1.43](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-select@1.1.42...@synerise/ds-card-select@1.1.43) (2026-04-01)
+
+**Note:** Version bump only for package @synerise/ds-card-select
+
+## [1.1.42](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-select@1.1.41...@synerise/ds-card-select@1.1.42) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-card-select
+
 ## [1.1.41](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-select@1.1.40...@synerise/ds-card-select@1.1.41) (2026-03-20)
 
 **Note:** Version bump only for package @synerise/ds-card-select

package/dist/CardSelect.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 declare const _default: React.ForwardRefExoticComponent<{
     className?: string | undefined;
     title?: React.ReactNode;
@@ -7,18 +7,18 @@ declare const _default: React.ForwardRefExoticComponent<{
     disabled?: boolean | undefined;
     key?: React.Key | undefined;
     value?: boolean | undefined;
-    size?: import("./CardSelect.types").CardSelectSizeType | undefined;
+    size?: import('./CardSelect.types').CardSelectSizeType | undefined;
     stretchToFit?: boolean | undefined;
     error?: boolean | undefined;
     raised?: boolean | undefined;
+    elementsPosition?: import('./CardSelect.types').CardSelectAlignType | undefined;
+    tickVisible?: boolean | undefined;
     description?: React.ReactNode;
     customTickVisible?: boolean | undefined;
     customTickVisibleComponent?: React.ReactNode;
-    tickVisible?: boolean | undefined;
     icon?: React.ReactNode;
     iconSize?: number | undefined;
     tickSize?: number | undefined;
-    elementsPosition?: import("./CardSelect.types").CardSelectAlignType | undefined;
     tagProps?: {
         [x: `data-${string}`]: string;
         defaultChecked?: boolean | undefined | undefined;
@@ -293,10 +293,10 @@ declare const _default: React.ForwardRefExoticComponent<{
         prefixel?: React.ReactNode;
         suffixel?: React.ReactNode;
         dashed?: boolean | undefined;
-        tooltipProps?: import("@synerise/ds-tooltip").TooltipProps | undefined;
+        tooltipProps?: import('@synerise/ds-tooltip').TooltipProps | undefined;
     } | undefined;
-    tagTooltipProps?: import("@synerise/ds-tooltip").TooltipProps | undefined;
-    infoTooltipProps?: import("@synerise/ds-tooltip").TooltipProps | undefined;
+    tagTooltipProps?: import('@synerise/ds-tooltip').TooltipProps | undefined;
+    infoTooltipProps?: import('@synerise/ds-tooltip').TooltipProps | undefined;
 } & {
     theme?: any;
 }>;

package/dist/CardSelect.js

@@ -1,118 +1,71 @@
-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, { useRef, useState } from 'react';
-import { withTheme } from 'styled-components';
-import { useTheme } from '@synerise/ds-core';
-import Icon, { Check3M, InfoFillS } from '@synerise/ds-icon';
-import { TagShape } from '@synerise/ds-tag';
-import Tooltip from '@synerise/ds-tooltip';
-import { useOnClickOutside } from '@synerise/ds-utils';
-import * as S from './CardSelect.styles';
-import { DEFAULT_ICON_SIZE_LARGE, DEFAULT_ICON_SIZE_SMALL, DEFAULT_TICK_SIZE_LARGE, DEFAULT_TICK_SIZE_SMALL } from './constants';
-var CardSelect = function CardSelect(_ref) {
-  var title = _ref.title,
-    description = _ref.description,
-    customTickVisible = _ref.customTickVisible,
-    customTickVisibleComponent = _ref.customTickVisibleComponent,
-    _ref$tickVisible = _ref.tickVisible,
-    tickVisible = _ref$tickVisible === void 0 ? true : _ref$tickVisible,
-    stretchToFit = _ref.stretchToFit,
-    raised = _ref.raised,
-    _ref$value = _ref.value,
-    value = _ref$value === void 0 ? false : _ref$value,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size,
-    disabled = _ref.disabled,
-    onChange = _ref.onChange,
-    icon = _ref.icon,
-    iconSize = _ref.iconSize,
-    tickSize = _ref.tickSize,
-    _ref$elementsPosition = _ref.elementsPosition,
-    elementsPosition = _ref$elementsPosition === void 0 ? 'center' : _ref$elementsPosition,
-    className = _ref.className,
-    onClick = _ref.onClick,
-    error = _ref.error,
-    tagProps = _ref.tagProps,
-    tagTooltipProps = _ref.tagTooltipProps,
-    infoTooltipProps = _ref.infoTooltipProps;
-  var _useState = useState(false),
-    isPressed = _useState[0],
-    setIsPressed = _useState[1];
-  var theme = useTheme();
-  var wrapperRef = useRef(null);
-  var tickIconRef = useRef(null);
-  var handleClick = function handleClick() {
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef } from "react";
+import { withTheme } from "styled-components";
+import { useTheme } from "@synerise/ds-core";
+import Icon, { Check3M, InfoFillS } from "@synerise/ds-icon";
+import { TagShape } from "@synerise/ds-tag";
+import Tooltip from "@synerise/ds-tooltip";
+import { useOnClickOutside } from "@synerise/ds-utils";
+import { TagRibbonAnchor, TagRibbon, CardWrapper, Container, Aside, TickIcon, RadioShape, Main, IconWrapper, Title, Description } from "./CardSelect.styles.js";
+import { DEFAULT_TICK_SIZE_SMALL, DEFAULT_TICK_SIZE_LARGE, DEFAULT_ICON_SIZE_SMALL, DEFAULT_ICON_SIZE_LARGE } from "./constants.js";
+const CardSelect = ({
+  title,
+  description,
+  customTickVisible,
+  customTickVisibleComponent,
+  tickVisible = true,
+  stretchToFit,
+  raised,
+  value = false,
+  size = "medium",
+  disabled,
+  onChange,
+  icon,
+  iconSize,
+  tickSize,
+  elementsPosition = "center",
+  className,
+  onClick,
+  error,
+  tagProps,
+  tagTooltipProps,
+  infoTooltipProps
+}) => {
+  const [isPressed, setIsPressed] = useState(false);
+  const theme = useTheme();
+  const wrapperRef = useRef(null);
+  const tickIconRef = useRef(null);
+  const handleClick = () => {
     onClick ? onClick() : onChange && onChange(!value);
     setIsPressed(true);
-    setTimeout(function () {
-      var _tickIconRef$current;
-      (_tickIconRef$current = tickIconRef.current) == null || _tickIconRef$current.blur();
+    setTimeout(() => {
+      tickIconRef.current?.blur();
     });
   };
-  var realIconSize = iconSize || (size === 'small' ? DEFAULT_ICON_SIZE_SMALL : DEFAULT_ICON_SIZE_LARGE);
-  var realTickSize = tickSize || (size === 'small' ? DEFAULT_TICK_SIZE_SMALL : DEFAULT_TICK_SIZE_LARGE);
-  var tagElement = tagProps && /*#__PURE__*/React.createElement(S.TagRibbonAnchor, null, /*#__PURE__*/React.createElement(S.TagRibbon, _extends({}, tagProps, {
-    shape: TagShape.DEFAULT_SQUARE,
-    asPill: true
-  })));
-  var tagElementWithTooltip = tagTooltipProps ? /*#__PURE__*/React.createElement(Tooltip, tagTooltipProps, tagElement) : tagElement;
-  useOnClickOutside(wrapperRef, function () {
+  const realIconSize = iconSize || (size === "small" ? DEFAULT_ICON_SIZE_SMALL : DEFAULT_ICON_SIZE_LARGE);
+  const realTickSize = tickSize || (size === "small" ? DEFAULT_TICK_SIZE_SMALL : DEFAULT_TICK_SIZE_LARGE);
+  const tagElement = tagProps && /* @__PURE__ */ jsx(TagRibbonAnchor, { children: /* @__PURE__ */ jsx(TagRibbon, { ...tagProps, shape: TagShape.DEFAULT_SQUARE, asPill: true }) });
+  const tagElementWithTooltip = tagTooltipProps ? /* @__PURE__ */ jsx(Tooltip, { ...tagTooltipProps, children: tagElement }) : tagElement;
+  useOnClickOutside(wrapperRef, () => {
     isPressed && setIsPressed(false);
   });
-  return /*#__PURE__*/React.createElement(S.CardWrapper, {
-    size: size,
-    className: "ds-card-select-wrapper",
-    disabled: disabled,
-    stretchToFit: stretchToFit,
-    hasTick: tickVisible || customTickVisible,
-    hasIcon: !!icon,
-    elementsPosition: elementsPosition
-  }, tagElementWithTooltip, /*#__PURE__*/React.createElement(S.Container, {
-    error: !!error,
-    ref: wrapperRef,
-    pressed: isPressed,
-    raised: raised,
-    disabled: disabled,
-    value: value,
-    size: size,
-    onClick: handleClick,
-    className: "ds-card-select " + (className || ''),
-    elementsPosition: elementsPosition,
-    stretchToFit: stretchToFit
-  }, /*#__PURE__*/React.createElement(S.Aside, {
-    size: size,
-    elementsPosition: elementsPosition,
-    tickVisible: tickVisible,
-    tabIndex: disabled ? undefined : 0,
-    ref: tickIconRef
-  }, tickVisible && /*#__PURE__*/React.createElement(S.TickIcon, {
-    className: "ds-card-select-tick",
-    disabled: disabled,
-    elementsPosition: elementsPosition,
-    selected: value && !disabled,
-    size: size
-  }, value ? /*#__PURE__*/React.createElement(Icon, {
-    size: realTickSize,
-    color: value ? theme.palette['green-600'] : theme.palette['grey-400'],
-    component: /*#__PURE__*/React.createElement(Check3M, null)
-  }) : /*#__PURE__*/React.createElement(S.RadioShape, {
-    size: size
-  })), infoTooltipProps && /*#__PURE__*/React.createElement(Tooltip, infoTooltipProps, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(InfoFillS, null),
-    color: theme.palette['grey-400']
-  }))), /*#__PURE__*/React.createElement(S.Main, null, icon && /*#__PURE__*/React.createElement(S.IconWrapper, {
-    size: size
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: icon,
-    size: realIconSize
-  })), title && /*#__PURE__*/React.createElement(S.Title, {
-    size: size,
-    hasIcon: !!icon
-  }, title), description && size !== 'small' && /*#__PURE__*/React.createElement(S.Description, {
-    size: size,
-    hasTitle: !!title,
-    hasIcon: !!icon
-  }, description)), customTickVisible && customTickVisibleComponent && /*#__PURE__*/React.createElement(S.Aside, {
-    size: size
-  }, customTickVisible && customTickVisibleComponent)));
+  return /* @__PURE__ */ jsxs(CardWrapper, { size, className: "ds-card-select-wrapper", disabled, stretchToFit, hasTick: tickVisible || customTickVisible, hasIcon: !!icon, elementsPosition, children: [
+    tagElementWithTooltip,
+    /* @__PURE__ */ jsxs(Container, { error: !!error, ref: wrapperRef, pressed: isPressed, raised, disabled, value, size, onClick: handleClick, className: `ds-card-select ${className || ""}`, elementsPosition, stretchToFit, children: [
+      /* @__PURE__ */ jsxs(Aside, { size, elementsPosition, tickVisible, tabIndex: disabled ? void 0 : 0, ref: tickIconRef, children: [
+        tickVisible && /* @__PURE__ */ jsx(TickIcon, { className: "ds-card-select-tick", disabled, elementsPosition, selected: value && !disabled, size, children: value ? /* @__PURE__ */ jsx(Icon, { size: realTickSize, color: value ? theme.palette["green-600"] : theme.palette["grey-400"], component: /* @__PURE__ */ jsx(Check3M, {}) }) : /* @__PURE__ */ jsx(RadioShape, { size }) }),
+        infoTooltipProps && /* @__PURE__ */ jsx(Tooltip, { ...infoTooltipProps, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(InfoFillS, {}), color: theme.palette["grey-400"] }) })
+      ] }),
+      /* @__PURE__ */ jsxs(Main, { children: [
+        icon && /* @__PURE__ */ jsx(IconWrapper, { size, children: /* @__PURE__ */ jsx(Icon, { component: icon, size: realIconSize }) }),
+        title && /* @__PURE__ */ jsx(Title, { size, hasIcon: !!icon, children: title }),
+        description && size !== "small" && /* @__PURE__ */ jsx(Description, { size, hasTitle: !!title, hasIcon: !!icon, children: description })
+      ] }),
+      customTickVisible && customTickVisibleComponent && /* @__PURE__ */ jsx(Aside, { size, children: customTickVisible && customTickVisibleComponent })
+    ] })
+  ] });
+};
+const CardSelect$1 = withTheme(CardSelect);
+export {
+  CardSelect$1 as default
 };
-export default withTheme(CardSelect);

package/dist/CardSelect.styles.d.ts

@@ -1,27 +1,27 @@
-import type React from 'react';
-import { type ThemeProps } from '@synerise/ds-core';
-import { type CardSelectAlignType, type CardSelectSizeType } from './CardSelect.types';
-export declare const RadioShape: import("styled-components").StyledComponent<"div", any, {
+import { default as React } from 'react';
+import { ThemeProps } from '@synerise/ds-core';
+import { CardSelectAlignType, CardSelectSizeType } from './CardSelect.types';
+export declare const RadioShape: import('styled-components').StyledComponent<"div", any, {
     size?: CardSelectSizeType;
 }, never>;
-export declare const Title: import("styled-components").StyledComponent<"div", any, {
+export declare const Title: import('styled-components').StyledComponent<"div", any, {
     hasIcon: boolean;
     size?: CardSelectSizeType;
 }, never>;
-export declare const Description: import("styled-components").StyledComponent<"div", any, {
+export declare const Description: import('styled-components').StyledComponent<"div", any, {
     hasTitle?: boolean;
     hasIcon?: boolean;
     size?: CardSelectSizeType;
 }, never>;
-export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const IconWrapper: import('styled-components').StyledComponent<"div", any, {
     size?: CardSelectSizeType;
 }, never>;
-export declare const Aside: import("styled-components").StyledComponent<"div", any, {
+export declare const Aside: import('styled-components').StyledComponent<"div", any, {
     size?: CardSelectSizeType;
     elementsPosition?: CardSelectAlignType;
     tickVisible?: boolean;
 }, never>;
-export declare const Container: import("styled-components").StyledComponent<"div", any, {
+export declare const Container: import('styled-components').StyledComponent<"div", any, {
     disabled?: boolean;
     raised?: boolean;
     value?: boolean;
@@ -32,14 +32,14 @@ export declare const Container: import("styled-components").StyledComponent<"div
     stretchToFit?: boolean;
     error?: boolean;
 } & ThemeProps, never>;
-export declare const TagRibbonAnchor: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TagRibbon: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<{
+export declare const TagRibbonAnchor: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const TagRibbon: import('styled-components').StyledComponent<React.ForwardRefExoticComponent<{
     id?: string | number;
     name?: string;
     textColor?: string;
     color?: string;
     image?: string;
-    shape?: import("@synerise/ds-tag").TagShape;
+    shape?: import('@synerise/ds-tag').TagShape;
     removable?: boolean;
     className?: string;
     disabled?: boolean;
@@ -47,19 +47,19 @@ export declare const TagRibbon: import("styled-components").StyledComponent<Reac
     onRemove?: (tag: string | number) => void;
     prefixel?: React.ReactNode;
     suffixel?: React.ReactNode;
-    texts?: import("@synerise/ds-tag").TagTexts;
+    texts?: import('@synerise/ds-tag').TagTexts;
     asPill?: boolean;
     dashed?: boolean;
-    tooltipProps?: import("@synerise/ds-tooltip").TooltipProps;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "id" | "color" | "onClick" | "name" | "textColor" | "image" | "shape" | "removable" | "disabled" | "onRemove" | "prefixel" | "suffixel" | "texts" | "asPill" | "dashed" | "tooltipProps"> & import("@synerise/ds-utils").DataAttributes & React.RefAttributes<HTMLDivElement>>, any, {}, never>;
-export declare const Main: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TickIcon: import("styled-components").StyledComponent<"div", any, {
+    tooltipProps?: import('@synerise/ds-tooltip').TooltipProps;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "id" | "color" | "onClick" | "name" | "textColor" | "image" | "shape" | "removable" | "disabled" | "onRemove" | "prefixel" | "suffixel" | "texts" | "asPill" | "dashed" | "tooltipProps"> & import('@synerise/ds-utils').DataAttributes & React.RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const Main: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const TickIcon: import('styled-components').StyledComponent<"div", any, {
     size?: CardSelectSizeType;
     disabled?: boolean;
     selected?: boolean;
     elementsPosition: CardSelectAlignType;
 }, never>;
-export declare const CardWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const CardWrapper: import('styled-components').StyledComponent<"div", any, {
     size?: CardSelectSizeType;
     disabled?: boolean;
     stretchToFit?: boolean;

package/dist/CardSelect.styles.js

@@ -1,128 +1,156 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
-function _taggedTemplateLiteralLoose(e, t) { return t || (t = e.slice(0)), e.raw = t, e; }
-import styled, { css } from 'styled-components';
-import is, { isNot } from 'styled-is';
-import Tag from '@synerise/ds-tag';
-var TRANSITION = "\n  TRANSITION-timing-function: ease-in-out;\n  transition-duration: 0.2s;\n  transition-property: border-color, background-color;\n";
-var MAIN_PADDING = 8;
-var RADIO_WIDTH = 20;
-var RADIO_SMALL_WIDTH = 16;
-var RADIO_BORDER_WIDTH = 1;
-var TAG_LEFT_OFFSET = 32;
-var TAG_LEFT_OFFSET_TICK_SMALL = 44;
-var TAG_LEFT_OFFSET_TICK_LARGE = 68;
-var MAP_ELEMENTS_POSITION = {
-  left: 'flex-start',
-  right: 'flex-end',
-  center: 'center'
+import styled, { css } from "styled-components";
+import is, { isNot } from "styled-is";
+import Tag from "@synerise/ds-tag";
+const TRANSITION = `
+  TRANSITION-timing-function: ease-in-out;
+  transition-duration: 0.2s;
+  transition-property: border-color, background-color;
+`;
+const MAIN_PADDING = 8;
+const RADIO_WIDTH = 20;
+const RADIO_SMALL_WIDTH = 16;
+const RADIO_BORDER_WIDTH = 1;
+const TAG_LEFT_OFFSET = 32;
+const TAG_LEFT_OFFSET_TICK_SMALL = 44;
+const TAG_LEFT_OFFSET_TICK_LARGE = 68;
+const MAP_ELEMENTS_POSITION = {
+  left: "flex-start",
+  right: "flex-end",
+  center: "center"
 };
-var getVar = function getVar(name) {
-  return function (props) {
-    return props.theme.palette[name];
-  };
-};
-var getTransformValues = function getTransformValues(props) {
-  if (props.size === 'small') {
-    return 'translate(-2px,-2px)';
+const getVar = (name) => (props) => props.theme.palette[name];
+const getTransformValues = (props) => {
+  if (props.size === "small") {
+    return "translate(-2px,-2px)";
   }
-  if (props.elementsPosition === 'left') {
-    return 'translate(3px,-3px)';
+  if (props.elementsPosition === "left") {
+    return "translate(3px,-3px)";
   }
-  return 'translate( -3px, -3px)';
-};
-var sizeCondition = function sizeCondition(smallValue, mediumValue, props) {
-  return props.size === 'small' ? smallValue : mediumValue;
+  return "translate( -3px, -3px)";
 };
-export var RadioShape = styled.div.withConfig({
+const sizeCondition = (smallValue, mediumValue, props) => props.size === "small" ? smallValue : mediumValue;
+const RadioShape = /* @__PURE__ */ styled.div.withConfig({
   displayName: "CardSelectstyles__RadioShape",
   componentId: "sc-tfmgtj-0"
-})(["", ";width:", "px;height:", "px;border-radius:50%;border-width:", "px;border-style:solid;border-color:", ";margin:2px;&:hover{border-color:", ";}"], TRANSITION, function (props) {
-  return sizeCondition(RADIO_SMALL_WIDTH, RADIO_WIDTH, props);
-}, function (props) {
-  return sizeCondition(RADIO_SMALL_WIDTH, RADIO_WIDTH, props);
-}, RADIO_BORDER_WIDTH, getVar('grey-300'), getVar('grey-400'));
-export var Title = styled.div.withConfig({
+})(["", ";width:", "px;height:", "px;border-radius:50%;border-width:", "px;border-style:solid;border-color:", ";margin:2px;&:hover{border-color:", ";}"], TRANSITION, (props) => sizeCondition(RADIO_SMALL_WIDTH, RADIO_WIDTH, props), (props) => sizeCondition(RADIO_SMALL_WIDTH, RADIO_WIDTH, props), RADIO_BORDER_WIDTH, getVar("grey-300"), getVar("grey-400"));
+const Title = /* @__PURE__ */ styled.div.withConfig({
   displayName: "CardSelectstyles__Title",
   componentId: "sc-tfmgtj-1"
-})(["text-align:center;color:", ";font-weight:", ";width:100%;font-size:", ";", ""], getVar('grey-800'), function (props) {
-  return sizeCondition('400', '500', props);
-}, function (props) {
-  return sizeCondition('13px', '14px', props);
-}, function (props) {
-  return props.size === 'small' && props.hasIcon && css(["margin-top:4px;"]);
-});
-export var Description = styled.div.withConfig({
+})(["text-align:center;color:", ";font-weight:", ";width:100%;font-size:", ";", ""], getVar("grey-800"), (props) => sizeCondition("400", "500", props), (props) => sizeCondition("13px", "14px", props), (props) => props.size === "small" && props.hasIcon && css(["margin-top:4px;"]));
+const Description = /* @__PURE__ */ styled.div.withConfig({
   displayName: "CardSelectstyles__Description",
   componentId: "sc-tfmgtj-2"
-})(["&&{font-size:13px;text-align:center;max-width:176px;word-wrap:break-word;overflow-wrap:break-word;flex-grow:1;", ";}"], function (props) {
-  return props.hasTitle && css(["margin-top:8px;"]);
-});
-export var IconWrapper = styled.div.withConfig({
+})(["&&{font-size:13px;text-align:center;max-width:176px;word-wrap:break-word;overflow-wrap:break-word;flex-grow:1;", ";}"], (props) => props.hasTitle && css(["margin-top:8px;"]));
+const IconWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "CardSelectstyles__IconWrapper",
   componentId: "sc-tfmgtj-3"
-})(["margin-bottom:", "px;text-align:center;width:100%;"], function (props) {
-  return sizeCondition(0, MAIN_PADDING, props);
-});
-export var Aside = styled.div.withConfig({
+})(["margin-bottom:", "px;text-align:center;width:100%;"], (props) => sizeCondition(0, MAIN_PADDING, props));
+const Aside = /* @__PURE__ */ styled.div.withConfig({
   displayName: "CardSelectstyles__Aside",
   componentId: "sc-tfmgtj-4"
-})(["width:100%;justify-content:", ";top:0;left:0;display:flex;flex-direction:", ";position:absolute;padding:", ";"], function (props) {
-  return props.tickVisible ? 'space-between' : 'flex-end';
-}, function (props) {
-  return props.elementsPosition === 'left' ? 'row-reverse' : 'row';
-}, function (props) {
-  return sizeCondition('4px', '14px', props);
-});
-export var Container = styled.div.withConfig({
+})(["width:100%;justify-content:", ";top:0;left:0;display:flex;flex-direction:", ";position:absolute;padding:", ";"], (props) => props.tickVisible ? "space-between" : "flex-end", (props) => props.elementsPosition === "left" ? "row-reverse" : "row", (props) => sizeCondition("4px", "14px", props));
+const Container = /* @__PURE__ */ styled.div.withConfig({
   displayName: "CardSelectstyles__Container",
   componentId: "sc-tfmgtj-5"
-})(["", " ", ";background-color:", ";border-radius:", ";", " display:flex;flex:1;justify-content:", ";border-color:", ";position:relative;padding:", ";cursor:pointer;&&:focus-within{box-shadow:0px 0px 0px 2px ", ";}", " ", " ", " ", " ", " ", ",", ",", "{text-align:", ";}", "{margin-left:", ";margin-right:", ";}", " ", ";"], is('stretchToFit')(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    height: 100%;\n  "]))), TRANSITION, getVar('white'), function (props) {
-  return props.theme.variable('@border-radius-base');
-}, is('error')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n     &&, &&:hover {\n     box-shadow:  0px 0px 0px 2px ", ";\n     }\n  "])), getVar('red-500')), function (props) {
-  return MAP_ELEMENTS_POSITION[props.elementsPosition];
-}, getVar('white'), function (props) {
-  return props.size === 'small' ? '16px' : '24px';
-}, getVar('blue-600'), isNot('pressed') && isNot('value')(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["box-shadow:  0px 0px 0px 1px ", ";"])), getVar('grey-300')), is('value')(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  box-shadow:  0px 0px 0px 2px ", ";\n  "])), getVar('blue-600')), is('value') && is('pressed')(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose([" box-shadow:  0px 0px 0px 2px ", ";"])), getVar('blue-600')), is('value') && is('raised')(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  box-shadow:  0px 0px 0px 2px ", ";\n  "])), getVar('blue-600')), is('value') && is('pressed')(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose([" box-shadow:  0px 0px 0px 2px ", ";"])), getVar('blue-600')), Title, Description, IconWrapper, function (props) {
-  return props.elementsPosition;
-}, IconWrapper, function (props) {
-  return props.elementsPosition === 'left' ? '-18px' : '0px';
-}, function (props) {
-  return props.elementsPosition === 'right' ? '-18px' : '0px';
-}, isNot('disabled')(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n    \n\n    &:hover {\n      ", " {\n        border-color: ", ";\n      }\n    }\n\n    ", ";\n    \n    ", "\n  "])), RadioShape, getVar('grey-400'), isNot('raised')(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), isNot('value')(_templateObject0 || (_templateObject0 = _taggedTemplateLiteralLoose(["\n       box-shadow: 0px 0px 0px 1px ", ";\n        \n        &:hover, &:active {\n          box-shadow: 0px 0px 0px 1px ", ";\n        }\n      "])), getVar('grey-300'), getVar('grey-400'))), is('raised')(_templateObject1 || (_templateObject1 = _taggedTemplateLiteralLoose(["\n      ", "\n      \n    "])), isNot('value')(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n        box-shadow: ", ";\n        \n        &:hover, &:active {\n          box-shadow: ", ";\n        }\n      "])), function (props) {
-  return props.theme.variable('@box-shadow-base') || 'none';
-}, function (props) {
-  return props.theme.variable('@box-shadow-active') || 'none';
-}))), is('disabled')(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n    opacity: 0.4;\n    pointer-events:none;\n\n    ", "\n    \n  "])), isNot('raised')(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n\n      ", "\n    "])), isNot('value')(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n        box-shadow: 0px 0px 0px 1px ", ";\n      "])), getVar('grey-200')))));
-export var TagRibbonAnchor = styled.div.withConfig({
+})(["", " ", ";background-color:", ";border-radius:", ";", " display:flex;flex:1;justify-content:", ";border-color:", ";position:relative;padding:", ";cursor:pointer;&&:focus-within{box-shadow:0px 0px 0px 2px ", ";}", " ", " ", " ", " ", " ", ",", ",", "{text-align:", ";}", "{margin-left:", ";margin-right:", ";}", " ", ";"], is("stretchToFit")`
+    height: 100%;
+  `, TRANSITION, getVar("white"), (props) => props.theme.variable("@border-radius-base"), is("error")`
+     &&, &&:hover {
+     box-shadow:  0px 0px 0px 2px ${getVar("red-500")};
+     }
+  `, (props) => MAP_ELEMENTS_POSITION[props.elementsPosition], getVar("white"), (props) => props.size === "small" ? "16px" : "24px", getVar("blue-600"), isNot("pressed") && isNot("value")`box-shadow:  0px 0px 0px 1px ${getVar("grey-300")};`, is("value")`
+  box-shadow:  0px 0px 0px 2px ${getVar("blue-600")};
+  `, is("value") && is("pressed")` box-shadow:  0px 0px 0px 2px ${getVar("blue-600")};`, is("value") && is("raised")`
+  box-shadow:  0px 0px 0px 2px ${getVar("blue-600")};
+  `, is("value") && is("pressed")` box-shadow:  0px 0px 0px 2px ${getVar("blue-600")};`, Title, Description, IconWrapper, (props) => props.elementsPosition, IconWrapper, (props) => props.elementsPosition === "left" ? "-18px" : "0px", (props) => props.elementsPosition === "right" ? "-18px" : "0px", isNot("disabled")`
+    
+
+    &:hover {
+      ${RadioShape} {
+        border-color: ${getVar("grey-400")};
+      }
+    }
+
+    ${isNot("raised")`
+      ${isNot("value")`
+       box-shadow: 0px 0px 0px 1px ${getVar("grey-300")};
+        
+        &:hover, &:active {
+          box-shadow: 0px 0px 0px 1px ${getVar("grey-400")};
+        }
+      `};
+    `};
+    
+    ${is("raised")`
+      ${isNot("value")`
+        box-shadow: ${(props) => props.theme.variable("@box-shadow-base") || "none"};
+        
+        &:hover, &:active {
+          box-shadow: ${(props) => props.theme.variable("@box-shadow-active") || "none"};
+        }
+      `}
+      
+    `}
+  `, is("disabled")`
+    opacity: 0.4;
+    pointer-events:none;
+
+    ${isNot("raised")`
+
+      ${isNot("value")`
+        box-shadow: 0px 0px 0px 1px ${getVar("grey-200")};
+      `}
+    `}
+    
+  `);
+const TagRibbonAnchor = /* @__PURE__ */ styled.div.withConfig({
   displayName: "CardSelectstyles__TagRibbonAnchor",
   componentId: "sc-tfmgtj-6"
 })(["display:flex;height:0;overflow:visible;"]);
-export var TagRibbon = styled(Tag).withConfig({
+const TagRibbon = /* @__PURE__ */ styled(Tag).withConfig({
   displayName: "CardSelectstyles__TagRibbon",
   componentId: "sc-tfmgtj-7"
 })(["position:relative;z-index:1;top:-12px;margin:0;"]);
-export var Main = styled.div.withConfig({
+const Main = /* @__PURE__ */ styled.div.withConfig({
   displayName: "CardSelectstyles__Main",
   componentId: "sc-tfmgtj-8"
 })(["display:flex;flex-direction:column;flex-wrap:wrap;align-items:center;justify-content:flex-start;"]);
-export var TickIcon = styled.div.withConfig({
+const TickIcon = /* @__PURE__ */ styled.div.withConfig({
   displayName: "CardSelectstyles__TickIcon",
   componentId: "sc-tfmgtj-9"
-})(["", " ", " ", ""], is('selected')(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n    transform: ", "; \n  "])), function (props) {
-  return getTransformValues(props);
-}), is('disabled')(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n    ", " {\n      background-color: ", ";\n      border-color: ", ";\n    }\n  "])), RadioShape, getVar('grey-050'), getVar('grey-200')), isNot('disabled')(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n    ", " {\n      cursor: pointer;\n    }\n  "])), RadioShape));
-export var CardWrapper = styled.div.withConfig({
+})(["", " ", " ", ""], is("selected")`
+    transform: ${(props) => getTransformValues(props)}; 
+  `, is("disabled")`
+    ${RadioShape} {
+      background-color: ${getVar("grey-050")};
+      border-color: ${getVar("grey-200")};
+    }
+  `, isNot("disabled")`
+    ${RadioShape} {
+      cursor: pointer;
+    }
+  `);
+const CardWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "CardSelectstyles__CardWrapper",
   componentId: "sc-tfmgtj-10"
-})(["position:relative;", " ", " ", "{", "}", "{justify-content:", ";padding-", ":", "px;}", "{", ":16px;}"], is('disabled')(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n    cursor:not-allowed;\n  "]))), is('stretchToFit')(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n    height: 100%;\n  "]))), Title, function (props) {
-  return props.hasTick && !props.hasIcon && css(["padding:0 24px;"]);
-}, TagRibbonAnchor, function (props) {
-  return props.elementsPosition === 'right' ? 'flex-start' : 'flex-end';
-}, function (props) {
-  return props.elementsPosition === 'left' ? 'right' : 'left';
-}, function (props) {
-  var withTickOffset = props.size === 'small' ? TAG_LEFT_OFFSET_TICK_SMALL : TAG_LEFT_OFFSET_TICK_LARGE;
+})(["position:relative;", " ", " ", "{", "}", "{justify-content:", ";padding-", ":", "px;}", "{", ":16px;}"], is("disabled")`
+    cursor:not-allowed;
+  `, is("stretchToFit")`
+    height: 100%;
+  `, Title, (props) => props.hasTick && !props.hasIcon && css(["padding:0 24px;"]), TagRibbonAnchor, (props) => props.elementsPosition === "right" ? "flex-start" : "flex-end", (props) => props.elementsPosition === "left" ? "right" : "left", (props) => {
+  const withTickOffset = props.size === "small" ? TAG_LEFT_OFFSET_TICK_SMALL : TAG_LEFT_OFFSET_TICK_LARGE;
   return props.hasTick ? withTickOffset : TAG_LEFT_OFFSET;
-}, TagRibbon, function (props) {
-  return props.elementsPosition === 'left' ? 'left' : 'right';
-});
+}, TagRibbon, (props) => props.elementsPosition === "left" ? "left" : "right");
+export {
+  Aside,
+  CardWrapper,
+  Container,
+  Description,
+  IconWrapper,
+  Main,
+  RadioShape,
+  TagRibbon,
+  TagRibbonAnchor,
+  TickIcon,
+  Title
+};

package/dist/CardSelect.types.d.ts

@@ -1,6 +1,6 @@
-import type { Key, ReactNode } from 'react';
-import type { TagProps } from '@synerise/ds-tag';
-import type { TooltipProps } from '@synerise/ds-tooltip';
+import { Key, ReactNode } from 'react';
+import { TagProps } from '@synerise/ds-tag';
+import { TooltipProps } from '@synerise/ds-tooltip';
 type CardSelectTagProps = Omit<TagProps, 'shape' | 'removable' | 'asPill' | 'onRemove' | 'image' | 'texts'>;
 export type CardSelectAlignType = 'left' | 'center' | 'right';
 export type CardSelectSizeType = 'small' | 'medium';

package/dist/CardSelect.types.js

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

package/dist/CardSelectGroup/CardSelectGroup.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type CardSelectGroupProps } from './CardSelectGroup.types';
+import { default as React } from 'react';
+import { CardSelectGroupProps } from './CardSelectGroup.types';
 declare const CardSelectGroup: ({ className, children, items, size, width, columns, }: CardSelectGroupProps) => React.JSX.Element;
 export default CardSelectGroup;

package/dist/CardSelectGroup/CardSelectGroup.js

@@ -1,29 +1,20 @@
-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, { Children } from 'react';
-import CardSelect from '../CardSelect';
-import * as S from './CardSelectGroup.styles';
-var DEFAULT_COLUMNS = 2;
-var DEFAULT_SIZE = 'large';
-var CardSelectGroup = function CardSelectGroup(_ref) {
-  var className = _ref.className,
-    children = _ref.children,
-    items = _ref.items,
-    size = _ref.size,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? DEFAULT_SIZE : _ref$width,
-    _ref$columns = _ref.columns,
-    columns = _ref$columns === void 0 ? DEFAULT_COLUMNS : _ref$columns;
-  var cardsCount = (items == null ? void 0 : items.length) || Children.toArray(children).length;
-  return /*#__PURE__*/React.createElement(S.CardSelectGroupWrapper, {
-    className: className,
-    size: size || width,
-    columns: columns,
-    itemsCount: cardsCount
-  }, items ? items.map(function (item) {
-    return /*#__PURE__*/React.createElement(CardSelect, _extends({}, item, {
-      key: item.key,
-      size: size || item.size
-    }));
-  }) : children);
+import { jsx } from "react/jsx-runtime";
+import { Children, createElement } from "react";
+import CardSelect from "../CardSelect.js";
+import { CardSelectGroupWrapper } from "./CardSelectGroup.styles.js";
+const DEFAULT_COLUMNS = 2;
+const DEFAULT_SIZE = "large";
+const CardSelectGroup = ({
+  className,
+  children,
+  items,
+  size,
+  width = DEFAULT_SIZE,
+  columns = DEFAULT_COLUMNS
+}) => {
+  const cardsCount = items?.length || Children.toArray(children).length;
+  return /* @__PURE__ */ jsx(CardSelectGroupWrapper, { className, size: size || width, columns, itemsCount: cardsCount, children: items ? items.map((item) => /* @__PURE__ */ createElement(CardSelect, { ...item, key: item.key, size: size || item.size })) : children });
+};
+export {
+  CardSelectGroup as default
 };
-export default CardSelectGroup;

package/dist/CardSelectGroup/CardSelectGroup.styles.d.ts

@@ -1,9 +1,9 @@
-export declare const CardSelectGroupWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const CardSelectGroupWrapper: import('styled-components').StyledComponent<"div", any, {
     itemsCount?: number;
     size: "small" | "medium" | "large";
     columns: number | null;
 }, never>;
-export declare const CardGroup: import("styled-components").StyledComponent<"div", any, {
+export declare const CardGroup: import('styled-components').StyledComponent<"div", any, {
     itemsCount?: number;
     size: "small" | "medium" | "large";
     columns: number | null;

package/dist/CardSelectGroup/CardSelectGroup.styles.js

@@ -1,12 +1,10 @@
-import styled from 'styled-components';
-export var CardSelectGroupWrapper = styled.div.withConfig({
+import styled from "styled-components";
+const CardSelectGroupWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "CardSelectGroupstyles__CardSelectGroupWrapper",
   componentId: "sc-1xnksbf-0"
-})(["padding:24px;display:grid;grid-template-columns:", ";gap:", ";"], function (props) {
-  return new Array(props.columns || props.itemsCount).fill('1fr').join(' ');
-}, function (props) {
-  return props.size === 'small' ? '16px' : '24px';
-});
-
-// @deprecated - use CardSelectGroupWrapper instead
-export var CardGroup = CardSelectGroupWrapper;
+})(["padding:24px;display:grid;grid-template-columns:", ";gap:", ";"], (props) => new Array(props.columns || props.itemsCount).fill("1fr").join(" "), (props) => props.size === "small" ? "16px" : "24px");
+const CardGroup = CardSelectGroupWrapper;
+export {
+  CardGroup,
+  CardSelectGroupWrapper
+};

package/dist/CardSelectGroup/CardSelectGroup.types.d.ts

@@ -1,5 +1,5 @@
-import type { Key, ReactNode } from 'react';
-import { type CardSelectProps } from '../CardSelect.types';
+import { Key, ReactNode } from 'react';
+import { CardSelectProps } from '../CardSelect.types';
 type CardSelectPropsWithKey = Omit<CardSelectProps, 'key'> & {
     key: Key;
 };

package/dist/CardSelectGroup/CardSelectGroup.types.js

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

package/dist/constants.js

@@ -1,4 +1,10 @@
-export var DEFAULT_TICK_SIZE_SMALL = 24;
-export var DEFAULT_TICK_SIZE_LARGE = 30;
-export var DEFAULT_ICON_SIZE_SMALL = 48;
-export var DEFAULT_ICON_SIZE_LARGE = 96;
+const DEFAULT_TICK_SIZE_SMALL = 24;
+const DEFAULT_TICK_SIZE_LARGE = 30;
+const DEFAULT_ICON_SIZE_SMALL = 48;
+const DEFAULT_ICON_SIZE_LARGE = 96;
+export {
+  DEFAULT_ICON_SIZE_LARGE,
+  DEFAULT_ICON_SIZE_SMALL,
+  DEFAULT_TICK_SIZE_LARGE,
+  DEFAULT_TICK_SIZE_SMALL
+};

package/dist/index.js

@@ -1,2 +1,6 @@
-export { default } from './CardSelect';
-export { default as CardSelectGroup } from './CardSelectGroup/CardSelectGroup';
+import { default as default2 } from "./CardSelect.js";
+import { default as default3 } from "./CardSelectGroup/CardSelectGroup.js";
+export {
+  default3 as CardSelectGroup,
+  default2 as default
+};

package/dist/modules.d.js

@@ -0,0 +1 @@
+

package/dist/modules.d.ts

@@ -0,0 +1 @@
+declare module 'styled-is';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-card-select",
-  "version": "1.1.41",
+  "version": "1.1.43",
   "description": "Card-Select 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,10 +35,10 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-icon": "^1.15.0",
-    "@synerise/ds-tag": "^1.4.17",
-    "@synerise/ds-tooltip": "^1.4.9",
-    "@synerise/ds-utils": "^1.7.0",
+    "@synerise/ds-icon": "^1.15.2",
+    "@synerise/ds-tag": "^1.4.19",
+    "@synerise/ds-tooltip": "^1.4.11",
+    "@synerise/ds-utils": "^1.7.1",
     "styled-is": "^1.3.0"
   },
   "peerDependencies": {
@@ -48,5 +48,5 @@
     "styled-components": "^5.3.3",
     "vitest": "4"
   },
-  "gitHead": "8efc031fa688c0b87c7b3915bae93546bb63bcac"
+  "gitHead": "c2384982c3533a31eb5e5e0408f8dcecb2b0f399"
 }