@grantbii/design-system 1.9.0 → 1.9.1

package/core/foundations/responsive.d.ts

@@ -1,5 +1,3 @@
 export declare const WIDTH_BREAKPOINTS: {
     laptop: string;
 };
-export declare const SmallScreenOnly: import("styled-components").RuleSet<object>;
-export declare const LargeScreenOnly: import("styled-components").RuleSet<object>;

package/core/foundations/responsive.js

@@ -1,23 +1,4 @@
-import { css } from "styled-components";
 export const WIDTH_BREAKPOINTS = {
     laptop: "1024px",
 };
-export const SmallScreenOnly = css `
-  @media (width < ${WIDTH_BREAKPOINTS.laptop}) {
-    display: inline;
-  }
-
-  @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {
-    display: none;
-  }
-`;
-export const LargeScreenOnly = css `
-  @media (width < ${WIDTH_BREAKPOINTS.laptop}) {
-    display: none;
-  }
-
-  @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {
-    display: inline;
-  }
-`;
 //# sourceMappingURL=responsive.js.map

package/core/foundations/responsive.js.map

@@ -1 +1 @@
-{"version":3,"file":"responsive.js","sourceRoot":"","sources":["../../../core/foundations/responsive.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAExC,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE,QAAQ;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;oBACd,iBAAiB,CAAC,MAAM;;;;qBAIvB,iBAAiB,CAAC,MAAM;;;CAG5C,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;oBACd,iBAAiB,CAAC,MAAM;;;;qBAIvB,iBAAiB,CAAC,MAAM;;;CAG5C,CAAC","sourcesContent":["import { css } from \"styled-components\";\n\nexport const WIDTH_BREAKPOINTS = {\n  laptop: \"1024px\",\n};\n\nexport const SmallScreenOnly = css`\n  @media (width < ${WIDTH_BREAKPOINTS.laptop}) {\n    display: inline;\n  }\n\n  @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {\n    display: none;\n  }\n`;\n\nexport const LargeScreenOnly = css`\n  @media (width < ${WIDTH_BREAKPOINTS.laptop}) {\n    display: none;\n  }\n\n  @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {\n    display: inline;\n  }\n`;\n"]}
+{"version":3,"file":"responsive.js","sourceRoot":"","sources":["../../../core/foundations/responsive.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE,QAAQ;CACjB,CAAC","sourcesContent":["export const WIDTH_BREAKPOINTS = {\n  laptop: \"1024px\",\n};\n"]}

package/core/integrations/fragments.d.ts

@@ -0,0 +1,7 @@
+export declare const SmallScreenOnly: import("styled-components").RuleSet<object>;
+export declare const LargeScreenOnly: import("styled-components").RuleSet<object>;
+export declare const TitleFontSize: import("styled-components").RuleSet<object>;
+export declare const HeaderFontSize: import("styled-components").RuleSet<object>;
+export declare const SubheaderFontSize: import("styled-components").RuleSet<object>;
+export declare const BodyFontSize: import("styled-components").RuleSet<object>;
+export declare const HelperFontSize: import("styled-components").RuleSet<object>;

package/core/integrations/fragments.js

@@ -0,0 +1,67 @@
+import { css } from "styled-components";
+import { WIDTH_BREAKPOINTS } from "../foundations/responsive";
+import { BODY_FONT_SIZES, HEADER_FONT_SIZES, HELPER_FONT_SIZES, SUBHEADER_FONT_SIZES, TITLE_FONT_SIZES, } from "../foundations/typography";
+export const SmallScreenOnly = css `
+  @media (width < ${WIDTH_BREAKPOINTS.laptop}) {
+    display: inline;
+  }
+
+  @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {
+    display: none;
+  }
+`;
+export const LargeScreenOnly = css `
+  @media (width < ${WIDTH_BREAKPOINTS.laptop}) {
+    display: none;
+  }
+
+  @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {
+    display: inline;
+  }
+`;
+export const TitleFontSize = css `
+  @media (width < ${WIDTH_BREAKPOINTS.laptop}) {
+    font-size: ${TITLE_FONT_SIZES.small};
+  }
+
+  @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {
+    font-size: ${TITLE_FONT_SIZES.large};
+  }
+`;
+export const HeaderFontSize = css `
+  @media (width < ${WIDTH_BREAKPOINTS.laptop}) {
+    font-size: ${HEADER_FONT_SIZES.small};
+  }
+
+  @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {
+    font-size: ${HEADER_FONT_SIZES.large};
+  }
+`;
+export const SubheaderFontSize = css `
+  @media (width < ${WIDTH_BREAKPOINTS.laptop}) {
+    font-size: ${SUBHEADER_FONT_SIZES.small};
+  }
+
+  @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {
+    font-size: ${SUBHEADER_FONT_SIZES.large};
+  }
+`;
+export const BodyFontSize = css `
+  @media (width < ${WIDTH_BREAKPOINTS.laptop}) {
+    font-size: ${BODY_FONT_SIZES.small};
+  }
+
+  @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {
+    font-size: ${BODY_FONT_SIZES.large};
+  }
+`;
+export const HelperFontSize = css `
+  @media (width < ${WIDTH_BREAKPOINTS.laptop}) {
+    font-size: ${HELPER_FONT_SIZES.small};
+  }
+
+  @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {
+    font-size: ${HELPER_FONT_SIZES.large};
+  }
+`;
+//# sourceMappingURL=fragments.js.map

package/core/integrations/fragments.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fragments.js","sourceRoot":"","sources":["../../../core/integrations/fragments.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;oBACd,iBAAiB,CAAC,MAAM;;;;qBAIvB,iBAAiB,CAAC,MAAM;;;CAG5C,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;oBACd,iBAAiB,CAAC,MAAM;;;;qBAIvB,iBAAiB,CAAC,MAAM;;;CAG5C,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;oBACZ,iBAAiB,CAAC,MAAM;iBAC3B,gBAAgB,CAAC,KAAK;;;qBAGlB,iBAAiB,CAAC,MAAM;iBAC5B,gBAAgB,CAAC,KAAK;;CAEtC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;oBACb,iBAAiB,CAAC,MAAM;iBAC3B,iBAAiB,CAAC,KAAK;;;qBAGnB,iBAAiB,CAAC,MAAM;iBAC5B,iBAAiB,CAAC,KAAK;;CAEvC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;oBAChB,iBAAiB,CAAC,MAAM;iBAC3B,oBAAoB,CAAC,KAAK;;;qBAGtB,iBAAiB,CAAC,MAAM;iBAC5B,oBAAoB,CAAC,KAAK;;CAE1C,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;oBACX,iBAAiB,CAAC,MAAM;iBAC3B,eAAe,CAAC,KAAK;;;qBAGjB,iBAAiB,CAAC,MAAM;iBAC5B,eAAe,CAAC,KAAK;;CAErC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;oBACb,iBAAiB,CAAC,MAAM;iBAC3B,iBAAiB,CAAC,KAAK;;;qBAGnB,iBAAiB,CAAC,MAAM;iBAC5B,iBAAiB,CAAC,KAAK;;CAEvC,CAAC","sourcesContent":["import { css } from \"styled-components\";\nimport { WIDTH_BREAKPOINTS } from \"../foundations/responsive\";\nimport {\n  BODY_FONT_SIZES,\n  HEADER_FONT_SIZES,\n  HELPER_FONT_SIZES,\n  SUBHEADER_FONT_SIZES,\n  TITLE_FONT_SIZES,\n} from \"../foundations/typography\";\n\nexport const SmallScreenOnly = css`\n  @media (width < ${WIDTH_BREAKPOINTS.laptop}) {\n    display: inline;\n  }\n\n  @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {\n    display: none;\n  }\n`;\n\nexport const LargeScreenOnly = css`\n  @media (width < ${WIDTH_BREAKPOINTS.laptop}) {\n    display: none;\n  }\n\n  @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {\n    display: inline;\n  }\n`;\n\nexport const TitleFontSize = css`\n  @media (width < ${WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${TITLE_FONT_SIZES.small};\n  }\n\n  @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${TITLE_FONT_SIZES.large};\n  }\n`;\n\nexport const HeaderFontSize = css`\n  @media (width < ${WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${HEADER_FONT_SIZES.small};\n  }\n\n  @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${HEADER_FONT_SIZES.large};\n  }\n`;\n\nexport const SubheaderFontSize = css`\n  @media (width < ${WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${SUBHEADER_FONT_SIZES.small};\n  }\n\n  @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${SUBHEADER_FONT_SIZES.large};\n  }\n`;\n\nexport const BodyFontSize = css`\n  @media (width < ${WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${BODY_FONT_SIZES.small};\n  }\n\n  @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${BODY_FONT_SIZES.large};\n  }\n`;\n\nexport const HelperFontSize = css`\n  @media (width < ${WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${HELPER_FONT_SIZES.small};\n  }\n\n  @media (width >= ${WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${HELPER_FONT_SIZES.large};\n  }\n`;\n"]}

