@redsift/design-system 11.5.0 → 11.6.0-muiv5-alpha.0

package/components/focus-within-group/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../src/components/focus-within-group/types.ts"],"sourcesContent":["import { ComponentProps } from 'react';\n\nexport enum EventKey {\n  ArrowLeft = 'ArrowLeft',\n  ArrowRight = 'ArrowRight',\n  ArrowUp = 'ArrowUp',\n  ArrowDown = 'ArrowDown',\n  Home = 'Home',\n  End = 'End',\n  Enter = 'Enter',\n}\n\nexport type KeyDirection = 'horizontal' | 'vertical' | 'both';\n\nexport enum Navigation {\n  PREVIOUS = 'PREVIOUS',\n  NEXT = 'NEXT',\n  VERY_FIRST = 'VERY_FIRST',\n  VERY_LAST = 'VERY_LAST',\n  PREVIOUS_ROW = 'PREVIOUS_ROW',\n  NEXT_ROW = 'NEXT_ROW',\n  FIRST_IN_ROW = 'FIRST_IN_ROW',\n  LAST_IN_ROW = 'LAST_IN_ROW',\n}\n\nexport type TabStop = Readonly<{\n  id: string;\n  domElementRef: React.RefObject<Element>;\n  isDisabled: boolean;\n  rowIndex: number | null;\n  value: string;\n}>;\n\nexport type RowStartMap = Map<Exclude<TabStop['rowIndex'], null>, number>;\n\nexport type FocusWithinGroupState = Readonly<{\n  selectedId: string | null;\n  allowFocusing: boolean;\n  tabStops: readonly TabStop[];\n  direction: KeyDirection;\n  focusOnClick: boolean;\n  focusOnInit: boolean;\n  loopAround: boolean;\n  rowStartMap: RowStartMap | null;\n  focusType: 'roving-tabindex' | 'virtual-focus';\n  listRole: 'listbox' | 'menu';\n  activedescendant?: [string, string];\n  filter?: {\n    value: string;\n    type: 'startsWith' | 'contains' | 'endsWith';\n    caseSensitive?: boolean;\n  };\n  delayedAction?: BaseFocusWithinGroupAction;\n  maxOptionsLength?: number;\n}>;\n\nexport type FocusWithinGroupOptions = Partial<\n  Pick<\n    FocusWithinGroupState,\n    | 'direction'\n    | 'focusOnClick'\n    | 'focusOnInit'\n    | 'loopAround'\n    | 'focusType'\n    | 'listRole'\n    | 'activedescendant'\n    | 'maxOptionsLength'\n  >\n>;\n\nexport enum FocusWithinGroupActionType {\n  REGISTER_TAB_STOP = 'REGISTER_TAB_STOP',\n  UNREGISTER_TAB_STOP = 'UNREGISTER_TAB_STOP',\n  KEY_DOWN_ON_ITEM = 'KEY_DOWN_ON_ITEM',\n  CLICK_ON_ITEM = 'CLICK_ON_ITEM',\n  KEY_DOWN_ON_LIST = 'KEY_DOWN_ON_LIST',\n  FOCUS_ON_LIST = 'FOCUS_ON_LIST',\n  BLUR_ON_LIST = 'BLUR_ON_LIST',\n  TAB_STOP_UPDATED = 'TAB_STOP_UPDATED',\n  OPTIONS_UPDATED = 'OPTIONS_UPDATED',\n  FILTER_LIST = 'FILTER_LIST',\n  DELAY_ACTION = 'DELAY_ACTION',\n}\n\nexport type BaseFocusWithinGroupAction =\n  | {\n      type: FocusWithinGroupActionType.REGISTER_TAB_STOP;\n      payload: TabStop;\n    }\n  | {\n      type: FocusWithinGroupActionType.UNREGISTER_TAB_STOP;\n      payload: { id: TabStop['id'] };\n    }\n  | {\n      type: FocusWithinGroupActionType.TAB_STOP_UPDATED;\n      payload: {\n        id: TabStop['id'];\n        rowIndex: TabStop['rowIndex'];\n        isDisabled: TabStop['isDisabled'];\n        value: string;\n      };\n    }\n  | {\n      type: FocusWithinGroupActionType.KEY_DOWN_ON_ITEM;\n      payload: {\n        id: TabStop['id'];\n        key: EventKey;\n        ctrlKey: boolean;\n      };\n    }\n  | {\n      type: FocusWithinGroupActionType.CLICK_ON_ITEM;\n      payload: { id: TabStop['id'] };\n    }\n  | {\n      type: FocusWithinGroupActionType.KEY_DOWN_ON_LIST;\n      payload: {\n        key: EventKey;\n        ctrlKey: boolean;\n      };\n    }\n  | {\n      type: FocusWithinGroupActionType.FOCUS_ON_LIST;\n      payload: { id: TabStop['id']; filter?: FocusWithinGroupState['filter'] };\n    }\n  | {\n      type: FocusWithinGroupActionType.BLUR_ON_LIST;\n      payload: {};\n    }\n  | {\n      type: FocusWithinGroupActionType.OPTIONS_UPDATED;\n      payload: FocusWithinGroupOptions;\n    }\n  | {\n      type: FocusWithinGroupActionType.FILTER_LIST;\n      payload: { filter: FocusWithinGroupState['filter'] };\n    };\nexport type FocusWithinGroupAction =\n  | BaseFocusWithinGroupAction\n  | {\n      type: FocusWithinGroupActionType.DELAY_ACTION;\n      payload: BaseFocusWithinGroupAction;\n    };\n\nexport type UseFocusWithinGroupProps = {\n  tabIndex?: number;\n  isFocused: boolean;\n  handleKeyDown: (event: React.KeyboardEvent) => void;\n  handleClick: () => void;\n};\n\nexport type UseFocusGroupProps = {\n  activedescendant: [string, string] | undefined;\n  handleKeyDown: (event: React.KeyboardEvent) => void;\n  handleFocus: () => void;\n  handleBlur: () => void;\n};\n\nexport type FocusWithinGroupContextProps = {\n  state: FocusWithinGroupState;\n  dispatch: React.Dispatch<FocusWithinGroupAction>;\n};\n\n/**\n * Component props.\n */\nexport interface FocusWithinGroupProps extends ComponentProps<'div'>, FocusWithinGroupOptions {}\n"],"names":["EventKey","Navigation","FocusWithinGroupActionType"],"mappings":"AAEYA,IAAAA,QAAQ,0BAARA,QAAQ,EAAA;EAARA,QAAQ,CAAA,WAAA,CAAA,GAAA,WAAA,CAAA;EAARA,QAAQ,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;EAARA,QAAQ,CAAA,SAAA,CAAA,GAAA,SAAA,CAAA;EAARA,QAAQ,CAAA,WAAA,CAAA,GAAA,WAAA,CAAA;EAARA,QAAQ,CAAA,MAAA,CAAA,GAAA,MAAA,CAAA;EAARA,QAAQ,CAAA,KAAA,CAAA,GAAA,KAAA,CAAA;EAARA,QAAQ,CAAA,OAAA,CAAA,GAAA,OAAA,CAAA;AAAA,EAAA,OAARA,QAAQ,CAAA;AAAA,CAAA,CAAA,EAAA,EAAA;AAYRC,IAAAA,UAAU,0BAAVA,UAAU,EAAA;EAAVA,UAAU,CAAA,UAAA,CAAA,GAAA,UAAA,CAAA;EAAVA,UAAU,CAAA,MAAA,CAAA,GAAA,MAAA,CAAA;EAAVA,UAAU,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;EAAVA,UAAU,CAAA,WAAA,CAAA,GAAA,WAAA,CAAA;EAAVA,UAAU,CAAA,cAAA,CAAA,GAAA,cAAA,CAAA;EAAVA,UAAU,CAAA,UAAA,CAAA,GAAA,UAAA,CAAA;EAAVA,UAAU,CAAA,cAAA,CAAA,GAAA,cAAA,CAAA;EAAVA,UAAU,CAAA,aAAA,CAAA,GAAA,aAAA,CAAA;AAAA,EAAA,OAAVA,UAAU,CAAA;AAAA,CAAA,CAAA,EAAA,EAAA;AAwDVC,IAAAA,0BAA0B,0BAA1BA,0BAA0B,EAAA;EAA1BA,0BAA0B,CAAA,mBAAA,CAAA,GAAA,mBAAA,CAAA;EAA1BA,0BAA0B,CAAA,qBAAA,CAAA,GAAA,qBAAA,CAAA;EAA1BA,0BAA0B,CAAA,kBAAA,CAAA,GAAA,kBAAA,CAAA;EAA1BA,0BAA0B,CAAA,eAAA,CAAA,GAAA,eAAA,CAAA;EAA1BA,0BAA0B,CAAA,kBAAA,CAAA,GAAA,kBAAA,CAAA;EAA1BA,0BAA0B,CAAA,eAAA,CAAA,GAAA,eAAA,CAAA;EAA1BA,0BAA0B,CAAA,cAAA,CAAA,GAAA,cAAA,CAAA;EAA1BA,0BAA0B,CAAA,kBAAA,CAAA,GAAA,kBAAA,CAAA;EAA1BA,0BAA0B,CAAA,iBAAA,CAAA,GAAA,iBAAA,CAAA;EAA1BA,0BAA0B,CAAA,aAAA,CAAA,GAAA,aAAA,CAAA;EAA1BA,0BAA0B,CAAA,cAAA,CAAA,GAAA,cAAA,CAAA;AAAA,EAAA,OAA1BA,0BAA0B,CAAA;AAAA,CAAA,CAAA,EAAA,EAAA;;AA6FtC;AACA;AACA;;;;"}

