@theroutingcompany/components 0.0.24-alpha.3 → 0.0.24-alpha.5

package/README.md

@@ -4,14 +4,15 @@ View the [StoryBook](https://6392297e45ccab79e466ee19-iytnzjepcr.chromatic.com/)
 
 ## Publishing
 
-First double check if everything that needs to exported is added to the `components/index.js` or `helpers/index.js`.
+First double check if everything that needs to exported is added to the `components/index.js` or `helpers/index.js` and run `npm run build` before.
 
 ### Public
 
-1. Bump version number `npm version patch --no-git-tag-version`
-2. `npm publish --access public`.
+0. Get an approval on the relevant PR.
+2. Bump version number `npm version patch --no-git-tag-version`
+3. `npm publish --access public`.
     * Usually adding `--dry-run` first is a good idea for double checking if the version number is correct.
-3. Enter the 2FA code for npm
+4. Enter the 2FA code for npm
 
 ### Prerelease
 
@@ -38,7 +39,7 @@ Styling is done with [styled-components](https://styled-components.com/), a CSS-
 The approach is roughly:
 
 1. A "base" styled component with shared styles: `ButtonBase`
-2. Each variant in the Figma designs is a styled component 'extending' the base component: ` const PrimaryButton = styled(ButtonBase)``   `
+2. Each variant in the Figma designs is a styled component 'extending' the base component: ` const PrimaryButton = styled(ButtonBase)`
 
 - All variant are placed in an object (a map but not a `Map()`)
 - The exported takes a `variant` prop and uses it to get the right styled component from the object map
@@ -47,7 +48,6 @@ The approach is roughly:
 
 This component library is very much a work in progress and has many gaps.
 
-- A component that exposes the spacing design tokens in an easy-to-use, type-safe way. Usually this is called `Box`.
 - Far from all components in the Components Figma have been implemented
 - For existing component, we need more documentation. Often, design systems include a "Guidelines" or "When to Use" section" on the component doc page.
 - Tests!
@@ -134,7 +134,9 @@ Also see [Most of the time, it’s a good idea to use React context for componen
 The context should only be consumed within the library component and not exported.
 
 <figure>
-> [T]he context should be kept internal to the library. Allowing the naked context to be imported and handled by applications creates a brittle coupling that will easily break in future upgrades.
+<blockquote>
+[T]he context should be kept internal to the library. Allowing the naked context to be imported and handled by applications creates a brittle coupling that will easily break in future upgrades.
+</blockquote>
 <figcaption>
   <cite>
     <a href="https://www.gabe.pizza/notes-on-component-libraries/#most-of-the-time-its-a-good-idea-to-use-react-context-for-components-that-depend-on-each-other">Notes on maintaining an internal React component library

package/dist/trc-components.es.js

@@ -10789,7 +10789,6 @@ const a3 = Rb, i3 = Q7, s3 = t3, l3 = r3, c3 = o3, d3 = Me`
 `, TA = () => /* @__PURE__ */ S(ro, { asChild: !0, children: /* @__PURE__ */ S(Yn, { label: "Close drawer", variant: "inverse", children: /* @__PURE__ */ S(lp, {}) }) }), f3 = A(jl)`
   width: var(--drawer-width);
   z-index: 3;
-  width: 540px;
   background-color: white;
   padding: 24px;
   margin: 16px;
@@ -10799,7 +10798,7 @@ const a3 = Rb, i3 = Q7, s3 = t3, l3 = r3, c3 = o3, d3 = Me`
   box-shadow: ${m.elevation_static_high};
   border-radius: ${m.border_radius_800};
   scrollbar-gutter: stable;
-  overflow: visible;
+  overflow-y: auto;
 
   @media (prefers-reduced-motion: no-preference) {
     &[data-state='open'] {
@@ -10811,6 +10810,8 @@ const a3 = Rb, i3 = Q7, s3 = t3, l3 = r3, c3 = o3, d3 = Me`
     }
   }
 `, CA = A(Ul)`
+  display: flex;
+  column-gap: ${m.spacing_200};
   font-family: ${m.font_family_sans};
   font-size: ${m.font_size_100};
   font-style: normal;
@@ -10831,14 +10832,11 @@ const a3 = Rb, i3 = Q7, s3 = t3, l3 = r3, c3 = o3, d3 = Me`
   medium: 540,
   large: 900
 };
-function RA({ children: e, size: t = "medium" }) {
-  const r = m3[t];
-  return /* @__PURE__ */ S(Vl, { style: { "--drawer-width": r }, children: /* @__PURE__ */ S(f3, { onInteractOutside: (n) => n.preventDefault(), children: e }) });
+function RA({ children: e, size: t = "medium", ...r }) {
+  const n = m3[t];
+  return /* @__PURE__ */ S(Vl, { ...r, style: { "--drawer-width": n }, children: /* @__PURE__ */ S(f3, { onInteractOutside: (o) => o.preventDefault(), children: e }) });
 }
-const IA = ({
-  children: e,
-  ...t
-}) => /* @__PURE__ */ S(a3, { ...t, children: e }), AA = A(i3)`
+const IA = a3, AA = A(i3)`
   padding-top: 12px;
   border-bottom: 1px solid ${m.color_divider_standard};
 
@@ -10859,7 +10857,8 @@ const IA = ({
   padding: 10px;
   line-height: 0;
 
-  transition: background-color 200ms ease-out, transform 300ms cubic-bezier(0.87, 0, 0.13, 1);
+  transition: background-color 200ms ease-out,
+    transform 300ms cubic-bezier(0.87, 0, 0.13, 1);
 
   box-shadow: var(--icon-elevation, none);
   background: var(