@courtneyring/components-library 1.0.30 → 1.0.31

package/src/styles/_sizes.scss

@@ -0,0 +1,191 @@
+@use "sass:string";
+@use "sass:map";
+@use "breakpoints";
+@use "sass:list";
+// @use 'mixins';
+
+$container-padding-vals: (
+  xxs: (
+    h: 20,
+    v: 40,
+  ),
+  xs: (
+    h: 30,
+    v: 50,
+  ),
+  sm: (
+    h: 30,
+    v: 50,
+  ),
+  md-portrait: (
+    h: 30,
+    v: 50,
+  ),
+  md-landscape: (
+    h: 30,
+    v: 30,
+  ),
+  lg: (h: 50,
+    v: 70,
+  ),
+  xl: (h: 100,
+    v: 50,
+  ),
+  xxl: (h: 150,
+    v: 150,
+  ),
+);
+
+$container-padding-mobile: 20px;
+$container-padding-tablet: 50px 30px; //768+
+$container-padding-desktop-small: 100px; //1200+
+$container-padding-desktop-large: 150px; //1920+
+
+$container-max-width-xsmall: 1000px;
+$container-max-width-small: 1200px;
+$container-max-width: 1400px;
+$container-max-width-wide: 1800px;
+
+// @mixin respond($bp) {
+//   @media (min-width: map.get(breakpoints.$breakpoints, $bp)) {
+//     @content;
+//   }
+// }
+
+@mixin respond($bp, $orientation: null) {
+  $width: map.get(breakpoints.$breakpoints, $bp);
+
+  @if $width {
+    $media: "(min-width: #{$width})";
+
+    @if $orientation {
+      $media: "#{$media} and (orientation: #{$orientation})";
+    }
+
+    @media #{$media} {
+      @content;
+    }
+  }
+}
+
+@function parse-breakpoint-key($key) {
+  $parts: string.split($key, "-");
+
+  $bp: list.nth($parts, 1);
+  $orientation: if(list.length($parts) > 1, list.nth($parts, 2), null);
+
+  @return (bp: $bp, orientation: $orientation);
+}
+
+@mixin container-padding($selector, $exclude...) {
+  @each $key, $val in $container-padding-vals {
+    $parsed: parse-breakpoint-key($key);
+
+    $bp: map.get($parsed, bp);
+    $orientation: map.get($parsed, orientation);
+
+    @include respond($bp, $orientation) {
+
+      // @include respond($key) {
+      #{$selector} {
+        $h: map.get($val, h);
+        $v: map.get($val, v);
+
+        padding: #{$v}px #{$h}px;
+      }
+    }
+  }
+
+  @each $direction in $exclude {
+    #{$selector} {
+      padding-#{$direction}: 0px;
+    }
+  }
+}
+
+//TODO: Fix me
+
+@function get-container-padding($bp, $orientation, $axis) {
+  // 1. Try size + orientation first
+  $key: if($orientation, "#{$bp}-#{$orientation}", $bp);
+  $val: map.get($container-padding-vals, $key);
+
+  @if $val {
+    @return map.get($val, $axis);
+  }
+
+  // 2. Try size only
+  $val: map.get($container-padding-vals, $bp);
+
+  @if $val {
+    @return map.get($val, $axis);
+  }
+
+  // 3. Fallback to smaller sizes (assumes $container-padding-vals is ordered small → large)
+  $found: null;
+
+  @each $k, $v in $container-padding-vals {
+
+    // stop at current or smaller size
+    @if index(map-keys($container-padding-vals), $k) <=index(map-keys($container-padding-vals), $bp) {
+      $found: $v;
+    }
+  }
+
+  @if $found {
+    @return map.get($found, $axis);
+  }
+
+  // 4. Default to 0 if nothing found
+  @return 0;
+}
+
+@mixin override-container($selector,
+  $vertical: true,
+  $horizontal: true,
+  $sizes,
+  $resets) {
+  @each $bp in $sizes {
+    $parsed: parse-breakpoint-key($bp);
+
+    $bp: map.get($parsed, bp);
+    $orientation: map.get($parsed, orientation);
+
+    @include respond($bp, $orientation) {
+
+      @if $vertical {
+        $v: get-container-padding($bp, $orientation, v);
+
+        #{$selector} {
+          margin-top: -#{$v}px;
+          margin-bottom: -#{$v}px;
+        }
+      }
+
+      @if $horizontal {
+        $h: get-container-padding($bp, $orientation, h);
+
+        #{$selector} {
+          width: calc(100% + #{$h * 2}px);
+          margin-left: -#{$h}px;
+        }
+      }
+    }
+  }
+
+  @each $bp in $resets {
+    $parsed: parse-breakpoint-key($bp);
+
+    $bp: map.get($parsed, bp);
+    $orientation: map.get($parsed, orientation);
+
+    @include respond($bp, $orientation) {
+      #{$selector} {
+        margin-top: 0px;
+        margin-bottom: 0px;
+        width: 100%;
+        margin-left: 0px;
+      }
+    }
+  }
+}