package/components/focus-within-group/useFocusOnList.d.ts

@@ -0,0 +1,5 @@
+import { UseFocusGroupProps } from './types.js';
+
+declare function useFocusOnList(): UseFocusGroupProps;
+
+export { useFocusOnList };

package/components/focus-within-group/useFocusOnList.js

@@ -0,0 +1,44 @@
+import { useContext, useCallback } from 'react';
+import { FocusWithinGroupContext } from './context.js';
+import { EventKey, FocusWithinGroupActionType } from './types.js';
+
+function useFocusOnList() {
+  const context = useContext(FocusWithinGroupContext);
+  const handleKeyDown = useCallback(event => {
+    const key = EventKey[event.key];
+    if (!key) {
+      return;
+    }
+    context.dispatch({
+      type: FocusWithinGroupActionType.KEY_DOWN_ON_LIST,
+      payload: {
+        key,
+        ctrlKey: event.ctrlKey
+      }
+    });
+    event.preventDefault();
+  }, []);
+  const handleFocus = useCallback(() => {
+    context.dispatch({
+      type: FocusWithinGroupActionType.FOCUS_ON_LIST,
+      payload: {
+        id: context.state.selectedId
+      }
+    });
+  }, [context.state.selectedId]);
+  const handleBlur = useCallback(() => {
+    context.dispatch({
+      type: FocusWithinGroupActionType.BLUR_ON_LIST,
+      payload: {}
+    });
+  }, []);
+  return {
+    activedescendant: context.state.activedescendant,
+    handleKeyDown,
+    handleFocus,
+    handleBlur
+  };
+}
+
+export { useFocusOnList };
+//# sourceMappingURL=useFocusOnList.js.map

