@hyphen/hyphen-components 2.9.0

package/src/styles/display.scss

@@ -0,0 +1,119 @@
+@import '@hyphen/hyphen-design-tokens/build/scss/variables.scss';
+
+.display-inherit {
+  display: inherit;
+}
+.display-inline {
+  display: inline;
+}
+.display-block {
+  display: block;
+}
+.display-inline-block {
+  display: inline-block;
+}
+.display-flex {
+  display: flex;
+}
+.display-inline-flex {
+  display: inline-flex;
+}
+.display-grid {
+  display: grid;
+}
+.display-none {
+  display: none;
+}
+.display-table-cell {
+  display: table-cell;
+}
+
+@media (min-width: $size-breakpoint-tablet) {
+  .display-inherit-tablet {
+    display: inherit;
+  }
+  .display-inline-tablet {
+    display: inline;
+  }
+  .display-block-tablet {
+    display: block;
+  }
+  .display-inline-block-tablet {
+    display: inline-block;
+  }
+  .display-flex-tablet {
+    display: flex;
+  }
+  .display-inline-flex-tablet {
+    display: inline-flex;
+  }
+  .display-grid-tablet {
+    display: grid;
+  }
+  .display-none-tablet {
+    display: none;
+  }
+  .display-table-cell-tablet {
+    display: table-cell;
+  }
+}
+
+@media (min-width: $size-breakpoint-desktop) {
+  .display-inherit-desktop {
+    display: inherit;
+  }
+  .display-inline-desktop {
+    display: inline;
+  }
+  .display-block-desktop {
+    display: block;
+  }
+  .display-inline-block-desktop {
+    display: inline-block;
+  }
+  .display-flex-desktop {
+    display: flex;
+  }
+  .display-inline-flex-desktop {
+    display: inline-flex;
+  }
+  .display-grid-desktop {
+    display: grid;
+  }
+  .display-none-desktop {
+    display: none;
+  }
+  .display-table-cell-desktop {
+    display: table-cell;
+  }
+}
+
+@media (min-width: $size-breakpoint-hd) {
+  .display-inherit-hd {
+    display: inherit;
+  }
+  .display-inline-hd {
+    display: inline;
+  }
+  .display-block-hd {
+    display: block;
+  }
+  .display-inline-block-hd {
+    display: inline-block;
+  }
+  .display-flex-hd {
+    display: flex;
+  }
+  .display-inline-flex-hd {
+    display: inline-flex;
+  }
+  .display-grid-hd {
+    display: grid;
+  }
+  .display-none-hd {
+    display: none;
+  }
+  .display-table-cell-hd {
+    display: table-cell;
+  }
+}

package/src/styles/flex.scss