package/core/integrations/index.d.ts

@@ -1,2 +1,3 @@
-export { default as StyledComponentsRegistry } from "./StyledComponentsRegistry";
+export * from "./fragments";
 export * from "./mappings";
+export { default as StyledComponentsRegistry } from "./registry";

package/core/integrations/index.js

@@ -1,3 +1,4 @@
-export { default as StyledComponentsRegistry } from "./StyledComponentsRegistry";
+export * from "./fragments";
 export * from "./mappings";
+export { default as StyledComponentsRegistry } from "./registry";
 //# sourceMappingURL=index.js.map

package/core/integrations/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/integrations/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACjF,cAAc,YAAY,CAAC","sourcesContent":["export { default as StyledComponentsRegistry } from \"./StyledComponentsRegistry\";\nexport * from \"./mappings\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/integrations/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export * from \"./fragments\";\nexport * from \"./mappings\";\nexport { default as StyledComponentsRegistry } from \"./registry\";\n"]}

package/core/integrations/{StyledComponentsRegistry.js → registry.js}

@@ -14,4 +14,4 @@ const StyledComponentsRegistry = ({ children }) => {
     return typeof window !== "undefined" ? (_jsx(_Fragment, { children: children })) : (_jsx(StyleSheetManager, { sheet: styledComponentsStyleSheet.instance, children: children }));
 };
 export default StyledComponentsRegistry;