package/components/focus-within-group/useFocusOnList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusOnList.js","sources":["../../../src/components/focus-within-group/useFocusOnList.ts"],"sourcesContent":["import { useCallback, useContext, KeyboardEvent } from 'react';\nimport { FocusWithinGroupContext } from './context';\nimport { FocusWithinGroupActionType, EventKey, UseFocusGroupProps } from './types';\n\nexport function useFocusOnList(): UseFocusGroupProps {\n  const context = useContext(FocusWithinGroupContext);\n\n  const handleKeyDown = useCallback((event: KeyboardEvent) => {\n    const key = EventKey[event.key as EventKey];\n    if (!key) {\n      return;\n    }\n    context.dispatch({\n      type: FocusWithinGroupActionType.KEY_DOWN_ON_LIST,\n      payload: { key, ctrlKey: event.ctrlKey },\n    });\n    event.preventDefault();\n  }, []);\n\n  const handleFocus = useCallback(() => {\n    context.dispatch({\n      type: FocusWithinGroupActionType.FOCUS_ON_LIST,\n      payload: {\n        id: context.state.selectedId!,\n      },\n    });\n  }, [context.state.selectedId]);\n\n  const handleBlur = useCallback(() => {\n    context.dispatch({\n      type: FocusWithinGroupActionType.BLUR_ON_LIST,\n      payload: {},\n    });\n  }, []);\n\n  return {\n    activedescendant: context.state.activedescendant,\n    handleKeyDown,\n    handleFocus,\n    handleBlur,\n  };\n}\n"],"names":["useFocusOnList","context","useContext","FocusWithinGroupContext","handleKeyDown","useCallback","event","key","EventKey","dispatch","type","FocusWithinGroupActionType","KEY_DOWN_ON_LIST","payload","ctrlKey","preventDefault","handleFocus","FOCUS_ON_LIST","id","state","selectedId","handleBlur","BLUR_ON_LIST","activedescendant"],"mappings":";;;;AAIO,SAASA,cAAcA,GAAuB;AACnD,EAAA,MAAMC,OAAO,GAAGC,UAAU,CAACC,uBAAuB,CAAC,CAAA;AAEnD,EAAA,MAAMC,aAAa,GAAGC,WAAW,CAAEC,KAAoB,IAAK;AAC1D,IAAA,MAAMC,GAAG,GAAGC,QAAQ,CAACF,KAAK,CAACC,GAAG,CAAa,CAAA;IAC3C,IAAI,CAACA,GAAG,EAAE;AACR,MAAA,OAAA;AACF,KAAA;IACAN,OAAO,CAACQ,QAAQ,CAAC;MACfC,IAAI,EAAEC,0BAA0B,CAACC,gBAAgB;AACjDC,MAAAA,OAAO,EAAE;QAAEN,GAAG;QAAEO,OAAO,EAAER,KAAK,CAACQ,OAAAA;AAAQ,OAAA;AACzC,KAAC,CAAC,CAAA;IACFR,KAAK,CAACS,cAAc,EAAE,CAAA;GACvB,EAAE,EAAE,CAAC,CAAA;AAEN,EAAA,MAAMC,WAAW,GAAGX,WAAW,CAAC,MAAM;IACpCJ,OAAO,CAACQ,QAAQ,CAAC;MACfC,IAAI,EAAEC,0BAA0B,CAACM,aAAa;AAC9CJ,MAAAA,OAAO,EAAE;AACPK,QAAAA,EAAE,EAAEjB,OAAO,CAACkB,KAAK,CAACC,UAAAA;AACpB,OAAA;AACF,KAAC,CAAC,CAAA;GACH,EAAE,CAACnB,OAAO,CAACkB,KAAK,CAACC,UAAU,CAAC,CAAC,CAAA;AAE9B,EAAA,MAAMC,UAAU,GAAGhB,WAAW,CAAC,MAAM;IACnCJ,OAAO,CAACQ,QAAQ,CAAC;MACfC,IAAI,EAAEC,0BAA0B,CAACW,YAAY;AAC7CT,MAAAA,OAAO,EAAE,EAAC;AACZ,KAAC,CAAC,CAAA;GACH,EAAE,EAAE,CAAC,CAAA;EAEN,OAAO;AACLU,IAAAA,gBAAgB,EAAEtB,OAAO,CAACkB,KAAK,CAACI,gBAAgB;IAChDnB,aAAa;IACbY,WAAW;AACXK,IAAAA,UAAAA;GACD,CAAA;AACH;;;;"}

package/components/focus-within-group/useFocusOnListItem.d.ts

@@ -0,0 +1,39 @@
+import { RefObject } from 'react';
+import { UseFocusWithinGroupProps } from './types.js';
+
+declare function uniqueId(): string;
+/**
+ * Includes the given DOM element in the current roving tabindex.
+ * @param {RefObject<Element>} domElementRef The DOM element to include.
+ * This must be the same DOM element for the lifetime of the containing
+ * component.
+ * @param {boolean} isDisabled Whether or not the DOM element is currently
+ * enabled. This value can be updated as appropriate throughout the lifetime
+ * of the containing component.
+ * @param {number?} rowIndex An optional integer value that must be
+ * populated if the roving tabindex is being used in a grid. In that case,
+ * set it to the zero-based index of the row that the given DOM element
+ * is currently part of. You can update this row index as appropriate
+ * throughout the lifetime of the containing component, for example if
+ * the shape of the grid can change dynamically.
+ * @returns A tuple of values to be applied by the containing
+ * component for the roving tabindex to work correctly.
+ * First tuple value: The tabIndex value to apply to the tab stop
+ * element.
+ * Second tuple value: Whether or not focus() should be invoked on the
+ * tab stop element.
+ * Third tuple value: The onKeyDown callback to apply to the tab
+ * stop element. If the key press is relevant to the hook then
+ * event.preventDefault() will be invoked on the event.
+ * Fourth tuple value: The onClick callback to apply to the tab
+ * stop element.
+ */
+declare function useFocusOnListItem(props: {
+    domElementRef: RefObject<Element>;
+    isDisabled: boolean;
+    id?: string;
+    value?: string;
+    rowIndex?: number | null;
+}): UseFocusWithinGroupProps;
+
+export { uniqueId, useFocusOnListItem };

package/components/focus-within-group/useFocusOnListItem.js

