@nypl/design-system-react-components 1.0.1 → 1.0.2

package/dist/helpers/types.d.ts

@@ -0,0 +1 @@
+export declare type LayoutTypes = "column" | "row";

package/dist/hooks/tests/useCarouselStyles.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/hooks/useCarouselStyles.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Custom hook that controls the sliding function for the carousel wrapper.
+ * This returns functions to use for the "previous" and "next" buttons as well
+ * as a CSS style object that should be use to transition between slides. There
+ * is also a function to programmatically slide to the first slide.
+ * Inspired by: https://codesandbox.io/s/fxjeo
+ */
+export declare const useCarouselStyles: (slidesCount?: number, slideWidth?: number) => {
+    prevSlide: () => void;
+    nextSlide: () => void;
+    carouselStyle: {
+        transition: string;
+        marginLeft: string;
+    };
+    goToStart: () => void;
+};
+export default useCarouselStyles;

package/dist/hooks/useNYPLTheme.d.ts

@@ -0,0 +1,66 @@
+/**
+ * A custom hook that returns the Chakra-based NYPL theme object. This must be
+ * used inside a component that is wrapped in the `DSProvider` component, so
+ * that the theme object can be available to use.
+ */
+declare function useNYPLTheme(): {
+    breakpoints?: undefined;
+    colors?: undefined;
+    fontSizes?: undefined;
+    fontWeights?: undefined;
+    fonts?: undefined;
+    radii?: undefined;
+    space?: undefined;
+} | {
+    breakpoints: any;
+    colors: {
+        brand: any;
+        section: any;
+        transparent: any;
+        ui: any;
+    };
+    fontSizes: {
+        "-3": any;
+        "-2": any;
+        "-1": any;
+        0: any;
+        1: any;
+        2: any;
+        3: any;
+        4: any;
+        breadcrumbs: any;
+        button: any;
+        heading: any;
+        helper: any;
+        label: any;
+        text: any;
+    };
+    fontWeights: {
+        light: any;
+        regular: any;
+        medium: any;
+        bold: any;
+        breadcrumbs: any;
+        button: any;
+        heading: any;
+        helper: any;
+        label: any;
+        text: any;
+    };
+    fonts: {
+        body: any;
+        heading: any;
+    };
+    radii: any;
+    space: {
+        xxs: any;
+        xs: any;
+        s: any;
+        m: any;
+        l: any;
+        xl: any;
+        xxl: any;
+        xxxl: any;
+    };
+};
+export default useNYPLTheme;

package/dist/hooks/useWindowSize.d.ts

@@ -0,0 +1,10 @@
+interface WindowSize {
+    width: number;
+    height: number;
+}
+/**
+ * React hook used to get the window size on device resizing.
+ * Based on https://usehooks-typescript.com/react-hook/use-window-size
+ */
+declare function useWindowSize(): WindowSize;
+export default useWindowSize;

package/dist/index.d.ts