-//# sourceMappingURL=StyledComponentsRegistry.js.map
+//# sourceMappingURL=registry.js.map

package/core/integrations/registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.js","sourceRoot":"","sources":["../../../core/integrations/registry.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,EAA0B,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAExE,MAAM,wBAAwB,GAAG,CAAC,EAAE,QAAQ,EAAqB,EAAE,EAAE;IACnE,sDAAsD;IACtD,0EAA0E;IAC1E,MAAM,CAAC,0BAA0B,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,gBAAgB,EAAE,CAAC,CAAC;IAE5E,qBAAqB,CAAC,GAAG,EAAE;QACzB,MAAM,MAAM,GAAG,0BAA0B,CAAC,eAAe,EAAE,CAAC;QAC5D,0BAA0B,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;QAC/C,OAAO,4BAAG,MAAM,GAAI,CAAC;IACvB,CAAC,CAAC,CAAC;IAEH,OAAO,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,CACrC,4BAAG,QAAQ,GAAI,CAChB,CAAC,CAAC,CAAC,CACF,KAAC,iBAAiB,IAAC,KAAK,EAAE,0BAA0B,CAAC,QAAQ,YAC1D,QAAQ,GACS,CACrB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,wBAAwB,CAAC","sourcesContent":["import { useServerInsertedHTML } from \"next/navigation\";\nimport { type PropsWithChildren, useState } from \"react\";\nimport { ServerStyleSheet, StyleSheetManager } from \"styled-components\";\n\nconst StyledComponentsRegistry = ({ children }: PropsWithChildren) => {\n  // Only create stylesheet once with lazy initial state\n  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state\n  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());\n\n  useServerInsertedHTML(() => {\n    const styles = styledComponentsStyleSheet.getStyleElement();\n    styledComponentsStyleSheet.instance.clearTag();\n    return <>{styles}</>;\n  });\n\n  return typeof window !== \"undefined\" ? (\n    <>{children}</>\n  ) : (\n    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>\n      {children}\n    </StyleSheetManager>\n  );\n};\n\nexport default StyledComponentsRegistry;\n"]}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@grantbii/design-system",
   "author": "Grantbii",
   "license": "UNLICENSED",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "description": "Grantbii's Design System",
   "homepage": "https://design.grantbii.com",
   "repository": {