@@ -0,0 +1,148 @@
+import { useRef, useContext, useEffect, useCallback } from 'react';
+import { FocusWithinGroupContext } from './context.js';
+import { FocusWithinGroupActionType, EventKey } from './types.js';
+
+let counter = 0;
+function uniqueId() {
+  return `rti_${++counter}`;
+}
+
+/**
+ * Includes the given DOM element in the current roving tabindex.
+ * @param {RefObject<Element>} domElementRef The DOM element to include.
+ * This must be the same DOM element for the lifetime of the containing
+ * component.
+ * @param {boolean} isDisabled Whether or not the DOM element is currently
+ * enabled. This value can be updated as appropriate throughout the lifetime
+ * of the containing component.
+ * @param {number?} rowIndex An optional integer value that must be
+ * populated if the roving tabindex is being used in a grid. In that case,
+ * set it to the zero-based index of the row that the given DOM element
+ * is currently part of. You can update this row index as appropriate
+ * throughout the lifetime of the containing component, for example if
+ * the shape of the grid can change dynamically.
+ * @returns A tuple of values to be applied by the containing
+ * component for the roving tabindex to work correctly.
+ * First tuple value: The tabIndex value to apply to the tab stop
+ * element.
+ * Second tuple value: Whether or not focus() should be invoked on the
+ * tab stop element.
+ * Third tuple value: The onKeyDown callback to apply to the tab
+ * stop element. If the key press is relevant to the hook then
+ * event.preventDefault() will be invoked on the event.
+ * Fourth tuple value: The onClick callback to apply to the tab
+ * stop element.
+ */
+function useFocusOnListItem(props) {
+  var _context$state$active;
+  const {
+    domElementRef,
+    isDisabled,
+    id,
+    value,
+    rowIndex = null
+  } = props;
+  // Create a stable ID for the lifetime of the component:
+  const idRef = useRef(null);
+  function getId() {
+    if (id) {
+      return id;
+    }
+    if (!idRef.current) {
+      idRef.current = uniqueId();
+    }
+    return idRef.current;
+  }
+  const isMounted = useRef(false);
+  const context = useContext(FocusWithinGroupContext);
+
+  // Register the tab stop on mount and unregister it on unmount:
+  useEffect(() => {
+    const id = getId();
+    context.dispatch({
+      type: FocusWithinGroupActionType.REGISTER_TAB_STOP,
+      payload: {
+        id,
+        domElementRef,
+        rowIndex,
+        isDisabled,
+        value: value
+      }
+    });
+    return () => {
+      context.dispatch({
+        type: FocusWithinGroupActionType.UNREGISTER_TAB_STOP,
+        payload: {
+          id
+        }
+      });
+    };
+  }, []);
+
+  // Update the tab stop data if rowIndex or isDisabled change.
+  // The isMounted flag is used to prevent this effect running
+  // on mount, which is benign but redundant (as the
+  // REGISTER_TAB_STOP action would have just been dispatched).
+  useEffect(() => {
+    if (isMounted.current) {
+      context.dispatch({
+        type: FocusWithinGroupActionType.TAB_STOP_UPDATED,
+        payload: {
+          id: getId(),
+          rowIndex,
+          isDisabled,
+          value: value || ''
+        }
+      });
+    } else {
+      isMounted.current = true;
+    }
+  }, [rowIndex, isDisabled]);
+
+  // Create a stable callback function for handling key down events:
+  const handleKeyDown = useCallback(event => {
+    const key = EventKey[event.key];
+    if (!key) {
+      return;
+    }
+    context.dispatch({
+      type: FocusWithinGroupActionType.KEY_DOWN_ON_ITEM,
+      payload: {
+        id: getId(),
+        key,
+        ctrlKey: event.ctrlKey
+      }
+    });
+    event.preventDefault();
+  }, []);
+
+  // Create a stable callback function for handling click events:
+  const handleClick = useCallback(() => {
+    context.dispatch({
+      type: FocusWithinGroupActionType.CLICK_ON_ITEM,
+      payload: {
+        id: getId()
+      }
+    });
+  }, []);
+
+  // Determine if the current tab stop is the currently active one:
+  const selected = getId() === context.state.selectedId;
+  const tabIndex = context.state.focusType === 'roving-tabindex' ? selected ? 0 : -1 : undefined;
+  const isFocused = selected && context.state.allowFocusing;
+  useEffect(() => {
+    if (isFocused && domElementRef.current && context.state.focusType === 'roving-tabindex') {
+      var _current;
+      (_current = domElementRef.current) === null || _current === void 0 ? void 0 : _current.focus();
+    }
+  }, [isFocused]);
+  return {
+    tabIndex,
+    isFocused: context.state.focusType === 'roving-tabindex' ? isFocused && document.activeElement === domElementRef.current : selected && ((_context$state$active = context.state.activedescendant) === null || _context$state$active === void 0 ? void 0 : _context$state$active[0]) === getId(),
+    handleKeyDown,
+    handleClick
+  };
+}
+
+export { uniqueId, useFocusOnListItem };
+//# sourceMappingURL=useFocusOnListItem.js.map

