@capillarytech/blaze-ui 6.1.1 → 6.1.2

package/CapRadioCard/styles.css

@@ -6,39 +6,39 @@
 /* Border Width */
 /* Transition */
 /* Timezones Footer */
-.capRadioCardV2 .radioCardContentContainer {
+.cap-radioCard-v2 .radio-card-content-container {
   width: 100%;
 }
-.capRadioCardV2 .radioCardContent,
-.capRadioCardV2 .radioCardHeader {
+.cap-radioCard-v2 .radio-card-content,
+.cap-radioCard-v2 .radio-card-header {
   font-size: 0.857rem;
   line-height: 1.17;
   letter-spacing: normal;
   color: #5e6c84;
   padding-top: 0.285rem;
 }
-.capRadioCardV2 .radioCardIcon {
+.cap-radioCard-v2 .radio-card-icon {
   width: 3.429rem;
   height: 3.429rem;
   object-fit: contain;
   margin-right: 1.714rem;
 }
-.capRadioCardV2 .radioCardChecked {
+.cap-radioCard-v2 .radio-card-checked {
   position: absolute;
   right: -0.429rem;
   top: -0.857rem;
   display: none;
 }
-.capRadioCardV2 .ant-radio-button-wrapper-checked .radioCardChecked {
+.cap-radioCard-v2 .ant-radio-button-wrapper-checked .radio-card-checked {
   display: block;
   z-index: 1;
 }
-.capRadioCardV2 .divIcon {
+.cap-radioCard-v2 .div-icon {
   position: absolute;
   top: 25%;
   left: 25%;
 }
-.capRadioCardV2 .iconContainer {
+.cap-radioCard-v2 .icon-container {
   padding-right: 1.714rem;
   height: 3.429rem;
   width: 3.429rem;
@@ -49,11 +49,11 @@
   border-radius: 1.286rem;
   position: relative;
 }
-.capRadioCardV2 .iconContainer.greenColor {
+.cap-radioCard-v2 .icon-container.green-color {
   background-color: #47af46;
   color: #ffffff;
 }
-.capRadioCardV2 .radioButtonWrapper {
+.cap-radioCard-v2 .radio-button-wrapper {
   position: relative;
   height: 120px;
   width: 372px;
@@ -64,60 +64,60 @@
   border-top-width: 1px;
   vertical-align: top;
 }
-.capRadioCardV2 .disabledWrapper {
+.cap-radioCard-v2 .disabled-wrapper {
   opacity: 0.5;
 }
-.capRadioCardV2 .disabledWrapper.customDisableRadioButton {
+.cap-radioCard-v2 .disabled-wrapper.custom-disable-radio-button {
   border: unset;
   max-height: 5.357rem;
 }
-.capRadioCardV2 .disabledWrapper.customDisableRadioButton .radioCardChecked {
+.cap-radioCard-v2 .disabled-wrapper.custom-disable-radio-button .radio-card-checked {
   display: none;
 }
-.capRadioCardV2 .disabledWrapper.customDisableRadioButton .ant-card-body {
+.cap-radioCard-v2 .disabled-wrapper.custom-disable-radio-button .ant-card-body {
   padding: unset;
 }
-.capRadioCardV2 .customDisableRadioButton {
+.cap-radioCard-v2 .custom-disable-radio-button {
   border: unset;
   max-height: 5.357rem;
 }
-.capRadioCardV2 .customDisableRadioButton .ant-card-body {
+.cap-radioCard-v2 .custom-disable-radio-button .ant-card-body {
   padding: unset;
 }
-.capRadioCardV2 .ant-card-body {
+.cap-radioCard-v2 .ant-card-body {
   display: flex;
   padding: 1.142rem;
   height: 100%;
   position: relative;
 }
-.capRadioCardV2 .infoIconWrapper {
+.cap-radioCard-v2 .info-icon-wrapper {
   position: absolute;
   top: 1.142rem;
   right: 1.142rem;
 }
-.capRadioCardV2 .ant-card {
+.cap-radioCard-v2 .ant-card {
   height: 100%;
   border: none;
 }
-.capRadioCardV2.smallRadioCard .iconContainer {
+.cap-radioCard-v2.smallRadioCard .icon-container {
   padding-right: unset;
   background-color: unset;
 }
-.capRadioCardV2.smallRadioCard .radioCardIcon {
+.cap-radioCard-v2.smallRadioCard .radio-card-icon {
   height: 1.428rem;
   width: 1.714rem;
 }
-.capRadioCardV2.smallRadioCard .divIcon {
+.cap-radioCard-v2.smallRadioCard .div-icon {
   top: 0%;
   left: 0%;
 }
-.capRadioCardV2.smallRadioCard .radioButtonWrapper {
+.cap-radioCard-v2.smallRadioCard .radio-button-wrapper {
   margin: 0.428rem 0.857rem 0.428rem 0;
 }
-.capRadioCardV2.smallRadioCard .radioButtonWrapper:nth-child(3n) {
+.cap-radioCard-v2.smallRadioCard .radio-button-wrapper:nth-child(3n) {
   margin-right: 0;
 }
-.capRadioCardV2.smallRadioCard .ant-card-body {
+.cap-radioCard-v2.smallRadioCard .ant-card-body {
   padding: 0.857rem;
   height: 48px;
 }

package/CapRadioCard/styles.module.scss.js

@@ -1,47 +1,21 @@
-import './styles.css';const capRadioCardV2 = "capRadioCardV2";
-const radioCardContentContainer = "radioCardContentContainer";
-const radioCardContent = "radioCardContent";
-const radioCardHeader = "radioCardHeader";
-const radioCardIcon = "radioCardIcon";
-const radioCardChecked = "radioCardChecked";
-const divIcon = "divIcon";
-const iconContainer = "iconContainer";
-const greenColor = "greenColor";
-const radioButtonWrapper = "radioButtonWrapper";
-const disabledWrapper = "disabledWrapper";
-const customDisableRadioButton = "customDisableRadioButton";
-const infoIconWrapper = "infoIconWrapper";
-const smallRadioCard = "smallRadioCard";
+import './styles.css';const smallRadioCard = "smallRadioCard";
 const styles = {
-  capRadioCardV2,
-  radioCardContentContainer,
-  radioCardContent,
-  radioCardHeader,
-  radioCardIcon,
-  radioCardChecked,
-  divIcon,
-  iconContainer,
-  greenColor,
-  radioButtonWrapper,
-  disabledWrapper,
-  customDisableRadioButton,
-  infoIconWrapper,
+  "cap-radioCard-v2": "cap-radioCard-v2",
+  "radio-card-content-container": "radio-card-content-container",
+  "radio-card-content": "radio-card-content",
+  "radio-card-header": "radio-card-header",
+  "radio-card-icon": "radio-card-icon",
+  "radio-card-checked": "radio-card-checked",
+  "div-icon": "div-icon",
+  "icon-container": "icon-container",
+  "green-color": "green-color",
+  "radio-button-wrapper": "radio-button-wrapper",
+  "disabled-wrapper": "disabled-wrapper",
+  "custom-disable-radio-button": "custom-disable-radio-button",
+  "info-icon-wrapper": "info-icon-wrapper",
   smallRadioCard
 };
 export {
-  capRadioCardV2,
-  customDisableRadioButton,
   styles as default,
-  disabledWrapper,
-  divIcon,
-  greenColor,
-  iconContainer,
-  infoIconWrapper,
-  radioButtonWrapper,
-  radioCardChecked,
-  radioCardContent,
-  radioCardContentContainer,
-  radioCardHeader,
-  radioCardIcon,
   smallRadioCard
 };

package/CapRadioCard/styles.scss

@@ -1,12 +1,12 @@
 @import '../styles/_variables.scss';
 
-.capRadioCardV2 {
-  .radioCardContentContainer {
+.cap-radioCard-v2 {
+  .radio-card-content-container {
     width: 100%;
   }
 
-  .radioCardContent,
-  .radioCardHeader {
+  .radio-card-content,
+  .radio-card-header {
     font-size: $FONT_SIZE_S;
     line-height: 1.17;
     letter-spacing: normal;
@@ -14,32 +14,32 @@
     padding-top: $CAP_SPACE_04;
   }
 
-  .radioCardIcon {
+  .radio-card-icon {
     width: 3.429rem;
     height: 3.429rem;
     object-fit: contain;
     margin-right: $CAP_SPACE_24;
   }
 
-  .radioCardChecked {
+  .radio-card-checked {
     position: absolute;
     right: -0.429rem;
     top: -0.857rem;
     display: none;
   }
 
-  :global(.ant-radio-button-wrapper-checked) .radioCardChecked {
+  :global(.ant-radio-button-wrapper-checked) .radio-card-checked {
     display: block;
     z-index: 1;
   }
 
-  .divIcon {
+  .div-icon {
     position: absolute;
     top: 25%;
     left: 25%;
   }
 
-  .iconContainer {
+  .icon-container {
     padding-right: $CAP_SPACE_24;
     height: 3.429rem;
     width: 3.429rem;
@@ -50,13 +50,13 @@
     border-radius: 1.286rem;
     position: relative;
 
-    &.greenColor {
+    &.green-color {
       background-color: map-get($CAP_PRIMARY, base);
       color: $CAP_WHITE;
     }
   }
 
-  .radioButtonWrapper {
+  .radio-button-wrapper {
     position: relative;
     height: 120px;
     width: 372px;
@@ -68,14 +68,14 @@
     vertical-align: top;
   }
 
-  .disabledWrapper {
+  .disabled-wrapper {
     opacity: 0.5;
 
-    &.customDisableRadioButton {
+    &.custom-disable-radio-button {
       border: unset;
       max-height: 5.357rem;
 
-      .radioCardChecked {
+      .radio-card-checked {
         display: none;
       }
 
@@ -85,7 +85,7 @@
     }
   }
 
-  .customDisableRadioButton {
+  .custom-disable-radio-button {
     border: unset;
     max-height: 5.357rem;
 
@@ -101,7 +101,7 @@
     position: relative;
   }
 
-  .infoIconWrapper {
+  .info-icon-wrapper {
     position: absolute;
     top: $CAP_SPACE_16;
     right: $CAP_SPACE_16;
@@ -113,22 +113,22 @@
   }
 
   &.smallRadioCard {
-    .iconContainer {
+    .icon-container {
       padding-right: unset;
       background-color: unset;
     }
 
-    .radioCardIcon {
+    .radio-card-icon {
       height: $CAP_SPACE_20;
       width: $CAP_SPACE_24;
     }
 
-    .divIcon {
+    .div-icon {
       top: 0%;
       left: 0%;
     }
 
-    .radioButtonWrapper {
+    .radio-button-wrapper {
       margin: $CAP_SPACE_06 $CAP_SPACE_12 $CAP_SPACE_06 0;
 
       &:nth-child(3n) {

package/CapRadioCard/types.d.ts

@@ -20,6 +20,26 @@ export interface CapRadioCardPane {
 }
 export interface CapRadioCardProps extends Omit<React.ComponentProps<typeof Radio.Group>, 'size'> {
     className?: string;
+    /** Root (RadioGroup) */
+    rootClassName?: string;
+    /** RadioButton wrapper */
+    radioButtonWrapperClassName?: string;
+    /** Checked icon */
+    checkedIconClassName?: string;
+    /** Icon wrapper div */
+    iconWrapperClassName?: string;
+    /** Icon container div */
+    iconContainerClassName?: string;
+    /** Div wrapping icon content */
+    divIconClassName?: string;
+    /** Content container */
+    contentContainerClassName?: string;
+    /** Header div */
+    headerClassName?: string;
+    /** Content div */
+    contentClassName?: string;
+    /** Info icon wrapper */
+    infoIconWrapperClassName?: string;
     panes?: CapRadioCardPane[];
     cardHeight?: number | string;
     cardWidth?: number | string;

package/CapRadioCard/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../components/CapRadioCard/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,gBAAgB;IAC/B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE;QACb,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACxB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KACxB,CAAC;IACF,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAC/F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAChC;AAGD,MAAM,MAAM,uBAAuB,GAAG,gBAAgB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../components/CapRadioCard/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,gBAAgB;IAC/B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE;QACb,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACxB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KACxB,CAAC;IACF,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAC/F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0BAA0B;IAC1B,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,mBAAmB;IACnB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uBAAuB;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,yBAAyB;IACzB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,gCAAgC;IAChC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,wBAAwB;IACxB,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,iBAAiB;IACjB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,wBAAwB;IACxB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAChC;AAGD,MAAM,MAAM,uBAAuB,GAAG,gBAAgB,CAAC"}

package/CapSelectFilter/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapSelectFilter/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAM7E,eAAO,MAAM,cAAc,GAAI,OAAO,uBAAuB,EAAE,EAAE,gBAAgB,MAAM;;;;;GAStF,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,MAAM,KAAK,CAAC,SAAS,EACrB,oBAAoB,MAAM,EAC1B,gBAAgB,MAAM,4CAcvB,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA0DnD,CAAC;AAEF,eAAe,eAAe,CAAC;AAC/B,YAAY,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapSelectFilter/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAM7E,eAAO,MAAM,cAAc,GAAI,OAAO,uBAAuB,EAAE,EAAE,gBAAgB,MAAM;;;;;GAStF,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,MAAM,KAAK,CAAC,SAAS,EACrB,oBAAoB,MAAM,EAC1B,gBAAgB,MAAM,4CAcvB,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAyDnD,CAAC;AAEF,eAAe,eAAe,CAAC;AAC/B,YAAY,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC"}

package/CapSelectFilter/index.js

@@ -11,8 +11,8 @@ const renderMenuItem = (items, selectedValue) => {
   return items.map((item) => ({
     key: item.key,
     label: /* @__PURE__ */ jsx(CapHeadingWithStatic, { type: "h5", children: item.label }),
-    className: classNames(styles["menu-item"], {
-      [styles["menu-item-selected"]]: item.value === selectedValue
+    className: classNames(styles[`${clsPrefix}-dropdown-menu-item`], {
+      [styles[`${clsPrefix}-dropdown-menu-item-selected`]]: item.value === selectedValue
     }),
     "data-value": item.value
   }));
@@ -21,7 +21,7 @@ const renderDropdownMenu = (menu, dropdownMaxHeight, dropdownWidth) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: styles["menu-wrapper"],
+      className: styles[`${clsPrefix}-dropdown-menu-wrapper`],
       style: {
         maxHeight: dropdownMaxHeight,
         width: dropdownWidth,
@@ -34,11 +34,11 @@ const renderDropdownMenu = (menu, dropdownMaxHeight, dropdownWidth) => {
 const CapSelectFilter = ({
   className,
   overlayClassName,
+  triggerClass,
   onSelect,
   selectedValue,
   placeholder,
   placement = "bottomLeft",
-  width = "fit-content",
   dropdownMaxHeight = "320px",
   dropdownWidth = "228px",
   data = [],
@@ -67,22 +67,21 @@ const CapSelectFilter = ({
       trigger: ["click"],
       menu: { items: renderMenuItem(data, selectedValue), onClick: handleMenuClick },
       className: classNames(styles[clsPrefix]),
-      overlayClassName: classNames(`${clsPrefix}-overlay`, overlayClassName),
+      overlayClassName: classNames(styles[clsPrefix], `${clsPrefix}-overlay`, overlayClassName),
       dropdownRender: (menu) => renderDropdownMenu(menu, dropdownMaxHeight, dropdownWidth),
       getPopupContainer: (trigger) => trigger.parentNode,
       ...rest,
       children: /* @__PURE__ */ jsxs(
         "div",
         {
-          className: classNames(styles["styled-div"], className, {
-            [styles["styled-div-selected"]]: selectedValue,
-            [styles["styled-div-with-badge"]]: Boolean(showBadge) && Boolean(selectedValue)
+          className: classNames(styles[`${clsPrefix}-trigger`], className, triggerClass, {
+            [styles[`${clsPrefix}-trigger-selected`]]: selectedValue,
+            [styles[`${clsPrefix}-trigger-with-badge`]]: Boolean(showBadge) && Boolean(selectedValue)
           }),
-          style: { width },
           children: [
             /* @__PURE__ */ jsx(CapLabelInline, { type: "label9", children: placeholder }),
-            showBadge && selectedValue && /* @__PURE__ */ jsx("div", { className: styles["badge"], children: [selectedValue].length }),
-            /* @__PURE__ */ jsx(CapIcon, { className: styles["dropdown-icon"], type: "down", size: "s" })
+            showBadge && selectedValue && /* @__PURE__ */ jsx("div", { className: styles[`${clsPrefix}-trigger-badge`], children: [selectedValue].length }),
+            /* @__PURE__ */ jsx(CapIcon, { className: styles[`${clsPrefix}-trigger-icon`], type: "down", size: "s" })
           ]
         }
       )

package/CapSelectFilter/styles.css

@@ -9,7 +9,8 @@
 .cap-select-filter-v2 {
   display: inline-block;
 }
-.styled-div {
+.cap-select-filter-v2-trigger {
+  width: fit-content;
   position: relative;
   display: flex;
   align-items: center;
@@ -21,32 +22,32 @@
   cursor: pointer;
   transition: all 0.3s ease;
 }
-.styled-div:hover {
+.cap-select-filter-v2-trigger:hover {
   border-color: #091e42;
 }
-.styled-div.styled-div-selected {
+.cap-select-filter-v2-trigger.cap-select-filter-v2-trigger-selected {
   border: none;
   background-color: #ecece7;
 }
-.styled-div.ant-dropdown-open {
+.cap-select-filter-v2-trigger.ant-dropdown-open {
   border-color: #091e42;
 }
-.menu-wrapper {
+.cap-select-filter-v2-dropdown-menu-wrapper {
   border: 0.071rem solid #e8e8e8;
 }
-.menu-wrapper .ant-dropdown-menu {
+.cap-select-filter-v2-dropdown-menu-wrapper .ant-dropdown-menu {
   border: none;
   box-shadow: none;
 }
-.menu-item {
+.cap-select-filter-v2-dropdown-menu-item {
   background-color: transparent;
   border-left: 0.214rem solid transparent;
 }
-.menu-item.menu-item-selected {
+.cap-select-filter-v2-dropdown-menu-item.cap-select-filter-v2-dropdown-menu-item-selected {
   background-color: #e9f0fe;
   border-left-color: #2466ea;
 }
-.badge {
+.cap-select-filter-v2-trigger-badge {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -60,7 +61,7 @@
   font-weight: 500;
   line-height: normal;
 }
-.dropdown-icon {
+.cap-select-filter-v2-trigger-icon {
   position: relative;
   width: 1.786rem;
   min-width: 1.786rem;

package/CapSelectFilter/styles.module.scss.js

@@ -1,16 +1,14 @@
-import './styles.css';const badge = "badge";
-const styles = {
+import './styles.css';const styles = {
   "cap-select-filter-v2": "cap-select-filter-v2",
-  "styled-div": "styled-div",
-  "styled-div-selected": "styled-div-selected",
+  "cap-select-filter-v2-trigger": "cap-select-filter-v2-trigger",
+  "cap-select-filter-v2-trigger-selected": "cap-select-filter-v2-trigger-selected",
   "ant-dropdown-open": "ant-dropdown-open",
-  "menu-wrapper": "menu-wrapper",
-  "menu-item": "menu-item",
-  "menu-item-selected": "menu-item-selected",
-  badge,
-  "dropdown-icon": "dropdown-icon"
+  "cap-select-filter-v2-dropdown-menu-wrapper": "cap-select-filter-v2-dropdown-menu-wrapper",
+  "cap-select-filter-v2-dropdown-menu-item": "cap-select-filter-v2-dropdown-menu-item",
+  "cap-select-filter-v2-dropdown-menu-item-selected": "cap-select-filter-v2-dropdown-menu-item-selected",
+  "cap-select-filter-v2-trigger-badge": "cap-select-filter-v2-trigger-badge",
+  "cap-select-filter-v2-trigger-icon": "cap-select-filter-v2-trigger-icon"
 };
 export {
-  badge,
   styles as default
 };

package/CapSelectFilter/styles.scss

@@ -1,10 +1,13 @@
 @import '../styles/_variables';
 
-.cap-select-filter-v2 {
+$cap-select-filter-v2-prefix: 'cap-select-filter-v2';
+
+.#{$cap-select-filter-v2-prefix} {
   display: inline-block;
 }
 
-.styled-div {
+.#{$cap-select-filter-v2-prefix}-trigger {
+  width: fit-content;
   position: relative;
   display: flex;
   align-items: center;
@@ -20,7 +23,7 @@
     border-color: $cap-g01;
   }
 
-  &.styled-div-selected {
+  &.#{$cap-select-filter-v2-prefix}-trigger-selected {
     border: none;
     background-color: $cap-g13;
   }
@@ -30,7 +33,7 @@
   }
 }
 
-.menu-wrapper {
+.#{$cap-select-filter-v2-prefix}-dropdown-menu-wrapper {
   border: $border-width-1 solid $cap-g12;
 
   :global(.ant-dropdown-menu) {
@@ -39,17 +42,17 @@
   }
 }
 
-.menu-item {
+.#{$cap-select-filter-v2-prefix}-dropdown-menu-item {
   background-color: transparent;
   border-left: 0.214rem solid transparent;
 
-  &.menu-item-selected {
+  &.#{$cap-select-filter-v2-prefix}-dropdown-menu-item-selected {
     background-color: $cap-pale-grey;
     border-left-color: $font-color-05;
   }
 }
 
-.badge {
+.#{$cap-select-filter-v2-prefix}-trigger-badge {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -64,7 +67,7 @@
   line-height: $normal-line-height;
 }
 
-.dropdown-icon {
+.#{$cap-select-filter-v2-prefix}-trigger-icon {
   position: relative;
   width: 1.786rem; // 25px
   min-width: 1.786rem;

package/CapSelectFilter/types.d.ts

@@ -8,12 +8,12 @@ export interface CapSelectFilterMenuItem {
 export interface CapSelectFilterProps extends Omit<DropdownProps, 'menu' | 'overlay' | 'overlayStyle' | 'onOpenChange'> {
     className?: string;
     overlayClassName?: string;
+    triggerClass?: string;
     onSelect?: (event: React.MouseEvent<HTMLElement>) => void;
     onOpenChange?: (open: boolean) => void;
     selectedValue?: string;
     placeholder?: string | React.ReactNode;
     placement?: 'bottomLeft' | 'bottom' | 'bottomRight' | 'topLeft' | 'top' | 'topRight';
-    width?: string;
     dropdownMaxHeight?: string;
     dropdownWidth?: string;
     data?: CapSelectFilterMenuItem[];

package/CapSelectFilter/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../components/CapSelectFilter/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,uBAAuB;IACtC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;CACjC;AAED,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,GAAG,SAAS,GAAG,cAAc,GAAG,cAAc,CAAC;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC1D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACvC,SAAS,CAAC,EAAE,YAAY,GAAG,QAAQ,GAAG,aAAa,GAAG,SAAS,GAAG,KAAK,GAAG,UAAU,CAAC;IACrF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,uBAAuB,EAAE,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../components/CapSelectFilter/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,uBAAuB;IACtC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;CACjC;AAED,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,GAAG,SAAS,GAAG,cAAc,GAAG,cAAc,CAAC;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC1D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACvC,SAAS,CAAC,EAAE,YAAY,GAAG,QAAQ,GAAG,aAAa,GAAG,SAAS,GAAG,KAAK,GAAG,UAAU,CAAC;IACrF,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,uBAAuB,EAAE,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB"}

package/CapStaticTemplates/index.d.ts

@@ -4,6 +4,8 @@
  *
  */
 import React from 'react';
-declare const _default: React.ComponentType<Omit<any, "intl">>;
+import { WrappedComponentProps } from 'react-intl';
+import type { CapStaticTemplatesProps } from './types';
+declare const _default: React.FC<Omit<CapStaticTemplatesProps, keyof WrappedComponentProps>>;
 export default _default;
 //# sourceMappingURL=index.d.ts.map

package/CapStaticTemplates/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapStaticTemplates/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,OAAO,KAA4B,MAAM,OAAO,CAAC;;AA+XjD,wBAA4E"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapStaticTemplates/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAc,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAsB/D,OAAO,KAAK,EAAE,uBAAuB,EAA0B,MAAM,SAAS,CAAC;wBAwYnB,KAAK,CAAC,EAAE,CAClE,IAAI,CAAC,uBAAuB,EAAE,MAAM,qBAAqB,CAAC,CAC3D;AAFD,wBAEE"}