@edvisor/product-language 0.3.0 → 0.3.1

package/src/lib/components/icon/icon.tsx

@@ -1,181 +0,0 @@
-import { FC, is } from '@helpers'
-import styled from 'styled-components'
-import { Icons } from '@foundations'
-import { IconListMajor, IconListMinor } from './icon-list'
-import { HTMLAttributes, ReactElement } from 'react'
-import { LineHeight } from 'foundations/typography/constants'
-
-interface IconProperties extends HTMLAttributes<HTMLElement> {
-  role?: string;
-  icon: ReactElement;
-  minor?: boolean;
-  className?: string;
-}
-
-const BoundingBox = styled.i`
-  width: ${LineHeight.b};
-  height: ${LineHeight.b};
-  flex: none;
-  order: 0;
-  flex-grow: 0;
-  position: relative;
-`
-
-const Svg = styled.svg<{ props: IconProperties}>`
-  position: absolute;
-  width: ${({ props }) => is(props.minor) ? '17px' : LineHeight.b};
-  height: ${({ props }) => is(props.minor) ? '17px' : LineHeight.b};
-  fill: none;
-  top: calc(50% - ${({ props }) => is(props.minor) ? '17px' : LineHeight.b}/2);
-  left: calc(50% - ${({ props }) => is(props.minor) ? '17px' : LineHeight.b}/2);
-  path {
-    fill: ${Icons.Default};
-  }
-`
-
-Svg.defaultProps = {
-  viewBox: '0 0 20 20',
-  role: 'icon',
-  'aria-label': 'icon',
-}
-
-const ProductLanguageIcon: FC<IconProperties> = (props) => (
-  <BoundingBox {...props}>
-    <Svg
-      props={props}>
-      {props.icon}
-    </Svg>
-  </BoundingBox>
-)
-
-export const Icon = {
-  ArrowsUpDownLeftRight: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['arrows-up-down-left-right']} />,
-  BadgePercent: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['badge-percent']} />,
-  Bell: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['bell']} />,
-  Book: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['book']} />,
-  BoxArchive: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['box-archive']} />,
-  BuildingColumns: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['building-columns']} />,
-  Building: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['building']} />,
-  BullseyeArrow: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['bullseye-arrow']} />,
-  Calculator: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['calculator']} />,
-  CalendarDay: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['calendar-day']} />,
-  ChartLine: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['chart-line']} />,
-  Check: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['check']}  />,
-  CircleCheck: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['circle-check']} />,
-  CircleInfo: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['circle-info']} />,
-  CircleQuestion: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['circle-question']} />,
-  ClipboardCheck: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['clipboard-check']} />,
-  CommentLines: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['comment-lines']} />,
-  DiamondExclamation: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['diamond-exclamation']} />,
-  Envelope: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['envelope']} />,
-  Eye: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['eye']} />,
-  EyeSlash: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['eye-slash']} />,
-  FileCertificate: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['file-certificate']} />,
-  FileChartColumn: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['file-chart-column']} />,
-  FileInvoiceDollar: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['file-invoice-dollar']} />,
-  FileLines: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['file-lines']} />,
-  Gear: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['gear']} />,
-  GraduationCap: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['graduation-cap']} />,
-  House: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['house']} />,
-  MagnifyingGlass: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['magnifying-glass']} />,
-  PaperPlaneTop: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['paper-plane-top']} />,
-  SchoolFlag: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['school-flag']} />,
-  ShieldPlus: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['shield-plus']} />,
-  Store: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['store']} />,
-  Suitcase: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['suitcase']} />,
-  Tag: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['tag']} />,
-  BedFront: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['bed-front']} />,
-  TriangleExclamation: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['triangle-exclamation']} />,
-  UserGroup: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['user-group']} />,
-  User: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['user']} />,
-  Wrench: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['wrench']} />,
-  XmarkLarge: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMajor['xmark-large']} />,
-}
-
-export const IconMinor = {
-  ArrowDownToLine: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['arrow-down-to-line']} minor/>,
-  ArrowLeft: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['arrow-left']} minor/>,
-  ArrowRightFromBracket: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['arrow-right-from-bracket']} minor />,
-  ArrowRight: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['arrow-right']} minor />,
-  ArrowUpArrowDown: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['arrow-up-arrow-down']} minor />,
-  ArrowUpFromLine: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['arrow-up-from-line']} minor />,
-  ArrowUpRightFromSquare: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['arrow-up-right-from-square-regular']} minor />,
-  BadgeCheck: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['badge-check']} minor />,
-  BadgePercent: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['badge-percent']} minor />,
-  Ban: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['ban']} minor />,
-  BarsFilter: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['bars-filter']} minor />,
-  Bars: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['bars']} minor />,
-  BedFront: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['bed-front']} minor />,
-  Bold: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['bold']} minor />,
-  Bookmark: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['bookmark']} minor />,
-  Book: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['book']} minor />,
-  Calendar: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['calendar']} minor />,
-  Campground: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['campground']} minor />,
-  CartShopping: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['cart-shopping']} minor />,
-  ChartPieSimple: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['chart-pie-simple']} minor />,
-  Check: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['check']} minor />,
-  ChevronDownSolid: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['chevron-down-solid']} minor />,
-  ChevronLeftSolid: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['chevron-left-solid']} minor />,
-  ChevronRightSolid: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['chevron-right-solid']} minor />,
-  ChevronUpSolid: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['chevron-up-solid']} minor />,
-  CircleDollar: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['circle-dollar']} minor />,
-  CircleExclamation: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['circle-exclamation']} minor />,
-  CircleInfo: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['circle-info']} minor />,
-  CircleSmall: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['circle-small']} minor />,
-  Clock: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['clock']} minor />,
-  Clone: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['clone']} minor />,
-  Comment: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['comment']} minor />,
-  CreditCard: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['credit-card']} minor />,
-  Desktop: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['desktop']} minor />,
-  EllipsisVertical: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['ellipsis-vertical']} minor />,
-  Envelope: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['envelope']} minor />,
-  Eye: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['eye']} minor />,
-  EyeSlash: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['eye-slash']} minor />,
-  Facebook: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['facebook']} minor />,
-  FireBurner: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['fire-burner']} minor />,
-  Fire: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['fire']} minor />,
-  Folder: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['folder']} minor />,
-  FolderOpen: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['folder-open']} minor />,
-  GraduationCap: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['graduation-cap']} minor />,
-  H1: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['h1']} minor />,
-  Heart: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['heart']} minor />,
-  HeartSolid: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['heart-solid']} minor />,
-  Instagram: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['instagram']} minor />,
-  Italic: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['italic']} minor />,
-  Link: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['link']} minor />,
-  ListOl: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['list-ol']} minor />,
-  ListUl: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['list-ul']} minor />,
-  LocationDot: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['location-dot']} minor />,
-  Lock: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['lock']} minor />,
-  Loveseat: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['loveseat']} minor />,
-  MagnifyingGlass: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['magnifying-glass']} minor />,
-  Minus: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['minus']} minor />,
-  MugTea: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['mug-tea']} minor />,
-  Paperclip: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['paperclip']} minor />,
-  Pen: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['pen']} minor />,
-  PersonPraying: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['person-praying']} minor />,
-  PlaneArrival: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['plane-arrival']} minor />,
-  PlaneDeparture: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['plane-departure']} minor />,
-  Plus: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['plus']} minor />,
-  Print: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['print']} minor />,
-  RotateLeft: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['rotate-left']} minor />,
-  RotateRight: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['rotate-right']} minor />,
-  School: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['school']} minor />,
-  ShareNodes: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['share-nodes']} minor />,
-  ShieldPlus: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['shield-plus']} minor />,
-  Spinner: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['spinner']} minor />,
-  Star: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['star']} minor />,
-  StarSolid: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['star-solid']} minor />,
-  Strikethrough: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['strikethrough']} minor />,
-  TableTennisPaddleBall: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['table-tennis-paddle-ball']} minor />,
-  TrashCan: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['trash-can']} minor />,
-  Twitter: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['twitter']} minor />,
-  Underline: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['underline']} minor />,
-  User: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['user']} minor />,
-  Utensils: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['utensils']} minor />,
-  Whatsapp: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['whatsapp']} minor />,
-  Wheelchair: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['wheelchair']} minor />,
-  Wifi: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['wifi']} minor />,
-  Xmark: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['xmark']} minor />,
-  Youtube: (props: HTMLAttributes<HTMLElement>) => <ProductLanguageIcon {...props} icon={IconListMinor['youtube']} minor />,
-}