package/components/focus-within-group/useFocusOnListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusOnListItem.js","sources":["../../../src/components/focus-within-group/useFocusOnListItem.ts"],"sourcesContent":["import { useCallback, useRef, useContext, useEffect, RefObject, KeyboardEvent } from 'react';\nimport { FocusWithinGroupContext } from './context';\nimport { FocusWithinGroupActionType, EventKey, UseFocusWithinGroupProps } from './types';\n\nlet counter = 0;\n\nexport function uniqueId(): string {\n  return `rti_${++counter}`;\n}\n\n/**\n * Includes the given DOM element in the current roving tabindex.\n * @param {RefObject<Element>} domElementRef The DOM element to include.\n * This must be the same DOM element for the lifetime of the containing\n * component.\n * @param {boolean} isDisabled Whether or not the DOM element is currently\n * enabled. This value can be updated as appropriate throughout the lifetime\n * of the containing component.\n * @param {number?} rowIndex An optional integer value that must be\n * populated if the roving tabindex is being used in a grid. In that case,\n * set it to the zero-based index of the row that the given DOM element\n * is currently part of. You can update this row index as appropriate\n * throughout the lifetime of the containing component, for example if\n * the shape of the grid can change dynamically.\n * @returns A tuple of values to be applied by the containing\n * component for the roving tabindex to work correctly.\n * First tuple value: The tabIndex value to apply to the tab stop\n * element.\n * Second tuple value: Whether or not focus() should be invoked on the\n * tab stop element.\n * Third tuple value: The onKeyDown callback to apply to the tab\n * stop element. If the key press is relevant to the hook then\n * event.preventDefault() will be invoked on the event.\n * Fourth tuple value: The onClick callback to apply to the tab\n * stop element.\n */\nexport function useFocusOnListItem(props: {\n  domElementRef: RefObject<Element>;\n  isDisabled: boolean;\n  id?: string;\n  value?: string;\n  rowIndex?: number | null;\n}): UseFocusWithinGroupProps {\n  const { domElementRef, isDisabled, id, value, rowIndex = null } = props;\n  // Create a stable ID for the lifetime of the component:\n  const idRef = useRef<string | null>(null);\n\n  function getId() {\n    if (id) {\n      return id;\n    }\n\n    if (!idRef.current) {\n      idRef.current = uniqueId();\n    }\n    return idRef.current;\n  }\n\n  const isMounted = useRef(false);\n  const context = useContext(FocusWithinGroupContext);\n\n  // Register the tab stop on mount and unregister it on unmount:\n  useEffect(() => {\n    const id = getId();\n    context.dispatch({\n      type: FocusWithinGroupActionType.REGISTER_TAB_STOP,\n      payload: {\n        id,\n        domElementRef,\n        rowIndex,\n        isDisabled,\n        value: value!,\n      },\n    });\n    return (): void => {\n      context.dispatch({\n        type: FocusWithinGroupActionType.UNREGISTER_TAB_STOP,\n        payload: { id },\n      });\n    };\n  }, []);\n\n  // Update the tab stop data if rowIndex or isDisabled change.\n  // The isMounted flag is used to prevent this effect running\n  // on mount, which is benign but redundant (as the\n  // REGISTER_TAB_STOP action would have just been dispatched).\n  useEffect(() => {\n    if (isMounted.current) {\n      context.dispatch({\n        type: FocusWithinGroupActionType.TAB_STOP_UPDATED,\n        payload: {\n          id: getId(),\n          rowIndex,\n          isDisabled,\n          value: value || '',\n        },\n      });\n    } else {\n      isMounted.current = true;\n    }\n  }, [rowIndex, isDisabled]);\n\n  // Create a stable callback function for handling key down events:\n  const handleKeyDown = useCallback((event: KeyboardEvent) => {\n    const key = EventKey[event.key as EventKey];\n    if (!key) {\n      return;\n    }\n    context.dispatch({\n      type: FocusWithinGroupActionType.KEY_DOWN_ON_ITEM,\n      payload: { id: getId(), key, ctrlKey: event.ctrlKey },\n    });\n    event.preventDefault();\n  }, []);\n\n  // Create a stable callback function for handling click events:\n  const handleClick = useCallback(() => {\n    context.dispatch({\n      type: FocusWithinGroupActionType.CLICK_ON_ITEM,\n      payload: { id: getId() },\n    });\n  }, []);\n\n  // Determine if the current tab stop is the currently active one:\n  const selected = getId() === context.state.selectedId;\n\n  const tabIndex = context.state.focusType === 'roving-tabindex' ? (selected ? 0 : -1) : undefined;\n  const isFocused = selected && context.state.allowFocusing;\n\n  useEffect(() => {\n    if (isFocused && domElementRef.current && context.state.focusType === 'roving-tabindex') {\n      (domElementRef as RefObject<SVGElement | HTMLElement>).current?.focus();\n    }\n  }, [isFocused]);\n\n  return {\n    tabIndex,\n    isFocused:\n      context.state.focusType === 'roving-tabindex'\n        ? isFocused && document.activeElement === (domElementRef as RefObject<SVGElement | HTMLElement>).current\n        : selected && context.state.activedescendant?.[0] === getId(),\n    handleKeyDown,\n    handleClick,\n  };\n}\n"],"names":["counter","uniqueId","useFocusOnListItem","props","_context$state$active","domElementRef","isDisabled","id","value","rowIndex","idRef","useRef","getId","current","isMounted","context","useContext","FocusWithinGroupContext","useEffect","dispatch","type","FocusWithinGroupActionType","REGISTER_TAB_STOP","payload","UNREGISTER_TAB_STOP","TAB_STOP_UPDATED","handleKeyDown","useCallback","event","key","EventKey","KEY_DOWN_ON_ITEM","ctrlKey","preventDefault","handleClick","CLICK_ON_ITEM","selected","state","selectedId","tabIndex","focusType","undefined","isFocused","allowFocusing","_current","focus","document","activeElement","activedescendant"],"mappings":"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"}

package/components/gradient-border/index.d.ts

@@ -0,0 +1,14 @@
+import * as styled_components from 'styled-components';
+import { ButtonProps } from '../button/types.js';
+
+declare const StyledGradientBorder: styled_components.StyledComponent<"div", any, {
+    $borderRadius?: string | undefined;
+    $color?: ButtonProps['color'];
+    $isActive?: ButtonProps['isActive'];
+    $isDisabled?: ButtonProps['isDisabled'];
+    $isHovered?: ButtonProps['isHovered'];
+    $theme?: ButtonProps['theme'];
+    width?: string | undefined;
+}, never>;
+
+export { StyledGradientBorder };

package/components/gradient-border/index.js

@@ -0,0 +1,38 @@
+import styled, { css } from 'styled-components';
+import { Theme } from '../../types/colors.js';
+
+const StyledGradientBorder = styled.div`
+  ${_ref => {
+  let {
+    $borderRadius,
+    $color,
+    $isActive,
+    $isDisabled,
+    $isHovered,
+    $theme,
+    width
+  } = _ref;
+  return css`
+    background: transparent;
+    border-radius: ${$borderRadius !== null && $borderRadius !== void 0 ? $borderRadius : '4px'};
+    width: ${width !== null && width !== void 0 ? width : 'fit-content'};
+
+    ${!$isDisabled ? css`
+          border: 1px solid transparent;
+          background-clip: padding-box, border-box;
+          background-origin: border-box;
+          background-image: linear-gradient(
+              90deg,
+              var(--redsift-color-neutral-${$theme === Theme.dark ? 'x-dark-grey' : 'white'}),
+              var(--redsift-color-neutral-${$theme === Theme.dark ? 'x-dark-grey' : 'white'})
+            ),
+            var(
+              --redsift-color-${$theme}-components-buttons-secondary-button-${$color}-text-${$isDisabled ? 'disabled' : $isActive ? 'active' : $isHovered ? 'hover' : 'default'}
+            );
+        ` : ''}
+  `;
+}};
+`;
+
+export { StyledGradientBorder };
+//# sourceMappingURL=index.js.map

package/components/gradient-border/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/gradient-border/index.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { ButtonProps } from '../button';\nimport { Theme } from '../../types';\n\nexport const StyledGradientBorder = styled.div<{\n  $borderRadius?: string;\n  $color?: ButtonProps['color'];\n  $isActive?: ButtonProps['isActive'];\n  $isDisabled?: ButtonProps['isDisabled'];\n  $isHovered?: ButtonProps['isHovered'];\n  $theme?: ButtonProps['theme'];\n  width?: string;\n}>`\n  ${({ $borderRadius, $color, $isActive, $isDisabled, $isHovered, $theme, width }) => css`\n    background: transparent;\n    border-radius: ${$borderRadius ?? '4px'};\n    width: ${width ?? 'fit-content'};\n\n    ${!$isDisabled\n      ? css`\n          border: 1px solid transparent;\n          background-clip: padding-box, border-box;\n          background-origin: border-box;\n          background-image: linear-gradient(\n              90deg,\n              var(--redsift-color-neutral-${$theme === Theme.dark ? 'x-dark-grey' : 'white'}),\n              var(--redsift-color-neutral-${$theme === Theme.dark ? 'x-dark-grey' : 'white'})\n            ),\n            var(\n              --redsift-color-${$theme}-components-buttons-secondary-button-${$color}-text-${$isDisabled ? 'disabled' : $isActive ? 'active' : $isHovered ? 'hover' : 'default'}\n            );\n        `\n      : ''}\n  `};\n`;\n"],"names":["StyledGradientBorder","styled","div","_ref","$borderRadius","$color","$isActive","$isDisabled","$isHovered","$theme","width","css","Theme","dark"],"mappings":";;;AAIaA,MAAAA,oBAAoB,GAAGC,MAAM,CAACC,GAQxC,CAAA;AACH,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;IAAEC,aAAa;IAAEC,MAAM;IAAEC,SAAS;IAAEC,WAAW;IAAEC,UAAU;IAAEC,MAAM;AAAEC,IAAAA,KAAAA;AAAM,GAAC,GAAAP,IAAA,CAAA;AAAA,EAAA,OAAKQ,GAAI,CAAA;AAC1F;AACA,mBAAA,EAAqBP,aAAa,KAAbA,IAAAA,IAAAA,aAAa,KAAbA,KAAAA,CAAAA,GAAAA,aAAa,GAAI,KAAM,CAAA;AAC5C,WAAA,EAAaM,KAAK,KAALA,IAAAA,IAAAA,KAAK,KAALA,KAAAA,CAAAA,GAAAA,KAAK,GAAI,aAAc,CAAA;AACpC;AACA,IAAM,EAAA,CAACH,WAAW,GACVI,GAAI,CAAA;AACZ;AACA;AACA;AACA;AACA;AACA,0CAA4CF,EAAAA,MAAM,KAAKG,KAAK,CAACC,IAAI,GAAG,aAAa,GAAG,OAAQ,CAAA;AAC5F,0CAA4CJ,EAAAA,MAAM,KAAKG,KAAK,CAACC,IAAI,GAAG,aAAa,GAAG,OAAQ,CAAA;AAC5F;AACA;AACA,8BAAA,EAAgCJ,MAAO,CAAuCJ,qCAAAA,EAAAA,MAAO,CAAQE,MAAAA,EAAAA,WAAW,GAAG,UAAU,GAAGD,SAAS,GAAG,QAAQ,GAAGE,UAAU,GAAG,OAAO,GAAG,SAAU,CAAA;AAChL;AACA,QAAA,CAAS,GACD,EAAG,CAAA;AACX,EAAG,CAAA,CAAA;AAAA,CAAC,CAAA;AACJ;;;;"}

package/components/grid/Grid.d.ts

@@ -0,0 +1,13 @@
+import { GridProps } from './types.js';
+import { Comp } from '../../types/helpers.js';
+import { GridItemProps } from '../grid-item/types.js';
+
+/**
+ * The Grid component.
+ */
+declare const BaseGrid: Comp<GridProps, HTMLDivElement>;
+declare const Grid: Comp<GridProps, HTMLDivElement> & {
+    Item: Comp<GridItemProps, HTMLDivElement>;
+};
+
+export { BaseGrid, Grid };

package/components/grid/Grid.js

@@ -0,0 +1,45 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { StyledGrid } from './styles.js';
+import { GridItem } from '../grid-item/GridItem.js';
+import { useTheme } from '../theme/useTheme.js';
+import { ThemeProvider } from '../theme/context.js';
+
+const _excluded = ["children", "className", "divider", "gap", "theme"];
+const COMPONENT_NAME = 'Grid';
+const CLASSNAME = 'redsift-grid';
+
+/**
+ * The Grid component.
+ */
+const BaseGrid = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      divider,
+      gap,
+      theme: propsTheme
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React__default.createElement(StyledGrid, _extends({}, forwardedProps, {
+    gap: divider ? `${divider.rowGap}px ${divider.colGap}px` : gap,
+    className: classNames(BaseGrid.className, className),
+    ref: ref,
+    $divider: divider,
+    $theme: theme
+  }), children));
+});
+BaseGrid.className = CLASSNAME;
+BaseGrid.displayName = COMPONENT_NAME;
+const Grid = Object.assign(BaseGrid, {
+  Item: GridItem
+});
+
+export { BaseGrid, Grid };
+//# sourceMappingURL=Grid.js.map