@@ -0,0 +1,48 @@
+import "./styles.scss";
+export { Box, Center, Circle, Flex, Grid, GridItem, HStack, Spacer, Square, Stack, VStack, } from "@chakra-ui/react";
+export { default as Accordion, AccordionTypes, } from "./components/Accordion/Accordion";
+export { default as Breadcrumbs, BreadcrumbsTypes, } from "./components/Breadcrumbs/Breadcrumbs";
+export { default as Button, ButtonTypes } from "./components/Button/Button";
+export { default as ButtonGroup } from "./components/ButtonGroup/ButtonGroup";
+export { default as Card, CardActions, CardContent, CardHeading, } from "./components/Card/Card";
+export { default as Checkbox } from "./components/Checkbox/Checkbox";
+export { default as CheckboxGroup } from "./components/CheckboxGroup/CheckboxGroup";
+export { default as DatePicker, DatePickerTypes, FullDateType, } from "./components/DatePicker/DatePicker";
+export { default as DSProvider } from "./theme/provider";
+export { default as Fieldset } from "./components/Fieldset/Fieldset";
+export { default as Form, FormField, FormRow } from "./components/Form/Form";
+export { default as Heading, HeadingSizes, HeadingLevels, } from "./components/Heading/Heading";
+export { default as HelperErrorText } from "./components/HelperErrorText/HelperErrorText";
+export { default as Hero, HeroTypes } from "./components/Hero/Hero";
+export { default as HorizontalRule } from "./components/HorizontalRule/HorizontalRule";
+export { default as Icon, IconAlign, IconColors, IconNames, IconRotationTypes, IconSizes, IconTypes, } from "./components/Icons/Icon";
+export { default as Image, ImageRatios, ImageSizes, ImageTypes, } from "./components/Image/Image";
+export { default as Label } from "./components/Label/Label";
+export { LayoutTypes } from "./helpers/types";
+export { default as Link, LinkTypes } from "./components/Link/Link";
+export { default as List, ListTypes } from "./components/List/List";
+export { default as Logo, LogoNames, LogoSizes } from "./components/Logo/Logo";
+export { ModalTrigger, useModal } from "./components/Modal/Modal";
+export { default as Notification, NotificationTypes, } from "./components/Notification/Notification";
+export { default as Pagination } from "./components/Pagination/Pagination";
+export { default as ProgressIndicator, ProgressIndicatorSizes, ProgressIndicatorTypes, } from "./components/ProgressIndicator/ProgressIndicator";
+export { default as Radio } from "./components/Radio/Radio";
+export { default as RadioGroup } from "./components/RadioGroup/RadioGroup";
+export { default as SearchBar } from "./components/SearchBar/SearchBar";
+export { default as Select, LabelPositions } from "./components/Select/Select";
+export { default as SimpleGrid, GridGaps } from "./components/Grid/SimpleGrid";
+export { default as SkeletonLoader, SkeletonLoaderImageRatios, } from "./components/SkeletonLoader/SkeletonLoader";
+export { default as SkipNavigation } from "./components/SkipNavigation/SkipNavigation";
+export { default as Slider } from "./components/Slider/Slider";
+export { default as StatusBadge, StatusBadgeTypes, } from "./components/StatusBadge/StatusBadge";
+export { default as StructuredContent, StructuredContentImagePosition, } from "./components/StructuredContent/StructuredContent";
+export { default as Tabs, TabList, Tab, TabPanels, TabPanel, } from "./components/Tabs/Tabs";
+export { TemplateAppContainer, Template, TemplateAboveHeader, TemplateHeader, TemplateBreakout, TemplateContent, TemplateContentTop, TemplateContentPrimary, TemplateContentSidebar, TemplateFooter, } from "./components/Template/Template";
+export { default as Text, TextSizes } from "./components/Text/Text";
+export { default as TextInput, TextInputRefType, TextInputTypes, } from "./components/TextInput/TextInput";
+export { default as Toggle, ToggleSizes } from "./components/Toggle/Toggle";
+export { default as useCarouselStyles } from "./hooks/useCarouselStyles";
+export { default as useNYPLTheme } from "./hooks/useNYPLTheme";
+export { default as useWindowSize } from "./hooks/useWindowSize";
+export { default as VideoPlayer, VideoPlayerAspectRatios, VideoPlayerTypes, } from "./components/VideoPlayer/VideoPlayer";
+export { default as Table } from "./components/Table/Table";

package/dist/index.js

@@ -0,0 +1,8 @@
+
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./design-system-react-components.cjs.production.min.js')
+} else {
+  module.exports = require('./design-system-react-components.cjs.development.js')
+}

package/dist/resources.scss