package/src/styles/globals.scss

@@ -0,0 +1,77 @@
+@use "fonts";
+// @use './mixins';
+@use './breakpoints';
+// @use './colors';
+// @use './fonts';
+// @use './sizes';
+
+// html {
+//     overflow: hidden;
+//     height: 100%;
+// }
+
+// body {
+//     height: 100%;
+//     overflow: auto;
+// }
+
+html,
+body {
+  overscroll-behavior: none; /* prevents scroll chaining / overscroll glow */
+  height: 100%;
+}
+
+p,
+h1,
+h2,
+h3 {
+  margin: 0;
+}
+
+strong {
+  @include fonts.type("strong");
+}
+
+small {
+  @include fonts.type("small");
+  font-style: italic;
+}
+
+#rsvpify-wrapper {
+  width: 100%;
+  height: 100%;
+}
+
+.typography--h2 {
+  @include fonts.type('h2');
+}
+.typography--h3 {
+  @include fonts.type('h3');
+}
+.typography--h4 {
+  // margin-top: 0;
+  @include fonts.type('h4');
+}
+
+.typography--body {
+  @include fonts.type('body');
+}
+
+.typography--strong {
+  @include fonts.type('strong');
+}
+
+.hidden {
+  visibility: hidden;
+}
+
+.mobile-break {
+  display: inline;
+}
+
+
+@include breakpoints.md {
+  .mobile-break {
+    display: none;
+  }
+}

package/src/styles/index.scss

@@ -0,0 +1 @@
+@forward 'breakpoints';

package/src/styles/variables.module.scss

@@ -0,0 +1,20 @@
+// @use './_colors' as *;
+@use "sass:string";
+@use "colors";
+
+$theme-colors: (
+  "colorPrimaryDark": colors.$color-primary-dark,
+  "colorPrimaryMedium": colors.$color-primary-medium,
+  "colorPrimaryLight": colors.$color-primary-light,
+  "colorSecondary": colors.$color-secondary,
+  "colorNeutralDark": colors.$color-neutral-dark,
+  "colorNeutralMedium": colors.$color-neutral-medium,
+  "colorNeutralLight": colors.$color-neutral-light,
+  "colorWhite": colors.$color-white,
+);
+
+:export {
+  @each $key, $value in $theme-colors {
+    #{string.unquote($key)}: $value;
+  }
+}

package/dist/AccordionItem-DuHzStoZ.js

@@ -1,40 +0,0 @@
-import { jsxs as _, jsx as c } from "react/jsx-runtime";
-import r from "./utils/parse.js";
-import { c as e } from "./index-BIlioXmW.js";
-import './assets/AccordionItem.css';const s = "_accordion_l0mex_1", d = "_title_l0mex_8", l = "_accordion__item_l0mex_11", m = "_header_l0mex_14", x = "_accordion__icon_l0mex_101", p = "_open_l0mex_175", b = "_accordion__button_l0mex_179", h = "_accordion__content_l0mex_230", N = "_body_l0mex_238", o = {
-  accordion: s,
-  title: d,
-  accordion__item: l,
-  header: m,
-  accordion__icon: x,
-  open: p,
-  accordion__button: b,
-  accordion__content: h,
-  body: N
-}, f = ({ title: t, body: a, toggleFn: i, isOpen: n }) => /* @__PURE__ */ _("div", { className: e(o.accordion__item, n && o.open), children: [
-  /* @__PURE__ */ _(
-    "button",
-    {
-      className: e(o.accordion__button),
-      onClick: () => i(!n),
-      children: [
-        /* @__PURE__ */ _("div", { className: o.accordion__icon, children: [
-          /* @__PURE__ */ c("span", {}),
-          /* @__PURE__ */ c("span", { className: `${n ? o.open : ""}` })
-        ] }),
-        /* @__PURE__ */ c("span", { className: o.title, children: t })
-      ]
-    }
-  ),
-  /* @__PURE__ */ c(
-    "div",
-    {
-      className: e(o.accordion__content, n && o.open),
-      children: /* @__PURE__ */ c("div", { className: o.body, children: r(a) })
-    }
-  )
-] });
-export {
-  f as A,
-  o as s
-};