package/components/grid/Grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.js","sources":["../../../src/components/grid/Grid.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { StyledGrid } from './styles';\nimport { GridProps } from './types';\nimport { GridItem } from '../grid-item';\nimport { ThemeProvider, useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Grid';\nconst CLASSNAME = 'redsift-grid';\n\n/**\n * The Grid component.\n */\nexport const BaseGrid: Comp<GridProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const { children, className, divider, gap, theme: propsTheme, ...forwardedProps } = props;\n  const theme = useTheme(propsTheme);\n\n  return (\n    <ThemeProvider value={{ theme }}>\n      <StyledGrid\n        {...forwardedProps}\n        gap={divider ? `${divider.rowGap}px ${divider.colGap}px` : gap}\n        className={classNames(BaseGrid.className, className)}\n        ref={ref as RefObject<HTMLDivElement>}\n        $divider={divider}\n        $theme={theme}\n      >\n        {children}\n      </StyledGrid>\n    </ThemeProvider>\n  );\n});\nBaseGrid.className = CLASSNAME;\nBaseGrid.displayName = COMPONENT_NAME;\n\nexport const Grid = Object.assign(BaseGrid, {\n  Item: GridItem,\n});\n"],"names":["COMPONENT_NAME","CLASSNAME","BaseGrid","forwardRef","props","ref","children","className","divider","gap","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","useTheme","React","createElement","ThemeProvider","value","StyledGrid","_extends","rowGap","colGap","classNames","$divider","$theme","displayName","Grid","Object","assign","Item","GridItem"],"mappings":";;;;;;;;;AAQA,MAAMA,cAAc,GAAG,MAAM,CAAA;AAC7B,MAAMC,SAAS,GAAG,cAAc,CAAA;;AAEhC;AACA;AACA;AACO,MAAMC,QAAyC,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAClF,MAAM;MAAEC,QAAQ;MAAEC,SAAS;MAAEC,OAAO;MAAEC,GAAG;AAAEC,MAAAA,KAAK,EAAEC,UAAAA;AAA8B,KAAC,GAAGP,KAAK;AAAxBQ,IAAAA,cAAc,GAAAC,wBAAA,CAAKT,KAAK,EAAAU,SAAA,CAAA,CAAA;AACzF,EAAA,MAAMJ,KAAK,GAAGK,QAAQ,CAACJ,UAAU,CAAC,CAAA;AAElC,EAAA,oBACEK,cAAA,CAAAC,aAAA,CAACC,aAAa,EAAA;AAACC,IAAAA,KAAK,EAAE;AAAET,MAAAA,KAAAA;AAAM,KAAA;GAC5BM,eAAAA,cAAA,CAAAC,aAAA,CAACG,UAAU,EAAAC,QAAA,KACLT,cAAc,EAAA;AAClBH,IAAAA,GAAG,EAAED,OAAO,GAAI,CAAA,EAAEA,OAAO,CAACc,MAAO,CAAA,GAAA,EAAKd,OAAO,CAACe,MAAO,CAAA,EAAA,CAAG,GAAGd,GAAI;IAC/DF,SAAS,EAAEiB,UAAU,CAACtB,QAAQ,CAACK,SAAS,EAAEA,SAAS,CAAE;AACrDF,IAAAA,GAAG,EAAEA,GAAiC;AACtCoB,IAAAA,QAAQ,EAAEjB,OAAQ;AAClBkB,IAAAA,MAAM,EAAEhB,KAAAA;GAEPJ,CAAAA,EAAAA,QACS,CACC,CAAC,CAAA;AAEpB,CAAC,EAAC;AACFJ,QAAQ,CAACK,SAAS,GAAGN,SAAS,CAAA;AAC9BC,QAAQ,CAACyB,WAAW,GAAG3B,cAAc,CAAA;AAE9B,MAAM4B,IAAI,GAAGC,MAAM,CAACC,MAAM,CAAC5B,QAAQ,EAAE;AAC1C6B,EAAAA,IAAI,EAAEC,QAAAA;AACR,CAAC;;;;"}

package/components/grid/styles.js

@@ -0,0 +1,55 @@
+import styled, { css } from 'styled-components';
+import { baseStyling, baseInternalSpacing, baseGrid, baseBorder } from '../shared/styles.js';
+
+/**
+ * Component style.
+ */
+const StyledGrid = styled.div`
+  display: ${_ref => {
+  let {
+    inline
+  } = _ref;
+  return inline ? 'inline-grid' : 'grid';
+}};
+  flex: 1;
+
+  ${baseStyling}
+  ${baseInternalSpacing}
+  ${baseGrid}
+  ${baseBorder}
+
+  ${_ref2 => {
+  let {
+    $divider
+  } = _ref2;
+  return $divider ? css`
+          overflow: hidden;
+          > .redsift-grid-item:not(:empty) {
+            position: relative;
+
+            ::before {
+              content: '';
+              position: absolute;
+              background-color: var(--redsift-color-neutral-light-grey);
+              inline-size: 1px;
+              block-size: 100%;
+              inset-inline-start: calc(${Math.max(1, $divider.colGap / 2)}px * -1);
+            }
+
+            ::after {
+              content: '';
+              position: absolute;
+              background-color: var(--redsift-color-neutral-light-grey);
+              inline-size: 200vw;
+              block-size: 1px;
+              inset-inline-start: -100vw;
+              inset-block-start: calc(${Math.max(1, $divider.rowGap / 2)}px * -1);
+              z-index: 0;
+            }
+          }
+        ` : '';
+}}
+`;
+
+export { StyledGrid };
+//# sourceMappingURL=styles.js.map

package/components/grid/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/grid/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { baseBorder, baseGrid, baseInternalSpacing, baseStyling } from '../shared';\nimport { StyledGridProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledGrid = styled.div<StyledGridProps>`\n  display: ${({ inline }) => (inline ? 'inline-grid' : 'grid')};\n  flex: 1;\n\n  ${baseStyling}\n  ${baseInternalSpacing}\n  ${baseGrid}\n  ${baseBorder}\n\n  ${({ $divider }) =>\n    $divider\n      ? css`\n          overflow: hidden;\n          > .redsift-grid-item:not(:empty) {\n            position: relative;\n\n            ::before {\n              content: '';\n              position: absolute;\n              background-color: var(--redsift-color-neutral-light-grey);\n              inline-size: 1px;\n              block-size: 100%;\n              inset-inline-start: calc(${Math.max(1, $divider.colGap / 2)}px * -1);\n            }\n\n            ::after {\n              content: '';\n              position: absolute;\n              background-color: var(--redsift-color-neutral-light-grey);\n              inline-size: 200vw;\n              block-size: 1px;\n              inset-inline-start: -100vw;\n              inset-block-start: calc(${Math.max(1, $divider.rowGap / 2)}px * -1);\n              z-index: 0;\n            }\n          }\n        `\n      : ''}\n`;\n"],"names":["StyledGrid","styled","div","_ref","inline","baseStyling","baseInternalSpacing","baseGrid","baseBorder","_ref2","$divider","css","Math","max","colGap","rowGap"],"mappings":";;;AAIA;AACA;AACA;AACaA,MAAAA,UAAU,GAAGC,MAAM,CAACC,GAAqB,CAAA;AACtD,WAAA,EAAaC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAD,IAAA,CAAA;AAAA,EAAA,OAAMC,MAAM,GAAG,aAAa,GAAG,MAAM,CAAA;AAAA,CAAE,CAAA;AAC/D;AACA;AACA,EAAA,EAAIC,WAAY,CAAA;AAChB,EAAA,EAAIC,mBAAoB,CAAA;AACxB,EAAA,EAAIC,QAAS,CAAA;AACb,EAAA,EAAIC,UAAW,CAAA;AACf;AACA,EAAA,EAAIC,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,QAAAA;AAAS,GAAC,GAAAD,KAAA,CAAA;EAAA,OACbC,QAAQ,GACJC,GAAI,CAAA;AACZ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uCAAyCC,EAAAA,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEH,QAAQ,CAACI,MAAM,GAAG,CAAC,CAAE,CAAA;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sCAAwCF,EAAAA,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEH,QAAQ,CAACK,MAAM,GAAG,CAAC,CAAE,CAAA;AACzE;AACA;AACA;AACA,QAAA,CAAS,GACD,EAAE,CAAA;AAAA,CAAC,CAAA;AACX;;;;"}

package/components/grid/types.d.ts

@@ -0,0 +1,22 @@
+import { ComponentProps } from 'react';
+import { StylingProps, InternalSpacingProps, GridLayoutProps, BorderProps } from '../../types/styles.js';
+import { Theme } from '../../types/colors.js';
+
+/**
+ * Component props.
+ */
+interface GridProps extends ComponentProps<'div'>, StylingProps, InternalSpacingProps, GridLayoutProps, BorderProps {
+    /** Whether the grid has divider or not. The number of pixels defining the gap between columns and rows is mandatory. This replaces the grid gap property. */
+    divider?: {
+        colGap: number;
+        rowGap: number;
+    };
+    /** Theme. */
+    theme?: Theme;
+}
+type StyledGridProps = GridProps & {
+    $divider: GridProps['divider'];
+    $theme: GridProps['theme'];
+};
+
+export { GridProps, StyledGridProps };

package/components/grid-item/GridItem.d.ts

@@ -0,0 +1,9 @@
+import { GridItemProps } from './types.js';
+import { Comp } from '../../types/helpers.js';
+
+/**
+ * The GridItem component.
+ */
+declare const GridItem: Comp<GridItemProps, HTMLDivElement>;
+
+export { GridItem };

package/components/grid-item/GridItem.js

@@ -0,0 +1,28 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { StyledGridItem } from './styles.js';
+
+const _excluded = ["children", "className"];
+const COMPONENT_NAME = 'GridItem';
+const CLASSNAME = 'redsift-grid-item';
+
+/**
+ * The GridItem component.
+ */
+const GridItem = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React__default.createElement(StyledGridItem, _extends({}, forwardedProps, {
+    className: classNames(GridItem.className, className),
+    ref: ref
+  }), children);
+});
+GridItem.className = CLASSNAME;
+GridItem.displayName = COMPONENT_NAME;
+
+export { GridItem };
+//# sourceMappingURL=GridItem.js.map

