@ably/ui 14.5.1 → 14.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/core/Flash.js +1 -1
  2. package/core/Footer.js +1 -1
  3. package/core/Icon/secondary-colors.js +1 -1
  4. package/core/Icon/types.js +1 -0
  5. package/core/Icon.js +1 -1
  6. package/core/icons/icon-display-custom.svg +7 -0
  7. package/core/icons/icon-display-integrations.svg +8 -0
  8. package/core/sprites.svg +1 -1
  9. package/core/styles/colors/types.js +1 -0
  10. package/core/styles/properties.css +4 -4
  11. package/index.d.ts +62 -16
  12. package/package.json +2 -2
  13. /package/core/icons/{quote.svg → icon-other-quote.svg} +0 -0
  14. /package/core/icons/{discord.svg → icon-social-discord.svg} +0 -0
  15. /package/core/icons/{facebook.svg → icon-social-facebook.svg} +0 -0
  16. /package/core/icons/{github.svg → icon-social-github.svg} +0 -0
  17. /package/core/icons/{glassdoor.svg → icon-social-glassdoor.svg} +0 -0
  18. /package/core/icons/{google.svg → icon-social-google.svg} +0 -0
  19. /package/core/icons/{linkedin.svg → icon-social-linkedin.svg} +0 -0
  20. /package/core/icons/{stackoverflow.svg → icon-social-stackoverflow.svg} +0 -0
  21. /package/core/icons/{twitter.svg → icon-social-twitter.svg} +0 -0
  22. /package/core/icons/{youtube.svg → icon-social-youtube.svg} +0 -0
