@ably/ui 14.7.7 → 14.7.8

package/core/Icon/EncapsulatedIcon.js

@@ -1 +1 @@
-import React from"react";import Icon from"../Icon";import useTheming from"../hooks/useTheming";const EncapsulatedIcon=({theme="dark",size="40px",iconSize,className,innerClassName,...iconProps})=>{const{themeColor}=useTheming({baseTheme:"dark",theme});const numericalSize=parseInt(size,10);const numericalIconSize=iconSize?parseInt(iconSize,10):numericalSize-12;return /*#__PURE__*/React.createElement("div",{className:`p-1 rounded-lg ${theme==="light"?"bg-gradient-to-t":"bg-gradient-to-b"} ${themeColor("from-neutral-900")} ${className??""}`,style:{width:numericalSize,height:numericalSize}},/*#__PURE__*/React.createElement("div",{className:`flex items-center justify-center rounded-lg ${themeColor("bg-neutral-1100")} ${innerClassName??""}`,style:{height:numericalSize-2}},/*#__PURE__*/React.createElement(Icon,{size:`${numericalIconSize}`,...iconProps})))};export default EncapsulatedIcon;
+import React from"react";import Icon from"../Icon";import useTheming from"../hooks/useTheming";const ICON_SIZE_REDUCTION=12;const ICON_HEIGHT_REDUCTION=2;const EncapsulatedIcon=({theme="dark",size="40px",iconSize,className,innerClassName,...iconProps})=>{const{themeColor}=useTheming({baseTheme:"dark",theme});let computedIconSize=size,computedIconHeight=size;if(iconSize){computedIconSize=iconSize}else if(size.toString().endsWith("px")){const numericalSize=parseInt(size,10);computedIconSize=`${numericalSize-ICON_SIZE_REDUCTION}px`;computedIconHeight=`${numericalSize-ICON_HEIGHT_REDUCTION}px`}else{console.warn(`EncapsulatedIcon: Non-pixel units might not behave as expected`)}return /*#__PURE__*/React.createElement("div",{className:`p-1 rounded-lg ${theme==="light"?"bg-gradient-to-t":"bg-gradient-to-b"} ${themeColor("from-neutral-900")} ${className??""}`,style:{width:size,height:size}},/*#__PURE__*/React.createElement("div",{className:`flex items-center justify-center rounded-lg ${themeColor("bg-neutral-1100")} ${innerClassName??""}`,style:{height:computedIconHeight}},/*#__PURE__*/React.createElement(Icon,{size:computedIconSize,...iconProps})))};export default EncapsulatedIcon;

package/index.d.ts

@@ -232,11 +232,12 @@ export default Footer;
 declare module '@ably/ui/core/Icon/EncapsulatedIcon' {
 import { IconProps } from ".@ably/ui/core/Icon";
 import { Theme } from ".@ably/ui/core/styles/colors/types";
+import { IconSize } from "@ably/ui/core/types";
 type EncapsulatedIconProps = {
     theme?: Theme;
     className?: string;
     innerClassName?: string;
-    iconSize?: string;
+    iconSize?: IconSize;
 } & IconProps;
 const EncapsulatedIcon: ({ theme, size, iconSize, className, innerClassName, ...iconProps }: EncapsulatedIconProps) => import("react/jsx-runtime").JSX.Element;
 export default EncapsulatedIcon;
@@ -271,15 +272,16 @@ export const iconNames: {
     product: readonly ["icon-product-asset-tracking", "icon-product-chat", "icon-product-liveobjects", "icon-product-livesync", "icon-product-pubsub", "icon-product-spaces"];
 };
 export type IconName = (typeof iconNames.gui)[number] | (typeof iconNames.display)[number] | (typeof iconNames.social)[number] | (typeof iconNames.other)[number] | (typeof iconNames.tech)[number] | (typeof iconNames.product)[number];
+export type IconSize = `${number}px` | `${number}em` | `${number}rem` | `calc(${string})`;
 //# sourceMappingURL=types.d.ts.map
 }
 
 declare module '@ably/ui/core/Icon' {
-import { IconName } from "@ably/ui/core/Icon/types";
+import { IconName, IconSize } from "@ably/ui/core/Icon/types";
 import { ColorClass } from "@ably/ui/core/styles/colors/types";
 export type IconProps = {
     name: IconName;
-    size?: string;
+    size?: IconSize;
     color?: ColorClass;
     secondaryColor?: ColorClass;
     additionalCSS?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.7.7",
+  "version": "14.7.8",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",
@@ -16,15 +16,15 @@
   ],
   "types": "index.d.ts",
   "devDependencies": {
-    "@storybook/addon-a11y": "^8.3.5",
-    "@storybook/addon-essentials": "^8.3.5",
-    "@storybook/addon-interactions": "^8.3.5",
-    "@storybook/addon-links": "^8.3.5",
-    "@storybook/blocks": "^8.3.5",
-    "@storybook/react-vite": "^8.3.5",
-    "@storybook/test": "^8.3.5",
+    "@storybook/addon-a11y": "^8.4.0",
+    "@storybook/addon-essentials": "^8.4.0",
+    "@storybook/addon-interactions": "^8.4.0",
+    "@storybook/addon-links": "^8.4.0",
+    "@storybook/blocks": "^8.4.0",
+    "@storybook/react-vite": "^8.4.0",
+    "@storybook/test": "^8.4.0",
     "@storybook/test-runner": "^0.19.1",
-    "@swc/cli": "^0.4.0",
+    "@swc/cli": "^0.5.0",
     "@swc/core": "^1.4.11",
     "@tailwindcss/container-queries": "^0.1.1",
     "@types/dompurify": "^3.0.5",
@@ -44,7 +44,7 @@
     "msw": "2.6.0",
     "msw-storybook-addon": "^2.0.2",
     "prettier": "^3.2.5",
-    "storybook": "^8.3.5",
+    "storybook": "^8.4.0",
     "storybook-dark-mode": "^4.0.2",
     "svg-sprite": "^2.0.4",
     "tailwindcss": "^3.3.6",