package/components/grid-item/GridItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridItem.js","sources":["../../../src/components/grid-item/GridItem.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { StyledGridItem } from './styles';\nimport { GridItemProps } from './types';\n\nconst COMPONENT_NAME = 'GridItem';\nconst CLASSNAME = 'redsift-grid-item';\n\n/**\n * The GridItem component.\n */\nexport const GridItem: Comp<GridItemProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const { children, className, ...forwardedProps } = props;\n\n  return (\n    <StyledGridItem\n      {...forwardedProps}\n      className={classNames(GridItem.className, className)}\n      ref={ref as RefObject<HTMLDivElement>}\n    >\n      {children}\n    </StyledGridItem>\n  );\n});\nGridItem.className = CLASSNAME;\nGridItem.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","GridItem","forwardRef","props","ref","children","className","forwardedProps","_objectWithoutProperties","_excluded","React","createElement","StyledGridItem","_extends","classNames","displayName"],"mappings":";;;;;;AAMA,MAAMA,cAAc,GAAG,UAAU,CAAA;AACjC,MAAMC,SAAS,GAAG,mBAAmB,CAAA;;AAErC;AACA;AACA;AACO,MAAMC,QAA6C,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACtF,MAAM;MAAEC,QAAQ;AAAEC,MAAAA,SAAAA;AAA6B,KAAC,GAAGH,KAAK;AAAxBI,IAAAA,cAAc,GAAAC,wBAAA,CAAKL,KAAK,EAAAM,SAAA,CAAA,CAAA;EAExD,oBACEC,cAAA,CAAAC,aAAA,CAACC,cAAc,EAAAC,QAAA,KACTN,cAAc,EAAA;IAClBD,SAAS,EAAEQ,UAAU,CAACb,QAAQ,CAACK,SAAS,EAAEA,SAAS,CAAE;AACrDF,IAAAA,GAAG,EAAEA,GAAAA;AAAiC,GAAA,CAAA,EAErCC,QACa,CAAC,CAAA;AAErB,CAAC,EAAC;AACFJ,QAAQ,CAACK,SAAS,GAAGN,SAAS,CAAA;AAC9BC,QAAQ,CAACc,WAAW,GAAGhB,cAAc;;;;"}