@@ -0,0 +1,386 @@
+/**
+ * Breakpoint Configuration
+ * @see https://github.com/Team-Sass/breakpoint/wiki
+ */
+
+// Global Breakpoints
+
+// Avoid using in favor of atomic, content-specific, breakpoints.
+// These should be used for generic code, like layouts and typography, only.
+// The CSS variables and the Sass variables below need to stay in sync.
+// Sass' breakpoint() mixin doesn't work without Sass variables.
+// CSS variables expose the breakpoint variables to consumers.
+:root {
+  --nypl-breakpoint-small: 320px;
+  --nypl-breakpoint-medium: 600px;
+  --nypl-breakpoint-large: 960px;
+  --nypl-breakpoint-xl: 1280px;
+}
+
+$nypl-breakpoint-small: 320px;
+$nypl-breakpoint-medium: 600px;
+$nypl-breakpoint-large: 960px;
+$nypl-breakpoint-xl: 1280px;
+// The max-width breakpoint is used when the design should be applied at
+// whatever the largest breakpoint is regardless of actual pixel value,
+// e.g. removing outer margin on body wrapper.
+$nypl-max-width: $nypl-breakpoint-xl;
+
+/////////////////////
+// General Mixins (put specific ones in component files where applicable)
+
+/// Mixin - Clearfix.
+/// Adds clearfix based on http://bourbon.io/docs/#clearfix
+/// use example = @include clearfix
+
+@mixin clearfix {
+  &::after {
+    clear: both;
+    content: "";
+    display: table;
+  }
+}
+
+@mixin list-reset {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+@mixin fieldset-reset {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+/// Mixin - Wrapper
+/// Outer container mixin for large screens
+@mixin wrapper(
+  $container-max-width: $max-width,
+  $outer-container-break: $nypl-breakpoint-small,
+  $v-margin: 0,
+  $v-padding: 0,
+  $h-padding: var(--nypl-space-s)
+) {
+  margin: #{$v-margin} auto;
+  max-width: #{$container-max-width};
+  padding: #{$v-padding} #{$h-padding};
+  width: 100%;
+}
+
+.container {
+  padding: var(--nypl-space-s);
+}
+
+/// Use the breakout mixin for elements that should be edge-to-edge
+/// Even when a parent container uses the wrapper mixin
+@mixin breakout($v-padding: var(--nypl-space-s)) {
+  margin-left: calc(-50vw + 50%);
+  margin-right: calc(-50vw + 50%);
+}
+
+// Use the screenreader-only mixin for elements that you want to be visually hidden, but still want screenreaders to read out
+@mixin screenreader-only() {
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute !important;
+  width: 1px;
+  word-wrap: normal;
+}
+
+// Focus state mixin
+@mixin focus-outline($darkBackground: false) {
+  outline: 2px solid var(--nypl-colors-ui-focus);
+  outline-offset: 2px;
+  z-index: 9999;
+
+  @if $darkBackground {
+    outline-color: var(--nypl-colors-ui-white);
+  }
+}
+
+//Convert pixel values to rem
+@function to-rem($size) {
+  @return $size / 16px * 1rem;
+}
+
+//Process a color variable so that it can be used in a data URI/URL
+@function url-friendly-colour($colour) {
+  @return "%23" + str-slice("#{$colour}", 2, -1);
+}
+
+@mixin placeholder {
+  &::-webkit-input-placeholder {
+    @content;
+  }
+
+  &::-moz-placeholder {
+    @content;
+
+    opacity: 1;
+  }
+
+  &:-moz-placeholder {
+    @content;
+  }
+
+  &:-ms-input-placeholder {
+    @content;
+  }
+}
+
+/**
+ * --nypl-space-xxs: --nypl-space-s / 4  //  4px or 0.25rem
+ * --nypl-space-xs: --nypl-space-s / 2   //  8px or 0.5rem
+ * --nypl-space-s: --nypl-space-s * 1;   // 16px or 1rem
+ * --nypl-space-m: --nypl-space * 1.5;   // 24px or 1.5rem
+ * --nypl-space-l: --nypl-space * 2;     // 32px or 2rem
+ * --nypl-space-xl: --nypl-space * 3;    // 48px or 3rem
+ * --nypl-space-xxl: --nypl-space * 4;   // 64px or 4rem
+ */
+
+@mixin space-inline-none {
+  margin-right: 0;
+}
+
+@mixin space-inline-xxs {
+  margin-right: var(--nypl-space-xxs);
+}
+
+@mixin space-inline-xs {
+  margin-right: var(--nypl-space-xs);
+}
+
+@mixin space-inline-s {
+  margin-right: var(--nypl-space-s);
+}
+
+@mixin space-inline-m {
+  margin-right: var(--nypl-space-m);
+}
+
+@mixin space-inline-l {
+  margin-right: var(--nypl-space-l);
+}
+
+@mixin space-inline-xl {
+  margin-right: var(--nypl-space-xl);
+}
+
+@mixin space-inline-xxl {
+  margin-right: var(--nypl-space-xxl);
+}
+
+@mixin get-space-inline($id) {
+  @if $id == "none" {
+    @include space-inline-none;
+  }
+
+  @if $id == "xxs" {
+    @include space-inline-xxs;
+  }
+
+  @if $id == "xs" {
+    @include space-inline-xs;
+  }
+
+  @if $id == "s" {
+    @include space-inline-s;
+  }
+
+  @if $id == "m" {
+    @include space-inline-m;
+  }
+
+  @if $id == "l" {
+    @include space-inline-l;
+  }
+
+  @if $id == "xl" {
+    @include space-inline-xl;
+  }
+
+  @if $id == "xxl" {
+    @include space-inline-xxl;
+  }
+
+  @if $id == "xxxl" {
+    @include space-inline-xxxl;
+  }
+}
+
+/**
+ * --nypl-space-xs: --nypl-space-s / 2   //  8px or 0.5rem
+ * --nypl-space-s: --nypl-space-s * 1;   // 16px or 1rem
+ * --nypl-space-m: --nypl-space * 1.5;   // 24px or 1.5rem
+ * --nypl-space-l: --nypl-space * 2;     // 32px or 2rem
+ * --nypl-space-xl: --nypl-space * 3;    // 48px or 3rem
+ */
+
+@mixin space-inset-none {
+  padding: 0;
+}
+
+@mixin space-inset-xs {
+  padding: var(--nypl-space-xs);
+}
+
+@mixin space-inset-s {
+  padding: var(--nypl-space-s);
+}
+
+@mixin space-inset-m {
+  padding: var(--nypl-space-m);
+}
+
+@mixin space-inset-l {
+  padding: var(--nypl-space-l);
+}
+
+@mixin space-inset-xl {
+  padding: var(--nypl-space-xl);
+}
+
+@mixin get-space-inset($id) {
+  @if $id == "none" {
+    @include space-inset-none;
+  }
+
+  @if $id == "xs" {
+    @include space-inset-xs;
+  }
+
+  @if $id == "s" {
+    @include space-inset-s;
+  }
+
+  @if $id == "m" {
+    @include space-inset-m;
+  }
+
+  @if $id == "l" {
+    @include space-inset-l;
+  }
+
+  @if $id == "xl" {
+    @include space-inset-xl;
+  }
+}
+
+/**
+ * --nypl-space-xxs: --nypl-space-s / 4   //  4px or 0.25rem
+ * --nypl-space-xs: --nypl-space-s / 2    //  8px or 0.5rem
+ * --nypl-space-s: --nypl-space-s * 1;    // 16px or 1rem
+ * --nypl-space-m: --nypl-space-s * 1.5;  // 24px or 1.5rem
+ * --nypl-space-l: --nypl-space-s * 2;    // 32px or 2rem
+ * --nypl-space-xl: --nypl-space-s * 3;   // 48px or 3rem
+ * --nypl-space-xxl: --nypl-space-s * 4;  // 64px or 4rem
+ * --nypl-space-xxxl: --nypl-space-s * 6; // 96px or 6rem
+ */
+
+@mixin space-stack-none {
+  margin-bottom: 0;
+}
+
+@mixin space-stack-xxs {
+  margin-bottom: var(--nypl-space-xxs);
+}
+
+@mixin space-stack-xs {
+  margin-bottom: var(--nypl-space-xs);
+}
+
+@mixin space-stack-s {
+  margin-bottom: var(--nypl-space-s);
+}
+
+@mixin space-stack-m {
+  margin-bottom: var(--nypl-space-m);
+}
+
+@mixin space-stack-l {
+  margin-bottom: var(--nypl-space-l);
+}
+
+@mixin space-stack-xl {
+  margin-bottom: var(--nypl-space-xl);
+}
+
+@mixin space-stack-xxl {
+  margin-bottom: var(--nypl-space-xxl);
+}
+
+@mixin space-stack-xxxl {
+  margin-bottom: var(--nypl-space-xxxl);
+}
+
+@mixin space-stack-page {
+  @include space-stack-l;
+
+  @include breakpoint($nypl-breakpoint-large) {
+    @include space-stack-xl;
+  }
+
+  &--full {
+    @include space-stack-xxl;
+
+    @include breakpoint($nypl-breakpoint-large) {
+      @include space-stack-xxxl;
+    }
+  }
+}
+
+@mixin remove-stack-page {
+  margin-top: calc(-1 * 32px);
+
+  @include breakpoint($nypl-breakpoint-large) {
+    margin-top: calc(-1 * 48px);
+  }
+
+  &--full {
+    margin-top: calc(-1 * 64px);
+
+    @include breakpoint($nypl-breakpoint-large) {
+      margin-top: calc(-1 * 96px);
+    }
+  }
+}
+
+@mixin get-space-stack($id) {
+  @if $id == "none" {
+    @include space-stack-none;
+  }
+
+  @if $id == "xxs" {
+    @include space-stack-xxs;
+  }
+
+  @if $id == "xs" {
+    @include space-stack-xs;
+  }
+
+  @if $id == "s" {
+    @include space-stack-s;
+  }
+
+  @if $id == "m" {
+    @include space-stack-m;
+  }
+
+  @if $id == "l" {
+    @include space-stack-l;
+  }
+
+  @if $id == "xl" {
+    @include space-stack-xl;
+  }
+
+  @if $id == "xxl" {
+    @include space-stack-xxl;
+  }
+
+  @if $id == "xxxl" {
+    @include space-stack-xxxl;
+  }
+}

package/dist/styles.css

@@ -0,0 +1,3 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */@import "~react-datepicker/dist/react-datepicker.css";html{-webkit-text-size-adjust:100%;line-height:1.15}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}
+
+/*! system-font.css v2.0.2 | CC0-1.0 License | github.com/jonathantneal/system-font-css */@font-face{font-family:system-ui;font-style:normal;font-weight:300;src:local(".SFNSText-Light"),local(".HelveticaNeueDeskInterface-Light"),local(".LucidaGrandeUI"),local("Segoe UI Light"),local("Ubuntu Light"),local("Roboto-Light"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system-ui;font-style:italic;font-weight:300;src:local(".SFNSText-LightItalic"),local(".HelveticaNeueDeskInterface-Italic"),local(".LucidaGrandeUI"),local("Segoe UI Light Italic"),local("Ubuntu Light Italic"),local("Roboto-LightItalic"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system-ui;font-style:normal;font-weight:400;src:local(".SFNSText-Regular"),local(".HelveticaNeueDeskInterface-Regular"),local(".LucidaGrandeUI"),local("Segoe UI"),local("Ubuntu"),local("Roboto-Regular"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system-ui;font-style:italic;font-weight:400;src:local(".SFNSText-Italic"),local(".HelveticaNeueDeskInterface-Italic"),local(".LucidaGrandeUI"),local("Segoe UI Italic"),local("Ubuntu Italic"),local("Roboto-Italic"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system-ui;font-style:normal;font-weight:500;src:local(".SFNSText-Medium"),local(".HelveticaNeueDeskInterface-MediumP4"),local(".LucidaGrandeUI"),local("Segoe UI Semibold"),local("Ubuntu Medium"),local("Roboto-Medium"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system-ui;font-style:italic;font-weight:500;src:local(".SFNSText-MediumItalic"),local(".HelveticaNeueDeskInterface-MediumItalicP4"),local(".LucidaGrandeUI"),local("Segoe UI Semibold Italic"),local("Ubuntu Medium Italic"),local("Roboto-MediumItalic"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system-ui;font-style:normal;font-weight:700;src:local(".SFNSText-Bold"),local(".HelveticaNeueDeskInterface-Bold"),local(".LucidaGrandeUI"),local("Segoe UI Bold"),local("Ubuntu Bold"),local("Roboto-Bold"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system-ui;font-style:italic;font-weight:700;src:local(".SFNSText-BoldItalic"),local(".HelveticaNeueDeskInterface-BoldItalic"),local(".LucidaGrandeUI"),local("Segoe UI Bold Italic"),local("Ubuntu Bold Italic"),local("Roboto-BoldItalic"),local("DroidSans-Bold"),local("Tahoma Bold")}:root{--nypl-breakpoint-small:320px;--nypl-breakpoint-medium:600px;--nypl-breakpoint-large:960px;--nypl-breakpoint-xl:1280px}.container{padding:var(--nypl-space-s)}.placeholder{--color-place-holder:var(--nypl-colors-ui-gray-dark);align-items:center;border:4px dashed var(--color-place-holder);color:var(--color-place-holder);display:flex;font-size:3rem;justify-content:center;line-height:1.4;margin-bottom:var(--nypl-space-l);padding:4rem 1rem;width:100%}@media (min-width:960px){.placeholder{margin-bottom:var(--nypl-space-l)}}.placeholder--full{margin-bottom:var(--nypl-space-xxl)}@media (min-width:960px){.placeholder--full{margin-bottom:var(--nypl-space-xxxl)}}.placeholder--short{padding:1rem}.react-autosuggest__container{display:inline;position:relative;width:100%}.react-autosuggest__input--focused{outline:none}.react-autosuggest__input--open{border-bottom-left-radius:0;border-bottom-right-radius:0;width:100%}.react-autosuggest__suggestions-container{display:none;width:100%}.react-autosuggest__suggestions-container--open{background-color:var(--nypl-colors-ui-white);display:block;font-weight:300;margin-top:1px;outline:1px solid var(--nypl-colors-ui-gray-light-cool);position:relative;width:100%;z-index:2}.react-autosuggest__suggestions-list{list-style-type:none;margin:0;padding:0}.react-autosuggest__suggestion{cursor:pointer;padding:var(--nypl-space-xs)}.react-autosuggest__suggestion--highlighted{background-color:var(--nypl-colors-ui-gray-light-cool)}.auto-suggest-bottom{padding:var(--nypl-space-xs)}.date-picker-calendar{font-family:var(--nypl-fonts-body)}.date-picker-calendar .react-datepicker{border-color:var(--nypl-colors-ui-gray-medium)}.date-picker-calendar .react-datepicker__triangle{transform:translate(32px)!important}.date-picker-calendar .react-datepicker__triangle:before{border-bottom-color:var(--nypl-colors-ui-gray-medium)!important}.date-picker-calendar .react-datepicker__triangle:after{border-bottom-color:var(--nypl-colors-ui-gray-x-light-cool)!important}.date-picker-calendar .react-datepicker__navigation-icon{top:5px;width:0}.date-picker-calendar .react-datepicker__navigation-icon:before{border-color:var(--nypl-colors-ui-gray-medium)}.date-picker-calendar .react-datepicker__navigation:hover .react-datepicker__navigation-icon:before{border-color:var(--nypl-colors-ui-gray-dark)}.date-picker-calendar .react-datepicker__header{background-color:var(--nypl-colors-ui-gray-x-light-cool);border-color:var(--nypl-colors-ui-gray-medium)}.date-picker-calendar .react-datepicker__year-wrapper{max-width:220px}.date-picker-calendar .react-datepicker__day--keyboard-selected,.date-picker-calendar .react-datepicker__day:hover,.date-picker-calendar .react-datepicker__month-text:hover,.date-picker-calendar .react-datepicker__year-text:not(.react-datepicker__year-text--disabled):hover{background-color:var(--nypl-colors-ui-gray-x-light-cool);border-radius:0;color:var(--nypl-colors-ui-black)}.date-picker-calendar .react-datepicker__day--in-range.react-datepicker__day--in-range,.date-picker-calendar .react-datepicker__day--keyboard-selected,.date-picker-calendar .react-datepicker__month--in-range.react-datepicker__day--in-range,.date-picker-calendar .react-datepicker__year--in-range.react-datepicker__day--in-range{opacity:1}.date-picker-calendar .react-datepicker__day--in-range,.date-picker-calendar .react-datepicker__day--in-selecting-range,.date-picker-calendar .react-datepicker__day--keyboard-selected,.date-picker-calendar .react-datepicker__day-text--keyboard-selected,.date-picker-calendar .react-datepicker__month--in-range,.date-picker-calendar .react-datepicker__month--in-selecting-range,.date-picker-calendar .react-datepicker__month--keyboard-selected,.date-picker-calendar .react-datepicker__month-text--keyboard-selected,.date-picker-calendar .react-datepicker__year--in-range,.date-picker-calendar .react-datepicker__year--in-selecting-range,.date-picker-calendar .react-datepicker__year--keyboard-selected,.date-picker-calendar .react-datepicker__year-text--keyboard-selected{background-color:var(--nypl-colors-ui-gray-x-light-cool);border-radius:0;color:var(--nypl-colors-ui-black)}.date-picker-calendar .react-datepicker__day--today,.date-picker-calendar .react-datepicker__day--today:hover,.date-picker-calendar .react-datepicker__day-text--today,.date-picker-calendar .react-datepicker__day-text--today:hover,.date-picker-calendar .react-datepicker__month--today,.date-picker-calendar .react-datepicker__month--today:hover,.date-picker-calendar .react-datepicker__month-text--today,.date-picker-calendar .react-datepicker__month-text--today:hover,.date-picker-calendar .react-datepicker__year--today,.date-picker-calendar .react-datepicker__year--today:hover,.date-picker-calendar .react-datepicker__year-text--today,.date-picker-calendar .react-datepicker__year-text--today:hover{background-color:var(--nypl-colors-ui-gray-light-cool);color:var(--nypl-colors-ui-black)}.date-picker-calendar .react-datepicker__day--selected,.date-picker-calendar .react-datepicker__day-text--selected,.date-picker-calendar .react-datepicker__month--selected,.date-picker-calendar .react-datepicker__month-text--selected,.date-picker-calendar .react-datepicker__year--selected,.date-picker-calendar .react-datepicker__year-text--selected{background-color:var(--nypl-colors-ui-focus);border-radius:0;color:var(--nypl-colors-ui-white);font-weight:700;opacity:1}.date-picker-calendar .react-datepicker__day--selected:hover,.date-picker-calendar .react-datepicker__day-text--selected:hover,.date-picker-calendar .react-datepicker__month--selected:hover,.date-picker-calendar .react-datepicker__month-text--selected:hover,.date-picker-calendar .react-datepicker__year--selected:hover,.date-picker-calendar .react-datepicker__year-text--selected:hover{background-color:var(--nypl-colors-ui-focus);color:var(--nypl-colors-ui-white)}

package/dist/theme/components/accordion.d.ts

@@ -0,0 +1,20 @@
+declare const Accordion: {
+    parts: string[];
+    baseStyle: {
+        container: {
+            border: string;
+            width: string;
+        };
+        button: {
+            borderWidth: string;
+            fontWeight: string;
+        };
+        panel: {
+            padding: string;
+            borderLeftWidth: string;
+            borderRightWidth: string;
+            borderBottomWidth: string;
+        };
+    };
+};
+export default Accordion;

package/dist/theme/components/breadcrumb.d.ts

@@ -0,0 +1,105 @@
+declare const Breadcrumb: {
+    baseStyle: {
+        bg: string;
+        color: string;
+        fontSize: string;
+        fontWeight: string;
+        paddingBottom: string;
+        paddingTop: string;
+        ol: {
+            alignItems: {
+                base: string;
+                md: string;
+            };
+            display: {
+                base: string;
+                md: string;
+            };
+            margin: string;
+            maxWidth: string;
+            paddingLeft: string;
+            paddingRight: string;
+        };
+        a: {
+            _hover: {
+                color: string;
+            };
+        };
+        "li:last-child": {
+            fontWeight: {
+                base: string;
+                md: string;
+            };
+            ".chakra-breadcrumb__link": {
+                _hover: {
+                    cursor: string;
+                    textDecoration: string;
+                };
+            };
+            ".icon": {
+                display: string;
+            };
+        };
+        "li:not(:last-child)": {
+            display: {
+                base: string;
+                md: string;
+            };
+            a: {
+                marginRight: {
+                    base: string;
+                    md: string;
+                };
+            };
+            ".icon": {
+                display: {
+                    base: string;
+                    md: string;
+                };
+            };
+            "span:not(.breadcrumb-label)": {
+                marginInlineEnd: string;
+                marginInlineStart: string;
+            };
+        };
+        "li:nth-last-of-type(2)": {
+            display: string;
+            span: {
+                display: {
+                    base: string;
+                    md: string;
+                };
+            };
+        };
+    };
+    variants: {
+        blogs: {
+            bg: string;
+            color: string;
+            a: {
+                _hover: {
+                    color: string;
+                };
+            };
+            svg: {
+                fill: string;
+            };
+        };
+        booksAndMore: {
+            bg: string;
+        };
+        education: {
+            bg: string;
+        };
+        locations: {
+            bg: string;
+        };
+        research: {
+            bg: string;
+        };
+        whatsOn: {
+            bg: string;
+        };
+    };
+};
+export default Breadcrumb;