package/core/styles/colors/types.js ADDED
@@ -0,0 +1 @@
1
+ const neutralColors=["neutral-000","neutral-100","neutral-200","neutral-300","neutral-400","neutral-500","neutral-600","neutral-700","neutral-800","neutral-900","neutral-1000","neutral-1100","neutral-1200","neutral-1300"];const orangeColors=["orange-100","orange-200","orange-300","orange-400","orange-500","orange-600","orange-700","orange-800","orange-900","orange-1000","orange-1100"];const secondaryColors=["yellow-100","yellow-200","yellow-300","yellow-400","yellow-500","yellow-600","yellow-700","yellow-800","yellow-900","green-100","green-200","green-300","green-400","green-500","green-600","green-700","green-800","green-900","blue-100","blue-200","blue-300","blue-400","blue-500","blue-600","blue-700","blue-800","blue-900","violet-100","violet-200","violet-300","violet-400","violet-500","violet-600","violet-700","violet-800","violet-900","pink-100","pink-200","pink-300","pink-400","pink-500","pink-600","pink-700","pink-800","pink-900"];const guiColors=["gui-blue-default-light","gui-blue-hover-light","gui-blue-active-light","gui-blue-default-dark","gui-blue-hover-dark","gui-blue-active-dark","gui-blue-focus","gui-unavailable","gui-success-green","gui-error-red","gui-focus","gui-focus-outline","gui-visited"];const aliasedColors=["white","extra-light-grey","light-grey","mid-grey","dark-grey","charcoal-grey","cool-black","active-orange","bright-red","red-orange","electric-cyan","zingy-green","jazzy-pink","gui-default","gui-hover","gui-active","gui-error","gui-success","gui-default-dark","gui-hover-dark","gui-active-dark"];export const colorNames={neutral:neutralColors,orange:orangeColors,secondary:secondaryColors,gui:guiColors};
package/core/styles/properties.css CHANGED
@@ -2,11 +2,11 @@
2
2
  :root {
3
3
  /* Neutral colors */
4
4
  --color-neutral-000: #ffffff;
5
- --color-neutral-100: #f8fafc;
6
- --color-neutral-200: #f4f8fb;
7
- --color-neutral-300: #edf1f7;
5
+ --color-neutral-100: #f6f8fa;
6
+ --color-neutral-200: #eef1f6;
7
+ --color-neutral-300: #e6eaf0;
8
8
  --color-neutral-400: #e2e7ef;
9
- --color-neutral-500: #c6ced9;
9
+ --color-neutral-500: #ced5de;
10
10
  --color-neutral-600: #adb6c2;
11
11
  --color-neutral-700: #89929f;
12
12
  --color-neutral-800: #667085;
package/index.d.ts CHANGED
@@ -76,6 +76,7 @@ export default CustomerLogos;
76
76
 
77
77
  declare module '@ably/ui/core/DropdownMenu' {
78
78
  import { ReactNode } from "react";
79
+ import { IconName } from "@ably/ui/core/Icon/types";
79
80
  type DropdownMenuProps = {
80
81
  children: ReactNode;
81
82
  };
@@ -92,7 +93,7 @@ type LinkProps = {
92
93
  url: string;
93
94
  title: string;
94
95
  subtitle: string;
95
- iconName: string;
96
+ iconName: IconName;
96
97
  children: ReactNode;
97
98
  };
98
99
  const DropdownMenu: {
@@ -122,11 +123,12 @@ export default Expander;
122
123
 
123
124
  declare module '@ably/ui/core/FeaturedLink' {
124
125
  import { ReactNode } from "react";
126
+ import { ColorClass } from "@ably/ui/core/styles/colors/types";
125
127
  type FeaturedLinkProps = {
126
128
  url: string;
127
129
  children: ReactNode;
128
130
  textSize?: string;
129
- iconColor?: string;
131
+ iconColor?: ColorClass;
130
132
  flush?: boolean;
131
133
  reverse?: boolean;
132
134
  additionalCSS?: string;
@@ -191,16 +193,39 @@ export default Footer;
191
193
  }
192
194
 
193
195
  declare module '@ably/ui/core/Icon/secondary-colors' {
194
- export const defaultIconSecondaryColor: (name: string) => string | undefined;
196
+ import { IconName } from "@ably/ui/core/types";
197
+ export const defaultIconSecondaryColor: (name: IconName) => "bg-neutral-000" | "bg-neutral-100" | "bg-neutral-200" | "bg-neutral-300" | "bg-neutral-400" | "bg-neutral-500" | "bg-neutral-600" | "bg-neutral-700" | "bg-neutral-800" | "bg-neutral-900" | "bg-neutral-1000" | "bg-neutral-1100" | "bg-neutral-1200" | "bg-neutral-1300" | "bg-orange-100" | "bg-orange-200" | "bg-orange-300" | "bg-orange-400" | "bg-orange-500" | "bg-orange-600" | "bg-orange-700" | "bg-orange-800" | "bg-orange-900" | "bg-orange-1000" | "bg-orange-1100" | "bg-yellow-100" | "bg-yellow-200" | "bg-yellow-300" | "bg-yellow-400" | "bg-yellow-500" | "bg-yellow-600" | "bg-yellow-700" | "bg-yellow-800" | "bg-yellow-900" | "bg-green-100" | "bg-green-200" | "bg-green-300" | "bg-green-400" | "bg-green-500" | "bg-green-600" | "bg-green-700" | "bg-green-800" | "bg-green-900" | "bg-blue-100" | "bg-blue-200" | "bg-blue-300" | "bg-blue-400" | "bg-blue-500" | "bg-blue-600" | "bg-blue-700" | "bg-blue-800" | "bg-blue-900" | "bg-violet-100" | "bg-violet-200" | "bg-violet-300" | "bg-violet-400" | "bg-violet-500" | "bg-violet-600" | "bg-violet-700" | "bg-violet-800" | "bg-violet-900" | "bg-pink-100" | "bg-pink-200" | "bg-pink-300" | "bg-pink-400" | "bg-pink-500" | "bg-pink-600" | "bg-pink-700" | "bg-pink-800" | "bg-pink-900" | "bg-gui-blue-default-light" | "bg-gui-blue-hover-light" | "bg-gui-blue-active-light" | "bg-gui-blue-default-dark" | "bg-gui-blue-hover-dark" | "bg-gui-blue-active-dark" | "bg-gui-blue-focus" | "bg-gui-unavailable" | "bg-gui-success-green" | "bg-gui-error-red" | "bg-gui-focus" | "bg-gui-focus-outline" | "bg-gui-visited" | "bg-white" | "bg-extra-light-grey" | "bg-light-grey" | "bg-mid-grey" | "bg-dark-grey" | "bg-charcoal-grey" | "bg-cool-black" | "bg-active-orange" | "bg-bright-red" | "bg-red-orange" | "bg-electric-cyan" | "bg-zingy-green" | "bg-jazzy-pink" | "bg-gui-default" | "bg-gui-hover" | "bg-gui-active" | "bg-gui-error" | "bg-gui-success" | "bg-gui-default-dark" | "bg-gui-hover-dark" | "bg-gui-active-dark" | "text-neutral-000" | "text-neutral-100" | "text-neutral-200" | "text-neutral-300" | "text-neutral-400" | "text-neutral-500" | "text-neutral-600" | "text-neutral-700" | "text-neutral-800" | "text-neutral-900" | "text-neutral-1000" | "text-neutral-1100" | "text-neutral-1200" | "text-neutral-1300" | "text-orange-100" | "text-orange-200" | "text-orange-300" | "text-orange-400" | "text-orange-500" | "text-orange-600" | "text-orange-700" | "text-orange-800" | "text-orange-900" | "text-orange-1000" | "text-orange-1100" | "text-yellow-100" | "text-yellow-200" | "text-yellow-300" | "text-yellow-400" | "text-yellow-500" | "text-yellow-600" | "text-yellow-700" | "text-yellow-800" | "text-yellow-900" | "text-green-100" | "text-green-200" | "text-green-300" | "text-green-400" | "text-green-500" | "text-green-600" | "text-green-700" | "text-green-800" | "text-green-900" | "text-blue-100" | "text-blue-200" | "text-blue-300" | "text-blue-400" | "text-blue-500" | "text-blue-600" | "text-blue-700" | "text-blue-800" | "text-blue-900" | "text-violet-100" | "text-violet-200" | "text-violet-300" | "text-violet-400" | "text-violet-500" | "text-violet-600" | "text-violet-700" | "text-violet-800" | "text-violet-900" | "text-pink-100" | "text-pink-200" | "text-pink-300" | "text-pink-400" | "text-pink-500" | "text-pink-600" | "text-pink-700" | "text-pink-800" | "text-pink-900" | "text-gui-blue-default-light" | "text-gui-blue-hover-light" | "text-gui-blue-active-light" | "text-gui-blue-default-dark" | "text-gui-blue-hover-dark" | "text-gui-blue-active-dark" | "text-gui-blue-focus" | "text-gui-unavailable" | "text-gui-success-green" | "text-gui-error-red" | "text-gui-focus" | "text-gui-focus-outline" | "text-gui-visited" | "text-white" | "text-extra-light-grey" | "text-light-grey" | "text-mid-grey" | "text-dark-grey" | "text-charcoal-grey" | "text-cool-black" | "text-active-orange" | "text-bright-red" | "text-red-orange" | "text-electric-cyan" | "text-zingy-green" | "text-jazzy-pink" | "text-gui-default" | "text-gui-hover" | "text-gui-active" | "text-gui-error" | "text-gui-success" | "text-gui-default-dark" | "text-gui-hover-dark" | "text-gui-active-dark";
195
198
  //# sourceMappingURL=secondary-colors.d.ts.map
196
199
  }
197
200
 
201
+ declare module '@ably/ui/core/Icon/types' {
202
+ export type IconName = (typeof coreIcons)[number] | (typeof displayIcons)[number] | (typeof socialIcons)[number] | (typeof otherIcons)[number] | (typeof techIcons)[number] | (typeof productIcons)[number];
203
+ const coreIcons: readonly ["icon-gui-ably-badge", "icon-gui-arrow-bidirectional-horizontal", "icon-gui-arrow-bidirectional-vertical", "icon-gui-arrow-down", "icon-gui-arrow-left", "icon-gui-arrow-right", "icon-gui-arrow-up", "icon-gui-burger-menu", "icon-gui-check-circled-fill", "icon-gui-check-circled-fill-black", "icon-gui-check-circled", "icon-gui-checklist-checked", "icon-gui-clock", "icon-gui-close", "icon-gui-cross-circled-fill", "icon-gui-cross-circled", "icon-gui-copy", "icon-gui-dash-circled", "icon-gui-disclosure-arrow", "icon-gui-document-generic", "icon-gui-enlarge", "icon-gui-external-link", "icon-gui-history", "icon-gui-info", "icon-gui-link-arrow", "icon-gui-live-chat", "icon-gui-minus", "icon-gui-partial", "icon-gui-plus", "icon-gui-quote-marks-solid", "icon-gui-refresh", "icon-gui-search", "icon-gui-tick", "icon-gui-warning", "icon-gui-link", "icon-gui-filter-flow-step-1", "icon-gui-filter-flow-step-2", "icon-gui-filter-flow-step-3", "icon-gui-resources"];
204
+ const displayIcons: readonly ["icon-display-48hrs", "icon-display-ably-channels", "icon-display-about-ably-col", "icon-display-api-keys", "icon-display-api", "icon-display-architectural-guidance", "icon-display-asset-tracking-col", "icon-display-authentication", "icon-display-avatar-stack", "icon-display-browser", "icon-display-calendar", "icon-display-call-mobile", "icon-display-careers-col", "icon-display-case-studies-col", "icon-display-chat-col", "icon-display-chat-stack-col", "icon-display-cloud-servers", "icon-display-compare-tech-col", "icon-display-connection-state-&-recovery", "icon-display-consumer-groups", "icon-display-custom", "icon-display-custom-cname", "icon-display-customers-col", "icon-display-dedicated-cluster", "icon-display-deltas", "icon-display-docs-col", "icon-display-documentation", "icon-display-dynamic-channel-groups", "icon-display-edge-network", "icon-display-elasticity", "icon-display-events-col", "icon-display-exactly-once-delivery", "icon-display-examples-col", "icon-display-fan-out", "icon-display-firehose", "icon-display-gdpr", "icon-display-push-notifications-col", "icon-display-data-broadcast-col", "icon-display-data-synchronization-col", "icon-display-general-comms", "icon-display-granular-permissions", "icon-display-hipaa-mono", "icon-display-hipaa", "icon-display-history", "icon-display-integrations", "icon-display-integrations-col", "icon-display-it-support-access", "icon-display-it-support-helpdesk", "icon-display-laptop", "icon-display-lightbulb-col", "icon-display-live-chat", "icon-display-map-pin", "icon-display-message-batching", "icon-display-message-persistence", "icon-display-message-queues", "icon-display-message", "icon-display-observe-analytics", "icon-display-padlock-closed", "icon-display-platform", "icon-display-play", "icon-display-premium-support", "icon-display-privacy-shield-framework", "icon-display-push-notifications", "icon-display-quickstart-guides-col", "icon-display-resources-col", "icon-display-rewind", "icon-display-sdks-col", "icon-display-send-received-messages", "icon-display-servers", "icon-display-shopping-cart", "icon-display-sla", "icon-display-soc2-type2-mono", "icon-display-soc2-type2", "icon-display-subscription-filters", "icon-display-system-metadata", "icon-display-tech-account-comms", "icon-display-tutorials-demos-col", "icon-display-virtual-events-col", "icon-live-updates-results-metrics-col", "icon-multi-user-spaces-col"];
205
+ const socialIcons: readonly ["icon-social-discord", "icon-social-facebook", "icon-social-github", "icon-social-glassdoor", "icon-social-linkedin", "icon-social-twitter", "icon-social-google", "icon-social-stackoverflow", "icon-social-youtube", "icon-social-x"];
206
+ const otherIcons: readonly ["quote"];
207
+ const techIcons: readonly ["icon-tech-amqp10", "icon-tech-apache-kafka", "icon-tech-apachepulsar", "icon-tech-awskinesis", "icon-tech-awslambda", "icon-tech-awssqs", "icon-tech-azureservicebus", "icon-tech-cloudflareworkers", "icon-tech-csharp", "icon-tech-flutter", "icon-tech-gcloudfunctions", "icon-tech-go", "icon-tech-ifttt", "icon-tech-java", "icon-tech-javascript", "icon-tech-net", "icon-tech-objectivec", "icon-tech-php", "icon-tech-python", "icon-tech-react", "icon-tech-ruby", "icon-tech-swift", "icon-tech-terraform", "icon-tech-zapier"];
208
+ const productIcons: readonly ["icon-product-asset-tracking", "icon-product-chat", "icon-product-liveobjects", "icon-product-livesync", "icon-product-pubsub", "icon-product-spaces", "icon-product-pubsub-encapsulated", "icon-product-chat-encapsulated", "icon-product-spaces-encapsulated", "icon-product-livesync-encapsulated", "icon-product-asset-tracking-encapsulated", "icon-product-liveobjects-encapsulated"];
209
+ export const iconNames: {
210
+ core: readonly ["icon-gui-ably-badge", "icon-gui-arrow-bidirectional-horizontal", "icon-gui-arrow-bidirectional-vertical", "icon-gui-arrow-down", "icon-gui-arrow-left", "icon-gui-arrow-right", "icon-gui-arrow-up", "icon-gui-burger-menu", "icon-gui-check-circled-fill", "icon-gui-check-circled-fill-black", "icon-gui-check-circled", "icon-gui-checklist-checked", "icon-gui-clock", "icon-gui-close", "icon-gui-cross-circled-fill", "icon-gui-cross-circled", "icon-gui-copy", "icon-gui-dash-circled", "icon-gui-disclosure-arrow", "icon-gui-document-generic", "icon-gui-enlarge", "icon-gui-external-link", "icon-gui-history", "icon-gui-info", "icon-gui-link-arrow", "icon-gui-live-chat", "icon-gui-minus", "icon-gui-partial", "icon-gui-plus", "icon-gui-quote-marks-solid", "icon-gui-refresh", "icon-gui-search", "icon-gui-tick", "icon-gui-warning", "icon-gui-link", "icon-gui-filter-flow-step-1", "icon-gui-filter-flow-step-2", "icon-gui-filter-flow-step-3", "icon-gui-resources"];
211
+ display: readonly ["icon-display-48hrs", "icon-display-ably-channels", "icon-display-about-ably-col", "icon-display-api-keys", "icon-display-api", "icon-display-architectural-guidance", "icon-display-asset-tracking-col", "icon-display-authentication", "icon-display-avatar-stack", "icon-display-browser", "icon-display-calendar", "icon-display-call-mobile", "icon-display-careers-col", "icon-display-case-studies-col", "icon-display-chat-col", "icon-display-chat-stack-col", "icon-display-cloud-servers", "icon-display-compare-tech-col", "icon-display-connection-state-&-recovery", "icon-display-consumer-groups", "icon-display-custom", "icon-display-custom-cname", "icon-display-customers-col", "icon-display-dedicated-cluster", "icon-display-deltas", "icon-display-docs-col", "icon-display-documentation", "icon-display-dynamic-channel-groups", "icon-display-edge-network", "icon-display-elasticity", "icon-display-events-col", "icon-display-exactly-once-delivery", "icon-display-examples-col", "icon-display-fan-out", "icon-display-firehose", "icon-display-gdpr", "icon-display-push-notifications-col", "icon-display-data-broadcast-col", "icon-display-data-synchronization-col", "icon-display-general-comms", "icon-display-granular-permissions", "icon-display-hipaa-mono", "icon-display-hipaa", "icon-display-history", "icon-display-integrations", "icon-display-integrations-col", "icon-display-it-support-access", "icon-display-it-support-helpdesk", "icon-display-laptop", "icon-display-lightbulb-col", "icon-display-live-chat", "icon-display-map-pin", "icon-display-message-batching", "icon-display-message-persistence", "icon-display-message-queues", "icon-display-message", "icon-display-observe-analytics", "icon-display-padlock-closed", "icon-display-platform", "icon-display-play", "icon-display-premium-support", "icon-display-privacy-shield-framework", "icon-display-push-notifications", "icon-display-quickstart-guides-col", "icon-display-resources-col", "icon-display-rewind", "icon-display-sdks-col", "icon-display-send-received-messages", "icon-display-servers", "icon-display-shopping-cart", "icon-display-sla", "icon-display-soc2-type2-mono", "icon-display-soc2-type2", "icon-display-subscription-filters", "icon-display-system-metadata", "icon-display-tech-account-comms", "icon-display-tutorials-demos-col", "icon-display-virtual-events-col", "icon-live-updates-results-metrics-col", "icon-multi-user-spaces-col"];
212
+ social: readonly ["icon-social-discord", "icon-social-facebook", "icon-social-github", "icon-social-glassdoor", "icon-social-linkedin", "icon-social-twitter", "icon-social-google", "icon-social-stackoverflow", "icon-social-youtube", "icon-social-x"];
213
+ other: readonly ["quote"];
214
+ tech: readonly ["icon-tech-amqp10", "icon-tech-apache-kafka", "icon-tech-apachepulsar", "icon-tech-awskinesis", "icon-tech-awslambda", "icon-tech-awssqs", "icon-tech-azureservicebus", "icon-tech-cloudflareworkers", "icon-tech-csharp", "icon-tech-flutter", "icon-tech-gcloudfunctions", "icon-tech-go", "icon-tech-ifttt", "icon-tech-java", "icon-tech-javascript", "icon-tech-net", "icon-tech-objectivec", "icon-tech-php", "icon-tech-python", "icon-tech-react", "icon-tech-ruby", "icon-tech-swift", "icon-tech-terraform", "icon-tech-zapier"];
215
+ product: readonly ["icon-product-asset-tracking", "icon-product-chat", "icon-product-liveobjects", "icon-product-livesync", "icon-product-pubsub", "icon-product-spaces", "icon-product-pubsub-encapsulated", "icon-product-chat-encapsulated", "icon-product-spaces-encapsulated", "icon-product-livesync-encapsulated", "icon-product-asset-tracking-encapsulated", "icon-product-liveobjects-encapsulated"];
216
+ };
217
+ export {};
218
+ //# sourceMappingURL=types.d.ts.map
219
+ }
220
+
198
221
  declare module '@ably/ui/core/Icon' {
222
+ import { IconName } from "@ably/ui/core/Icon/types";
223
+ import { ColorClass } from "@ably/ui/core/styles/colors/types";
199
224
  type IconProps = {
200
- name: string;
225
+ name: IconName;
201
226
  size?: string;
202
- color?: string;
203
- secondaryColor?: string;
227
+ color?: ColorClass;
228
+ secondaryColor?: ColorClass;
204
229
  additionalCSS?: string;
205
230
  };
206
231
  const Icon: ({ name, size, color, secondaryColor, additionalCSS, ...additionalAttributes }: IconProps) => import("react/jsx-runtime").JSX.Element;
@@ -243,13 +268,14 @@ export default function Meganav({ themeName, addSearchApiKey }: {
243
268
 
244
269
  declare module '@ably/ui/core/Meganav' {
245
270
  import { ReactNode } from "react";
271
+ import { ColorClass } from "@ably/ui/core/styles/colors/types";
246
272
  export type MeganavTheme = {
247
- backgroundColor?: string;
248
- textColor?: string;
249
- buttonBackgroundColor?: string;
250
- buttonTextColor?: string;
251
- mobileMenuColor?: string;
252
- logoTextColor?: string;
273
+ backgroundColor?: ColorClass;
274
+ textColor?: ColorClass;
275
+ buttonBackgroundColor?: ColorClass;
276
+ buttonTextColor?: ColorClass;
277
+ mobileMenuColor: ColorClass;
278
+ logoTextColor?: ColorClass;
253
279
  barShadow?: string;
254
280
  };
255
281
  export type AbsUrl = (path: string) => string;
@@ -596,12 +622,13 @@ export default Notice;
596
622
  }
597
623
 
598
624
  declare module '@ably/ui/core/ProductTile/data' {
625
+ import { IconName } from ".@ably/ui/core/Icon/types";
599
626
  export type ProductName = "pubsub" | "chat" | "spaces" | "liveSync" | "assetTracking" | "liveObjects";
600
627
  type Products = Record<ProductName, {
601
628
  label: string;
602
629
  description: string;
603
630
  link?: string;
604
- icon?: string;
631
+ icon?: IconName;
605
632
  unavailable?: boolean;
606
633
  }>;
607
634
  export const products: Products;
@@ -719,9 +746,9 @@ const _default: {
719
746
  Cell: ({ children, isRowHeader, ...rest }: import("react").PropsWithChildren<{
720
747
  isRowHeader?: boolean;
721
748
  } & import("react").TdHTMLAttributes<HTMLTableCellElement>>) => import("react/jsx-runtime").JSX.Element;
722
- LabelCell: ({ children, ...rest }: import("react").PropsWithChildren<import("react").TdHTMLAttributes<HTMLTableCellElement>>) => import("react/jsx-runtime").JSX.Element;
723
- HeaderCell: ({ children, ...rest }: import("react").PropsWithChildren<import("react").TdHTMLAttributes<HTMLTableCellElement>>) => import("react/jsx-runtime").JSX.Element;
724
- CtaCell: ({ children, ...rest }: import("react").PropsWithChildren<import("react").TdHTMLAttributes<HTMLTableCellElement>>) => import("react/jsx-runtime").JSX.Element;
749
+ LabelCell: ({ children, ...rest }: import("react").PropsWithChildren<React.TdHTMLAttributes<HTMLTableCellElement>>) => import("react/jsx-runtime").JSX.Element;
750
+ HeaderCell: ({ children, ...rest }: import("react").PropsWithChildren<React.TdHTMLAttributes<HTMLTableCellElement>>) => import("react/jsx-runtime").JSX.Element;
751
+ CtaCell: ({ children, ...rest }: import("react").PropsWithChildren<React.TdHTMLAttributes<HTMLTableCellElement>>) => import("react/jsx-runtime").JSX.Element;
725
752
  RowHeader: ({ children, ...rest }: import("react").PropsWithChildren<import("react").TableHTMLAttributes<HTMLTableRowElement>>) => import("react/jsx-runtime").JSX.Element;
726
753
  Body: ({ children, ...rest }: import("react").PropsWithChildren<import("react").TableHTMLAttributes<HTMLTableSectionElement>>) => import("react/jsx-runtime").JSX.Element;
727
754
  Header: ({ children, ...rest }: import("react").PropsWithChildren<import("react").TableHTMLAttributes<HTMLTableSectionElement>>) => import("react/jsx-runtime").JSX.Element;
@@ -796,6 +823,25 @@ export function selectSessionData(store: any): any;
796
823
  //# sourceMappingURL=remote-session-data.d.ts.map
797
824
  }
798
825
 
826
+ declare module '@ably/ui/core/styles/colors/types' {
827
+ export type ColorName = (typeof neutralColors)[number] | (typeof orangeColors)[number] | (typeof secondaryColors)[number] | (typeof guiColors)[number] | (typeof aliasedColors)[number];
828
+ type ColorClassPrefixes = "bg" | "text";
829
+ export type ColorClass = `${ColorClassPrefixes}-${ColorName}`;
830
+ const neutralColors: readonly ["neutral-000", "neutral-100", "neutral-200", "neutral-300", "neutral-400", "neutral-500", "neutral-600", "neutral-700", "neutral-800", "neutral-900", "neutral-1000", "neutral-1100", "neutral-1200", "neutral-1300"];
831
+ const orangeColors: readonly ["orange-100", "orange-200", "orange-300", "orange-400", "orange-500", "orange-600", "orange-700", "orange-800", "orange-900", "orange-1000", "orange-1100"];
832
+ const secondaryColors: readonly ["yellow-100", "yellow-200", "yellow-300", "yellow-400", "yellow-500", "yellow-600", "yellow-700", "yellow-800", "yellow-900", "green-100", "green-200", "green-300", "green-400", "green-500", "green-600", "green-700", "green-800", "green-900", "blue-100", "blue-200", "blue-300", "blue-400", "blue-500", "blue-600", "blue-700", "blue-800", "blue-900", "violet-100", "violet-200", "violet-300", "violet-400", "violet-500", "violet-600", "violet-700", "violet-800", "violet-900", "pink-100", "pink-200", "pink-300", "pink-400", "pink-500", "pink-600", "pink-700", "pink-800", "pink-900"];
833
+ const guiColors: readonly ["gui-blue-default-light", "gui-blue-hover-light", "gui-blue-active-light", "gui-blue-default-dark", "gui-blue-hover-dark", "gui-blue-active-dark", "gui-blue-focus", "gui-unavailable", "gui-success-green", "gui-error-red", "gui-focus", "gui-focus-outline", "gui-visited"];
834
+ const aliasedColors: readonly ["white", "extra-light-grey", "light-grey", "mid-grey", "dark-grey", "charcoal-grey", "cool-black", "active-orange", "bright-red", "red-orange", "electric-cyan", "zingy-green", "jazzy-pink", "gui-default", "gui-hover", "gui-active", "gui-error", "gui-success", "gui-default-dark", "gui-hover-dark", "gui-active-dark"];
835
+ export const colorNames: {
836
+ neutral: readonly ["neutral-000", "neutral-100", "neutral-200", "neutral-300", "neutral-400", "neutral-500", "neutral-600", "neutral-700", "neutral-800", "neutral-900", "neutral-1000", "neutral-1100", "neutral-1200", "neutral-1300"];
837
+ orange: readonly ["orange-100", "orange-200", "orange-300", "orange-400", "orange-500", "orange-600", "orange-700", "orange-800", "orange-900", "orange-1000", "orange-1100"];
838
+ secondary: readonly ["yellow-100", "yellow-200", "yellow-300", "yellow-400", "yellow-500", "yellow-600", "yellow-700", "yellow-800", "yellow-900", "green-100", "green-200", "green-300", "green-400", "green-500", "green-600", "green-700", "green-800", "green-900", "blue-100", "blue-200", "blue-300", "blue-400", "blue-500", "blue-600", "blue-700", "blue-800", "blue-900", "violet-100", "violet-200", "violet-300", "violet-400", "violet-500", "violet-600", "violet-700", "violet-800", "violet-900", "pink-100", "pink-200", "pink-300", "pink-400", "pink-500", "pink-600", "pink-700", "pink-800", "pink-900"];
839
+ gui: readonly ["gui-blue-default-light", "gui-blue-hover-light", "gui-blue-active-light", "gui-blue-default-dark", "gui-blue-hover-dark", "gui-blue-active-dark", "gui-blue-focus", "gui-unavailable", "gui-success-green", "gui-error-red", "gui-focus", "gui-focus-outline", "gui-visited"];
840
+ };
841
+ export {};
842
+ //# sourceMappingURL=types.d.ts.map
843
+ }
844
+
799
845
  declare module '@ably/ui/core/url-base' {
800
846
  export default absUrl;
801
847
  function absUrl(path: any, urlBase?: string): string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ably/ui",
3
- "version": "14.5.1",
3
+ "version": "14.5.2",
4
4
  "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.",
5
5
  "repository": {
6
6
  "type": "git",
@@ -45,7 +45,7 @@
45
45
  "storybook": "^8.2.9",
46
46
  "svg-sprite": "^2.0.4",
47
47
  "tailwindcss": "^3.3.6",
48
- "typescript": "5.5.4",
48
+ "typescript": "5.6.2",
49
49
  "vite": "^5.2.12"
50
50
  },
51
51
  "scripts": {
/package/core/icons/{quote.svg → icon-other-quote.svg} RENAMED
File without changes