@danske/sapphire-css 16.3.0

package/components/listbox/listbox.module.css

@@ -0,0 +1,211 @@
+.sapphire-listbox {
+  box-sizing: border-box;
+  display: flex;
+  justify-content: stretch;
+  flex-direction: column;
+  min-width: var(--sapphire-listbox-size-width-min);
+  margin: 0;
+  padding: 0;
+  position: relative;
+  list-style: none;
+  outline: none;
+  /**
+   * tldr; Please inspect the listbox without these adding props, it's easier
+   * to understand why these are here.
+   *
+   * Long version:
+   *
+   * Each item has a left/right padding which greater than the top/bottom one.
+   *
+   * This means that there will be a visual asymmetry for the padding around
+   * the first/last item in the listbox. We want to adjust that by adding a
+   * top/bottom padding to the whole listbox of a value that would guarantee
+   * the corners of the listbox are padded equally all around.
+   *
+   * To achieve that, we want to add a padding equal to the missing difference
+   * between the horizontal and vertical item paddings.
+   */
+
+  padding-top: calc(
+    var(--sapphire-listbox-size-spacing-outer-horizontal) -
+      var(--sapphire-listbox-size-spacing-outer-vertical)
+  );
+  padding-bottom: calc(
+    var(--sapphire-listbox-size-spacing-outer-horizontal) -
+      var(--sapphire-listbox-size-spacing-outer-vertical)
+  );
+
+  /* The below is meant to address a font rendering quirk in OSX where the text
+   * looks bolder than intended due to subpixel rendering. This quirk generally
+   * occurs for bold fonts on dark backgrounds but depending on the font, it
+   * can happen in other contexts as well.
+   *
+   * These do not do anything except in webkit browsers & firefox on OSX.
+   *
+   * For more details see:
+   * - https://azuredevops/Main/WCCJ/_git/sapphire/pullRequest/212710?path=%2Fpackages%2Fcss%2Fcomponents%2Fbutton%2Fbutton.module.css&discussionId=1507702&_a=files
+   * - https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
+   */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Item in the list */
+
+.sapphire-listbox__item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--sapphire-listbox-size-spacing-outer-vertical)
+    var(--sapphire-listbox-size-spacing-outer-horizontal);
+  color: var(--sapphire-listbox-color-content-normal-primary-default);
+  outline: none;
+  cursor: pointer;
+}
+
+.sapphire-listbox__item--danger {
+  color: var(--sapphire-listbox-color-content-danger-default);
+}
+
+.sapphire-listbox__item--selected {
+  color: var(--sapphire-listbox-color-content-selected-default);
+}
+
+.sapphire-listbox__item--selected .sapphire-listbox__content {
+  background-color: var(--sapphire-listbox-color-background-selected-default);
+}
+
+/* Content inside the item */
+
+.sapphire-listbox__content {
+  width: 100%;
+  display: grid;
+  grid-auto-flow: column;
+  align-items: center;
+  gap: var(--sapphire-listbox-size-spacing-inner-horizontal);
+  /*
+   * We want the left-side icon column to not take space if it's empty. The
+   * right-side "checkmark" icon column should always take space even if the
+   * checkmark isn't there. This is to make sure the listbox doesn't jump when
+   * selecting items that add the checkmark in the last column.
+   */
+  grid-template-columns: auto 1fr var(--sapphire-listbox-size-width-icon);
+  padding: var(--sapphire-listbox-size-spacing-inner-vertical)
+    var(--sapphire-listbox-size-spacing-inner-horizontal);
+  border-radius: var(--sapphire-listbox-size-radius-item);
+  transition-property: opacity, background-color, color;
+  transition-duration: var(--sapphire-listbox-time-transition);
+  transition-timing-function: ease-in-out;
+}
+
+/* Icon content */
+
+.sapphire-listbox__icon {
+  line-height: 0;
+}
+
+/* Text content */
+.sapphire-listbox__text-container {
+  font-family: var(--sapphire-listbox-font-name);
+  line-height: var(--sapphire-listbox-size-line-height);
+}
+
+/*
+ * When there is no icon before the content we want the content
+ * to stretch 2 columns out of the 3.
+ */
+.sapphire-listbox__text-container:first-child {
+  grid-column: span 2;
+}
+
+.sapphire-listbox__primary-text {
+  font-weight: var(--sapphire-listbox-font-weight-primary);
+  font-size: var(--sapphire-listbox-size-font-primary);
+}
+
+.sapphire-listbox__secondary-text {
+  font-weight: var(--sapphire-listbox-font-weight-secondary);
+  font-size: var(--sapphire-listbox-size-font-secondary);
+}
+
+.sapphire-listbox__item:not(.sapphire-listbox__item--danger):not(.sapphire-listbox__item--selected)
+  .sapphire-listbox__secondary-text {
+  color: var(--sapphire-listbox-color-content-normal-secondary-default);
+}
+
+.sapphire-listbox__item.is-disabled {
+  opacity: var(--sapphire-listbox-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.sapphire-listbox__section {
+  padding: 0;
+  list-style: none;
+}
+
+.sapphire-listbox__separator {
+  height: var(--sapphire-listbox-size-height-separator);
+  width: 100%;
+  background: var(--sapphire-listbox-color-separator);
+  margin-top: calc(
+    var(--sapphire-listbox-size-spacing-outer-horizontal) -
+      var(--sapphire-listbox-size-spacing-outer-vertical)
+  );
+  margin-bottom: calc(
+    var(--sapphire-listbox-size-spacing-outer-horizontal) -
+      var(--sapphire-listbox-size-spacing-outer-vertical)
+  );
+}
+
+/* Focus */
+
+.sapphire-listbox__item:not(.is-disabled).is-focus .sapphire-listbox__content,
+.sapphire-listbox__item:not(.is-disabled):not(.js-focus):focus-visible
+  .sapphire-listbox__content {
+  box-shadow: 0px 0px 0px var(--sapphire-listbox-size-focus-ring)
+    var(--sapphire-listbox-color-focus-ring);
+}
+
+/* Hover */
+
+.sapphire-listbox__item:not(.is-disabled).is-hover .sapphire-listbox__content,
+.sapphire-listbox__item:not(.is-disabled):not(.js-hover):hover
+  .sapphire-listbox__content {
+  color: var(--sapphire-listbox-color-content-normal-primary-hover);
+  background-color: var(--sapphire-listbox-color-background-normal-hover);
+}
+
+.sapphire-listbox__item--danger:not(.is-disabled).is-hover
+  .sapphire-listbox__content,
+.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):hover
+  .sapphire-listbox__content {
+  color: var(--sapphire-listbox-color-content-danger-hover);
+  background-color: var(--sapphire-listbox-color-background-danger-hover);
+}
+
+.sapphire-listbox__item--selected:not(.is-disabled).is-hover
+  .sapphire-listbox__content,
+.sapphire-listbox__item--selected:not(.is-disabled):not(.js-hover):hover
+  .sapphire-listbox__content {
+  color: var(--sapphire-listbox-color-content-selected-hover);
+  background-color: var(--sapphire-listbox-color-background-selected-hover);
+}
+
+/* Active */
+
+.sapphire-listbox__item:not(.is-disabled).is-active .sapphire-listbox__content {
+  color: var(--sapphire-listbox-color-content-normal-primary-active);
+  background-color: var(--sapphire-listbox-color-background-normal-active);
+}
+
+.sapphire-listbox__item--danger:not(.is-disabled).is-active
+  .sapphire-listbox__content {
+  color: var(--sapphire-listbox-color-content-danger-active);
+  background-color: var(--sapphire-listbox-color-background-danger-active);
+}
+
+.sapphire-listbox__item--selected:not(.is-disabled).is-active
+  .sapphire-listbox__content {
+  color: var(--sapphire-listbox-color-content-selected-active);
+  background-color: var(--sapphire-listbox-color-background-selected-active);
+}

package/components/listbox/listbox.module.css.d.ts

@@ -0,0 +1,21 @@
+declare const styles: {
+  readonly "sapphire-listbox": string;
+  readonly "sapphire-listbox__item": string;
+  readonly "sapphire-listbox__item--danger": string;
+  readonly "sapphire-listbox__item--selected": string;
+  readonly "sapphire-listbox__content": string;
+  readonly "sapphire-listbox__icon": string;
+  readonly "sapphire-listbox__text-container": string;
+  readonly "sapphire-listbox__primary-text": string;
+  readonly "sapphire-listbox__secondary-text": string;
+  readonly "is-disabled": string;
+  readonly "sapphire-listbox__section": string;
+  readonly "sapphire-listbox__separator": string;
+  readonly "is-focus": string;
+  readonly "js-focus": string;
+  readonly "is-hover": string;
+  readonly "js-hover": string;
+  readonly "is-active": string;
+};
+export = styles;
+

package/components/notificationBadge/notificationBadge.module.css.d.ts

@@ -0,0 +1,16 @@
+declare const styles: {
+  readonly "sapphire-notification-badge": string;
+  readonly "sapphire-notification-badge--pop-in": string;
+  readonly "pop-in": string;
+  readonly "sapphire-notification-badge--pop-out": string;
+  readonly "pop-out": string;
+  readonly "sapphire-notification-badge--large": string;
+  readonly "sapphire-notification-badge--medium": string;
+  readonly "sapphire-notification-badge--small": string;
+  readonly "sapphire-notification-badge--primary": string;
+  readonly "sapphire-notification-badge--secondary": string;
+  readonly "sapphire-notification-badge-container": string;
+  readonly "sapphire-notification-badge-container--rectangle": string;
+};
+export = styles;
+

package/components/pagination/pagination.module.css

@@ -0,0 +1,44 @@
+.sapphire-pagination {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: var(--sapphire-pagination-size-spacing-container-vertical)
+    var(--sapphire-pagination-size-spacing-container-horizontal);
+  background-color: var(--sapphire-pagination-color-background);
+  font-family: var(--sapphire-pagination-font-name);
+  font-size: var(--sapphire-pagination-size-font);
+  height: var(--sapphire-pagination-size-height);
+
+  /* The below is meant to address a font rendering quirk in OSX where the text
+   * looks bolder than intended due to subpixel rendering. This quirk generally
+   * occurs for bold fonts on dark backgrounds but depending on the font, it
+   * can happen in other contexts as well.
+   *
+   * These do not do anything except in webkit browsers & firefox on OSX.
+   *
+   * For more details see:
+   * - https://azuredevops/Main/WCCJ/_git/sapphire/pullRequest/212710?path=%2Fpackages%2Fcss%2Fcomponents%2Fbutton%2Fbutton.module.css&discussionId=1507702&_a=files
+   * - https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
+   */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.sapphire-pagination-controls {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-grow: 1;
+}
+
+.sapphire-pagination-text {
+  font-weight: var(--sapphire-pagination-font-weight-numeric-text);
+  color: var(--sapphire-pagination-color-text);
+  padding-right: var(--sapphire-pagination-size-spacing-controls-horizontal);
+}
+
+.sapphire-pagination-text-alphabetic {
+  font-weight: var(--sapphire-pagination-font-weight-alphabetic-text);
+  padding-left: var(--sapphire-pagination-size-spacing-text-horizontal);
+  padding-right: var(--sapphire-pagination-size-spacing-text-horizontal);
+}

package/components/pagination/pagination.module.css.d.ts

@@ -0,0 +1,8 @@
+declare const styles: {
+  readonly "sapphire-pagination": string;
+  readonly "sapphire-pagination-controls": string;
+  readonly "sapphire-pagination-text": string;
+  readonly "sapphire-pagination-text-alphabetic": string;
+};
+export = styles;
+

package/components/panel/panel.module.css

@@ -0,0 +1,87 @@
+.sapphire-panel {
+  background-color: var(--sapphire-panel-color-background);
+  box-sizing: border-box;
+  overflow: hidden;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  outline: 0;
+  transition: transform var(--sapphire-panel-time-transition) ease-in-out;
+  transform: translateX(100%);
+  width: var(--sapphire-panel-size-width-large);
+}
+
+.sapphire-panel--visible {
+  transform: translateX(0%);
+}
+
+.sapphire-panel--small {
+  width: var(--sapphire-panel-size-width-small);
+}
+
+.sapphire-panel-header {
+  /** invisible line wrap attached only for visual consistency, once we get attached border-bottom with scrolled content **/
+  border-bottom: var(--sapphire-panel-size-border) solid
+    var(--sapphire-panel-color-separator-transparent);
+  flex-shrink: 0;
+}
+
+.sapphire-panel-body {
+  overflow-y: auto;
+  flex-grow: 1;
+  padding: 0 var(--sapphire-panel-size-spacing-side);
+}
+
+.sapphire-panel-body.sapphire-panel-body--no-padding {
+  padding: 0;
+}
+
+.sapphire-panel-footer {
+  /** invisible line wrap attached only for visual consistency, once we get attached border-bottom with scrolled content **/
+  border-top: var(--sapphire-panel-size-border) solid
+    var(--sapphire-panel-color-separator-transparent);
+  flex-shrink: 0;
+}
+
+/** Container for heading and subheading **/
+.sapphire-panel-panel-heading-container {
+  flex: 1;
+  padding: var(--sapphire-panel-size-spacing-heading-vertical) 0;
+}
+
+.sapphire-panel-panel-header {
+  flex-shrink: 0;
+  display: flex;
+  justify-content: space-between;
+  padding: var(--sapphire-panel-size-spacing-header-vertical)
+    var(--sapphire-panel-size-spacing-side);
+  gap: var(--sapphire-panel-size-spacing-header-gap);
+}
+
+.sapphire-panel-panel-header-subheading {
+  color: var(--sapphire-panel-color-subheading);
+  margin-top: var(--sapphire-panel-size-spacing-heading-gap);
+  font-family: var(--sapphire-panel-font-name);
+}
+
+.sapphire-panel-panel-footer {
+  padding: var(--sapphire-panel-size-spacing-footer-top)
+    var(--sapphire-panel-size-spacing-side)
+    var(--sapphire-panel-size-spacing-footer-bottom)
+    var(--sapphire-panel-size-spacing-side);
+}
+
+.sapphire-panel-panel-header-close-button-container {
+  margin-left: var(--sapphire-panel-size-spacing-close-icon-left);
+}
+
+.sapphire-panel--scrollable .sapphire-panel-footer {
+  border-top: var(--sapphire-panel-size-border) solid
+    var(--sapphire-panel-color-separator-default);
+}
+
+.sapphire-panel--scrolled .sapphire-panel-header {
+  border-bottom: var(--sapphire-panel-size-border) solid
+    var(--sapphire-panel-color-separator-default);
+}

package/components/panel/panel.module.css.d.ts

@@ -0,0 +1,18 @@
+declare const styles: {
+  readonly "sapphire-panel": string;
+  readonly "sapphire-panel--visible": string;
+  readonly "sapphire-panel--small": string;
+  readonly "sapphire-panel-header": string;
+  readonly "sapphire-panel-body": string;
+  readonly "sapphire-panel-body--no-padding": string;
+  readonly "sapphire-panel-footer": string;
+  readonly "sapphire-panel-panel-heading-container": string;
+  readonly "sapphire-panel-panel-header": string;
+  readonly "sapphire-panel-panel-header-subheading": string;
+  readonly "sapphire-panel-panel-footer": string;
+  readonly "sapphire-panel-panel-header-close-button-container": string;
+  readonly "sapphire-panel--scrollable": string;
+  readonly "sapphire-panel--scrolled": string;
+};
+export = styles;
+

package/components/paragraph/paragraph.module.css

@@ -0,0 +1,35 @@
+.sapphire-paragraph {
+  font-family: var(--sapphire-paragraph-font-name);
+  color: var(--sapphire-paragraph-color-text);
+  line-height: var(--sapphire-paragraph-size-line-height);
+  /* not able to find specification in sketch docs for margin,
+     will update this once specifications are established */
+  margin-top: 0px;
+  margin-bottom: 0px;
+
+  /* The below is meant to address a font rendering quirk in OSX where the text
+   * looks bolder than intended due to subpixel rendering. This quirk generally
+   * occurs for bold fonts on dark backgrounds but depending on the font, it
+   * can happen in other contexts as well.
+   *
+   * These do not do anything except in webkit browsers & firefox on OSX.
+   *
+   * For more details see:
+   * - https://azuredevops/Main/WCCJ/_git/sapphire/pullRequest/212710?path=%2Fpackages%2Fcss%2Fcomponents%2Fbutton%2Fbutton.module.css&discussionId=1507702&_a=files
+   * - https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
+   */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.sapphire-paragraph--default {
+  font-size: var(--sapphire-paragraph-size-font-default);
+}
+
+.sapphire-paragraph--small {
+  font-size: var(--sapphire-paragraph-size-font-small);
+}
+
+.sapphire-paragraph--extraSmall {
+  font-size: var(--sapphire-paragraph-size-font-extra-small);
+}

package/components/paragraph/paragraph.module.css.d.ts

@@ -0,0 +1,8 @@
+declare const styles: {
+  readonly "sapphire-paragraph": string;
+  readonly "sapphire-paragraph--default": string;
+  readonly "sapphire-paragraph--small": string;
+  readonly "sapphire-paragraph--extraSmall": string;
+};
+export = styles;
+

package/components/popover/popover.module.css

@@ -0,0 +1,39 @@
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.sapphire-popover {
+  box-sizing: border-box;
+  background-color: var(--sapphire-popover-color-background);
+  box-shadow: var(--sapphire-popover-shadow);
+  animation: fade-in var(--sapphire-popover-time-transition) ease-in-out;
+  border-radius: var(--sapphire-popover-size-radius);
+  overflow: auto;
+
+  /* The below is meant to address a font rendering quirk in OSX where the text
+   * looks bolder than intended due to subpixel rendering. This quirk generally
+   * occurs for bold fonts on dark backgrounds but depending on the font, it
+   * can happen in other contexts as well.
+   *
+   * These do not do anything except in webkit browsers & firefox on OSX.
+   *
+   * For more details see:
+   * - https://azuredevops/Main/WCCJ/_git/sapphire/pullRequest/212710?path=%2Fpackages%2Fcss%2Fcomponents%2Fbutton%2Fbutton.module.css&discussionId=1507702&_a=files
+   * - https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
+   */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.sapphire-popover--padded {
+  padding: var(--sapphire-popover-size-spacing-padded);
+}
+
+.sapphire-popover--max-width {
+  max-width: var(--sapphire-popover-size-max-width);
+}

package/components/popover/popover.module.css.d.ts

@@ -0,0 +1,8 @@
+declare const styles: {
+  readonly "sapphire-popover": string;
+  readonly "fade-in": string;
+  readonly "sapphire-popover--padded": string;
+  readonly "sapphire-popover--max-width": string;
+};
+export = styles;
+

package/components/radio/radio.module.css

@@ -0,0 +1,117 @@
+.sapphire-radio {
+  align-items: center;
+  display: inline-flex;
+  font-family: var(--sapphire-radio-font-label-name);
+  max-width: 100%;
+  position: relative;
+}
+
+.sapphire-radio__input {
+  margin: 0;
+  overflow: visible;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  opacity: 0.0001; /** Some of the screen readers may ignore element with opacity:0 */
+  z-index: 1;
+  cursor: pointer;
+}
+
+.sapphire-radio__label {
+  margin-left: var(--sapphire-radio-size-spacing-label);
+  font-size: var(--sapphire-radio-size-font);
+  line-height: var(--sapphire-radio-size-height-label);
+  color: var(--sapphire-radio-color-label);
+
+  /* The below is meant to address a font rendering quirk in OSX where the text
+   * looks bolder than intended due to subpixel rendering. This quirk generally
+   * occurs for bold fonts on dark backgrounds but depending on the font, it
+   * can happen in other contexts as well.
+   *
+   * These do not do anything except in webkit browsers & firefox on OSX.
+   *
+   * For more details see:
+   * - https://azuredevops/Main/WCCJ/_git/sapphire/pullRequest/212710?path=%2Fpackages%2Fcss%2Fcomponents%2Fbutton%2Fbutton.module.css&discussionId=1507702&_a=files
+   * - https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
+   */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* The radio box */
+
+.sapphire-radio__box {
+  box-sizing: border-box;
+  background-color: var(
+    --sapphire-radio-color-background-box-unchecked-default
+  );
+  width: var(--sapphire-radio-size-width-box);
+  height: var(--sapphire-radio-size-height-box);
+  flex-shrink: 0;
+  border-radius: 50%;
+  border: var(--sapphire-radio-size-width-border-unchecked) solid
+    var(--sapphire-radio-color-border-box-unchecked-default);
+  position: relative;
+
+  transition-property: background-color, border-color, border-width;
+  transition-duration: var(--sapphire-radio-time-transition);
+  transition-timing-function: ease-in-out;
+}
+
+.sapphire-radio--checked .sapphire-radio__box {
+  border-color: var(--sapphire-radio-color-background-box-checked-default);
+  border-width: calc(
+    (var(--sapphire-radio-size-height-box) - var(--sapphire-radio-size-circle)) /
+      2
+  );
+}
+
+.sapphire-radio--checked .sapphire-radio__box::after {
+  display: block;
+}
+
+/* HOVER */
+
+/* Hover when not checked */
+
+.sapphire-radio:not(:active):not(.is-active):not(.sapphire-radio--checked).is-hover
+  .sapphire-radio__box,
+.sapphire-radio:not(:active):not(.is-active):not(.sapphire-radio--checked):not(.js-hover):hover
+  .sapphire-radio__input:not(:disabled)
+  ~ .sapphire-radio__box {
+  border-color: var(--sapphire-radio-color-border-box-unchecked-hover);
+}
+
+/* Hover when checked */
+
+.sapphire-radio--checked:not(:active):not(.is-active).is-hover
+  .sapphire-radio__box,
+.sapphire-radio--checked:not(:active):not(.is-active):not(.js-hover):hover
+  .sapphire-radio__input:not(:disabled)
+  ~ .sapphire-radio__box {
+  border-color: var(--sapphire-radio-color-background-box-checked-hover);
+}
+
+/* FOCUS */
+
+.sapphire-radio.is-focus .sapphire-radio__input ~ .sapphire-radio__box,
+.sapphire-radio:not(.js-focus)
+  .sapphire-radio__input:focus-visible
+  ~ .sapphire-radio__box {
+  outline: var(--sapphire-radio-size-focus-ring-border) solid
+    var(--sapphire-radio-color-focus-ring);
+  outline-offset: var(--sapphire-radio-size-focus-ring-offset);
+}
+
+/* DISABLED */
+
+.sapphire-radio__input:disabled {
+  cursor: not-allowed;
+}
+
+.sapphire-radio__input:disabled ~ .sapphire-radio__box,
+.sapphire-radio__input:disabled ~ .sapphire-radio__label {
+  opacity: var(--sapphire-radio-opacity-disabled);
+}

package/components/radio/radio.module.css.d.ts

@@ -0,0 +1,14 @@
+declare const styles: {
+  readonly "sapphire-radio": string;
+  readonly "sapphire-radio__input": string;
+  readonly "sapphire-radio__label": string;
+  readonly "sapphire-radio__box": string;
+  readonly "sapphire-radio--checked": string;
+  readonly "is-active": string;
+  readonly "is-hover": string;
+  readonly "js-hover": string;
+  readonly "is-focus": string;
+  readonly "js-focus": string;
+};
+export = styles;
+