@audius/harmony 0.3.5 → 0.4.2

package/dist/contexts/MediaContext.js

@@ -0,0 +1,79 @@
+import { __assign } from '../_virtual/_tslib.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { createContext, useMemo, useContext } from 'react';
+import { useMedia as useMedia$1 } from 'react-use';
+import { breakpoints } from '../foundations/breakpoints/breakpoints.js';
+
+var MediaContext = createContext(null);
+/**
+ * Provider component that monitors media queries and makes responsive breakpoints
+ * available throughout the app via context.
+ */
+var MediaProvider = function (_a) {
+    var children = _a.children;
+    // Use react-use's useMedia hook for each breakpoint query
+    var isExtraSmall = useMedia$1(breakpoints.down.xs);
+    var isSmall = useMedia$1(breakpoints.down.sm);
+    var isMedium = useMedia$1(breakpoints.down.md);
+    var isLarge = useMedia$1(breakpoints.down.lg);
+    var isExtraLarge = useMedia$1(breakpoints.down.xl);
+    var isAboveExtraSmall = useMedia$1(breakpoints.up.xs);
+    var isAboveSmall = useMedia$1(breakpoints.up.sm);
+    var isAboveMedium = useMedia$1(breakpoints.up.md);
+    var isAboveLarge = useMedia$1(breakpoints.up.lg);
+    var isAboveExtraLarge = useMedia$1(breakpoints.up.xl);
+    // Derived properties
+    var isMobile = isSmall; // <= 768px
+    var isTablet = !isSmall && !isAboveMedium; // > 768px and <= 1024px
+    var isDesktop = isAboveMedium; // > 1024px
+    // Utility function for custom queries
+    var matchesQuery = function (query) {
+        return window.matchMedia(query).matches;
+    };
+    var value = useMemo(function () { return ({
+        isExtraSmall: isExtraSmall,
+        isSmall: isSmall,
+        isMedium: isMedium,
+        isLarge: isLarge,
+        isExtraLarge: isExtraLarge,
+        isAboveExtraSmall: isAboveExtraSmall,
+        isAboveSmall: isAboveSmall,
+        isAboveMedium: isAboveMedium,
+        isAboveLarge: isAboveLarge,
+        isAboveExtraLarge: isAboveExtraLarge,
+        isMobile: isMobile,
+        isTablet: isTablet,
+        isDesktop: isDesktop,
+        matchesQuery: matchesQuery
+    }); }, [
+        isExtraSmall,
+        isSmall,
+        isMedium,
+        isLarge,
+        isExtraLarge,
+        isAboveExtraSmall,
+        isAboveSmall,
+        isAboveMedium,
+        isAboveLarge,
+        isAboveExtraLarge,
+        isMobile,
+        isTablet,
+        isDesktop
+    ]);
+    return jsx(MediaContext.Provider, __assign({ value: value }, { children: children }));
+};
+/**
+ * Hook to access media query state from the MediaContext.
+ * This hook should be used instead of the original useMedia hook
+ * to avoid creating multiple listeners in every component.
+ */
+var useMedia = function () {
+    var context = useContext(MediaContext);
+    if (context === null) {
+        throw new Error('useMedia must be used within a MediaProvider');
+    }
+    return context;
+};
+
+export { MediaProvider, useMedia };
+//# sourceMappingURL=MediaContext.js.map