package/src/lib/components/icon/index.tsx

@@ -1 +0,0 @@
-export * from './icon'

package/src/lib/components/icon/stories/components.tsx

@@ -1,282 +0,0 @@
-import { Borders, Focused, Interactive, Surface } from 'foundations/color-system'
-import { Margin, Padding } from 'foundations/spacing'
-import { Typography } from '@foundations'
-import { StoryComponent } from '@stories'
-import styled from 'styled-components'
-import { Icon, IconMinor } from  '../icon'
-import { Body } from 'components/typography'
-import { ReactNode } from 'react'
-import { Playground } from 'storybook-addon-jarle-monaco'
-import { Button } from 'components/molecules'
-import { InputField } from 'components/input-field'
-
-const Table = styled.div<{ children?: ReactNode }>`
-  background: ${Surface.Default};
-  border-radius: 6px;
-  width: 100%;
-`
-
-const Row = styled.div`
-  width: 25%;
-  flex-direction: row;
-  display: inline-block;
-  zoom: 1; 
-  background-color: ${Surface.Default};
-`
-
-const Column = styled.div`
-  ${Typography.Body}
-  display: flex;
-  padding: ${Padding.xxs};
-  flex: 1;
-  align-items: center;
-  justify-content: center;
-  justify-content: space-between;
-`
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  padding: ${Padding.xs};
-  gap: ${Margin.s};
-  width: 100%;
-  background: ${Surface.Default.Hover};
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  &:hover {
-    span {
-      opacity: 1;
-      z-index: 1;
-    }
-  }
-`
-
-const Span = styled.span`
-  opacity: 0;
-  transition: opacity 1s;
-  width: 120px;
-  background-color: ${Interactive.Subtle.Disabled};
-  color: ${Surface.Default.Default};
-  text-align: center;
-  padding: ${Padding.xxs} ${Padding.none};
-  border-radius: 6px;
-  position: absolute;
-  z-index: -1;
-  bottom: 105%;
-  left: 50%;
-  margin-left: -60px;
-  &:after {
-    content: " ";
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    margin-left: -5px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: ${Interactive.Subtle.Disabled} transparent transparent transparent;
-  }
-`
-
-const DivWrapper = styled.div`
-  display: flex;
-  gap: 15px;
-  margin: ${Margin.l} 0;
-`
-
-const getObjectKey = (o: object) => Object.keys(o)[0]
-const getObjectValue = (o: object) => Object.values(o)[0]
-const getIconList = (o: object) => Object.entries(o).map(([key, value]) => ({ [key]: value }))
-
-export const IconTable: StoryComponent = () => {
-  const icons = getIconList(Icon)
-  return (
-    <Table>
-      {
-        icons.map((icon, index) =>
-          <Row key={index}>
-            <Column>
-              <Wrapper onClick={() => {navigator.clipboard.writeText(`<Icon.${getObjectKey(icon)} />`)}}>
-                <Span >Copy me!</Span>
-                {getObjectValue(icon)()}
-                <Body>{getObjectKey(icon)}</Body>
-              </Wrapper>
-            </Column>
-          </Row>
-        )
-      }
-    </Table>
-  )
-}
-
-export const IconMinorTable: StoryComponent = () => {
-  const icons = getIconList(IconMinor)
-  return (
-    <Table>
-      {
-        icons.map((icon, index) =>
-        <Row key={index}>
-            <Column>
-              <Wrapper onClick={() => {navigator.clipboard.writeText(`<IconMinor.${getObjectKey(icon)} />`)}}>
-                <Span>Copy me!</Span>
-                {getObjectValue(icon)()}
-                <Body>{getObjectKey(icon)}</Body>
-              </Wrapper>
-            </Column>
-          </Row>
-        )
-      }
-    </Table>
-  )
-}
-
-export const IconCodeExample = () => (
-  <Playground
-    code={`
-      // Try replacing the 'BuildingColumns' for another from the Icon list.
-      <Icon.BuildingColumns />
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        Icon,
-        DivWrapper,
-      },
-    }}
-  />
-)
-
-export const IconButtonCodeExample = () => (
-  <Playground
-    code={`
-      // Try replacing the Button Type or the Icon name.
-      <div>
-        <DivWrapper>
-          <Icon.BuildingColumns />
-          <Icon.BullseyeArrow />
-        </DivWrapper>
-        <DivWrapper>
-          <Button IconPrefix={IconMinor.CircleInfo}>Basic</Button>
-          <Button primary IconPrefix={IconMinor.FolderOpen}>Primary</Button>
-          <Button destructive IconPrefix={IconMinor.School}>Destructive</Button>
-          <Button destructive primary IconPrefix={IconMinor.PlaneArrival}>Destructive Primary</Button>
-          <Button outline IconPrefix={IconMinor.PlaneDeparture}>Outline</Button>
-          <Button plain IconPrefix={IconMinor.BadgeCheck}>Plain</Button>
-          <Button plain subtle IconPrefix={IconMinor.Fire}>Plain Subtle</Button>
-        </DivWrapper>
-        <div>
-          <label htmlFor="input_example">I can have Icons too!</label>
-          <InputField name="input_example!">
-            <InputField.Icon>
-              <IconMinor.CreditCard title="Icons render before the input" />
-            </InputField.Icon>
-            <InputField.Controls>
-              <IconMinor.CreditCard title="Controls render after the input" />
-            </InputField.Controls>
-          </InputField>
-        </div>
-      </div>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        Icon,
-        IconMinor,
-        Button,
-        InputField,
-        DivWrapper,
-      },
-    }}
-  />
-)
-
-const Select = styled.select`
-  padding: ${Padding.xs} ${Padding.m};
-  border: 1px solid ${Borders.Default.Default};
-  border-radius: 6px;
-  gap: 8px;
-  background: ${Surface.Default.Default};
-  width: 150px;
-  font-family: 'Inter';
-  font-weight: 300;
-  font-size: 14px;
-  line-height: 20px;
-  height: 40px;
-  margin: ${Margin.m};
-
-  &:focus  {
-    outline: 1px solid ${Focused.Default}
-  }
-
-  &:focus-visible  {
-    border: 1px solid ${Focused.Default}
-  }
-`
-
-export const ChangeIconColor = () => (
-  <Playground
-    code={`
-      // Try replacing the Button Type or the Icon name.
-
-      const [color, setColor] = useState('gray');
-      
-      const ColorfullBuildingColumns = styled(Icon.BuildingColumns)<{color: string}>\`
-        path {
-          fill: \${({ color }) => color};
-        }
-      \`;
-      
-      const ColorfullBullseyeArrow = styled(Icon.BullseyeArrow)<{color: string}>\`
-        path {
-          fill: \${({ color }) => color};
-        }
-      \`;
-
-      const ColorfullYouTube = styled(IconMinor.Youtube)<{color: string}>\`
-        path {
-          fill: \${({ color }) => color};
-        }
-      \`;
-
-      const ColorfullTwitter = styled(IconMinor.Twitter)<{color: string}>\`
-        path {
-          fill: \${({ color }) => color};
-        }
-      \`;
-
-      const ColorfullTriangleExclamation = styled(Icon.TriangleExclamation)<{color: string}>\`
-        path {
-          fill: \${({ color }) => color};
-        }
-      \`;
-
-      <div style={{display:'flex', gap:'8px'}}>
-        <Select onChange={(e) => setColor(e.target.value)}>
-          <option value='gray'>Gray</option>
-          <option value='red'>Red</option>
-          <option value='blue'>Blue</option>
-          <option value='orange'>Orange</option>
-          <option value='green'>Green</option>
-          <option value='magenta'>Magenta</option>
-        </Select>
-        <DivWrapper>
-          <ColorfullBuildingColumns color={color}/>
-          <ColorfullBullseyeArrow color={color}/>
-          <ColorfullYouTube color={color}/>
-          <ColorfullTwitter color={color}/>
-          <ColorfullTriangleExclamation color={color}/>
-        </DivWrapper>
-      </div>
-    `}
-    providerProps={{
-      renderAsComponent: true,
-      scope: {
-        Icon,
-        IconMinor,
-        styled,
-        Select,
-        DivWrapper,
-      },
-    }}
-  />
-)