@@ -0,0 +1,453 @@
+@import '@hyphen/hyphen-design-tokens/build/scss/variables.scss';
+
+// min-width and min-height needed because of this
+// https://stackoverflow.com/questions/36247140/why-doesnt-flex-item-shrink-past-content-size
+.flex-auto {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+}
+.flex-none {
+  flex: none;
+}
+.flex-initial {
+  flex: initial;
+}
+.flex-inherit {
+  flex: inherit;
+}
+.flex-unset {
+  flex: unset;
+}
+
+.flex-direction-column {
+  flex-direction: column;
+}
+.flex-direction-row {
+  flex-direction: row;
+}
+.flex-direction-column-reverse {
+  flex-direction: column-reverse;
+}
+.flex-direction-row-reverse {
+  flex-direction: row-reverse;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+.flex-wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
+.justify-content-flex-start {
+  justify-content: flex-start;
+}
+.justify-content-flex-end {
+  justify-content: flex-end;
+}
+.justify-content-center {
+  justify-content: center;
+}
+.justify-content-space-between {
+  justify-content: space-between;
+}
+.justify-content-space-around {
+  justify-content: space-around;
+}
+.justify-content-space-evenly {
+  justify-content: space-evenly;
+}
+
+.align-items-flex-start {
+  align-items: flex-start;
+}
+.align-items-flex-end {
+  align-items: flex-end;
+}
+.align-items-center {
+  align-items: center;
+}
+.align-items-baseline {
+  align-items: baseline;
+}
+.align-items-stretch {
+  align-items: stretch;
+}
+
+.align-content-flex-start {
+  align-content: flex-start;
+}
+.align-content-flex-end {
+  align-content: flex-end;
+}
+.align-content-center {
+  align-content: center;
+}
+.align-content-stretch {
+  align-content: stretch;
+}
+.align-content-space-between {
+  align-content: space-between;
+}
+.align-content-space-around {
+  align-content: space-around;
+}
+
+.align-self-flex-start {
+  align-self: flex-start;
+}
+.align-self-flex-end {
+  align-self: flex-end;
+}
+.align-self-center {
+  align-self: center;
+}
+.align-self-baseline {
+  align-self: baseline;
+}
+.align-self-stretch {
+  align-self: stretch;
+}
+
+@media (min-width: $size-breakpoint-tablet) {
+  .flex-auto-tablet {
+    flex: 1 1 auto;
+    min-width: 0;
+    min-height: 0;
+  }
+  .flex-none-tablet {
+    flex: none;
+  }
+  .flex-initial-tablet {
+    flex: initial;
+  }
+  .flex-inherit-tablet {
+    flex: inherit;
+  }
+  .flex-unset-tablet {
+    flex: unset;
+  }
+
+  .flex-direction-column-tablet {
+    flex-direction: column;
+  }
+  .flex-direction-row-tablet {
+    flex-direction: row;
+  }
+  .flex-direction-column-reverse-tablet {
+    flex-direction: column-reverse;
+  }
+  .flex-direction-row-reverse-tablet {
+    flex-direction: row-reverse;
+  }
+
+  .flex-wrap-tablet {
+    flex-wrap: wrap;
+  }
+  .flex-nowrap-tablet {
+    flex-wrap: nowrap;
+  }
+  .flex-wrap-reverse-tablet {
+    flex-wrap: wrap-reverse;
+  }
+
+  .justify-content-flex-start-tablet {
+    justify-content: flex-start;
+  }
+  .justify-content-flex-end-tablet {
+    justify-content: flex-end;
+  }
+  .justify-content-center-tablet {
+    justify-content: center;
+  }
+  .justify-content-space-between-tablet {
+    justify-content: space-between;
+  }
+  .justify-content-space-around-tablet {
+    justify-content: space-around;
+  }
+  .justify-content-space-evenly-tablet {
+    justify-content: space-evenly;
+  }
+
+  .align-items-flex-start-tablet {
+    align-items: flex-start;
+  }
+  .align-items-flex-end-tablet {
+    align-items: flex-end;
+  }
+  .align-items-center-tablet {
+    align-items: center;
+  }
+  .align-items-baseline-tablet {
+    align-items: baseline;
+  }
+  .align-items-stretch-tablet {
+    align-items: stretch;
+  }
+
+  .align-content-flex-start-tablet {
+    align-content: flex-start;
+  }
+  .align-content-flex-end-tablet {
+    align-content: flex-end;
+  }
+  .align-content-center-tablet {
+    align-content: center;
+  }
+  .align-content-stretch-tablet {
+    align-content: stretch;
+  }
+  .align-content-space-between-tablet {
+    align-content: space-between;
+  }
+  .align-content-space-around-tablet {
+    align-content: space-around;
+  }
+
+  .align-self-flex-start-tablet {
+    align-self: flex-start;
+  }
+  .align-self-flex-end-tablet {
+    align-self: flex-end;
+  }
+  .align-self-center-tablet {
+    align-self: center;
+  }
+  .align-self-baseline-tablet {
+    align-self: baseline;
+  }
+  .align-self-stretch-tablet {
+    align-self: stretch;
+  }
+}
+
+@media (min-width: $size-breakpoint-desktop) {
+  .flex-auto-desktop {
+    flex: 1 1 auto;
+    min-width: 0;
+    min-height: 0;
+  }
+  .flex-none-desktop {
+    flex: none;
+  }
+  .flex-initial-desktop {
+    flex: initial;
+  }
+  .flex-inherit-desktop {
+    flex: inherit;
+  }
+  .flex-unset-desktop {
+    flex: unset;
+  }
+
+  .flex-direction-column-desktop {
+    flex-direction: column;
+  }
+  .flex-direction-row-desktop {
+    flex-direction: row;
+  }
+  .flex-direction-column-reverse-desktop {
+    flex-direction: column-reverse;
+  }
+  .flex-direction-row-reverse-desktop {
+    flex-direction: row-reverse;
+  }
+
+  .flex-wrap-desktop {
+    flex-wrap: wrap;
+  }
+  .flex-nowrap-desktop {
+    flex-wrap: nowrap;
+  }
+  .flex-wrap-reverse-desktop {
+    flex-wrap: wrap-reverse;
+  }
+
+  .justify-content-flex-start-desktop {
+    justify-content: flex-start;
+  }
+  .justify-content-flex-end-desktop {
+    justify-content: flex-end;
+  }
+  .justify-content-center-desktop {
+    justify-content: center;
+  }
+  .justify-content-space-between-desktop {
+    justify-content: space-between;
+  }
+  .justify-content-space-around-desktop {
+    justify-content: space-around;
+  }
+  .justify-content-space-evenly-desktop {
+    justify-content: space-evenly;
+  }
+
+  .align-items-flex-start-desktop {
+    align-items: flex-start;
+  }
+  .align-items-flex-end-desktop {
+    align-items: flex-end;
+  }
+  .align-items-center-desktop {
+    align-items: center;
+  }
+  .align-items-baseline-desktop {
+    align-items: baseline;
+  }
+  .align-items-stretch-desktop {
+    align-items: stretch;
+  }
+
+  .align-content-flex-start-desktop {
+    align-content: flex-start;
+  }
+  .align-content-flex-end-desktop {
+    align-content: flex-end;
+  }
+  .align-content-center-desktop {
+    align-content: center;
+  }
+  .align-content-stretch-desktop {
+    align-content: stretch;
+  }
+  .align-content-space-between-desktop {
+    align-content: space-between;
+  }
+  .align-content-space-around-desktop {
+    align-content: space-around;
+  }
+
+  .align-self-flex-start-desktop {
+    align-self: flex-start;
+  }
+  .align-self-flex-end-desktop {
+    align-self: flex-end;
+  }
+  .align-self-center-desktop {
+    align-self: center;
+  }
+  .align-self-baseline-desktop {
+    align-self: baseline;
+  }
+  .align-self-stretch-desktop {
+    align-self: stretch;
+  }
+}
+
+@media (min-width: $size-breakpoint-hd) {
+  .flex-auto-hd {
+    flex: 1 1 auto;
+    min-width: 0;
+    min-height: 0;
+  }
+  .flex-none-hd {
+    flex: none;
+  }
+  .flex-initial-hd {
+    flex: initial;
+  }
+  .flex-inherit-hd {
+    flex: inherit;
+  }
+  .flex-unset-hd {
+    flex: unset;
+  }
+
+  .flex-direction-column-hd {
+    flex-direction: column;
+  }
+  .flex-direction-row-hd {
+    flex-direction: row;
+  }
+  .flex-direction-column-reverse-hd {
+    flex-direction: column-reverse;
+  }
+  .flex-direction-row-reverse-hd {
+    flex-direction: row-reverse;
+  }
+
+  .flex-wrap-hd {
+    flex-wrap: wrap;
+  }
+  .flex-nowrap-hd {
+    flex-wrap: nowrap;
+  }
+  .flex-wrap-reverse-hd {
+    flex-wrap: wrap-reverse;
+  }
+
+  .justify-content-flex-start-hd {
+    justify-content: flex-start;
+  }
+  .justify-content-flex-end-hd {
+    justify-content: flex-end;
+  }
+  .justify-content-center-hd {
+    justify-content: center;
+  }
+  .justify-content-space-between-hd {
+    justify-content: space-between;
+  }
+  .justify-content-space-around-hd {
+    justify-content: space-around;
+  }
+  .justify-content-space-evenly-hd {
+    justify-content: space-evenly;
+  }
+
+  .align-items-flex-start-hd {
+    align-items: flex-start;
+  }
+  .align-items-flex-end-hd {
+    align-items: flex-end;
+  }
+  .align-items-center-hd {
+    align-items: center;
+  }
+  .align-items-baseline-hd {
+    align-items: baseline;
+  }
+  .align-items-stretch-hd {
+    align-items: stretch;
+  }
+
+  .align-content-flex-start-hd {
+    align-content: flex-start;
+  }
+  .align-content-flex-end-hd {
+    align-content: flex-end;
+  }
+  .align-content-center-hd {
+    align-content: center;
+  }
+  .align-content-stretch-hd {
+    align-content: stretch;
+  }
+  .align-content-space-between-hd {
+    align-content: space-between;
+  }
+  .align-content-space-around-hd {
+    align-content: space-around;
+  }
+
+  .align-self-flex-start-hd {
+    align-self: flex-start;
+  }
+  .align-self-flex-end-hd {
+    align-self: flex-end;
+  }
+  .align-self-center-hd {
+    align-self: center;
+  }
+  .align-self-baseline-hd {
+    align-self: baseline;
+  }
+  .align-self-stretch-hd {
+    align-self: stretch;
+  }
+}

package/src/styles/fonts.scss

@@ -0,0 +1,44 @@
+@font-face {
+  font-family: geist;
+  src: url('../fonts/Geist-Regular.otf') format('opentype'),
+    url('../fonts/Geist-Regular.woff') format('woff'),
+    url('../fonts/Geist-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: geist;
+  src: url('../fonts/Geist-Medium.otf') format('opentype'),
+    url('../fonts/Geist-Medium.woff') format('woff'),
+    url('../fonts/Geist-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: geist;
+  src: url('../fonts/Geist-SemiBold.otf') format('opentype'),
+    url('../fonts/Geist-SemiBold.woff') format('woff'),
+    url('../fonts/Geist-SemiBold.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: geist;
+  src: url('../fonts/Geist-Bold.otf') format('opentype'),
+    url('../fonts/Geist-Bold.woff') format('woff'),
+    url('../fonts/Geist-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: geist-mono;
+  src: url('../fonts/GeistMono-Regular.otf') format('opentype'),
+    url('../fonts/GeistMono-Regular.woff') format('woff'),
+    url('../fonts/GeistMono-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+}

package/src/styles/globals/utilities.scss

@@ -0,0 +1,4 @@
+// stylelint-disable
+:global {
+  @import '../utilities';
+}

package/src/styles/mixins.scss

@@ -0,0 +1,14 @@
+// Visually hide any element (mostly text) accessibly.
+// Support includes IE9+
+// Source: https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
+
+
+@mixin accessible-hidden-element {
+  clip: rect(0 0 0 0);
+  clip-path: inset(100%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}

package/src/styles/overflow.scss

@@ -0,0 +1,41 @@
+.overflow-visible { overflow: visible; }
+.overflow-hidden { overflow: hidden; }
+.overflow-clip { overflow: clip; }
+.overflow-scroll { overflow: scroll; }
+.overflow-auto { overflow: auto; }
+.overflow-inherit { overflow: inherit; }
+.overflow-initial { overflow: initial; }
+.overflow-unset { overflow: unset; }
+
+@media (min-width: $size-breakpoint-tablet) {
+  .overflow-visible-tablet { overflow: visible; }
+  .overflow-hidden-tablet { overflow: hidden; }
+  .overflow-clip-tablet { overflow: clip; }
+  .overflow-scroll-tablet { overflow: scroll; }
+  .overflow-auto-tablet { overflow: auto; }
+  .overflow-inherit-tablet { overflow: inherit; }
+  .overflow-initial-tablet { overflow: initial; }
+  .overflow-unset-tablet { overflow: unset; }
+}
+
+@media (min-width: $size-breakpoint-desktop) {
+  .overflow-visible-desktop { overflow: visible; }
+  .overflow-hidden-desktop { overflow: hidden; }
+  .overflow-clip-desktop { overflow: clip; }
+  .overflow-scroll-desktop { overflow: scroll; }
+  .overflow-auto-desktop { overflow: auto; }
+  .overflow-inherit-desktop { overflow: inherit; }
+  .overflow-initial-desktop { overflow: initial; }
+  .overflow-unset-desktop { overflow: unset; }
+}
+
+@media (min-width: $size-breakpoint-hd) {
+  .overflow-visible-hd { overflow: visible; }
+  .overflow-hidden-hd { overflow: hidden; }
+  .overflow-clip-hd { overflow: clip; }
+  .overflow-scroll-hd { overflow: scroll; }
+  .overflow-auto-hd { overflow: auto; }
+  .overflow-inherit-hd { overflow: inherit; }
+  .overflow-initial-hd { overflow: initial; }
+  .overflow-unset-hd { overflow: unset; }
+}

package/src/styles/position.scss

@@ -0,0 +1,45 @@
+.position-absolute { position: absolute; }
+.position-fixed { position: fixed; }
+.position-relative { position: relative; }
+.position-static { position: static; }
+.position-sticky { position: sticky; }
+.position-inherit { position: inherit; }
+.position-unset { position: unset; }
+.position-revert { position: revert; }
+.position-initial { position: initial; }
+
+@media (min-width: $size-breakpoint-tablet) {
+  .position-absolute-tablet { position: absolute; }
+  .position-fixed-tablet { position: fixed; }
+  .position-relative-tablet { position: relative; }
+  .position-static-tablet { position: static; }
+  .position-sticky-tablet { position: sticky; }
+  .position-inherit-tablet { position: inherit; }
+  .position-unset-tablet { position: unset; }
+  .position-revert-tablet { position: revert; }
+  .position-initial-tablet { position: initial; }
+}
+
+@media (min-width: $size-breakpoint-desktop) {
+  .position-absolute-desktop { position: absolute; }
+  .position-fixed-desktop { position: fixed; }
+  .position-relative-desktop { position: relative; }
+  .position-static-desktop { position: static; }
+  .position-sticky-desktop { position: sticky; }
+  .position-inherit-desktop { position: inherit; }
+  .position-unset-desktop { position: unset; }
+  .position-revert-desktop { position: revert; }
+  .position-initial-desktop { position: initial; }
+}
+
+@media (min-width: $size-breakpoint-hd) {
+  .position-absolute-hd { position: absolute; }
+  .position-fixed-hd { position: fixed; }
+  .position-relative-hd { position: relative; }
+  .position-static-hd { position: static; }
+  .position-sticky-hd { position: sticky; }
+  .position-inherit-hd { position: inherit; }
+  .position-unset-hd { position: unset; }
+  .position-revert-hd { position: revert; }
+  .position-initial-hd { position: initial; }
+}