@ably/ui 14.7.8-dev.40d3bee → 14.7.9

package/core/styles/colors/computed-colors.json

@@ -1 +1 @@
-["bg-blue-100","bg-neutral-1300","bg-neutral-300","bg-neutral-200","bg-neutral-100","bg-neutral-000","bg-orange-900","border-neutral-500","from-neutral-400"]
+["bg-blue-400","bg-blue-100","bg-neutral-1300","bg-neutral-300","bg-neutral-200","bg-neutral-100","bg-neutral-000","bg-neutral-600","bg-orange-900","bg-orange-600","border-blue-400","border-neutral-200","border-neutral-600","border-neutral-500","border-orange-600","from-neutral-400","group-hover:bg-neutral-100","text-blue-600","text-blue-200","text-neutral-1300","text-neutral-300","text-neutral-000","text-neutral-1100","text-neutral-1000","text-neutral-800","text-neutral-700","text-neutral-600","text-neutral-500","text-orange-200","text-orange-600"]

package/index.d.ts

@@ -8,7 +8,7 @@ export type AccordionData = {
     name: string;
     icon?: IconName;
     content: ReactNode;
-    onClick?: () => void;
+    onClick?: (index: number) => void;
 };
 export type AccordionIcons = {
     closed: {
@@ -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;
@@ -397,8 +399,9 @@ type MeganavProps = {
     urlBase?: string;
     addSearchApiKey: string;
     statusUrl: string;
+    searchDataId?: string;
 };
-const Meganav: ({ paths, themeName, notice, loginLink, urlBase, addSearchApiKey, statusUrl, }: MeganavProps) => import("react/jsx-runtime").JSX.Element;
+const Meganav: ({ paths, themeName, notice, loginLink, urlBase, addSearchApiKey, statusUrl, searchDataId, }: MeganavProps) => import("react/jsx-runtime").JSX.Element;
 export default Meganav;
 //# sourceMappingURL=Meganav.d.ts.map
 }
@@ -569,8 +572,9 @@ type MeganavItemsMobileProps = {
     loginLink: string;
     absUrl: AbsUrl;
     statusUrl: string;
+    searchDataId?: string;
 };
-const _default: React.MemoExoticComponent<({ panels, paths, sessionState, theme, loginLink, absUrl, statusUrl, }: MeganavItemsMobileProps) => import("react/jsx-runtime").JSX.Element>;
+const _default: React.MemoExoticComponent<({ panels, paths, sessionState, theme, loginLink, absUrl, statusUrl, searchDataId, }: MeganavItemsMobileProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;
 //# sourceMappingURL=MeganavItemsMobile.d.ts.map
 }
@@ -581,16 +585,18 @@ type MeganavItemsSignedIn = {
     sessionState: MeganavSessionState;
     theme: MeganavTheme;
     absUrl: AbsUrl;
+    searchDataId?: string;
 };
-const MeganavItemsSignedIn: ({ sessionState, absUrl, }: MeganavItemsSignedIn) => import("react/jsx-runtime").JSX.Element;
+const MeganavItemsSignedIn: ({ sessionState, absUrl, searchDataId, }: MeganavItemsSignedIn) => import("react/jsx-runtime").JSX.Element;
 export default MeganavItemsSignedIn;
 //# sourceMappingURL=MeganavItemsSignedIn.d.ts.map
 }
 
 declare module '@ably/ui/core/MeganavSearch' {
 import { AbsUrl } from "@ably/ui/core/Meganav";
-const MeganavSearch: ({ absUrl }: {
+const MeganavSearch: ({ absUrl, dataId, }: {
     absUrl: AbsUrl;
+    dataId?: string;
 }) => import("react/jsx-runtime").JSX.Element;
 export default MeganavSearch;
 //# sourceMappingURL=MeganavSearch.d.ts.map
@@ -681,6 +687,19 @@ declare module '@ably/ui/core/Pricing/PricingCards' {
 import type { PricingDataFeature } from "@ably/ui/core/types";
 import { Theme } from ".@ably/ui/core/styles/colors/types";
 import { IconName } from ".@ably/ui/core/Icon/types";
+/**
+  Pricing hack to get all the themes loaded
+
+  themeColor("text-orange-600")
+  themeColor("text-orange-1000")
+  themeColor("text-neutral-000")
+  themeColor("text-neutral-500")
+  themeColor("text-neutral-600")
+  themeColor("text-neutral-700")
+  themeColor("text-neutral-1000")
+  themeColor("text-blue-400")
+  themeColor("text-blue-800")
+ */
 export type PricingCardsProps = {
     data: PricingDataFeature[];
     theme?: Theme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.7.8-dev.40d3bee",
+  "version": "14.7.9",
   "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",
@@ -39,12 +39,12 @@
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react": "^7.34.3",
-    "eslint-plugin-storybook": "^0.9.0",
+    "eslint-plugin-storybook": "^0.11.0",
     "http-server": "14.1.1",
-    "msw": "2.4.2",
+    "msw": "2.6.1",
     "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",