package/dist/contexts/MediaContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaContext.js","sources":["../../src/contexts/MediaContext.tsx"],"sourcesContent":["import { createContext, useContext, ReactNode, useMemo } from 'react'\n\nimport { useMedia as useMediaQuery } from 'react-use'\n\nimport { breakpoints } from '../foundations/breakpoints'\n\nexport type MediaContextType = {\n  // Specific size breakpoint checks\n  isExtraSmall: boolean // <= 480px\n  isSmall: boolean // <= 768px\n  isMedium: boolean // <= 1024px\n  isLarge: boolean // <= 1280px\n  isExtraLarge: boolean // <= 1440px\n\n  // Specific \"larger than\" checks\n  isAboveExtraSmall: boolean // > 480px\n  isAboveSmall: boolean // > 768px\n  isAboveMedium: boolean // > 1024px\n  isAboveLarge: boolean // > 1280px\n  isAboveExtraLarge: boolean // > 1440px\n\n  // Common device categories\n  isMobile: boolean // <= 768px\n  isTablet: boolean // > 768px and <= 1024px\n  isDesktop: boolean // > 1024px\n\n  // Utility function for custom queries\n  matchesQuery: (query: string) => boolean\n}\n\nconst MediaContext = createContext<MediaContextType | null>(null)\n\ntype MediaProviderProps = {\n  children: ReactNode\n}\n\n/**\n * Provider component that monitors media queries and makes responsive breakpoints\n * available throughout the app via context.\n */\nexport const MediaProvider = ({ children }: MediaProviderProps) => {\n  // Use react-use's useMedia hook for each breakpoint query\n  const isExtraSmall = useMediaQuery(breakpoints.down.xs)\n  const isSmall = useMediaQuery(breakpoints.down.sm)\n  const isMedium = useMediaQuery(breakpoints.down.md)\n  const isLarge = useMediaQuery(breakpoints.down.lg)\n  const isExtraLarge = useMediaQuery(breakpoints.down.xl)\n\n  const isAboveExtraSmall = useMediaQuery(breakpoints.up.xs)\n  const isAboveSmall = useMediaQuery(breakpoints.up.sm)\n  const isAboveMedium = useMediaQuery(breakpoints.up.md)\n  const isAboveLarge = useMediaQuery(breakpoints.up.lg)\n  const isAboveExtraLarge = useMediaQuery(breakpoints.up.xl)\n\n  // Derived properties\n  const isMobile = isSmall // <= 768px\n  const isTablet = !isSmall && !isAboveMedium // > 768px and <= 1024px\n  const isDesktop = isAboveMedium // > 1024px\n\n  // Utility function for custom queries\n  const matchesQuery = (query: string) => {\n    return window.matchMedia(query).matches\n  }\n\n  const value = useMemo(\n    () => ({\n      isExtraSmall,\n      isSmall,\n      isMedium,\n      isLarge,\n      isExtraLarge,\n      isAboveExtraSmall,\n      isAboveSmall,\n      isAboveMedium,\n      isAboveLarge,\n      isAboveExtraLarge,\n      isMobile,\n      isTablet,\n      isDesktop,\n      matchesQuery\n    }),\n    [\n      isExtraSmall,\n      isSmall,\n      isMedium,\n      isLarge,\n      isExtraLarge,\n      isAboveExtraSmall,\n      isAboveSmall,\n      isAboveMedium,\n      isAboveLarge,\n      isAboveExtraLarge,\n      isMobile,\n      isTablet,\n      isDesktop\n    ]\n  )\n\n  return <MediaContext.Provider value={value}>{children}</MediaContext.Provider>\n}\n\n/**\n * Hook to access media query state from the MediaContext.\n * This hook should be used instead of the original useMedia hook\n * to avoid creating multiple listeners in every component.\n */\nexport const useMedia = (): MediaContextType => {\n  const context = useContext(MediaContext)\n\n  if (context === null) {\n    throw new Error('useMedia must be used within a MediaProvider')\n  }\n\n  return context\n}\n"],"names":["useMediaQuery","_jsx"],"mappings":";;;;;;AA8BA,IAAM,YAAY,GAAG,aAAa,CAA0B,IAAI,CAAC,CAAA;AAMjE;;;AAGG;AACI,IAAM,aAAa,GAAG,UAAC,EAAgC,EAAA;AAA9B,IAAA,IAAA,QAAQ,GAAA,EAAA,CAAA,QAAA,CAAA;;IAEtC,IAAM,YAAY,GAAGA,UAAa,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IACvD,IAAM,OAAO,GAAGA,UAAa,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IAClD,IAAM,QAAQ,GAAGA,UAAa,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IACnD,IAAM,OAAO,GAAGA,UAAa,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IAClD,IAAM,YAAY,GAAGA,UAAa,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IAEvD,IAAM,iBAAiB,GAAGA,UAAa,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,CAAA;IAC1D,IAAM,YAAY,GAAGA,UAAa,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,CAAA;IACrD,IAAM,aAAa,GAAGA,UAAa,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,CAAA;IACtD,IAAM,YAAY,GAAGA,UAAa,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,CAAA;IACrD,IAAM,iBAAiB,GAAGA,UAAa,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,CAAC,CAAA;;AAG1D,IAAA,IAAM,QAAQ,GAAG,OAAO,CAAA;IACxB,IAAM,QAAQ,GAAG,CAAC,OAAO,IAAI,CAAC,aAAa,CAAA;AAC3C,IAAA,IAAM,SAAS,GAAG,aAAa,CAAA;;IAG/B,IAAM,YAAY,GAAG,UAAC,KAAa,EAAA;QACjC,OAAO,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,OAAO,CAAA;AACzC,KAAC,CAAA;AAED,IAAA,IAAM,KAAK,GAAG,OAAO,CACnB,YAAA,EAAM,QAAC;AACL,QAAA,YAAY,EAAA,YAAA;AACZ,QAAA,OAAO,EAAA,OAAA;AACP,QAAA,QAAQ,EAAA,QAAA;AACR,QAAA,OAAO,EAAA,OAAA;AACP,QAAA,YAAY,EAAA,YAAA;AACZ,QAAA,iBAAiB,EAAA,iBAAA;AACjB,QAAA,YAAY,EAAA,YAAA;AACZ,QAAA,aAAa,EAAA,aAAA;AACb,QAAA,YAAY,EAAA,YAAA;AACZ,QAAA,iBAAiB,EAAA,iBAAA;AACjB,QAAA,QAAQ,EAAA,QAAA;AACR,QAAA,QAAQ,EAAA,QAAA;AACR,QAAA,SAAS,EAAA,SAAA;AACT,QAAA,YAAY,EAAA,YAAA;KACb,EAAC,EAAA,EACF;QACE,YAAY;QACZ,OAAO;QACP,QAAQ;QACR,OAAO;QACP,YAAY;QACZ,iBAAiB;QACjB,YAAY;QACZ,aAAa;QACb,YAAY;QACZ,iBAAiB;QACjB,QAAQ;QACR,QAAQ;QACR,SAAS;AACV,KAAA,CACF,CAAA;IAED,OAAOC,GAAA,CAAC,YAAY,CAAC,QAAQ,EAAA,QAAA,CAAA,EAAC,KAAK,EAAE,KAAK,EAAA,EAAA,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAA,CAAyB,CAAA;AAChF,EAAC;AAED;;;;AAIG;AACU,IAAA,QAAQ,GAAG,YAAA;AACtB,IAAA,IAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAA;IAExC,IAAI,OAAO,KAAK,IAAI,EAAE;AACpB,QAAA,MAAM,IAAI,KAAK,CAAC,8CAA8C,CAAC,CAAA;AAChE,KAAA;AAED,IAAA,OAAO,OAAO,CAAA;AAChB;;;;"}

package/dist/contexts/index.d.ts

@@ -0,0 +1,2 @@
+export { MediaProvider } from './MediaContext';
+//# sourceMappingURL=index.d.ts.map

package/dist/contexts/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/contexts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/foundations/breakpoints/breakpoints.d.ts

@@ -0,0 +1,124 @@
+/**
+ * Audius Breakpoint System
+ *
+ * Standard breakpoints for responsive design. These values align with common
+ * device sizes and are used throughout the application for consistent
+ * responsive behavior.
+ */
+export declare const breakpoints: {
+    values: {
+        /**
+         * Extra small devices (portrait phones)
+         */
+        xs: number;
+        /**
+         * Small devices (landscape phones)
+         */
+        sm: number;
+        /**
+         * Medium devices (tablets)
+         */
+        md: number;
+        /**
+         * Large devices (desktops)
+         */
+        lg: number;
+        /**
+         * Extra large devices (large desktops)
+         */
+        xl: number;
+    };
+    /**
+     * Media query strings for max-width (smaller than breakpoint)
+     */
+    down: {
+        /**
+         * @example (max-width: 480px)
+         * Smaller than xs breakpoint (mobile phones)
+         */
+        xs: string;
+        /**
+         * @example (max-width: 768px)
+         * Smaller than sm breakpoint (includes mobile phones and small tablets)
+         */
+        sm: string;
+        /**
+         * @example (max-width: 1024px)
+         * Smaller than md breakpoint (includes mobile phones, tablets, and small laptops)
+         */
+        md: string;
+        /**
+         * @example (max-width: 1280px)
+         * Smaller than lg breakpoint (includes all except large desktops)
+         */
+        lg: string;
+        /**
+         * @example (max-width: 1440px)
+         * Smaller than xl breakpoint
+         */
+        xl: string;
+    };
+    /**
+     * Media query strings for min-width (larger than breakpoint)
+     */
+    up: {
+        /**
+         * @example (min-width: 481px)
+         * Larger than xs breakpoint (tablets and above)
+         */
+        xs: string;
+        /**
+         * @example (min-width: 769px)
+         * Larger than sm breakpoint (desktops and above)
+         */
+        sm: string;
+        /**
+         * @example (min-width: 1025px)
+         * Larger than md breakpoint (larger desktops)
+         */
+        md: string;
+        /**
+         * @example (min-width: 1281px)
+         * Larger than lg breakpoint (large desktops)
+         */
+        lg: string;
+        /**
+         * @example (min-width: 1441px)
+         * Larger than xl breakpoint (extra large desktops)
+         */
+        xl: string;
+    };
+    /**
+     * Media query strings for ranges between breakpoints
+     */
+    between: {
+        /**
+         * @example (min-width: 481px) and (max-width: 768px)
+         * Between xs and sm breakpoints (small tablets)
+         */
+        xs_sm: string;
+        /**
+         * @example (min-width: 769px) and (max-width: 1024px)
+         * Between sm and md breakpoints (tablets)
+         */
+        sm_md: string;
+        /**
+         * @example (min-width: 1025px) and (max-width: 1280px)
+         * Between md and lg breakpoints (small desktops)
+         */
+        md_lg: string;
+        /**
+         * @example (min-width: 1281px) and (max-width: 1440px)
+         * Between lg and xl breakpoints (medium desktops)
+         */
+        lg_xl: string;
+    };
+    /**
+     * Helper function to create a custom media query
+     * @param minWidth minimum width in pixels
+     * @param maxWidth maximum width in pixels
+     * @returns media query string
+     */
+    createCustomQuery: (minWidth?: number, maxWidth?: number) => string;
+};
+//# sourceMappingURL=breakpoints.d.ts.map

package/dist/foundations/breakpoints/breakpoints.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../src/foundations/breakpoints/breakpoints.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,eAAO,MAAM,WAAW;;QAGpB;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;QAEH;;WAEG;;;IAIL;;OAEG;;QAED;;;WAGG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QAEH;;;WAGG;;;IAIL;;OAEG;;QAED;;;WAGG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QAEH;;;WAGG;;;IAIL;;OAEG;;QAED;;;WAGG;;QAEH;;;WAGG;;QAEH;;;WAGG;;QAEH;;;WAGG;;;IAIL;;;;;OAKG;mCAC4B,MAAM,aAAa,MAAM,KAAG,MAAM;CAYlE,CAAA"}

package/dist/foundations/breakpoints/breakpoints.js

@@ -0,0 +1,138 @@
+/**
+ * Audius Breakpoint System
+ *
+ * Standard breakpoints for responsive design. These values align with common
+ * device sizes and are used throughout the application for consistent
+ * responsive behavior.
+ */
+var breakpoints = {
+    // Maximum width values for each breakpoint
+    values: {
+        /**
+         * Extra small devices (portrait phones)
+         */
+        xs: 480,
+        /**
+         * Small devices (landscape phones)
+         */
+        sm: 768,
+        /**
+         * Medium devices (tablets)
+         */
+        md: 1024,
+        /**
+         * Large devices (desktops)
+         */
+        lg: 1280,
+        /**
+         * Extra large devices (large desktops)
+         */
+        xl: 1440
+    },
+    /**
+     * Media query strings for max-width (smaller than breakpoint)
+     */
+    down: {
+        /**
+         * @example (max-width: 480px)
+         * Smaller than xs breakpoint (mobile phones)
+         */
+        xs: "(max-width: 480px)",
+        /**
+         * @example (max-width: 768px)
+         * Smaller than sm breakpoint (includes mobile phones and small tablets)
+         */
+        sm: "(max-width: 768px)",
+        /**
+         * @example (max-width: 1024px)
+         * Smaller than md breakpoint (includes mobile phones, tablets, and small laptops)
+         */
+        md: "(max-width: 1024px)",
+        /**
+         * @example (max-width: 1280px)
+         * Smaller than lg breakpoint (includes all except large desktops)
+         */
+        lg: "(max-width: 1280px)",
+        /**
+         * @example (max-width: 1440px)
+         * Smaller than xl breakpoint
+         */
+        xl: "(max-width: 1440px)"
+    },
+    /**
+     * Media query strings for min-width (larger than breakpoint)
+     */
+    up: {
+        /**
+         * @example (min-width: 481px)
+         * Larger than xs breakpoint (tablets and above)
+         */
+        xs: "(min-width: 481px)",
+        /**
+         * @example (min-width: 769px)
+         * Larger than sm breakpoint (desktops and above)
+         */
+        sm: "(min-width: 769px)",
+        /**
+         * @example (min-width: 1025px)
+         * Larger than md breakpoint (larger desktops)
+         */
+        md: "(min-width: 1025px)",
+        /**
+         * @example (min-width: 1281px)
+         * Larger than lg breakpoint (large desktops)
+         */
+        lg: "(min-width: 1281px)",
+        /**
+         * @example (min-width: 1441px)
+         * Larger than xl breakpoint (extra large desktops)
+         */
+        xl: "(min-width: 1441px)"
+    },
+    /**
+     * Media query strings for ranges between breakpoints
+     */
+    between: {
+        /**
+         * @example (min-width: 481px) and (max-width: 768px)
+         * Between xs and sm breakpoints (small tablets)
+         */
+        xs_sm: "(min-width: 481px) and (max-width: 768px)",
+        /**
+         * @example (min-width: 769px) and (max-width: 1024px)
+         * Between sm and md breakpoints (tablets)
+         */
+        sm_md: "(min-width: 769px) and (max-width: 1024px)",
+        /**
+         * @example (min-width: 1025px) and (max-width: 1280px)
+         * Between md and lg breakpoints (small desktops)
+         */
+        md_lg: "(min-width: 1025px) and (max-width: 1280px)",
+        /**
+         * @example (min-width: 1281px) and (max-width: 1440px)
+         * Between lg and xl breakpoints (medium desktops)
+         */
+        lg_xl: "(min-width: 1281px) and (max-width: 1440px)"
+    },
+    /**
+     * Helper function to create a custom media query
+     * @param minWidth minimum width in pixels
+     * @param maxWidth maximum width in pixels
+     * @returns media query string
+     */
+    createCustomQuery: function (minWidth, maxWidth) {
+        if (minWidth && maxWidth) {
+            return "(min-width: ".concat(minWidth, "px) and (max-width: ").concat(maxWidth, "px)");
+        }
+        if (minWidth) {
+            return "(min-width: ".concat(minWidth, "px)");
+        }
+        if (maxWidth) {
+            return "(max-width: ".concat(maxWidth, "px)");
+        }
+        return '';
+    }
+};
+
+export { breakpoints };
+//# sourceMappingURL=breakpoints.js.map

package/dist/foundations/breakpoints/breakpoints.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.js","sources":["../../../src/foundations/breakpoints/breakpoints.ts"],"sourcesContent":["/**\n * Audius Breakpoint System\n *\n * Standard breakpoints for responsive design. These values align with common\n * device sizes and are used throughout the application for consistent\n * responsive behavior.\n */\n\nexport const breakpoints = {\n  // Maximum width values for each breakpoint\n  values: {\n    /**\n     * Extra small devices (portrait phones)\n     */\n    xs: 480,\n    /**\n     * Small devices (landscape phones)\n     */\n    sm: 768,\n    /**\n     * Medium devices (tablets)\n     */\n    md: 1024,\n    /**\n     * Large devices (desktops)\n     */\n    lg: 1280,\n    /**\n     * Extra large devices (large desktops)\n     */\n    xl: 1440\n  },\n\n  /**\n   * Media query strings for max-width (smaller than breakpoint)\n   */\n  down: {\n    /**\n     * @example (max-width: 480px)\n     * Smaller than xs breakpoint (mobile phones)\n     */\n    xs: `(max-width: 480px)`,\n    /**\n     * @example (max-width: 768px)\n     * Smaller than sm breakpoint (includes mobile phones and small tablets)\n     */\n    sm: `(max-width: 768px)`,\n    /**\n     * @example (max-width: 1024px)\n     * Smaller than md breakpoint (includes mobile phones, tablets, and small laptops)\n     */\n    md: `(max-width: 1024px)`,\n    /**\n     * @example (max-width: 1280px)\n     * Smaller than lg breakpoint (includes all except large desktops)\n     */\n    lg: `(max-width: 1280px)`,\n    /**\n     * @example (max-width: 1440px)\n     * Smaller than xl breakpoint\n     */\n    xl: `(max-width: 1440px)`\n  },\n\n  /**\n   * Media query strings for min-width (larger than breakpoint)\n   */\n  up: {\n    /**\n     * @example (min-width: 481px)\n     * Larger than xs breakpoint (tablets and above)\n     */\n    xs: `(min-width: 481px)`,\n    /**\n     * @example (min-width: 769px)\n     * Larger than sm breakpoint (desktops and above)\n     */\n    sm: `(min-width: 769px)`,\n    /**\n     * @example (min-width: 1025px)\n     * Larger than md breakpoint (larger desktops)\n     */\n    md: `(min-width: 1025px)`,\n    /**\n     * @example (min-width: 1281px)\n     * Larger than lg breakpoint (large desktops)\n     */\n    lg: `(min-width: 1281px)`,\n    /**\n     * @example (min-width: 1441px)\n     * Larger than xl breakpoint (extra large desktops)\n     */\n    xl: `(min-width: 1441px)`\n  },\n\n  /**\n   * Media query strings for ranges between breakpoints\n   */\n  between: {\n    /**\n     * @example (min-width: 481px) and (max-width: 768px)\n     * Between xs and sm breakpoints (small tablets)\n     */\n    xs_sm: `(min-width: 481px) and (max-width: 768px)`,\n    /**\n     * @example (min-width: 769px) and (max-width: 1024px)\n     * Between sm and md breakpoints (tablets)\n     */\n    sm_md: `(min-width: 769px) and (max-width: 1024px)`,\n    /**\n     * @example (min-width: 1025px) and (max-width: 1280px)\n     * Between md and lg breakpoints (small desktops)\n     */\n    md_lg: `(min-width: 1025px) and (max-width: 1280px)`,\n    /**\n     * @example (min-width: 1281px) and (max-width: 1440px)\n     * Between lg and xl breakpoints (medium desktops)\n     */\n    lg_xl: `(min-width: 1281px) and (max-width: 1440px)`\n  },\n\n  /**\n   * Helper function to create a custom media query\n   * @param minWidth minimum width in pixels\n   * @param maxWidth maximum width in pixels\n   * @returns media query string\n   */\n  createCustomQuery: (minWidth?: number, maxWidth?: number): string => {\n    if (minWidth && maxWidth) {\n      return `(min-width: ${minWidth}px) and (max-width: ${maxWidth}px)`\n    }\n    if (minWidth) {\n      return `(min-width: ${minWidth}px)`\n    }\n    if (maxWidth) {\n      return `(max-width: ${maxWidth}px)`\n    }\n    return ''\n  }\n}\n"],"names":[],"mappings":"AAAA;;;;;;AAMG;AAEU,IAAA,WAAW,GAAG;;AAEzB,IAAA,MAAM,EAAE;AACN;;AAEG;AACH,QAAA,EAAE,EAAE,GAAG;AACP;;AAEG;AACH,QAAA,EAAE,EAAE,GAAG;AACP;;AAEG;AACH,QAAA,EAAE,EAAE,IAAI;AACR;;AAEG;AACH,QAAA,EAAE,EAAE,IAAI;AACR;;AAEG;AACH,QAAA,EAAE,EAAE,IAAI;AACT,KAAA;AAED;;AAEG;AACH,IAAA,IAAI,EAAE;AACJ;;;AAGG;AACH,QAAA,EAAE,EAAE,oBAAoB;AACxB;;;AAGG;AACH,QAAA,EAAE,EAAE,oBAAoB;AACxB;;;AAGG;AACH,QAAA,EAAE,EAAE,qBAAqB;AACzB;;;AAGG;AACH,QAAA,EAAE,EAAE,qBAAqB;AACzB;;;AAGG;AACH,QAAA,EAAE,EAAE,qBAAqB;AAC1B,KAAA;AAED;;AAEG;AACH,IAAA,EAAE,EAAE;AACF;;;AAGG;AACH,QAAA,EAAE,EAAE,oBAAoB;AACxB;;;AAGG;AACH,QAAA,EAAE,EAAE,oBAAoB;AACxB;;;AAGG;AACH,QAAA,EAAE,EAAE,qBAAqB;AACzB;;;AAGG;AACH,QAAA,EAAE,EAAE,qBAAqB;AACzB;;;AAGG;AACH,QAAA,EAAE,EAAE,qBAAqB;AAC1B,KAAA;AAED;;AAEG;AACH,IAAA,OAAO,EAAE;AACP;;;AAGG;AACH,QAAA,KAAK,EAAE,2CAA2C;AAClD;;;AAGG;AACH,QAAA,KAAK,EAAE,4CAA4C;AACnD;;;AAGG;AACH,QAAA,KAAK,EAAE,6CAA6C;AACpD;;;AAGG;AACH,QAAA,KAAK,EAAE,6CAA6C;AACrD,KAAA;AAED;;;;;AAKG;AACH,IAAA,iBAAiB,EAAE,UAAC,QAAiB,EAAE,QAAiB,EAAA;QACtD,IAAI,QAAQ,IAAI,QAAQ,EAAE;AACxB,YAAA,OAAO,cAAe,CAAA,MAAA,CAAA,QAAQ,EAAuB,sBAAA,CAAA,CAAA,MAAA,CAAA,QAAQ,QAAK,CAAA;AACnE,SAAA;AACD,QAAA,IAAI,QAAQ,EAAE;YACZ,OAAO,cAAA,CAAA,MAAA,CAAe,QAAQ,EAAA,KAAA,CAAK,CAAA;AACpC,SAAA;AACD,QAAA,IAAI,QAAQ,EAAE;YACZ,OAAO,cAAA,CAAA,MAAA,CAAe,QAAQ,EAAA,KAAA,CAAK,CAAA;AACpC,SAAA;AACD,QAAA,OAAO,EAAE,CAAA;KACV;;;;;"}

package/dist/foundations/breakpoints/index.d.ts

@@ -0,0 +1,2 @@
+export * from './breakpoints';
+//# sourceMappingURL=index.d.ts.map

package/dist/foundations/breakpoints/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/foundations/breakpoints/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}

package/dist/foundations/color/color.d.ts

@@ -44,6 +44,7 @@ export declare const colorTheme: {
             surface2: string;
             white: string;
             primary: string;
+            gradient: string;
             accent: string;
         };
         border: {
@@ -167,6 +168,7 @@ export declare const colorTheme: {
             surface2: string;
             white: string;
             primary: string;
+            gradient: string;
             accent: string;
         };
         border: {
@@ -290,6 +292,7 @@ export declare const colorTheme: {
             surface2: string;
             white: string;
             primary: string;
+            gradient: string;
             accent: string;
         };
         border: {

package/dist/foundations/color/color.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../src/foundations/color/color.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAatB,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,OAAO,UAAU,CAAA"}
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../src/foundations/color/color.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAatB,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,OAAO,UAAU,CAAA"}

package/dist/foundations/color/semantic.d.ts

@@ -44,6 +44,7 @@ export declare const semanticTheme: {
             surface2: string;
             white: string;
             primary: string;
+            gradient: string;
             accent: string;
         };
         border: {
@@ -107,6 +108,7 @@ export declare const semanticTheme: {
             surface2: string;
             white: string;
             primary: string;
+            gradient: string;
             accent: string;
         };
         border: {
@@ -170,6 +172,7 @@ export declare const semanticTheme: {
             surface2: string;
             white: string;
             primary: string;
+            gradient: string;
             accent: string;
         };
         border: {

package/dist/foundations/color/semantic.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"semantic.d.ts","sourceRoot":"","sources":["../../../src/foundations/color/semantic.ts"],"names":[],"mappings":"AAyEA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIzB,CAAA;AAED,MAAM,MAAM,cAAc,GAAG,OAAO,aAAa,CAAC,GAAG,CAAA;AAErD,MAAM,MAAM,UAAU,GAAG,MAAM,cAAc,CAAC,MAAM,CAAC,CAAA;AACrD,MAAM,MAAM,UAAU,GAAG,MAAM,cAAc,CAAC,MAAM,CAAC,CAAA;AACrD,MAAM,MAAM,gBAAgB,GAAG,MAAM,cAAc,CAAC,YAAY,CAAC,CAAA;AACjE,MAAM,MAAM,YAAY,GAAG,MAAM,cAAc,CAAC,QAAQ,CAAC,CAAA;AACzD,MAAM,MAAM,WAAW,GAAG,MAAM,cAAc,CAAC,OAAO,CAAC,CAAA;AACvD,MAAM,MAAM,YAAY,GAAG,MAAM,cAAc,CAAC,QAAQ,CAAC,CAAA"}
+{"version":3,"file":"semantic.d.ts","sourceRoot":"","sources":["../../../src/foundations/color/semantic.ts"],"names":[],"mappings":"AA0EA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIzB,CAAA;AAED,MAAM,MAAM,cAAc,GAAG,OAAO,aAAa,CAAC,GAAG,CAAA;AAErD,MAAM,MAAM,UAAU,GAAG,MAAM,cAAc,CAAC,MAAM,CAAC,CAAA;AACrD,MAAM,MAAM,UAAU,GAAG,MAAM,cAAc,CAAC,MAAM,CAAC,CAAA;AACrD,MAAM,MAAM,gBAAgB,GAAG,MAAM,cAAc,CAAC,YAAY,CAAC,CAAA;AACjE,MAAM,MAAM,YAAY,GAAG,MAAM,cAAc,CAAC,QAAQ,CAAC,CAAA;AACzD,MAAM,MAAM,WAAW,GAAG,MAAM,cAAc,CAAC,OAAO,CAAC,CAAA;AACvD,MAAM,MAAM,YAAY,GAAG,MAAM,cAAc,CAAC,QAAQ,CAAC,CAAA"}

package/dist/foundations/color/semantic.js

@@ -47,6 +47,7 @@ var createSemanticTheme = function (primitives) { return ({
         surface2: primitives.neutral.n50,
         white: primitives.special.white,
         primary: primitives.primary.p300,
+        gradient: primitives.special.gradient,
         // Legacy compatibility
         accent: primitives.secondary.s300
     },

package/dist/foundations/color/semantic.js.map

@@ -1 +1 @@
-{"version":3,"file":"semantic.js","sources":["../../../src/foundations/color/semantic.ts"],"sourcesContent":["import type { PrimitiveColors } from './primitive'\nimport { primitiveTheme } from './primitive'\n\nconst createSemanticTheme = (primitives: PrimitiveColors) => ({\n  text: {\n    default: primitives.neutral.n800,\n    subdued: primitives.neutral.n400,\n    disabled: primitives.neutral.n150,\n    link: primitives.primary.p500,\n    accent: primitives.secondary.s300,\n    inverse: primitives.neutral.n950,\n\n    // Legacy compatibility\n    heading: primitives.special.gradient,\n    active: primitives.primary.p300,\n    white: primitives.special.white,\n    staticWhite: primitives.static.staticWhite,\n    warning: primitives.special.orange,\n    danger: primitives.special.red,\n    premium: primitives.special.lightGreen,\n    special: primitives.special.blue\n  },\n  icon: {\n    default: primitives.neutral.n800,\n    subdued: primitives.neutral.n400,\n    disabled: primitives.neutral.n150,\n    link: primitives.primary.p500,\n    accent: primitives.secondary.s300,\n    inverse: primitives.static.staticWhite,\n\n    // Legacy compatibility\n    heading: primitives.special.gradient,\n    active: primitives.primary.p300,\n    white: primitives.special.white,\n    staticWhite: primitives.static.staticWhite,\n    warning: primitives.special.orange,\n    danger: primitives.special.red,\n    premium: primitives.special.lightGreen,\n    special: primitives.special.blue\n  },\n  link: {\n    default: primitives.neutral.n800,\n    subdued: primitives.neutral.n400,\n    visible: primitives.primary.p500,\n    inverted: primitives.static.white\n  },\n  background: {\n    default: primitives.special.background,\n    surface1: primitives.neutral.n25,\n    surface2: primitives.neutral.n50,\n    white: primitives.special.white,\n    primary: primitives.primary.p300,\n\n    // Legacy compatibility\n    accent: primitives.secondary.s300\n  },\n  border: {\n    default: primitives.neutral.n100,\n    strong: primitives.neutral.n150,\n    negative: primitives.special.white,\n    accent: primitives.secondary.s300\n  },\n  focus: {\n    default: primitives.secondary.s300\n  },\n  status: {\n    error: primitives.special.red,\n    warning: primitives.special.orange,\n    success: primitives.special.green,\n    danger: primitives.special.red\n  }\n})\n\nexport const semanticTheme = {\n  day: createSemanticTheme(primitiveTheme.day),\n  dark: createSemanticTheme(primitiveTheme.dark),\n  matrix: createSemanticTheme(primitiveTheme.matrix)\n}\n\nexport type SemanticColors = typeof semanticTheme.day\n\nexport type TextColors = keyof SemanticColors['text']\nexport type IconColors = keyof SemanticColors['icon']\nexport type BackgroundColors = keyof SemanticColors['background']\nexport type BorderColors = keyof SemanticColors['border']\nexport type FocusColors = keyof SemanticColors['focus']\nexport type StatusColors = keyof SemanticColors['status']\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"semantic.js","sources":["../../../src/foundations/color/semantic.ts"],"sourcesContent":["import type { PrimitiveColors } from './primitive'\nimport { primitiveTheme } from './primitive'\n\nconst createSemanticTheme = (primitives: PrimitiveColors) => ({\n  text: {\n    default: primitives.neutral.n800,\n    subdued: primitives.neutral.n400,\n    disabled: primitives.neutral.n150,\n    link: primitives.primary.p500,\n    accent: primitives.secondary.s300,\n    inverse: primitives.neutral.n950,\n\n    // Legacy compatibility\n    heading: primitives.special.gradient,\n    active: primitives.primary.p300,\n    white: primitives.special.white,\n    staticWhite: primitives.static.staticWhite,\n    warning: primitives.special.orange,\n    danger: primitives.special.red,\n    premium: primitives.special.lightGreen,\n    special: primitives.special.blue\n  },\n  icon: {\n    default: primitives.neutral.n800,\n    subdued: primitives.neutral.n400,\n    disabled: primitives.neutral.n150,\n    link: primitives.primary.p500,\n    accent: primitives.secondary.s300,\n    inverse: primitives.static.staticWhite,\n\n    // Legacy compatibility\n    heading: primitives.special.gradient,\n    active: primitives.primary.p300,\n    white: primitives.special.white,\n    staticWhite: primitives.static.staticWhite,\n    warning: primitives.special.orange,\n    danger: primitives.special.red,\n    premium: primitives.special.lightGreen,\n    special: primitives.special.blue\n  },\n  link: {\n    default: primitives.neutral.n800,\n    subdued: primitives.neutral.n400,\n    visible: primitives.primary.p500,\n    inverted: primitives.static.white\n  },\n  background: {\n    default: primitives.special.background,\n    surface1: primitives.neutral.n25,\n    surface2: primitives.neutral.n50,\n    white: primitives.special.white,\n    primary: primitives.primary.p300,\n    gradient: primitives.special.gradient,\n\n    // Legacy compatibility\n    accent: primitives.secondary.s300\n  },\n  border: {\n    default: primitives.neutral.n100,\n    strong: primitives.neutral.n150,\n    negative: primitives.special.white,\n    accent: primitives.secondary.s300\n  },\n  focus: {\n    default: primitives.secondary.s300\n  },\n  status: {\n    error: primitives.special.red,\n    warning: primitives.special.orange,\n    success: primitives.special.green,\n    danger: primitives.special.red\n  }\n})\n\nexport const semanticTheme = {\n  day: createSemanticTheme(primitiveTheme.day),\n  dark: createSemanticTheme(primitiveTheme.dark),\n  matrix: createSemanticTheme(primitiveTheme.matrix)\n}\n\nexport type SemanticColors = typeof semanticTheme.day\n\nexport type TextColors = keyof SemanticColors['text']\nexport type IconColors = keyof SemanticColors['icon']\nexport type BackgroundColors = keyof SemanticColors['background']\nexport type BorderColors = keyof SemanticColors['border']\nexport type FocusColors = keyof SemanticColors['focus']\nexport type StatusColors = keyof SemanticColors['status']\n"],"names":[],"mappings":"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"}

package/dist/foundations/index.d.ts

@@ -5,4 +5,5 @@ export * from './shadows';
 export * from './theme';
 export * from './typography';
 export * from './spacing';
+export * from './breakpoints';
 //# sourceMappingURL=index.d.ts.map

package/dist/foundations/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/foundations/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/foundations/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA"}

package/dist/foundations/shadows/shadows.d.ts

@@ -1,4 +1,4 @@
-export type ShadowOptions = 'near' | 'mid' | 'midInverted' | 'far' | 'emphasis' | 'special' | 'drop' | 'flat';
+export type ShadowOptions = 'near' | 'mid' | 'midInverted' | 'far' | 'emphasis' | 'special' | 'drop' | 'flat' | 'inset';
 export declare const shadows: {
     near: string;
     mid: string;
@@ -8,6 +8,7 @@ export declare const shadows: {
     special: string;
     flat: undefined;
     drop: string;
+    inset: string;
 };
 export type Shadows = typeof shadows;
 //# sourceMappingURL=shadows.d.ts.map

package/dist/foundations/shadows/shadows.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shadows.d.ts","sourceRoot":"","sources":["../../../src/foundations/shadows/shadows.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GACrB,MAAM,GACN,KAAK,GACL,aAAa,GACb,KAAK,GACL,UAAU,GACV,SAAS,GACT,MAAM,GACN,MAAM,CAAA;AAEV,eAAO,MAAM,OAAO;;;;;;;;;CAWnB,CAAA;AAED,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAA"}
+{"version":3,"file":"shadows.d.ts","sourceRoot":"","sources":["../../../src/foundations/shadows/shadows.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GACrB,MAAM,GACN,KAAK,GACL,aAAa,GACb,KAAK,GACL,UAAU,GACV,SAAS,GACT,MAAM,GACN,MAAM,GACN,OAAO,CAAA;AAEX,eAAO,MAAM,OAAO;;;;;;;;;;CAYnB,CAAA;AAED,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAA"}

package/dist/foundations/shadows/shadows.js

@@ -6,7 +6,8 @@ var shadows = {
     emphasis: '0px 1.34018px 8px 0px rgba(0, 0, 0, 0.2), 0px 6px 15px 0px rgba(0, 0, 0, 0.1)',
     special: '0px 1px 20px -3px #565776',
     flat: undefined,
-    drop: 'drop-shadow(0px 1.34018px 8px rgba(0, 0, 0, 0.2)) drop-shadow(0px 6px 15px rgba(0, 0, 0, 0.1))'
+    drop: 'drop-shadow(0px 1.34018px 8px rgba(0, 0, 0, 0.2)) drop-shadow(0px 6px 15px rgba(0, 0, 0, 0.1))',
+    inset: '0px 0px 8px 0px rgba(0, 0, 0, 0.10) inset'
 };
 
 export { shadows };

package/dist/foundations/shadows/shadows.js.map

@@ -1 +1 @@
-{"version":3,"file":"shadows.js","sources":["../../../src/foundations/shadows/shadows.ts"],"sourcesContent":["export type ShadowOptions =\n  | 'near'\n  | 'mid'\n  | 'midInverted'\n  | 'far'\n  | 'emphasis'\n  | 'special'\n  | 'drop'\n  | 'flat'\n\nexport const shadows = {\n  near: '0px 2px 4px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.02)',\n  mid: '0px 4px 8px 0px rgba(0, 0, 0, 0.06), 0px 0px 4px 0px rgba(0, 0, 0, 0.04)',\n  midInverted:\n    '0px -4px 8px 0px rgba(0, 0, 0, 0.06), 0px 0px 4px 0px rgba(0, 0, 0, 0.04)',\n  far: '0px 8px 16px 0px rgba(0, 0, 0, 0.08), 0px 0px 4px 0px rgba(0, 0, 0, 0.04)',\n  emphasis:\n    '0px 1.34018px 8px 0px rgba(0, 0, 0, 0.2), 0px 6px 15px 0px rgba(0, 0, 0, 0.1)',\n  special: '0px 1px 20px -3px #565776',\n  flat: undefined,\n  drop: 'drop-shadow(0px 1.34018px 8px rgba(0, 0, 0, 0.2)) drop-shadow(0px 6px 15px rgba(0, 0, 0, 0.1))'\n}\n\nexport type Shadows = typeof shadows\n"],"names":[],"mappings":"AAUa,IAAA,OAAO,GAAG;AACrB,IAAA,IAAI,EAAE,0EAA0E;AAChF,IAAA,GAAG,EAAE,0EAA0E;AAC/E,IAAA,WAAW,EACT,2EAA2E;AAC7E,IAAA,GAAG,EAAE,2EAA2E;AAChF,IAAA,QAAQ,EACN,+EAA+E;AACjF,IAAA,OAAO,EAAE,2BAA2B;AACpC,IAAA,IAAI,EAAE,SAAS;AACf,IAAA,IAAI,EAAE,gGAAgG;;;;;"}
+{"version":3,"file":"shadows.js","sources":["../../../src/foundations/shadows/shadows.ts"],"sourcesContent":["export type ShadowOptions =\n  | 'near'\n  | 'mid'\n  | 'midInverted'\n  | 'far'\n  | 'emphasis'\n  | 'special'\n  | 'drop'\n  | 'flat'\n  | 'inset'\n\nexport const shadows = {\n  near: '0px 2px 4px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.02)',\n  mid: '0px 4px 8px 0px rgba(0, 0, 0, 0.06), 0px 0px 4px 0px rgba(0, 0, 0, 0.04)',\n  midInverted:\n    '0px -4px 8px 0px rgba(0, 0, 0, 0.06), 0px 0px 4px 0px rgba(0, 0, 0, 0.04)',\n  far: '0px 8px 16px 0px rgba(0, 0, 0, 0.08), 0px 0px 4px 0px rgba(0, 0, 0, 0.04)',\n  emphasis:\n    '0px 1.34018px 8px 0px rgba(0, 0, 0, 0.2), 0px 6px 15px 0px rgba(0, 0, 0, 0.1)',\n  special: '0px 1px 20px -3px #565776',\n  flat: undefined,\n  drop: 'drop-shadow(0px 1.34018px 8px rgba(0, 0, 0, 0.2)) drop-shadow(0px 6px 15px rgba(0, 0, 0, 0.1))',\n  inset: '0px 0px 8px 0px rgba(0, 0, 0, 0.10) inset'\n}\n\nexport type Shadows = typeof shadows\n"],"names":[],"mappings":"AAWa,IAAA,OAAO,GAAG;AACrB,IAAA,IAAI,EAAE,0EAA0E;AAChF,IAAA,GAAG,EAAE,0EAA0E;AAC/E,IAAA,WAAW,EACT,2EAA2E;AAC7E,IAAA,GAAG,EAAE,2EAA2E;AAChF,IAAA,QAAQ,EACN,+EAA+E;AACjF,IAAA,OAAO,EAAE,2BAA2B;AACpC,IAAA,IAAI,EAAE,SAAS;AACf,IAAA,IAAI,EAAE,gGAAgG;AACtG,IAAA,KAAK,EAAE,2CAA2C;;;;;"}

package/dist/foundations/theme/ThemeProvider.js

@@ -2,7 +2,7 @@ import { __assign } from '../../_virtual/_tslib.js';
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 import { useEffect } from 'react';
 import { ThemeProvider as ThemeProvider$1 } from '@emotion/react';
-import { GradientDefs } from '../../icons/GradientDefs.js';
+import { SVGDefs } from '../../icons/SVGDefs.js';
 import { themes } from './theme.js';
 
 var ThemeProvider = function (props) {
@@ -12,7 +12,7 @@ var ThemeProvider = function (props) {
             document.documentElement.setAttribute('data-theme', theme);
         }
     }, [theme]);
-    return (jsxs(ThemeProvider$1, __assign({ theme: themes[theme] }, { children: [jsx(GradientDefs, {}), children] })));
+    return (jsxs(ThemeProvider$1, __assign({ theme: themes[theme] }, { children: [jsx(SVGDefs, {}), children] })));
 };
 
 export { ThemeProvider };

package/dist/foundations/theme/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","sources":["../../../src/foundations/theme/ThemeProvider.tsx"],"sourcesContent":["import { useEffect, type ReactNode } from 'react'\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\n\nimport { GradientDefs } from '../../icons/GradientDefs'\n\nimport { themes } from './theme'\nimport type { Theme } from './types'\n\ntype ThemeProviderProps = {\n  theme: Theme\n  children: ReactNode\n}\n\nexport const ThemeProvider = (props: ThemeProviderProps) => {\n  const { children, theme } = props\n\n  useEffect(() => {\n    if (typeof document !== 'undefined') {\n      document.documentElement.setAttribute('data-theme', theme)\n    }\n  }, [theme])\n\n  return (\n    <EmotionThemeProvider theme={themes[theme]}>\n      <GradientDefs />\n      {children}\n    </EmotionThemeProvider>\n  )\n}\n"],"names":["_jsxs","EmotionThemeProvider","_jsx"],"mappings":";;;;;;;AAcO,IAAM,aAAa,GAAG,UAAC,KAAyB,EAAA;IAC7C,IAAA,QAAQ,GAAY,KAAK,CAAA,QAAjB,EAAE,KAAK,GAAK,KAAK,CAAA,KAAV,CAAU;AAEjC,IAAA,SAAS,CAAC,YAAA;AACR,QAAA,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE;YACnC,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,YAAY,EAAE,KAAK,CAAC,CAAA;AAC3D,SAAA;AACH,KAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;AAEX,IAAA,QACEA,IAAC,CAAAC,eAAoB,aAAC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,EAAA,EAAA,EAAA,QAAA,EAAA,CACxCC,IAAC,YAAY,EAAA,EAAA,CAAG,EACf,QAAQ,CAAA,EAAA,CAAA,CACY,EACxB;AACH;;;;"}
+{"version":3,"file":"ThemeProvider.js","sources":["../../../src/foundations/theme/ThemeProvider.tsx"],"sourcesContent":["import { useEffect, type ReactNode } from 'react'\n\nimport { ThemeProvider as EmotionThemeProvider } from '@emotion/react'\n\nimport { SVGDefs } from '../../icons/SVGDefs'\n\nimport { themes } from './theme'\nimport type { Theme } from './types'\n\ntype ThemeProviderProps = {\n  theme: Theme\n  children: ReactNode\n}\n\nexport const ThemeProvider = (props: ThemeProviderProps) => {\n  const { children, theme } = props\n\n  useEffect(() => {\n    if (typeof document !== 'undefined') {\n      document.documentElement.setAttribute('data-theme', theme)\n    }\n  }, [theme])\n\n  return (\n    <EmotionThemeProvider theme={themes[theme]}>\n      <SVGDefs />\n      {children}\n    </EmotionThemeProvider>\n  )\n}\n"],"names":["_jsxs","EmotionThemeProvider","_jsx"],"mappings":";;;;;;;AAcO,IAAM,aAAa,GAAG,UAAC,KAAyB,EAAA;IAC7C,IAAA,QAAQ,GAAY,KAAK,CAAA,QAAjB,EAAE,KAAK,GAAK,KAAK,CAAA,KAAV,CAAU;AAEjC,IAAA,SAAS,CAAC,YAAA;AACR,QAAA,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE;YACnC,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,YAAY,EAAE,KAAK,CAAC,CAAA;AAC3D,SAAA;AACH,KAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;AAEX,IAAA,QACEA,IAAC,CAAAC,eAAoB,aAAC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,EAAA,EAAA,EAAA,QAAA,EAAA,CACxCC,IAAC,OAAO,EAAA,EAAA,CAAG,EACV,QAAQ,CAAA,EAAA,CAAA,CACY,EACxB;AACH;;;;"}