Remove additional exports of breakpoint symbols.

Restore typedef entries in `Breakpoint` component.
Generate type definitions for `constants.js` and `breakpointObserver.js`.
Validate size passed to `smallerThan`/`largerThan`.
Document `breakpointObserver`/`breakpoints`.
Fix `Breakpoint` component docs/example.

src/Breakpoint/Breakpoint.svelte

@@ -1,5 +1,7 @@
 <script>
   /**
+   * @typedef {"sm" | "md" | "lg" | "xlg" | "max"} BreakpointSize
+   * @typedef {320 | 672 | 1056 | 1312 | 1584} BreakpointValue
    * @event {{ size: BreakpointSize; breakpointValue: BreakpointValue; }} change
    * @slot {{ size: BreakpointSize; sizes: Record<BreakpointSize, boolean>; }}
    */

src/Breakpoint/breakpointObserver.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Creates a readable store that returns the current {@link BreakpointSize}.
+ * It also provides functions for creating derived stores used to do comparisons.
+ */
+export function breakpointObserver(): {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<any>, invalidate?: (value?: any) => void) => import("svelte/store").Unsubscriber;
+    /**
+     * Returns a store readable store that returns whether the current
+     * breakpoint is smaller than {@link size}.
+     * @param {BreakpointSize} size Size to compare against.
+     */
+    smallerThan: (size: BreakpointSize) => import("svelte/store").Readable<boolean>;
+    /**
+     * Returns a store readable store that returns whether the current
+     * breakpoint is larger than {@link size}.
+     * @param {BreakpointSize} size Size to compare against.
+     */
+    largerThan: (size: BreakpointSize) => import("svelte/store").Readable<boolean>;
+};

src/Breakpoint/breakpointObserver.js

@@ -53,19 +53,30 @@ export function breakpointObserver() {
 
   return {
     subscribe: store.subscribe,
+
     /**
      * Returns a store readable store that returns whether the current
-     * breakpoint smaller than {@link size}.
+     * breakpoint is smaller than {@link size}.
      * @param {BreakpointSize} size Size to compare against.
      */
-    smallerThan: (size) =>
-      derived(store, ($size) => breakpoints[$size] < breakpoints[size]),
+    smallerThan: (size) => {
+      checkSizeValid(size);
+      return derived(store, ($size) => breakpoints[$size] < breakpoints[size]);
+    },
+
     /**
      * Returns a store readable store that returns whether the current
-     * breakpoint larger than {@link size}.
+     * breakpoint is larger than {@link size}.
      * @param {BreakpointSize} size Size to compare against.
      */
-    largerThan: (size) =>
-      derived(store, ($size) => breakpoints[$size] > breakpoints[size]),
+    largerThan: (size) => {
+      checkSizeValid(size);
+      return derived(store, ($size) => breakpoints[$size] > breakpoints[size]);
+    },
   };
 }
+
+function checkSizeValid(size) {
+  if (size in breakpoints == false)
+    throw new Error(`"${size}" is not a valid breakpoint size.`);
+}

src/Breakpoint/constants.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Pixel sizes of Carbon grid breakpoints.
+ * @type {Record<BreakpointSize, BreakpointValue>}
+ */
+export const breakpoints: Record<BreakpointSize, BreakpointValue>;

src/Breakpoint/index.d.ts

@@ -0,0 +1,2 @@
+export { breakpointObserver } from "./breakpointObserver";
+export { breakpoints } from "./constants";

src/index.js

@@ -1,7 +1,7 @@
 export { Accordion, AccordionItem, AccordionSkeleton } from "./Accordion";
 export { AspectRatio } from "./AspectRatio";
 export { Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton } from "./Breadcrumb";
-export { Breakpoint, breakpoints, breakpointObserver } from "./Breakpoint";
+export { Breakpoint } from "./Breakpoint";
 export { Button, ButtonSkeleton, ButtonSet } from "./Button";
 export { Checkbox, CheckboxSkeleton } from "./Checkbox";
 export { ContentSwitcher, Switch } from "./ContentSwitcher";