package/components/grid-item/styles.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+import { baseStyling, baseInternalSpacing, baseBorder } from '../shared/styles.js';
+
+/**
+ * Component style.
+ */
+const StyledGridItem = styled.div`
+  display: inherit;
+
+  ${baseStyling}
+  ${baseInternalSpacing}
+  ${baseBorder}
+`;
+
+export { StyledGridItem };
+//# sourceMappingURL=styles.js.map

package/components/grid-item/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/grid-item/styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { baseBorder, baseInternalSpacing, baseStyling } from '../shared';\nimport { StyledGridItemProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledGridItem = styled.div<StyledGridItemProps>`\n  display: inherit;\n\n  ${baseStyling}\n  ${baseInternalSpacing}\n  ${baseBorder}\n`;\n"],"names":["StyledGridItem","styled","div","baseStyling","baseInternalSpacing","baseBorder"],"mappings":";;;AAIA;AACA;AACA;AACaA,MAAAA,cAAc,GAAGC,MAAM,CAACC,GAAyB,CAAA;AAC9D;AACA;AACA,EAAA,EAAIC,WAAY,CAAA;AAChB,EAAA,EAAIC,mBAAoB,CAAA;AACxB,EAAA,EAAIC,UAAW,CAAA;AACf;;;;"}

package/components/grid-item/types.d.ts

@@ -0,0 +1,11 @@
+import { ComponentProps } from 'react';
+import { StylingProps, InternalSpacingProps, BorderProps } from '../../types/styles.js';
+
+/**
+ * Component props.
+ */
+interface GridItemProps extends ComponentProps<'div'>, StylingProps, InternalSpacingProps, BorderProps {
+}
+type StyledGridItemProps = GridItemProps;
+
+export { GridItemProps, StyledGridItemProps };

package/components/heading/Heading.d.ts

@@ -0,0 +1,9 @@
+import { HeadingProps } from './types.js';
+import { Comp } from '../../types/helpers.js';
+
+/**
+ * The Heading component.
+ */
+declare const Heading: Comp<HeadingProps, HTMLDivElement>;
+
+export { Heading };

package/components/heading/Heading.js

@@ -0,0 +1,50 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { StyledHeading } from './styles.js';
+import { FontFamily } from '../../types/fonts.js';
+import { useTheme } from '../theme/useTheme.js';
+
+const _excluded = ["as", "children", "className", "color", "fontFamily", "fontSize", "fontWeight", "lineHeight", "noWrap", "theme", "variant"];
+const COMPONENT_NAME = 'Heading';
+const CLASSNAME = 'redsift-heading';
+
+/**
+ * The Heading component.
+ */
+const Heading = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      as,
+      children,
+      className,
+      color,
+      fontFamily = FontFamily.poppins,
+      fontSize,
+      fontWeight,
+      lineHeight,
+      noWrap,
+      theme: propsTheme,
+      variant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  return /*#__PURE__*/React__default.createElement(StyledHeading, _extends({
+    as: as
+  }, forwardedProps, {
+    className: classNames(Heading.className, className),
+    ref: ref,
+    $noWrap: noWrap,
+    $theme: theme,
+    $color: color,
+    $fontFamily: fontFamily,
+    $fontSize: fontSize,
+    $fontWeight: fontWeight,
+    $lineHeight: lineHeight,
+    $variant: variant ? variant : as === 'span' ? 'body' : as
+  }), children);
+});
+Heading.className = CLASSNAME;
+Heading.displayName = COMPONENT_NAME;
+
+export { Heading };
+//# sourceMappingURL=Heading.js.map