cross-country 1.2.25 → 1.2.26

package/README.md

@@ -1,6 +1,6 @@
 # cross-country
 
-> an atomic react components for personal metrics and creating courses
+> an atomic react component library for personal metrics, simulations, and solo forest bathers
 
 [![NPM](https://img.shields.io/npm/v/cross-country.svg)](https://www.npmjs.com/package/cross-country) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
@@ -37,7 +37,21 @@ import { Column, Row, Paragraph, Table, Chart, Bento } from "cross-country"
 
 For this third-party library to work within NextJS, there is one change required to import it's single css bundle.
 
-Edit the \_app.js file to:
+#### New App Strategy
+
+Edit the app\layout.tsx file to:
+
+```
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+import "cross-country/dist/bundle.css";
+import { ScoutProviders } from "./providers/providers";
+```
+
+#### Old Pages Strategy
+
+Edit the pages\_app.js file to:
 
 ```
 import type { Metadata } from "next";
@@ -85,6 +99,11 @@ or
 npm run new -- --type molecules --path component-name-here/sub-component-name-her
 ```
 
+You can also scaffold only a story:
+```
+npm run new:story -- --type molecules --path policies/privacy-policy
+```
+
 This will automatically scaffold the component directory creating all the files you will need including the tests and stories folders. It saved you at least 5 minutes if not especially around configuring the story; no more frustrating CSF errors!
 
 ## Unsplash Config
@@ -99,7 +118,7 @@ export const privateConfig = {
 
 ## Storybook
 
-While creating compoents, you can use Storybook
+While creating components, you can use Storybook
 
 ```
 npm run storybook

package/dist/{bolt-BLbYxvOV.js → bolt-CUzvRxsQ.js}

@@ -7,31 +7,13 @@ import "./react-spring_web.modern-ClBJWBW2.js";
 import "./components/atoms/group/group.js";
 import "./components/molecules/wrapper/wrapper.js";
 import "./components/molecules/wallpaper/wallpaper.js";
-import "./index-BTF1caLu.js";
-import "./models/PortholeBranchModel.js";
-import "./models/ActorModel.js";
-import "./models/BookModel.js";
-import "./models/ChapterModel.js";
-import "./models/PlayerModel.js";
-import "./models/EnemyModel.js";
-import "./models/ItemModel.js";
-import "./models/LeafModel.js";
-import "./models/LevelModel.js";
-import "./models/NeutralModel.js";
-import "./models/NPCModel.js";
-import "./models/SettingsModel.js";
-import "./models/ShieldModel.js";
-import "./models/TileModel.js";
-import "./models/UserModel.js";
-import "./models/WeaponModel.js";
-import "./models/WorldModel.js";
-import "./models/TreeModel.js";
+import "./index-BfWW2ojg.js";
 import "./components/organisms/registration/registration-machine.js";
 import "./transform-DGclBZTD.js";
 import "./components/organisms/survey/question/edit/edit-option-list/edit-option-list-machine.js";
 import "./index.esm-DI2C2CaF.js";
 import "./react-masonry-css.module-CJ43viV7.js";
-const i = "data:image/svg+xml,%3csvg%20width='220'%20height='404'%20viewBox='0%200%20220%20404'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M158%200H44L0%20168H82L24%20404L220%20104H112L158%200Z'%20fill='%23E3D597'/%3e%3c/svg%3e", F = () => /* @__PURE__ */ t(o, { a11y: "lightening bolt", url: i, width: 30, height: 30 });
+const i = "data:image/svg+xml,%3csvg%20width='220'%20height='404'%20viewBox='0%200%20220%20404'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M158%200H44L0%20168H82L24%20404L220%20104H112L158%200Z'%20fill='%23E3D597'/%3e%3c/svg%3e", f = () => /* @__PURE__ */ t(o, { a11y: "lightening bolt", url: i, width: 30, height: 30 });
 export {
-  F as B
+  f as B
 };

package/dist/bundle.css

@@ -1,14 +1,12 @@
 ._logo_ibbzu_1 {
     display: flex;
 }
-._column_1gy92_1 {
+._column_183cs_1 {
   display: flex;
   position: relative;
   flex-direction: column;
-  margin: 0px;
-  padding: 26px;
-  width: 100%;
-  height: 100%;
+  margin: 8px 0px;
+  padding: 16px;
 }
 
 ._checkbox_1npl1_1 {
@@ -182,10 +180,9 @@
   color: rgb(100, 100, 100);
   cursor: not-allowed;
 }
-._row_197sm_1 {
+._row_1osly_1 {
   display: flex;
   flex-direction: row;
-  flex-wrap: wrap;
   align-items: center;
   align-content: center;
 }
@@ -283,18 +280,31 @@
   display: flex;
   flex-direction: column;
 }
-._textInput_1w52p_1 {
+._textInput_nvupt_1 {
   border: 1px solid #ccc;
   cursor: text;
-  padding: 10px;
+  padding: 8px;
   border-radius: 5px;
   outline: none;
+  margin: 8px 0px;
 }
 
-._textInput_lmpv2_1 {
-  padding: 8px;
+._textInput_b6buf_1 {
+  padding: 12px;
   margin: 4px;
-  resize: none;
+  resize: vertical;
+  min-height: 120px; /* Approximately 5 rows of text */
+  width: 100%;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 14px;
+  line-height: 1.5;
+  transition: border-color 0.2s ease-in-out;
+  max-width: 700px;
+}
+
+._textInput_b6buf_1:focus {
+  outline: none;
 }
 
 ._Span_1om91_1 {
@@ -1109,25 +1119,25 @@ li._listicle_wcjwf_9 {
   font-size: 12px;
 }
 
-._registration_zk983_1 {
+._registration_rfpnl_1 {
   display: flex;
   flex-direction: column;
   position: relative;
 }
 
-._sendButton_zk983_7 {
+._sendButton_rfpnl_7 {
   justify-content: flex-end;
   background-color: var(--primary) !important;
   margin-top: 16px;
 }
 
-._icon_zk983_13 {
+._icon_rfpnl_13 {
   justify-content: flex-end;
   background-color: #999;
   width: 40px !important;
 }
 
-._fieldRow_zk983_19 {
+._fieldRow_rfpnl_19 {
   display: flex;
   justify-content: flex-end;
   height: 40px;
@@ -1135,8 +1145,9 @@ li._listicle_wcjwf_9 {
   margin: 4px;
 }
 
-._passwordStrengthHelperContainer_zk983_27 {
+._passwordStrengthHelperContainer_rfpnl_27 {
   position: absolute;
+  width: 116px;
   border: 1px solid #666;
   border-radius: 8px;
   border-radius: 8px;
@@ -1145,12 +1156,12 @@ li._listicle_wcjwf_9 {
   padding: 16px;
   margin: 0;
   padding: 16px;
-  top: 22px;
-  left: 150px;
+  top: 48px;
+  left: 370px;
   height: 117px;
 }
 
-._passwordStrengthHelperContainer_zk983_27:after {
+._passwordStrengthHelperContainer_rfpnl_27:after {
   content: "";
   position: absolute;
   top: 150px;
@@ -1164,7 +1175,7 @@ li._listicle_wcjwf_9 {
   border-right: 10px solid transparent;
 }
 
-._passwordHelperIcon_zk983_56 {
+._passwordHelperIcon_rfpnl_57 {
   align-items: center;
   justify-content: center;
   margin-bottom: 8px !important;
@@ -1284,17 +1295,18 @@ li._listicle_wcjwf_9 {
     padding: 0px;
     margin: 0px;
 }
-._actor_2k764_1 {
-  justify-content: center;
-  align-items: center;
-  display: flex;
-  background-color: transparent;
-  width: 50px;
-  height: 80px;
-  margin: 0px;
-  padding: 0px;
-  position: absolute;
-}
+._actor_17tui_1 {
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    background-color: transparent;
+    width: 50px;
+    height: 80px;
+    margin: 0px;
+    padding: 0px;
+    position: absolute;
+  }
+  
 ._stage_dmo67_1 {
   position: absolute;
   z-index: 1;
@@ -1304,6 +1316,23 @@ li._listicle_wcjwf_9 {
   height: 200px; 
 }
 
+._actorSpeech_1l7lp_2 {
+  z-index: 2;
+  width: 400px;
+  height: auto;
+  border-radius: 8px;
+  background-color: white;
+  margin: 0px;
+  padding: 8px;
+}
+
+._actorParagraph_1l7lp_12 {
+  margin: 0px;
+  padding: 8px;
+  font-size: 16px;
+  color: black;
+}
+
 ._tileGrid_tpkps_2 {
   transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
 }

package/dist/components/atoms/column/column.js

@@ -1,23 +1,23 @@
-import { jsx as a } from "react/jsx-runtime";
-import { forwardRef as c } from "react";
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as a } from "react";
 import { c as u } from "../../../clsx.m-BMVuQnLY.js";
-const f = "_column_1gy92_1", o = {
+const f = "_column_183cs_1", o = {
   column: f
-}, x = c(
+}, x = a(
   ({
     children: l,
     hasBackground: e = !1,
     hasChildrenCentered: d = !1,
     backgroundColor: _ = "#eee",
     dataTestId: n = "column",
-    customStyle: t = null,
-    customClass: r = "",
-    ...s
-  }, m) => /* @__PURE__ */ a(
+    customStyle: s = null,
+    customClass: t = "",
+    ...r
+  }, m) => /* @__PURE__ */ c(
     "div",
     {
       ref: m,
-      ...s,
+      ...r,
       "data-testid": n,
       className: u(
         o.column,
@@ -25,9 +25,9 @@ const f = "_column_1gy92_1", o = {
           [o.column__opaque]: e,
           [o.column__transparent]: e
         },
-        r
+        t
       ),
-      style: { ...t },
+      style: { ...s },
       children: l
     }
   )

package/dist/components/atoms/radio/radio.js

@@ -1,16 +1,15 @@
-import { jsx as i } from "react/jsx-runtime";
+import { jsx as s } from "react/jsx-runtime";
 import l from "react";
 import { g as n } from "../../../mobile-detect-CWVWWCSg.js";
-import "../../../models/PortholeBranchModel.js";
-const u = "_radio_1o14v_1", _ = "_radioSelected_1o14v_14", v = "_radioGesture_1o14v_42", m = "_radioGestureSelected_1o14v_55", s = {
+const u = "_radio_1o14v_1", _ = "_radioSelected_1o14v_14", v = "_radioGesture_1o14v_42", m = "_radioGestureSelected_1o14v_55", i = {
   radio: u,
   radioSelected: _,
   radioGesture: v,
   radioGestureSelected: m
-}, p = n(), f = p ? "mobile" : "desktop", k = l.createContext({ detectedDevice: f }), y = () => k._currentValue, $ = ({ isSelected: o, id: e, onChange: t, tabIndex: r, register: c = null }) => {
+}, p = n(), f = p ? "mobile" : "desktop", k = l.createContext({ detectedDevice: f }), y = () => k._currentValue, x = ({ isSelected: o, id: e, onChange: t, tabIndex: r, register: c = null }) => {
   y();
-  const a = "radio", d = o ? s[`${a}Selected`] : s[`${a}`];
-  return c ? /* @__PURE__ */ i(
+  const a = "radio", d = o ? i[`${a}Selected`] : i[`${a}`];
+  return c ? /* @__PURE__ */ s(
     "div",
     {
       className: d,
@@ -24,7 +23,7 @@ const u = "_radio_1o14v_1", _ = "_radioSelected_1o14v_14", v = "_radioGesture_1o
       tabIndex: r,
       ...c(`${e}`)
     }
-  ) : /* @__PURE__ */ i(
+  ) : /* @__PURE__ */ s(
     "div",
     {
       className: d,
@@ -40,5 +39,5 @@ const u = "_radio_1o14v_1", _ = "_radioSelected_1o14v_14", v = "_radioGesture_1o
   );
 };
 export {
-  $ as default
+  x as default
 };

package/dist/components/atoms/row/row.js

@@ -1,8 +1,8 @@
-import { forwardRef as c, createElement as l } from "react";
-import { c as m } from "../../../clsx.m-BMVuQnLY.js";
-const n = "_row_197sm_1", w = {
-  row: n
-}, p = c(
+import { forwardRef as l, createElement as c } from "react";
+import { c as n } from "../../../clsx.m-BMVuQnLY.js";
+const m = "_row_1osly_1", w = {
+  row: m
+}, y = l(
   ({
     id: e,
     children: r,
@@ -10,12 +10,12 @@ const n = "_row_197sm_1", w = {
     customClass: o = "",
     customStyle: t = {},
     ...s
-  }, a) => /* @__PURE__ */ l(
+  }, a) => /* @__PURE__ */ c(
     "div",
     {
       ...s,
       key: e,
-      className: m(w.row, o),
+      className: n(w.row, o),
       style: t,
       ref: a
     },
@@ -23,5 +23,5 @@ const n = "_row_197sm_1", w = {
   )
 );
 export {
-  p as default
+  y as default
 };

package/dist/components/atoms/text/headline/headline.js

@@ -0,0 +1,25 @@
+import { jsx as r } from "react/jsx-runtime";
+import { c as i } from "../../../../clsx.m-BMVuQnLY.js";
+const l = "_headline_1jy9u_1", c = "_warIsOver_1jy9u_13", _ = "_ifYouWant_1jy9u_22", d = {
+  headline: l,
+  warIsOver: c,
+  ifYouWant: _
+}, h = ({
+  color: e = "",
+  text: s,
+  children: a,
+  customStyle: n = {},
+  customClass: t = "",
+  ...o
+}) => /* @__PURE__ */ r(
+  "h1",
+  {
+    ...o,
+    className: i(d.headline, t),
+    style: { color: e, ...n },
+    children: s || a
+  }
+);
+export {
+  h as default
+};

package/dist/components/atoms/text/headline/index.js

@@ -0,0 +1,4 @@
+import { default as o } from "./headline.js";
+export {
+  o as default
+};

package/dist/components/atoms/text/input/__stories__/perplexity-service.js

@@ -1,14 +1,14 @@
 const s = {
   UNSPLASH_API_KEY: "",
-  RAPID_API_KEY: "64376730e2msh02a5a75e9e45d6bp1fbfbfjsnb455679ebdd9",
-  PERPLEXITY_API_KEY: "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"
-}, i = s == null ? void 0 : s.PERPLEXITY_API_KEY, P = async (n, o = 0.6, r = null) => {
+  PERPLEXITY_API_KEY: "",
+  RAPID_API_KEY: ""
+}, p = s == null ? void 0 : s.PERPLEXITY_API_KEY, E = async (n, o = 0.6, r = null) => {
   const c = "https://api.perplexity.ai/chat/completions", a = {
     Accept: "application/json",
     "Content-Type": "application/json",
-    Authorization: `Bearer ${i}`
+    Authorization: `Bearer ${p}`
     // Fetch from your project's environment variables
-  }, p = {
+  }, i = {
     model: "pplx-7b-online",
     stream: !1,
     max_tokens: 80,
@@ -27,7 +27,7 @@ const s = {
   }, e = await (await fetch(c, {
     method: "POST",
     headers: a,
-    body: JSON.stringify(p)
+    body: JSON.stringify(i)
   })).json();
   if (e != null && e.choices && (e == null ? void 0 : e.choices.length) > 0) {
     const t = e == null ? void 0 : e.choices[0].message;
@@ -37,5 +37,5 @@ const s = {
   return "";
 };
 export {
-  P as default
+  E as default
 };

package/dist/components/atoms/text/input/state-machine-text-input.js

@@ -2,7 +2,7 @@ import { jsx as r } from "react/jsx-runtime";
 import { useMemo as y } from "react";
 import { a as b } from "../../../../xstate-react.esm-DWdE0_Ay.js";
 import { inputTextMachine as v } from "./input-text-machine.js";
-import { s as u } from "../../../../text-input.module-BJmXef0w.js";
+import { s as u } from "../../../../text-input.module-B9K-DcNA.js";
 import { c as o } from "../../../../clsx.m-BMVuQnLY.js";
 const j = ({
   actorOptions: x,

package/dist/components/atoms/text/input/text-input.js

@@ -1,49 +1,53 @@
-import { jsx as e, Fragment as g } from "react/jsx-runtime";
-import { s as p } from "../../../../text-input.module-BJmXef0w.js";
-import { c as x } from "../../../../clsx.m-BMVuQnLY.js";
-const h = ({
-  onTextChange: i,
+import { jsx as n, Fragment as y } from "react/jsx-runtime";
+import { s as f } from "../../../../text-input.module-B9K-DcNA.js";
+import { c as o } from "../../../../clsx.m-BMVuQnLY.js";
+const j = ({
+  onTextChange: a,
   value: c,
   customClass: r = "",
   customStyle: s = {},
   placeholder: l = "enter your text",
-  type: u = "text",
-  isDisabled: f = !1,
-  data: n = null,
-  register: o = null,
-  defaultValue: t = null,
-  onFocus: v,
-  onBlur: y,
-  ...a
-}) => o ? /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(
+  type: m = "text",
+  isDisabled: I = !1,
+  data: t = null,
+  register: p = null,
+  defaultValue: e = null,
+  onFocus: u,
+  onBlur: x,
+  ...g
+}) => p ? /* @__PURE__ */ n(y, { children: /* @__PURE__ */ n(
   "input",
   {
-    type: u,
-    disabled: f,
-    className: x(p.textInput, r),
+    type: m,
+    disabled: I,
+    className: o(f.textInput, r),
     style: s,
     placeholder: l,
-    ...o(n == null ? void 0 : n.name)
+    onFocus: u,
+    onBlur: x,
+    ...p(t == null ? void 0 : t.name)
   }
-) }) : /* @__PURE__ */ e(
+) }) : /* @__PURE__ */ n(
   "input",
   {
-    ...a,
-    type: u,
-    className: x(p.textInput, r),
-    onChange: (m) => {
-      m.preventDefault();
+    ...g,
+    type: m,
+    className: o(f.textInput, r),
+    onChange: (i) => {
+      i.preventDefault();
       const {
-        target: { value: I }
-      } = m;
-      return i(I);
+        target: { value: v }
+      } = i;
+      return a(v);
     },
-    ...!t && { value: c },
+    onFocus: u,
+    onBlur: x,
+    ...!e && { value: c },
     style: s,
     placeholder: l,
-    ...t && { defaultValue: t }
+    ...e && { defaultValue: e }
   }
 );
 export {
-  h as default
+  j as default
 };

package/dist/components/atoms/text/paragraph/paragraph.js

@@ -1,8 +1,20 @@
-import { jsx as s } from "react/jsx-runtime";
-import { c as t } from "../../../../clsx.m-BMVuQnLY.js";
-const o = "_paragraph_1mpth_1", c = {
-  paragraph: o
-}, e = ({ children: a, customClass: r = "", customStyle: p = {} }) => /* @__PURE__ */ s("p", { className: t(c.paragraph, r), style: p, children: a });
+import { jsx as t } from "react/jsx-runtime";
+import { c as o } from "../../../../clsx.m-BMVuQnLY.js";
+const c = "_paragraph_1mpth_1", h = {
+  paragraph: c
+}, g = ({
+  children: a,
+  customClass: r = "",
+  customStyle: p = {},
+  maxWidth: s = 600
+}) => /* @__PURE__ */ t(
+  "p",
+  {
+    className: o(h.paragraph, r),
+    style: { maxWidth: s, ...p },
+    children: a
+  }
+);
 export {
-  e as default
+  g as default
 };