package/src/lib/components/icon/stories/icon.stories.mdx

@@ -1,65 +0,0 @@
-import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
-import { Icon, IconMinor } from '../index'
-import { IconTable, IconMinorTable, IconCodeExample, IconButtonCodeExample, ChangeIconColor } from './components'
-import { Button } from 'components/molecules/button'
-
-<Meta title="Components/Icon" />
-
-# Icon System
-
-### Table of Contents
-1. [How to use](#how-to-use)
-2. [Icon vs IconMinor](#icon-vs-iconMinor)
-3. [Major Icons](#major-icons)
-4. [Minor Icons](#minor-icons)
-5. [Inside Inputs and Buttons](#in-other-components)
-6. [Changing Icon Color](#changing-olor)
-
-
-For more details, check out the guidelines on [Figma](https://www.figma.com/file/ue1CurHfZ426o2T2l8Dk64/Edvisor-Product-Language?node-id=997%3A478)
-
-<div id="how-to-use"/>
-
-## How to Use
-```tsx
-import { Icon, IconMinor } from './index'
-
-<Icon.Check />
-<IconMinor.Check />
-```
-
-<div id="icon-vs-iconMinor" />
-
-## Icon vs IconMinor
-The Icon uses the major Icons whilst the IconMinor Uses the Minor Icons (see list below).
-<Canvas>
-    <Icon.Check />
-    <IconMinor.Check />
-</Canvas>
-
-
-<div id="major-icons" />
-
-## Major icons
-Generally used for primary and secondary navigation. 20x20 bounding box. Rendered at 20x20.
-
-<IconTable/>
-
-<div id="minor-icons" />
-
-## Minor icons
-Generally used for buttons, form elements, and to support text. 20x20 bounding box. Rendered at 17x17.
-
-<IconMinorTable/>
-
-
-<div id="in-other-components" />
-
-## Inside Inputs and Buttons
-<IconButtonCodeExample />
-
-<div id="changing-olor" />
-
-## Changing Icon Color
-You can change the color using styled components, setting the fill property of the path.
-<ChangeIconColor/>

package/src/lib/components/index.ts

@@ -1,19 +0,0 @@
-export * from './alert-banner'
-export * from './badge'
-export * from './card'
-export * from './checkbox'
-export * from './divider'
-export * from './input-field'
-export * from './layout'
-export * from './link'
-export * from './tag'
-export * from './thumbnail'
-export * from './typography'
-export * from './tabs'
-export * from './icon'
-export * from './flag'
-export * from './spinner'
-
-//Adding everything in molecules
-export * from './molecules'
-export * from './organisms'

package/src/lib/components/input-field/components/index.ts

@@ -1,2 +0,0 @@
-export * from './labeled-input'
-export * from './stepper'

package/src/lib/components/input-field/components/labeled-input.tsx

@@ -1,54 +0,0 @@
-import styled from 'styled-components'
-
-import { Icons, Margin } from '@foundations'
-import { PropsWithChildren, FC, maybeRender, safeArray } from '@helpers'
-import { Flex } from 'components/layout'
-import { Body, Label } from 'components/typography'
-import { IconMinor } from 'components/icon'
-
-
-const HTMLLabel = styled.label`
-  all: unset;
-`
-
-const LabelText = styled(Label)`
-  margin-bottom: ${Margin.xxs};
-`
-
-const HelpText = styled(Body)`
-  margin-bottom: ${Margin.xxs};
-`
-
-const ErrorMessage = styled(Flex)`
-  margin-bottom: ${Margin.xxs};
-  & path {
-    fill: ${Icons.Warning};
-  }
-`
-
-interface ILabeledInputProps extends PropsWithChildren {
-  label?: string
-  helpText?: string
-  errors?: { message: string }[]
-}
-
-export const LabeledInput: FC<ILabeledInputProps> = (props) => {
-  return (
-    <HTMLLabel>
-      <label>
-        {maybeRender(props.label, <LabelText>{props.label}</LabelText>)}
-        {props.children}
-      </label>
-      {safeArray(props.errors).map((e) => (
-        <ErrorMessage center key={e.message}>
-          <IconMinor.CircleExclamation />
-          <Body>{e.message}</Body>
-        </ErrorMessage>
-      ))}
-      {maybeRender(
-        props.helpText,
-        <HelpText subdued>{props.helpText}</HelpText>
-      )}
-    </HTMLLabel>
-  )
-}